@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-3xl mx-auto">
        <h1 class="text-3xl font-bold mb-8" style="color: var(--primary-color);">Edit Room</h1>

        <div class="bg-white rounded-lg shadow-lg p-8">
            <form action="{{ route('admin.rooms.update', $room) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="mb-6">
                    <label for="name" class="block text-sm font-semibold text-gray-700 mb-2" id="edit_name_label">Room Name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" id="name" required value="{{ old('name', $room->name) }}"
                        class="form-input w-full @error('name') border-red-500 @enderror" placeholder="e.g., Mountain View Room">
                    @error('name')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label for="room_number" class="block text-sm font-semibold text-gray-700 mb-2" id="edit_number_label">Room Number</label>
                    <input type="text" name="room_number" id="room_number" value="{{ old('room_number', $room->room_number) }}"
                        class="form-input w-full @error('room_number') border-red-500 @enderror" placeholder="e.g., 101, 202, A1">
                    @error('room_number')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                    <p class="text-sm text-gray-600 mt-1" id="edit_number_help">
                        <i class="fas fa-info-circle"></i> Optional: Room number will be displayed with the room name.
                    </p>
                </div>

                <div class="mb-6">
                    <label for="room_category" class="block text-sm font-semibold text-gray-700 mb-2">Room Category</label>
                    <select name="room_category" id="room_category" class="form-input w-full @error('room_category') border-red-500 @enderror">
                        <option value="">-- Select Category --</option>
                        <option value="single" {{ old('room_category', $room->room_category) == 'single' ? 'selected' : '' }}>Single</option>
                        <option value="double" {{ old('room_category', $room->room_category) == 'double' ? 'selected' : '' }}>Double</option>
                        <option value="apartment" {{ old('room_category', $room->room_category) == 'apartment' ? 'selected' : '' }}>Apartment</option>
                        <option value="conference" {{ old('room_category', $room->room_category) == 'conference' ? 'selected' : '' }}>Conference</option>
                    </select>
                    @error('room_category')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                    <p class="text-sm text-gray-600 mt-1">
                        <i class="fas fa-info-circle"></i> Select accommodation type or conference facility.
                    </p>
                </div>

                <div class="mb-6">
                    <label for="description" class="block text-sm font-semibold text-gray-700 mb-2" id="edit_description_label">Description <span class="text-red-500">*</span></label>
                    <textarea name="description" id="description" rows="4" required
                        class="form-input form-textarea w-full @error('description') border-red-500 @enderror">{{ old('description', $room->description) }}</textarea>
                    @error('description')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label for="price" class="block text-sm font-semibold text-gray-700 mb-2" id="edit_price_label">Price per Night <span class="text-red-500">*</span></label>
                    <input type="number" name="price" id="price" step="0.01" min="0" required value="{{ old('price', $room->price) }}"
                        class="form-input w-full @error('price') border-red-500 @enderror">
                    @error('price')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6" id="edit_conference_guidance" style="display:none; background: #fff8e7; border: 1px solid #fcd34d; padding: 12px; border-radius: 8px;">
                    <p class="text-sm font-semibold" style="color: #92400e;">
                        <i class="fas fa-lightbulb"></i> Conference setup reminder
                    </p>
                    <p class="text-xs mt-2" style="color: #78350f;">
                        Keep capacity, seating type, projector/sound setup, and booking terms clear in description for easier customer booking.
                    </p>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Room Images
                        <span style="font-weight: normal; color: #6b7280; font-size: 12px;">(Minimum 1 image required)</span>
                    </label>
                    
                    @if($room->images && count($room->images) > 0)
                        <div class="mb-4">
                            <p class="text-sm text-gray-600 mb-2">Current Images:</p>
                            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 15px;">
                                @foreach($room->images as $index => $image)
                                    <div style="position: relative; border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
                                        <img src="{{ \App\Models\Room::resolveImageUrl($image) }}" alt="Room Image {{ $index + 1 }}" 
                                             style="width: 100%; height: 100px; object-fit: cover; cursor: zoom-in;"
                                             onclick="openRoomEditImageViewer({{ $index }})">
                                        <label style="position: absolute; top: 5px; left: 5px; background: rgba(255,255,255,0.9); padding: 2px 6px; border-radius: 4px; font-size: 10px; cursor: pointer;">
                                            <input type="checkbox" name="existing_images[]" value="{{ $image }}" checked>
                                            Keep
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                    
                    <label for="images" class="block text-sm font-semibold text-gray-700 mb-2">Add New Images (optional)</label>
                    <input type="file" name="images[]" id="images" multiple accept="image/*"
                        class="form-input w-full @error('images') border-red-500 @enderror"
                        onchange="previewNewImages(this)">
                    @error('images')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                    @error('images.*')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                    <div id="newImagePreviewContainer" class="admin-image-preview-container"></div>
                    <p class="text-sm text-gray-600 mt-2">
                        <i class="fas fa-info-circle"></i> You can upload multiple new images as needed.
                    </p>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Room Amenities</label>
                    <div class="admin-amenities-grid">
                        @php
                            $amenities = [
                                'breakfast' => ['icon' => 'fa-utensils', 'label' => 'Breakfast'],
                                'lunch' => ['icon' => 'fa-utensils', 'label' => 'Lunch'],
                                'dinner' => ['icon' => 'fa-utensils', 'label' => 'Dinner'],
                                'wifi' => ['icon' => 'fa-wifi', 'label' => 'Free WiFi'],
                                'ict' => ['icon' => 'fa-laptop', 'label' => 'ICT Facilities'],
                                'parking' => ['icon' => 'fa-car', 'label' => 'Free Parking'],
                                'air_conditioning' => ['icon' => 'fa-snowflake', 'label' => 'Air Conditioning'],
                                'tv' => ['icon' => 'fa-tv', 'label' => 'TV'],
                                'balcony' => ['icon' => 'fa-home', 'label' => 'Balcony'],
                                'kitchen' => ['icon' => 'fa-kitchen-set', 'label' => 'Kitchen'],
                                'bathroom' => ['icon' => 'fa-bath', 'label' => 'Private Bathroom'],
                                'laundry' => ['icon' => 'fa-shirt', 'label' => 'Laundry Service'],
                                'room_service' => ['icon' => 'fa-bell', 'label' => 'Room Service'],
                                'security' => ['icon' => 'fa-shield', 'label' => '24/7 Security'],
                            ];
                            $roomAmenities = $room->amenities ?? [];
                        @endphp
                        @foreach($amenities as $key => $amenity)
                            <label class="admin-amenity-checkbox">
                                <input type="checkbox" name="amenities[]" value="{{ $key }}" 
                                    {{ (old('amenities') && in_array($key, old('amenities'))) || in_array($key, $roomAmenities) ? 'checked' : '' }}>
                                <span class="admin-amenity-icon"><i class="fas {{ $amenity['icon'] }}"></i></span>
                                <span class="admin-amenity-label">{{ $amenity['label'] }}</span>
                            </label>
                        @endforeach
                    </div>
                    @error('amenities')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                    <p class="text-sm text-gray-600 mt-2">
                        <i class="fas fa-info-circle"></i> Select amenities included with this room to attract customers.
                    </p>
                </div>

                <div class="mb-6">
                    <p class="text-sm text-gray-600">
                        <strong>Current Status:</strong> 
                        <span class="px-2 py-1 rounded
                            @if($room->status === 'approved') bg-green-100 text-green-800
                            @elseif($room->status === 'pending') bg-yellow-100 text-yellow-800
                            @else bg-red-100 text-red-800
                            @endif">
                            {{ ucfirst($room->status) }}
                        </span>
                    </p>
                    @if($room->status === 'approved' && !auth()->user()->isSuperAdmin())
                        <p class="text-sm text-yellow-600 mt-2">
                            <i class="fas fa-info-circle"></i> Editing an approved room will require re-approval.
                        </p>
                    @endif
                </div>

                <div class="flex justify-end space-x-4">
                    <a href="{{ route('admin.rooms.index') }}" class="px-6 py-3 border-2 rounded-lg font-medium transition"
                        style="border-color: var(--primary-color); color: var(--primary-color);">
                        Cancel
                    </a>
                    <button type="submit" class="btn-primary px-6 py-3">
                        <i class="fas fa-save mr-2"></i>Update Room
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="roomEditImageViewerModal" class="fixed inset-0 bg-black bg-opacity-90 hidden items-center justify-center p-4" style="z-index: 9999;">
    <button type="button" onclick="closeRoomEditImageViewer()" class="absolute top-4 right-6 text-white text-4xl leading-none">&times;</button>
    <button type="button" onclick="prevRoomEditImage()" 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="roomEditViewerImage" 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="zoomOutRoomEditImage()" class="px-3 py-2 rounded-lg bg-white text-gray-800 font-semibold">-</button>
            <span id="roomEditZoomLabel" class="text-white text-sm">100%</span>
            <button type="button" onclick="zoomInRoomEditImage()" class="px-3 py-2 rounded-lg bg-white text-gray-800 font-semibold">+</button>
        </div>
    </div>
    <button type="button" onclick="nextRoomEditImage()" 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>

<script>
    const roomEditImages = @json(collect($room->images ?? [])->map(fn($image) => \App\Models\Room::resolveImageUrl($image))->values()->all());
    let roomEditImageIndex = 0;
    let roomEditImageZoom = 1;

    function updateEditCategoryUI() {
        const category = document.getElementById('room_category')?.value;
        const isConference = category === 'conference';

        const nameLabel = document.getElementById('edit_name_label');
        const numberLabel = document.getElementById('edit_number_label');
        const numberHelp = document.getElementById('edit_number_help');
        const descLabel = document.getElementById('edit_description_label');
        const priceLabel = document.getElementById('edit_price_label');
        const guidance = document.getElementById('edit_conference_guidance');

        if (!nameLabel || !numberLabel || !descLabel || !priceLabel || !guidance) return;

        nameLabel.innerHTML = isConference ? 'Conference Name <span class="text-red-500">*</span>' : 'Room Name <span class="text-red-500">*</span>';
        numberLabel.textContent = isConference ? 'Hall Code' : 'Room Number';
        descLabel.innerHTML = isConference ? 'Conference Details <span class="text-red-500">*</span>' : 'Description <span class="text-red-500">*</span>';
        priceLabel.innerHTML = isConference ? 'Price per Session/Day <span class="text-red-500">*</span>' : 'Price per Night <span class="text-red-500">*</span>';
        guidance.style.display = isConference ? 'block' : 'none';

        if (numberHelp) {
            numberHelp.innerHTML = isConference
                ? '<i class="fas fa-info-circle"></i> Optional: Use a hall code like CONF-01.'
                : '<i class="fas fa-info-circle"></i> Optional: Room number will be displayed with the room name.';
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        updateEditCategoryUI();
        document.getElementById('room_category')?.addEventListener('change', updateEditCategoryUI);
    });

    function previewNewImages(input) {
        const container = document.getElementById('newImagePreviewContainer');
        container.innerHTML = '';
        
        if (input.files && input.files.length > 0) {
            const fileCount = input.files.length;
            const previewGrid = document.createElement('div');
            previewGrid.style.display = 'grid';
            previewGrid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(100px, 1fr))';
            previewGrid.style.gap = '10px';
            previewGrid.style.marginTop = '10px';
            
            for (let i = 0; i < fileCount; i++) {
                const file = input.files[i];
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    const imgDiv = document.createElement('div');
                    imgDiv.style.position = 'relative';
                    imgDiv.style.borderRadius = '8px';
                    imgDiv.style.overflow = 'hidden';
                    imgDiv.style.border = '2px solid #e5e7eb';
                    
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.width = '100%';
                    img.style.height = '100px';
                    img.style.objectFit = 'cover';
                    
                    const badge = document.createElement('div');
                    badge.style.position = 'absolute';
                    badge.style.top = '5px';
                    badge.style.right = '5px';
                    badge.style.background = 'rgba(0, 0, 0, 0.7)';
                    badge.style.color = 'white';
                    badge.style.padding = '2px 6px';
                    badge.style.borderRadius = '4px';
                    badge.style.fontSize = '10px';
                    badge.textContent = 'New ' + (i + 1);
                    
                    imgDiv.appendChild(img);
                    imgDiv.appendChild(badge);
                    previewGrid.appendChild(imgDiv);
                };
                
                reader.readAsDataURL(file);
            }
            
            container.appendChild(previewGrid);
        }
    }

    function renderRoomEditImage() {
        const img = document.getElementById('roomEditViewerImage');
        const label = document.getElementById('roomEditZoomLabel');
        if (!img || !roomEditImages.length) return;
        img.src = roomEditImages[roomEditImageIndex];
        img.style.transform = `scale(${roomEditImageZoom})`;
        if (label) label.textContent = `${Math.round(roomEditImageZoom * 100)}%`;
    }

    function openRoomEditImageViewer(index) {
        if (!roomEditImages.length) return;
        roomEditImageIndex = index >= 0 ? index : 0;
        roomEditImageZoom = 1;
        renderRoomEditImage();
        const modal = document.getElementById('roomEditImageViewerModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeRoomEditImageViewer() {
        const modal = document.getElementById('roomEditImageViewerModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    function nextRoomEditImage() {
        if (!roomEditImages.length) return;
        roomEditImageIndex = (roomEditImageIndex + 1) % roomEditImages.length;
        renderRoomEditImage();
    }

    function prevRoomEditImage() {
        if (!roomEditImages.length) return;
        roomEditImageIndex = (roomEditImageIndex - 1 + roomEditImages.length) % roomEditImages.length;
        renderRoomEditImage();
    }

    function zoomInRoomEditImage() {
        roomEditImageZoom = Math.min(roomEditImageZoom + 0.2, 3);
        renderRoomEditImage();
    }

    function zoomOutRoomEditImage() {
        roomEditImageZoom = Math.max(roomEditImageZoom - 0.2, 0.6);
        renderRoomEditImage();
    }

    document.addEventListener('keydown', function(e) {
        const modal = document.getElementById('roomEditImageViewerModal');
        if (!modal || modal.classList.contains('hidden')) return;
        if (e.key === 'Escape') closeRoomEditImageViewer();
        if (e.key === 'ArrowRight') nextRoomEditImage();
        if (e.key === 'ArrowLeft') prevRoomEditImage();
    });
</script>
@endsection