<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="midtrans-client-key" content="{{ config('services.midtrans.client_key') }}">
    <meta name="midtrans-snap-url" content="{{ config('services.midtrans.snap_url') }}">

    <title>{{ config('app.name', 'DFOOD') }}</title>

    {{-- Vite Assets --}}
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <style>
        .opacity-bg {
            background-color: rgba(0, 0, 0, 0.75);
        }

        input[type="radio"],
        input[type="checkbox"],
        input[type="button"],
        input[type="submit"],
        input[type="reset"],
        input[type="image"],
        select,
        button {
            cursor: pointer;
        }
    </style>
    @livewireStyles
</head>

<body class="font-sans antialiased">

    {{ $slot }}

    <script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ config('services.midtrans.client_key') }}"></script>

    {{-- Custom Scripts --}}
    <script>
        document.addEventListener('livewire:initialized', function() {
            // Event Notifikasi (global notification)
            Livewire.on('notify', (data) => {
                console.log('🔔 Notification:', data.message);
                window.dispatchEvent(new CustomEvent('notify', {
                    detail: {
                        message: data.message
                    }
                }));
            });

            // Debug Log
            Livewire.on('logToConsole', (data) => {
                console.log('[Livewire Log]', data.message);
            });

            // Refresh CSRF Token tiap 30 menit
            setInterval(() => {
                fetch('/refresh-csrf', {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        const csrfMeta = document.querySelector('meta[name="csrf-token"]');
                        if (csrfMeta) {
                            csrfMeta.setAttribute('content', data.csrf_token);
                            console.log('🔁 CSRF token refreshed:', data.csrf_token);
                        }
                    })
                    .catch(error => {
                        console.error('❌ Gagal refresh CSRF token:', error);
                    });
            }, 1800000); // 30 menit
        });
    </script>
    {{-- @stack('scripts') --}}

    @livewireScripts
</body>

</html>
