@php
    $locale = app()->getLocale();
    $dir = $locale === 'ar' ? 'rtl' : 'ltr';
    $fontFamily = $locale === 'ar' ? "'Tajawal', sans-serif" : "'Segoe UI', sans-serif";
@endphp

<!DOCTYPE html>
<html lang="{{ $locale }}" dir="{{ $dir }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', __('dashboard')) | {{ __('project_title') }}</title>

    <!-- 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=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    
    <!-- Custom CSS -->
    <link href="{{ asset('css/dashboard.css').'?v='.(string) @filemtime(public_path('css/dashboard.css')) }}" rel="stylesheet">
    @stack('styles')
    
</head>
@if($locale === 'ar')
<body style="font-family: 'Tajawal', sans-serif;">
@else
<body style="font-family: 'Segoe UI', sans-serif;">
@endif
    <script>
        localStorage.setItem('theme', 'light');
        document.body.classList.remove('dark-mode');
    </script>

    @include('partials.sidebar')
    
    @include('partials.header')

    @include('partials.news_ticker')
    
    @include('partials.important_news_popup')

    @include('partials.system_alert_popup')

    <main class="main-content">
        @yield('content')
    </main>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // Auto-close offcanvas on mobile when link is clicked
        document.querySelectorAll('.sidebar .nav-link').forEach(link => {
            link.addEventListener('click', () => {
                const sidebar = document.getElementById('sidebarMenu');
                const bsOffcanvas = bootstrap.Offcanvas.getInstance(sidebar);
                if (bsOffcanvas && window.innerWidth < 992) {
                    bsOffcanvas.hide();
                }
            });
        });
    </script>
    @stack('scripts')
</body>
</html>
