@extends('layouts.frontend')

@section('title', 'Belanja Padi & Beras')

@section('content')
    <!-- Page Header -->
    <div class="container-fluid py-5 bg-light">
        <div class="container text-center">
            <h1 class="display-5 fw-bold text-dark">Belanja Produk Kami</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item active">Shop</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Shop Section -->
    <div class="container py-5">
        <div class="row g-4">
            <!-- Sidebar -->
            <div class="col-lg-3">
                <!-- Search -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body">
                        <h5 class="fw-bold mb-3">Cari Produk</h5>
                        <form action="{{ route('shop') }}" method="GET">
                            <div class="input-group">
                                <input type="search" name="search" class="form-control" placeholder="Cari..."
                                    value="{{ request('search') }}">
                                <button class="btn btn-success" type="submit">
                                    <i class="fa fa-search"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Info -->
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h5 class="fw-bold mb-3">Informasi</h5>
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-check-circle text-success me-2"></i>
                            <small>Total {{ $produks->total() }} Produk</small>
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-leaf text-success me-2"></i>
                            <small>100% Organik</small>
                        </div>
                        <div class="d-flex align-items-center">
                            <i class="fas fa-truck text-success me-2"></i>
                            <small>Gratis Ongkir Min. 50 Kg</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Product Grid -->
            <div class="col-lg-9">
                <div class="row g-4">
                    @forelse($produks as $produk)
                        <div class="col-md-6 col-lg-4">
                            <div class="card border-0 shadow-sm h-100 product-card">
                                <!-- Stock Badge -->
                                <div class="position-absolute top-0 end-0 m-2 z-1">
                                    <span class="badge bg-warning text-dark">
                                        Stok: {{ $produk->stok }} Kg
                                    </span>
                                </div>

                                <!-- Image -->
                                <div class="overflow-hidden" style="height: 200px;">
                                    <img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : 'https://images.unsplash.com/photo-1586201375761-83865001e31c?q=80&w=800&auto=format&fit=crop' }}"
                                        class="card-img-top w-100 h-100" alt="{{ $produk->nama_produk }}"
                                        style="object-fit: cover;">
                                </div>

                                <div class="card-body p-3">
                                    <span class="badge bg-success mb-2">{{ $produk->kategori ?? 'Umum' }}</span>
                                    <h6 class="fw-bold mb-2">{{ $produk->nama_produk }}</h6>
                                    <p class="text-muted small mb-3">{{ Str::limit($produk->deskripsi, 60) }}</p>

                                    <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                                        <div>
                                            <small class="text-muted">Harga/Kg</small>
                                            <h6 class="fw-bold text-success mb-0">
                                                Rp {{ number_format($produk->harga, 0, ',', '.') }}
                                            </h6>
                                        </div>
                                        <a href="{{ route('produk.detail', $produk->id) }}"
                                            class="btn btn-success btn-sm rounded-pill">
                                            <i class="fa fa-eye"></i> Detail
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <div class="text-center py-5">
                                <i class="fas fa-search fa-4x text-muted mb-3"></i>
                                <h4 class="text-muted">Produk Tidak Ditemukan</h4>
                                <p class="text-muted">Coba kata kunci lain atau hapus filter pencarian.</p>
                                <a href="{{ route('shop') }}" class="btn btn-outline-success rounded-pill mt-2">
                                    <i class="fas fa-sync-alt me-2"></i> Reset Pencarian
                                </a>
                            </div>
                        </div>
                    @endforelse
                </div>

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

    <style>
        .product-card {
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
        }
    </style>
@endsection