@extends('layouts.admin')

@section('title', 'Room Management')

@section('content')
<div class="admin-page-header">
    <div>
        <h1 class="admin-page-title">Room Management</h1>
        <p class="admin-page-subtitle">Manage and approve room listings</p>
    </div>
    <button type="button" class="admin-btn admin-btn-primary" onclick="openRoomModal()">
        <i class="fas fa-plus mr-2"></i>Add New Room
    </button>
</div>

<div class="admin-card">
    <div class="admin-table">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th style="width: 120px;">Description</th>
                    <th>Price</th>
                    <th>Status</th>
                    <th>Category</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($rooms as $room)
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">
                            {{ $room->name }}@if($room->room_number) <span style="color: var(--admin-primary); font-weight: 600;">(Room #{{ $room->room_number }})</span>@endif
                        </div>
                    </td>
                    <td class="px-6 py-4" style="width: 120px; max-width: 120px;">
                        <div class="text-sm text-gray-900" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="{{ $room->description }}">{{ \Illuminate\Support\Str::limit($room->description, 30) }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">${{ number_format($room->price, 2) }}</div>
                    </td>
                    <td>
                        @if($room->status === 'approved')
                            <span class="admin-badge admin-badge-success">Approved</span>
                        @elseif($room->status === 'pending')
                            <span class="admin-badge admin-badge-warning">Pending</span>
                        @else
                            <span class="admin-badge admin-badge-danger">Rejected</span>
                        @endif
                    </td>
                    <td>
                        @if($room->room_category)
                            <span class="admin-badge admin-badge-primary" style="text-transform: capitalize;">
                                {{ ucfirst($room->room_category) }}
                            </span>
                        @else
                            <span style="color: #9ca3af;">-</span>
                        @endif
                    </td>
                    <td>
                        <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
                            <button type="button" 
                                    onclick="viewRoom({{ $room->id }})"
                                    class="admin-action-btn admin-action-view" 
                                    title="View Room"
                                    style="padding: 8px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; border: none; cursor: pointer; background: var(--admin-info); color: white;">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button type="button" 
                                    onclick="editRoom({{ $room->id }})"
                                    class="admin-action-btn admin-action-edit" 
                                    title="Edit Room"
                                    style="padding: 8px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; border: none; cursor: pointer; background: #6b7280; color: white;">
                                <i class="fas fa-edit"></i>
                            </button>
                            @if(auth()->user()->canApprove() && $room->status === 'pending')
                                <form action="{{ route('admin.rooms.approve', $room) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" 
                                            class="admin-action-btn admin-action-approve" 
                                            title="Approve Room"
                                            style="padding: 8px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; border: none; cursor: pointer;">
                                        <i class="fas fa-check"></i>
                                    </button>
                                </form>
                                <form action="{{ route('admin.rooms.reject', $room) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" 
                                            class="admin-action-btn admin-action-reject" 
                                            title="Reject Room"
                                            style="padding: 8px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; border: none; cursor: pointer;">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </form>
                            @endif
                            <form action="{{ route('admin.rooms.destroy', $room) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this room?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" 
                                        class="admin-action-btn admin-action-delete" 
                                        title="Delete Room"
                                        style="padding: 8px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; border: none; cursor: pointer;">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" style="text-align: center; padding: 2rem; color: #6b7280;">
                        No rooms found. <a href="{{ route('admin.rooms.create') }}" style="color: var(--admin-primary);">Create one now</a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    <div style="display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem; padding: 1rem;">
        {{-- Previous Page Link --}}
        @if ($rooms->onFirstPage())
            <button disabled style="padding: 10px 15px; border: 1px solid #e5e7eb; background: #f3f4f6; color: #9ca3af; border-radius: 6px; cursor: not-allowed; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s;">
                <i class="fas fa-chevron-left"></i>
            </button>
        @else
            <a href="{{ $rooms->previousPageUrl() }}" style="padding: 10px 15px; border: 1px solid var(--admin-primary); background: var(--admin-primary); color: white; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; text-decoration: none;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
                <i class="fas fa-chevron-left"></i>
            </a>
        @endif

        {{-- Page Info --}}
        <span style="color: #6b7280; font-size: 14px; padding: 0 1rem;">
            Showing {{ $rooms->firstItem() ?? 0 }}-{{ $rooms->lastItem() ?? 0 }} of {{ $rooms->total() }} {{ $rooms->total() == 1 ? 'room' : 'rooms' }}
        </span>

        {{-- Next Page Link --}}
        @if ($rooms->hasMorePages())
            <a href="{{ $rooms->nextPageUrl() }}" style="padding: 10px 15px; border: 1px solid var(--admin-primary); background: var(--admin-primary); color: white; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; text-decoration: none;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
                <i class="fas fa-chevron-right"></i>
            </a>
        @else
            <button disabled style="padding: 10px 15px; border: 1px solid #e5e7eb; background: #f3f4f6; color: #9ca3af; border-radius: 6px; cursor: not-allowed; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s;">
                <i class="fas fa-chevron-right"></i>
            </button>
        @endif
    </div>
</div>

<!-- View Room Modal -->
<div id="viewRoomModal" class="admin-modal">
    <div class="admin-modal-content" style="max-width: 800px;">
        <div class="admin-modal-header">
            <h2 class="admin-modal-title">Room Details</h2>
            <button type="button" class="admin-modal-close" onclick="closeViewRoomModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="admin-modal-body" id="viewRoomContent">
            <div style="text-align: center; padding: 2rem;">
                <i class="fas fa-spinner fa-spin" style="font-size: 32px; color: var(--admin-primary);"></i>
                <p style="margin-top: 1rem; color: #6b7280;">Loading room details...</p>
            </div>
        </div>
    </div>
</div>

<!-- Edit Room Modal -->
<div id="editRoomModal" class="admin-modal">
    <div class="admin-modal-content">
        <div class="admin-modal-header">
            <h2 class="admin-modal-title">Edit Room</h2>
            <button type="button" class="admin-modal-close" onclick="closeEditRoomModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="editRoomForm" action="" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="admin-modal-body" id="editRoomFormContent">
                <div style="text-align: center; padding: 2rem;">
                    <i class="fas fa-spinner fa-spin" style="font-size: 32px; color: var(--admin-primary);"></i>
                    <p style="margin-top: 1rem; color: #6b7280;">Loading room data...</p>
                </div>
            </div>
            <div class="admin-modal-footer">
                <button type="button" class="admin-btn admin-btn-secondary" onclick="closeEditRoomModal()">
                    Cancel
                </button>
                <button type="submit" class="admin-btn admin-btn-primary">
                    <i class="fas fa-save mr-2"></i>Update Room
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Add Room Modal -->
<div id="roomModal" class="admin-modal">
    <div class="admin-modal-content">
        <div class="admin-modal-header">
            <h2 class="admin-modal-title">Add New Room</h2>
            <button type="button" class="admin-modal-close" onclick="closeRoomModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="roomForm" action="{{ route('admin.rooms.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="admin-modal-body">
                <div class="admin-form-group">
                    <label for="modal_name" class="admin-form-label">Room Name <span class="required">*</span></label>
                    <input type="text" name="name" id="modal_name" required
                        class="admin-form-input" placeholder="e.g., Mountain View Room">
                    <div id="error_name" class="admin-form-error"></div>
                </div>

                <div class="admin-form-group">
                    <label for="modal_room_number" class="admin-form-label">Room Number</label>
                    <input type="text" name="room_number" id="modal_room_number"
                        class="admin-form-input" placeholder="e.g., 101, 202, A1">
                    <div id="error_room_number" class="admin-form-error"></div>
                    <p style="font-size: 12px; color: #6b7280; margin-top: 5px;">
                        <i class="fas fa-info-circle"></i> Optional: Room number will be displayed with the room name.
                    </p>
                </div>

                <div class="admin-form-group">
                    <label for="modal_room_category" class="admin-form-label">Room Category</label>
                    <select name="room_category" id="modal_room_category" class="admin-form-input">
                        <option value="">-- Select Category --</option>
                        <option value="single">Single</option>
                        <option value="double">Double</option>
                        <option value="apartment">Apartment</option>
                        <option value="conference">Conference</option>
                    </select>
                    <div id="error_room_category" class="admin-form-error"></div>
                    <p style="font-size: 12px; color: #6b7280; margin-top: 5px;">
                        <i class="fas fa-info-circle"></i> Select accommodation type or conference facility.
                    </p>
                </div>

                <div class="admin-form-group">
                    <label for="modal_description" class="admin-form-label">Description <span class="required">*</span></label>
                    <textarea name="description" id="modal_description" rows="4" required
                        class="admin-form-input admin-form-textarea"></textarea>
                    <div id="error_description" class="admin-form-error"></div>
                </div>

                <div class="admin-form-group">
                    <label for="modal_price" class="admin-form-label">Price per Night <span class="required">*</span></label>
                    <input type="number" name="price" id="modal_price" step="0.01" min="0" required
                        class="admin-form-input">
                    <div id="error_price" class="admin-form-error"></div>
                </div>

                <div class="admin-form-group" id="imageInputGroup">
                    <label for="modal_images" class="admin-form-label">
                        Room Images <span class="required">*</span>
                        <span style="font-weight: normal; color: #6b7280; font-size: 12px;">(Select one or more images)</span>
                    </label>
                    <div id="imageInputContainer" style="display: flex; gap: 10px; align-items: center;">
                        <input type="file" name="images[]" id="modal_images" multiple accept="image/*"
                            class="admin-form-input" onchange="addImages(this)" style="flex: 1;">
                        <button type="button" id="addMoreBtn" onclick="document.getElementById('modal_images').click()" class="admin-btn admin-btn-secondary" style="white-space: nowrap;">
                            <i class="fas fa-plus"></i> Add More
                        </button>
                    </div>
                    <div id="error_images" class="admin-form-error"></div>
                    <div id="imagePreviewContainer" class="admin-image-preview-container" style="margin-top: 15px; padding: 15px; background: #f9fafb; border-radius: 8px; border: 2px dashed #e5e7eb;">
                        <p style="color: #6b7280; font-size: 13px; text-align: center; margin: 0;">
                            <i class="fas fa-images"></i> Selected images will appear here. Click "Add More" to select additional images.
                        </p>
                    </div>
                    <p style="font-size: 12px; color: #6b7280; margin-top: 10px;">
                        <i class="fas fa-info-circle"></i> You can upload multiple images and manage them as needed.
                    </p>
                </div>

                <div class="admin-form-group">
                    <label class="admin-form-label">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'],
                            ];
                        @endphp
                        @foreach($amenities as $key => $amenity)
                            <label class="admin-amenity-checkbox">
                                <input type="checkbox" name="amenities[]" value="{{ $key }}">
                                <span class="admin-amenity-icon"><i class="fas {{ $amenity['icon'] }}"></i></span>
                                <span class="admin-amenity-label">{{ $amenity['label'] }}</span>
                            </label>
                        @endforeach
                    </div>
                    <div id="error_amenities" class="admin-form-error"></div>
                    <p style="font-size: 12px; color: #6b7280; margin-top: 5px;">
                        <i class="fas fa-info-circle"></i> Select amenities included with this room to attract customers.
                    </p>
                </div>
            </div>
            <div class="admin-modal-footer">
                <button type="button" class="admin-btn admin-btn-secondary" onclick="closeRoomModal()">
                    Cancel
                </button>
                <button type="submit" class="admin-btn admin-btn-primary">
                    <i class="fas fa-save mr-2"></i>Create Room
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function openRoomModal() {
        document.getElementById('roomModal').classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    function closeRoomModal() {
        document.getElementById('roomModal').classList.remove('active');
        document.body.style.overflow = 'auto';
        // Reset form
        document.getElementById('roomForm').reset();
        // Clear errors
        document.querySelectorAll('.admin-form-error').forEach(el => el.textContent = '');
        // Remove error classes from inputs
        document.querySelectorAll('.admin-form-input').forEach(el => el.classList.remove('error'));
        // Clear selected files and previews
        selectedFiles = [];
        fileIdCounter = 0;
        document.getElementById('imagePreviewContainer').innerHTML = '<p style="color: #6b7280; font-size: 13px; text-align: center; margin: 0;"><i class="fas fa-images"></i> Selected images will appear here. Click "Add More" to select additional images.</p>';
    }

    // Store selected files globally
    let selectedFiles = [];
    let fileIdCounter = 0;

    function showNotification(message, type = 'warning') {
        // Remove existing notification if any
        const existing = document.getElementById('imageNotification');
        if (existing) {
            existing.remove();
        }
        
        // Create notification element
        const notification = document.createElement('div');
        notification.id = 'imageNotification';
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: ${type === 'warning' ? '#fef3c7' : type === 'error' ? '#fee2e2' : '#d1fae5'};
            color: ${type === 'warning' ? '#92400e' : type === 'error' ? '#991b1b' : '#065f46'};
            padding: 16px 20px;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            z-index: 10000;
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 300px;
            max-width: 400px;
            animation: slideInRight 0.3s ease-out;
            border-left: 4px solid ${type === 'warning' ? '#f59e0b' : type === 'error' ? '#ef4444' : '#10b981'};
        `;
        
        const icon = type === 'warning' ? 'fa-exclamation-triangle' : type === 'error' ? 'fa-times-circle' : 'fa-check-circle';
        notification.innerHTML = `
            <i class="fas ${icon}" style="font-size: 20px;"></i>
            <div style="flex: 1; font-size: 14px; font-weight: 500; line-height: 1.4;">${message}</div>
            <button onclick="this.parentElement.remove()" style="background: none; border: none; color: inherit; cursor: pointer; padding: 4px; opacity: 0.7; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.7'">
                <i class="fas fa-times"></i>
            </button>
        `;
        
        document.body.appendChild(notification);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            if (notification && notification.parentNode) {
                notification.style.animation = 'slideOutRight 0.3s ease-out';
                setTimeout(() => notification.remove(), 300);
            }
        }, 5000);
    }

    function addImages(input) {
        if (input.files && input.files.length > 0) {
            // Add new files to the array
            for (let i = 0; i < input.files.length; i++) {
                const file = input.files[i];
                // Add file with unique ID
                selectedFiles.push({
                    id: fileIdCounter++,
                    file: file
                });
            }
            
            // Clear the input so user can select more
            input.value = '';
            
            // Update preview
            updatePreview();
        }
    }

    function removeImage(fileId) {
        selectedFiles = selectedFiles.filter(item => item.id !== fileId);
        updatePreview();
    }

    function updatePreview() {
        const container = document.getElementById('imagePreviewContainer');
        container.innerHTML = '';
        
        const fileCount = selectedFiles.length;
        const addMoreBtn = document.getElementById('addMoreBtn');
        const imageInputContainer = document.getElementById('imageInputContainer');
        const imageInputGroup = document.getElementById('imageInputGroup');
        
        if (addMoreBtn) {
            addMoreBtn.style.display = 'inline-flex';
        }
        if (imageInputContainer) {
            imageInputContainer.style.display = 'flex';
        }
        const label = imageInputGroup ? imageInputGroup.querySelector('label') : null;
        if (label) {
            const span = label.querySelector('span[style*="font-weight: normal"]');
            if (span) {
                span.textContent = '(Select one or more images)';
                span.style.color = '#6b7280';
                span.style.fontWeight = 'normal';
            }
        }
        
        if (fileCount < 1) {
            const placeholderMsg = document.createElement('div');
            placeholderMsg.style.cssText = 'color: #6b7280; font-size: 13px; text-align: center; padding: 20px;';
            placeholderMsg.innerHTML = '<i class="fas fa-images" style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;"></i><div>No images selected. Click "Add More" to select images.</div>';
            container.appendChild(placeholderMsg);
            return;
        }
        
        // Show success message
        const successMsg = document.createElement('div');
        successMsg.style.cssText = 'color: var(--admin-success); font-size: 13px; padding: 10px; background: #d1fae5; border-radius: 6px; margin-bottom: 15px; font-weight: 500;';
        successMsg.innerHTML = '<i class="fas fa-check-circle"></i> <strong>' + fileCount + ' image(s)</strong> selected and ready to upload';
        container.appendChild(successMsg);
        
        // Create preview grid
        const previewGrid = document.createElement('div');
        previewGrid.className = 'preview-grid';
        previewGrid.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 10px;';
        container.appendChild(previewGrid);
        
        // Load and display each image
        selectedFiles.forEach((item, index) => {
            const file = item.file;
            const fileId = item.id;
            const reader = new FileReader();
            
            // Create placeholder
            const placeholderDiv = document.createElement('div');
            placeholderDiv.id = 'img-placeholder-' + fileId;
            placeholderDiv.style.cssText = 'position: relative; border-radius: 12px; overflow: hidden; border: 2px dashed #cbd5e1; background: #f1f5f9; min-height: 150px; display: flex; align-items: center; justify-content: center;';
            placeholderDiv.innerHTML = '<div style="text-align: center; color: #64748b;"><i class="fas fa-spinner fa-spin" style="font-size: 24px; margin-bottom: 5px;"></i><div style="font-size: 11px;">Loading...</div></div>';
            previewGrid.appendChild(placeholderDiv);
            
            reader.onload = function(e) {
                const imgDiv = document.createElement('div');
                imgDiv.id = 'img-container-' + fileId;
                imgDiv.style.cssText = 'position: relative; border-radius: 12px; overflow: hidden; border: 2px solid var(--admin-accent); box-shadow: 0 2px 8px rgba(0,0,0,0.1); background: white;';
                
                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.cssText = 'width: 100%; height: 150px; object-fit: cover; display: block;';
                img.alt = 'Preview ' + (index + 1);
                
                // Remove button
                const removeBtn = document.createElement('button');
                removeBtn.type = 'button';
                removeBtn.style.cssText = 'position: absolute; top: 5px; right: 5px; background: rgba(239, 68, 68, 0.9); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 10; transition: all 0.3s;';
                removeBtn.innerHTML = '<i class="fas fa-times"></i>';
                removeBtn.onclick = function() {
                    removeImage(fileId);
                };
                removeBtn.onmouseover = function() {
                    this.style.background = 'rgba(220, 38, 38, 1)';
                    this.style.transform = 'scale(1.1)';
                };
                removeBtn.onmouseout = function() {
                    this.style.background = 'rgba(239, 68, 68, 0.9)';
                    this.style.transform = 'scale(1)';
                };
                
                // Image info overlay
                const overlay = document.createElement('div');
                overlay.style.cssText = 'position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); padding: 8px;';
                
                const badge = document.createElement('div');
                badge.style.cssText = 'color: white; font-size: 11px; font-weight: 600; text-align: center;';
                badge.innerHTML = '<i class="fas fa-image"></i> Image ' + (index + 1) + ' of ' + fileCount;
                
                overlay.appendChild(badge);
                
                // File size info
                const fileSize = (file.size / 1024).toFixed(1);
                const sizeInfo = document.createElement('div');
                sizeInfo.style.cssText = 'color: rgba(255,255,255,0.9); font-size: 10px; text-align: center; margin-top: 2px;';
                sizeInfo.textContent = fileSize + ' KB';
                overlay.appendChild(sizeInfo);
                
                imgDiv.appendChild(img);
                imgDiv.appendChild(removeBtn);
                imgDiv.appendChild(overlay);
                
                // Replace placeholder
                const placeholder = document.getElementById('img-placeholder-' + fileId);
                if (placeholder && placeholder.parentNode) {
                    placeholder.parentNode.replaceChild(imgDiv, placeholder);
                } else {
                    previewGrid.appendChild(imgDiv);
                }
            };
            
            reader.onerror = function() {
                const errorDiv = document.createElement('div');
                errorDiv.style.cssText = 'padding: 10px; background: #fee2e2; border-radius: 6px; color: var(--admin-danger); font-size: 12px; min-height: 150px; display: flex; align-items: center; justify-content: center; position: relative;';
                errorDiv.innerHTML = '<div style="text-align: center;"><i class="fas fa-exclamation-circle"></i><div style="margin-top: 5px;">Error loading image</div></div>';
                
                // Add remove button to error div too
                const removeBtn = document.createElement('button');
                removeBtn.type = 'button';
                removeBtn.style.cssText = 'position: absolute; top: 5px; right: 5px; background: rgba(239, 68, 68, 0.9); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer;';
                removeBtn.innerHTML = '<i class="fas fa-times"></i>';
                removeBtn.onclick = function() {
                    removeImage(fileId);
                };
                errorDiv.appendChild(removeBtn);
                
                const placeholder = document.getElementById('img-placeholder-' + fileId);
                if (placeholder && placeholder.parentNode) {
                    placeholder.parentNode.replaceChild(errorDiv, placeholder);
                } else {
                    previewGrid.appendChild(errorDiv);
                }
            };
            
            reader.readAsDataURL(file);
        });
    }

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

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

    // Add CSS animations for notification
    if (!document.getElementById('notificationStyles')) {
        const style = document.createElement('style');
        style.id = 'notificationStyles';
        style.textContent = `
            @keyframes slideInRight {
                from {
                    transform: translateX(100%);
                    opacity: 0;
                }
                to {
                    transform: translateX(0);
                    opacity: 1;
                }
            }
            @keyframes slideOutRight {
                from {
                    transform: translateX(0);
                    opacity: 1;
                }
                to {
                    transform: translateX(100%);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);
    }

    // Handle form submission
    document.getElementById('roomForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const form = this;
        const submitBtn = form.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        // Validate image count using selectedFiles array
        if (selectedFiles.length < 1) {
            document.getElementById('error_images').textContent = 'At least 1 image is required.';
            return;
        }
        
        // Create a new FormData and add files from selectedFiles array
        const formData = new FormData();
        formData.append('_token', form.querySelector('input[name="_token"]').value);
        formData.append('name', form.querySelector('#modal_name').value);
        const roomNumberInput = form.querySelector('#modal_room_number');
        if (roomNumberInput) {
            formData.append('room_number', roomNumberInput.value);
        }
        const roomCategoryInput = form.querySelector('#modal_room_category');
        if (roomCategoryInput) {
            formData.append('room_category', roomCategoryInput.value);
        }
        formData.append('description', form.querySelector('#modal_description').value);
        formData.append('price', form.querySelector('#modal_price').value);
        
        // Add amenities
        const amenities = form.querySelectorAll('input[name="amenities[]"]:checked');
        amenities.forEach(checkbox => {
            formData.append('amenities[]', checkbox.value);
        });
        
        // Add files from selectedFiles array
        selectedFiles.forEach((item, index) => {
            formData.append('images[]', item.file);
        });
        
        // Clear previous errors
        document.querySelectorAll('.admin-form-error').forEach(el => el.textContent = '');
        
        // Disable submit button
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Creating...';
        
        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || formData.get('_token')
            }
        })
        .then(response => {
            const contentType = response.headers.get('content-type');
            if (contentType && contentType.includes('application/json')) {
                return response.json().then(data => ({ data, isJson: true }));
            } else {
                // If it's a redirect or HTML response, it means success
                return { data: { success: true }, isJson: false };
            }
        })
        .then(({ data, isJson }) => {
            if (data.success) {
                // Success notification
                showNotification(data.message || 'Room created successfully!', 'success');
                // Close modal and reload after a short delay
                setTimeout(() => {
                    closeRoomModal();
                    window.location.reload();
                }, 1500);
            } else if (data.errors) {
                // Display validation errors
                Object.keys(data.errors).forEach(key => {
                    const errorKey = key.replace('.', '_');
                    const errorEl = document.getElementById('error_' + errorKey);
                    const inputEl = document.getElementById('modal_' + errorKey);
                    if (errorEl) {
                        errorEl.textContent = data.errors[key][0];
                    }
                    if (inputEl) {
                        inputEl.classList.add('error');
                    }
                });
                showNotification('Please fix the form errors before submitting.', 'error');
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            } else {
                // Other error
                showNotification(data.message || 'An error occurred while creating the room.', 'error');
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            // On error, try to reload (might be a redirect)
            closeRoomModal();
            window.location.reload();
        });
    });

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

    // View Room Modal Functions
    function viewRoom(roomId) {
        const modal = document.getElementById('viewRoomModal');
        const content = document.getElementById('viewRoomContent');
        
        // Show loading state
        content.innerHTML = `
            <div style="text-align: center; padding: 2rem;">
                <i class="fas fa-spinner fa-spin" style="font-size: 32px; color: var(--admin-primary);"></i>
                <p style="margin-top: 1rem; color: #6b7280;">Loading room details...</p>
            </div>
        `;
        
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
        
        // Fetch room data
        fetch(`/admin/rooms/${roomId}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.room) {
                const room = data.room;
                const amenities = room.amenities || [];
                
                // Build amenities HTML
                let amenitiesHtml = '';
                if (amenities.length > 0) {
                    const 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',
                    };
                    const amenityLabels = {
                        'breakfast': 'Breakfast',
                        'lunch': 'Lunch',
                        'dinner': 'Dinner',
                        'wifi': 'Free WiFi',
                        'ict': 'ICT Facilities',
                        'parking': 'Free Parking',
                        'air_conditioning': 'Air Conditioning',
                        'tv': 'TV',
                        'balcony': 'Balcony',
                        'kitchen': 'Kitchen',
                        'bathroom': 'Private Bathroom',
                        'laundry': 'Laundry Service',
                        'room_service': 'Room Service',
                        'security': '24/7 Security',
                    };
                    
                    amenitiesHtml = '<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;">';
                    amenities.forEach(amenity => {
                        amenitiesHtml += `
                            <span style="display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #d1fae5; color: #065f46; border-radius: 6px; font-size: 13px;">
                                <i class="fas ${amenityIcons[amenity] || 'fa-check'}"></i>
                                ${amenityLabels[amenity] || amenity}
                            </span>
                        `;
                    });
                    amenitiesHtml += '</div>';
                }
                
                // Build images HTML
                let imagesHtml = '';
                if (room.images && room.images.length > 0) {
                    imagesHtml = '<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 15px;">';
                    room.images.forEach((image, index) => {
                        imagesHtml += `
                            <div style="position: relative; border-radius: 8px; overflow: hidden; border: 2px solid #e5e7eb;">
                                <img src="${resolveRoomImageUrl(image)}" alt="Room Image ${index + 1}" style="width: 100%; height: 150px; object-fit: cover;">
                            </div>
                        `;
                    });
                    imagesHtml += '</div>';
                }
                
                content.innerHTML = `
                    <div>
                        ${imagesHtml ? `<div><h3 style="font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--admin-primary);">Images</h3>${imagesHtml}</div>` : ''}
                        
                        <div style="margin-top: 1.5rem;">
                            <h3 style="font-size: 18px; font-weight: 700; color: var(--admin-primary); margin-bottom: 10px;">
                                ${room.name}${room.room_number ? ' <span style="color: var(--admin-accent); font-weight: 600;">(Room #' + room.room_number + ')</span>' : ''}
                            </h3>
                            <p style="color: #6b7280; line-height: 1.6; margin-bottom: 15px;">${room.description}</p>
                        </div>
                        
                        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 1.5rem;">
                            <div style="padding: 15px; background: #f9fafb; border-radius: 8px;">
                                <div style="font-size: 12px; color: #6b7280; margin-bottom: 5px;">Price per Night</div>
                                <div style="font-size: 24px; font-weight: 700; color: var(--admin-primary);">$${parseFloat(room.price).toFixed(2)}</div>
                            </div>
                            <div style="padding: 15px; background: #f9fafb; border-radius: 8px;">
                                <div style="font-size: 12px; color: #6b7280; margin-bottom: 5px;">Status</div>
                                <div>
                                    ${room.status === 'approved' ? '<span style="padding: 4px 12px; background: #d1fae5; color: #065f46; border-radius: 20px; font-size: 12px; font-weight: 600;">Approved</span>' : ''}
                                    ${room.status === 'pending' ? '<span style="padding: 4px 12px; background: #fef3c7; color: #92400e; border-radius: 20px; font-size: 12px; font-weight: 600;">Pending</span>' : ''}
                                    ${room.status === 'rejected' ? '<span style="padding: 4px 12px; background: #fee2e2; color: #991b1b; border-radius: 20px; font-size: 12px; font-weight: 600;">Rejected</span>' : ''}
                                </div>
                            </div>
                            <div style="padding: 15px; background: #f9fafb; border-radius: 8px;">
                                <div style="font-size: 12px; color: #6b7280; margin-bottom: 5px;">Category</div>
                                <div>
                                    ${room.room_category ? '<span style="padding: 4px 12px; background: rgba(191, 255, 207, 0.3); color: var(--admin-primary); border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: capitalize;">' + room.room_category + '</span>' : '<span style="color: #9ca3af;">-</span>'}
                                </div>
                            </div>
                        </div>
                        
                        ${amenities.length > 0 ? `
                            <div style="margin-top: 1.5rem;">
                                <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--admin-primary);">Amenities</h3>
                                ${amenitiesHtml}
                            </div>
                        ` : ''}
                        
                        <div style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb;">
                            <div style="font-size: 12px; color: #6b7280;">
                                <div><strong>Created by:</strong> ${room.creator ? room.creator.name : 'Unknown'}</div>
                                <div style="margin-top: 5px;"><strong>Created at:</strong> ${new Date(room.created_at).toLocaleDateString()}</div>
                            </div>
                        </div>
                    </div>
                `;
            } else {
                content.innerHTML = `
                    <div style="text-align: center; padding: 2rem;">
                        <i class="fas fa-exclamation-circle" style="font-size: 32px; color: var(--admin-danger);"></i>
                        <p style="margin-top: 1rem; color: #6b7280;">Room not found</p>
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            content.innerHTML = `
                <div style="text-align: center; padding: 2rem;">
                    <i class="fas fa-exclamation-circle" style="font-size: 32px; color: var(--admin-danger);"></i>
                    <p style="margin-top: 1rem; color: #6b7280;">Error loading room details</p>
                </div>
            `;
        });
    }

    function closeViewRoomModal() {
        const modal = document.getElementById('viewRoomModal');
        modal.classList.remove('active');
        document.body.style.overflow = 'auto';
    }

    // Close view modal on overlay click
    document.getElementById('viewRoomModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeViewRoomModal();
        }
    });

    // Close view modal on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            const viewModal = document.getElementById('viewRoomModal');
            if (viewModal && viewModal.classList.contains('active')) {
                closeViewRoomModal();
            }
        }
    });

    // Edit Room Functions
    let editSelectedFiles = [];
    let editFileIdCounter = 0;
    let editRoomId = null;

    function editRoom(roomId) {
        editRoomId = roomId;
        const modal = document.getElementById('editRoomModal');
        const formContent = document.getElementById('editRoomFormContent');
        const form = document.getElementById('editRoomForm');
        
        formContent.innerHTML = `
            <div style="text-align: center; padding: 2rem;">
                <i class="fas fa-spinner fa-spin" style="font-size: 32px; color: var(--admin-primary);"></i>
                <p style="margin-top: 1rem; color: #6b7280;">Loading room data...</p>
            </div>
        `;
        
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
        
        fetch(`/admin/rooms/${roomId}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.room) {
                const room = data.room;
                editSelectedFiles = [];
                editFileIdCounter = 0;
                
                let existingImagesHtml = '';
                if (room.images && room.images.length > 0) {
                    existingImagesHtml = '<div style="margin-bottom: 15px;"><label style="font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">Current Images:</label><div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;">';
                    room.images.forEach((image, index) => {
                        existingImagesHtml += `
                            <div style="position: relative; border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
                                <img src="${resolveRoomImageUrl(image)}" alt="Room Image ${index + 1}" style="width: 100%; height: 100px; object-fit: cover;">
                                <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>
                        `;
                    });
                    existingImagesHtml += '</div></div>';
                }
                
                const amenities = ['breakfast', 'lunch', 'dinner', 'wifi', 'ict', 'parking', 'air_conditioning', 'tv', 'balcony', 'kitchen', 'bathroom', 'laundry', 'room_service', 'security'];
                const 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'};
                const amenityLabels = {'breakfast': 'Breakfast', 'lunch': 'Lunch', 'dinner': 'Dinner', 'wifi': 'Free WiFi', 'ict': 'ICT Facilities', 'parking': 'Free Parking', 'air_conditioning': 'Air Conditioning', 'tv': 'TV', 'balcony': 'Balcony', 'kitchen': 'Kitchen', 'bathroom': 'Private Bathroom', 'laundry': 'Laundry Service', 'room_service': 'Room Service', 'security': '24/7 Security'};
                
                let amenitiesHtml = '<div class="admin-amenities-grid">';
                amenities.forEach(key => {
                    const isChecked = room.amenities && room.amenities.includes(key) ? 'checked' : '';
                    amenitiesHtml += `<label class="admin-amenity-checkbox"><input type="checkbox" name="amenities[]" value="${key}" ${isChecked}><span class="admin-amenity-icon"><i class="fas ${amenityIcons[key]}"></i></span><span class="admin-amenity-label">${amenityLabels[key]}</span></label>`;
                });
                amenitiesHtml += '</div>';
                
                formContent.innerHTML = `
                    <div class="admin-form-group">
                        <label for="edit_modal_name" class="admin-form-label">Room Name <span class="required">*</span></label>
                        <input type="text" name="name" id="edit_modal_name" required value="${room.name || ''}" class="admin-form-input">
                        <div id="error_edit_name" class="admin-form-error"></div>
                    </div>
                    <div class="admin-form-group">
                        <label for="edit_modal_room_number" class="admin-form-label">Room Number</label>
                        <input type="text" name="room_number" id="edit_modal_room_number" value="${room.room_number || ''}" class="admin-form-input" placeholder="e.g., 101, 202, A1">
                        <div id="error_edit_room_number" class="admin-form-error"></div>
                        <p style="font-size: 12px; color: #6b7280; margin-top: 5px;"><i class="fas fa-info-circle"></i> Optional: Room number will be displayed with the room name.</p>
                    </div>
                    <div class="admin-form-group">
                        <label for="edit_modal_room_category" class="admin-form-label">Room Category</label>
                        <select name="room_category" id="edit_modal_room_category" class="admin-form-input">
                            <option value="">-- Select Category --</option>
                            <option value="single" ${room.room_category === 'single' ? 'selected' : ''}>Single</option>
                            <option value="double" ${room.room_category === 'double' ? 'selected' : ''}>Double</option>
                            <option value="apartment" ${room.room_category === 'apartment' ? 'selected' : ''}>Apartment</option>
                            <option value="conference" ${room.room_category === 'conference' ? 'selected' : ''}>Conference</option>
                        </select>
                        <div id="error_edit_room_category" class="admin-form-error"></div>
                        <p style="font-size: 12px; color: #6b7280; margin-top: 5px;"><i class="fas fa-info-circle"></i> Select accommodation type or conference facility.</p>
                    </div>
                    <div class="admin-form-group">
                        <label for="edit_modal_description" class="admin-form-label">Description <span class="required">*</span></label>
                        <textarea name="description" id="edit_modal_description" rows="4" required class="admin-form-input admin-form-textarea">${room.description || ''}</textarea>
                        <div id="error_edit_description" class="admin-form-error"></div>
                    </div>
                    <div class="admin-form-group">
                        <label for="edit_modal_price" class="admin-form-label">Price per Night <span class="required">*</span></label>
                        <input type="number" name="price" id="edit_modal_price" step="0.01" min="0" required value="${room.price || ''}" class="admin-form-input">
                        <div id="error_edit_price" class="admin-form-error"></div>
                    </div>
                    <div class="admin-form-group" id="editImageInputGroup">
                        <label for="edit_modal_images" class="admin-form-label">Room Images <span style="font-weight: normal; color: #6b7280; font-size: 12px;">(Add new images or keep existing)</span></label>
                        ${existingImagesHtml}
                        <div id="editImageInputContainer" style="display: flex; gap: 10px; align-items: center; margin-top: 10px;">
                            <input type="file" name="images[]" id="edit_modal_images" multiple accept="image/*" class="admin-form-input" onchange="addEditImages(this)" style="flex: 1;">
                            <button type="button" id="editAddMoreBtn" onclick="document.getElementById('edit_modal_images').click()" class="admin-btn admin-btn-secondary" style="white-space: nowrap;"><i class="fas fa-plus"></i> Add More</button>
                        </div>
                        <div id="error_edit_images" class="admin-form-error"></div>
                        <div id="editImagePreviewContainer" class="admin-image-preview-container" style="margin-top: 15px; padding: 15px; background: #f9fafb; border-radius: 8px; border: 2px dashed #e5e7eb;">
                            <p style="color: #6b7280; font-size: 13px; text-align: center; margin: 0;"><i class="fas fa-images"></i> New images will appear here when selected.</p>
                        </div>
                        <p style="font-size: 12px; color: #6b7280; margin-top: 10px;"><i class="fas fa-info-circle"></i> You can add multiple new images as needed.</p>
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Room Amenities</label>
                        ${amenitiesHtml}
                        <div id="error_edit_amenities" class="admin-form-error"></div>
                        <p style="font-size: 12px; color: #6b7280; margin-top: 5px;"><i class="fas fa-info-circle"></i> Select amenities included with this room to attract customers.</p>
                    </div>
                `;
                
                form.action = `/admin/rooms/${roomId}`;
            } else {
                formContent.innerHTML = `<div style="text-align: center; padding: 2rem;"><i class="fas fa-exclamation-circle" style="font-size: 32px; color: var(--admin-danger);"></i><p style="margin-top: 1rem; color: #6b7280;">Room not found</p></div>`;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            formContent.innerHTML = `<div style="text-align: center; padding: 2rem;"><i class="fas fa-exclamation-circle" style="font-size: 32px; color: var(--admin-danger);"></i><p style="margin-top: 1rem; color: #6b7280;">Error loading room data</p></div>`;
        });
    }

    function closeEditRoomModal() {
        document.getElementById('editRoomModal').classList.remove('active');
        document.body.style.overflow = 'auto';
        editSelectedFiles = [];
        editFileIdCounter = 0;
        editRoomId = null;
    }

    function addEditImages(input) {
        if (input.files && input.files.length > 0) {
            for (let i = 0; i < input.files.length; i++) {
                const file = input.files[i];
                editSelectedFiles.push({id: editFileIdCounter++, file: file});
            }
            input.value = '';
            updateEditPreview();
        }
    }

    function removeEditImage(fileId) {
        editSelectedFiles = editSelectedFiles.filter(item => item.id !== fileId);
        updateEditPreview();
    }

    function updateEditPreview() {
        const container = document.getElementById('editImagePreviewContainer');
        if (!container) return;
        container.innerHTML = '';
        const fileCount = editSelectedFiles.length;
        const addMoreBtn = document.getElementById('editAddMoreBtn');
        const imageInputContainer = document.getElementById('editImageInputContainer');
        if (addMoreBtn && imageInputContainer) {
            addMoreBtn.style.display = 'inline-flex';
            imageInputContainer.style.display = 'flex';
        }
        
        if (fileCount < 1) {
            container.innerHTML = '<div style="color: #6b7280; font-size: 13px; text-align: center; padding: 20px;"><i class="fas fa-images" style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;"></i><div>No new images selected.</div></div>';
            return;
        }
        
        const successMsg = document.createElement('div');
        successMsg.style.cssText = 'color: var(--admin-success); font-size: 13px; padding: 10px; background: #d1fae5; border-radius: 6px; margin-bottom: 15px; font-weight: 500;';
        successMsg.innerHTML = '<i class="fas fa-check-circle"></i> <strong>' + fileCount + ' new image(s)</strong> selected';
        container.appendChild(successMsg);
        
        const previewGrid = document.createElement('div');
        previewGrid.className = 'preview-grid';
        previewGrid.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 10px;';
        container.appendChild(previewGrid);
        
        editSelectedFiles.forEach((item, index) => {
            const file = item.file;
            const fileId = item.id;
            const reader = new FileReader();
            
            const placeholderDiv = document.createElement('div');
            placeholderDiv.id = 'edit-img-placeholder-' + fileId;
            placeholderDiv.style.cssText = 'position: relative; border-radius: 12px; overflow: hidden; border: 2px dashed #cbd5e1; background: #f1f5f9; min-height: 150px; display: flex; align-items: center; justify-content: center;';
            placeholderDiv.innerHTML = '<div style="text-align: center; color: #64748b;"><i class="fas fa-spinner fa-spin" style="font-size: 24px; margin-bottom: 5px;"></i><div style="font-size: 11px;">Loading...</div></div>';
            previewGrid.appendChild(placeholderDiv);
            
            reader.onload = function(e) {
                const imgDiv = document.createElement('div');
                imgDiv.style.cssText = 'position: relative; border-radius: 12px; overflow: hidden; border: 2px solid var(--admin-accent); box-shadow: 0 2px 8px rgba(0,0,0,0.1); background: white;';
                
                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.cssText = 'width: 100%; height: 150px; object-fit: cover; display: block;';
                
                const removeBtn = document.createElement('button');
                removeBtn.type = 'button';
                removeBtn.style.cssText = 'position: absolute; top: 5px; right: 5px; background: rgba(239, 68, 68, 0.9); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 10;';
                removeBtn.innerHTML = '<i class="fas fa-times"></i>';
                removeBtn.onclick = function() { removeEditImage(fileId); };
                
                const overlay = document.createElement('div');
                overlay.style.cssText = 'position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); padding: 8px;';
                overlay.innerHTML = `<div style="color: white; font-size: 11px; font-weight: 600; text-align: center;"><i class="fas fa-image"></i> New ${index + 1}</div><div style="color: rgba(255,255,255,0.9); font-size: 10px; text-align: center; margin-top: 2px;">${(file.size / 1024).toFixed(1)} KB</div>`;
                
                imgDiv.appendChild(img);
                imgDiv.appendChild(removeBtn);
                imgDiv.appendChild(overlay);
                
                const placeholder = document.getElementById('edit-img-placeholder-' + fileId);
                if (placeholder && placeholder.parentNode) {
                    placeholder.parentNode.replaceChild(imgDiv, placeholder);
                }
            };
            
            reader.readAsDataURL(file);
        });
    }

    // Handle edit form submission
    document.addEventListener('DOMContentLoaded', function() {
        const editForm = document.getElementById('editRoomForm');
        if (editForm) {
            editForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const form = this;
                const submitBtn = form.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                
                document.querySelectorAll('#editRoomModal .admin-form-error').forEach(el => el.textContent = '');
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Updating...';
                
                const formData = new FormData();
                formData.append('_token', form.querySelector('input[name="_token"]').value);
                formData.append('_method', 'PUT');
                formData.append('name', form.querySelector('#edit_modal_name').value);
                formData.append('room_number', form.querySelector('#edit_modal_room_number').value);
                formData.append('room_category', form.querySelector('#edit_modal_room_category').value);
                formData.append('description', form.querySelector('#edit_modal_description').value);
                formData.append('price', form.querySelector('#edit_modal_price').value);
                
                document.querySelectorAll('#editRoomModal input[name="existing_images[]"]:checked').forEach(checkbox => {
                    formData.append('existing_images[]', checkbox.value);
                });
                
                editSelectedFiles.forEach((item) => {
                    formData.append('images[]', item.file);
                });
                
                document.querySelectorAll('#editRoomModal input[name="amenities[]"]:checked').forEach(checkbox => {
                    formData.append('amenities[]', checkbox.value);
                });
                
                fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                    }
                })
                .then(response => {
                    if (response.redirected) {
                        window.location.href = response.url;
                        return;
                    }
                    return response.json();
                })
                .then(data => {
                    if (!data) {
                        // If data is null/undefined, it might be a redirect
                        window.location.reload();
                        return;
                    }
                    if (data.success) {
                        // Success notification
                        showNotification(data.message || 'Room updated successfully!', 'success');
                        // Close modal and reload after a short delay
                        setTimeout(() => {
                            closeEditRoomModal();
                            window.location.reload();
                        }, 1500);
                    } else if (data.errors) {
                        // Validation errors
                        Object.keys(data.errors).forEach(key => {
                            const errorEl = document.getElementById('error_edit_' + key.replace('.', '_'));
                            if (errorEl) {
                                errorEl.textContent = data.errors[key][0];
                            }
                        });
                        showNotification('Please fix the form errors before submitting.', 'error');
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    } else {
                        showNotification('An error occurred while updating the room.', 'error');
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showNotification('An error occurred while updating the room.', 'error');
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                })
                .catch(error => {
                    console.error('Error:', error);
                    window.location.reload();
                });
            });
        }
        
        // Close edit modal handlers
        const editModal = document.getElementById('editRoomModal');
        if (editModal) {
            editModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeEditRoomModal();
                }
            });
        }
    });
</script>
@endsection