<!-- 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="<?php echo e(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"><?php echo e(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>
                <?php echo e(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']);
            ?>

            
            <?php if($isStaffOrReceptionist): ?>
                <?php if(auth()->check() && auth()->user()->hasPermissionTo('view-front-desk')): ?>
                <li>
                    <a href="<?php echo e(route('bookings.room-board')); ?>" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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>
                <?php endif; ?>
            <?php endif; ?>

            
            <?php if(auth()->check() && auth()->user()->hasPermissionTo('view-dashboard')): ?>
            <li>
                <a href="<?php echo e(route('dashboard')); ?>" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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>
            <?php endif; ?>
            
            
            <?php if(auth()->check() && auth()->user()->hasPermissionTo('view-roles')): ?>
            <li class="relative" x-data="{ open: <?php echo e(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 <?php echo e(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">
                    <?php if(auth()->check() && auth()->user()->hasPermissionTo('view-permissions')): ?>
                    <a href="<?php echo e(route('permissions.index')); ?>" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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>
                    <?php endif; ?>
                    <a href="<?php echo e(route('roles.index')); ?>" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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>
            <?php endif; ?>

            
            <?php if(!$isStaffOrReceptionist): ?>
                <?php if(auth()->check() && auth()->user()->hasPermissionTo('view-front-desk')): ?>
                <li>
                    <a href="<?php echo e(route('bookings.room-board')); ?>" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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>
                <?php endif; ?>
            <?php endif; ?>

            
            <?php if(auth()->check() && auth()->user()->hasPermissionTo('view-bookings')): ?>
            <li class="relative" x-data="{ open: <?php echo e(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 <?php echo e(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="<?php echo e(route('bookings.index')); ?>" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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>
            <?php endif; ?>

            
            <?php if(auth()->check() && auth()->user()->hasPermissionTo('view-bookings')): ?>
            <li>
                <a href="<?php echo e(route('customers.index')); ?>" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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>
            <?php endif; ?>
            
            
            <?php if(auth()->check() && auth()->user()->hasPermissionTo('view-rooms')): ?>
            <li class="relative" x-data="{ open: <?php echo e(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 <?php echo e(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="<?php echo e(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 <?php echo e(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="<?php echo e(route('rooms.index')); ?>" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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>
            <?php endif; ?>
            
            
            <?php if(auth()->check() && auth()->user()->hasPermissionTo('view-staff')): ?>
            <li class="relative" x-data="{ open: <?php echo e(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 <?php echo e(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="<?php echo e(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 <?php echo e(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="<?php echo e(route('shifts.index')); ?>" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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="<?php echo e(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 <?php echo e(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="<?php echo e(route('staff.index')); ?>" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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>
            <?php endif; ?>

            
            <?php if(auth()->check() && auth()->user()->hasPermissionTo('view-reports')): ?>
            <li>
                <a href="<?php echo e(route('reports.index')); ?>" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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>
            <?php endif; ?>

            
            <?php if(auth()->check() && auth()->user()->hasPermissionTo('view-bookings')): ?>
            <li>
                <a href="<?php echo e(route('receipts.index')); ?>" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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>
            <?php endif; ?>

            
            <?php if(auth()->check() && auth()->user()->hasPermissionTo('view-complaints')): ?>
            <li>
                <a href="<?php echo e(route('complaints.index')); ?>" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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>
            <?php endif; ?>

            
            <?php if(auth()->check() && auth()->user()->hasPermissionTo('view-dashboard')): ?>
            <li>
                <a href="<?php echo e(route('site-settings.index')); ?>" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors <?php echo e(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>
            <?php endif; ?>
            
            
            
        </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><?php /**PATH /home4/lvwxwpmy/public_html/hotelms/resources/views/backend/layouts/partials/sidenav.blade.php ENDPATH**/ ?>