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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', 'Flo.do | Florist & Self Photo Studio Nganjuk')</title>

    <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=Poppins:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css">

    <link href="{{ asset('vendors/bootstrap/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('vendors/bootstrap-icons/font/bootstrap-icons.min.css') }}" rel="stylesheet">
    <link href="{{ asset('vendors/glightbox/glightbox.min.css') }}" rel="stylesheet">
    <link href="{{ asset('vendors/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
    <link href="{{ asset('vendors/aos/aos.css') }}" rel="stylesheet">
    <link href="{{ asset('css/user/main.css') }}" rel="stylesheet">

    <script>
        (function() {
            const storedTheme = localStorage.getItem('theme') || 'light';
            document.documentElement.setAttribute('data-bs-theme', storedTheme);
        })();
    </script>
</head>

<body>
    <div class="site-wrap">

        <header class="fbs__net-navbar navbar navbar-expand-lg dark" aria-label="freebootstrap.net navbar">
            <div class="container d-flex align-items-center justify-content-between">

                <a class="navbar-brand w-auto" href="#">
                    <img class="img-fluid" src="{{ asset('img/logo.png') }}" style="max-height: 60px; width: auto;"
                        alt="Logo">
                </a>

                <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="offcanvas"
                    data-bs-target="#fbs__net-navbars" aria-controls="fbs__net-navbars" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span> </button>

                <div class="offcanvas offcanvas-start w-75" id="fbs__net-navbars" tabindex="-1"
                    aria-labelledby="fbs__net-navbarsLabel">

                    <div class="offcanvas-header">
                        <div class="offcanvas-header-logo">
                            <a class="logo-link" href="#">
                                <img class="img-fluid" src="{{ asset('img/logo.png') }}" style="max-height: 50px;"
                                    alt="Logo Mobile">
                            </a>
                        </div>
                        <button class="btn-close btn-close-black" type="button" data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                    </div>

                    <div class="offcanvas-body align-items-lg-center">
                        <ul class="navbar-nav nav ms-auto mb-2 mb-lg-0">
                            <li class="nav-item"><a
                                    class="nav-link scroll-link {{ request()->routeIs('beranda') ? 'active' : '' }}"
                                    aria-current="page" href="{{ route('beranda') }}">Beranda</a></li>
                            <li class="nav-item"><a
                                    class="nav-link scroll-link {{ request()->routeIs('pesan.buket', 'detail.buket', 'formulir.buket') ? 'active' : '' }}"
                                    href="{{ route('pesan.buket') }}">Pesan
                                    Buket</a></li>
                            <li class="nav-item"><a
                                    class="nav-link scroll-link  {{ request()->routeIs('booking.foto', 'detail.foto', 'formulir.foto') ? 'active' : '' }}"
                                    href="{{ route('booking.foto') }}">Booking Foto</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>

        <main>
            @yield('content')
        </main>
        <footer class="footer pt-3">
            <div class="container pb-3">
                <div class="row justify-content-between align-items-center">

                    <div class="col-lg-4 mb-4 mb-lg-0 text-center text-lg-start">
                        <a href="#" class="d-inline-block mb-3">
                            <img src="{{ asset('img/logo.png') }}" alt="Logo Flo.do" class="img-fluid"
                                style="max-height: 60px;">
                        </a>
                        <p class="d-block" style="color: black;"> Florist dan Self Photo Studio Nganjuk
                        </p>
                    </div>

                    <div class="col-lg-4 mb-4 mb-lg-0 text-center text-lg-center">
                        <ul class="list-unstyled footer-menu mb-0">
                            <li><a href="{{ route('beranda') }}">Beranda</a></li>
                            <li><a href="{{ route('pesan.buket') }}">Pesan Buket</a></li>
                            <li><a href="{{ route('booking.foto') }}">Booking Foto</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-4 text-center text-lg-end">
                        <h6 class="mb-3 text-dark">Temukan Kami di:</h6>

                        <div class="social-links d-flex justify-content-center justify-content-lg-end gap-3">
                            <a href="https://www.instagram.com/flo.do_/" class="social-icon"><i
                                    class="bi bi-instagram"></i></a>
                            <a href="https://wa.me/6282337687878" class="social-icon"><i class="bi bi-whatsapp"></i></a>
                            <a href="https://www.tiktok.com/@flo.do_" class="social-icon"><i
                                    class="bi bi-tiktok"></i></a>
                        </div>
                    </div>

                </div>
            </div>

            <div class="copyright-bar py-2 text-center text-white">
                <div class="container">
                    <small>&copy; {{ \Carbon\Carbon::now()->year }} Flo.do All Right Reserved</small>
                </div>
            </div>
        </footer>
        <a href="#" id="back-to-top" class="back-to-top d-flex align-items-center justify-content-center">
            <i class="bi bi-arrow-up-short"></i>
        </a>
    </div>

    <script src="{{ asset('vendors/bootstrap/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('vendors/aos/aos.js') }}"></script>
    <script>
        AOS.init();
    </script>
    <script>
        let backtotop = document.querySelector('.back-to-top');

        if (backtotop) {
            const toggleBacktotop = () => {
                if (window.scrollY > 100) {
                    backtotop.classList.add('active');
                } else {
                    backtotop.classList.remove('active');
                }
            }

            window.addEventListener('load', toggleBacktotop);
            document.addEventListener('scroll', toggleBacktotop);

            backtotop.addEventListener('click', (e) => {
                e.preventDefault();
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        }
    </script>
</body>

</html>
