@extends('layouts.app')
@section('content')

    @section('title', 'Rooms')


    <!-- Contact Hero Section -->
    <section class="experiences-hero pt-24">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">Rooms</h1>
            <p class="text-xl max-w-2xl mx-auto">Explore our comfortable and cozy rooms designed for your comfort and relaxation.</p>
        </div>
    </section>

    <!-- Rooms Section -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="section-title text-4xl font-bold text-gray-800">Our Accommodations</h2>
                <p class="text-xl text-gray-600 mt-6">Five spacious self-service rooms - clean, comfortable, and designed for independence</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @forelse($rooms as $room)
                <div class="room-card">
                    @if($room->images && count($room->images) > 0)
                        <img src="{{ \App\Models\Room::resolveImageUrl($room->images[0]) }}" alt="{{ $room->name }}" class="w-full h-64 object-cover">
                    @else
                        <img src="https://images.unsplash.com/photo-1582582621959-48d27397dc69?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="{{ $room->name }}" class="w-full h-64 object-cover">
                    @endif
                    <div class="p-6">
                        <h3 class="text-2xl font-bold text-gray-800 mb-2">{{ $room->name }}</h3>
                        <p class="text-gray-600 mb-4">{{ $room->description }}</p>
                        
                        @if($room->amenities && count($room->amenities) > 0)
                            <div class="mb-4 flex flex-wrap gap-2">
                                @php
                                    $amenityIcons = [
                                        'breakfast' => 'fa-utensils',
                                        'lunch' => 'fa-utensils',
                                        'dinner' => 'fa-utensils',
                                        'wifi' => 'fa-wifi',
                                        'ict' => 'fa-laptop',
                                        'parking' => 'fa-car',
                                        'air_conditioning' => 'fa-snowflake',
                                        'tv' => 'fa-tv',
                                        'balcony' => 'fa-home',
                                        'kitchen' => 'fa-kitchen-set',
                                        'bathroom' => 'fa-bath',
                                        'laundry' => 'fa-shirt',
                                        'room_service' => 'fa-bell',
                                        'security' => 'fa-shield',
                                    ];
                                    $amenityLabels = [
                                        'breakfast' => 'Breakfast',
                                        'lunch' => 'Lunch',
                                        'dinner' => 'Dinner',
                                        'wifi' => 'WiFi',
                                        'ict' => 'ICT',
                                        'parking' => 'Parking',
                                        'air_conditioning' => 'AC',
                                        'tv' => 'TV',
                                        'balcony' => 'Balcony',
                                        'kitchen' => 'Kitchen',
                                        'bathroom' => 'Bathroom',
                                        'laundry' => 'Laundry',
                                        'room_service' => 'Room Service',
                                        'security' => 'Security',
                                    ];
                                @endphp
                                @foreach(array_slice($room->amenities, 0, 6) as $amenity)
                                    <span class="inline-flex items-center gap-1 px-2 py-1 bg-red-50 text-red-900 rounded-full text-xs font-medium">
                                        <i class="fas {{ $amenityIcons[$amenity] ?? 'fa-check' }}"></i>
                                        {{ $amenityLabels[$amenity] ?? ucfirst(str_replace('_', ' ', $amenity)) }}
                                    </span>
                                @endforeach
                                @if(count($room->amenities) > 6)
                                    <span class="inline-flex items-center px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs">
                                        +{{ count($room->amenities) - 6 }} more
                                    </span>
                                @endif
                            </div>
                        @endif
                        
                        <div class="flex justify-between items-center">
                            <span class="text-2xl font-bold" style="color: var(--primary-color);">${{ number_format($room->price, 2) }}<small class="text-base text-gray-600">/night</small></span>
                            <button onclick="openRoomDetailsModal({{ $room->id }})" class="btn-primary px-6 py-2 rounded-lg text-sm font-medium">
                                <i class="fas fa-eye mr-2"></i>View Details
                            </button>
                        </div>
                    </div>
                </div>
                @empty
                <div class="col-span-3 text-center py-12">
                    <p class="text-xl text-gray-600">No rooms available at the moment. Please check back later.</p>
                </div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- Room Details Modal -->
    <div id="roomDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4 overflow-y-auto">
        <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full my-8">
            <div class="sticky top-0 bg-white border-b px-6 py-4 flex items-center justify-between z-10 rounded-t-2xl">
                <h2 class="text-2xl font-bold" style="color: var(--primary-color);">Room Details</h2>
                <button onclick="window.closeRoomDetailsModal()" class="text-gray-500 hover:text-gray-700 text-2xl">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div id="roomDetailsBody" class="p-6"></div>
            <div class="px-6 pb-6 pt-2 flex gap-4">
                <button type="button" onclick="window.closeRoomDetailsModal()" class="flex-1 px-6 py-3 border-2 border-gray-300 rounded-lg font-medium text-gray-700 hover:bg-gray-50">
                    Close
                </button>
                <button type="button" id="roomDetailsBookBtn" class="flex-1 btn-primary px-6 py-3 rounded-lg font-medium">
                    <i class="fas fa-calendar-check mr-2"></i>Proceed to Booking
                </button>
            </div>
        </div>
    </div>

    <!-- Room Image Lightbox -->
    <div id="roomImageLightbox" class="fixed inset-0 bg-black bg-opacity-90 hidden items-center justify-center p-4" style="z-index: 9999;">
        <button type="button" onclick="window.closeRoomImageLightbox()" class="absolute top-4 right-6 text-white text-4xl leading-none">&times;</button>
        <button type="button" onclick="window.prevRoomImage()" class="absolute top-1/2 transform -translate-y-1/2 left-4 md:left-8 text-white text-3xl w-12 h-12 rounded-full" style="background: rgba(0, 0, 0, 0.45);">&#10094;</button>
        <div class="max-w-5xl w-full flex flex-col items-center gap-4">
            <img id="roomLightboxImage" src="" alt="Room image" class="w-auto max-w-full object-contain transition-transform duration-200 rounded-2xl border border-white" style="transform: scale(1); max-height: 58vh; max-width: 88vw;">
            <div class="flex items-center gap-3">
                <button type="button" onclick="window.zoomOutRoomImage()" class="px-3 py-2 rounded-lg bg-white text-gray-800 font-semibold">-</button>
                <span id="roomImageZoomLabel" class="text-white text-sm">100%</span>
                <button type="button" onclick="window.zoomInRoomImage()" class="px-3 py-2 rounded-lg bg-white text-gray-800 font-semibold">+</button>
            </div>
        </div>
        <button type="button" onclick="window.nextRoomImage()" class="absolute top-1/2 transform -translate-y-1/2 right-4 md:right-8 text-white text-3xl w-12 h-12 rounded-full" style="background: rgba(0, 0, 0, 0.45);">&#10095;</button>
    </div>

    <!-- Booking Modal -->
    <div id="bookingModal" class="fixed inset-0 bg-black bg-opacity-60 hidden flex items-center justify-center p-4 overflow-y-auto" style="z-index: 100000;">
        <div class="bg-white rounded-2xl shadow-2xl max-w-5xl w-full my-8">
            <div class="sticky top-0 bg-white border-b px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between z-10 rounded-t-2xl">
                <h2 class="text-lg sm:text-2xl font-bold" style="color: var(--primary-color);">Booking Information</h2>
                <button onclick="window.closeBookingModal()" class="text-gray-500 hover:text-gray-700 text-2xl">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div id="bookingModalContent" class="px-4 sm:px-6 py-4 sm:py-6 max-h-[calc(90vh-80px)] overflow-y-auto" style="-webkit-overflow-scrolling: touch;">
                <form action="{{ route('booking.store') }}" method="POST" class="space-y-4 sm:space-y-6 pb-2" id="bookingForm">
                    @csrf
                    <input type="hidden" name="room_id" id="modal_room_id" required>
                    
                    <!-- Selected Room Display -->
                    <div id="modalSelectedRoom" class="bg-blue-50 border border-blue-200 rounded-lg p-3 sm:p-4 mb-4 sm:mb-6">
                        <div class="flex items-start sm:items-center">
                            <i class="fas fa-check-circle text-blue-600 mr-3 text-xl"></i>
                            <div class="min-w-0">
                                <p class="text-blue-800 font-semibold" id="modalRoomName">Room Selected</p>
                                <p class="text-blue-600 text-sm" id="modalRoomPrice"></p>
                            </div>
                        </div>
                    </div>

                    <!-- Three Column Layout -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                        <!-- Full Name -->
                        <div>
                            <label for="modal_full_name" class="block text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                                Full Name <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="full_name" id="modal_full_name" required
                                value="{{ old('full_name') }}"
                                class="form-input w-full @error('full_name') border-red-500 @enderror"
                                placeholder="Enter your full name">
                            @error('full_name')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div>
                            <label for="modal_email" class="block text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                                Email Address <span class="text-red-500">*</span>
                            </label>
                            <input type="email" name="email" id="modal_email" required
                                value="{{ old('email') }}"
                                class="form-input w-full @error('email') border-red-500 @enderror"
                                placeholder="your.email@example.com">
                            @error('email')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Phone -->
                        <div>
                            <label for="modal_phone" class="block text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                                Phone Number <span class="text-red-500">*</span>
                            </label>
                            <input type="tel" name="phone" id="modal_phone" required
                                value="{{ old('phone') }}"
                                class="form-input w-full @error('phone') border-red-500 @enderror"
                                placeholder="+255 123 456 789">
                            @error('phone')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Location, Check-in Date, and Check-out Date (Three Columns) -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                        <!-- Location -->
                        <div>
                            <label for="modal_location" class="block text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                                Location (Where are you from?) <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="location" id="modal_location" required
                                value="{{ old('location') }}"
                                class="form-input w-full @error('location') border-red-500 @enderror"
                                placeholder="City, Country">
                            @error('location')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Check-in Date -->
                        <div>
                            <label for="modal_check_in" class="block text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                                Check-in Date
                            </label>
                            <input type="date" name="check_in" id="modal_check_in"
                                value="{{ old('check_in') }}"
                                class="form-input w-full @error('check_in') border-red-500 @enderror"
                                min="{{ date('Y-m-d') }}">
                            @error('check_in')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Check-out Date -->
                        <div>
                            <label for="modal_check_out" class="block text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                                Check-out Date
                            </label>
                            <input type="date" name="check_out" id="modal_check_out"
                                value="{{ old('check_out') }}"
                                class="form-input w-full @error('check_out') border-red-500 @enderror"
                                min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                            @error('check_out')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Special Requests (Full Width) -->
                    <div>
                        <label for="modal_special_requests" class="block text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                            Special Requests
                        </label>
                        <textarea name="special_requests" id="modal_special_requests" rows="4"
                            class="form-input form-textarea w-full @error('special_requests') border-red-500 @enderror"
                            placeholder="Any special requests or additional information...">{{ old('special_requests') }}</textarea>
                        @error('special_requests')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Submit Button -->
                    <div class="pt-2 sm:pt-4 flex flex-col sm:flex-row gap-3 sm:gap-4">
                        <button type="button" onclick="window.closeBookingModal()" class="w-full sm:flex-1 px-5 sm:px-6 py-3 border-2 border-gray-300 rounded-lg font-medium text-gray-700 hover:bg-gray-50">
                            Cancel
                        </button>
                        <button type="submit" class="w-full sm:flex-1 btn-primary px-5 sm:px-6 py-3 rounded-lg font-medium text-center">
                            <i class="fas fa-calendar-check mr-2"></i>
                            Submit Booking
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // Room data from server
        @php
            $roomsArray = $rooms->map(function($room) {
                return [
                    'id' => $room->id,
                    'name' => $room->name,
                    'price' => $room->price,
                    'room_number' => $room->room_number,
                    'room_category' => $room->room_category,
                    'description' => $room->description,
                    'amenities' => $room->amenities ?? [],
                    'images' => $room->images ?? [],
                ];
            })->keyBy('id')->toArray();
        @endphp
        const roomsData = @json($roomsArray);

        const amenityLabels = {
            breakfast: 'Breakfast', lunch: 'Lunch', dinner: 'Dinner', wifi: 'WiFi', ict: 'ICT',
            parking: 'Parking', air_conditioning: 'Air Conditioning', tv: 'TV', balcony: 'Balcony',
            kitchen: 'Kitchen', bathroom: 'Private Bathroom', laundry: 'Laundry', room_service: 'Room Service',
            security: 'Security'
        };
        let activeRoomImages = [];
        let activeRoomImageIndex = 0;
        let roomImageZoom = 1;

        function resolveRoomImageUrl(path) {
            if (!path) return '';
            if (path.startsWith('http://') || path.startsWith('https://')) return path;
            if (path.startsWith('/')) return path;
            if (path.startsWith('uploads/') || path.startsWith('storage/')) return `/${path}`;
            return `/storage/${path}`;
        }

        window.openRoomDetailsModal = function(roomId) {
            const room = roomsData[roomId];
            if (!room) return;

            const images = (room.images || []).slice(0, 4);
            const amenities = (room.amenities || []).slice(0, 8);
            const imagesHtml = images.length
                ? `<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-5">${images.map((image, index) => `<button type="button" onclick="window.openRoomImageLightbox(${index}); event.stopPropagation();" class="block w-full"><img src="${resolveRoomImageUrl(image)}" alt="${room.name}" class="w-full h-28 object-cover rounded-lg border border-gray-200 cursor-zoom-in hover:opacity-90"></button>`).join('')}</div>`
                : '';
            const amenitiesHtml = amenities.length
                ? `<div class="flex flex-wrap gap-2 mt-2">${amenities.map(item => `<span class="inline-flex items-center px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">${amenityLabels[item] || item.replaceAll('_', ' ')}</span>`).join('')}</div>`
                : '<p class="text-sm text-gray-500 mt-2">No amenities listed.</p>';

            document.getElementById('roomDetailsBody').innerHTML = `
                ${imagesHtml}
                <h3 class="text-2xl font-bold text-gray-800">${room.name}${room.room_number ? ` <span class="text-sm text-gray-500">#${room.room_number}</span>` : ''}</h3>
                <p class="text-gray-500 text-sm mt-1">${room.room_category ? room.room_category + ' room' : 'Room'}</p>
                <p class="text-gray-600 mt-3">${room.description || 'No description available.'}</p>
                <div class="mt-3">
                    <h4 class="font-semibold text-gray-800">Amenities</h4>
                    ${amenitiesHtml}
                </div>
                <div class="mt-4 text-right">
                    <p class="text-2xl font-bold" style="color: var(--primary-color);">$${parseFloat(room.price).toFixed(2)}</p>
                    <p class="text-xs text-gray-500">per night</p>
                </div>
            `;

            document.getElementById('roomDetailsBookBtn').onclick = function() {
                window.closeRoomDetailsModal();
                window.openBookingModal(roomId);
            };

            activeRoomImages = images.map(image => resolveRoomImageUrl(image));
            activeRoomImageIndex = 0;
            document.getElementById('roomDetailsModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        };

        window.closeRoomDetailsModal = function() {
            const detailsModal = document.getElementById('roomDetailsModal');
            if (detailsModal) detailsModal.classList.add('hidden');
            const bookingModal = document.getElementById('bookingModal');
            if (!bookingModal || bookingModal.classList.contains('hidden')) {
                document.body.style.overflow = 'auto';
            }
        };

        function renderRoomLightboxImage() {
            const imageEl = document.getElementById('roomLightboxImage');
            const zoomLabel = document.getElementById('roomImageZoomLabel');
            if (!imageEl || !activeRoomImages.length) return;
            imageEl.src = activeRoomImages[activeRoomImageIndex];
            imageEl.style.transform = `scale(${roomImageZoom})`;
            if (zoomLabel) zoomLabel.textContent = `${Math.round(roomImageZoom * 100)}%`;
        }

        window.openRoomImageLightbox = function(index) {
            if (!activeRoomImages.length) return;
            activeRoomImageIndex = index >= 0 ? index : 0;
            roomImageZoom = 1;
            renderRoomLightboxImage();
            const lightbox = document.getElementById('roomImageLightbox');
            if (lightbox) lightbox.classList.remove('hidden');
            if (lightbox) lightbox.classList.add('flex');
        };

        window.closeRoomImageLightbox = function() {
            const lightbox = document.getElementById('roomImageLightbox');
            if (!lightbox) return;
            lightbox.classList.add('hidden');
            lightbox.classList.remove('flex');
        };

        window.nextRoomImage = function() {
            if (!activeRoomImages.length) return;
            activeRoomImageIndex = (activeRoomImageIndex + 1) % activeRoomImages.length;
            renderRoomLightboxImage();
        };

        window.prevRoomImage = function() {
            if (!activeRoomImages.length) return;
            activeRoomImageIndex = (activeRoomImageIndex - 1 + activeRoomImages.length) % activeRoomImages.length;
            renderRoomLightboxImage();
        };

        window.zoomInRoomImage = function() {
            roomImageZoom = Math.min(roomImageZoom + 0.2, 3);
            renderRoomLightboxImage();
        };

        window.zoomOutRoomImage = function() {
            roomImageZoom = Math.max(roomImageZoom - 0.2, 0.6);
            renderRoomLightboxImage();
        };
        
        // Function to open booking modal
        window.openBookingModal = function(roomId) {
            const room = roomsData[roomId];
            if (!room) {
                console.error('Room not found:', roomId);
                return;
            }
            
            // Set room ID in form
            const roomIdInput = document.getElementById('modal_room_id');
            if (!roomIdInput) {
                console.error('Modal room ID input not found');
                return;
            }
            roomIdInput.value = roomId;
            
            // Update room display in modal
            const roomNameEl = document.getElementById('modalRoomName');
            const roomPriceEl = document.getElementById('modalRoomPrice');
            if (roomNameEl) {
                roomNameEl.textContent = room.name + (room.room_number ? ' #' + room.room_number : '');
            }
            if (roomPriceEl) {
                roomPriceEl.textContent = '$' + parseFloat(room.price).toFixed(2) + '/night';
            }
            
            // Show modal
            const modal = document.getElementById('bookingModal');
            if (modal) {
                modal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
                const modalContent = document.getElementById('bookingModalContent');
                const firstField = document.getElementById('modal_full_name');

                requestAnimationFrame(() => {
                    modal.scrollTop = 0;
                    if (modalContent) modalContent.scrollTop = 0;
                    if (firstField) firstField.scrollIntoView({ block: 'start', behavior: 'auto' });
                });

                const detailsModal = document.getElementById('roomDetailsModal');
                if (detailsModal) {
                    detailsModal.classList.add('hidden');
                }
            } else {
                console.error('Booking modal not found');
            }
        };
        
        // Function to close booking modal
        window.closeBookingModal = function() {
            const modal = document.getElementById('bookingModal');
            if (modal) {
                modal.classList.add('hidden');
                document.body.style.overflow = 'auto';
            }
        };
        
        // Close modal on overlay click and Escape key
        document.addEventListener('DOMContentLoaded', function() {
            const imageLightbox = document.getElementById('roomImageLightbox');
            if (imageLightbox) {
                imageLightbox.addEventListener('click', function(e) {
                    if (e.target === this) {
                        window.closeRoomImageLightbox();
                    }
                });
            }

            const detailsModal = document.getElementById('roomDetailsModal');
            if (detailsModal) {
                detailsModal.addEventListener('click', function(e) {
                    if (e.target === this) {
                        window.closeRoomDetailsModal();
                    }
                });
            }

            const modal = document.getElementById('bookingModal');
            if (modal) {
                modal.addEventListener('click', function(e) {
                    if (e.target === this) {
                        window.closeBookingModal();
                    }
                });
            }
            
            // Close modal on Escape key
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    const imageLightbox = document.getElementById('roomImageLightbox');
                    if (imageLightbox && !imageLightbox.classList.contains('hidden')) {
                        window.closeRoomImageLightbox();
                    }

                    const detailsModal = document.getElementById('roomDetailsModal');
                    if (detailsModal && !detailsModal.classList.contains('hidden')) {
                        window.closeRoomDetailsModal();
                    }

                    const modal = document.getElementById('bookingModal');
                    if (modal && !modal.classList.contains('hidden')) {
                        window.closeBookingModal();
                    }
                }

                if (e.key === 'ArrowRight') {
                    const imageLightbox = document.getElementById('roomImageLightbox');
                    if (imageLightbox && !imageLightbox.classList.contains('hidden')) {
                        window.nextRoomImage();
                    }
                }

                if (e.key === 'ArrowLeft') {
                    const imageLightbox = document.getElementById('roomImageLightbox');
                    if (imageLightbox && !imageLightbox.classList.contains('hidden')) {
                        window.prevRoomImage();
                    }
                }
            });
            
            // Set minimum check-out date based on check-in date
            const modalCheckIn = document.getElementById('modal_check_in');
            if (modalCheckIn) {
                modalCheckIn.addEventListener('change', function() {
                    const checkInDate = this.value;
                    const checkOutInput = document.getElementById('modal_check_out');
                    if (checkOutInput && checkInDate) {
                        const minDate = new Date(checkInDate);
                        minDate.setDate(minDate.getDate() + 1);
                        checkOutInput.min = minDate.toISOString().split('T')[0];
                        if (checkOutInput.value && checkOutInput.value <= checkInDate) {
                            checkOutInput.value = '';
                        }
                    }
                });
            }
        });
    </script>
@endsection