

<?php $__env->startSection('title'); ?>
    Room Board - 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>/ <a href="<?php echo e(route('bookings.index')); ?>" class="text-blue-600 hover:text-blue-800">Reservation</a> / Room Board</span>
            </div>
            <div class="flex space-x-2">
                <?php if(auth()->check() && auth()->user()->hasPermissionTo('create-bookings')): ?>
                <a href="<?php echo e(route('bookings.create')); ?>" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors">
                    <i class="fas fa-plus mr-2"></i>New Booking
                </a>
                <?php endif; ?>

            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="p-6">
        <!-- Debug Information (remove in production) -->
        <?php if(config('app.debug')): ?>
        <div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-info-circle"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm">
                        <strong>Debug Info:</strong> 
                        Total Rooms: <?php echo e($rooms->flatten()->count()); ?>, 
                        Floors: <?php echo e($rooms->keys()->implode(', ')); ?>,
                        Private Bathroom Rooms: <?php echo e($rooms->flatten()->where('bathroom_type', 'Private Bathroom')->count()); ?>,
                        Shared Bathroom Rooms: <?php echo e($rooms->flatten()->where('bathroom_type', 'Shared Bathroom')->count()); ?>

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

        <!-- Quick Stats -->
        <div class="mt-4 mb-4 lg:mb-12 grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-green-500">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-green-100 text-green-600">
                        <i class="fas fa-bed text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Available</p>
                        <p class="text-2xl font-bold text-gray-900"><?php echo e($rooms->flatten()->where('room_status', 'Available')->count()); ?></p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-red-500">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-red-100 text-red-600">
                        <i class="fas fa-user-check text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Occupied</p>
                        <p class="text-2xl font-bold text-gray-900"><?php echo e($rooms->flatten()->where('room_status', 'Occupied')->count()); ?></p>
                    </div>
                </div>
            </div>

            



            <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-orange-500">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-orange-100 text-orange-600">
                        <i class="fas fa-tools text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Maintenance</p>
                        <p class="text-2xl font-bold text-gray-900"><?php echo e($rooms->flatten()->where('room_status', 'Maintenance')->count()); ?></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Room Board -->
        <div class="space-y-8">
            <?php $__empty_1 = true; $__currentLoopData = $rooms; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $floor => $floorRooms): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="bg-white rounded-lg shadow-md overflow-hidden">
                    <div class="px-6 py-4 bg-gradient-to-r from-blue-600 to-blue-700">
                        <h3 class="text-xl font-bold text-white"><?php echo e($floor == 1 ? '1ST' : ($floor == 2 ? '2ND' : ($floor == 3 ? '3RD' : $floor . 'TH'))); ?> FLOOR LEVEL</h3>
                    </div>
                    
                    <div class="p-6">
                        <!-- Private Bathroom Section -->
                        <div class="mb-8">
                            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-4">
                                <?php
                                    $privateRooms = $floorRooms->filter(function($room) {
                                        return $room->bathroom_type === 'Private Bathroom';
                                    });
                                ?>
                                <?php if($privateRooms->count() > 0): ?>
                                    <?php $__currentLoopData = $privateRooms; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $room): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div class="relative group">
                                        <div class="room-card <?php if($room->room_status === 'Occupied'): ?> bg-red-500 <?php elseif($room->room_status === 'Maintenance'): ?> bg-orange-300 <?php else: ?> bg-green-500 <?php endif; ?> rounded-lg p-4 text-center hover:shadow-sm transition-all duration-300 transform cursor-pointer"
                                             onclick="selectRoom('<?php echo e($room->room_id); ?>', '<?php echo e($room->room_no); ?>', '<?php echo e($room->roomType->room_type ?? 'Unknown Type'); ?>', '<?php echo e($room->room_status); ?>', '<?php echo e($room->bookings->first() ? $room->bookings->first()->booking_id : null); ?>')"
                                             data-booking-id="<?php echo e($room->bookings->first() ? $room->bookings->first()->booking_id : ''); ?>"
                                             data-room-id="<?php echo e($room->room_id); ?>"
                                             data-room-no="<?php echo e($room->room_no); ?>"
                                             data-room-type="<?php echo e($room->roomType->room_type ?? 'Unknown Type'); ?>"
                                             data-room-status="<?php echo e($room->room_status); ?>"
                                             style="cursor: <?php if($room->room_status === 'Booked' || $room->room_status === 'Maintenance'): ?> pointer <?php else: ?> pointer <?php endif; ?>;">
                                            
                                            <!-- Bed Icon -->
                                            <div class="text-4xl mb-3">
                                                <i class="fas fa-bed text-white drop-shadow-md"></i>
                                            </div>
                                            
                                            <!-- Room Number -->
                                            <div class="text-white font-bold text-2xl mb-2 drop-shadow-md"><?php echo e($room->room_no); ?></div>
                                            
                                            <!-- Room Type -->
                                            <div class="text-white text-sm font-medium opacity-95 drop-shadow-sm"><?php echo e($room->roomType->room_type ?? 'Unknown Type'); ?></div>
                                            
                                            <!-- Status Badge -->
                                            <?php if($room->room_status === 'Maintenance'): ?>
                                                <div class="absolute -top-2 -right-2 bg-orange-500 text-white text-xs px-2 py-1 rounded-full font-bold shadow-lg">
                                                    Maintenance
                                                </div>
                                            <?php elseif($room->room_status === 'Booked'): ?>
                                                <div class="absolute -top-2 -right-2 bg-red-600 text-white text-xs px-2 py-1 rounded-full font-bold shadow-lg">
                                                    Booked
                                                </div>
                                            <?php elseif($room->room_status === 'Occupied'): ?>
                                                <div class="absolute -top-2 -right-2 bg-blue-700 text-white text-xs px-2 py-1 rounded-full font-bold shadow-lg">
                                                    Occupied
                                                </div>
                                            <?php endif; ?>
                                            
                                            <!-- Hover Effect -->
                                            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 rounded-xl transition-all duration-300"></div>
                                        </div>
                                    </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <?php else: ?>
                                    <div class="col-span-full text-center py-8">
                                        <i class="fas fa-bath text-4xl text-gray-300 mb-2"></i>
                                        <p class="text-gray-500">No private bathroom rooms on this floor.</p>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>

                        <!-- Shared Bathroom Section -->
                        <div>
                            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-4">
                                <?php
                                    $sharedRooms = $floorRooms->filter(function($room) {
                                        return $room->bathroom_type === 'Shared Bathroom';
                                    });
                                ?>
                                <?php if($sharedRooms->count() > 0): ?>
                                    <?php $__currentLoopData = $sharedRooms; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $room): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div class="relative group">
                                        <div class="room-card <?php if($room->room_status === 'Occupied'): ?> bg-red-500 <?php elseif($room->room_status === 'Maintenance'): ?> bg-orange-300 <?php else: ?> bg-green-500 <?php endif; ?> rounded-lg p-4 text-center hover:shadow-sm transition-all duration-300 transform cursor-pointer"
                                             onclick="selectRoom('<?php echo e($room->room_id); ?>', '<?php echo e($room->room_no); ?>', '<?php echo e($room->roomType->room_type ?? 'Unknown Type'); ?>', '<?php echo e($room->room_status); ?>', '<?php echo e($room->bookings->first() ? $room->bookings->first()->booking_id : null); ?>')"
                                             data-booking-id="<?php echo e($room->bookings->first() ? $room->bookings->first()->booking_id : ''); ?>"
                                             data-room-id="<?php echo e($room->room_id); ?>"
                                             data-room-no="<?php echo e($room->room_no); ?>"
                                             data-room-type="<?php echo e($room->roomType->room_type ?? 'Unknown Type'); ?>"
                                             data-room-status="<?php echo e($room->room_status); ?>"
                                             style="cursor: <?php if($room->room_status === 'Booked' || $room->room_status === 'Maintenance'): ?> pointer <?php else: ?> pointer <?php endif; ?>;">
                                            
                                            <!-- Bed Icon -->
                                            <div class="text-4xl mb-3">
                                                <i class="fas fa-bed text-white drop-shadow-md"></i>
                                            </div>
                                            
                                            <!-- Room Number -->
                                            <div class="text-white font-bold text-2xl mb-2 drop-shadow-md"><?php echo e($room->room_no); ?></div>
                                            
                                            <!-- Room Type -->
                                            <div class="text-white text-sm font-medium opacity-95 drop-shadow-sm"><?php echo e($room->roomType->room_type ?? 'Unknown Type'); ?></div>
                                            
                                            <!-- Status Badge -->
                                            <?php if($room->room_status === 'Maintenance'): ?>
                                                <div class="absolute -top-2 -right-2 bg-orange-500 text-white text-xs px-2 py-1 rounded-full font-bold shadow-lg">
                                                    Maintenance
                                                </div>
                                            <?php elseif($room->room_status === 'Booked'): ?>
                                                <div class="absolute -top-2 -right-2 bg-red-600 text-white text-xs px-2 py-1 rounded-full font-bold shadow-lg">
                                                    Booked
                                                </div>
                                            <?php elseif($room->room_status === 'Occupied'): ?>
                                                <div class="absolute -top-2 -right-2 bg-blue-700 text-white text-xs px-2 py-1 rounded-full font-bold shadow-lg">
                                                    Occupied
                                                </div>
                                            <?php endif; ?>
                                            
                                            <!-- Hover Effect -->
                                            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 rounded-xl transition-all duration-300"></div>
                                        </div>
                                    </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <?php else: ?>
                                    <div class="col-span-full text-center py-8">
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="bg-white rounded-lg shadow-md">
                    <div class="p-8 text-center">
                        <i class="fas fa-bed text-6xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500 text-lg">No rooms found.</p>
                        <p class="text-gray-400 text-sm mt-2">Please check if rooms are properly configured in the database.</p>
                        <div class="mt-4">
                            <a href="<?php echo e(route('rooms.index')); ?>" class="text-blue-600 hover:text-blue-800 underline">
                                <i class="fas fa-cog mr-1"></i>Manage Rooms
                            </a>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Room Selection Modal -->
    <div id="roomModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-800">Room Selected</h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Room Number</label>
                            <p id="selectedRoomNo" class="text-lg font-bold text-gray-900"></p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Room Type</label>
                            <p id="selectedRoomType" class="text-gray-900"></p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Status</label>
                            <p id="selectedRoomStatus" class="text-gray-900"></p>
                        </div>
                    </div>
                </div>
                <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                    <button onclick="closeRoomModal()" class="px-4 py-2 text-gray-600 hover:text-gray-800 transition-colors">
                        Close
                    </button>
                    <button id="editRoomBtn" onclick="editSelectedRoom()" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors hidden">
                        Edit Room
                    </button>
                    <button id="bookRoomBtn" onclick="bookSelectedRoom()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        CheckIn
                    </button>
                    <button id="checkOutBtn" onclick="checkOutRoom()" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors hidden">
                        Check Out
                    </button>
                </div>

            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    let selectedRoomId = null;
    let selectedRoomNo = null;
    let selectedRoomType = null;
    let selectedRoomStatus = null;
    let selectedBookingId = null;

    function selectRoom(roomId, roomNo, roomType, roomStatus, bookingId = null) {
        console.log('selectRoom called with:', { roomId, roomNo, roomType, roomStatus, bookingId });
        console.log('Booking ID type:', typeof bookingId);
        console.log('Booking ID value:', bookingId);
        
        selectedRoomId = roomId;
        selectedRoomNo = roomNo;
        selectedRoomType = roomType;
        selectedRoomStatus = roomStatus;
        selectedBookingId = bookingId;
        
        // Update modal content
        document.getElementById('selectedRoomNo').textContent = roomNo;
        document.getElementById('selectedRoomType').textContent = roomType;
        document.getElementById('selectedRoomStatus').textContent = roomStatus;
        
        // Show/hide buttons based on room status
        const bookBtn = document.getElementById('bookRoomBtn');
        const checkOutBtn = document.getElementById('checkOutBtn');
        const editRoomBtn = document.getElementById('editRoomBtn');
        
        if (roomStatus === 'Available') {
            bookBtn.style.display = 'block';
            bookBtn.textContent = 'Book This Room';
            checkOutBtn.style.display = 'none';
            editRoomBtn.style.display = 'none';
        } else if (roomStatus === 'Occupied') {
            bookBtn.style.display = 'block';
            bookBtn.textContent = 'View Booking';
            console.log('Occupied room - Booking ID:', bookingId);
            // Always show Check Out button for Occupied rooms, regardless of booking ID
            checkOutBtn.style.display = 'block';
            editRoomBtn.style.display = 'none';
            console.log('Check Out button will be shown for Occupied room');
        } else if (roomStatus === 'Maintenance') {
            bookBtn.style.display = 'none';
            checkOutBtn.style.display = 'none';
            editRoomBtn.style.display = 'block';
        } else {
            bookBtn.style.display = 'none';
            checkOutBtn.style.display = 'none';
            editRoomBtn.style.display = 'none';
        }
        
        // Show modal
        document.getElementById('roomModal').classList.remove('hidden');
        console.log('Modal should be visible now');
    }

    function closeRoomModal() {
        document.getElementById('roomModal').classList.add('hidden');
    }

    function bookSelectedRoom() {
        if (selectedRoomStatus === 'Available') {
            // Redirect to booking creation with room pre-selected
            window.location.href = `<?php echo e(route('bookings.create')); ?>?room=${selectedRoomId}`;
        } else if (selectedRoomStatus === 'Occupied') {
            // Redirect to booking details
            if (selectedBookingId) {
                window.location.href = `/bookings/${selectedBookingId}`;
            } else {
                window.location.href = `/rooms/${selectedRoomId}`;
            }
        }
    }

    function editSelectedRoom() {
        if (selectedRoomId) {
            // Redirect to room edit page
            window.location.href = `/rooms/${selectedRoomId}/edit`;
        }
    }

    function checkOutRoom() {
        if (selectedBookingId && selectedBookingId !== 'null' && selectedBookingId !== '') {
            if (confirm('Are you sure you want to check out this guest?')) {
                // Create a form to submit the check-out request
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `/bookings/${selectedBookingId}/check-out`;
                
                const csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = '_token';
                csrfToken.value = '<?php echo e(csrf_token()); ?>';
                
                const methodField = document.createElement('input');
                methodField.type = 'hidden';
                methodField.name = '_method';
                methodField.value = 'PATCH';
                
                form.appendChild(csrfToken);
                form.appendChild(methodField);
                document.body.appendChild(form);
                form.submit();
            }
        } else {
            // No booking ID - just update room status to Available
            if (confirm('No booking found for this room. Do you want to mark this room as Available?')) {
                // Create a form to update room status
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `/rooms/${selectedRoomId}/status`;
                
                const csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = '_token';
                csrfToken.value = '<?php echo e(csrf_token()); ?>';
                
                const methodField = document.createElement('input');
                methodField.type = 'hidden';
                methodField.name = '_method';
                methodField.value = 'PATCH';
                
                const statusField = document.createElement('input');
                statusField.type = 'hidden';
                statusField.name = 'room_status';
                statusField.value = 'Available';
                
                form.appendChild(csrfToken);
                form.appendChild(methodField);
                form.appendChild(statusField);
                document.body.appendChild(form);
                form.submit();
            }
        }
    }

    // Close modal when clicking outside
    document.getElementById('roomModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeRoomModal();
        }
    });

    // Close modal with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeRoomModal();
        }
    });

    // Debug: Check if modal exists when page loads
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('roomModal');
        
        // Debug: Check if room cards have onclick handlers
        const roomCards = document.querySelectorAll('.room-card');
        console.log('Found', roomCards.length, 'room cards');
        roomCards.forEach((card, index) => {
            console.log(`Room card ${index}:`, {
                onclick: card.onclick,
                hasOnclick: card.hasAttribute('onclick'),
                cursor: card.style.cursor || getComputedStyle(card).cursor
            });
        });
    });
</script>
<?php $__env->stopPush(); ?>

<?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/bookings/room-board.blade.php ENDPATH**/ ?>