<!DOCTYPE html>
<html lang="ar" dir="rtl">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ $title ?? setting('site_name', 'Ledger ERP') }}</title>
        @if(setting('icon_url'))
        <link rel="icon" href="{{ setting('icon_url') }}">
        @endif
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        
        <!-- Google 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=Almarai:wght@300;400;700;800&family=Cairo:wght@200..1000&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+Arabic:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Readex+Pro:wght@160..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Tajawal:wght@200;300;400;500;700;800;900&family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap" rel="stylesheet">
        
        <style>
            body {
                font-family: '{{ setting('font_ui', 'Tajawal') }}', sans-serif;
            }
        </style>
        @livewireStyles
    <!-- TomSelect for searchable dropdowns -->
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
    <style>
        .ts-control { border-radius: 0.5rem; border-color: #f1f5f9; background-color: #ffffff; padding: 0.625rem 1rem; font-size: 0.875rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
        .ts-control:focus { border-color: #818cf8; box-shadow: 0 0 0 1px #818cf8; }
        .ts-dropdown { border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); border: 1px solid #e2e8f0; }
        .ts-dropdown .option { padding: 0.5rem 1rem; font-size: 0.875rem; }
        .ts-dropdown .active { background-color: #eef2ff; color: #4f46e5; }
    </style>
    </head>
    <body class="bg-gray-50 text-gray-800 antialiased min-h-screen flex flex-col">
        
        <!-- Primary Top Navbar -->
        <nav class="bg-slate-900 text-white shadow-lg relative z-40">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex items-center justify-between h-16">
                    <!-- Right: Logo -->
                    <div class="flex items-center gap-3">
                        @if(setting('logo_url'))
                            <img src="{{ setting('logo_url') }}" alt="Logo" class="h-10 w-auto object-contain">
                        @else
                            <div class="w-10 h-10 bg-indigo-500 rounded-lg flex items-center justify-center text-xl font-bold shadow-inner">
                                {{ mb_substr(setting('site_name', 'Ledger ERP'), 0, 1) }}
                            </div>
                        @endif
                        <span class="text-xl font-bold tracking-wider">{{ setting('site_name', 'Ledger ERP') }}</span>
                    </div>

                    <!-- Left: Global Search & Profile -->
                    <div class="flex items-center gap-6">
                        <div class="hidden md:block relative">
                            <input type="text" placeholder="بحث عام..." class="bg-slate-800 text-sm text-gray-200 rounded-full pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 border-none placeholder-gray-400">
                            <svg class="w-5 h-5 absolute right-3 top-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                        </div>
                        
                        <button class="text-gray-300 hover:text-white transition">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
                        </button>
                        
                        <!-- User Dropdown -->
                        <div class="relative" x-data="{ open: false }" @click.away="open = false">
                            <div @click="open = !open" class="flex items-center gap-2 cursor-pointer hover:bg-slate-800 p-2 rounded-lg transition select-none">
                                <div class="w-8 h-8 bg-indigo-100 text-indigo-800 rounded-full flex items-center justify-center font-bold overflow-hidden border border-indigo-200/20">
                                    @if(auth()->user()->avatar_url)
                                        <img src="{{ auth()->user()->avatar_url }}" alt="User" class="w-full h-full object-cover">
                                    @else
                                        {{ mb_substr(auth()->user()->name ?? 'U', 0, 1) }}
                                    @endif
                                </div>
                                <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                            </div>
                            
                            <!-- Dropdown Menu -->
                            <div x-show="open" x-cloak x-transition.opacity.duration.200ms class="absolute left-0 mt-2 w-56 bg-white rounded-xl shadow-lg border border-slate-100 py-2 z-50 text-sm font-bold text-slate-700" style="display: none;">
                                <div class="px-4 py-3 border-b border-slate-100 mb-1">
                                    <div class="text-slate-800">{{ auth()->user()->name ?? 'User' }}</div>
                                    <div class="text-xs text-slate-400 font-normal mt-0.5">{{ auth()->user()->email ?? '' }}</div>
                                </div>
                                
                                <a href="{{ route('profile') }}" wire:navigate class="block px-4 py-2 hover:bg-slate-50 hover:text-indigo-600 transition flex items-center gap-3">
                                    <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                                    الملف الشخصي
                                </a>
                                
                                <form method="POST" action="{{ route('logout') }}" class="m-0 p-0">
                                    @csrf
                                    <button type="submit" class="w-full text-right px-4 py-2 hover:bg-red-50 hover:text-red-600 transition flex items-center gap-3">
                                        <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
                                        تسجيل الخروج
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- Secondary Top Navbar -->
        <nav class="bg-white border-b border-gray-200 shadow-sm relative z-30">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex items-center gap-6 md:gap-8 h-12 overflow-visible">
                    <!-- Dashboard -->
                    <a href="{{ route('dashboard') }}" class="inline-flex items-center gap-2 px-1 h-full border-b-2 border-indigo-500 text-sm font-semibold text-indigo-700">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                        الرئيسية
                    </a>
                    
                    @can('view records')
                    <!-- Hierarchy Dropdown -->
                    <div class="relative flex h-full" x-data="{ open: false }" @click.away="open = false">
                        <button @click="open = !open" class="inline-flex items-center gap-2 px-1 h-full border-b-2 {{ request()->routeIs('entities') || request()->routeIs('branches') || request()->routeIs('centers') || request()->routeIs('projects') ? 'border-indigo-500 text-indigo-700' : 'border-transparent text-gray-500 hover:text-indigo-600 hover:border-indigo-300' }} text-sm font-bold transition outline-none">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                            الهيكلة التنظيمية
                            <svg class="w-3.5 h-3.5 ml-1 transition-transform duration-200" :class="{'rotate-180': open}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <!-- Dropdown Menu -->
                        <div x-show="open" x-cloak x-transition.opacity.duration.200ms class="absolute top-full right-0 mt-1 w-48 bg-white rounded-xl shadow-lg border border-slate-100 py-2 z-50 text-sm font-bold text-slate-700" style="display: none;">
                            <a href="{{ route('entities') }}" class="block px-4 py-2 hover:bg-slate-50 hover:text-indigo-600 transition">الكيانات</a>
                            <a href="{{ route('branches') }}" class="block px-4 py-2 hover:bg-slate-50 hover:text-indigo-600 transition">الفروع</a>
                            <a href="{{ route('centers') }}" class="block px-4 py-2 hover:bg-slate-50 hover:text-indigo-600 transition">المراكز</a>
                            <a href="{{ route('projects') }}" class="block px-4 py-2 hover:bg-slate-50 hover:text-indigo-600 transition">المشاريع</a>
                        </div>
                    </div>
                    
                    <!-- Parties & Accounts Dropdown -->
                    <div class="relative flex h-full" x-data="{ open: false }" @click.away="open = false">
                        <button @click="open = !open" class="inline-flex items-center gap-2 px-1 h-full border-b-2 {{ request()->routeIs('parties') || request()->routeIs('accounts') ? 'border-indigo-500 text-indigo-700' : 'border-transparent text-gray-500 hover:text-indigo-600 hover:border-indigo-300' }} text-sm font-bold transition outline-none">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                            الأطراف والحسابات
                            <svg class="w-3.5 h-3.5 ml-1 transition-transform duration-200" :class="{'rotate-180': open}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <!-- Dropdown Menu -->
                        <div x-show="open" x-cloak x-transition.opacity.duration.200ms class="absolute top-full right-0 mt-1 w-48 bg-white rounded-xl shadow-lg border border-slate-100 py-2 z-50 text-sm font-bold text-slate-700" style="display: none;">
                            <a href="{{ route('parties') }}" class="flex items-center gap-2 px-4 py-2 hover:bg-slate-50 hover:text-indigo-600 transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                                دليل الأطراف
                            </a>
                            <a href="{{ route('accounts') }}" class="flex items-center gap-2 px-4 py-2 hover:bg-slate-50 hover:text-indigo-600 transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                                الحسابات المالية
                            </a>
                        </div>
                    </div>

                    <!-- Ledgers & Pages Dropdown -->
                    <div class="relative flex h-full" x-data="{ open: false }" @click.away="open = false">
                        <button @click="open = !open" class="inline-flex items-center gap-2 px-1 h-full border-b-2 {{ request()->routeIs('ledgers') || request()->routeIs('pages') ? 'border-indigo-500 text-indigo-700' : 'border-transparent text-gray-500 hover:text-indigo-600 hover:border-indigo-300' }} text-sm font-bold transition outline-none">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                            الدفاتر والصفحات
                            <svg class="w-3.5 h-3.5 ml-1 transition-transform duration-200" :class="{'rotate-180': open}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <!-- Dropdown Menu -->
                        <div x-show="open" x-cloak x-transition.opacity.duration.200ms class="absolute top-full right-0 mt-1 w-48 bg-white rounded-xl shadow-lg border border-slate-100 py-2 z-50 text-sm font-bold text-slate-700" style="display: none;">
                            <a href="{{ route('ledgers') }}" class="flex items-center gap-2 px-4 py-2 hover:bg-slate-50 hover:text-indigo-600 transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path></svg>
                                إدارة الدفاتر
                            </a>
                            <a href="{{ route('pages') }}" class="flex items-center gap-2 px-4 py-2 hover:bg-slate-50 hover:text-indigo-600 transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                                إدارة الصفحات
                            </a>
                        </div>
                    </div>
                    
                    <!-- Reports -->
                    <a href="{{ route('reports.index') }}" class="inline-flex items-center gap-2 px-1 h-full border-b-2 {{ request()->routeIs('reports.*') ? 'border-indigo-500 text-indigo-700' : 'border-transparent text-gray-500 hover:text-indigo-600 hover:border-indigo-300' }} text-sm font-bold transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                        التقارير
                    </a>
                    @endcan
                    
                    <!-- Settings -->
                    @can('manage settings')
                    <a href="{{ route('settings') }}" class="inline-flex items-center gap-2 px-1 h-full border-b-2 {{ request()->routeIs('settings') ? 'border-indigo-500 text-indigo-700' : 'border-transparent text-gray-500 hover:text-indigo-600 hover:border-indigo-300' }} text-sm font-bold transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                        الإعدادات
                    </a>
                    @endcan

                    <!-- Users -->
                    @can('manage users')
                    <a href="{{ route('users') }}" class="inline-flex items-center gap-2 px-1 h-full border-b-2 border-transparent text-sm font-bold text-gray-500 hover:text-indigo-600 hover:border-indigo-300 transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                        إدارة المستخدمين
                    </a>
                    @endcan
                </div>
            </div>
        </nav>

        <!-- Main Content -->
        <main class="flex-grow w-full max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
            {{ $slot }}
        </main>
        
        <!-- Site Footer -->
        <footer class="mt-auto py-4 border-t border-slate-200 bg-white text-sm text-slate-500">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <div class="w-full md:w-1/3 text-center md:text-right">{!! replace_footer_shortcodes(setting('footer_site_right')) !!}</div>
                <div class="w-full md:w-1/3 text-center">{!! replace_footer_shortcodes(setting('footer_site_center')) !!}</div>
                <div class="w-full md:w-1/3 text-center md:text-left">{!! replace_footer_shortcodes(setting('footer_site_left')) !!}</div>
            </div>
        </footer>

        <!-- Scroll Buttons (Up / Down) -->
        <div class="no-print fixed bottom-6 left-6 flex flex-col gap-2 z-50" x-data="{ showUp: false, showDown: true }" @scroll.window="showUp = (window.pageYOffset > 100); showDown = (window.innerHeight + window.pageYOffset < document.body.offsetHeight - 100)">
            <!-- Scroll Up -->
            <button x-show="showUp" x-transition.opacity.duration.300ms @click="window.scrollTo({ top: 0, behavior: 'smooth' })" class="bg-indigo-600 hover:bg-indigo-500 text-white w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform hover:scale-110 focus:outline-none" title="الصعود للأعلى" style="display: none;">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 15l7-7 7 7"></path></svg>
            </button>
            <!-- Scroll Down -->
            <button x-show="showDown" x-transition.opacity.duration.300ms @click="window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })" class="bg-slate-700 hover:bg-slate-600 text-white w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform hover:scale-110 focus:outline-none" title="النزول للأسفل" style="display: none;">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path></svg>
            </button>
        </div>

        @livewireScripts
    </body>
</html>
