<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'دمشق باركينغ')</title>
    <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=Cairo:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    @vite(['resources/css/app.scss', 'resources/js/app.js'])
    @yield('styles')
</head>
<body>

<div class="app-layout">

    {{-- ════════════════════════════════════════
         TOPBAR — full width, topmost
    ════════════════════════════════════════ --}}
    @include('partials.topbar', ['isAdminLayout' => true])

    {{-- ════════════════════════════════════════
         INNER ROW — sidebar + content
    ════════════════════════════════════════ --}}
    <div class="app-inner">

        <aside class="app-sidebar" id="appSidebar">

            @php $isAdmin = auth()->user()?->role === 'admin'; @endphp

            {{-- Navigation --}}
            <nav class="sidebar-nav">

                @if($isAdmin)
                <div class="sidebar-section">الرئيسية</div>

                <a href="{{ route('admin.dashboard') }}"
                   class="sidebar-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                    <i class="bi bi-speedometer2 sidebar-icon"></i>
                    <span>لوحة التحكم</span>
                </a>

                <div class="sidebar-section">المواقف والحجوزات</div>

                <a href="{{ route('admin.parking-lots.index') }}"
                   class="sidebar-link {{ request()->routeIs('admin.parking-lots.*') ? 'active' : '' }}">
                    <i class="bi bi-buildings sidebar-icon"></i>
                    <span>المواقف</span>
                </a>

                <a href="{{ route('admin.bookings.active') }}"
                   class="sidebar-link {{ request()->routeIs('admin.bookings.*') ? 'active' : '' }}">
                    <i class="bi bi-calendar-check sidebar-icon"></i>
                    <span>الحجوزات النشطة</span>
                </a>

                <div class="sidebar-section">التشغيل</div>

                <a href="{{ route('admin.operators.index') }}"
                   class="sidebar-link {{ request()->routeIs('admin.operators.*') ? 'active' : '' }}">
                    <i class="bi bi-people sidebar-icon"></i>
                    <span>المشغّلون</span>
                </a>
                @endif

                <a href="{{ route('operator.stats') }}"
                   class="sidebar-link {{ request()->routeIs('operator.stats') ? 'active' : '' }}">
                    <i class="bi bi-graph-up sidebar-icon"></i>
                    <span>الإحصائيات</span>
                </a>

                <a href="{{ route('operator.dashboard') }}"
                   class="sidebar-link {{ request()->routeIs('operator.dashboard') ? 'active' : '' }}">
                    <i class="bi bi-person-badge sidebar-icon"></i>
                    <span>{{ $isAdmin ? 'لوحة المشغّل' : 'الموقف' }}</span>
                </a>

            </nav>

        </aside>

        {{-- ════════════════════════════════════════
             MAIN BODY
        ════════════════════════════════════════ --}}
        <div class="app-body">

            {{-- Flash Messages --}}
            <div class="px-4 pt-3">
                @if(session('success'))
                <div class="alert alert-success d-flex align-items-center gap-2 border-0 rounded-3 py-2 mb-0"
                     role="alert">
                    <i class="bi bi-check-circle-fill flex-shrink-0"></i>
                    <span>{{ session('success') }}</span>
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
                </div>
                @endif
                @if(session('error'))
                <div class="alert alert-danger d-flex align-items-center gap-2 border-0 rounded-3 py-2 mb-0"
                     role="alert">
                    <i class="bi bi-exclamation-triangle-fill flex-shrink-0"></i>
                    <span>{{ session('error') }}</span>
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
                </div>
                @endif
            </div>

            {{-- Page Content --}}
            <main class="app-content">
                @yield('content')
            </main>

        </div>{{-- /app-body --}}

    </div>{{-- /app-inner --}}

</div>{{-- /app-layout --}}

{{-- Mobile sidebar overlay --}}
<div class="sidebar-overlay" id="sidebarOverlay"></div>

{{-- ══ MOBILE BOTTOM NAVIGATION ═══════════════════════════════════════════════ --}}
<nav class="mobile-bottom-nav" aria-label="التنقل">
    @if($isAdmin)
    <a href="{{ route('admin.dashboard') }}"
       class="mob-nav-item {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
        <i class="bi bi-speedometer2"></i>
        <span>الرئيسية</span>
    </a>
    <a href="{{ route('admin.parking-lots.index') }}"
       class="mob-nav-item {{ request()->routeIs('admin.parking-lots.*') ? 'active' : '' }}">
        <i class="bi bi-buildings"></i>
        <span>المواقف</span>
    </a>
    <a href="{{ route('admin.bookings.active') }}"
       class="mob-nav-item {{ request()->routeIs('admin.bookings.*') ? 'active' : '' }}">
        <i class="bi bi-calendar-check"></i>
        <span>الحجوزات</span>
    </a>
    <a href="{{ route('admin.operators.index') }}"
       class="mob-nav-item {{ request()->routeIs('admin.operators.*') ? 'active' : '' }}">
        <i class="bi bi-people"></i>
        <span>المشغّلون</span>
    </a>
    <a href="{{ route('operator.dashboard') }}"
       class="mob-nav-item {{ request()->routeIs('operator.dashboard') ? 'active' : '' }}">
        <i class="bi bi-person-badge"></i>
        <span>التشغيل</span>
    </a>
    @else
    <a href="{{ route('operator.stats') }}"
       class="mob-nav-item {{ request()->routeIs('operator.stats') ? 'active' : '' }}">
        <i class="bi bi-graph-up"></i>
        <span>الإحصائيات</span>
    </a>
    <a href="{{ route('operator.dashboard') }}"
       class="mob-nav-item {{ request()->routeIs('operator.dashboard') ? 'active' : '' }}">
        <i class="bi bi-person-badge"></i>
        <span>الموقف</span>
    </a>
    @endif
</nav>

<script>
    // Mobile sidebar toggle
    const toggle   = document.getElementById('sidebarToggle');
    const sidebar  = document.getElementById('appSidebar');
    const overlay  = document.getElementById('sidebarOverlay');

    function openSidebar() {
        sidebar.classList.add('is-open');
        overlay.classList.add('is-open');
        document.body.style.overflow = 'hidden';
    }
    function closeSidebar() {
        sidebar.classList.remove('is-open');
        overlay.classList.remove('is-open');
        document.body.style.overflow = '';
    }

    toggle?.addEventListener('click', openSidebar);
    overlay.addEventListener('click', closeSidebar);
</script>

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