@extends('layouts.frontend')

@section('title', 'Belanja Sayur')

@section('content')
<!-- Single Page Header -->
<div class="container-fluid page-header py-5" style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('{{ asset('template/frontend/img/cart-page-header-img.jpg') }}'); background-position: center center; background-repeat: no-repeat; background-size: cover;">
    <h1 class="text-center text-white display-6">Shop</h1>
    <ol class="breadcrumb justify-content-center mb-0">
        <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-white">Home</a></li>
        <li class="breadcrumb-item active text-white">Shop</li>
    </ol>
</div>

<!-- Fruits Shop-->
<div class="container-fluid fruite py-5">
    <div class="container py-5">
        <h1 class="mb-4">Toko Sayur & Buah Segar</h1>
        <div class="row g-4">
            <div class="col-lg-12">
                <div class="row g-4">
                    <!-- SIDEBAR PENCARIAN -->
                    <div class="col-xl-3">
                        <div class="input-group w-100 mx-auto d-flex mb-4">
                            <form action="{{ route('shop') }}" method="GET" class="w-100 d-flex shadow-sm rounded">
                                <input type="search" name="search" class="form-control p-3 border-0" placeholder="Cari produk..." value="{{ request('search') }}" aria-describedby="search-icon-1" style="border-radius: 10px 0 0 10px;">
                                <button type="submit" id="search-icon-1" class="input-group-text p-3 border-0 bg-light" style="border-radius: 0 10px 10px 0;"><i class="fa fa-search"></i></button>
                            </form>
                        </div>
                        
                        <div class="row g-4">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <h4>Kategori</h4>
                                    <ul class="list-unstyled fruite-categorie">
                                        <li>
                                            <div class="d-flex justify-content-between fruite-name">
                                                <a href="{{ route('shop') }}"><i class="fas fa-apple-alt me-2"></i>Semua Produk</a>
                                                <span>({{ $produks->total() }})</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- GRID PRODUK -->
                    <div class="col-lg-9">
                        <div class="row g-4 justify-content-center">
                            @forelse($produks as $produk)
                            <div class="col-md-6 col-lg-6 col-xl-4">
                                <div class="rounded position-relative fruite-item border border-secondary h-100">
                                    <div class="fruite-img">
                                        <img src="{{ $produk->foto_produk ? asset('storage/'.$produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}" class="img-fluid w-100 rounded-top" alt="{{ $produk->nama_produk }}" style="height: 200px; object-fit: cover;">
                                    </div>
                                    <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Segar</div>
                                    <div class="p-4 border-top-0 rounded-bottom">
                                        <h4>{{ $produk->nama_produk }}</h4>
                                        <p>{{ Str::limit($produk->deskripsi, 50) }}</p>
                                        <div class="d-flex justify-content-between flex-lg-wrap">
                                            <p class="text-dark fs-5 fw-bold mb-0">Rp {{ number_format($produk->harga, 0, ',', '.') }} / kg</p>
                                            <a href="{{ route('produk.detail', $produk->id) }}" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-eye me-2 text-primary"></i> Detail</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <div class="col-12 text-center">
                                <div class="alert alert-warning py-5">
                                    <i class="fas fa-search fa-3x mb-3 text-warning"></i>
                                    <h4>Produk tidak ditemukan</h4>
                                    <p>Coba kata kunci lain atau kembali lagi nanti.</p>
                                    <a href="{{ route('shop') }}" class="btn btn-outline-primary rounded-pill mt-3">Reset Pencarian</a>
                                </div>
                            </div>
                            @endforelse
                            
                            <!-- PAGINATION -->
                            <div class="col-12">
                                <div class="d-flex justify-content-center mt-5">
                                    {{ $produks->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection