<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>@yield('title') - GriyaPadi.id</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <link href="{{ asset('template/frontend/lib/lightbox/css/lightbox.min.css') }}" rel="stylesheet">
    <link href="{{ asset('template/frontend/lib/owlcarousel/assets/owl.carousel.min.css') }}" rel="stylesheet">

    <link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('template/frontend/css/style.css') }}" rel="stylesheet">

    @yield('css')

    <style>
        :root {
            --primary-color: #81c408;
            --primary-hover: #6da705;
            --secondary-color: #ffc107f6;
            --light-bg: #f5f7f9;
            --dark-text: #2c3e50;
            --muted-text: #6c757d;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--light-bg);
            color: var(--dark-text);
            line-height: 1.6;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            color: var(--dark-text);
            letter-spacing: -0.5px;
        }

        /* Utility Colors */
        .text-primary { color: var(--primary-color) !important; }
        .bg-primary { background-color: var(--primary-color) !important; }
        .border-primary { border-color: var(--primary-color) !important; }

        /* BUTTON */
        .btn {
            font-weight: 500;
            border-radius: 6px;
            padding: 0.5rem 1.25rem;
            transition: all 0.2s ease;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--primary-hover);
            border-color: var(--primary-hover);
            transform: translateY(-1px);
        }

        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: white;
        }

        /* NAVBAR */
        .navbar {
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
        }

        .navbar-light .navbar-nav .nav-link {
            font-weight: 500;
            color: var(--dark-text);
            font-size: 0.95rem;
        }

        .navbar-light .navbar-nav .nav-link.active,
        .navbar-light .navbar-nav .nav-link:hover {
            color: var(--primary-color) !important;
        }

        /* FORM INPUTS */
        .form-control {
            border-radius: 6px;
            border: 1px solid #dee2e6;
            padding: 0.6rem 1rem;
        }

        .form-control:focus {
            box-shadow: 0 0 0 3px rgba(129, 196, 8, 0.15);
            border-color: var(--primary-color);
        }

        /* CARDS */
        .card {
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
            transition: 0.3s;
            background: #fff;
        }

        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

        /* DROPDOWN HOVER HIJAU */
        .dropdown-item:hover,
        .dropdown-item:focus {
            background-color: rgba(129, 196, 8, 0.1) !important;
            color: #81c408 !important;
        }

        .dropdown-item.active,
        .dropdown-item:active {
            background-color: var(--primary-color) !important;
            color: #fff !important;
        }

        /* Footer Accent */
        .footer-accent {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
</head>

<body>

    <div id="spinner" class="show w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>
    </div>

    <div class="container-fluid fixed-top px-0">
        <div class="container-fluid bg-primary d-none d-lg-block py-3">
            <div class="container">
                <div class="d-flex justify-content-start text-white" style="font-size: 0.85rem;">
                    <div>
                        <span class="me-3"><i class="fas fa-map-marker-alt me-2"></i> Desa Mancon, Kecamatan Wilangan, Kabupaten Nganjuk</span>
                        <span class="me-3"><i class="fas fa-envelope me-2"></i> info@tanidesa.com</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid bg-white shadow-sm">
            <div class="container">
                <nav class="navbar navbar-light navbar-expand-xl py-3">
                    <a href="{{ url('/') }}" class="navbar-brand d-flex align-items-center">
                        <h1 class="text-primary m-0 fw-bold" style="font-size: 1.8rem; letter-spacing: -1px;">GriyaPadi.id</h1>
                    </a>

                    <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                        <span class="fa fa-bars text-primary"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarCollapse">
                        <div class="navbar-nav mx-auto">
                            <a href="{{ url('/') }}" class="nav-item nav-link mx-2 {{ request()->is('/') ? 'active' : '' }}">Home</a>
                            <a href="{{ route('shop') }}" class="nav-item nav-link mx-2 {{ request()->is('shop*') ? 'active' : '' }}">Belanja</a>
                        </div>

                        <div class="d-flex align-items-center mt-3 mt-xl-0">
                            
                            <form action="{{ route('shop') }}" method="GET" class="me-3 d-flex w-100 w-xl-auto mb-3 mb-xl-0">
                                <div class="input-group w-100">
                                    <input type="search" name="search" class="form-control border-end-0"
                                        placeholder="Cari produk..." value="{{ request('search') }}"
                                        style="border-radius: 6px 0 0 6px;">
                                    <button class="btn btn-outline-secondary border-start-0" type="submit"
                                        style="border-radius: 0 6px 6px 0; border-color: #dee2e6;">
                                        <i class="fas fa-search text-muted"></i>
                                    </button>
                                </div>
                            </form>

                            <a href="{{ route('cart') }}" class="position-relative me-3 text-dark">
                                <i class="bi bi-bag fs-4"></i>
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="font-size: 0.6rem;">
                                    
                                    {{-- PERBAIKAN LOGIKA HITUNG CART --}}
                                    @if(Auth::guard('pembeli')->check())
                                        {{ \App\Models\Cart::where('pembeli_id', Auth::guard('pembeli')->id())->count() }}
                                    @else
                                        0
                                    @endif
                                    
                                </span>
                            </a>

                            @if (Auth::guard('pembeli')->check())
                                <div class="nav-item dropdown ms-2">
                                    <a href="#" class="nav-link dropdown-toggle text-dark fw-bold d-flex align-items-center" data-bs-toggle="dropdown">
                                        <div class="bg-light rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 35px; height: 35px;">
                                            <i class="fas fa-user text-primary"></i>
                                        </div>
                                        <span class="d-none d-xl-inline small">{{ Auth::guard('pembeli')->user()->nama_lengkap }}</span>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-end border-0 shadow-sm m-0 rounded-3">
                                        <a href="{{ route('pembeli.profile') }}" class="dropdown-item py-2"><i class="bi bi-person me-2"></i> Profil</a>
                                        <a href="{{ route('pembeli.pesan.index') }}" class="dropdown-item py-2"><i class="bi bi-chat-dots me-2"></i> Pesan</a>
                                        <a href="{{ route('pesanan.saya') }}" class="dropdown-item py-2"><i class="bi bi-bag-check me-2"></i> Riwayat Pesanan</a>
                                        <div class="dropdown-divider"></div>
                                        <form action="{{ route('logout') }}" method="POST">
                                            @csrf
                                            <button type="submit" class="dropdown-item py-2 text-danger"><i class="bi bi-box-arrow-right me-2"></i> Logout</button>
                                        </form>
                                    </div>
                                </div>
                            @else
                                <a href="{{ route('login') }}" class="btn btn-primary px-4 ms-2">Login</a>
                            @endif
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>

    <div style="margin-top: 170px;">
        @if (session('success'))
            <div class="container mt-4">
                <div class="alert alert-success border-0 shadow-sm rounded-3 d-flex align-items-center" role="alert">
                    <i class="bi bi-check-circle-fill fs-4 me-3"></i>
                    <div>{{ session('success') }}</div>
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        @endif

        @yield('content')
    </div>

    <div class="container-fluid bg-dark text-white-50 footer mt-5 pt-5">
        <div class="container py-5">
            <div class="row g-5">
                <div class="col-lg-3 col-md-6">
                    <h3 class="text-white mb-4">GriyaPadi.id</h3>
                    <p class="mb-4 small">Menghubungkan petani lokal langsung dengan pembeli untuk harga yang adil dan produk berkualitas tinggi.</p>
                    <div class="d-flex pt-2">
                        <a class="btn btn-outline-light btn-sm rounded-circle me-2" href=""><i class="fab fa-twitter"></i></a>
                        <a class="btn btn-outline-light btn-sm rounded-circle me-2" href=""><i class="fab fa-facebook-f"></i></a>
                        <a class="btn btn-outline-light btn-sm rounded-circle" href=""><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <h5 class="text-white mb-4">Tautan Cepat</h5>
                    <div class="d-flex flex-column justify-content-start">
                        <a class="text-white-50 mb-2 text-decoration-none" href="{{ route('shop') }}"><i class="bi bi-chevron-right me-2 small"></i>Belanja</a>
                        <a class="text-white-50 mb-2 text-decoration-none" href="#"><i class="bi bi-chevron-right me-2 small"></i>Tentang Kami</a>
                        <a class="text-white-50 text-decoration-none" href="#"><i class="bi bi-chevron-right me-2 small"></i>Hubungi Kami</a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <h5 class="text-white mb-4">Akun Saya</h5>
                    <div class="d-flex flex-column justify-content-start">
                        <a class="text-white-50 mb-2 text-decoration-none" href="{{ route('pembeli.profile') }}"><i class="bi bi-chevron-right me-2 small"></i>Profil</a>
                        <a class="text-white-50 mb-2 text-decoration-none" href="{{ route('cart') }}"><i class="bi bi-chevron-right me-2 small"></i>Keranjang</a>
                        <a class="text-white-50 text-decoration-none" href="{{ route('pesanan.saya') }}"><i class="bi bi-chevron-right me-2 small"></i>Riwayat Pesanan</a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <h5 class="text-white mb-4">Hubungi Kami</h5>
                    <p class="small mb-2"><i class="fa fa-map-marker-alt me-3"></i>Desa Sukamaju, Nganjuk</p>
                    <p class="small mb-2"><i class="fa fa-envelope me-3"></i>info@tanidesa.com</p>
                    <p class="small mb-0"><i class="fa fa-phone-alt me-3"></i>+62 812 3456 7890</p>
                </div>
            </div>
        </div>
        <div class="container-fluid copyright bg-dark py-4 border-top border-secondary">
            <div class="container text-center">
                <span class="text-white-50 small">&copy; <a href="#" class="text-white">GriyaPadi.id</a>, All Right Reserved.</span>
            </div>
        </div>
    </div>

    <a href="#" class="btn btn-primary btn-lg-square rounded-circle back-to-top shadow"><i class="bi bi-arrow-up"></i></a>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ asset('template/frontend/lib/easing/easing.min.js') }}"></script>
    <script src="{{ asset('template/frontend/lib/waypoints/waypoints.min.js') }}"></script>
    <script src="{{ asset('template/frontend/lib/lightbox/js/lightbox.min.js') }}"></script>
    <script src="{{ asset('template/frontend/lib/owlcarousel/owl.carousel.min.js') }}"></script>
    <script src="{{ asset('template/frontend/js/main.js') }}"></script>

    @yield('js')
</body>

</html>