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

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>DFOOD</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>


    <style>
        @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

        body {
            font-family: "Montserrat", sans-serif;
            overflow: hidden;
            height: 100dvh;
        }

        .sidebar-scroll {
            overflow-y: auto;
            height: 100dvh;
            padding-bottom: 6em;
        }

        .sidebar-scroll::-webkit-scrollbar {
            display: none;
        }

        .main-content-scroll {
            overflow-y: auto;
            height: 100dvh;
        }

        [x-cloak] {
            display: none !important;
        }

        html {
            scroll-behavior: smooth;
        }
    </style>
    <!-- Midtrans -->
    <script src="https://app.sandbox.midtrans.com/snap/snap.js"
        data-client-key="{{ config('services.midtrans.client_key') }}"></script>

    @livewireStyles
</head>

<body class="min-h-screen flex bg-gray-100">
    <!-- Sidebar -->
    <aside class="w-64 bg-white text-black min-h-screen px-4 py-6">
        <div class="text-5xl text-center font-bold mb-6">DFOOD</div>

        <div class="space-y-4 sidebar-scroll">
            <a href="#food" class="block">
                <div class="shadow rounded overflow-hidden">
                    <img src="img/makanan.jpg" class="w-full h-auto">
                    <div class="text-center py-2 border-t">Makanan</div>
                </div>
            </a>

            <a href="#drink" class="block">
                <div class="shadow rounded overflow-hidden">
                    <img src="img/minuman.jpg" class="w-full h-auto">
                    <div class="text-center py-2 border-t">Minuman</div>
                </div>
            </a>
        </div>
    </aside>

    <!-- Main Content -->
    {{ $slot }}

    @livewireScripts

    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script>
        document.addEventListener('livewire:load', function() {
            Livewire.on('notify', message => {
                console.log('Notification:', message);
            });

            Livewire.hook('message.processed', (message, component) => {
                if (component.fingerprint.name === 'food-order') {
                    console.log('Component updated:', component.serverMemo.data.cart);
                }
            });
        });

        setInterval(() => {
            fetch('/refresh-csrf')
                .then(response => response.json())
                .then(data => {
                    document.querySelector('meta[name="csrf-token"]').setAttribute('content', data.csrf_token);
                    window.Livewire.findComponents().forEach(component => {
                        component.canonical = component.canonical || {};
                        component.canonical.csrf = data.csrf_token;
                    });
                });
        }, 1800000);
    </script>
</body>

</html>
