<!-- Sidebar -->
<aside class="bg-white shadow-lg w-64 h-screen overflow-y-auto transition-all duration-300 lg:translate-x-0 -translate-x-full fixed lg:relative z-40" id="sidebar">
    <!-- User Profile Section -->
    <div class="p-6 lg:p-6 p-4 border-b border-gray-200">
        <div class="text-center">
            <div class="w-16 h-16 lg:w-16 lg:h-16 w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-3">
                <img src="{{ asset('assets/images/user.webp') }}" alt="usr-avatar" class="w-full h-full object-cover rounded-full">
            </div>
            <h3 class="text-lg lg:text-lg text-base font-semibold text-gray-800">{{ Auth::user()->name }}</h3>
            <div class="inline-flex items-center px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">
                <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                {{ Auth::user()->roles->first() ? Auth::user()->roles->first()->name : 'USER' }}
            </div>
        </div>
    </div>

    <!-- Navigation Menu -->
    <nav class="p-4">
        <ul class="space-y-2">
            @php
                $userRole = Auth::user()->roles->first();
                $isStaffOrReceptionist = $userRole && in_array($userRole->name, ['Staff', 'Receptionist']);
            @endphp

            {{-- Front Desk - Show first for Staff and Receptionist --}}
            @if($isStaffOrReceptionist)
                @can('view-front-desk')
                <li>
                    <a href="{{ route('bookings.room-board') }}" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('bookings.room-board') ? 'bg-teal-100 text-teal-700 border-r-4 border-teal-500' : '' }}">
                        <i class="fas fa-bed mr-3"></i>
                        Front Desk 
                    </a>
                </li>
                @endcan
            @endif

            {{-- Dashboard - Show first for other roles, second for Staff/Receptionist --}}
            @can('view-dashboard')
            <li>
                <a href="{{ route('dashboard') }}" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('dashboard') ? 'bg-teal-100 text-teal-700 border-r-4 border-teal-500' : '' }}">
                    <i class="fas fa-home mr-3"></i>
                    Dashboard
                </a>
            </li>
            @endcan
            
            {{-- Role Management - Only show if user has role management permissions --}}
            @can('view-roles')
            <li class="relative" x-data="{ open: {{ request()->routeIs('roles.*') || request()->routeIs('permissions.*') ? 'true' : 'false' }} }">
                <button @click="open = !open" class="flex items-center justify-between w-full px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('roles.*') || request()->routeIs('permissions.*') ? 'bg-teal-100 text-teal-700 border-r-4 border-teal-500' : '' }}">
                    <div class="flex items-center">
                        <i class="fas fa-users-cog mr-3"></i>
                        <span>Manage Role</span>
                    </div>
                    <i class="fas fa-chevron-down text-sm transition-transform" :class="{ 'rotate-180': open }"></i>
                </button>
                
                <!-- Dropdown Menu -->
                <div x-show="open" x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform scale-95"
                     x-transition:enter-end="opacity-100 transform scale-100"
                     x-transition:leave="transition ease-in duration-150"
                     x-transition:leave-start="opacity-100 transform scale-100"
                     x-transition:leave-end="opacity-0 transform scale-95"
                     class="ml-4 mt-2 space-y-1">
                    @can('view-permissions')
                    <a href="{{ route('permissions.index') }}" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('permissions.*') ? 'bg-teal-100 text-teal-700 border-l-4 border-teal-500' : '' }}">
                        <i class="fas fa-shield-alt mr-3"></i>
                        Permission Setup
                    </a>
                    @endcan
                    <a href="{{ route('roles.index') }}" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('roles.*') ? 'bg-teal-100 text-teal-700 border-l-4 border-teal-500' : '' }}">
                        <i class="fas fa-user-tag mr-3"></i>
                        Role Setup
                    </a>
                </div>
            </li>
            @endcan

            {{-- Front Desk - Show second for non-Staff/Receptionist roles --}}
            @if(!$isStaffOrReceptionist)
                @can('view-front-desk')
                <li>
                    <a href="{{ route('bookings.room-board') }}" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('bookings.room-board') ? 'bg-teal-100 text-teal-700 border-r-4 border-teal-500' : '' }}">
                        <i class="fas fa-bed mr-3"></i>
                        Front Desk 
                    </a>
                </li>
                @endcan
            @endif

            {{-- Reservation - Only show if user has booking permissions --}}
            @can('view-bookings')
            <li class="relative" x-data="{ open: {{ request()->routeIs('bookings.*') && !request()->routeIs('bookings.room-board') ? 'true' : 'false' }} }">
                <button @click="open = !open" class="flex items-center justify-between w-full px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('bookings.*') && !request()->routeIs('bookings.room-board') ? 'bg-teal-100 text-teal-700 border-r-4 border-teal-500' : '' }}">
                    <div class="flex items-center">
                        <i class="fas fa-calendar mr-3"></i>
                        <span>Reservation</span>
                    </div>
                    <i class="fas fa-chevron-down text-sm transition-transform" :class="{ 'rotate-180': open }"></i>
                </button>
                
                <!-- Dropdown Menu -->
                <div x-show="open" @click.away="open = false" 
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform scale-95"
                     x-transition:enter-end="opacity-100 transform scale-100"
                     x-transition:leave="transition ease-in duration-150"
                     x-transition:leave-start="opacity-100 transform scale-100"
                     x-transition:leave-end="opacity-0 transform scale-95"
                     class="ml-4 mt-2 space-y-1">
                    
                    <a href="{{ route('bookings.index') }}" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('bookings.index') || request()->routeIs('bookings.show') || request()->routeIs('bookings.edit') || request()->routeIs('bookings.create') || request()->routeIs('bookings.get-room-price') ? 'bg-teal-100 text-teal-700 border-l-4 border-teal-500' : '' }}">
                        <i class="fas fa-list mr-3"></i>
                        All Bookings
                    </a>
                    

                </div>
            </li>
            @endcan

            {{-- Customer List Menu --}}
            @can('view-bookings')
            <li>
                <a href="{{ route('customers.index') }}" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('customers.*') ? 'bg-teal-100 text-teal-700 border-r-4 border-teal-500' : '' }}">
                    <i class="fas fa-users mr-3"></i>
                    Customer List
                </a>
            </li>
            @endcan
            
            {{-- Manage Rooms - Only show if user has room permissions --}}
            @can('view-rooms')
            <li class="relative" x-data="{ open: {{ request()->routeIs('rooms.*') || request()->routeIs('room-types.*') ? 'true' : 'false' }} }">
                <button @click="open = !open" class="flex items-center justify-between w-full px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('rooms.*') || request()->routeIs('room-types.*') ? 'bg-teal-100 text-teal-700 border-r-4 border-teal-500' : '' }}">
                    <div class="flex items-center">
                        <i class="fas fa-bed mr-3"></i>
                        <span>Manage Rooms</span>
                    </div>
                    <i class="fas fa-chevron-down text-sm transition-transform" :class="{ 'rotate-180': open }"></i>
                </button>
                
                <!-- Dropdown Menu -->
                <div x-show="open" @click.away="open = false" 
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform scale-95"
                     x-transition:enter-end="opacity-100 transform scale-100"
                     x-transition:leave="transition ease-in duration-150"
                     x-transition:leave-start="opacity-100 transform scale-100"
                     x-transition:leave-end="opacity-0 transform scale-95"
                     class="ml-4 mt-2 space-y-1">
                    
                    <a href="{{ route('room-types.index') }}" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('room-types.*') ? 'bg-teal-100 text-teal-700 border-l-4 border-teal-500' : '' }}">
                        <i class="fas fa-tags mr-3"></i>
                        Room Types
                    </a>
                    
                    <a href="{{ route('rooms.index') }}" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('rooms.*') ? 'bg-teal-100 text-teal-700 border-l-4 border-teal-500' : '' }}">
                        <i class="fas fa-bed mr-3"></i>
                        Manage Room
                    </a>
                </div>
            </li>
            @endcan
            
            {{-- Staff Section - Only show if user has staff permissions --}}
            @can('view-staff')
            <li class="relative" x-data="{ open: {{ request()->routeIs('staff.*') || request()->routeIs('staff-types.*') || request()->routeIs('shifts.*') || request()->routeIs('id-card-types.*') ? 'true' : 'false' }} }">
                <button @click="open = !open" class="flex items-center justify-between w-full px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('staff.*') || request()->routeIs('staff-types.*') || request()->routeIs('shifts.*') || request()->routeIs('id-card-types.*') ? 'bg-teal-100 text-teal-700 border-r-4 border-teal-500' : '' }}">
                    <div class="flex items-center">
                        <i class="fas fa-users mr-3"></i>
                        <span>Staff Section</span>
                    </div>
                    <i class="fas fa-chevron-down text-sm transition-transform" :class="{ 'rotate-180': open }"></i>
                </button>
                
                <!-- Dropdown Menu -->
                <div x-show="open" @click.away="open = false" 
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform scale-95"
                     x-transition:enter-end="opacity-100 transform scale-100"
                     x-transition:leave="transition ease-in duration-150"
                     x-transition:leave-start="opacity-100 transform scale-100"
                     x-transition:leave-end="opacity-0 transform scale-95"
                     class="ml-4 mt-2 space-y-1">
                    
                    <a href="{{ route('staff-types.index') }}" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('staff-types.*') ? 'bg-teal-100 text-teal-700 border-l-4 border-teal-500' : '' }}">
                        <i class="fas fa-tags mr-3"></i>
                        Staff Types
                    </a>
                    
                    <a href="{{ route('shifts.index') }}" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('shifts.*') ? 'bg-teal-100 text-teal-700 border-l-4 border-teal-500' : '' }}">
                        <i class="fas fa-clock mr-3"></i>
                        All Shifts
                    </a>
                    
                    <a href="{{ route('id-card-types.index') }}" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('id-card-types.*') ? 'bg-teal-100 text-teal-700 border-l-4 border-teal-500' : '' }}">
                        <i class="fas fa-id-card mr-3"></i>
                        ID Card Types
                    </a>
                    
                    <a href="{{ route('staff.index') }}" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('staff.*') ? 'bg-teal-100 text-teal-700 border-l-4 border-teal-500' : '' }}">
                        <i class="fas fa-user-tie mr-3"></i>
                        Employee List
                    </a>
                </div>
            </li>
            @endcan

            {{-- Reports --}}
            @can('view-reports')
            <li>
                <a href="{{ route('reports.index') }}" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('reports.*') ? 'bg-teal-100 text-teal-700 border-r-4 border-teal-500' : '' }}">
                    <i class="fas fa-chart-bar mr-3"></i>
                    Reports & Analytics
                </a>
            </li>
            @endcan

            {{-- All Receipts - Only show if user has booking permissions --}}
            @can('view-bookings')
            <li>
                <a href="{{ route('receipts.index') }}" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('receipts.*') ? 'bg-teal-100 text-teal-700 border-r-4 border-teal-500' : '' }}">
                    <i class="fas fa-receipt mr-3"></i>
                    All Receipts
                </a>
            </li>
            @endcan

            {{-- Manage Complaints - Only show if user has complaint permissions --}}
            @can('view-complaints')
            <li>
                <a href="{{ route('complaints.index') }}" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('complaints.*') ? 'bg-teal-100 text-teal-700 border-r-4 border-teal-500' : '' }}">
                    <i class="fas fa-comment mr-3"></i>
                    All Complaints
                </a>
            </li>
            @endcan

            {{-- Site Settings --}}
            @can('view-dashboard')
            <li>
                <a href="{{ route('site-settings.index') }}" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('site-settings.*') ? 'bg-teal-100 text-teal-700 border-r-4 border-teal-500' : '' }}">
                    <i class="fas fa-cog mr-3"></i>
                    Site Settings
                </a>
            </li>
            @endcan
            
            {{-- Statistics - Only show if user has statistics permission --}}
            {{-- @can('view-statistics')
            <li>
                <a href="{{ route('statistics') }}" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('statistics') ? 'bg-teal-100 text-teal-700 border-r-4 border-teal-500' : '' }}">
                    <i class="fas fa-chart-bar mr-3"></i>
                    Statistics
                </a>
            </li>
            @endcan --}}
        </ul>
    </nav>
</aside>

<!-- Mobile Overlay -->
<div class="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden" id="sidebarOverlay" onclick="toggleSidebar()" style="display: none;"></div>