@php
    $branding = app(\App\Domain\Shared\Services\SettingsService::class);
    $brandPrimary = $branding->get('branding.primary_color', '#2563eb');
    $brandSecondary = $branding->get('branding.secondary_color', '#7c3aed');
    $brandAccent = $branding->get('branding.accent_color', '#059669');
    $brandSidebarBg = $branding->get('branding.sidebar_bg', '#0f172a');
    $brandSidebarText = $branding->get('branding.sidebar_text', '#e2e8f0');
    $brandSidebarActive = $branding->get('branding.sidebar_active', '#2563eb');
    $brandSuccess = $branding->get('branding.success_color', '#10b981');
    $brandWarning = $branding->get('branding.warning_color', '#f59e0b');
    $brandDanger = $branding->get('branding.danger_color', '#ef4444');
    $brandFontAr = $branding->get('branding.font_family_ar', 'Cairo');
    $brandFontEn = $branding->get('branding.font_family_en', 'Inter');
    $brandFontSize = $branding->get('branding.font_size_base', '14');
    $brandLogo = $branding->get('branding.logo');
    $brandLogoDark = $branding->get('branding.logo_dark');
    $showLogoSidebar = $branding->get('branding.show_logo_in_sidebar', true);
@endphp
<!DOCTYPE html>
<html dir="rtl" lang="ar" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $title ?? 'El Captain' }} - الكابتن</title>
    @if($favicon = $branding->get('branding.favicon'))
        <link rel="icon" href="{{ Storage::disk('public')->url($favicon) }}" type="image/png">
    @endif
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family={{ urlencode($brandFontAr) }}:wght@300;400;500;600;700;800&family={{ urlencode($brandFontEn) }}:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    <style>
        /* x-cloak was used throughout without this rule, so cloaked elements
           flashed visible before Alpine booted. */
        [x-cloak] { display: none !important; }
        :root {
            --brand-primary: {{ $brandPrimary }};
            --brand-secondary: {{ $brandSecondary }};
            --brand-accent: {{ $brandAccent }};
            --brand-sidebar-bg: {{ $brandSidebarBg }};
            --brand-sidebar-text: {{ $brandSidebarText }};
            --brand-sidebar-active: {{ $brandSidebarActive }};
            --brand-success: {{ $brandSuccess }};
            --brand-warning: {{ $brandWarning }};
            --brand-danger: {{ $brandDanger }};
            --brand-font-size: {{ $brandFontSize }}px;
        }
        body {
            font-family: '{{ $brandFontAr }}', '{{ $brandFontEn }}', sans-serif;
            font-size: var(--brand-font-size);
        }
    </style>
</head>
<body class="h-full bg-gray-50">
    <div x-data="{ sidebarOpen: false }" class="min-h-full" @keydown.escape.window="sidebarOpen = false">
        <!-- Mobile sidebar overlay -->
        <div x-show="sidebarOpen" x-cloak
             x-transition:enter="transition-opacity ease-linear duration-300"
             x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
             x-transition:leave="transition-opacity ease-linear duration-300"
             x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
             class="fixed inset-0 z-30 bg-gray-900/60 backdrop-blur-sm lg:hidden" @click="sidebarOpen = false">
        </div>

        <!-- Sidebar -->
        @include('components.layouts.sidebar')

        <!-- Main content area -->
        <div class="lg:ms-64 min-h-screen flex flex-col">
            <!-- Topbar -->
            @include('components.layouts.topbar')

            <!-- Page content -->
            <main class="flex-1 p-3 sm:p-5 lg:p-8 pb-20 sm:pb-8">
                <!-- Flash messages -->
                @if(session('success'))
                    <div class="mb-4 rounded-lg bg-green-50 p-3 sm:p-4 border border-green-200">
                        <p class="text-sm text-green-700">{{ session('success') }}</p>
                    </div>
                @endif
                @if(session('error'))
                    <div class="mb-4 rounded-lg bg-red-50 p-3 sm:p-4 border border-red-200">
                        <p class="text-sm text-red-700">{{ session('error') }}</p>
                    </div>
                @endif

                {{ $slot }}
            </main>
        </div>
    </div>
    @livewireScripts
</body>
</html>
