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

<head>
    <meta charset="utf-8">
    <title>@yield('title') - TaniDesa</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=Open+Sans:wght@400;600&family=Raleway:wght@600;800&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')
</head>

<body>

    <!-- Spinner -->
    <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-grow text-primary" role="status"></div>
    </div>

    <!-- Navbar -->
    <div class="container-fluid fixed-top">
        <div class="container topbar bg-primary d-none d-lg-block">
            <div class="d-flex justify-content-between">
                <div class="top-info ps-2">
                    <small class="me-3"><i class="fas fa-map-marker-alt me-2 text-secondary"></i> <a href="#"
                            class="text-white">Desa Sukamaju, Indonesia</a></small>
                    <small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#"
                            class="text-white">info@tanidesa.com</a></small>
                </div>
                <div class="top-link pe-2">
                    <a href="#" class="text-white"><small class="text-white mx-2">Kebijakan Privasi</small>/</a>
                    <a href="#" class="text-white"><small class="text-white mx-2">Syarat & Ketentuan</small></a>
                </div>
            </div>
        </div>
        <div class="container px-0">
            <nav class="navbar navbar-light bg-white navbar-expand-xl">
                <a href="{{ url('/') }}" class="navbar-brand">
                    <h1 class="text-primary display-6">TaniDesa</h1>
                </a>
                <button class="navbar-toggler py-2 px-3" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarCollapse">
                    <span class="fa fa-bars text-primary"></span>
                </button>
                <div class="collapse navbar-collapse bg-white" id="navbarCollapse">
                    <div class="navbar-nav mx-auto">
                        <a href="{{ url('/') }}"
                            class="nav-item nav-link {{ request()->is('/') ? 'active' : '' }}">Home</a>
                        <a href="{{ route('shop') }}"
                            class="nav-item nav-link {{ request()->is('shop*') ? 'active' : '' }}">Belanja</a>
                        <a href="#" class="nav-item nav-link">Kontak</a>
                    </div>

                    <div class="d-flex m-3 me-0 align-items-center">
                        <!-- Search bar -->
                        <form action="{{ route('shop') }}" method="GET" class="d-flex me-4">
                            <div class="input-group">
                                <input type="search" name="search" class="form-control border border-secondary"
                                    placeholder="Cari..." aria-label="Search" value="{{ request('search') }}">
                                <button class="btn btn-outline-secondary" type="submit">
                                    <i class="fas fa-search text-primary"></i>
                                </button>
                            </div>
                        </form>

                        <!-- Cart -->
                        <a href="{{ route('cart') }}" class="position-relative me-4 my-auto">
                            <i class="fa fa-shopping-bag fa-2x"></i>

                            <span
                                class="position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1"
                                style="top: -5px; left: 15px; height: 20px; min-width: 20px;">
                                {{ count((array) session('cart')) }}
                            </span>
                        </a>

                        <!-- User Account -->
                        @if (Auth::guard('pembeli')->check())
                            <div class="nav-item dropdown">
                                <a href="#" class="nav-link dropdown-toggle my-auto" data-bs-toggle="dropdown">
                                    <i class="fas fa-user fa-2x"></i>
                                    <span
                                        class="d-none d-xl-inline ms-1">{{ Auth::guard('pembeli')->user()->nama_lengkap }}</span>
                                </a>
                                <div class="dropdown-menu m-0 bg-secondary rounded-0">
                                    <!-- Menu Profil -->
                                    <a href="#" class="dropdown-item">Profil Saya</a>

                                    <!-- Menu Pesanan Saya -->
                                    <a href="{{ route('pesanan.saya') }}" class="dropdown-item">Pesanan Saya</a>

                                    <!-- Form Logout -->
                                    <form action="{{ route('logout') }}" method="POST">
                                        @csrf
                                        <button type="submit" class="dropdown-item">Logout</button>
                                    </form>
                                </div>
                            </div>
                        @else
                            <a href="{{ route('login') }}" class="my-auto">
                                <i class="fas fa-user fa-2x"></i> Login
                            </a>
                        @endif
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <!-- Main Content -->
    <div style="margin-top: 150px;">
        @if(session('success'))
            <div class="container mt-3">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fa fa-check-circle me-2"></i> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        @endif
        
        @yield('content')
    </div>

    <!-- Footer  -->
    <div class="container-fluid bg-dark text-white-50 footer pt-5 mt-5">
        <div class="container py-5">
            <div class="pb-4 mb-4" style="border-bottom: 1px solid rgba(226, 175, 24, 0.5) ;">
                <div class="row g-4">
                    <div class="col-lg-3">
                        <a href="#">
                            <h1 class="text-primary mb-0">TaniDesa</h1>
                            <p class="text-secondary mb-0">Segar & Organik</p>
                        </a>
                    </div>
                    <div class="col-lg-6">
                        <div class="position-relative mx-auto">
                            <input class="form-control border-0 w-100 py-3 px-4 rounded-pill" type="text"
                                placeholder="Email Anda">
                            <button type="submit"
                                class="btn btn-primary border-0 border-secondary py-3 px-4 position-absolute rounded-pill text-white"
                                style="top: 0; right: 0;">Langganan</button>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="d-flex justify-content-end pt-3">
                            <a class="btn  btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i
                                    class="fab fa-twitter"></i></a>
                            <a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i
                                    class="fab fa-facebook-f"></i></a>
                            <a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i
                                    class="fab fa-youtube"></i></a>
                            <a class="btn btn-outline-secondary btn-md-square rounded-circle" href=""><i
                                    class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row g-5">
                <div class="col-lg-3 col-md-6">
                    <div class="footer-item">
                        <h4 class="text-light mb-3">Tentang Kami</h4>
                        <p class="mb-4">TaniDesa adalah platform yang menghubungkan petani lokal langsung dengan
                            Anda. Kami menjamin kesegaran dan harga yang adil bagi petani.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="d-flex flex-column text-start footer-item">
                        <h4 class="text-light mb-3">Informasi Toko</h4>
                        <a class="btn-link" href="">Tentang Kami</a>
                        <a class="btn-link" href="">Hubungi Kami</a>
                        <a class="btn-link" href="">Kebijakan Privasi</a>
                        <a class="btn-link" href="">Syarat & Ketentuan</a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="d-flex flex-column text-start footer-item">
                        <h4 class="text-light mb-3">Akun</h4>
                        <a class="btn-link" href="#">Profil Saya</a>
                        <a class="btn-link" href="#">Keranjang Belanja</a>
                        <a class="btn-link" href="#">Riwayat Pesanan</a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-item">
                        <h4 class="text-light mb-3">Kontak</h4>
                        <p>Alamat: Desa Sukamaju, Indonesia</p>
                        <p>Email: info@tanidesa.com</p>
                        <p>Telepon: +62 812 3456 7890</p>
                        <div class="payment-methods">
                            <i class="fab fa-cc-visa fa-2x text-light me-2"></i>
                            <i class="fab fa-cc-mastercard fa-2x text-light me-2"></i>
                            <i class="fas fa-money-bill-wave fa-2x text-light"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid copyright bg-dark py-4">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                        <span class="text-light"><a href="#"><i
                                    class="fas fa-copyright text-light me-2"></i>TaniDesa</a>, All right
                            reserved.</span>
                    </div>
                    <div class="col-md-6 text-center text-md-end">
                        <span class="text-light">Designed By <a href="https://htmlcodex.com" class="text-white">HTML
                                Codex</a> Distributed By <a href="https://themewagon.com"
                                class="text-white">ThemeWagon</a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Back to Top -->
    <a href="#" class="btn btn-primary border-3 border-primary rounded-circle back-to-top"><i
            class="fa fa-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>
