@extends('layouts.frontend')

@section('title', 'Beranda')

@section('content')

<div class="container-fluid mb-5 bg-white">
    <div class="container">
        <div class="row align-items-center g-5 py-5">
            <div class="col-lg-6 order-2 order-lg-1">
                <div class="d-inline-block border border-secondary text-secondary rounded-pill px-3 py-2 mb-3 fw-bold">
                    🌾 Mitra Petani Padi Indonesia
                </div>
                <h1 class="display-4 fw-bold text-dark mb-4">
                    Pusat Jual Beli <br>
                    <span class="text-tani">Gabah Panen Raya.</span>
                </h1>
                <p class="lead text-muted mb-5">
                    Platform langsung yang menghubungkan petani padi lokal dengan pembeli.
                    Dapatkan harga gabah terbaik dan gabah berkualitas.
                </p>
                <a href="{{ route('shop') }}" class="btn btn-primary border-0 rounded-pill py-3 px-5 shadow">
                    <i class="fas fa-shopping-bag me-2"></i> Belanja
                </a>
            </div>
            <div class="col-lg-6 order-1 order-lg-2 text-center">
                <div class="position-relative d-inline-block">
                    <img src="{{ asset('images/banner.jpg') }}" class="img-fluid rounded-circle shadow-lg w-100"
                        style="max-height: 450px; object-fit: cover;" alt="Padi Premium">
                    <div class="position-absolute bg-white p-3 rounded-3 shadow d-none d-md-block"
                        style="bottom: 30px; left: -30px;">
                        <div class="d-flex align-items-center gap-3">
                            <div class="bg-primary text-white rounded-circle p-2 d-flex align-items-center justify-content-center"
                                style="width: 40px; height: 40px;">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="text-start">
                                <h6 class="mb-0 fw-bold">100% Panen Baru</h6>
                                <small class="text-muted">Kualitas Terjamin</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <div class="row g-4">
        <div class="col-md-6 col-lg-3">
            <div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
                <div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
                    style="width: 70px; height: 70px;">
                    <i class="fas fa-truck fa-2x"></i>
                </div>
                <h5 class="fw-bold mb-3">Siap Antar</h5>
                <p class="mb-0 text-muted">Armada pickup siap kirim langsung ke lokasi Anda.</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
                <div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
                    style="width: 70px; height: 70px;">
                    <i class="fas fa-hand-holding-usd fa-2x"></i>
                </div>
                <h5 class="fw-bold mb-3">Harga Petani</h5>
                <p class="mb-0 text-muted">Harga tangan pertama langsung tanpa tengkulak.</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
                <div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
                    style="width: 70px; height: 70px;">
                    <i class="fas fa-certificate fa-2x"></i>
                </div>
                <h5 class="fw-bold mb-3">Kualitas Super</h5>
                <p class="mb-0 text-muted">Jaminan padi berkualitas, bulir utuh, bersih, dan bebas campuran.</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
                <div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
                    style="width: 70px; height: 70px;">
                    <i class="fas fa-shield-alt fa-2x"></i>
                </div>
                <h5 class="fw-bold mb-3">Transaksi Aman</h5>
                <p class="mb-0 text-muted">Pembayaran fleksibel, bisa transfer atau COD.</p>
            </div>
        </div>
    </div>
</div>

{{-- Produk terlaris --}}
<div class="container py-5">
    <div class="text-center mx-auto mb-5" style="max-width: 700px;">
        <h1 class="display-6 fw-bold">Produk Terlaris</h1>
        <p class="text-muted">Pilihan favorit pelanggan kami minggu ini.</p>
    </div>
    <div class="row g-4">

        @forelse($produkTerlaris as $item)
        <div class="col-md-6 col-lg-3">
            <div class="rounded position-relative border border-secondary shadow-sm overflow-hidden h-100">
                <div class="fruit-img">
                    <img src="{{ $item->foto_produk ? asset('storage/' . $item->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
                        class="img-fluid w-100" style="height: 200px; object-fit: cover;"
                        alt="{{ $item->nama_produk }}">
                </div>

                <div class="text-white bg-danger px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">
                    Terjual {{ $item->total_terjual ?? 0 }}
                </div>

                <div class="p-4 border-top border-secondary bg-white d-flex flex-column"
                    style="height: calc(100% - 200px);">
                    <h4>{{ $item->nama_produk }}</h4>
                    <p class="text-muted small mb-2 flex-grow-1">
                        {{ Str::limit($item->deskripsi, 50) }}
                    </p>

                    <div class="d-flex justify-content-between align-items-end">
                        <div>
                            <p class="text-dark fs-5 fw-bold mb-0">Rp {{ number_format($item->harga, 0, ',', '.') }}
                            </p>
                            <small class="text-muted">/ kg</small>
                        </div>
                        <a href="{{ route('produk.detail', $item->id) }}"
                            class="btn btn-outline-primary rounded-pill px-3">
                            <i class="fa fa-shopping-bag"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="col-12 text-center">
            <p class="text-muted">Belum ada data penjualan.</p>
        </div>
        @endforelse

    </div>
</div>

<div class="container-fluid py-5 bg-light">
    <div class="container">
        <div class="row g-5">
            <div class="col-md-6 col-lg-3 text-center">
                <i class="fas fa-users fa-3x text-primary mb-3"></i>
                <h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">150+</h2>
                <p class="mb-0 text-muted text-uppercase fw-bold">Petani Mitra</p>
            </div>
            <div class="col-md-6 col-lg-3 text-center">
                <i class="fas fa-shopping-cart fa-3x text-primary mb-3"></i>
                <h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">2,500+</h2>
                <p class="mb-0 text-muted text-uppercase fw-bold">Transaksi</p>
            </div>
            <div class="col-md-6 col-lg-3 text-center">
                <i class="fas fa-star fa-3x text-primary mb-3"></i>
                <h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">4.8</h2>
                <p class="mb-0 text-muted text-uppercase fw-bold">Rating Rata-rata</p>
            </div>
            <div class="col-md-6 col-lg-3 text-center">
                <i class="fas fa-check-circle fa-3x text-primary mb-3"></i>
                <h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">100%</h2>
                <p class="mb-0 text-muted text-uppercase fw-bold">Garansi Kualitas</p>
            </div>
        </div>
    </div>
</div>

{{-- Katalog --}}
<div class="container py-5" id="katalog">
    <div class="text-center mx-auto mb-5" style="max-width: 700px;">
        <h2 class="fw-bold display-6 text-dark">Stok Gudang Kami</h2>
        <p class="text-muted">Pilih varietas gabah yang Anda butuhkan hari ini.</p>
    </div>

    @php
    $kategoriList = \App\Models\Kategori::all();
    @endphp

    <div class="row justify-content-center mb-5">
        <div class="col-12 text-center">
            <div class="d-flex justify-content-center flex-wrap gap-2">
                <a href="#" data-kategori="Semua"
                    class="btn {{ request('kategori') == '' || request('kategori') == 'Semua' ? 'btn-primary' : 'btn-outline-primary' }} rounded-pill px-4 py-2 m-1 btn-category">
                    Semua
                </a>

                {{-- Looping Kategori dari Database --}}
                @foreach($kategoriList as $kat)
                <a href="#" data-kategori="{{ $kat->slug }}"
                    class="btn {{ request('kategori') == $kat->slug ? 'btn-primary' : 'btn-outline-primary' }} rounded-pill px-4 py-2 m-1 btn-category">
                    <span>{{ $kat->nama_kategori }}</span>
                </a>
                @endforeach
            </div>
        </div>
    </div>

    <div class="row g-4" id="product-container">
        @include('landing.partials.product_list')
    </div>

    <div class="text-center mt-5">
        <a href="{{ route('shop') }}" class="btn btn-primary border-0 rounded-pill px-5 py-3 shadow">
            Lihat Semua Produk
        </a>
    </div>
</div>

{{-- Banner --}}
<div class="container-fluid bg-primary py-5 mt-5">
    <div class="container py-5">
        <div class="row align-items-center">
            <div class="col-lg-8 text-center text-lg-start mb-4 mb-lg-0">
                <h2 class="display-5 fw-bold text-white mb-3">Butuh Suplai Besar?</h2>
                <p class="fs-5 text-white mb-4 opacity-75">
                    Kami melayani kerjasama untuk penggilingan padi, restoran, dan toko
                    kelontong dengan harga grosir spesial.
                </p>
                <a href="https://wa.me/6281234567890" target="_blank"
                    class="btn btn-light rounded-pill px-5 py-3 text-success fw-bold shadow">
                    <i class="fab fa-whatsapp me-2"></i> Hubungi Kami
                </a>
            </div>
            <div class="col-lg-4 text-center">
                <i class="fas fa-warehouse text-white opacity-25" style="font-size: 10rem;"></i>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    $(document).ready(function () {
            $('.btn-category').click(function (e) {
                e.preventDefault();

                let kategori = $(this).data('kategori');

                $('.btn-category').removeClass('btn-primary').addClass('btn-outline-primary');
                $(this).removeClass('btn-outline-primary').addClass('btn-primary');

                // Tampilkan loading
                $('#product-container').html(
                    '<div class="col-12 text-center py-5">' +
                    '<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status"></div>' +
                    '<p class="mt-3 text-muted">Sedang mengambil data...</p>' +
                    '</div>'
                );

                // Kirim request AJAX
                $.ajax({
                    url: "{{ route('home') }}",
                    type: "GET",
                    data: {
                        kategori: kategori
                    },
                    success: function (response) {
                        $('#product-container').html(response);
                    },
                    error: function (xhr) {
                        $('#product-container').html(
                            '<div class="col-12 text-center text-danger">Gagal memuat data.</div>'
                        );
                    }
                });
            });
        });
</script>
@endsection