<!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){{ trim(strip_tags($header)) }} - @endisset{{ \App\Models\SystemSetting::get('system_name', config('app.name', 'نظام إدارة الأعمال')) }}</title>

        <!-- Favicon -->
        @php
            $systemLogo = \App\Models\SystemSetting::get('system_logo');
            $faviconUrl = $systemLogo ? route('storage', $systemLogo) : asset('images/logo.png');
        @endphp
        <link rel="icon" type="image/png" href="{{ $faviconUrl }}" sizes="32x32">
        <link rel="apple-touch-icon" href="{{ $faviconUrl }}">
        <link rel="shortcut icon" href="{{ $faviconUrl }}">

        <!-- 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">

        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

        <!-- Select2 CSS -->
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.rtl.min.css" />

        <!-- 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, body { 
                width: 100%; 
                height: 100%; 
                direction: rtl;
            }
            
            body { 
                overflow: hidden;
                font-family: inherit;
            }
            
            /* Main layout container - FIXED */
            .app-layout-container {
                position: fixed;
                top: 64px;
                left: 0;
                right: 0;
                bottom: 0;
                display: flex;
                flex-direction: row;
                direction: rtl;
                z-index: 1;
                overflow: hidden;
                height: calc(100vh - 64px);
                width: 100%;
            }
            
            /* Sidebar على اليمين */
            .sidebar {
                position: relative;
                flex: 0 0 16rem;
                min-width: 16rem;
                max-width: 16rem;
                width: 16rem;
                height: 100%;
                overflow-y: auto;
                overflow-x: visible;
                background-color: white;
                box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
                transition: all 300ms ease;
                order: 1;
                direction: rtl;
            }
            
            /* Content على اليسار */
            .content-wrapper { 
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                height: 100%;
                background-color: #f9fafb;
                min-width: 0;
                order: 2;
                direction: rtl;
            }
            
            .main-content {
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                overflow-y: auto;
                overflow-x: hidden;
                width: 100%;
                background-color: #f9fafb;
                min-width: 0;
                direction: rtl;
            }
            
            .sidebar nav { 
                position: relative !important;
                overflow-y: auto !important;
                overflow-x: visible !important;
                width: 100%;
                direction: rtl;
            }
            
            .sidebar.hidden {
                flex: 0 0 0 !important;
                min-width: 0 !important;
                max-width: 0 !important;
                width: 0 !important;
                overflow: hidden !important;
                pointer-events: none;
                visibility: hidden;
            }
        </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">
                <!-- Sidebar -->
                @include('layouts.sidebar')
                
                <!-- Main Content Wrapper -->
                <div class="content-wrapper">
                    <!-- Scrollable Main Content Area -->
                    <div class="main-content">
                        <!-- 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">
                                @include('layouts.alerts')
                                @yield('content')
                                {{ $slot ?? '' }}
                            </div>

                            <!-- Footer -->
                            <footer class="bg-white border-t border-gray-200 py-4 px-4 sm:px-6 lg:px-8 mt-auto">
                                <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center text-sm text-gray-500">
                                    <div>
                                        {{ \App\Models\SystemSetting::get('copyright_text', '© ' . date('Y') . ' ' . config('app.name')) }}
                                    </div>
                                    <div class="mt-2 md:mt-0 flex gap-4">
                                        @if($salesPhone = \App\Models\SystemSetting::get('sales_phone'))
                                            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Sales', 'المبيعات') }}: {{ $salesPhone }}</span>
                                        @endif
                                        @if($supportPhone = \App\Models\SystemSetting::get('support_phone'))
                                            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Support', 'الدعم') }}: {{ $supportPhone }}</span>
                                        @endif
                                    </div>
                                </div>
                            </footer>
                        </main>
                    </div>
                </div>
            </div>
        </div>

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

        <!-- Select2 JS -->
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

        <!-- Auto-dismiss success alerts only after 5 seconds -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Initialize Select2 for all select elements with 'select2' class
                function initSelect2() {
                    $('.select2').each(function() {
                        $(this).select2({
                            theme: 'bootstrap-5',
                            width: '100%',
                            dir: document.documentElement.dir || 'rtl',
                            placeholder: $(this).data('placeholder'),
                            allowClear: Boolean($(this).data('allow-clear'))
                        });
                    });
                }

                initSelect2();

                const alerts = document.querySelectorAll('.alert-auto-dismiss');
                alerts.forEach(alert => {
                    setTimeout(() => {
                        const bsAlert = new bootstrap.Alert(alert);
                        bsAlert.close();
                    }, 5000);
                });
            });
        </script>

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