@extends('layouts.master')

@section('title', $category->name . ' - The Mini Port')

@section('content')
<style>
    /* Custom Styles for Category Page */
    .category-hero {
        position: relative;
        background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
        overflow: hidden;
    }
    .category-hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: url('https://source.unsplash.com/1600x900/?{{ $category->slug }},business') center/cover no-repeat;
        opacity: 0.1;
        mix-blend-mode: overlay;
    }
    .glass-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
    }
    
    /* Filter Sidebar */
    .filter-sidebar {
        position: sticky;
        top: 100px;
    }
    .filter-group-title {
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6c757d;
        margin-bottom: 1rem;
    }
    .custom-checkbox .form-check-input {
        width: 1.2em;
        height: 1.2em;
        margin-top: 0.15em;
        border-radius: 4px;
        border: 2px solid #dee2e6;
    }
    .custom-checkbox .form-check-input:checked {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

    /* Product Card */
    .product-card {
        transition: all 0.3s ease;
        border: 1px solid #f0f0f0;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }
    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.08);
        border-color: transparent;
    }
    .product-image-wrapper {
        position: relative;
        padding-top: 100%; /* 1:1 Aspect Ratio */
        background: #f8f9fa;
        overflow: hidden;
    }
    .product-image {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: contain;
        transition: transform 0.5s ease;
        padding: 1rem;
    }
    .product-card:hover .product-image {
        transform: scale(1.05);
    }
    .quick-view-btn {
        position: absolute;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%);
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        opacity: 0;
        z-index: 2;
    }
    .product-card:hover .quick-view-btn {
        bottom: 20px;
        opacity: 1;
    }
    
    /* Pagination */
    .pagination .page-link {
        border: none;
        color: #6c757d;
        border-radius: 8px;
        margin: 0 3px;
        font-weight: 600;
    }
    .pagination .page-item.active .page-link {
        background-color: var(--bs-primary);
        color: white;
        box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3);
    }
</style>

<!-- Category Hero -->
<section class="category-hero py-5 text-white">
    <div class="container position-relative z-1">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <nav aria-label="breadcrumb" class="mb-3">
                    <ol class="breadcrumb text-white-50 small fw-medium">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-white-50 text-decoration-none">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('public.categories.index') }}" class="text-white-50 text-decoration-none">Categories</a></li>
                        <li class="breadcrumb-item active text-white" aria-current="page">{{ $category->name }}</li>
                    </ol>
                </nav>
                <h1 class="display-4 fw-bold mb-3">{{ $category->name }}</h1>
                <div class="d-flex align-items-center gap-4">
                    <div class="d-flex align-items-center gap-2">
                        <div class="bg-white bg-opacity-25 rounded-circle p-1">
                            <i class="bi bi-box-seam fs-5 text-white"></i>
                        </div>
                        <span class="fw-medium">{{ $category->products_count }} Products</span>
                    </div>
                    <div class="vr bg-white opacity-25"></div>
                    <div class="d-flex align-items-center gap-2">
                        <div class="bg-white bg-opacity-25 rounded-circle p-1">
                            <i class="bi bi-shield-check fs-5 text-white"></i>
                        </div>
                        <span class="fw-medium">KYC Submitted Suppliers</span>
                    </div>
                </div>
                <div class="mt-4">
                    @if($category->children->count() > 0)
                        <h6 class="text-white-50 small text-uppercase fw-bold mb-2">Sub Categories:</h6>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($category->children as $child)
                                <a href="{{ route('public.categories.show', $child->slug) }}" class="badge bg-white bg-opacity-10 text-white text-decoration-none border border-white border-opacity-10 hover:bg-opacity-25 px-3 py-2 rounded-pill">
                                    {{ $child->name }}
                                </a>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
            <div class="col-lg-4 d-none d-lg-block">
                <div class="glass-card p-4 text-center">
                    <i class="bi bi-grid-3x3-gap-fill display-1 text-white opacity-25"></i>
                    <p class="mb-0 mt-2 text-white-50 small">Browse premium products in {{ $category->name }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Main Content -->
<section class="bg-light py-5">
    <div class="container">
        <div class="row g-4">
            <!-- Sidebar Filters -->
            <div class="col-lg-3">
                <div class="filter-sidebar">
                    <!-- About Category -->
                    <div class="card border-0 shadow-sm mb-4 rounded-4">
                        <div class="card-body p-4">
                            <h6 class="filter-group-title mb-3">About Category</h6>
                            <p class="small text-muted mb-4">
                                Browse the best {{ $category->name }} products. Connect directly with manufacturers and suppliers to get the best quotes.
                            </p>
                            <a href="{{ route('post.requirement.index', ['category' => $category->id]) }}" class="btn btn-warning w-100 fw-bold text-white shadow-sm">
                                <i class="bi bi-megaphone-fill me-2"></i>Post Requirement
                            </a>
                        </div>
                    </div>

                    <!-- Filters (Working) -->
                    <div class="card border-0 shadow-sm rounded-4">
                        <div class="card-body p-4">
                            <form action="{{ url()->current() }}" method="GET" id="categoryFilterForm">
                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <h5 class="fw-bold mb-0"><i class="bi bi-funnel me-2"></i>Filters</h5>
                                    @if(request()->hasAny(['min_price', 'max_price', 'min_moq', 'max_moq', 'location', 'verified']))
                                        <a href="{{ url()->current() }}" class="btn btn-link btn-sm text-decoration-none p-0 text-danger">
                                            <i class="bi bi-x-circle me-1"></i>Clear
                                        </a>
                                    @endif
                                </div>

                                <!-- Price Range -->
                                <div class="mb-4">
                                    <h6 class="filter-group-title"><i class="bi bi-currency-rupee me-1"></i>Price Range (₹)</h6>
                                    <div class="d-flex align-items-center gap-2 mb-2">
                                        <input type="number" name="min_price" class="form-control form-control-sm" placeholder="Min" value="{{ request('min_price') }}" min="0">
                                        <span class="text-muted">-</span>
                                        <input type="number" name="max_price" class="form-control form-control-sm" placeholder="Max" value="{{ request('max_price') }}" min="0">
                                    </div>
                                </div>

                                <hr class="text-muted opacity-25 my-3">

                                <!-- MOQ Filter -->
                                <div class="mb-4">
                                    <h6 class="filter-group-title"><i class="bi bi-box-seam me-1"></i>MOQ Range</h6>
                                    <div class="d-flex align-items-center gap-2">
                                        <input type="number" name="min_moq" class="form-control form-control-sm" placeholder="10" value="{{ request('min_moq') }}" min="1">
                                        <span class="text-muted">-</span>
                                        <input type="number" name="max_moq" class="form-control form-control-sm" placeholder="150" value="{{ request('max_moq') }}" min="1">
                                    </div>
                                    <small class="text-muted">Min Order Quantity (10-150)</small>
                                </div>

                                <hr class="text-muted opacity-25 my-3">

                                <!-- Location Filter -->
                                <div class="mb-4">
                                    <h6 class="filter-group-title"><i class="bi bi-geo-alt me-1"></i>Location</h6>
                                    <input type="text" name="location" class="form-control form-control-sm" placeholder="City, State or Country" value="{{ request('location') }}">
                                </div>

                                <hr class="text-muted opacity-25 my-3">

                                <!-- Supplier Type -->
                                <div class="mb-4">
                                    <h6 class="filter-group-title">Supplier Type</h6>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="verified" id="verified" value="1" {{ request('verified') ? 'checked' : '' }}>
                                        <label class="form-check-label small" for="verified">KYC Submitted Only</label>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary w-100 fw-bold">
                                    <i class="bi bi-search me-1"></i>Apply Filters
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Product Grid -->
            <div class="col-lg-9">
                @if($products->count() > 0)
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <p class="mb-0 text-muted small">Showing <span class="fw-bold text-dark">{{ $products->firstItem() }}-{{ $products->lastItem() }}</span> of {{ $products->total() }} results</p>
                        <div class="d-flex align-items-center gap-3">
                            {{-- View Toggle --}}
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="gridViewBtn" title="Grid View">
                                    <i class="bi bi-grid-3x3-gap-fill"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary active" id="listViewBtn" title="List View">
                                    <i class="bi bi-list-ul"></i>
                                </button>
                            </div>
                            <select class="form-select form-select-sm w-auto border-0 shadow-sm">
                                <option selected>Sort by: Featured</option>
                                <option value="price_low">Price: Low to High</option>
                                <option value="price_high">Price: High to Low</option>
                                <option value="newest">Newest Arrivals</option>
                            </select>
                        </div>
                    </div>

                    {{-- TradeIndia Style List View (Default) --}}
                    <div id="listView">
                        @foreach($products as $product)
                            @include('public.products.partials.tradeindia-card', ['product' => $product])
                        @endforeach
                    </div>

                    {{-- Grid View (Hidden by default) --}}
                    <div id="gridView" style="display: none;">
                    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
                        @foreach($products as $product)
                            <div class="col">
                                <div class="product-card h-100 position-relative">
                                    <!-- Image -->
                                    <div class="product-image-wrapper">
                                        <a href="{{ route('public.products.show', $product->slug) }}">
                                            <img src="{{ $product->main_image }}" class="product-image" alt="{{ $product->name }}">
                                        </a>
                                        <!-- Quick View Button -->
                                        <button class="btn btn-light rounded-pill shadow-sm fw-bold px-4 py-2 quick-view-btn" 
                                                data-slug="{{ $product->slug }}">
                                            <i class="bi bi-eye me-2"></i>Quick View
                                        </button>
                                        
                                        @if($product->isPromoted())
                                            <span class="position-absolute top-0 start-0 m-3 badge rounded-pill shadow-sm" 
                                                  style="background: {{ $product->promotion->package->badge_color }};">
                                                {{ $product->promotion->package->badge_text }}
                                            </span>
                                        @endif
                                    </div>

                                    <!-- Content -->
                                    <div class="p-4">
                                        <div class="mb-2">
                                            <small class="text-muted text-uppercase fw-bold" style="font-size: 0.7rem;">{{ $product->category->name }}</small>
                                        </div>
                                        <h5 class="card-title h6 fw-bold mb-2 text-truncate">
                                            <a href="{{ route('public.products.show', $product->slug) }}" class="text-dark text-decoration-none stretched-link">
                                                {{ $product->name }}
                                            </a>
                                        </h5>
                                        <div class="mb-3">
                                            <!-- Platform MOQ Box -->
                                            <div style="margin-bottom: 6px;">
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="bi bi-box-seam text-orange-600" style="font-size: 0.85rem;"></i>
                                                    <span style="font-size: 0.75rem; font-weight: 500; color: #374151; white-space: nowrap;">
                                                        Platform MOQ Range: <span style="color: #000; font-weight: 600; font-size: 0.85rem;">{{ \App\Models\Setting::getValue('min_moq', 10) }} - {{ \App\Models\Setting::getValue('max_moq', 150) }}</span>
                                                    </span>
                                                </div>
                                            </div>
                                            <!-- Product MOQ Box -->
                                            <div style="">
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="bi bi-box-seam text-orange-600" style="font-size: 0.85rem;"></i>
                                                    <span style="font-size: 0.75rem; font-weight: 500; color: #374151; white-space: nowrap;">
                                                        Product MOQ: <span style="color: #000; font-weight: 600; font-size: 0.85rem;">{{ $product->moq ?? 1 }} {{ $product->unit->name ?? 'Pieces' }}</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="d-flex align-items-end justify-content-between mb-3">
                                            <div>
                                                <span class="h5 fw-bold text-primary mb-0">{{ $product->currency == 'USD' ? '$' : '₹' }}{{ number_format($product->price, 2) }}</span>
                                            </div>
                                        </div>
                                        
                                        <hr class="opacity-10 my-2">
                                        
                                        <div class="d-flex align-items-center gap-2">
                                            @if($product->seller->logo)
                                                <img src="{{ asset('storage/' . $product->seller->logo) }}" class="rounded-circle" width="24" height="24" alt="Seller">
                                            @else
                                                <div class="rounded-circle bg-light d-flex align-items-center justify-content-center fw-bold text-muted" style="width: 24px; height: 24px; font-size: 10px;">
                                                    {{ substr($product->seller->company_name, 0, 1) }}
                                                </div>
                                            @endif
                                            <small class="text-muted text-truncate" style="max-width: 120px;">{{ $product->seller->company_name }}</small>
                                            @if($product->seller->is_verified || in_array($product->seller->kyc_status, ['submitted', 'verified']))
                                                <i class="bi bi-patch-check-fill text-success small" title="KYC Submitted"></i>
                                            @else
                                                <i class="bi bi-exclamation-circle text-muted small" title="KYC Pending"></i>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    </div> {{-- End gridView wrapper --}}

                    <div class="mt-5 d-flex justify-content-center">
                        {{ $products->links() }}
                    </div>

                    {{-- View Toggle Script --}}
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            const gridBtn = document.getElementById('gridViewBtn');
                            const listBtn = document.getElementById('listViewBtn');
                            const gridView = document.getElementById('gridView');
                            const listView = document.getElementById('listView');
                            
                            if (gridBtn && listBtn && gridView && listView) {
                                gridBtn.addEventListener('click', function() {
                                    gridView.style.display = 'block';
                                    listView.style.display = 'none';
                                    gridBtn.classList.add('active');
                                    listBtn.classList.remove('active');
                                    localStorage.setItem('productView', 'grid');
                                });
                                
                                listBtn.addEventListener('click', function() {
                                    listView.style.display = 'block';
                                    gridView.style.display = 'none';
                                    listBtn.classList.add('active');
                                    gridBtn.classList.remove('active');
                                    localStorage.setItem('productView', 'list');
                                });
                                
                                // Remember preference
                                const savedView = localStorage.getItem('productView');
                                if (savedView === 'grid') {
                                    gridBtn.click();
                                }
                            }
                        });
                    </script>
                @else
                    <div class="text-center py-5 bg-white rounded-4 shadow-sm">
                        <div class="mb-4">
                            <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                                <i class="bi bi-search fs-1 text-muted opacity-50"></i>
                            </div>
                        </div>
                        <h4 class="fw-bold text-dark mb-2">No products found</h4>
                        <p class="text-muted mb-4">We couldn't find any products in this category yet.</p>
                        <a href="{{ route('public.products.index') }}" class="btn btn-primary px-4 py-2 fw-bold rounded-pill">
                            Browse All Products
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection