@extends('layouts.frontend')

@section('title', 'Beranda')

@section('content')
<!-- Hero Section Start -->
<div class="container-fluid py-5 mb-5 hero-header">
    <div class="container py-5">
        <div class="row g-5 align-items-center">
            <div class="col-md-12 col-lg-7">
                <h4 class="mb-3 text-secondary">100% Organik</h4>
                <h1 class="mb-5 display-3 text-primary">Sayuran Segar & Buah Desa</h1>
                <div class="position-relative mx-auto">
                    <a href="{{ route('shop') }}" class="btn btn-primary border-2 border-secondary py-3 px-5 rounded-pill text-white" style="top: 0; right: 25%;">Belanja Sekarang</a>
                </div>
            </div>
            <div class="col-md-12 col-lg-5">
                <div id="carouselId" class="carousel slide position-relative" data-bs-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="carousel-item active rounded">
                            <img src="{{ asset('template/frontend/img/hero-img-1.png') }}" class="img-fluid w-100 h-100 bg-secondary rounded" alt="First slide">
                            <a href="#" class="btn px-4 py-2 text-white rounded">Buah</a>
                        </div>
                        <div class="carousel-item rounded">
                            <img src="{{ asset('template/frontend/img/hero-img-2.jpg') }}" class="img-fluid w-100 h-100 rounded" alt="Second slide">
                            <a href="#" class="btn px-4 py-2 text-white rounded">Sayur</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bestseller Product Start -->
<div class="container-fluid py-5">
    <div class="container py-5">
        <div class="text-center mx-auto mb-5" style="max-width: 700px;">
            <h1 class="display-4">Produk Terbaru</h1>
            <p>Hasil panen terbaik dari petani lokal untuk meja makan Anda.</p>
        </div>
        <div class="row g-4">
            @forelse($produks as $produk)
            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="rounded position-relative fruite-item border border-secondary">
                    <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="" 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, ',', '.') }}</p>
                            <a href="{{ route('produk.detail', $produk->id) }}" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Detail</a>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12 text-center">
                <div class="alert alert-warning">Belum ada produk yang tersedia.</div>
            </div>
            @endforelse
        </div>
    </div>
</div>
@endsection