@extends('layouts.buyer')

@section('title', 'Katalog OKTAVIA Fashion')

@section('content')
<!-- Hero / Banner Section -->
<div class="p-4 p-md-5 mb-4 rounded-4 text-white shadow-sm" style="background: linear-gradient(135deg, #f472b6 0%, #ec4899 50%, #db2777 100%);">
    <div class="col-md-9 px-0">
        <span class="badge bg-white fw-bold px-3 py-2 rounded-pill mb-3" style="color: #db2777;">
            <i class="bi bi-bag-check-fill me-1"></i> OKTAVIA Fashion (Buyer)
        </span>
        <h1 class="display-6 fw-bold mb-2">Selamat Datang di OKTAVIA Fashion, {{ $user->name }}! 👋</h1>
        <p class="lead mb-0 text-white-50 fs-6">
            Jelajahi koleksi produk terbaik dari database kami dengan harga terjangkau. Akun Anda memiliki akses khusus sebagai <strong>Buyer</strong>.
        </p>
        <div class="mt-3">
            <a href="{{ route('buyer.orders.index') }}" class="btn btn-light fw-bold rounded-pill px-4 py-2 shadow-sm" style="color: #db2777;">
                <i class="bi bi-box-seam me-1"></i> Lihat Pesanan Saya
            </a>
        </div>
    </div>
</div>

<!-- Search & Filter Bar -->
<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-3 p-md-4">
        <form method="GET" action="{{ route('buyer.dashboard') }}" class="row g-3 align-items-end">
            <!-- Search Keyword -->
            <div class="col-md-5">
                <label for="search" class="form-label small fw-semibold text-secondary">Cari Produk</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-search"></i></span>
                    <input type="text" name="search" id="search" class="form-control bg-light border-start-0" 
                           placeholder="Ketik nama atau deskripsi produk..." value="{{ request('search') }}">
                </div>
            </div>

            <!-- Filter Kategori -->
            <div class="col-md-3">
                <label for="category" class="form-label small fw-semibold text-secondary">Kategori</label>
                <select name="category" id="category" class="form-select bg-light">
                    <option value="">Semua Kategori</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                            {{ $category->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Sort By -->
            <div class="col-md-2">
                <label for="sort" class="form-label small fw-semibold text-secondary">Urutan</label>
                <select name="sort" id="sort" class="form-select bg-light">
                    <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Terbaru</option>
                    <option value="price_asc" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>Harga Terendah</option>
                    <option value="price_desc" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>Harga Tertinggi</option>
                </select>
            </div>

            <!-- Buttons -->
            <div class="col-md-2 d-flex gap-2">
                <button type="submit" class="btn btn-primary w-100 fw-semibold rounded-3 py-2">
                    <i class="bi bi-funnel-fill me-1"></i> Filter
                </button>
                @if(request()->hasAny(['search', 'category', 'sort']))
                    <a href="{{ route('buyer.dashboard') }}" class="btn btn-outline-secondary rounded-3 py-2" title="Reset filter">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </a>
                @endif
            </div>
        </form>
    </div>
</div>

<!-- Header Katalog & Status Count -->
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h4 class="fw-bold mb-1 text-dark">Katalog Produk</h4>
        <p class="text-muted small mb-0">Menampilkan {{ $products->total() }} produk dari database</p>
    </div>
</div>

<!-- Product Grid: Bootstrap Cards -->
<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="card h-100 product-card shadow-sm">
                <!-- 1. Gambar Produk -->
                <div class="product-img-wrapper">
                    @if($product->image)
                        <img src="{{ asset('storage/' . $product->image) }}" 
                             alt="{{ $product->name }}" 
                             loading="lazy"
                             onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'w-100 h-100 d-flex flex-column align-items-center justify-content-center text-muted\'><i class=\'bi bi-image fs-1\'></i><span class=\'small mt-1\'>Gambar tidak ditemukan</span></div>';">
                    @else
                        <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center text-muted">
                            <i class="bi bi-image fs-1 mb-1"></i>
                            <span class="small">Tidak ada gambar</span>
                        </div>
                    @endif

                    <!-- Tag Kategori -->
                    @if($product->category)
                        <span class="product-category-tag">
                            {{ $product->category->name }}
                        </span>
                    @endif

                    <!-- Badge Stok -->
                    <span class="product-stock-badge {{ $product->stock > 0 ? 'bg-success text-white' : 'bg-danger text-white' }}">
                        {{ $product->stock > 0 ? 'Tersedia' : 'Habis' }}
                    </span>
                </div>

                <!-- Card Body -->
                <div class="card-body d-flex flex-column p-3">
                    <!-- 2. Nama Produk -->
                    <h5 class="card-title fw-bold text-dark text-truncate mb-1" title="{{ $product->name }}">
                        {{ $product->name }}
                    </h5>

                    <!-- Ringkasan Deskripsi -->
                    <p class="card-text text-muted small mb-3" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px;">
                        {{ $product->description ?: 'Tidak ada keterangan tambahan untuk produk ini.' }}
                    </p>

                    <div class="mt-auto pt-2 border-top">
                        <!-- 3. Harga & 4. Stock -->
                        <div class="d-flex justify-content-between align-items-end mb-3">
                            <div>
                                <small class="text-secondary d-block" style="font-size: 0.75rem;">Harga</small>
                                <div class="product-price">
                                    Rp {{ number_format($product->price, 0, ',', '.') }}
                                </div>
                            </div>
                            <div class="text-end">
                                <small class="text-secondary d-block" style="font-size: 0.75rem;">Stok</small>
                                <span class="badge {{ $product->stock > 0 ? 'bg-light text-dark border' : 'bg-danger-subtle text-danger' }} fw-bold px-2 py-1">
                                    <i class="bi bi-box-seam me-1"></i>{{ $product->stock }}
                                </span>
                            </div>
                        </div>

                        <!-- 5. Tombol Detail -->
                        <a href="{{ route('buyer.products.show', $product->id) }}" class="btn btn-outline-primary btn-detail w-100 d-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-info-circle"></i>
                            <span>Detail</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="col-12 w-100">
            <div class="card border-0 shadow-sm rounded-4 text-center py-5">
                <div class="card-body py-4">
                    <div class="display-4 text-muted mb-3">
                        <i class="bi bi-box-seam"></i>
                    </div>
                    <h5 class="fw-bold text-dark">Belum Ada Produk</h5>
                    <p class="text-muted mb-3">
                        {{ request()->hasAny(['search', 'category']) ? 'Tidak ada produk yang cocok dengan kriteria pencarian Anda.' : 'Katalog produk OKTAVIA Fashion saat ini masih kosong.' }}
                    </p>
                    @if(request()->hasAny(['search', 'category']))
                        <a href="{{ route('buyer.dashboard') }}" class="btn btn-primary rounded-3 px-4">
                            Lihat Semua Produk
                        </a>
                    @endif
                </div>
            </div>
        </div>
    @endforelse
</div>

<!-- Pagination Bootstrap -->
@if($products->hasPages())
    <div class="d-flex justify-content-center mb-5">
        {{ $products->links() }}
    </div>
@endif

<!-- Info Card Hak Akses Buyer -->
<div class="card border-primary-subtle bg-primary-subtle rounded-4 mb-4">
    <div class="card-body p-3 p-md-4 d-flex align-items-start gap-3">
        <i class="bi bi-shield-check fs-2 text-primary"></i>
        <div>
            <h6 class="fw-bold text-primary mb-1">Informasi Hak Akses Buyer</h6>
            <p class="small text-secondary mb-0">
                Anda masuk sebagai pengguna dengan peran <strong>Buyer</strong>. Halaman ini menyajikan katalog produk langsung dari database menggunakan query Eloquent. Akses menuju panel admin dilindungi oleh middleware keamanan sistem.
            </p>
        </div>
    </div>
</div>
@endsection