<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>@isset($header) {{ $header }} @endisset - {{ config('app.name', 'نظام إدارة الأعمال') }}</title>

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

        <!-- Bootstrap CSS for Alerts -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        <link href="{{ asset('css/custom.css') }}" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        @stack('styles')

        <style>
            [x-cloak] { display: none !important; }
            
            * { 
                margin: 0; 
                padding: 0; 
                box-sizing: border-box; 
            }
            
            html { 
                width: 100%; 
                height: 100%; 
            }
            
            body { 
                width: 100%; 
                height: 100%; 
                overflow: hidden;
                margin: 0;
                padding: 0;
                font-family: inherit;
            }
            
            /* Navigation Bar - Fixed at top */
            nav { 
                position: fixed !important; 
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                height: 64px !important;
                z-index: 50 !important;
                background-color: white;
            }
            
            /* Main layout container */
            .app-layout-container {
                position: fixed;
                top: 64px;
                left: 0;
                right: 0;
                bottom: 0;
                display: flex;
                z-index: 1;
                overflow: hidden;
                width: 100%;
                height: calc(100vh - 64px);
            }
            
            /* Main content area - takes remaining space */
            .content-wrapper { 
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                width: 100%;
                height: 100%;
                background-color: #f9fafb;
            }
            
            /* Scrollable content */
            .main-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow-y: auto;
                overflow-x: hidden;
                width: 100%;
                height: 100%;
                background-color: #f9fafb;
            }
            
            /* Sidebar positioned absolutely on the right */
            .sidebar {
                position: fixed !important;
                top: 64px !important;
                right: 0 !important;
                width: 16rem !important;
                height: calc(100vh - 64px) !important;
                z-index: 40 !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                background-color: white;
                transform-origin: right top;
                transform: translateX(0) !important;
                transition: transform 300ms ease !important;
                display: block !important;
                opacity: 1 !important;
                visibility: visible !important;
            }
            
            .sidebar.hidden {
                transform: translateX(100%) !important;
                pointer-events: none !important;
            }
        </style>
    </head>
    <body class="font-sans antialiased">
        <div x-data="{ 
            sidebarOpen: () => { try { return $store.sidebar.open } catch { return false } }
        }" x-cloak style="width: 100%; height: 100%; display: flex; flex-direction: column;">
            
            <!-- Navigation - FIXED at top -->
            @include('layouts.navigation')

            <!-- Main Layout Container -->
            <div class="app-layout-container">
                <!-- Main Content Wrapper -->
                <div class="content-wrapper">
                    <!-- Scrollable Main Content Area -->
                    <div class="main-content">
                        <!-- Alerts Section -->
                        <div class="bg-gray-50 border-b border-gray-200 px-4 sm:px-6 lg:px-8 flex-shrink-0">
                            @include('layouts.alerts')
                        </div>

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

                        <!-- Page Content -->
                        <main class="flex-1 overflow-y-auto px-4 sm:px-6 lg:px-8 bg-gray-50">
                            <div class="max-w-7xl mx-auto py-8">
                                {{ $slot }}
                            </div>
                        </main>
                    </div>
                </div>
            </div>
            
            <!-- Sidebar - FIXED on right (outside container) -->
            @include('layouts.sidebar')
        </div>

        <!-- Bootstrap JS for Alerts -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

        <!-- Auto-dismiss alerts after 5 seconds -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const alerts = document.querySelectorAll('.alert');
                alerts.forEach(alert => {
                    setTimeout(() => {
                        const bsAlert = new bootstrap.Alert(alert);
                        bsAlert.close();
                    }, 5000);
                });
            });
        </script>

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