@extends('layouts.buyer')

@section('title', 'ShazkaBags - Katalog Tas Cantik & Elegan')

@push('styles')
<style>
    /* Styling Khusus Halaman Dashboard Pembeli */
    .hero-buyer-card {
        background: linear-gradient(135deg, #FF6584 0%, #F472B6 40%, #38BDF8 100%);
        border-radius: 28px;
        color: #fff;
        position: relative;
        overflow: hidden;
        box-shadow: 0 16px 36px -8px rgba(244, 114, 182, 0.35);
    }
    .hero-glow-orb {
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        filter: blur(50px);
        pointer-events: none;
    }
    .hero-buyer-img {
        max-height: 280px;
        object-fit: cover;
        border-radius: 20px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
        border: 4px solid rgba(255, 255, 255, 0.4);
        transform: rotate(-1.5deg);
        transition: transform 0.4s ease;
    }
    .hero-buyer-img:hover {
        transform: rotate(0deg) scale(1.02);
    }
    
    /* Mini Stat Card */
    .stat-buyer-card {
        background: #ffffff;
        border: 1px solid rgba(255, 182, 193, 0.4);
        border-radius: 20px;
        padding: 1.1rem 1.25rem;
        box-shadow: 0 6px 18px rgba(255, 94, 142, 0.06);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        color: inherit;
        display: block;
    }
    .stat-buyer-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(255, 94, 142, 0.15);
        border-color: #FF5E8E;
        color: inherit;
    }

    /* Kategori Filter Pills */
    .category-pill {
        border-radius: 50px;
        padding: 8px 20px;
        font-weight: 600;
        font-size: 0.88rem;
        transition: all 0.25s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #ffffff;
        color: #475569;
        border: 1.5px solid #F1F5F9;
        box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    }
    .category-pill:hover {
        background: #FFF0F5;
        color: #FF5E8E;
        border-color: #FFB6C1;
        transform: translateY(-2px);
    }
    .category-pill.active {
        background: linear-gradient(135deg, #FF5E8E 0%, #38BDF8 100%);
        color: #ffffff !important;
        border-color: transparent;
        box-shadow: 0 6px 18px rgba(255, 94, 142, 0.35);
    }

    /* Product Cards */
    .product-buyer-card {
        background: #ffffff;
        border: 1px solid rgba(255, 182, 193, 0.35);
        border-radius: 22px;
        overflow: hidden;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .product-buyer-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 36px -4px rgba(255, 94, 142, 0.2), 0 8px 18px rgba(56, 189, 248, 0.12);
        border-color: #FF85A2;
    }
    .product-img-wrapper {
        position: relative;
        height: 240px;
        overflow: hidden;
        background: #F8FAFC;
    }
    .product-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .product-buyer-card:hover .product-img-wrapper img {
        transform: scale(1.08);
    }
    .badge-category-float {
        position: absolute;
        top: 12px;
        left: 12px;
        backdrop-filter: blur(8px);
        background: rgba(255, 255, 255, 0.9);
        color: #E11D48;
        font-weight: 700;
        font-size: 0.72rem;
        padding: 5px 12px;
        border-radius: 50px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(255, 182, 193, 0.4);
    }
    .badge-stock-float {
        position: absolute;
        top: 12px;
        right: 12px;
        font-weight: 700;
        font-size: 0.72rem;
        padding: 5px 10px;
        border-radius: 50px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }
    .product-price-tag {
        font-size: 1.25rem;
        font-weight: 800;
        background: linear-gradient(135deg, #FF5E8E 0%, #0284C7 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Benefit Card */
    .benefit-item {
        background: #ffffff;
        border: 1px solid rgba(255, 182, 193, 0.3);
        border-radius: 18px;
        padding: 1rem;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .benefit-icon-box {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        flex-shrink: 0;
    }

    /* Search Box */
    .search-buyer-box {
        background: #ffffff;
        border: 2px solid rgba(255, 182, 193, 0.5);
        border-radius: 50px;
        padding: 6px 8px 6px 20px;
        box-shadow: 0 6px 20px rgba(255, 94, 142, 0.08);
        transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .search-buyer-box:focus-within {
        border-color: #FF5E8E;
        box-shadow: 0 8px 24px rgba(255, 94, 142, 0.18);
    }
    .search-buyer-input {
        border: none;
        outline: none;
        background: transparent;
        font-size: 0.95rem;
        width: 100%;
        color: #334155;
    }
    .search-buyer-input::placeholder {
        color: #94A3B8;
    }
</style>
@endpush

@section('content')

{{-- ── 1. Notifikasi Pesanan Aktif Terkini (Jika Ada) ──────────────────── --}}
@if ($latestActiveOrder)
    <div class="mb-4 p-3 px-4 rounded-4 shadow-sm border border-pink-200" style="background: linear-gradient(135deg, #FFF0F5 0%, #F0F9FF 100%);">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div class="d-flex align-items-center gap-3">
                <span class="d-inline-flex align-items-center justify-content-center text-white rounded-circle shadow-sm" style="width: 42px; height: 42px; background: linear-gradient(135deg, #FF5E8E, #38BDF8);">
                    <i class="bi bi-truck fs-5"></i>
                </span>
                <div>
                    <div class="d-flex align-items-center gap-2">
                        <strong class="text-dark small">Pesanan Aktif: #{{ $latestActiveOrder->order_number }}</strong>
                        @php
                            $stMap = [
                                'pending'    => ['bg-warning text-dark', 'Menunggu Konfirmasi'],
                                'processing' => ['bg-info text-white', 'Sedang Diproses'],
                                'shipped'    => ['bg-primary text-white', 'Dalam Pengiriman'],
                            ];
                            $badgeSt = $stMap[$latestActiveOrder->status] ?? ['bg-secondary text-white', $latestActiveOrder->status];
                        @endphp
                        <span class="badge rounded-pill {{ $badgeSt[0] }}" style="font-size: 0.7rem;">
                            {{ $badgeSt[1] }}
                        </span>
                    </div>
                    <small class="text-muted d-block mt-0.5">
                        Total: <strong>Rp {{ number_format($latestActiveOrder->total, 0, ',', '.') }}</strong> &bull; Dipesan pada {{ $latestActiveOrder->created_at->format('d M Y, H:i') }}
                    </small>
                </div>
            </div>
            <a href="{{ route('buyer.orders.show', $latestActiveOrder->id) }}" class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-bold">
                Lacak Pesanan <i class="bi bi-arrow-right ms-1"></i>
            </a>
        </div>
    </div>
@endif

{{-- ── 2. Hero Welcome Section (ShazkaBags Luxury Theme) ──────────────── --}}
<div class="hero-buyer-card p-4 p-md-5 mb-4">
    <!-- Glow Orb Decor -->
    <div class="hero-glow-orb" style="top: -60px; right: -60px;"></div>
    <div class="hero-glow-orb" style="bottom: -80px; left: -80px; background: rgba(56, 189, 248, 0.2);"></div>

    <div class="row align-items-center position-relative g-4" style="z-index: 2;">
        <div class="col-lg-7">
            <div class="d-flex align-items-center gap-3 mb-3">
                <img src="{{ asset('logo/logo.png') }}" alt="{{ Auth::user()->name }}" class="rounded-circle shadow" style="width: 50px; height: 50px; object-fit: contain; background: #fff; border: 3px solid rgba(255, 255, 255, 0.85); padding: 2px;">
                <div>
                    <span class="badge rounded-pill px-3 py-1.5 shadow-sm border border-white border-opacity-25" style="background: rgba(255, 255, 255, 0.2); font-size: 0.8rem; backdrop-filter: blur(8px);">
                        🌸 Akun Pembeli ShazkaBags
                    </span>
                    <div class="text-white text-opacity-90 small fw-bold mt-0.5">Hai, {{ Auth::user()->name }}!</div>
                </div>
            </div>
            <h1 class="display-6 fw-bold mb-3 font-serif-title text-white">
                Waktunya Tampil Modis & Elegan! ✨
            </h1>
            <p class="fs-6 text-white text-opacity-90 mb-4 lh-lg" style="max-width: 540px;">
                Temukan pilihan tas ransel, tas selempang, dan tote bag impianmu dengan material premium dan harga terjangkau. Belanja aman, cepat, dan nyaman.
            </p>

            <div class="d-flex flex-wrap gap-2.5">
                <a href="#katalog-produk" class="btn btn-light rounded-pill px-4 py-2.5 fw-bold shadow-sm" style="color: #FF5E8E;">
                    <i class="bi bi-bag-heart-fill me-1"></i> Belanja Sekarang
                </a>
                <a href="{{ route('buyer.orders.index') }}" class="btn btn-outline-light rounded-pill px-4 py-2.5 fw-semibold border-2">
                    <i class="bi bi-clock-history me-1"></i> Riwayat Pesanan
                </a>
            </div>
        </div>

        <div class="col-lg-5 text-center d-none d-lg-block">
            <div class="position-relative d-inline-block">
                @if(file_exists(public_path('images/promo_bag.jpg')))
                    <img src="{{ asset('images/promo_bag.jpg') }}" alt="Koleksi Tas ShazkaBags" class="hero-buyer-img">
                @elseif(file_exists(public_path('images/hero_bags.jpg')))
                    <img src="{{ asset('images/hero_bags.jpg') }}" alt="Koleksi Tas ShazkaBags" class="hero-buyer-img">
                @else
                    <img src="{{ asset('logo/logo.png') }}" alt="ShazkaBags" class="hero-buyer-img p-3 bg-white">
                @endif
                <div class="position-absolute bottom-0 start-50 translate-middle-x mb-n2 bg-white text-dark px-3 py-1.5 rounded-pill shadow-lg border border-pink-200" style="white-space: nowrap;">
                    <span class="small fw-bold" style="color: #FF5E8E;">✨ 100% Produk Berkualitas</span>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ── 3. Buyer Personal Mini Stats (Ringkasan Akun Pembeli) ───────────── --}}
<div class="row g-3 mb-4">
    <!-- Pesanan Aktif -->
    <div class="col-6 col-lg-3">
        <a href="{{ route('buyer.orders.index') }}" class="stat-buyer-card">
            <div class="d-flex align-items-center justify-content-between mb-2">
                <span class="text-muted small fw-semibold">Pesanan Diproses</span>
                <span class="badge rounded-pill" style="background: #FFF0F5; color: #FF5E8E;">
                    <i class="bi bi-truck"></i>
                </span>
            </div>
            <div class="fs-4 fw-bold text-dark">{{ $buyerStats['active_orders'] }}</div>
            <div class="text-muted" style="font-size: 0.75rem;">Sedang disiapkan / dikirim</div>
        </a>
    </div>

    <!-- Keranjang Belanja -->
    @php
        $sessionCart = session()->get('cart', []);
        $cartCount = array_sum(array_column($sessionCart, 'quantity'));
    @endphp
    <div class="col-6 col-lg-3">
        <a href="{{ route('buyer.cart.index') }}" class="stat-buyer-card">
            <div class="d-flex align-items-center justify-content-between mb-2">
                <span class="text-muted small fw-semibold">Keranjang Saya</span>
                <span class="badge rounded-pill" style="background: #F0F9FF; color: #0284C7;">
                    <i class="bi bi-bag-check"></i>
                </span>
            </div>
            <div class="fs-4 fw-bold" style="color: #FF5E8E;">{{ $cartCount }} Item</div>
            <div class="text-muted" style="font-size: 0.75rem;">Siap untuk checkout</div>
        </a>
    </div>

    <!-- Pesanan Selesai -->
    <div class="col-6 col-lg-3">
        <a href="{{ route('buyer.orders.index') }}" class="stat-buyer-card">
            <div class="d-flex align-items-center justify-content-between mb-2">
                <span class="text-muted small fw-semibold">Pesanan Selesai</span>
                <span class="badge rounded-pill bg-success-subtle text-success">
                    <i class="bi bi-check-circle"></i>
                </span>
            </div>
            <div class="fs-4 fw-bold text-success">{{ $buyerStats['completed_orders'] }}</div>
            <div class="text-muted" style="font-size: 0.75rem;">Transaksi berhasil</div>
        </a>
    </div>

    <!-- Akumulasi Belanja -->
    <div class="col-6 col-lg-3">
        <div class="stat-buyer-card">
            <div class="d-flex align-items-center justify-content-between mb-2">
                <span class="text-muted small fw-semibold">Total Belanja</span>
                <span class="badge rounded-pill" style="background: #FFF0F5; color: #FF5E8E;">
                    <i class="bi bi-wallet2"></i>
                </span>
            </div>
            <div class="fs-5 fw-bold text-dark text-truncate" title="Rp {{ number_format($buyerStats['total_spent'], 0, ',', '.') }}">
                Rp {{ number_format($buyerStats['total_spent'], 0, ',', '.') }}
            </div>
            <div class="text-muted" style="font-size: 0.75rem;">Akumulasi belanja Anda</div>
        </div>
    </div>
</div>

{{-- ── 4. Value Proposition Strip (Keunggulan ShazkaBags) ──────────────── --}}
<div class="row g-3 mb-5">
    <div class="col-6 col-md-3">
        <div class="benefit-item">
            <div class="benefit-icon-box" style="background: #FFF0F5; color: #FF5E8E;">
                <i class="bi bi-truck"></i>
            </div>
            <div>
                <strong class="d-block small text-dark">Gratis Ongkir</strong>
                <small class="text-muted" style="font-size: 0.72rem;">Subsidi ongkir hemat</small>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="benefit-item">
            <div class="benefit-icon-box" style="background: #F0F9FF; color: #0284C7;">
                <i class="bi bi-shield-check"></i>
            </div>
            <div>
                <strong class="d-block small text-dark">100% Produk Asli</strong>
                <small class="text-muted" style="font-size: 0.72rem;">Kualitas bahan terjamin</small>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="benefit-item">
            <div class="benefit-icon-box" style="background: #FFF0F5; color: #E11D48;">
                <i class="bi bi-arrow-repeat"></i>
            </div>
            <div>
                <strong class="d-block small text-dark">Garansi Retur</strong>
                <small class="text-muted" style="font-size: 0.72rem;">Jika produk cacat / salah</small>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="benefit-item">
            <div class="benefit-icon-box" style="background: #F0FDF4; color: #16A34A;">
                <i class="bi bi-headset"></i>
            </div>
            <div>
                <strong class="d-block small text-dark">Layanan Cepat</strong>
                <small class="text-muted" style="font-size: 0.72rem;">Admin siap melayani</small>
            </div>
        </div>
    </div>
</div>

{{-- ── 5. Search Bar & Filter Kategori ─────────────────────────────────── --}}
<div id="katalog-produk" class="mb-4">
    <div class="row align-items-center g-3 mb-4">
        <div class="col-lg-6">
            <h2 class="fw-bold mb-1 font-serif-title" style="color: #1E293B;">
                Katalog Koleksi Tas Pilihan
            </h2>
            <p class="text-muted small mb-0">Temukan model tas favorit Anda yang siap untuk dipesan hari ini.</p>
        </div>

        <div class="col-lg-6">
            <!-- Form Pencarian Produk -->
            <form action="{{ route('buyer.dashboard') }}" method="GET">
                @if(request('category'))
                    <input type="hidden" name="category" value="{{ request('category') }}">
                @endif
                <div class="search-buyer-box d-flex align-items-center">
                    <i class="bi bi-search text-muted me-2 fs-6"></i>
                    <input type="text" name="search" class="search-buyer-input" placeholder="Cari tas ransel, selempang, pesta..." value="{{ request('search') }}">
                    @if(request('search'))
                        <a href="{{ route('buyer.dashboard', request('category') ? ['category' => request('category')] : []) }}" class="btn btn-sm btn-light rounded-circle me-1" title="Hapus Pencarian">
                            <i class="bi bi-x"></i>
                        </a>
                    @endif
                    <button type="submit" class="btn btn-primary btn-sm rounded-pill px-3 py-1.5 fw-bold">
                        Cari
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Filter Pills Kategori -->
    <div class="d-flex align-items-center gap-2 overflow-x-auto pb-2 mb-4" style="white-space: nowrap;">
        <!-- Semua Kategori -->
        <a href="{{ route('buyer.dashboard', request('search') ? ['search' => request('search')] : []) }}" 
           class="category-pill {{ !request('category') ? 'active' : '' }}">
            <i class="bi bi-grid-fill"></i> Semua Koleksi
        </a>

        <!-- Kategori Dinamis -->
        @foreach ($categories as $cat)
            <a href="{{ route('buyer.dashboard', array_merge(['category' => $cat->id], request('search') ? ['search' => request('search')] : [])) }}" 
               class="category-pill {{ request('category') == $cat->id ? 'active' : '' }}">
                <i class="bi bi-tag-fill"></i> {{ $cat->name }}
                <span class="badge rounded-pill {{ request('category') == $cat->id ? 'bg-white text-dark' : 'bg-light text-secondary' }}" style="font-size: 0.68rem;">
                    {{ $cat->products_count }}
                </span>
            </a>
        @endforeach
    </div>
</div>

{{-- ── 6. Grid Katalog Produk ─────────────────────────────────────────── --}}
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 mb-5">
    @forelse ($products as $product)
        <div class="col">
            <div class="product-buyer-card">
                <!-- Wrapper Gambar Produk -->
                <div class="product-img-wrapper">
                    @if($product->image)
                        <img src="{{ Storage::url($product->image) }}" alt="{{ $product->name }}">
                    @else
                        <!-- Fallback Placeholder yang Cantik -->
                        <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center text-muted" style="background: linear-gradient(135deg, #FFF0F5 0%, #F0F9FF 100%);">
                            <i class="bi bi-handbag text-danger opacity-50 display-5 mb-1"></i>
                            <span class="small fw-semibold text-pink">ShazkaBags</span>
                        </div>
                    @endif

                    <!-- Float Badge Kategori -->
                    <span class="badge-category-float">
                        {{ $product->category->name ?? 'Koleksi Tas' }}
                    </span>

                    <!-- Float Badge Stok -->
                    @if($product->stock > 5)
                        <span class="badge bg-success badge-stock-float">
                            <i class="bi bi-check2"></i> Stok: {{ $product->stock }}
                        </span>
                    @elseif($product->stock > 0)
                        <span class="badge bg-warning text-dark badge-stock-float">
                            <i class="bi bi-exclamation-triangle"></i> Sisa {{ $product->stock }}
                        </span>
                    @else
                        <span class="badge bg-danger badge-stock-float">
                            Habis
                        </span>
                    @endif
                </div>

                <!-- Konten Body Kartu -->
                <div class="p-3 d-flex flex-column flex-grow-1">
                    <!-- Rating Simulation & Status -->
                    <div class="d-flex align-items-center justify-content-between mb-1.5">
                        <div class="d-flex align-items-center text-warning" style="font-size: 0.78rem;">
                            <i class="bi bi-star-fill me-1"></i>
                            <strong class="text-dark me-1">4.9</strong>
                            <span class="text-muted">(Terlaris)</span>
                        </div>
                        <span class="badge rounded-pill bg-light text-muted" style="font-size: 0.65rem;">
                            SKU: {{ $product->sku ?? 'SB-0'.$product->id }}
                        </span>
                    </div>

                    <!-- Nama Produk -->
                    <h5 class="fw-bold mb-2 text-truncate" title="{{ $product->name }}" style="font-size: 0.98rem;">
                        <a href="{{ route('buyer.products.show', $product->id) }}" class="text-decoration-none text-dark hover-pink">
                            {{ $product->name }}
                        </a>
                    </h5>

                    <!-- Deskripsi Ringkas -->
                    <p class="text-muted small mb-3 text-truncate-2" style="font-size: 0.8rem; line-height: 1.4; min-height: 2.2em;">
                        {{ Str::limit($product->description ?? 'Tas berkualitas tinggi dengan jahitan rapi dan desain modern elegan.', 55) }}
                    </p>

                    <!-- Harga & Aksi Bawah -->
                    <div class="mt-auto border-top pt-2.5">
                        <div class="d-flex justify-content-between align-items-baseline mb-2.5">
                            <div>
                                <small class="text-muted d-block" style="font-size: 0.7rem;">Harga Spesial</small>
                                <span class="product-price-tag">
                                    Rp {{ number_format($product->price, 0, ',', '.') }}
                                </span>
                            </div>
                        </div>

                        <!-- Tombol Aksi -->
                        <div class="d-flex gap-2">
                            <a href="{{ route('buyer.products.show', $product->id) }}" class="btn btn-outline-primary btn-sm rounded-pill flex-grow-1 fw-bold py-1.5">
                                <i class="bi bi-eye me-1"></i> Detail
                            </a>

                            @if($product->stock > 0)
                                <form action="{{ route('buyer.cart.add', $product->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    <input type="hidden" name="quantity" value="1">
                                    <button type="submit" class="btn btn-primary btn-sm rounded-pill px-3 py-1.5 fw-bold" title="Tambahkan ke Keranjang">
                                        <i class="bi bi-bag-plus-fill me-1"></i> + Keranjang
                                    </button>
                                </form>
                            @else
                                <button type="button" class="btn btn-secondary btn-sm rounded-pill px-3 py-1.5 disabled" disabled>
                                    Habis
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <!-- Empty State Elegan -->
        <div class="col-12">
            <div class="bg-white rounded-4 border p-5 text-center shadow-sm my-3" style="border-color: rgba(255, 182, 193, 0.4) !important;">
                <div class="w-16 h-16 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px; background: #FFF0F5; color: #FF5E8E; font-size: 2rem;">
                    <i class="bi bi-search-heart"></i>
                </div>
                <h4 class="fw-bold font-serif-title mb-2">Produk Tidak Ditemukan</h4>
                <p class="text-muted mb-4" style="max-width: 480px; margin-inline: auto;">
                    Maaf, tidak ada produk tas yang sesuai dengan pencarian atau filter kategori yang Anda pilih. Coba gunakan kata kunci lain.
                </p>
                <a href="{{ route('buyer.dashboard') }}" class="btn btn-primary rounded-pill px-4 py-2 fw-bold">
                    <i class="bi bi-arrow-counterclockwise me-1"></i> Tampilkan Semua Koleksi
                </a>
            </div>
        </div>
    @endforelse
</div>

{{-- ── 7. Pagination Cantik ────────────────────────────────────────────── --}}
@if ($products->hasPages())
    <div class="d-flex justify-content-center mt-4">
        {{ $products->links('pagination::bootstrap-5') }}
    </div>
@endif

@endsection