<!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() }}">

        @hasSection('title')
            <title>@yield('title') | {{ setting('site_title', config('app.name')) }}</title>
        @else
            <title>{{ setting('site_title', config('app.name')) }}</title>
        @endif

        <meta name="description"
              content="@hasSection('meta_description')@yield('meta_description')@else{{ setting('site_description', '') }}@endif">

        @if(setting('site_keywords'))
            <meta name="keywords" content="{{ setting('site_keywords') }}">
        @endif

        <meta name="robots" content="index, follow">

        <link rel="canonical" href="{{ url()->current() }}">

        @if(setting('site_favicon'))
            <link rel="icon" type="image/x-icon" href="{{ asset(setting('site_favicon')) }}">
            <link rel="shortcut icon" href="{{ asset(setting('site_favicon')) }}">
        @endif

        <meta property="og:type"        content="website">
        <meta property="og:url"         content="{{ url()->current() }}">
        <meta property="og:site_name"   content="{{ setting('site_title', config('app.name')) }}">
        <meta property="og:title"
              content="@hasSection('title')@yield('title') | {{ setting('site_title', config('app.name')) }}@else{{ setting('site_title', config('app.name')) }}@endif">
        <meta property="og:description"
              content="@hasSection('meta_description')@yield('meta_description')@else{{ setting('site_description', '') }}@endif">
        @if(setting('site_logo'))
            <meta property="og:image" content="{{ asset('storage/' . setting('site_logo')) }}">
            <meta property="og:image:width"  content="1200">
            <meta property="og:image:height" content="630">
        @endif

        <meta name="twitter:card"        content="summary_large_image">
        <meta name="twitter:title"
              content="@hasSection('title')@yield('title') | {{ setting('site_title', config('app.name')) }}@else{{ setting('site_title', config('app.name')) }}@endif">
        <meta name="twitter:description"
              content="@hasSection('meta_description')@yield('meta_description')@else{{ setting('site_description', '') }}@endif">
        @if(setting('site_logo'))
            <meta name="twitter:image" content="{{ asset('storage/' . setting('site_logo')) }}">
        @endif
        @if(setting('twitter_url'))
            @php
                $twitterHandle = '@' . ltrim(parse_url(setting('twitter_url'), PHP_URL_PATH), '/');
            @endphp
            <meta name="twitter:site" content="{{ $twitterHandle }}">
        @endif

        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        @vite(['resources/css/app.css', 'resources/js/app.js'])

        @stack('head')
    </head>
    <body class="min-h-screen">
        <div class="max-w-[1440px] mx-auto relative">
            @include('layouts.navbar')

            <main class="p-4 sm:ml-64 pt-24 min-h-screen">
                <div class="max-w-full">
                    @yield('content')
                </div>
            </main>
        </div>

        <script>
        function openDeleteModal(modalId) {
            document.getElementById(modalId).classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        function closeDeleteModal(modalId) {
            document.getElementById(modalId).classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                const modals = document.querySelectorAll('[id^="delete-modal-"]');
                modals.forEach(modal => {
                    if (!modal.classList.contains('hidden')) {
                        modal.classList.add('hidden');
                        document.body.style.overflow = 'auto';
                    }
                });
            }
        });
        </script>

        @stack('scripts')
        @stack('footer')
    </body>
</html>
