@extends('layouts.frontend')

@section('title', 'Beranda')

@section('content')

    <div class="container-fluid py-5 mb-5 hero-header bg-light">
        <div class="container py-5">
            <div class="row align-items-center g-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">
                        Jual Beli Gabah & <br>
                        <span class="text-primary">Beras Berkualitas.</span>
                    </h1>
                    <p class="lead text-muted mb-5">
                        Platform langsung yang menghubungkan petani padi lokal dengan pembeli.
                        Dapatkan harga gabah terbaik dan beras segar tanpa pemutih.
                    </p>
                    <div class="d-flex gap-2">
                        <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>
                        <a href="#katalog" class="btn btn-outline-secondary rounded-pill py-3 px-5">
                            Lihat Stok
                        </a>
                    </div>
                </div>
                <div class="col-lg-6 order-1 order-lg-2 text-center">
                    <div class="position-relative d-inline-block">
                        <img src="https://images.unsplash.com/photo-1586201375761-83865001e31c?q=80&w=1000&auto=format&fit=crop"
                            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 beras pulen, wangi, dan bebas pemutih.</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 padi atau beras yang Anda butuhkan hari ini.</p>
        </div>

        <div class="row justify-content-center mb-5">
            <div class="col-12 text-center">
                @php $kategoris = ['Semua', 'Pandan Wangi', 'IR 64', 'Ketan', 'Merah', 'Hitam']; @endphp
                <div class="d-flex justify-content-center flex-wrap gap-2">
                    @foreach ($kategoris as $kategori)
                        <button
                            class="btn {{ $loop->first ? 'btn-primary' : 'btn-outline-primary' }} rounded-pill px-4 py-2 m-1 btn-category"
                            data-kategori="{{ $kategori }}">
                            {{ $kategori }}
                        </button>
                    @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');

                $('#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>'
                );

                $.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