@extends('front.layouts.app')

@section('title', 'تصفح المنتجات - MedExchange')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/browse-products.css') }}">
    <style>
        .order-request-btn {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius-md);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .order-request-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
            color: white;
        }
        .summary-badge-container {
            position: relative;
        }
        .summary-badge {
            position: absolute;
            top: -10px;
            right: -10px;
            background: #ff4757;
            color: white;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            border: 2px solid white;
            transition: transform 0.2s ease-in-out;
            transform-origin: center;
        }
    </style>
@endsection

@section('content')
    <main class="main-content">
        <div class="container">
            <!-- Page Header -->
            <div class="page-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
                <div class="breadcrumb">
                    <a href="{{ route('home') }}"><i class="fas fa-home"></i> الرئيسية</a>
                    <span>/</span>
                    <span>تصفح المنتجات</span>
                </div>
                
                <div class="header-actions" style="display: flex; gap: 15px; align-items: center;">
                    @can('pharmacy-only')
                    <a href="{{ route('order.summary') }}" class="order-request-btn summary-badge-container">
                        <i class="fas fa-clipboard-list"></i>
                        <span>قائمة طلبات الشراء</span>
                        @php
                            $orderList = session('order_request_list', []);
                            $totalItems = array_reduce($orderList, function($carry, $item) {
                                return $carry + $item['quantity'];
                            }, 0);
                        @endphp
                        <span class="summary-badge" id="orderCount">{{ $totalItems }}</span>
                    </a>
                    @endcan
                    
                    <div class="view-toggle">
                        <button class="view-btn active" data-view="grid">
                            <i class="fas fa-th"></i>
                        </button>
                        <button class="view-btn" data-view="list">
                            <i class="fas fa-list"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="products-container">
                <!-- Sidebar Filters -->
                <aside class="filters-sidebar" id="filtersSidebar">
                    <form action="{{ route('front.products.index') }}" method="GET">
                        <div class="filters-header">
                            <h3>
                                <i class="fas fa-filter"></i>
                                تصفية النتائج
                            </h3>
                            <a href="{{ route('front.products.index') }}" class="clear-filters" style="text-decoration: none;">
                                <i class="fas fa-redo"></i>
                                إعادة تعيين
                            </a>
                        </div>

                        <!-- Category Filter -->
                        <div class="filter-section">
                            <h4 class="filter-title">
                                <i class="fas fa-tag"></i>
                                الفئات
                            </h4>
                            <div class="filter-options">
                                <label class="filter-option">
                                    <input type="radio" name="category" value="all" {{ request('category') == 'all' || !request('category') ? 'checked' : '' }} onchange="this.form.submit()">
                                    <span>جميع الفئات</span>
                                </label>
                                @foreach($categories as $cat)
                                <label class="filter-option">
                                    <input type="radio" name="category" value="{{ $cat->category }}" {{ request('category') == $cat->category ? 'checked' : '' }} onchange="this.form.submit()">
                                    <span>{{ $cat->category }}</span>
                                </label>
                                @endforeach
                            </div>
                        </div>

                        <!-- Price Range Filter -->
                        <div class="filter-section">
                            <h4 class="filter-title">
                                <i class="fas fa-money-bill-wave"></i>
                                نطاق السعر
                            </h4>
                            <div class="price-range">
                                <div class="price-inputs">
                                    <input type="number" name="min_price" value="{{ request('min_price') }}" placeholder="من" min="0">
                                    <span>-</span>
                                    <input type="number" name="max_price" value="{{ request('max_price') }}" placeholder="إلى" min="0">
                                </div>
                                <button type="submit" class="apply-filters-btn" style="margin-top: 15px; width: 100%;">
                                    <i class="fas fa-check"></i> تطبيق
                                </button>
                            </div>
                        </div>
                    </form>
                </aside>

                <!-- Products Grid -->
                <div class="products-main">
                    <!-- Sort & Results Bar -->
                    <div class="results-bar">
                        <div class="results-info">
                            <span class="results-count">عرض <strong>{{ $products->total() }}</strong> منتج</span>
                            <button class="mobile-filter-toggle" id="mobileFilterToggle">
                                <i class="fas fa-filter"></i> الفلاتر
                            </button>
                        </div>
                        <div class="sort-options">
                            <form action="{{ route('front.products.index') }}" method="GET" id="sortForm">
                                @foreach(request()->except('sort') as $key => $value)
                                    <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                                @endforeach
                                <label for="sortBy">ترتيب حسب:</label>
                                <select id="sortBy" name="sort" onchange="this.form.submit()">
                                    <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>الأحدث</option>
                                    <option value="price_low" {{ request('sort') == 'price_low' ? 'selected' : '' }}>السعر: من الأقل للأعلى</option>
                                    <option value="price_high" {{ request('sort') == 'price_high' ? 'selected' : '' }}>السعر: من الأعلى للأقل</option>
                                </select>
                            </form>
                        </div>
                    </div>

                    <!-- Products Grid -->
                    <div class="products-grid" id="productsGrid">
                        @forelse($products as $product)
                        <div class="product-card">
                            <div class="product-image">
                                @if($product->image)
                                    <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}">
                                @else
                                    <i class="fas fa-pills"></i>
                                @endif
                                @if($product->discount > 0)
                                    <span class="discount-badge">-{{ $product->discount }}%</span>
                                @endif
                                <div class="product-actions">
                                    <button class="action-btn view-product-btn" data-id="{{ $product->id }}">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="product-info">
                                <span class="product-category">{{ $product->category }}</span>
                                <h3 class="product-name">{{ $product->name }}</h3>
                                <p class="product-description">{{ Str::limit($product->description, 60) }}</p>
                                <div class="product-meta">
                                    <span class="stock-status {{ $product->status == 'available' ? 'available' : 'low' }}">
                                        <i class="fas fa-{{ $product->status == 'available' ? 'check-circle' : 'exclamation-triangle' }}"></i>
                                        {{ $product->status == 'available' ? 'متوفر' : 'مخزون قليل' }}
                                    </span>
                                    <span style="font-size: 0.85rem; color: var(--text-light);">
                                        <i class="fas fa-boxes"></i> {{ $product->stock_quantity }} {{ $product->unit }}
                                    </span>
                                </div>
                                <div class="product-footer">
                                    <div class="product-price">
                                        @if($product->discount > 0)
                                            <span class="old-price">{{ number_format($product->price, 2) }} جنيه</span>
                                        @endif
                                        <span class="current-price">{{ number_format($product->final_price, 2) }} جنيه</span>
                                    </div>
                                    @can('pharmacy-only')
                                    <button class="add-to-cart-btn add-order-btn" data-url="{{ route('order.add', $product->id) }}">
                                        <i class="fas fa-cart-plus"></i>
                                        <span>طلب شراء</span>
                                    </button>
                                    @endcan
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="empty-products">
                            <div class="empty-icon">
                                <i class="fas fa-box-open"></i>
                            </div>
                            <h3>لا توجد منتجات متاحة</h3>
                            <p>جرب تغيير الفلاتر أو البحث عن منتجات أخرى</p>
                        </div>
                        @endforelse
                    </div>

                    <!-- Pagination -->
                    <div class="pagination">
                        {{ $products->links() }}
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Success Modal -->
    <div class="modal" id="successModal">
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <div class="modal-icon success">
                <i class="fas fa-check-circle"></i>
            </div>
            <h3>تمت إضافة طلب الشراء!</h3>
            <p>تم إضافة المنتج إلى قائمة طلباتك بنجاح</p>
            <div class="modal-actions">
                <button class="btn-secondary" onclick="document.getElementById('successModal').classList.remove('show')">متابعة التصفح</button>
                <a href="{{ route('order.summary') }}" class="btn-primary" style="text-decoration: none;">عرض القائمة الكاملة</a>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.querySelectorAll('.add-order-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const url = this.getAttribute('data-url');
                
                fetch(url, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(response => {
                    if (!response.ok) throw new Error('Network response was not ok');
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        // Update the badge on the current page
                        const orderCountEl = document.getElementById('orderCount');
                        if (orderCountEl) {
                            orderCountEl.textContent = data.count;
                            // Add a little pulse animation
                            orderCountEl.style.transform = 'scale(1.4)';
                            setTimeout(() => orderCountEl.style.transform = 'scale(1)', 200);
                        }

                        // Update all navbar badges
                        document.querySelectorAll('.order-badge-count').forEach(el => {
                            el.textContent = data.count;
                            el.style.display = data.count > 0 ? 'inline-block' : 'none';
                            el.style.transform = 'scale(1.4)';
                            setTimeout(() => el.style.transform = 'scale(1)', 200);
                        });

                        document.getElementById('successModal').classList.add('show');
                    }
                })
                .catch(error => {
                    console.error('Error adding to order:', error);
                    alert('حدث خطأ أثناء إضافة المنتج. يرجى المحاولة مرة أخرى.');
                });
            });
        });

        // View Toggle (Basic)
        document.querySelectorAll('.view-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                if (this.dataset.view === 'list') {
                    document.getElementById('productsGrid').classList.add('list-view');
                } else {
                    document.getElementById('productsGrid').classList.remove('list-view');
                }
            });
        });
    </script>
@endsection