@extends('admin.layout')

@section('title', 'Pengaturan Kamar')
@section('page-title', 'Pengaturan Kamar')

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="row">
    <!-- Room Types Management -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="fas fa-bed"></i> Tipe Kamar
                </h5>
                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addRoomTypeModal">
                    <i class="fas fa-plus"></i> Tambah Tipe
                </button>
            </div>
            <div class="card-body">
                <div id="roomTypesList">
                    <!-- Room types will be loaded here -->
                </div>
            </div>
        </div>
    </div>
    
    <!-- Amenities Management -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="fas fa-star"></i> Fasilitas & Amenities
                </h5>
                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addAmenityModal">
                    <i class="fas fa-plus"></i> Tambah Fasilitas
                </button>
            </div>
            <div class="card-body">
                <div id="amenitiesList">
                    <!-- Amenities will be loaded here -->
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <!-- Capacity Settings -->
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-users"></i> Pengaturan Kapasitas
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="minCapacity" class="form-label">Kapasitas Minimum</label>
                            <input type="number" class="form-control" id="minCapacity" value="1" min="1">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="maxCapacity" class="form-label">Kapasitas Maksimum</label>
                            <input type="number" class="form-control" id="maxCapacity" value="10" min="1">
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-success" onclick="saveCapacitySettings()">
                    <i class="fas fa-save"></i> Simpan Pengaturan Kapasitas
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Add Room Type Modal -->
<div class="modal fade" id="addRoomTypeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus"></i> Tambah Tipe Kamar
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addRoomTypeForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="roomTypeName" class="form-label">Nama Tipe <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="roomTypeName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="roomTypeCode" class="form-label">Kode Tipe <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="roomTypeCode" name="code" required placeholder="contoh: single, double, suite">
                        <div class="form-text">Kode akan digunakan dalam sistem (huruf kecil, tanpa spasi)</div>
                    </div>
                    <div class="mb-3">
                        <label for="roomTypeDescription" class="form-label">Deskripsi</label>
                        <textarea class="form-control" id="roomTypeDescription" name="description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="roomTypeDefaultCapacity" class="form-label">Kapasitas Default</label>
                        <input type="number" class="form-control" id="roomTypeDefaultCapacity" name="default_capacity" min="1" value="2">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Amenity Modal -->
<div class="modal fade" id="addAmenityModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus"></i> Tambah Fasilitas
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addAmenityForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="amenityName" class="form-label">Nama Fasilitas <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="amenityName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="amenityIcon" class="form-label">Icon (Font Awesome)</label>
                        <input type="text" class="form-control" id="amenityIcon" name="icon" placeholder="fas fa-wifi">
                        <div class="form-text">Contoh: fas fa-wifi, fas fa-tv, fas fa-snowflake</div>
                    </div>
                    <div class="mb-3">
                        <label for="amenityCategory" class="form-label">Kategori</label>
                        <select class="form-control" id="amenityCategory" name="category">
                            <option value="basic">Dasar</option>
                            <option value="comfort">Kenyamanan</option>
                            <option value="entertainment">Hiburan</option>
                            <option value="service">Layanan</option>
                            <option value="bathroom">Kamar Mandi</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="amenityIsActive" name="is_active" checked>
                            <label class="form-check-label" for="amenityIsActive">
                                Aktif
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Room Type Modal -->
<div class="modal fade" id="editRoomTypeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit"></i> Edit Tipe Kamar
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editRoomTypeForm">
                <div class="modal-body">
                    <input type="hidden" id="editRoomTypeId" name="id">
                    <div class="mb-3">
                        <label for="editRoomTypeName" class="form-label">Nama Tipe <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="editRoomTypeName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="editRoomTypeCode" class="form-label">Kode Tipe <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="editRoomTypeCode" name="code" required>
                    </div>
                    <div class="mb-3">
                        <label for="editRoomTypeDescription" class="form-label">Deskripsi</label>
                        <textarea class="form-control" id="editRoomTypeDescription" name="description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="editRoomTypeDefaultCapacity" class="form-label">Kapasitas Default</label>
                        <input type="number" class="form-control" id="editRoomTypeDefaultCapacity" name="default_capacity" min="1">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Amenity Modal -->
<div class="modal fade" id="editAmenityModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit"></i> Edit Fasilitas
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editAmenityForm">
                <div class="modal-body">
                    <input type="hidden" id="editAmenityId" name="id">
                    <div class="mb-3">
                        <label for="editAmenityName" class="form-label">Nama Fasilitas <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="editAmenityName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="editAmenityIcon" class="form-label">Icon (Font Awesome)</label>
                        <input type="text" class="form-control" id="editAmenityIcon" name="icon">
                    </div>
                    <div class="mb-3">
                        <label for="editAmenityCategory" class="form-label">Kategori</label>
                        <select class="form-control" id="editAmenityCategory" name="category">
                            <option value="basic">Dasar</option>
                            <option value="comfort">Kenyamanan</option>
                            <option value="entertainment">Hiburan</option>
                            <option value="service">Layanan</option>
                            <option value="bathroom">Kamar Mandi</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="editAmenityIsActive" name="is_active">
                            <label class="form-check-label" for="editAmenityIsActive">
                                Aktif
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Show alert function
    function showAlert(type, message) {
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        
        const contentDiv = document.querySelector('.row');
        contentDiv.insertAdjacentHTML('afterbegin', alertHtml);
        
        setTimeout(() => {
            const alert = document.querySelector('.alert');
            if (alert) {
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }, 5000);
    }

    // Load room types from API
    function loadRoomTypes() {
        fetch('{{ url('/') }}/api/room-types')
            .then(response => response.json())
            .then(data => {
                const container = document.getElementById('roomTypesList');
                if (data.length === 0) {
                    container.innerHTML = '<p class="text-muted">Belum ada tipe kamar. Tambahkan tipe kamar baru.</p>';
                    return;
                }
                
                let html = '';
                data.forEach((roomType, index) => {
                    const roomsCount = roomType.rooms ? roomType.rooms.length : 0;
                    html += `
                        <div class="d-flex justify-content-between align-items-center p-3 border rounded mb-2">
                            <div>
                                <h6 class="mb-1">${roomType.name}</h6>
                                <small class="text-muted">Kode: ${roomType.code} | Kapasitas: ${roomType.default_capacity} orang</small>
                                <br>
                                <small class="text-info">${roomsCount} kamar menggunakan tipe ini</small>
                                ${roomType.description ? `<br><small class="text-muted">${roomType.description}</small>` : ''}
                            </div>
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-primary" onclick="editRoomType(${roomType.id})">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" onclick="deleteRoomType(${roomType.id}, '${roomType.name}', ${roomsCount})">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    `;
                });
                container.innerHTML = html;
            })
            .catch(error => {
                console.error('Error loading room types:', error);
                showAlert('danger', 'Gagal memuat tipe kamar');
            });
    }

    // Load amenities from API
    function loadAmenities() {
        fetch('{{ url('/') }}/api/amenities')
            .then(response => response.json())
            .then(data => {
                const container = document.getElementById('amenitiesList');
                
                if (data.length === 0) {
                    container.innerHTML = '<p class="text-muted">Belum ada fasilitas. Tambahkan fasilitas baru.</p>';
                    return;
                }
                
                let html = '';
                data.forEach((amenity) => {
                    const statusBadge = amenity.is_active ? 
                        '<span class="badge bg-success">Aktif</span>' : 
                        '<span class="badge bg-secondary">Nonaktif</span>';
                    
                    const categoryNames = {
                        'basic': 'Dasar',
                        'comfort': 'Kenyamanan',
                        'entertainment': 'Hiburan',
                        'service': 'Layanan',
                        'bathroom': 'Kamar Mandi'
                    };
                    
                    html += `
                        <div class="d-flex justify-content-between align-items-center p-3 border rounded mb-2">
                            <div>
                                <h6 class="mb-1">
                                    ${amenity.icon ? `<i class="${amenity.icon}"></i> ` : ''}
                                    ${amenity.name}
                                </h6>
                                <small class="text-muted">Kategori: ${categoryNames[amenity.category] || amenity.category}</small>
                                ${statusBadge}
                            </div>
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-primary" onclick="editAmenity(${amenity.id})">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" onclick="deleteAmenity(${amenity.id}, '${amenity.name}')">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    `;
                });
                container.innerHTML = html;
            })
            .catch(error => {
                console.error('Error loading amenities:', error);
                showAlert('danger', 'Gagal memuat fasilitas');
            });
    }

    // Add room type form submit
    document.getElementById('addRoomTypeForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const data = {
            name: formData.get('name'),
            code: formData.get('code'),
            description: formData.get('description'),
            default_capacity: parseInt(formData.get('default_capacity')),
            is_active: true
        };
        
        fetch('{{ url('/') }}/api/room-types', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                showAlert('success', result.message);
                const modal = bootstrap.Modal.getInstance(document.getElementById('addRoomTypeModal'));
                modal.hide();
                this.reset();
                loadRoomTypes();
            } else {
                showAlert('danger', result.message || 'Gagal menambahkan tipe kamar');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('danger', 'Terjadi kesalahan saat menambahkan tipe kamar');
        });
    });

    // Edit room type
    function editRoomType(id) {
        fetch(`{{ url('/') }}/api/room-types/${id}`)
            .then(response => response.json())
            .then(roomType => {
                document.getElementById('editRoomTypeId').value = id;
                document.getElementById('editRoomTypeName').value = roomType.name;
                document.getElementById('editRoomTypeCode').value = roomType.code;
                document.getElementById('editRoomTypeDescription').value = roomType.description || '';
                document.getElementById('editRoomTypeDefaultCapacity').value = roomType.default_capacity;
                
                const modal = new bootstrap.Modal(document.getElementById('editRoomTypeModal'));
                modal.show();
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('danger', 'Gagal memuat data tipe kamar');
            });
    }

    // Edit room type form submit
    document.getElementById('editRoomTypeForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const id = formData.get('id');
        const data = {
            name: formData.get('name'),
            code: formData.get('code'),
            description: formData.get('description'),
            default_capacity: parseInt(formData.get('default_capacity'))
        };
        
        fetch(`{{ url('/') }}/api/room-types/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                showAlert('success', result.message);
                const modal = bootstrap.Modal.getInstance(document.getElementById('editRoomTypeModal'));
                modal.hide();
                loadRoomTypes();
            } else {
                showAlert('danger', result.message || 'Gagal memperbarui tipe kamar');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('danger', 'Terjadi kesalahan saat memperbarui tipe kamar');
        });
    });

    // Delete room type
    function deleteRoomType(id, name, roomsCount) {
        if (roomsCount > 0) {
            showAlert('warning', `Tidak dapat menghapus tipe kamar "${name}" karena masih digunakan oleh ${roomsCount} kamar.`);
            return;
        }
        
        if (confirm(`Apakah Anda yakin ingin menghapus tipe kamar "${name}"?`)) {
            fetch(`{{ url('/') }}/api/room-types/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    showAlert('success', result.message);
                    loadRoomTypes();
                } else {
                    showAlert('danger', result.message || 'Gagal menghapus tipe kamar');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('danger', 'Terjadi kesalahan saat menghapus tipe kamar');
            });
        }
    }

    // Add amenity form submit
    document.getElementById('addAmenityForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const data = {
            name: formData.get('name'),
            icon: formData.get('icon'),
            category: formData.get('category'),
            is_active: formData.get('is_active') ? true : false
        };
        
        fetch('{{ url('/') }}/api/amenities', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                showAlert('success', result.message);
                const modal = bootstrap.Modal.getInstance(document.getElementById('addAmenityModal'));
                modal.hide();
                this.reset();
                loadAmenities();
            } else {
                showAlert('danger', result.message || 'Gagal menambahkan fasilitas');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('danger', 'Terjadi kesalahan saat menambahkan fasilitas');
        });
    });

    // Edit amenity
    function editAmenity(id) {
        fetch(`{{ url('/') }}/api/amenities/${id}`)
            .then(response => response.json())
            .then(amenity => {
                document.getElementById('editAmenityId').value = id;
                document.getElementById('editAmenityName').value = amenity.name;
                document.getElementById('editAmenityIcon').value = amenity.icon || '';
                document.getElementById('editAmenityCategory').value = amenity.category;
                document.getElementById('editAmenityIsActive').checked = amenity.is_active;
                
                const modal = new bootstrap.Modal(document.getElementById('editAmenityModal'));
                modal.show();
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('danger', 'Gagal memuat data fasilitas');
            });
    }

    // Edit amenity form submit
    document.getElementById('editAmenityForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const id = formData.get('id');
        const data = {
            name: formData.get('name'),
            icon: formData.get('icon'),
            category: formData.get('category'),
            is_active: formData.get('is_active') ? true : false
        };
        
        fetch(`{{ url('/') }}/api/amenities/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                showAlert('success', result.message);
                const modal = bootstrap.Modal.getInstance(document.getElementById('editAmenityModal'));
                modal.hide();
                loadAmenities();
            } else {
                showAlert('danger', result.message || 'Gagal memperbarui fasilitas');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('danger', 'Terjadi kesalahan saat memperbarui fasilitas');
        });
    });

    // Delete amenity
    function deleteAmenity(id, name) {
        if (confirm(`Apakah Anda yakin ingin menghapus fasilitas "${name}"?`)) {
            fetch(`{{ url('/') }}/api/amenities/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    showAlert('success', result.message);
                    loadAmenities();
                } else {
                    showAlert('danger', result.message || 'Gagal menghapus fasilitas');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('danger', 'Terjadi kesalahan saat menghapus fasilitas');
            });
        }
    }

    // Save capacity settings
    function saveCapacitySettings() {
        const minCapacity = parseInt(document.getElementById('minCapacity').value);
        const maxCapacity = parseInt(document.getElementById('maxCapacity').value);
        
        if (minCapacity >= maxCapacity) {
            showAlert('danger', 'Kapasitas minimum harus lebih kecil dari kapasitas maksimum!');
            return;
        }
        
        const capacitySettings = {
            min: minCapacity,
            max: maxCapacity
        };
        
        localStorage.setItem('capacitySettings', JSON.stringify(capacitySettings));
        showAlert('success', 'Pengaturan kapasitas berhasil disimpan!');
    }

    // Load capacity settings
    function loadCapacitySettings() {
        const settings = JSON.parse(localStorage.getItem('capacitySettings') || '{"min": 1, "max": 10}');
        document.getElementById('minCapacity').value = settings.min;
        document.getElementById('maxCapacity').value = settings.max;
    }

    // Initialize default data if not exists
    function initializeDefaultData() {
        // Default room types
        if (!localStorage.getItem('roomTypes')) {
            const defaultRoomTypes = [
                { name: 'Single', code: 'single', description: 'Kamar untuk 1 orang', default_capacity: 1 },
                { name: 'Double', code: 'double', description: 'Kamar untuk 2 orang', default_capacity: 2 },
                { name: 'Suite', code: 'suite', description: 'Kamar mewah dengan ruang tamu', default_capacity: 2 },
                { name: 'Deluxe', code: 'deluxe', description: 'Kamar premium dengan fasilitas lengkap', default_capacity: 2 },
                { name: 'Family', code: 'family', description: 'Kamar keluarga untuk 4-6 orang', default_capacity: 4 }
            ];
            localStorage.setItem('roomTypes', JSON.stringify(defaultRoomTypes));
        }
        
        // Default amenities
        if (!localStorage.getItem('amenities')) {
            const defaultAmenities = [
                { name: 'WiFi', icon: 'fas fa-wifi', category: 'basic', is_active: true },
                { name: 'AC', icon: 'fas fa-snowflake', category: 'comfort', is_active: true },
                { name: 'TV', icon: 'fas fa-tv', category: 'entertainment', is_active: true },
                { name: 'Minibar', icon: 'fas fa-glass-martini', category: 'comfort', is_active: true },
                { name: 'Balkon', icon: 'fas fa-door-open', category: 'comfort', is_active: true },
                { name: 'Kamar Mandi Pribadi', icon: 'fas fa-bath', category: 'bathroom', is_active: true },
                { name: 'Room Service', icon: 'fas fa-concierge-bell', category: 'service', is_active: true },
                { name: 'Brankas', icon: 'fas fa-lock', category: 'basic', is_active: true },
                { name: 'Coffee Maker', icon: 'fas fa-coffee', category: 'comfort', is_active: true }
            ];
            localStorage.setItem('amenities', JSON.stringify(defaultAmenities));
        }
    }

    // Initialize page
    document.addEventListener('DOMContentLoaded', function() {
        initializeDefaultData();
        loadRoomTypes();
        loadAmenities();
        loadCapacitySettings();
    });
</script>
@endsection