<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="FIN-ANALYSIS PRO - Sistem Analisis Keuangan dengan Metode Altman Z-Score untuk menilai kesehatan keuangan perusahaan">
    <meta name="keywords" content="analisis keuangan, altman z-score, kesehatan perusahaan, prediksi kebangkrutan, financial analysis">
    <meta name="author" content="FIN-ANALYSIS PRO">
    
    <!-- Open Graph / Social Media -->
    <meta property="og:title" content="FIN-ANALYSIS PRO - Analisis Keuangan Profesional">
    <meta property="og:description" content="Sistem analisis keuangan dengan metode Altman Z-Score untuk menilai kesehatan perusahaan">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ url()->current() }}">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="{{ asset('images/favicon.svg') }}">
    
    <title>@yield('title', 'FIN-ANALYSIS PRO') - {{ config('app.name', 'FIN-ANALYSIS PRO') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800&display=swap" rel="stylesheet" />
    
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- Vite Assets -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    
    <!-- Livewire Styles (if using Livewire) -->
    @livewireStyles
    
    <!-- Custom Styles -->
    @stack('styles')
    
    <style>
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 10px;
            transition: all 0.3s ease;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }
        
        .dark ::-webkit-scrollbar-track {
            background: #1e293b;
        }
        
        .dark ::-webkit-scrollbar-thumb {
            background: #475569;
        }
        
        .dark ::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }
        
        /* Smooth transitions */
        * {
            transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        
        /* Glassmorphism effect */
        .glass {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark .glass {
            background: rgba(17, 25, 40, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        /* Gradient text */
        .gradient-text {
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* Loading animation */
        .loading-spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #2563eb;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Toast notification animations */
        .toast-enter-active, .toast-leave-active {
            transition: all 0.3s ease;
        }
        
        .toast-enter-from {
            opacity: 0;
            transform: translateX(30px);
        }
        
        .toast-leave-to {
            opacity: 0;
            transform: translateX(30px);
        }
        
        /* Page transition */
        .page-transition-enter-active,
        .page-transition-leave-active {
            transition: opacity 0.3s ease;
        }
        
        .page-transition-enter-from,
        .page-transition-leave-to {
            opacity: 0;
        }
    </style>
</head>

<body class="font-['Inter'] antialiased bg-gradient-to-br from-gray-50 via-white to-gray-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 text-gray-900 dark:text-gray-100 min-h-screen"
      x-data="{
          darkMode: localStorage.getItem('darkMode') === 'true' || 
                   (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches),
          sidebarOpen: false,
          notificationsOpen: false,
          profileOpen: false,
          loading: false,
          toasts: [],
          
          init() {
              if (this.darkMode) {
                  document.documentElement.classList.add('dark');
              }
              
              // Listen for dark mode changes
              this.$watch('darkMode', value => {
                  if (value) {
                      document.documentElement.classList.add('dark');
                  } else {
                      document.documentElement.classList.remove('dark');
                  }
                  localStorage.setItem('darkMode', value);
              });
              
              // Keyboard shortcuts
              document.addEventListener('keydown', (e) => {
                  // Ctrl/Cmd + K untuk search
                  if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                      e.preventDefault();
                      this.openSearch();
                  }
                  
                  // Esc untuk close sidebar
                  if (e.key === 'Escape') {
                      this.sidebarOpen = false;
                      this.notificationsOpen = false;
                      this.profileOpen = false;
                  }
              });
          },
          
          toggleDarkMode() {
              this.darkMode = !this.darkMode;
          },
          
          openSearch() {
              this.$dispatch('open-search');
          },
          
          showToast(message, type = 'info', duration = 5000) {
              const id = Date.now();
              this.toasts.push({ id, message, type });
              
              setTimeout(() => {
                  this.toasts = this.toasts.filter(t => t.id !== id);
              }, duration);
          },
          
          startLoading() {
              this.loading = true;
          },
          
          stopLoading() {
              this.loading = false;
          }
      }"
      @keydown.window.cmd-k.prevent="openSearch"
      @keydown.window.ctrl-k.prevent="openSearch">
    
    <!-- Loading Overlay -->
    <div x-show="loading" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 bg-gray-900 bg-opacity-50 backdrop-blur-sm z-[9999] flex items-center justify-center"
         style="display: none;">
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-2xl">
            <div class="loading-spinner mx-auto mb-4"></div>
            <p class="text-gray-600 dark:text-gray-400">Memuat...</p>
        </div>
    </div>
    
    <!-- Toast Notifications -->
    <div class="fixed top-4 right-4 z-[9998] space-y-2">
        <template x-for="toast in toasts" :key="toast.id">
            <div x-show="toast" 
                 x-transition:enter="toast-enter-active"
                 x-transition:enter-start="toast-enter-from"
                 x-transition:leave="toast-leave-active"
                 x-transition:leave-start="opacity-100 transform translate-x-0"
                 x-transition:leave-to="toast-leave-to"
                 class="max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-xl pointer-events-auto overflow-hidden border-l-4"
                 :class="{
                     'border-green-500': toast.type === 'success',
                     'border-red-500': toast.type === 'error',
                     'border-yellow-500': toast.type === 'warning',
                     'border-blue-500': toast.type === 'info'
                 }">
                <div class="p-4">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fas" 
                               :class="{
                                   'fa-check-circle text-green-500': toast.type === 'success',
                                   'fa-exclamation-circle text-red-500': toast.type === 'error',
                                   'fa-exclamation-triangle text-yellow-500': toast.type === 'warning',
                                   'fa-info-circle text-blue-500': toast.type === 'info'
                               }"></i>
                        </div>
                        <div class="ml-3 w-0 flex-1">
                            <p class="text-sm font-medium text-gray-900 dark:text-white" x-text="toast.message"></p>
                        </div>
                        <div class="ml-4 flex-shrink-0 flex">
                            <button @click="toasts = toasts.filter(t => t.id !== toast.id)"
                                    class="inline-flex text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>

    <!-- Navigation -->
    <nav class="sticky top-0 z-50 glass border-b border-gray-200/50 dark:border-gray-700/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16 lg:h-20">
                <!-- Logo & Brand -->
                <div class="flex items-center space-x-8">
                    <a href="{{ route('home') }}" class="flex items-center space-x-3 group">
                        <!-- Logo with animation -->
                        <div class="relative w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center transform group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg group-hover:shadow-xl">
                            <i class="fas fa-chart-line text-white text-xl"></i>
                            <div class="absolute inset-0 bg-white rounded-xl opacity-0 group-hover:opacity-20 transition-opacity"></div>
                        </div>
                        
                        <!-- Brand name with gradient -->
                        <div class="hidden sm:block">
                            <span class="font-black text-xl tracking-tight bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-300 bg-clip-text text-transparent">
                                FIN
                            </span>
                            <span class="font-black text-xl tracking-tight bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
                                ANALYSIS
                            </span>
                            <span class="font-black text-xl tracking-tight bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-300 bg-clip-text text-transparent">
                                PRO
                            </span>
                        </div>
                    </a>
                    
                    <!-- Desktop Navigation -->
                    <div class="hidden lg:flex items-center space-x-1">
                        <x-nav-link href="{{ route('home') }}" :active="request()->routeIs('home')" class="px-4 py-2">
                            <i class="fas fa-home mr-2"></i>
                            Beranda
                        </x-nav-link>
                        
                        @auth
                            <x-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')" class="px-4 py-2">
                                <i class="fas fa-chart-pie mr-2"></i>
                                Dashboard
                            </x-nav-link>
                            
                            <x-nav-link href="{{ route('analysis.step1') }}" :active="request()->routeIs('analysis.*')" class="px-4 py-2">
                                <i class="fas fa-calculator mr-2"></i>
                                Analisis
                            </x-nav-link>
                            
                            <x-nav-link href="{{ route('history.index') }}" :active="request()->routeIs('history.*')" class="px-4 py-2">
                                <i class="fas fa-history mr-2"></i>
                                Riwayat
                            </x-nav-link>
                            
                            <x-nav-link href="{{ route('companies.index') }}" :active="request()->routeIs('companies.*')" class="px-4 py-2">
                                <i class="fas fa-building mr-2"></i>
                                Perusahaan
                            </x-nav-link>
                        @endauth
                    </div>
                </div>
                
                <!-- Right Side Navigation -->
                <div class="flex items-center space-x-2">
                    <!-- Search Button -->
                    <button @click="openSearch" 
                            class="hidden md:flex items-center space-x-2 px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors group">
                        <i class="fas fa-search text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400"></i>
                        <span class="text-sm text-gray-500 dark:text-gray-400">Search</span>
                        <span class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded-lg text-gray-600 dark:text-gray-400">⌘K</span>
                    </button>
                    
                    <!-- Mobile Search Button -->
                    <button @click="openSearch" 
                            class="md:hidden p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
                        <i class="fas fa-search text-lg"></i>
                    </button>
                    
                    <!-- Dark Mode Toggle -->
                    <button @click="toggleDarkMode" 
                            class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-all">
                        <i class="fas fa-sun text-xl" x-show="!darkMode"></i>
                        <i class="fas fa-moon text-xl" x-show="darkMode" style="display: none;"></i>
                    </button>
                    
                    @auth
                        <!-- Notifications -->
                        <div class="relative" x-data="{ open: false }">
                            <button @click="open = !open" 
                                    class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-all relative">
                                <i class="fas fa-bell text-xl"></i>
                                <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
                            </button>
                            
                            <!-- Notifications dropdown -->
                            <div x-show="open" 
                                 @click.away="open = false"
                                 x-transition:enter="transition ease-out duration-200"
                                 x-transition:enter-start="opacity-0 translate-y-1"
                                 x-transition:enter-end="opacity-100 translate-y-0"
                                 x-transition:leave="transition ease-in duration-150"
                                 x-transition:leave-start="opacity-100 translate-y-0"
                                 x-transition:leave-end="opacity-0 translate-y-1"
                                 class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 z-50"
                                 style="display: none;">
                                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                                    <h3 class="font-semibold text-gray-900 dark:text-white">Notifikasi</h3>
                                </div>
                                <div class="max-h-96 overflow-y-auto">
                                    <div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer">
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 w-2 h-2 mt-2 bg-blue-500 rounded-full"></div>
                                            <div>
                                                <p class="text-sm text-gray-900 dark:text-white font-medium">Analisis selesai</p>
                                                <p class="text-xs text-gray-500 dark:text-gray-400">PT Maju Jaya</p>
                                                <p class="text-xs text-gray-400 mt-1">5 menit yang lalu</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer">
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 w-2 h-2 mt-2 bg-green-500 rounded-full"></div>
                                            <div>
                                                <p class="text-sm text-gray-900 dark:text-white font-medium">Laporan siap diunduh</p>
                                                <p class="text-xs text-gray-500 dark:text-gray-400">Q1 2024</p>
                                                <p class="text-xs text-gray-400 mt-1">1 jam yang lalu</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-3 border-t border-gray-200 dark:border-gray-700 text-center">
                                    <a href="#" class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">Lihat semua</a>
                                </div>
                            </div>
                        </div>
                        
                        <!-- User Menu -->
                        <div class="relative" x-data="{ open: false }">
                            <button @click="open = !open" 
                                    class="flex items-center space-x-2 p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-all group">
                                <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center shadow-md group-hover:shadow-lg transition-shadow">
                                    <span class="text-white font-semibold text-sm">
                                        {{ substr(Auth::user()->name, 0, 1) }}
                                    </span>
                                </div>
                                <span class="hidden lg:block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ Auth::user()->name }}
                                </span>
                                <i class="fas fa-chevron-down text-xs text-gray-500"></i>
                            </button>
                            
                            <!-- User dropdown -->
                            <div x-show="open" 
                                 @click.away="open = false"
                                 x-transition:enter="transition ease-out duration-200"
                                 x-transition:enter-start="opacity-0 translate-y-1"
                                 x-transition:enter-end="opacity-100 translate-y-0"
                                 x-transition:leave="transition ease-in duration-150"
                                 x-transition:leave-start="opacity-100 translate-y-0"
                                 x-transition:leave-end="opacity-0 translate-y-1"
                                 class="absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 z-50"
                                 style="display: none;">
                                <div class="p-3 border-b border-gray-200 dark:border-gray-700">
                                    <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ Auth::user()->name }}</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ Auth::user()->email }}</p>
                                </div>
                                <div class="p-2">
                                    <a href="{{ route('profile.edit') }}" 
                                       class="flex items-center px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-xl transition-colors">
                                        <i class="fas fa-user w-5 text-gray-500 dark:text-gray-400"></i>
                                        <span class="ml-2">Profil</span>
                                    </a>
                                    <a href="{{ route('settings') }}" 
                                       class="flex items-center px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-xl transition-colors">
                                        <i class="fas fa-cog w-5 text-gray-500 dark:text-gray-400"></i>
                                        <span class="ml-2">Pengaturan</span>
                                    </a>
                                    <hr class="my-1 border-gray-200 dark:border-gray-700">
                                    <form method="POST" action="{{ route('logout') }}">
                                        @csrf
                                        <button type="submit" 
                                                class="w-full flex items-center px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-colors">
                                            <i class="fas fa-sign-out-alt w-5"></i>
                                            <span class="ml-2">Keluar</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @else
                        <a href="{{ route('login') }}" 
                           class="hidden sm:inline-flex items-center px-4 py-2 border-2 border-gray-300 dark:border-gray-600 text-sm font-medium rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-400 dark:hover:border-gray-500 transition-all">
                            <i class="fas fa-sign-in-alt mr-2"></i>
                            Masuk
                        </a>
                        <a href="{{ route('register') }}" 
                           class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 text-sm font-medium rounded-xl text-white hover:from-blue-700 hover:to-indigo-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all">
                            <i class="fas fa-user-plus mr-2"></i>
                            Daftar
                        </a>
                    @endauth
                    
                    <!-- Mobile Menu Button -->
                    <button @click="sidebarOpen = !sidebarOpen" 
                            class="lg:hidden p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-all">
                        <i class="fas fa-bars text-xl" x-show="!sidebarOpen"></i>
                        <i class="fas fa-times text-xl" x-show="sidebarOpen" style="display: none;"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Mobile Sidebar -->
    <div x-show="sidebarOpen" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 -translate-x-full"
         x-transition:enter-end="opacity-100 translate-x-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-x-0"
         x-transition:leave-end="opacity-0 -translate-x-full"
         class="fixed inset-0 z-40 lg:hidden" 
         style="display: none;">
        <div class="fixed inset-0 bg-gray-600 bg-opacity-75 dark:bg-opacity-50 backdrop-blur-sm"></div>
        <div class="relative flex-1 flex flex-col max-w-xs w-full bg-white dark:bg-gray-800 shadow-2xl">
            <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
                <div class="flex-shrink-0 flex items-center px-4 mb-5">
                    <div class="w-8 h-8 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center">
                        <i class="fas fa-chart-line text-white text-sm"></i>
                    </div>
                    <span class="ml-2 font-bold text-lg">FIN-ANALYSIS PRO</span>
                </div>
                <nav class="px-2 space-y-1">
                    <x-responsive-nav-link href="{{ route('home') }}" :active="request()->routeIs('home')">
                        <i class="fas fa-home w-6"></i>
                        Beranda
                    </x-responsive-nav-link>
                    
                    @auth
                        <x-responsive-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">
                            <i class="fas fa-chart-pie w-6"></i>
                            Dashboard
                        </x-responsive-nav-link>
                        
                        <x-responsive-nav-link href="{{ route('analysis.step1') }}" :active="request()->routeIs('analysis.*')">
                            <i class="fas fa-calculator w-6"></i>
                            Analisis
                        </x-responsive-nav-link>
                        
                        <x-responsive-nav-link href="{{ route('history.index') }}" :active="request()->routeIs('history.*')">
                            <i class="fas fa-history w-6"></i>
                            Riwayat
                        </x-responsive-nav-link>
                        
                        <x-responsive-nav-link href="{{ route('companies.index') }}" :active="request()->routeIs('companies.*')">
                            <i class="fas fa-building w-6"></i>
                            Perusahaan
                        </x-responsive-nav-link>
                        
                    @endauth
                </nav>
            </div>
            
            @auth
                <div class="flex-shrink-0 flex border-t border-gray-200 dark:border-gray-700 p-4">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
                            <span class="text-white font-semibold">{{ substr(Auth::user()->name, 0, 1) }}</span>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">{{ Auth::user()->name }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ Auth::user()->email }}</p>
                        </div>
                    </div>
                </div>
            @endauth
        </div>
    </div>

    <!-- Search Modal -->
    <div x-data="{ open: false }" 
         @open-search.window="open = true"
         x-show="open"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50 overflow-y-auto"
         style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-900 bg-opacity-75 backdrop-blur-sm"></div>
            </div>
            
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            
            <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center">
                        <i class="fas fa-search text-gray-400 mr-3"></i>
                        <input type="text" 
                               placeholder="Cari perusahaan, analisis, atau laporan..." 
                               class="flex-1 bg-transparent border-0 focus:ring-0 text-gray-900 dark:text-white placeholder-gray-400"
                               x-ref="searchInput">
                        <div class="flex items-center space-x-2">
                            <span class="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-gray-600 dark:text-gray-400">ESC</span>
                            <button @click="open = false" class="text-gray-400 hover:text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="p-4 max-h-96 overflow-y-auto">
                    <div class="text-center text-gray-500 dark:text-gray-400 py-8">
                        <i class="fas fa-search text-4xl mb-3 opacity-50"></i>
                        <p>Ketik untuk mencari...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Page Header (if exists) -->
    @if(isset($header))
        <header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
            <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                {{ $header }}
            </div>
        </header>
    @endif

    <!-- Main Content -->
    <main class="flex-1 relative z-10" x-data="{ pageTransition: false }">
        <!-- Breadcrumbs (if applicable) -->
        @if(isset($breadcrumbs))
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
                <div class="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
                    <a href="{{ route('home') }}" class="hover:text-gray-700 dark:hover:text-gray-300">Beranda</a>
                    @foreach($breadcrumbs as $breadcrumb)
                        <i class="fas fa-chevron-right text-xs"></i>
                        @if($breadcrumb['url'] ?? false)
                            <a href="{{ $breadcrumb['url'] }}" class="hover:text-gray-700 dark:hover:text-gray-300">{{ $breadcrumb['title'] }}</a>
                        @else
                            <span class="text-gray-900 dark:text-white font-medium">{{ $breadcrumb['title'] }}</span>
                        @endif
                    @endforeach
                </div>
            </div>
        @endif

        <!-- Alert Messages -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
            @if(session('success'))
                <div class="rounded-xl bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 p-4 mb-4 animate-slide-down">
                    <div class="flex items-center">
                        <i class="fas fa-check-circle text-green-500 mr-3"></i>
                        <p class="text-sm text-green-700 dark:text-green-300">{{ session('success') }}</p>
                    </div>
                </div>
            @endif

            @if(session('error'))
                <div class="rounded-xl bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 mb-4 animate-slide-down">
                    <div class="flex items-center">
                        <i class="fas fa-exclamation-circle text-red-500 mr-3"></i>
                        <p class="text-sm text-red-700 dark:text-red-300">{{ session('error') }}</p>
                    </div>
                </div>
            @endif

            @if(session('warning'))
                <div class="rounded-xl bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 p-4 mb-4 animate-slide-down">
                    <div class="flex items-center">
                        <i class="fas fa-exclamation-triangle text-yellow-500 mr-3"></i>
                        <p class="text-sm text-yellow-700 dark:text-yellow-300">{{ session('warning') }}</p>
                    </div>
                </div>
            @endif

            @if(session('info'))
                <div class="rounded-xl bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-4 mb-4 animate-slide-down">
                    <div class="flex items-center">
                        <i class="fas fa-info-circle text-blue-500 mr-3"></i>
                        <p class="text-sm text-blue-700 dark:text-blue-300">{{ session('info') }}</p>
                    </div>
                </div>
            @endif

            @if($errors->any())
                <div class="rounded-xl bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 mb-4 animate-slide-down">
                    <div class="flex items-start">
                        <i class="fas fa-exclamation-circle text-red-500 mr-3 mt-0.5"></i>
                        <div>
                            <p class="text-sm font-medium text-red-800 dark:text-red-300">Terdapat kesalahan pada input:</p>
                            <ul class="mt-2 list-disc list-inside text-sm text-red-700 dark:text-red-400">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Page Content -->
        <div class="py-8">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                {{ $slot }}
                @yield('content')
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-auto">
        <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <!-- Company Info -->
                <div class="col-span-1 md:col-span-2">
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-8 h-8 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-chart-line text-white text-sm"></i>
                        </div>
                        <span class="font-bold text-lg">FIN-ANALYSIS PRO</span>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        Sistem analisis keuangan dengan metode Altman Z-Score untuk menilai kesehatan perusahaan dan memprediksi risiko kebangkrutan.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Quick Links -->
                <div>
                    <h3 class="font-semibold mb-4">Quick Links</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="{{ route('home') }}" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">Beranda</a></li>
                        <li><a href="{{ route('analysis.step1') }}" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">Analisis Baru</a></li>
                        <li><a href="{{ route('history.index') }}" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">Riwayat</a></li>
                        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">Tentang Kami</a></li>
                    </ul>
                </div>
                
                <!-- Support -->
                <div>
                    <h3 class="font-semibold mb-4">Bantuan</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">FAQ</a></li>
                        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">Panduan</a></li>
                        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">Hubungi Kami</a></li>
                        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">Kebijakan Privasi</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-200 dark:border-gray-700 mt-8 pt-8 text-center text-sm text-gray-500 dark:text-gray-400">
                <p>&copy; {{ date('Y') }} FIN-ANALYSIS PRO. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Back to Top Button -->
    <button x-data="{ visible: false }"
            @scroll.window="visible = window.scrollY > 500"
            x-show="visible"
            x-transition
            @click="window.scrollTo({ top: 0, behavior: 'smooth' })"
            class="fixed bottom-6 right-6 p-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all z-50"
            style="display: none;">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- Livewire Scripts -->
    @livewireScripts

    <!-- Custom Scripts -->
    @stack('scripts')
    
    <script>
        // Global helper functions
        window.showToast = function(message, type = 'info') {
            if (window.Alpine) {
                window.Alpine.store('app').showToast(message, type);
            }
        };
        
        window.startLoading = function() {
            if (window.Alpine) {
                window.Alpine.store('app').startLoading();
            }
        };
        
        window.stopLoading = function() {
            if (window.Alpine) {
                window.Alpine.store('app').stopLoading();
            }
        };
        
        // Handle AJAX errors
        window.addEventListener('ajax-error', function(e) {
            showToast(e.detail.message || 'Terjadi kesalahan', 'error');
        });
        
        // Keyboard shortcuts
        document.addEventListener('keydown', function(e) {
            // ? for help
            if (e.key === '?' && !e.ctrlKey && !e.metaKey && !e.altKey) {
                e.preventDefault();
                showToast('Tekan ⌘K untuk mencari', 'info');
            }
            
            // / for search
            if (e.key === '/' && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
                e.preventDefault();
                document.querySelector('[x-data]')?.__x?.openSearch();
            }
        });
    </script>
</body>
</html>
