<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Credora') }}</title>
    <!-- CSS Libraries -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <style>
        :root {
            --primary-green: #198754;
            --light-green: #4CAF50;
            --hover-green: #1B5E20;
        }
        body {
            background-color: #f8f9fa;
            min-height: 100vh;
            font-size: 16px;
        }
        /* Navbar Styles */
        .navbar {
            background-color: white !important;
            box-shadow: 0 2px 4px rgba(0,0,0,.2);
            padding: 1rem 2rem;
        }
        .navbar-brand {
            color: var(--primary-green) !important;
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .navbar-brand i {
            font-size: 1.75rem;
        }
        /* Avatar Button */
        .avatar-button {
            width: 40px;
            height: 40px;
            background-color: var(--primary-green) !important;
            color: white !important;
            border: 2px solid var(--primary-green) !important;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
        .avatar-button:hover {
            background-color: var(--hover-green) !important;
            color: white !important;
        }
        /* Horizontal Menu */
        .horizontal-menu {
            background-color: var(--primary-green);
            box-shadow: 0 2px 4px rgba(0,0,0,.2);
            padding: 0.75rem 2rem;
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            position: relative;
            z-index: 1000;
        }
        /* Hide dropdown caret */
        .dropdown-toggle::after {
            display: none;
        }
        .menu-link {
            color: white;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .menu-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
        }
        /* Dropdown positioning for horizontal menu */
        .horizontal-menu .dropdown {
            position: relative;
        }

        /* Default dropdown menu styling */
        .horizontal-menu .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1001;
            background-color: white;
            border: 1px solid #ddd;
            box-shadow: 0 4px 12px rgba(0,0,0,.2);
            min-width: 220px;
            display: none;
            border-radius: 0 0 8px 8px;
            border-top: 2px solid var(--primary-green);
            margin-top: 0;
        }

        /* Desktop hover behavior */
        @media (min-width: 769px) {
            .horizontal-menu .dropdown:hover > .dropdown-menu {
                display: block;
            }
            .dropdown-submenu:hover > .dropdown-menu {
                display: block;
            }
        }

        /* Nested dropdown styles */
        .dropdown-submenu {
            position: relative;
        }
        .dropdown-submenu .dropdown-menu {
            position: absolute;
            top: 0;
            left: 100%;
            margin-top: -1px;
            display: none;
            box-shadow: 0 4px 12px rgba(0,0,0,.2);
            z-index: 1002;
            border-radius: 0 8px 8px 8px;
        }

        /* Custom Dropdown Menu */
        .custom-dropdown-menu {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border: 1px solid rgba(0,0,0,.05);
        }
        .custom-dropdown-menu .dropdown-item {
            border-left: 3px solid transparent;
        }
        .custom-dropdown-menu .dropdown-item:hover {
            border-left-color: var(--primary-green);
            background: linear-gradient(90deg, rgba(25, 135, 84, 0.05) 0%, rgba(25, 135, 84, 0.1) 100%);
        }
        /* User Dropdown Menu */
        .dropdown-menu {
            border: none;
            box-shadow: 0 4px 20px rgba(0,0,0,.15);
            border-radius: 12px;
            padding: 0.5rem;
            min-width: 220px;
        }
        .dropdown-item {
            padding: 0.75rem 1rem;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: all 0.2s ease;
            font-weight: 500;
            text-align: center;
        }
        .dropdown-item:hover {
            background-color: rgba(25, 135, 84, 0.1);
            color: var(--primary-green);
            transform: translateX(4px);
        }
        .dropdown-item.text-danger:hover {
            background-color: rgba(220, 53, 69, 0.1);
            color: #dc3545;
        }
        .dropdown-header {
            padding: 0.75rem 1rem;
            font-weight: 600;
            color: #333;
            border-bottom: 1px solid #e9ecef;
            margin-bottom: 0.5rem;
        }

        /* Remove icons from horizontal menu dropdowns */
        .horizontal-menu .dropdown-menu .dropdown-item i {
            display: none;
        }

        /* Content Area */
        .content-wrapper {
            padding: 1rem;
            width: 100%;
            margin: 0;
        }
        /* Alerts */
        .alert {
            border-radius: 8px;
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,.05);
        }
        /* Form Input Styles */
        .form-control {
            font-size: 1rem;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
        }
        .form-control:focus {
            border-color: var(--primary-green);
            box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.1);
        }
        /* Button Styles */
        .btn {
            font-size: 1rem;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-sm {
            font-size: 0.875rem;
            padding: 0.5rem 1rem;
        }
        .btn-lg {
            font-size: 1.125rem;
            padding: 0.875rem 1.75rem;
        }
        /* Table Styles */
        .table {
            font-size: 1rem;
        }
        .table th, .table td {
            padding: 0.875rem 1rem;
            vertical-align: middle;
        }
        .table thead th {
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* ========== MOBILE STYLES ========== */
        @media (max-width: 768px) {
            body {
                font-size: 14px;
                overflow-x: hidden;
            }
            .navbar {
                padding: 0.75rem 1rem;
            }

            /* Horizontal menu - FORCE horizontal scroll */
            .horizontal-menu {
                padding: 0.5rem 1rem !important;
                flex-wrap: nowrap !important;
                overflow-x: scroll !important;
                overflow-y: hidden !important;
                -webkit-overflow-scrolling: touch !important;
                position: relative !important;
                height: 50px !important;
                align-items: center !important;
                width: 100% !important;
                display: flex !important;
                gap: 1rem !important;
            }

            /* Hide scrollbar but keep functionality */
            .horizontal-menu::-webkit-scrollbar {
                width: 0 !important;
                height: 0 !important;
                display: none !important;
            }

            .horizontal-menu {
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
            }

            .menu-link {
                flex: 0 0 auto !important;
                white-space: nowrap !important;
                padding: 0.5rem 0.75rem !important;
                font-size: 0.9rem !important;
                display: inline-flex !important;
                min-width: fit-content !important;
            }

            .horizontal-menu .dropdown {
                flex: 0 0 auto !important;
                display: inline-flex !important;
                min-width: fit-content !important;
            }

            .content-wrapper {
                padding: 1rem;
            }

            /* ========== MOBILE DROPDOWN STYLES ========== */
            /* Main dropdown menu - positioned with fixed */
            .horizontal-menu .dropdown-menu {
                position: fixed !important;
                z-index: 1001 !important;
                background-color: white !important;
                border: 1px solid #ddd !important;
                box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
                min-width: 220px !important;
                max-width: 90vw !important;
                max-height: 70vh !important;
                overflow-y: auto !important;
                display: none !important;
                border-radius: 0 0 8px 8px !important;
                border-top: 2px solid var(--primary-green) !important;
                margin: 0 !important;
            }

            /* Show dropdown when active */
            .horizontal-menu .dropdown-menu.show {
                display: block !important;
            }

            /* Nested dropdown items */
            .dropdown-item {
                padding: 0.75rem 1rem !important;
                white-space: normal !important;
                font-size: 0.9rem !important;
                justify-content: center !important;
                text-align: center !important;
            }

            /* Nested dropdown submenus - INLINE expansion for mobile */
            .dropdown-submenu .dropdown-menu {
                position: static !important;
                z-index: auto !important;
                display: none !important;
                width: 100% !important;
                max-width: 100% !important;
                border-radius: 4px !important;
                box-shadow: none !important;
                border: none !important;
                background-color: rgba(25, 135, 84, 0.1) !important;
                margin: 0.5rem 0 !important;
                padding: 0.5rem !important;
                border-left: 3px solid var(--primary-green) !important;
            }

            .dropdown-submenu .dropdown-menu.show {
                display: block !important;
            }

            /* Make submenu items slightly indented with green accent */
            .dropdown-submenu .dropdown-menu .dropdown-item {
                padding-left: 1.5rem !important;
                background-color: white !important;
                margin-bottom: 0.25rem !important;
                border-left: 2px solid transparent !important;
            }

            .dropdown-submenu .dropdown-menu .dropdown-item:hover {
                background-color: rgba(25, 135, 84, 0.15) !important;
                border-left-color: var(--primary-green) !important;
            }

            .dropdown-submenu .dropdown-menu .dropdown-item:last-child {
                margin-bottom: 0 !important;
            }

            /* Dropdown item styling */
            .horizontal-menu .dropdown-menu .dropdown-item {
                color: #333 !important;
            }

            .horizontal-menu .dropdown-menu .dropdown-item:hover {
                background-color: #f8f9fa !important;
                color: #333 !important;
            }

            /* Dropdown dividers */
            .dropdown-divider {
                margin: 0.25rem 0 !important;
            }

            /* Form and button adjustments */
            .form-control {
                font-size: 1rem;
                padding: 0.625rem 0.875rem;
            }

            .btn {
                font-size: 0.9rem;
                padding: 0.625rem 1.25rem;
            }

            .table {
                font-size: 0.9rem;
            }

            .table th, .table td {
                padding: 0.625rem 0.75rem;
            }
        }

        @media (max-width: 576px) {
            .content-wrapper {
                padding: 0.75rem;
            }
            .btn {
                font-size: 0.875rem;
                padding: 0.5rem 1rem;
            }
            .table {
                font-size: 0.875rem;
            }
            .table th, .table td {
                padding: 0.5rem 0.625rem;
            }

            .horizontal-menu .dropdown-menu {
                min-width: 180px !important;
                max-width: 85vw !important;
            }

            .menu-link {
                padding: 0.5rem 0.5rem;
                font-size: 0.85rem;
            }

            .horizontal-menu {
                height: 45px;
            }
        }

        @media (max-width: 400px) {
            .menu-link {
                padding: 0.5rem 0.4rem;
                font-size: 0.8rem;
                gap: 0.25rem;
            }

            .menu-link i {
                font-size: 0.9rem;
            }

            .horizontal-menu {
                gap: 0.5rem;
                height: 40px;
            }
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar">
        <div class="container-fluid">
<a href="{{ route('dashboard') }}" class="navbar-brand">
                <img src="{{ asset('images/melsoft-logo.jpg') }}" alt="Logo" style="height: 40px; width: auto;">
                Melsoft Credora
            </a>
            <!-- User Menu -->
            <div class="d-flex align-items-center gap-2">
                <span class="text-dark fw-bold">{{ Auth::user()->name }}</span>
                <div class="dropdown">
                    @auth
                        @php
                            $initial = strtoupper(substr(Auth::user()->name, 0, 1));
                        @endphp
                        <button class="btn avatar-button rounded-circle" type="button" id="userDropdown"
                                data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="fw-bold">{{ $initial }}</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end custom-dropdown-menu" aria-labelledby="userDropdown">
                            <li class="dropdown-header">{{ Auth::user()->name }}</li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item" href="{{ route('profile') }}">
                                    <i class="fas fa-user"></i>Profile
                                </a>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <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>
                            </li>
                        </ul>
                    @endauth
                </div>
            </div>
        </div>
    </nav>

    <!-- Menu -->
    @auth
    <div class="horizontal-menu">
        <a href="{{ route('dashboard') }}" class="menu-link">
            <i class="fas fa-home"></i>Dashboard
        </a>
        @if(Auth::user()->canAccessClients() || Auth::user()->canAccessLoans() || Auth::user()->canAccessSavings() || Auth::user()->canAccessAccounting())
    <div class="dropdown">
                <a class="menu-link dropdown-toggle" href="#" role="button">
                    Edit
                </a>
                <ul class="dropdown-menu">
                    @if(Auth::user()->canAccessClients())
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">
                            Clients
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('clients.create') }}">Individual Client</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('client-groups.create') }}">Group Clients</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('clients.edit-delete') }}">Edit/Delete Clients</a></li>
                        </ul>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    @endif
                    @if(Auth::user()->canAccessLoans())
                     <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">
                            Loan Management
                        </a>
                        <ul class="dropdown-menu">
                            @if(Auth::user()->hasPermission('loans.create'))
                            <li><a class="dropdown-item" href="{{ route('loans.create') }}">New Loans</a></li>
                            <li><hr class="dropdown-divider"></li>
                            @endif
                            @if(Auth::user()->hasPermission('loans.create'))
                            <li><a class="dropdown-item" href="{{ route('loans.group.create') }}">Group Loan</a></li>
                            <li><hr class="dropdown-divider"></li>
                            @endif
                            @if(Auth::user()->hasPermission('loans.edit', 'edit') || Auth::user()->hasPermission('loans.delete', 'delete'))
                            <li><a class="dropdown-item" href="{{ route('loans.edit-delete') }}">Edit/Delete Loans</a></li>
                            @endif
                        </ul>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    @endif
                    @if(Auth::user()->canAccessAccounting())
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">
                            Chart of Accounts
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('cashbook.entries.create') }}"><i class="fas fa-book me-2"></i>Cashbook</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('accounts.general-ledger.index') }}">General ledger</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('accounts.account-types.create') }}">Account Types</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('departments.create') }}">Departments</a></li>
                        </ul>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    @endif
                    @if(Auth::user()->canAccessSavings())
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">
                            Savings Account
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('savings.accounts.create') }}">New Savings Account</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('savings.accounts.edit-delete') }}">Edit/Delete Savings</a></li>
                        </ul>
                    </li>
                    @endif
                </ul>
            </div>
        @endif
        @if(Auth::user()->canAccessProcessing())
            <div class="dropdown">
                <a class="menu-link dropdown-toggle" href="#" role="button">
                    Process
                </a>
                <ul class="dropdown-menu">
                    {{-- @if(Auth::user()->canAccessClients())
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">
                            Clients
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('accounts.invoices.create') }}">Invoice</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('accounts.receipts.create') }}">Receipts</a></li>
                        </ul>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    @endif --}}
                    @if(Auth::user()->canAccessLoans())
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">
                            Loans
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('loans.pending') }}">Approve Loans</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('loans.approved') }}">Disburse Loans</a></li>
                        </ul>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    @endif
                    @if(Auth::user()->canAccessAccounting())
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">
                            Transactions
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('accounts.cashbook.index') }}">Cashbook</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('accounts.journals.index') }}">Journal</a></li>
                        </ul>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    @endif
                    @if(Auth::user()->canAccessSavings())
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">
                            Savings Account
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('savings.deposits.create') }}">Deposits</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('savings.withdrawals.create') }}">Withdrawal</a></li>
                        </ul>
                    </li>
                    @endif
                </ul>
            </div>
        @endif
        @if(Auth::user()->canAccessReports())
            <div class="dropdown">
                <a class="menu-link dropdown-toggle" href="#" role="button">
                    Reports
                </a>
                <ul class="dropdown-menu">
                    @if(Auth::user()->canAccessClients())
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">
                            Clients Reports
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('clients.index') }}">Individual Clients</a></li>
                             <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('client-groups.index') }}">Group Clients</a></li>
                        </ul>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    @endif
                    @if(Auth::user()->canAccessLoans())
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">
                            Loan Reports
                        </a>
                        <ul class="dropdown-menu">
                            @if(Auth::user()->hasPermission('loans.view'))
                            <li><a class="dropdown-item" href="{{ route('loans.index') }}">View Loans</a></li>
                            @endif
                        </ul>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    @endif
                    @if(Auth::user()->canAccessSavings())
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">
                            Savings Reports
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('savings.accounts.index') }}">View Savings Accounts</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('savings.deposits') }}">Deposits</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('savings.withdrawals') }}">Withdrawals</a></li>
                        </ul>
                    </li>
                    @endif
                    {{-- <li><hr class="dropdown-divider"></li>
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">
                            Financial Reports
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('accounts.reports.balance-sheet') }}">Balance Sheet</a></li>
                        </ul>
                    </li> --}}
                </ul>
            </div>
        @endif
        @if(Auth::user()->canAccessAdministration())
            <div class="dropdown">
                <a class="menu-link dropdown-toggle" href="#" role="button">
                    Administration
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" href="{{ route('company-settings.index') }}">
                            Company Info
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">
                            Users Settings
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('users.index') }}">Users</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('administration.users') }}">Roles</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        @endif
    </div>
    @endauth

    <!-- Content -->
    <div class="content-wrapper">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>
                {{ 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">
                <i class="fas fa-exclamation-circle me-2"></i>
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @yield('content')
    </div>

    <!-- Footer -->
    <footer class="text-center mt-4 py-3 border-top">
        <small class="text-muted">&copy; {{ date('Y') }} Melsoft (Pvt) Ltd. All rights reserved.</small>
    </footer>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // Auto-hide alerts after 5 seconds
            setTimeout(function() {
                $('.alert').alert('close');
            }, 5000);

            // Mobile dropdown handling
            function initMobileDropdowns() {
                if ($(window).width() <= 768) {
                    console.log('Mobile mode activated');

                    // Remove any existing event handlers first
                    $('.horizontal-menu .dropdown > .menu-link').off('click');
                    $('.dropdown-submenu > .dropdown-item').off('click');
                    $(document).off('click.dropdown');
                    $('.horizontal-menu .dropdown-menu').off('click');

                    // Mobile: click to open main dropdowns
                    $('.horizontal-menu .dropdown > .menu-link').on('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();

                        var $menuLink = $(this);
                        var $dropdown = $menuLink.parent();
                        var $dropdownMenu = $dropdown.find('> .dropdown-menu');

                        // Get position of the clicked menu item
                        var linkRect = $menuLink[0].getBoundingClientRect();
                        var menuRect = $('.horizontal-menu')[0].getBoundingClientRect();

                        // Calculate position below the menu bar
                        var topPosition = menuRect.bottom + 5; // 5px gap below menu
                        var leftPosition = linkRect.left;

                        // Ensure dropdown doesn't go off screen
                        var dropdownWidth = 220; // min-width from CSS
                        if (leftPosition + dropdownWidth > window.innerWidth) {
                            leftPosition = window.innerWidth - dropdownWidth - 10;
                        }

                        // Position the dropdown
                        $dropdownMenu.css({
                            'top': topPosition + 'px',
                            'left': leftPosition + 'px'
                        });

                        // Close other main dropdowns and submenus
                        $('.horizontal-menu .dropdown > .dropdown-menu').not($dropdownMenu).removeClass('show');
                        $('.dropdown-submenu .dropdown-menu').removeClass('show');

                        // Toggle current dropdown
                        $dropdownMenu.toggleClass('show');
                    });

                    // Mobile: click to toggle submenus (inline expansion)
                    $('.dropdown-submenu > .dropdown-item').on('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();

                        var $submenuItem = $(this);
                        var $submenu = $submenuItem.parent();
                        var $submenuMenu = $submenu.find('> .dropdown-menu');

                        // Close other submenus at the same level
                        $submenu.siblings('.dropdown-submenu').find('.dropdown-menu').removeClass('show');

                        // Toggle current submenu (it will expand inline)
                        $submenuMenu.toggleClass('show');
                    });

                    // Close dropdowns when clicking outside
                    $(document).on('click.dropdown', function(e) {
                        if (!$(e.target).closest('.horizontal-menu .dropdown').length &&
                            !$(e.target).closest('.horizontal-menu .dropdown-menu').length) {
                            $('.horizontal-menu .dropdown-menu').removeClass('show');
                            $('.dropdown-submenu .dropdown-menu').removeClass('show');
                        }
                    });

                    // Prevent closing when clicking inside dropdown (but allow link clicks)
                    $('.horizontal-menu .dropdown-menu').on('click', function(e) {
                        if (!$(e.target).is('a')) {
                            e.stopPropagation();
                        }
                    });

                } else {
                    console.log('Desktop mode activated');

                    // Desktop: remove mobile event handlers
                    $('.horizontal-menu .dropdown > .menu-link').off('click');
                    $('.dropdown-submenu > .dropdown-item').off('click');
                    $(document).off('click.dropdown');
                    $('.horizontal-menu .dropdown-menu').off('click');

                    // Reset any inline positioning styles
                    $('.horizontal-menu .dropdown-menu').css({
                        'top': '',
                        'left': '',
                        'max-height': ''
                    });
                    $('.dropdown-submenu .dropdown-menu').css({
                        'top': '',
                        'left': '',
                        'max-height': ''
                    });

                    // Desktop: show dropdowns on hover
                    $('.horizontal-menu .dropdown').off('mouseenter mouseleave').hover(
                        function() {
                            $(this).find('> .dropdown-menu').addClass('show');
                        },
                        function() {
                            $(this).find('> .dropdown-menu').removeClass('show');
                        }
                    );

                    // Desktop: nested dropdowns
                    $('.dropdown-submenu').off('mouseenter mouseleave').hover(
                        function() {
                            $(this).find('> .dropdown-menu').addClass('show');
                        },
                        function() {
                            $(this).find('> .dropdown-menu').removeClass('show');
                        }
                    );
                }
            }

            // Initialize on load and resize
            initMobileDropdowns();

            var resizeTimer;
            $(window).resize(function() {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(function() {
                    initMobileDropdowns();
                }, 250);
            });
        });
    </script>
    @stack('scripts')
</body>
</html>
