{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Accounting System') }}</title>

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    @stack('styles')

    <style>
        /* =============================================
           CSS CUSTOM PROPERTIES
        ============================================= */
        :root {
            --sidebar-width: 280px;
            --sidebar-collapsed-width: 72px;
            --sidebar-bg-start: #1a50c4;
            --sidebar-bg-end: #05124b;
            --topbar-height: 64px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --nav-link-active-bg: #ffffff;
            --nav-link-active-color: rgb(6, 1, 68);
            --nav-link-hover-bg: rgba(255,255,255,0.48);
            --nav-link-hover-color: rgb(4, 15, 114);
        }

        /* =============================================
           RESET
        ============================================= */
        *, *::before, *::after { box-sizing: border-box; }

        html, body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            height: 100%;
        }

        body {
            background: #f8f9fa;
            font-family: system-ui, -apple-system, sans-serif;
        }

        /* =============================================
           LAYOUT WRAPPER
        ============================================= */
        .layout-wrapper {
            display: flex;
            min-height: 100vh;
            position: relative;
        }

        /* =============================================
           SIDEBAR OVERLAY (mobile backdrop)
        ============================================= */
        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 1040;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .sidebar-overlay.active {
            display: block;
            opacity: 1;
        }

        /* =============================================
           SIDEBAR
        ============================================= */
        #sidebar {
            width: var(--sidebar-width);
            min-height: 100vh;
            background: linear-gradient(180deg, var(--sidebar-bg-start) 20%, var(--sidebar-bg-end) 60%);
            transition: var(--transition);
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1050;
            overflow: hidden;
        }

        /* Collapsed state (desktop) */
        #sidebar.collapsed {
            width: var(--sidebar-collapsed-width);
        }

        /* Mobile: sidebar is off-canvas by default */
        @media (max-width: 991px) {
            #sidebar {
                position: fixed;
                top: 0;
                left: 0;
                height: 100%;
                transform: translateX(-100%);
                z-index: 1050;
                width: var(--sidebar-width) !important; /* always full width on mobile */
            }

            #sidebar.mobile-open {
                transform: translateX(0);
            }
        }

        /* ---- Sidebar Header ---- */
        .sidebar-header {
            padding: 20px 16px 12px;
            color: #fff;
            flex-shrink: 0;
        }

        .sidebar-header h4 {
            font-size: 1.05rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: var(--transition);
        }

        .sidebar-header hr {
            border-color: rgba(255,255,255,0.3);
            margin: 0;
            transition: var(--transition);
        }

        #sidebar.collapsed .sidebar-header h4,
        #sidebar.collapsed .sidebar-header hr {
            opacity: 0;
            pointer-events: none;
            height: 0;
            margin: 0;
            padding: 0;
        }

        /* ---- Sidebar Nav ---- */
        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 8px 10px 16px;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.2) transparent;
        }

        .sidebar-nav::-webkit-scrollbar { width: 4px; }
        .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

        /* ---- Nav Links ---- */
        .sidebar-nav .nav-link {
            color: #ecf0f1;
            padding: 10px 12px;
            margin: 2px 0;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            font-weight: 500;
            text-decoration: none;
            transition: var(--transition);
            white-space: nowrap;
            overflow: hidden;
        }

        .sidebar-nav .nav-link i {
            width: 20px;
            text-align: center;
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .sidebar-nav .nav-link .link-text {
            transition: var(--transition);
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar-nav .nav-link:hover {
            background: var(--nav-link-hover-bg);
            color: var(--nav-link-hover-color);
        }

        .sidebar-nav .nav-link.active {
            background: var(--nav-link-active-bg);
            color: var(--nav-link-active-color);
            font-weight: 600;
        }

        /* Section label */
        .nav-section-label {
            color: rgba(255,255,255,0.5);
            padding: 10px 12px 4px;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
        }

        .nav-section-label i {
            width: 20px;
            text-align: center;
            font-size: 0.9rem;
            flex-shrink: 0;
        }

        .nav-section-label .label-text {
            transition: var(--transition);
            overflow: hidden;
        }

        /* Sub-nav indent */
        .nav-sub {
            padding-left: 14px;
            overflow: hidden;
        }

        .nav-sub .nav-sub {
            padding-left: 10px;
        }

        /* Collapsed sidebar: hide text, center icons */
        #sidebar.collapsed .sidebar-nav .nav-link .link-text,
        #sidebar.collapsed .nav-section-label .label-text,
        #sidebar.collapsed .nav-sub {
            width: 0;
            opacity: 0;
            pointer-events: none;
        }

        #sidebar.collapsed .sidebar-nav .nav-link {
            justify-content: center;
            padding: 12px 8px;
        }

        #sidebar.collapsed .sidebar-nav .nav-link i {
            font-size: 1.2rem;
            width: auto;
        }

        #sidebar.collapsed .nav-section-label {
            justify-content: center;
            padding: 10px 8px 4px;
        }

        #sidebar.collapsed .nav-section-label i {
            width: auto;
        }

        /* Sidebar HR */
        .sidebar-nav .sidebar-hr {
            border-color: rgba(255,255,255,0.2);
            margin: 10px 4px;
        }

        /* Logout button */
        .sidebar-logout-btn {
            background: transparent;
            border: none;
            width: 100%;
            text-align: left;
            cursor: pointer;
            color: #ff6b6b;
            padding: 10px 12px;
            margin: 2px 0;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
            white-space: nowrap;
            overflow: hidden;
        }

        .sidebar-logout-btn i {
            width: 20px;
            text-align: center;
            flex-shrink: 0;
        }

        .sidebar-logout-btn .link-text { overflow: hidden; }

        .sidebar-logout-btn:hover {
            background: rgba(255,107,107,0.2);
        }

        #sidebar.collapsed .sidebar-logout-btn {
            justify-content: center;
            padding: 12px 8px;
        }

        #sidebar.collapsed .sidebar-logout-btn .link-text {
            width: 0;
            opacity: 0;
        }

        /* Collapsed sidebar tooltip on hover */
        #sidebar.collapsed .sidebar-nav .nav-link[title],
        #sidebar.collapsed .sidebar-logout-btn[title] {
            position: relative;
        }

        /* =============================================
           MAIN CONTENT
        ============================================= */
        .main-content {
            flex: 1;
            min-width: 0; /* prevent flex overflow */
            min-height: 100vh;
            background: #f8f9fa;
            display: flex;
            flex-direction: column;
            transition: var(--transition);
        }

        /* =============================================
           TOP NAVBAR
        ============================================= */
        .top-navbar {
            background: linear-gradient(135deg, #0061ff, #60a5fa);
            border-radius: 40px;
            margin: 12px 16px 0;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 56px;
            box-shadow: 0 4px 20px rgba(0,97,255,0.25);
            flex-shrink: 0;
            gap: 12px;
        }

        .top-navbar-left {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            flex: 1;
        }

        .top-navbar-right {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        /* Toggle button */
        .sidebar-toggle-btn {
            background: transparent;
            border: 2px solid rgba(255,255,255,0.7);
            color: #fff;
            border-radius: 50%;
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.95rem;
        }

        .sidebar-toggle-btn:hover {
            background: rgba(255,255,255,0.2);
            border-color: #fff;
        }

        .page-title-text {
            color: #fff;
            font-weight: 700;
            font-size: clamp(0.85rem, 2.5vw, 1.1rem);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* User dropdown trigger */
        .user-nav-link {
            color: #fff;
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.88rem;
            padding: 6px 10px;
            border-radius: 24px;
            transition: var(--transition);
            white-space: nowrap;
        }

        .user-nav-link:hover {
            background: rgba(255,255,255,0.2);
            color: #fff;
        }

        .user-name-text {
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* =============================================
           DROPDOWN MENU
        ============================================= */
        .dropdown-menu {
            background-color: #afd1fa;
            border: none;
            border-radius: 12px;
            box-shadow: rgba(111,111,111,0.2) 0 8px 24px;
            overflow: hidden;
            --grid-color: rgba(59, 131, 246, 0.25);
            background-image:
                linear-gradient(0deg, transparent 23%, var(--grid-color) 24%, var(--grid-color) 25%, transparent 26%,
                    transparent 73%, var(--grid-color) 74%, var(--grid-color) 75%, transparent 76%, transparent),
                linear-gradient(90deg, transparent 23%, var(--grid-color) 24%, var(--grid-color) 25%, transparent 26%,
                    transparent 73%, var(--grid-color) 74%, var(--grid-color) 75%, transparent 76%, transparent);
            background-size: 55px 55px;
            min-width: 180px;
        }

        .dropdown-item {
            color: #1e3a8a;
            background: transparent;
            transition: all 250ms ease;
            padding: 10px 16px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.5em;
        }

        .dropdown-item:hover,
        .dropdown-item:focus {
            background: #5ba5ff;
            color: #1e3a8a;
        }

        .dropdown-item i {
            color: #1e3a8a;
            width: 1em;
        }

        .dropdown-divider {
            border-top: 1px solid #1e3a8a;
            opacity: 0.3;
            margin: 0.4em 0;
        }

        .dropdown-item.text-danger { color: #7f1d1d !important; }
        .dropdown-item.text-danger:hover { background: #ff5f5f !important; }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        .dropdown-item[href*="settings"]:hover i.fa-cog {
            animation: spin 1s linear infinite;
        }

        /* =============================================
           PAGE CONTENT AREA
        ============================================= */
        .page-content {
            flex: 1;
            padding: 16px;
            min-width: 0;
        }

        /* =============================================
           ALERTS
        ============================================= */
        .alert {
            border-radius: 12px;
            border: none;
            margin-bottom: 12px;
            font-size: 0.92rem;
        }

        /* =============================================
           BTN OUTLINE SECONDARY (topbar)
        ============================================= */
        .btn-outline-secondary {
            color: #fff;
            border-color: rgba(255,255,255,0.7);
        }
        .btn-outline-secondary:hover {
            color: #0061ff;
            background: #fff;
            border-color: #fff;
        }

        /* =============================================
           ============================================
           RESPONSIVE BREAKPOINTS
           ============================================
        ============================================= */

        /* ---- EXTRA SMALL < 480px ---- */
        @media (max-width: 479px) {
            .top-navbar {
                margin: 8px 8px 0;
                padding: 6px 10px;
                border-radius: 28px;
                min-height: 50px;
            }

            .page-content { padding: 10px 8px; }

            .user-name-text { display: none; } /* show only icon on tiny screens */

            .user-nav-link { gap: 0; padding: 6px 8px; }

            .page-title-text { font-size: 0.82rem; }
        }

        /* ---- SMALL 480–575px ---- */
        @media (min-width: 480px) and (max-width: 575px) {
            .top-navbar { margin: 8px 10px 0; padding: 6px 12px; }
            .page-content { padding: 12px 10px; }
            .user-name-text { max-width: 80px; }
        }

        /* ---- MEDIUM 576–767px ---- */
        @media (min-width: 576px) and (max-width: 767px) {
            .top-navbar { margin: 10px 12px 0; }
            .page-content { padding: 14px 12px; }
            .user-name-text { max-width: 100px; }
        }

        /* ---- TABLET PORTRAIT 768–991px ---- */
        @media (min-width: 768px) and (max-width: 991px) {
            .top-navbar { margin: 12px 14px 0; }
            .page-content { padding: 16px 14px; }
        }

        /* ---- DESKTOP 992px+ ---- */
        @media (min-width: 992px) {
            .page-content { padding: 20px; }
            .top-navbar { margin: 14px 20px 0; }
        }

        /* ---- WIDE 1400px+ ---- */
        @media (min-width: 1400px) {
            :root { --sidebar-width: 300px; }
        }

        /* =============================================
           LANDSCAPE PHONES
        ============================================= */
        @media (max-height: 500px) and (orientation: landscape) {
            .top-navbar { min-height: 44px; margin-top: 6px; border-radius: 24px; }
            .sidebar-header { padding: 10px 12px 8px; }
            .sidebar-header h4 { font-size: 0.9rem; margin-bottom: 6px; }
            .sidebar-nav .nav-link { padding: 7px 12px; font-size: 0.85rem; }
        }

        /* =============================================
           TOUCH OPTIMISATIONS
        ============================================= */
        @media (hover: none) and (pointer: coarse) {
            .sidebar-nav .nav-link { padding: 12px 12px; }
            .sidebar-logout-btn { padding: 12px 12px; }
            .dropdown-item { padding: 13px 16px; }
            .sidebar-toggle-btn { width: 42px; height: 42px; }
        }

        /* =============================================
           ACCESSIBILITY
        ============================================= */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                transition-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
            }
        }

        :focus-visible {
            outline: 3px solid #60a5fa;
            outline-offset: 2px;
            border-radius: 4px;
        }

        /* =============================================
           PRINT
        ============================================= */
        @media print {
            #sidebar, .top-navbar, .sidebar-overlay { display: none !important; }
            .main-content { min-height: auto; }
            .page-content { padding: 0; }
            body { overflow: visible; }
        }
    </style>
</head>
<body>

<div class="layout-wrapper">

    {{-- ========================================
         MOBILE OVERLAY BACKDROP
    ======================================== --}}
    <div class="sidebar-overlay" id="sidebarOverlay" aria-hidden="true"></div>

    {{-- ========================================
         SIDEBAR
    ======================================== --}}
    <nav id="sidebar" aria-label="Main navigation">

        {{-- Header --}}
        <div class="sidebar-header">
            <h4>Accounting System</h4>
            <hr>
        </div>

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

            {{-- Dashboard --}}
            <a class="nav-link {{ request()->routeIs('dashboard') ? 'active' : '' }}"
               href="{{ route('dashboard') }}"
               title="Dashboard">
                <i class="fas fa-tachometer-alt"></i>
                <span class="link-text">Dashboard</span>
            </a>

            {{-- ACCOUNTS --}}
            <div class="nav-section-label">
                <i class="fas fa-wallet"></i>
                <span class="label-text">Accounts</span>
            </div>
            <div class="nav-sub">
                @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_bank_accounts')))
                    <a class="nav-link {{ request()->routeIs('accounts*') ? 'active' : '' }}"
                       href="{{ route('accounts.all') }}"
                       title="All Accounts">
                        <i class="fas fa-list"></i>
                        <span class="link-text">All Accounts</span>
                    </a>
                @endif
            </div>

            {{-- TRANSACTIONS --}}
            <div class="nav-section-label">
                <i class="fas fa-exchange-alt"></i>
                <span class="label-text">Transactions</span>
            </div>
            <div class="nav-sub">
                @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_transactions')))
                    <a class="nav-link {{ request()->routeIs('transactions*') ? 'active' : '' }}"
                       href="{{ route('transactions.index') }}"
                       title="All Transactions">
                        <i class="fas fa-list"></i>
                        <span class="link-text">All Transactions</span>
                    </a>
                @endif

                @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_expenses')))
                    <a class="nav-link {{ request()->routeIs('expenses*') ? 'active' : '' }}"
                       href="{{ route('expenses.index') }}"
                       title="Expenses">
                        <i class="fas fa-minus-circle"></i>
                        <span class="link-text">Expenses</span>
                    </a>
                @endif

                @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_invoices')))
                    <a class="nav-link {{ request()->routeIs('invoices*') ? 'active' : '' }}"
                       href="{{ route('invoices.index') }}"
                       title="Invoices">
                        <i class="fas fa-file-invoice"></i>
                        <span class="link-text">Invoices</span>
                    </a>
                    <a class="nav-link {{ request()->routeIs('quotations*') ? 'active' : '' }}"
                       href="{{ route('quotations.index') }}"
                       title="Quotations">
                        <i class="fas fa-file-contract"></i>
                        <span class="link-text">Quotations</span>
                    </a>
                @endif

                @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_products')))
                    <a class="nav-link {{ request()->routeIs('services*') ? 'active' : '' }}"
                       href="{{ route('services.index') }}"
                       title="Services">
                        <i class="fas fa-concierge-bell"></i>
                        <span class="link-text">Services</span>
                    </a>
                @endif
            </div>

            {{-- REPORTS --}}
            <div class="nav-section-label">
                <i class="fas fa-chart-bar"></i>
                <span class="label-text">Reports</span>
            </div>
            <div class="nav-sub">
                @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_reports')))
                    <a class="nav-link {{ request()->routeIs('reports.profit-loss') ? 'active' : '' }}"
                       href="{{ route('reports.profit-loss') }}" title="P&L">
                        <i class="fas fa-chart-line"></i>
                        <span class="link-text">P&amp;L</span>
                    </a>
                    <a class="nav-link {{ request()->routeIs('reports.balance-sheet') ? 'active' : '' }}"
                       href="{{ route('reports.balance-sheet') }}" title="Balance Sheet">
                        <i class="fas fa-balance-scale"></i>
                        <span class="link-text">Balance Sheet</span>
                    </a>
                    <a class="nav-link {{ request()->routeIs('reports.cash-book') ? 'active' : '' }}"
                       href="{{ route('reports.cash-book') }}" title="Cash Book">
                        <i class="fas fa-book"></i>
                        <span class="link-text">Cash Book</span>
                    </a>
                    <a class="nav-link {{ request()->routeIs('reports.bank-book') ? 'active' : '' }}"
                       href="{{ route('reports.bank-book') }}" title="Bank Book">
                        <i class="fas fa-book-open"></i>
                        <span class="link-text">Bank Book</span>
                    </a>
                    <a class="nav-link {{ request()->routeIs('service-sales*') ? 'active' : '' }}"
                       href="{{ route('service-sales.index') }}" title="Service Sale">
                        <i class="fas fa-chart-pie"></i>
                        <span class="link-text">Service Sale</span>
                    </a>
                    <a class="nav-link {{ request()->routeIs('sales-dashboard*') ? 'active' : '' }}"
                       href="{{ route('sales-dashboard.index') }}" title="Sales Dashboard">
                        <i class="fas fa-chart-pie"></i>
                        <span class="link-text">Sales Dashboard</span>
                    </a>
                @endif
            </div>

            <hr class="sidebar-hr">

            {{-- Logout --}}
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="sidebar-logout-btn" title="Logout">
                    <i class="fas fa-sign-out-alt"></i>
                    <span class="link-text">Logout</span>
                </button>
            </form>

        </div>{{-- /sidebar-nav --}}
    </nav>

    {{-- ========================================
         MAIN CONTENT
    ======================================== --}}
    <div class="main-content" id="mainContent">

        {{-- TOP NAVBAR --}}
        <nav class="top-navbar" aria-label="Top navigation">
            <div class="top-navbar-left">
                {{-- Sidebar toggle --}}
                <button class="sidebar-toggle-btn" id="toggleSidebar"
                        aria-label="Toggle sidebar" aria-controls="sidebar" aria-expanded="true">
                    <i class="fas fa-bars"></i>
                </button>
                <span class="page-title-text">@yield('page-title', 'Dashboard')</span>
            </div>

            <div class="top-navbar-right">
                <div class="dropdown">
                    <a class="user-nav-link dropdown-toggle"
                       href="#" id="userDropdown"
                       role="button"
                       data-bs-toggle="dropdown"
                       aria-expanded="false">
                        <i class="fas fa-user-circle fa-lg"></i>
                        <span class="user-name-text">
                            @auth
                                {{ auth()->user()->name }}
                            @else
                                Guest
                            @endauth
                        </span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                        @auth
                            <a class="dropdown-item" href="{{ route('profile') }}">
                                <i class="fas fa-user"></i> Profile
                            </a>
                            <a class="dropdown-item" href="{{ route('settings') }}">
                                <i class="fas fa-cog"></i> Settings
                            </a>
                            <div class="dropdown-divider"></div>
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="dropdown-item text-danger">
                                    <i class="fas fa-sign-out-alt"></i> Logout
                                </button>
                            </form>
                        @else
                            <a class="dropdown-item" href="{{ route('login') }}">
                                <i class="fas fa-sign-in-alt"></i> Login
                            </a>
                        @endauth
                    </div>
                </div>
            </div>
        </nav>

        {{-- PAGE CONTENT --}}
        <div class="page-content">

            {{-- Flash Messages --}}
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            {{-- Yielded Page Content --}}
            @yield('content')

        </div>{{-- /page-content --}}
    </div>{{-- /main-content --}}
</div>{{-- /layout-wrapper --}}

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

@stack('scripts')

<script>
(function () {
    'use strict';

    const sidebar        = document.getElementById('sidebar');
    const overlay        = document.getElementById('sidebarOverlay');
    const toggleBtn      = document.getElementById('toggleSidebar');
    const MOBILE_BP      = 992; // px – below this, use mobile off-canvas

    /* ---------- helpers ---------- */
    function isMobile() {
        return window.innerWidth < MOBILE_BP;
    }

    /* ---------- mobile: open / close ---------- */
    function openMobileSidebar() {
        sidebar.classList.add('mobile-open');
        overlay.classList.add('active');
        document.body.style.overflow = 'hidden'; // prevent body scroll
        toggleBtn.setAttribute('aria-expanded', 'true');
    }

    function closeMobileSidebar() {
        sidebar.classList.remove('mobile-open');
        overlay.classList.remove('active');
        document.body.style.overflow = '';
        toggleBtn.setAttribute('aria-expanded', 'false');
    }

    /* ---------- desktop: collapse / expand ---------- */
    function toggleDesktopSidebar() {
        const collapsed = sidebar.classList.toggle('collapsed');
        toggleBtn.setAttribute('aria-expanded', String(!collapsed));
        // persist preference
        try { localStorage.setItem('sidebarCollapsed', collapsed ? '1' : '0'); } catch(e) {}
    }

    /* ---------- restore desktop preference ---------- */
    function restoreDesktopState() {
        try {
            if (localStorage.getItem('sidebarCollapsed') === '1') {
                sidebar.classList.add('collapsed');
                toggleBtn.setAttribute('aria-expanded', 'false');
            }
        } catch(e) {}
    }

    /* ---------- toggle button click ---------- */
    toggleBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        if (isMobile()) {
            sidebar.classList.contains('mobile-open')
                ? closeMobileSidebar()
                : openMobileSidebar();
        } else {
            toggleDesktopSidebar();
        }
    });

    /* ---------- overlay click: close on mobile ---------- */
    overlay.addEventListener('click', closeMobileSidebar);

    /* ---------- close sidebar when a nav link is clicked on mobile ---------- */
    sidebar.querySelectorAll('.nav-link').forEach(function (link) {
        link.addEventListener('click', function () {
            if (isMobile()) closeMobileSidebar();
        });
    });

    /* ---------- keyboard: close on Escape ---------- */
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && isMobile()) closeMobileSidebar();
    });

    /* ---------- handle resize: clean up state when crossing breakpoint ---------- */
    let resizeTimer;
    window.addEventListener('resize', function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            if (!isMobile()) {
                // switching to desktop: remove mobile classes
                sidebar.classList.remove('mobile-open');
                overlay.classList.remove('active');
                document.body.style.overflow = '';
                restoreDesktopState();
            } else {
                // switching to mobile: remove desktop collapsed class
                sidebar.classList.remove('collapsed');
            }
        }, 100);
    });

    /* ---------- init ---------- */
    if (!isMobile()) {
        restoreDesktopState();
    }

})();
</script>

</body>
</html>
