<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'ATS CV Maker') | Profesional & Modern</title>

    <!-- Google Fonts -->
    <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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <!-- Tailwind & App Assets -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <style>
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #f9fafb; /* Light clean background */
            color: #111827;
        }
        /* Custom SweetAlert Custom Styling to fit Shadcn/Bento UI look */
        .swal2-popup {
            border-radius: 0.75rem !important;
            border: 2px solid #e5e7eb !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
        }
        .swal2-confirm {
            background-color: #4f46e5 !important;
            border-radius: 0.375rem !important;
        }
        .swal2-deny, .swal2-cancel {
            border-radius: 0.375rem !important;
        }
    </style>
    @yield('styles')
</head>
<body class="min-h-screen flex flex-col">

    <!-- Header / Navbar (Desktop) -->
    <header class="bg-white border-b border-gray-200 sticky top-0 z-50 hidden md:block">
        <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
            <a href="{{ route('dashboard') }}" class="flex items-center gap-2 font-bold text-xl tracking-tight text-indigo-600">
                <i data-lucide="file-check-2" class="w-6 h-6"></i>
                <span>ATS<span class="text-gray-900 font-medium">CV</span></span>
            </a>
            
            @auth
            <nav class="flex items-center gap-6">
                <a href="{{ route('dashboard') }}" class="text-sm font-medium text-gray-600 hover:text-indigo-600 transition-colors flex items-center gap-1">
                    <i data-lucide="layout-dashboard" class="w-4 h-4"></i> Dashboard
                </a>
                <a href="{{ route('cv.create') }}" class="text-sm font-medium text-gray-600 hover:text-indigo-600 transition-colors flex items-center gap-1">
                    <i data-lucide="file-plus" class="w-4 h-4"></i> Buat CV
                </a>
                <div class="h-4 w-px bg-gray-200"></div>
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center font-bold text-indigo-700 text-sm">
                        {{ substr(Auth::user()->name, 0, 2) }}
                    </div>
                    <span class="text-sm font-medium text-gray-700">{{ Auth::user()->name }}</span>
                </div>
                <form action="{{ route('logout') }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="text-sm font-medium text-red-600 hover:text-red-800 transition-colors flex items-center gap-1 cursor-pointer">
                        <i data-lucide="log-out" class="w-4 h-4"></i> Keluar
                    </button>
                </form>
            </nav>
            @else
            <nav class="flex items-center gap-4">
                <a href="{{ route('login') }}" class="text-sm font-medium text-gray-600 hover:text-indigo-600 transition-colors">Masuk</a>
                <a href="{{ route('register') }}" class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors shadow-sm">Daftar</a>
            </nav>
            @endauth
        </div>
    </header>

    <!-- Mobile Bottom Navigation (Mobile View) -->
    @auth
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50 md:hidden block shadow-lg">
        <div class="flex justify-around items-center h-16">
            <a href="{{ route('dashboard') }}" class="flex flex-col items-center justify-center text-xs font-medium {{ Route::is('dashboard') ? 'text-indigo-600' : 'text-gray-500 hover:text-indigo-600' }}">
                <i data-lucide="layout-dashboard" class="w-5 h-5 mb-0.5"></i>
                <span>Dashboard</span>
            </a>
            <a href="{{ route('cv.create') }}" class="flex flex-col items-center justify-center text-xs font-medium {{ Route::is('cv.create') ? 'text-indigo-600' : 'text-gray-500 hover:text-indigo-600' }}">
                <i data-lucide="plus-circle" class="w-5 h-5 mb-0.5"></i>
                <span>Buat CV</span>
            </a>
            <form action="{{ route('logout') }}" method="POST" id="mobile-logout-form" class="hidden">
                @csrf
            </form>
            <button onclick="document.getElementById('mobile-logout-form').submit()" class="flex flex-col items-center justify-center text-xs font-medium text-gray-500 hover:text-red-600 cursor-pointer">
                <i data-lucide="log-out" class="w-5 h-5 mb-0.5"></i>
                <span>Keluar</span>
            </button>
        </div>
    </div>
    @endauth

    <!-- Main Content Area -->
    <main class="flex-grow flex flex-col @auth pb-20 md:pb-6 @endauth">
        @yield('content')
    </main>

    <!-- Footer (Only Desktop) -->
    <footer class="bg-white border-t border-gray-200 py-6 mt-auto hidden md:block">
        <div class="max-w-7xl mx-auto px-6 flex items-center justify-between text-sm text-gray-500">
            <p>&copy; {{ date('Y') }} ATS CV Maker. All rights reserved.</p>
            <div class="flex gap-4">
                <a href="#" class="hover:text-indigo-600">Kebijakan Privasi</a>
                <a href="#" class="hover:text-indigo-600">Syarat Ketentuan</a>
            </div>
        </div>
    </footer>

    <!-- Initialize Lucide Icons -->
    <script>
        lucide.createIcons();

        // SweetAlert2 Toaster helper
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 4000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        // CSRF Token setup for Fetch API
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        // Realtime notification polling
        @auth
        function pollNotifications() {
            fetch('{{ route("api.notifications.poll") }}', {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(notifications => {
                notifications.forEach(notification => {
                    // Check if WhatsApp notification to avoid double alerts if simulated
                    if (notification.title.includes('WhatsApp')) {
                        // Refresh WhatsApp log simulator if it exists on page
                        if (window.refreshWhatsAppSimulator) {
                            window.refreshWhatsAppSimulator();
                        }
                    }
                    
                    Toast.fire({
                        icon: 'info',
                        title: notification.title,
                        text: notification.message
                    });
                });
            })
            .catch(error => console.error('Error polling notifications:', error));
        }

        // Poll every 5 seconds
        setInterval(pollNotifications, 5000);
        // Initial run
        pollNotifications();
        @endauth
    </script>
    @yield('scripts')
</body>
</html>
