<?php $__env->startSection('title'); ?>
    Manage Rooms - Hotel Management System
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
    <!-- Breadcrumb -->
    <div class="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center text-sm text-gray-600">
                <i class="fas fa-home mr-2"></i>
                <span>/ Manage Rooms</span>
            </div>
            <?php if(auth()->check() && auth()->user()->hasPermissionTo('create-rooms')): ?>
            <a href="<?php echo e(route('rooms.create')); ?>" class="bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded-lg transition-colors">
                <i class="fas fa-plus mr-2"></i>Add Rooms
            </a>
            <?php endif; ?>
        </div>
    </div>

    <!-- Content -->
    <div class="p-6">
        <?php if(session('success')): ?>
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                <?php echo e(session('success')); ?>

            </div>
        <?php endif; ?>

        <?php if(session('error')): ?>
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                <?php echo e(session('error')); ?>

            </div>
        <?php endif; ?>

        <!-- Filters and Search -->
        <div class="bg-white rounded-lg shadow-md mb-6">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-800">Manage Rooms</h2>
            </div>
            
            <div class="p-6">
                <form method="GET" action="<?php echo e(route('rooms.index')); ?>" id="filterForm" class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <!-- Show Entries -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Show Entries</label>
                            <select name="per_page" id="perPage" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="10" <?php echo e(request('per_page') == 10 ? 'selected' : ''); ?>>10</option>
                                <option value="25" <?php echo e(request('per_page') == 25 ? 'selected' : ''); ?>>25</option>
                                <option value="50" <?php echo e(request('per_page') == 50 ? 'selected' : ''); ?>>50</option>
                                <option value="100" <?php echo e(request('per_page') == 100 ? 'selected' : ''); ?>>100</option>
                            </select>
                        </div>

                        <!-- Status Filter -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                            <select name="status" id="statusFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">All Status</option>
                                <option value="Available" <?php echo e(request('status') == 'Available' ? 'selected' : ''); ?>>Available</option>
                                <option value="Occupied" <?php echo e(request('status') == 'Occupied' ? 'selected' : ''); ?>>Occupied</option>
                                <option value="Maintenance" <?php echo e(request('status') == 'Maintenance' ? 'selected' : ''); ?>>Maintenance</option>
                                <option value="Booked" <?php echo e(request('status') == 'Booked' ? 'selected' : ''); ?>>Booked</option>
                            </select>
                        </div>

                        <!-- Room Type Filter -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Room Type</label>
                            <select name="room_type_id" id="roomTypeFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">All Types</option>
                                <?php $__currentLoopData = $roomTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $roomType): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($roomType->room_type_id); ?>" <?php echo e(request('room_type_id') == $roomType->room_type_id ? 'selected' : ''); ?>>
                                        <?php echo e($roomType->room_type); ?>

                                    </option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>

                        <!-- Search -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Search</label>
                            <input type="text" 
                                   name="search" 
                                   id="searchInput"
                                   value="<?php echo e(request('search')); ?>"
                                   placeholder="Search rooms..."
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                    
                    <!-- Clear Filters Button -->
                    <div class="flex justify-end">
                        <button type="button" id="clearFiltersBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors">
                            <i class="fas fa-times mr-2"></i>Clear Filters
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Rooms Table -->
        <div class="bg-white rounded-lg shadow-md">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
                                Room No <i class="fas fa-sort ml-1"></i>
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
                                Room Type <i class="fas fa-sort ml-1"></i>
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
                                Room Status <i class="fas fa-sort ml-1"></i>
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
                                Check In <i class="fas fa-sort ml-1"></i>
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
                                Check Out <i class="fas fa-sort ml-1"></i>
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
                                Action <i class="fas fa-sort ml-1"></i>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <?php $__empty_1 = true; $__currentLoopData = $rooms; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $room): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900"><?php echo e($room->room_no); ?></div>
                                    <?php if($room->floor): ?>
                                        <div class="text-xs text-gray-500">Floor: <?php echo e($room->floor); ?></div>
                                    <?php endif; ?>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900"><?php echo e($room->roomType->room_type); ?></div>
                                    <?php if($room->price_per_night): ?>
                                        <div class="text-xs text-gray-500">KES <?php echo e(number_format($room->price_per_night, 2)); ?>/night</div>
                                    <?php endif; ?>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <?php if($room->isAvailable()): ?>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            Vacant
                                        </span>
                                    <?php elseif($room->isBooked()): ?>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                            Booked
                                        </span>
                                    <?php elseif($room->isOccupied()): ?>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                            Occupied
                                        </span>
                                    <?php elseif($room->isInMaintenance()): ?>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                            Maintenance
                                        </span>
                                    <?php endif; ?>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <?php if($room->getCheckInStatusText() === 'Checked In'): ?>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                            Checked In
                                        </span>
                                    <?php elseif($room->getCheckInStatusText() === 'Check In'): ?>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                            Check In
                                        </span>
                                    <?php else: ?>
                                        <span class="text-gray-500">-</span>
                                    <?php endif; ?>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <?php if($room->getCheckOutStatusText() === 'Check Out'): ?>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            Check Out
                                        </span>
                                    <?php else: ?>
                                        <span class="text-gray-500">-</span>
                                    <?php endif; ?>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <div class="flex space-x-2">
                                        <?php if(auth()->check() && auth()->user()->hasPermissionTo('edit-rooms')): ?>
                                        <a href="<?php echo e(route('rooms.edit', $room)); ?>" 
                                           class="inline-flex items-center justify-center w-8 h-8 bg-blue-100 text-blue-600 rounded-full hover:bg-blue-200 transition-colors">
                                            <i class="fas fa-edit text-sm"></i>
                                        </a>
                                        <?php endif; ?>
                                        
                                        <?php if($room->isBooked() || $room->isOccupied()): ?>
                                        <a href="<?php echo e(route('rooms.show', $room)); ?>" 
                                           class="inline-flex items-center justify-center w-8 h-8 bg-orange-100 text-orange-600 rounded-full hover:bg-orange-200 transition-colors">
                                            <i class="fas fa-eye text-sm"></i>
                                        </a>
                                        <?php endif; ?>
                                        
                                        <?php if(auth()->check() && auth()->user()->hasPermissionTo('delete-rooms')): ?>
                                        <form action="<?php echo e(route('rooms.destroy', $room)); ?>" 
                                              method="POST" 
                                              class="inline"
                                              onsubmit="return confirm('Are you sure you want to delete this room?')">
                                            <?php echo csrf_field(); ?>
                                            <?php echo method_field('DELETE'); ?>
                                            <button type="submit" class="inline-flex items-center justify-center w-8 h-8 bg-red-100 text-red-600 rounded-full hover:bg-red-200 transition-colors">
                                                <i class="fas fa-trash text-sm"></i>
                                            </button>
                                        </form>
                                        <?php endif; ?>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <tr>
                                <td colspan="6" class="px-6 py-4 text-center text-gray-500">
                                    No rooms found.
                                </td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <?php if($rooms->hasPages()): ?>
                <div class="px-6 py-4 border-t border-gray-200">
                    <?php echo e($rooms->links()); ?>

                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- JavaScript for Instant Search and Filter -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const filterForm = document.getElementById('filterForm');
            const searchInput = document.getElementById('searchInput');
            const statusFilter = document.getElementById('statusFilter');
            const roomTypeFilter = document.getElementById('roomTypeFilter');
            const perPageSelect = document.getElementById('perPage');
            const clearFiltersBtn = document.getElementById('clearFiltersBtn');
            
            let searchTimeout;

            // Instant search functionality with delay
            searchInput.addEventListener('input', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() {
                    filterForm.submit();
                }, 800); // 800ms delay to avoid too many requests
            });

            // Instant filter for dropdowns
            statusFilter.addEventListener('change', function() {
                filterForm.submit();
            });

            roomTypeFilter.addEventListener('change', function() {
                filterForm.submit();
            });

            perPageSelect.addEventListener('change', function() {
                filterForm.submit();
            });

            // Clear filters function
            function clearFilters() {
                searchInput.value = '';
                statusFilter.value = '';
                roomTypeFilter.value = '';
                perPageSelect.value = '10';
                filterForm.submit();
            }

            // Clear filters button event listener
            clearFiltersBtn.addEventListener('click', clearFilters);

            // Add visual feedback for active filters
            function updateFilterIndicators() {
                const hasFilters = searchInput.value || statusFilter.value || roomTypeFilter.value || perPageSelect.value !== '10';
                clearFiltersBtn.style.opacity = hasFilters ? '1' : '0.5';
                clearFiltersBtn.disabled = !hasFilters;
            }

            // Update indicators on page load
            updateFilterIndicators();

            // Update indicators when filters change
            [searchInput, statusFilter, roomTypeFilter, perPageSelect].forEach(element => {
                element.addEventListener('change', updateFilterIndicators);
                element.addEventListener('input', updateFilterIndicators);
            });
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('backend.layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home4/lvwxwpmy/public_html/hotelms/resources/views/backend/rooms/index.blade.php ENDPATH**/ ?>