<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ config('app.name', 'POM500') }} - Monitoring PK-POM</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0ea5e9',
                        secondary: '#64748b',
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Inter', sans-serif; }
    </style>
    @yield('styles')
</head>
<body class="bg-gray-50 text-gray-900">
    <div class="min-h-screen flex flex-col md:flex-row">
        <!-- Sidebar -->
        <aside class="w-full md:w-64 bg-slate-900 text-white flex-shrink-0">
            <div class="p-6 flex flex-col items-center border-b border-slate-800">
                @if(file_exists(public_path('img/logo_2026.png')))
                    <img src="{{ asset('img/logo_2026.png') }}" alt="POM500 Logo" class="h-20 w-auto mb-2">
                @else
                    <div class="h-20 w-20 bg-primary/10 rounded-xl flex items-center justify-center mb-2 border border-primary/20">
                        <span class="text-2xl font-black text-primary">POM</span>
                    </div>
                @endif
                <p class="text-[10px] text-gray-400 mt-1 uppercase tracking-[0.2em] font-bold">Sumba Tengah</p>
             </div>
            <nav class="mt-4 px-4 space-y-2">
                <a href="{{ route('dashboard') }}" class="flex items-center space-x-3 p-3 rounded-lg {{ request()->routeIs('dashboard') ? 'bg-primary text-white' : 'hover:bg-slate-800 transition' }}">
                    <i class="fas fa-chart-line w-5"></i>
                    <span>Dashboard</span>
                </a>
                <a href="{{ route('beneficiaries.index') }}" class="flex items-center space-x-3 p-3 rounded-lg {{ request()->routeIs('beneficiaries.*') ? 'bg-primary text-white' : 'hover:bg-slate-800 transition' }}">
                    <i class="fas fa-users w-5"></i>
                    <span>Penerima Manfaat</span>
                </a>
                <a href="{{ route('import.index') }}" class="flex items-center space-x-3 p-3 rounded-lg {{ request()->routeIs('import.*') ? 'bg-primary text-white' : 'hover:bg-slate-800 transition' }}">
                    <i class="fas fa-file-import w-5"></i>
                    <span>Import Data</span>
                </a>
                <a href="{{ route('map') }}" class="flex items-center space-x-3 p-3 rounded-lg {{ request()->routeIs('map') ? 'bg-primary text-white' : 'hover:bg-slate-800 transition' }}">
                    <i class="fas fa-map-location-dot w-5"></i>
                    <span>Peta Interaktif</span>
                </a>
                <a href="{{ route('documentation.index') }}" class="flex items-center space-x-3 p-3 rounded-lg {{ request()->routeIs('documentation.*') ? 'bg-primary text-white' : 'hover:bg-slate-800 transition' }}">
                    <i class="fas fa-camera w-5"></i>
                    <span>Dokumentasi</span>
                </a>
                <div class="pt-4 pb-2 border-t border-slate-800">
                    <p class="text-xs text-gray-500 uppercase px-3">Laporan</p>
                </div>
                <a href="{{ route('export.beneficiaries') }}" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800 transition">
                    <i class="fas fa-file-excel w-5"></i>
                    <span>Export Excel</span>
                </a>
                @if(Auth::check() && function_exists('app') && app()->bound(\Spatie\Permission\PermissionRegistrar::class))
                    @role('Admin')
                    <div class="pt-4 pb-2 border-t border-slate-800">
                        <p class="text-xs text-gray-500 uppercase px-3">Sistem</p>
                    </div>
                    <a href="{{ route('users.index') }}" class="flex items-center space-x-3 p-3 rounded-lg {{ request()->routeIs('users.*') ? 'bg-primary text-white' : 'hover:bg-slate-800 transition' }}">
                        <i class="fas fa-user-shield w-5"></i>
                        <span>Manajemen User</span>
                    </a>
                    <a href="{{ route('users.profile') }}" class="flex items-center space-x-3 p-3 rounded-lg {{ request()->routeIs('users.profile') ? 'bg-primary text-white' : 'hover:bg-slate-800 transition' }}">
                        <i class="fas fa-cog w-5"></i>
                        <span>Pengaturan</span>
                    </a>
                    @endrole
                @endif
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 flex flex-col">
            <!-- Header -->
            <header class="bg-white border-b h-16 flex items-center justify-between px-8">
                <div class="flex items-center">
                    <button class="md:hidden mr-4">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h2 class="text-lg font-semibold text-gray-700">@yield('header', 'Dashboard')</h2>
                </div>
                <div class="flex items-center space-x-4">
                    @guest
                        <a href="{{ route('login') }}" class="flex items-center space-x-2 px-4 py-2 bg-primary/10 hover:bg-primary/20 text-primary rounded-lg transition-colors">
                            <i class="fas fa-sign-in-alt"></i>
                            <span class="text-sm font-medium">Login</span>
                        </a>
                    @else
                        <a href="{{ route('users.profile') }}" class="flex items-center group">
                            <div class="text-right hidden sm:block mr-3">
                                <p class="text-sm font-medium text-gray-900 group-hover:text-primary transition-colors">{{ Auth::user()->name }}</p>
                                <p class="text-xs text-gray-500 uppercase">{{ Auth::user()->getRoleNames()->first() ?? 'No Role' }}</p>
                            </div>
                            <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold shadow-lg shadow-primary/20 group-hover:scale-110 transition-transform">
                                {{ substr(Auth::user()->name, 0, 1) }}
                            </div>
                        </a>
                        <form method="POST" action="{{ route('logout') }}" class="inline">
                            @csrf
                            <button type="submit" class="p-2 text-gray-400 hover:text-red-500 transition-colors" title="Logout">
                                <i class="fas fa-sign-out-alt"></i>
                            </button>
                        </form>
                    @endguest
                </div>
            </header>

            <!-- Page Content -->
            <div class="p-8">
                @if(session('success'))
                    <div class="mb-6 p-4 bg-green-50 border border-green-100 text-green-700 rounded-xl flex items-center shadow-sm">
                        <i class="fas fa-check-circle mr-3"></i>
                        <span class="text-sm font-medium">{{ session('success') }}</span>
                    </div>
                @endif

                @if($errors->any())
                    <div class="mb-6 p-4 bg-red-50 border border-red-100 text-red-700 rounded-xl shadow-sm">
                        <div class="flex items-center mb-2">
                            <i class="fas fa-exclamation-circle mr-3"></i>
                            <span class="text-sm font-bold">Terjadi kesalahan:</span>
                        </div>
                        <ul class="list-disc list-inside text-xs space-y-1 ml-7">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @yield('content')
            </div>
        </main>
    </div>
    <!-- Welcome Modal -->
    <div id="welcomeModal" class="fixed inset-0 z-[9999] hidden items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-fade-in">
        <div class="bg-white rounded-3xl shadow-2xl max-w-lg w-full overflow-hidden transform transition-all scale-95 opacity-0 duration-500" id="modalContent">
            <div class="relative">
                <div class="absolute top-4 right-4 z-10">
                    <button onclick="closeWelcomeModal()" class="w-10 h-10 rounded-full bg-black/20 hover:bg-black/40 text-white flex items-center justify-center transition-colors">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                @if(file_exists(public_path('img/logo_2026.png')))
                    <img src="{{ asset('img/logo_2026.png') }}" alt="Welcome POM500" class="w-full h-auto">
                @else
                    <div class="w-full h-64 bg-gradient-to-br from-primary to-blue-600 flex items-center justify-center">
                        <div class="text-center p-8">
                            <i class="fas fa-handshake text-6xl text-white/50 mb-4"></i>
                            <h3 class="text-3xl font-black text-white">Selamat Datang</h3>
                            <p class="text-white/80 mt-2 font-medium">Program PK-POM 2026</p>
                        </div>
                    </div>
                @endif
                
                <div class="p-8 text-center bg-white">
                    <h2 class="text-2xl font-bold text-gray-900 mb-2">Halo, Selamat Datang!</h2>
                    <p class="text-gray-600 leading-relaxed mb-6">
                        Selamat datang di Sistem Monitoring Real-time <br>
                        <span class="font-bold text-primary">Program PK-POM 2026</span> <br>
                        Kabupaten Sumba Tengah.
                    </p>
                    <button onclick="closeWelcomeModal()" class="w-full py-4 bg-primary hover:bg-primary/90 text-white rounded-2xl font-bold text-lg shadow-lg shadow-primary/30 transition-all hover:scale-[1.02] active:scale-95">
                        Mulai Monitoring
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const welcomeModal = document.getElementById('welcomeModal');
            const modalContent = document.getElementById('modalContent');
            
            // Cek apakah sudah tampil di sesi ini
            if (!sessionStorage.getItem('welcome_shown')) {
                // Tampilkan modal
                welcomeModal.classList.remove('hidden');
                welcomeModal.classList.add('flex');
                
                // Animasi masuk
                setTimeout(() => {
                    modalContent.classList.remove('scale-95', 'opacity-0');
                    modalContent.classList.add('scale-100', 'opacity-100');
                    
                    // Mainkan suara
                    playWelcomeVoice();
                }, 100);
            }
        });

        function playWelcomeVoice() {
            if ('speechSynthesis' in window) {
                const utterance = new SpeechSynthesisUtterance("selamat datang di program P K POM dua ribu dua puluh enam");
                utterance.lang = 'id-ID';
                utterance.rate = 0.9; // Sedikit lebih lambat agar jelas
                utterance.pitch = 1;
                window.speechSynthesis.speak(utterance);
            }
        }

        function closeWelcomeModal() {
            const welcomeModal = document.getElementById('welcomeModal');
            const modalContent = document.getElementById('modalContent');
            
            // Animasi keluar
            modalContent.classList.remove('scale-100', 'opacity-100');
            modalContent.classList.add('scale-95', 'opacity-0');
            
            setTimeout(() => {
                welcomeModal.classList.remove('flex');
                welcomeModal.classList.add('hidden');
                sessionStorage.setItem('welcome_shown', 'true');
            }, 500);
        }
    </script>
    @yield('scripts')
</body>
</html>
