{{--
    ╔══════════════════════════════════════════════════════════════════╗
    ║  ⚠️  NOT IN USE — DO NOT EDIT THIS FILE                         ║
    ║                                                                  ║
    ║  The active navigation is defined in:                            ║
    ║  resources/views/layouts/app.blade.php                           ║
    ║  (the two-tier pbx-nav-rail + pbx-nav-panel system)              ║
    ║                                                                  ║
    ║  This file is a legacy Tailwind/Alpine sidebar and is no longer  ║
    ║  included or rendered anywhere in the application.               ║
    ╚══════════════════════════════════════════════════════════════════╝
--}}
<!-- Sidebar Navigation (collapsible + persistent state) -->
<style>[x-cloak]{display:none!important}</style>

<aside
    class="w-64 bg-gray-800 text-white h-screen p-4"
    x-data="{
        open: {
            extensions: {{ request()->routeIs('extensions.*') ? 'true' : 'false' }},
            applications: {{ (request()->routeIs('apps.*') || request()->routeIs('admin.app.*')) ? 'true' : 'false' }},
            cdr: {{ request()->routeIs('cdr.*') ? 'true' : 'false' }},
            trunks: {{ request()->routeIs('trunks.*') ? 'true' : 'false' }},
            firewall: {{ request()->routeIs('firewall.*') ? 'true' : 'false' }},
            fail2ban: {{ request()->routeIs('fail2ban.*') ? 'true' : 'false' }},
            help: {{ request()->routeIs('help.*') ? 'true' : 'false' }},
            provisioning: {{ request()->routeIs('provisioning.*') ? 'true' : 'false' }},
        },
        load(){
            try {
                const saved = JSON.parse(localStorage.getItem('pbx.sidebar')) || {};
                this.open = { ...this.open, ...saved };
                if ({{ request()->routeIs('extensions.*') ? 'true' : 'false' }}) this.open.extensions = true;
                if ({{ (request()->routeIs('apps.*') || request()->routeIs('admin.app.*')) ? 'true' : 'false' }}) this.open.applications = true;
                if ({{ request()->routeIs('cdr.*') ? 'true' : 'false' }}) this.open.cdr = true;
                if ({{ request()->routeIs('trunks.*') ? 'true' : 'false' }}) this.open.trunks = true;
                if ({{ request()->routeIs('firewall.*') ? 'true' : 'false' }}) this.open.firewall = true;
                if ({{ request()->routeIs('fail2ban.*') ? 'true' : 'false' }}) this.open.fail2ban = true;
                if ({{ request()->routeIs('help.*') ? 'true' : 'false' }}) this.open.help = true;
                if ({{ request()->routeIs('provisioning.*') ? 'true' : 'false' }}) this.open.provisioning = true;
            } catch (e) {}
        },
        save(){ localStorage.setItem('pbx.sidebar', JSON.stringify(this.open)); },
        init(){ this.load(); this.$watch('open', () => this.save()); }
    }"
>
    <h2 class="text-lg font-bold mb-4">PBX Menu</h2>

    <nav class="space-y-2">

        <!-- Dashboard -->
        <a href="{{ route('dashboard') }}"
           class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('dashboard') ? 'bg-gray-900' : '' }}">
            Dashboard
        </a>

        <!-- Extensions -->
        <div class="mt-2">
            <button type="button" @click="open.extensions = !open.extensions"
                    class="w-full flex items-center justify-between px-2 py-1 rounded hover:bg-gray-700">
                <span>Extensions</span>
                <svg class="w-4 h-4 transform transition" :class="open.extensions ? 'rotate-90' : ''" viewBox="0 0 20 20" fill="currentColor"><path d="M6 6l6 4-6 4V6z"/></svg>
            </button>
            <div x-show="open.extensions" x-transition x-cloak class="mt-1 space-y-1 pl-4">
                <a href="{{ route('extensions.index') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('extensions.index') ? 'bg-gray-900' : '' }}">All Extensions</a>
                <a href="{{ route('extensions.create') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('extensions.create') ? 'bg-gray-900' : '' }}">Create Extension</a>
                <a href="{{ route('extensions.status') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('extensions.status*') ? 'bg-gray-900' : '' }}">Extension Status</a>
            </div>
        </div>

        <!-- Provisioning -->
        <div class="mt-2">
            <a href="{{ route('provisioning.index') }}"
               class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('provisioning.*') ? 'bg-gray-900' : '' }}">
                Device Provisioning
            </a>
        </div>

        <!-- Applications -->
        <div class="mt-2">
            <button type="button" @click="open.applications = !open.applications"
                    class="w-full flex items-center justify-between px-2 py-1 rounded hover:bg-gray-700">
                <span>Applications</span>
                <svg class="w-4 h-4 transform transition" :class="open.applications ? 'rotate-90' : ''" viewBox="0 0 20 20" fill="currentColor"><path d="M6 6l6 4-6 4V6z"/></svg>
            </button>
            <div x-show="open.applications" x-transition x-cloak class="mt-1 space-y-1 pl-4">
                {{-- Existing apps.* items --}}
                <a href="{{ route('apps.ring-groups.index') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('apps.ring-groups.*') ? 'bg-gray-900' : '' }}">Ring Groups</a>
                <a href="{{ route('apps.pickup-groups.index') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('apps.pickup-groups.*') ? 'bg-gray-900' : '' }}">Pickup Groups</a>
                <a href="{{ route('apps.speed-dials.index') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('apps.speed-dials.*') ? 'bg-gray-900' : '' }}">Speed Dials</a>
                <a href="{{ route('apps.pins.index') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('apps.pins.*') ? 'bg-gray-900' : '' }}">PIN Codes</a>

                {{-- NEW admin.app.* items --}}
                <a href="{{ route('admin.app.timegroups.index') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('admin.app.timegroups.*') ? 'bg-gray-900' : '' }}">
                   Time Groups
                </a>
                <a href="{{ route('admin.app.timeconditions.index') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('admin.app.timeconditions.*') ? 'bg-gray-900' : '' }}">
                   Time Conditions
                </a>
                <a href="{{ route('admin.app.holidays.index') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('admin.app.holidays.*') ? 'bg-gray-900' : '' }}">
                   Holidays
                </a>
                <a href="{{ route('admin.app.flowswitches.index') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('admin.app.flowswitches.*') ? 'bg-gray-900' : '' }}">
                   Flow Switches
                </a>
            </div>
        </div>

        <!-- CDR -->
        <div class="mt-2">
            <button type="button" @click="open.cdr = !open.cdr"
                    class="w-full flex items-center justify-between px-2 py-1 rounded hover:bg-gray-700">
                <span>CDR</span>
                <svg class="w-4 h-4 transform transition" :class="open.cdr ? 'rotate-90' : ''" viewBox="0 0 20 20" fill="currentColor"><path d="M6 6l6 4-6 4V6z"/></svg>
            </button>
            <div x-show="open.cdr" x-transition x-cloak class="mt-1 space-y-1 pl-4">
                <a href="{{ route('cdr.index') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('cdr.index') ? 'bg-gray-900' : '' }}">Call Logs</a>
                <a href="{{ route('cdr.live') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('cdr.live') ? 'bg-gray-900' : '' }}">Live Calls</a>
                <a href="{{ route('cdr.recordings') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('cdr.recordings*') ? 'bg-gray-900' : '' }}">Call Recordings</a>
                <a href="{{ route('departments.index') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('departments.*') ? 'bg-gray-900' : '' }}">Departments</a>
            </div>
        </div>

        <!-- Trunks -->
        <div class="mt-2">
            <button type="button" @click="open.trunks = !open.trunks"
                    class="w-full flex items-center justify-between px-2 py-1 rounded hover:bg-gray-700">
                <span>Trunks</span>
                <svg class="w-4 h-4 transform transition" :class="open.trunks ? 'rotate-90' : ''" viewBox="0 0 20 20" fill="currentColor"><path d="M6 6l6 4-6 4V6z"/></svg>
            </button>
            <div x-show="open.trunks" x-transition x-cloak class="mt-1 space-y-1 pl-4">
                <a href="{{ route('trunks.index') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('trunks.index') ? 'bg-gray-900' : '' }}">SIP Trunks</a>
                <a href="{{ route('trunks.inbound') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('trunks.inbound') ? 'bg-gray-900' : '' }}">Inbound Routes</a>
                <a href="{{ route('trunks.outbound') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('trunks.outbound') ? 'bg-gray-900' : '' }}">Outbound Routes</a>
            </div>
        </div>

        <!-- Firewall -->
        <div class="mt-2">
            <button type="button" @click="open.firewall = !open.firewall"
                    class="w-full flex items-center justify-between px-2 py-1 rounded hover:bg-gray-700">
                <span>Firewall</span>
                <svg class="w-4 h-4 transform transition" :class="open.firewall ? 'rotate-90' : ''" viewBox="0 0 20 20" fill="currentColor"><path d="M6 6l6 4-6 4V6z"/></svg>
            </button>
            <div x-show="open.firewall" x-transition x-cloak class="mt-1 space-y-1 pl-4">
                <a href="{{ route('firewall.settings') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('firewall.settings') ? 'bg-gray-900' : '' }}">Settings</a>
                <a href="{{ route('firewall.scanners') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('firewall.scanners') ? 'bg-gray-900' : '' }}">Scanners</a>
                <a href="{{ route('firewall.access') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('firewall.access*') ? 'bg-gray-900' : '' }}">Access Control</a>
                <a href="{{ route('firewall.services') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('firewall.services') ? 'bg-gray-900' : '' }}">Services</a>
                <a href="{{ route('firewall.geo') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('firewall.geo') ? 'bg-gray-900' : '' }}">Geo Firewall</a>
            </div>
        </div>

        <!-- Fail2Ban -->
        <div class="mt-2">
            <button type="button" @click="open.fail2ban = !open.fail2ban"
                    class="w-full flex items-center justify-between px-2 py-1 rounded hover:bg-gray-700">
                <span>Fail2Ban</span>
                <svg class="w-4 h-4 transform transition" :class="open.fail2ban ? 'rotate-90' : ''" viewBox="0 0 20 20" fill="currentColor"><path d="M6 6l6 4-6 4V6z"/></svg>
            </button>
            <div x-show="open.fail2ban" x-transition x-cloak class="mt-1 space-y-1 pl-4">
                <a href="{{ route('fail2ban.bans') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('fail2ban.bans') ? 'bg-gray-900' : '' }}">Bans</a>
            </div>
        </div>

        <!-- Help -->
        <div class="mt-2">
            <button type="button" @click="open.help = !open.help"
                    class="w-full flex items-center justify-between px-2 py-1 rounded hover:bg-gray-700">
                <span>Help</span>
                <svg class="w-4 h-4 transform transition" :class="open.help ? 'rotate-90' : ''" viewBox="0 0 20 20" fill="currentColor"><path d="M6 6l6 4-6 4V6z"/></svg>
            </button>
            <div x-show="open.help" x-transition x-cloak class="mt-1 space-y-1 pl-4">
                <a href="{{ route('help.index') }}"
                   class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('help.index') ? 'bg-gray-900' : '' }}">Documentation</a>
            </div>
        </div>

        <!-- Profile -->
        <div class="mt-6">
            <a href="{{ route('profile.edit') }}"
               class="block px-2 py-1 rounded hover:bg-gray-700 {{ request()->routeIs('profile.edit') ? 'bg-gray-900' : '' }}">
                Profile
            </a>
            <form method="POST" action="{{ route('logout') }}" class="mt-2">
                @csrf
                <button type="submit" class="block w-full text-left px-2 py-1 hover:bg-gray-700 rounded">
                    Logout
                </button>
            </form>
        </div>
    </nav>
</aside>