@extends('layouts.app')
@section('title', 'Shop Sarees Catalogue | Saree Store')

@section('content')
<!-- BREADCRUMB -->
@include('layouts.breadcrumb', [
    'title' => 'Saree Collection', 
    'crumbs' => [
        ['name' => 'Home', 'url' => route('home')], 
        ['name' => 'Shop Sarees', 'url' => null]
    ]
])

<!-- SHOP PAGE CONTENT -->
<div class="ul-container py-5">
    <div class="row g-4">
        <!-- SIDEBAR FILTERS (STICKY ON SCROLL) -->
        <div class="col-lg-3 shop-sidebar-col">
            <div class="p-4 rounded-4 bg-white border shadow-sm shop-sidebar-card">
                <!-- Search Box -->
                <div class="mb-4">
                    <h6 class="fw-bold mb-3" style="color: #2B1820;">Search Catalogue</h6>
                    <form method="GET" action="{{ route('shop') }}">
                        @if(request('category')) <input type="hidden" name="category" value="{{ request('category') }}"> @endif
                        @if(request('brand')) <input type="hidden" name="brand" value="{{ request('brand') }}"> @endif
                        @if(request('sort')) <input type="hidden" name="sort" value="{{ request('sort') }}"> @endif
                        
                        <div class="position-relative">
                            <input type="text" name="search" class="form-control ps-4 pe-5 rounded-3" placeholder="Search sarees..." value="{{ request('search') }}" style="border-color: #E6DADD;">
                            <button type="submit" class="btn position-absolute end-0 top-50 translate-middle-y text-muted pe-3 border-0">
                                <i class="flaticon-search-interface-symbol"></i>
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Categories Filter -->
                <div class="mb-4 pt-3 border-top">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="fw-bold mb-0" style="color: #2B1820;">Categories</h6>
                        @if(request('category'))
                            <a href="{{ route('shop', request()->except('category')) }}" class="small text-danger text-decoration-none">Clear</a>
                        @endif
                    </div>
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2">
                            <a href="{{ route('shop', request()->except('category')) }}" class="text-decoration-none d-flex justify-content-between align-items-center {{ !request('category') ? 'fw-bold text-danger' : 'text-secondary' }}">
                                <span>All Categories</span>
                                <span class="badge rounded-pill bg-light text-dark">{{ $products->total() }}</span>
                            </a>
                        </li>
                        @foreach($categories as $cat)
                            <li class="mb-2">
                                <a href="{{ route('shop', array_merge(request()->query(), ['category' => $cat->slug])) }}" class="text-decoration-none d-flex justify-content-between align-items-center {{ request('category') == $cat->slug || request('category') == $cat->id ? 'fw-bold text-danger' : 'text-secondary' }}">
                                    <span>{{ $cat->name }}</span>
                                    <span class="badge rounded-pill bg-light text-dark">{{ $cat->products_count }}</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <!-- Brands Filter -->
                <div class="mb-4 pt-3 border-top">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="fw-bold mb-0" style="color: #2B1820;">Weave Brands</h6>
                        @if(request('brand'))
                            <a href="{{ route('shop', request()->except('brand')) }}" class="small text-danger text-decoration-none">Clear</a>
                        @endif
                    </div>
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2">
                            <a href="{{ route('shop', request()->except('brand')) }}" class="text-decoration-none d-flex justify-content-between align-items-center {{ !request('brand') ? 'fw-bold text-danger' : 'text-secondary' }}">
                                <span>All Brands</span>
                            </a>
                        </li>
                        @foreach($brands as $br)
                            <li class="mb-2">
                                <a href="{{ route('shop', array_merge(request()->query(), ['brand' => $br->slug])) }}" class="text-decoration-none d-flex justify-content-between align-items-center {{ request('brand') == $br->slug || request('brand') == $br->id ? 'fw-bold text-danger' : 'text-secondary' }}">
                                    <span>{{ $br->name }}</span>
                                    <span class="badge rounded-pill bg-light text-dark">{{ $br->products_count }}</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <!-- Reset Filters Button -->
                @if(request()->hasAny(['search', 'category', 'brand', 'sort']))
                    <div class="pt-3 border-top text-center">
                        <a href="{{ route('shop') }}" class="btn btn-outline-danger btn-sm w-100 rounded-3">
                            Reset All Filters
                        </a>
                    </div>
                @endif
            </div>
        </div>

        <!-- MAIN PRODUCTS CATALOGUE -->
        <div class="col-lg-9">
            <!-- TOP TOOLBAR -->
            <div class="p-3 mb-4 rounded-4 bg-white border shadow-sm d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                <div class="text-muted small fw-medium">
                    Showing {{ $products->firstItem() ?? 0 }}–{{ $products->lastItem() ?? 0 }} of {{ $products->total() }} sarees
                </div>

                <div class="d-flex align-items-center gap-2">
                    <span class="small fw-semibold text-dark">Sort By:</span>
                    <form method="GET" action="{{ route('shop') }}" class="d-inline">
                        @if(request('category')) <input type="hidden" name="category" value="{{ request('category') }}"> @endif
                        @if(request('brand')) <input type="hidden" name="brand" value="{{ request('brand') }}"> @endif
                        @if(request('search')) <input type="hidden" name="search" value="{{ request('search') }}"> @endif
                        
                        <select name="sort" onchange="this.form.submit()" class="form-select form-select-sm rounded-3" style="width: 180px; border-color: #E6DADD;">
                            <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Latest Additions</option>
                            <option value="price_low_high" {{ request('sort') == 'price_low_high' ? 'selected' : '' }}>Price: Low to High</option>
                            <option value="price_high_low" {{ request('sort') == 'price_high_low' ? 'selected' : '' }}>Price: High to Low</option>
                            <option value="name_asc" {{ request('sort') == 'name_asc' ? 'selected' : '' }}>Saree Name (A-Z)</option>
                        </select>
                    </form>
                </div>
            </div>

            <!-- PRODUCT GRID (1 CARD PER ROW ON MOBILE, 2 ON TABLET, 3 ON DESKTOP) -->
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
                @forelse($products as $prod)
                    <div class="col">
                        <div class="ul-product border rounded-4 overflow-hidden h-100 bg-white shadow-sm" style="cursor: pointer;" onclick="if(!event.target.closest('.ul-product-actions')) { window.location.href = '{{ route('product.details', $prod->slug) }}'; }">
                            <div class="ul-product-heading">
                                <span class="ul-product-price">₹{{ number_format($prod->sale_price ?: $prod->price, 2) }}</span>
                                @if($prod->sale_price && $prod->sale_price < $prod->price)
                                    <span class="ul-product-discount-tag">{{ round((($prod->price - $prod->sale_price) / $prod->price) * 100) }}% Off</span>
                                @endif
                            </div>

                            <div class="ul-product-img">
                                <img src="{{ asset($prod->image) }}" alt="{{ $prod->name }}" style="height: 380px; max-height: 420px; object-fit: cover; width: 100%;">

                                <!-- Login Protected Cart & Wishlist Buttons -->
                                <div class="ul-product-actions">
                                    @auth('web')
                                        <form method="POST" action="{{ route('cart.add', $prod) }}" class="d-inline">
                                            @csrf
                                            <button type="submit" class="border-0 bg-transparent p-0" title="Add to Cart"><i class="flaticon-shopping-bag"></i></button>
                                        </form>
                                        <a href="{{ route('product.details', $prod->slug) }}" title="View Saree Details"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg></a>
                                        <form method="POST" action="{{ route('wishlist.toggle', $prod) }}" class="d-inline">
                                            @csrf
                                            <button type="submit" class="border-0 bg-transparent p-0" title="Add to Wishlist"><i class="flaticon-heart"></i></button>
                                        </form>
                                    @else
                                        <a href="{{ route('login') }}" title="Sign in to Add to Cart"><i class="flaticon-shopping-bag"></i></a>
                                        <a href="{{ route('product.details', $prod->slug) }}" title="View Saree Details"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg></a>
                                        <a href="{{ route('login') }}" title="Sign in to Add to Wishlist"><i class="flaticon-heart"></i></a>
                                    @endauth
                                </div>
                            </div>

                            <div class="ul-product-txt p-3">
                                <h4 class="ul-product-title mb-1">
                                    <a href="{{ route('product.details', $prod->slug) }}" class="text-dark text-decoration-none fw-semibold">{{ $prod->name }}</a>
                                </h4>
                                <h5 class="ul-product-category small text-muted">
                                    {{ $prod->categoryModel->name ?? ($prod->category ?: 'Saree Collection') }}
                                </h5>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 py-5 text-center text-muted">
                        <div class="mb-3">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#CBBEC5" stroke-width="1.5">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="8" y1="12" x2="16" y2="12"></line>
                            </svg>
                        </div>
                        <h5>No sarees match your filter criteria</h5>
                        <p class="small">Try clearing your search query or selecting a different category filter.</p>
                        <a href="{{ route('shop') }}" class="btn btn-danger btn-sm rounded-3 mt-2">View All Sarees</a>
                    </div>
                @endforelse
            </div>

            <!-- PAGINATION LINKS (BOTTOM RIGHT) -->
            <div class="d-flex justify-content-end mt-5 pt-3 border-top">
                {{ $products->appends(request()->query())->links('admin.partials.pagination') }}
            </div>
        </div>
    </div>
</div>
@endsection