@extends('admin.layout')

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

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<!-- Room Statistics -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-chart-bar"></i> Statistik Kamar
                </h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-borderless">
                        <thead>
                            <tr>
                                <th class="text-center" style="width: 25%;">
                                    <i class="fas fa-bed text-primary"></i><br>
                                    <small class="text-muted">Total Kamar</small>
                                </th>
                                <th class="text-center" style="width: 25%;">
                                    <i class="fas fa-check-circle text-success"></i><br>
                                    <small class="text-muted">Kamar Tersedia</small>
                                </th>
                                <th class="text-center" style="width: 25%;">
                                    <i class="fas fa-user-check text-warning"></i><br>
                                    <small class="text-muted">Kamar Terisi</small>
                                </th>
                                <th class="text-center" style="width: 25%;">
                                    <i class="fas fa-chart-line text-info"></i><br>
                                    <small class="text-muted">Total Pendapatan</small>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center">
                                    <h3 class="text-primary font-weight-bold mb-0">{{ number_format($stats['total_rooms']) }}</h3>
                                    <small class="text-muted">Kamar</small>
                                </td>
                                <td class="text-center">
                                    <h3 class="text-success font-weight-bold mb-0">{{ number_format($stats['available_rooms']) }}</h3>
                                    <small class="text-muted">Siap dihuni</small>
                                </td>
                                <td class="text-center">
                                    <h3 class="text-warning font-weight-bold mb-0">{{ number_format($stats['occupied_rooms']) }}</h3>
                                    <small class="text-muted">Sedang dihuni</small>
                                </td>
                                <td class="text-center">
                                    <h3 class="text-info font-weight-bold mb-0">Rp {{ number_format($stats['total_revenue'], 0, ',', '.') }}</h3>
                                    <small class="text-muted">Dari booking aktif</small>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- Additional Statistics Row -->
                <div class="row mt-3">
                    <div class="col-md-3 text-center">
                        <div class="border-end">
                            <h5 class="text-danger mb-1">{{ number_format($stats['maintenance_rooms']) }}</h5>
                            <small class="text-muted">Maintenance</small>
                        </div>
                    </div>
                    <div class="col-md-3 text-center">
                        <div class="border-end">
                            <h5 class="text-dark mb-1">{{ number_format($stats['out_of_order_rooms']) }}</h5>
                            <small class="text-muted">Rusak</small>
                        </div>
                    </div>
                    <div class="col-md-3 text-center">
                        <div class="border-end">
                            <h5 class="text-secondary mb-1">{{ number_format($stats['inactive_rooms']) }}</h5>
                            <small class="text-muted">Tidak Aktif</small>
                        </div>
                    </div>
                    <div class="col-md-3 text-center">
                        <h5 class="text-success mb-1">Rp {{ number_format($stats['avg_room_price'], 0, ',', '.') }}</h5>
                        <small class="text-muted">Harga Rata-rata</small>
                    </div>
                </div>
                
                <!-- Progress Bar for Room Status -->
                <div class="mt-3">
                    <div class="row">
                        <div class="col-md-6">
                            <small class="text-muted">Status Kamar:</small>
                            <div class="progress" style="height: 20px;">
                                @php
                                    $availablePercentage = $stats['total_rooms'] > 0 ? ($stats['available_rooms'] / $stats['total_rooms']) * 100 : 0;
                                    $occupiedPercentage = $stats['total_rooms'] > 0 ? ($stats['occupied_rooms'] / $stats['total_rooms']) * 100 : 0;
                                    $maintenancePercentage = $stats['total_rooms'] > 0 ? ($stats['maintenance_rooms'] / $stats['total_rooms']) * 100 : 0;
                                    $otherPercentage = 100 - $availablePercentage - $occupiedPercentage - $maintenancePercentage;
                                @endphp
                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ $availablePercentage }}%" 
                                     aria-valuenow="{{ $availablePercentage }}" aria-valuemin="0" aria-valuemax="100">
                                    {{ number_format($availablePercentage, 1) }}% Tersedia
                                </div>
                                <div class="progress-bar bg-warning" role="progressbar" style="width: {{ $occupiedPercentage }}%" 
                                     aria-valuenow="{{ $occupiedPercentage }}" aria-valuemin="0" aria-valuemax="100">
                                    {{ number_format($occupiedPercentage, 1) }}% Terisi
                                </div>
                                <div class="progress-bar bg-danger" role="progressbar" style="width: {{ $maintenancePercentage }}%" 
                                     aria-valuenow="{{ $maintenancePercentage }}" aria-valuemin="0" aria-valuemax="100">
                                    {{ number_format($maintenancePercentage, 1) }}% Maintenance
                                </div>
                                @if($otherPercentage > 0)
                                <div class="progress-bar bg-secondary" role="progressbar" style="width: {{ $otherPercentage }}%" 
                                     aria-valuenow="{{ $otherPercentage }}" aria-valuemin="0" aria-valuemax="100">
                                    {{ number_format($otherPercentage, 1) }}% Lainnya
                                </div>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <small class="text-muted">Tingkat Hunian:</small>
                            <div class="progress" style="height: 20px;">
                                @php
                                    $occupancyRate = $stats['total_rooms'] > 0 ? ($stats['occupied_rooms'] / $stats['total_rooms']) * 100 : 0;
                                @endphp
                                <div class="progress-bar bg-info" role="progressbar" style="width: {{ $occupancyRate }}%" 
                                     aria-valuenow="{{ $occupancyRate }}" aria-valuemin="0" aria-valuemax="100">
                                    {{ number_format($occupancyRate, 1) }}% Tingkat Hunian
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <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> Daftar Kamar
                </h5>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addRoomModal">
                    <i class="fas fa-plus"></i> Tambah Kamar
                </button>
            </div>
            <div class="card-body">
                @if($rooms->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Hotel</th>
                                    <th>No. Kamar</th>
                                    <th>Tipe</th>
                                    <th>Kapasitas</th>
                                    <th>Harga/Malam</th>
                                    <th>Status</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($rooms as $room)
                                <tr>
                                    <td>#{{ $room->id }}</td>
                                    <td>
                                        <div>
                                            <strong>{{ $hotelName }}</strong>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-primary">{{ $room->room_number }}</span>
                                    </td>
                                    <td>
                                        @switch($room->type)
                                            @case('single')
                                                <span class="badge bg-info">Single</span>
                                                @break
                                            @case('double')
                                                <span class="badge bg-success">Double</span>
                                                @break
                                            @case('suite')
                                                <span class="badge bg-warning">Suite</span>
                                                @break
                                            @case('deluxe')
                                                <span class="badge bg-danger">Deluxe</span>
                                                @break
                                            @case('family')
                                                <span class="badge bg-purple">Family</span>
                                                @break
                                            @default
                                                <span class="badge bg-secondary">{{ ucfirst($room->type) }}</span>
                                        @endswitch
                                    </td>
                                    <td>
                                        <i class="fas fa-users"></i> {{ $room->capacity }} orang
                                    </td>
                                    <td>
                                        <strong>Rp {{ number_format($room->price_per_night, 0, ',', '.') }}</strong>
                                    </td>
                                    <td>
                                        @switch($room->status)
                                            @case('available')
                                                <span class="badge bg-success">Tersedia</span>
                                                @break
                                            @case('occupied')
                                                <span class="badge bg-warning">Terisi</span>
                                                @break
                                            @case('maintenance')
                                                <span class="badge bg-info">Maintenance</span>
                                                @break
                                            @case('out_of_order')
                                                <span class="badge bg-danger">Rusak</span>
                                                @break
                                            @default
                                                <span class="badge bg-secondary">{{ ucfirst($room->status) }}</span>
                                        @endswitch
                                        
                                        @if(!$room->is_active)
                                            <br><span class="badge bg-dark mt-1">Tidak Aktif</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-sm btn-outline-primary" 
                                                    onclick="viewRoom({{ $room->id }})" 
                                                    data-bs-toggle="tooltip" title="Lihat Detail">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-warning" 
                                                    onclick="editRoom({{ $room->id }})" 
                                                    data-bs-toggle="tooltip" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger" 
                                                    onclick="deleteRoom({{ $room->id }})" 
                                                    data-bs-toggle="tooltip" title="Hapus">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Custom Pagination -->
                    <div class="d-flex justify-content-center mt-4">
                        @include('admin.custom-pagination', ['paginator' => $rooms])
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-bed fa-4x text-muted mb-3"></i>
                        <h5 class="text-muted">Belum ada kamar</h5>
                        <p class="text-muted">Klik tombol "Tambah Kamar" untuk menambah kamar pertama</p>
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addRoomModal">
                            <i class="fas fa-plus"></i> Tambah Kamar
                        </button>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Add Room Modal -->
<div class="modal fade" id="addRoomModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus"></i> Tambah Kamar Baru
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addRoomForm">
                <div class="modal-body">
                    <!-- Hidden hotel field using default hotel -->
                    @if($defaultHotel)
                        <input type="hidden" id="hotel_id" name="hotel_id" value="{{ $defaultHotel->id }}">
                        <div class="alert alert-info mb-3">
                            <i class="fas fa-info-circle"></i> 
                            Kamar akan ditambahkan ke: <strong>{{ $hotelName }}</strong>
                        </div>
                    @endif
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="room_number" class="form-label">Nomor Kamar *</label>
                                <input type="text" class="form-control" id="room_number" name="room_number" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="type" class="form-label">Tipe Kamar *</label>
                                <select class="form-control" id="type" name="type" required>
                                    <option value="">Pilih Tipe</option>
                                    <!-- Options will be populated from localStorage -->
                                </select>
                                <div class="form-text">
                                    <a href="{{ route('admin.room-settings') }}" target="_blank" class="text-decoration-none">
                                        <i class="fas fa-cogs"></i> Kelola Tipe Kamar
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="capacity" class="form-label">Kapasitas *</label>
                                <select class="form-control" id="capacity" name="capacity" required>
                                    <option value="">Pilih Kapasitas</option>
                                    <!-- Options will be populated dynamically -->
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="price_per_night" class="form-label">Harga per Malam (Rp) *</label>
                                <input type="number" class="form-control" id="price_per_night" name="price_per_night" min="0" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-control" id="status" name="status">
                                    <option value="available">Tersedia</option>
                                    <option value="occupied">Terisi</option>
                                    <option value="maintenance">Maintenance</option>
                                    <option value="out_of_order">Rusak</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">Deskripsi</label>
                        <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label for="amenities" class="form-label">Fasilitas</label>
                        <div class="row" id="amenitiesContainer">
                            <!-- Amenities will be populated from localStorage -->
                        </div>
                        <div class="form-text">
                            <a href="{{ route('admin.room-settings') }}" target="_blank" class="text-decoration-none">
                                <i class="fas fa-cogs"></i> Kelola Fasilitas
                            </a>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="image_url" class="form-label">URL Gambar</label>
                        <input type="url" class="form-control" id="image_url" name="image_url">
                    </div>
                    
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" checked>
                        <label class="form-check-label" for="is_active">
                            Kamar Aktif
                        </label>
                    </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>

<!-- View Room Modal -->
<div class="modal fade" id="viewRoomModal" tabindex="-1" aria-labelledby="viewRoomModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewRoomModalLabel">
                    <i class="fas fa-eye"></i> Detail Kamar
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="viewRoomContent">
                <!-- Content will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Room Modal -->
<div class="modal fade" id="editRoomModal" tabindex="-1" aria-labelledby="editRoomModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editRoomModalLabel">
                    <i class="fas fa-edit"></i> Edit Kamar
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editRoomForm">
                <div class="modal-body">
                    <input type="hidden" id="editRoomId" name="room_id">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editRoomNumber" class="form-label">Nomor Kamar <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="editRoomNumber" name="room_number" required>
                            </div>
                            <div class="mb-3">
                                <label for="editRoomType" class="form-label">Tipe Kamar <span class="text-danger">*</span></label>
                                <select class="form-select" id="editRoomType" name="type" required>
                                    <option value="">Pilih Tipe Kamar</option>
                                    <option value="single">Single</option>
                                    <option value="double">Double</option>
                                    <option value="suite">Suite</option>
                                    <option value="deluxe">Deluxe</option>
                                    <option value="family">Family</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="editCapacity" class="form-label">Kapasitas <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="editCapacity" name="capacity" min="1" max="10" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editPricePerNight" class="form-label">Harga per Malam <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="editPricePerNight" name="price_per_night" min="0" step="1000" required>
                            </div>
                            <div class="mb-3">
                                <label for="editStatus" class="form-label">Status <span class="text-danger">*</span></label>
                                <select class="form-select" id="editStatus" name="status" required>
                                    <option value="">Pilih Status</option>
                                    <option value="available">Tersedia</option>
                                    <option value="occupied">Terisi</option>
                                    <option value="maintenance">Maintenance</option>
                                    <option value="out_of_order">Rusak</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="editIsActive" name="is_active" value="1">
                                    <label class="form-check-label" for="editIsActive">
                                        Kamar Aktif
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="editDescription" class="form-label">Deskripsi</label>
                        <textarea class="form-control" id="editDescription" name="description" rows="3" placeholder="Deskripsi kamar (opsional)"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="editAmenities" class="form-label">Fasilitas</label>
                        <input type="text" class="form-control" id="editAmenities" name="amenities" placeholder="Pisahkan dengan koma (contoh: AC, TV, WiFi)">
                        <div class="form-text">Pisahkan setiap fasilitas dengan koma</div>
                    </div>
                    <div class="mb-3">
                        <label for="editImageUrl" class="form-label">URL Gambar</label>
                        <input type="url" class="form-control" id="editImageUrl" name="image_url" placeholder="https://example.com/image.jpg">
                    </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" id="editRoomSubmitBtn">
                        <i class="fas fa-save"></i> Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
    
    // 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>
        `;
        
        // Insert alert at the top of content
        const contentDiv = document.querySelector('.row');
        contentDiv.insertAdjacentHTML('afterbegin', alertHtml);
        
        // Auto dismiss after 5 seconds
        setTimeout(() => {
            const alert = document.querySelector('.alert');
            if (alert) {
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }, 5000);
    }

    // Edit Room Form Submit
    document.getElementById('editRoomForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const submitBtn = document.getElementById('editRoomSubmitBtn');
        const originalText = submitBtn.innerHTML;
        
        // Show loading state
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Menyimpan...';
        submitBtn.disabled = true;
        
        const formData = new FormData(this);
        const roomId = document.getElementById('editRoomId').value;
        
        // Convert amenities string to array
        const amenitiesValue = formData.get('amenities');
        if (amenitiesValue) {
            const amenitiesArray = amenitiesValue.split(',').map(item => item.trim()).filter(item => item);
            formData.delete('amenities');
            amenitiesArray.forEach(amenity => {
                formData.append('amenities[]', amenity);
            });
        }
        
        // Convert FormData to JSON
        const jsonData = {};
        for (let [key, value] of formData.entries()) {
            if (key.endsWith('[]')) {
                const arrayKey = key.slice(0, -2);
                if (!jsonData[arrayKey]) {
                    jsonData[arrayKey] = [];
                }
                jsonData[arrayKey].push(value);
            } else {
                jsonData[key] = value;
            }
        }
        
        // Handle checkbox
        jsonData.is_active = document.getElementById('editIsActive').checked;
        
        fetch(`/api/rooms/${roomId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(jsonData)
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                showAlert('success', result.message || 'Kamar berhasil diperbarui!');
                
                // Close modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('editRoomModal'));
                modal.hide();
                
                // Reset form
                this.reset();
                
                // Reload page to show updated data
                setTimeout(() => {
                    location.reload();
                }, 1500);
            } else {
                showAlert('danger', result.message || 'Gagal memperbarui kamar');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('danger', 'Terjadi kesalahan saat memperbarui kamar');
        })
        .finally(() => {
            // Reset button state
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });
    
    // Add Room Form Submit
    document.getElementById('addRoomForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const data = {
            hotel_id: formData.get('hotel_id'),
            room_number: formData.get('room_number'),
            type: formData.get('type'),
            capacity: formData.get('capacity'),
            price_per_night: formData.get('price_per_night'),
            status: formData.get('status'),
            description: formData.get('description'),
            amenities: formData.getAll('amenities[]'),
            image_url: formData.get('image_url'),
            is_active: formData.get('is_active') ? true : false
        };
        
        // Show loading state
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Menyimpan...';
        submitBtn.disabled = true;
        
        // Send AJAX request to API
        fetch('/api/rooms', {
            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.message) {
                // Show success message
                showAlert('success', result.message);
                
                // Close modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('addRoomModal'));
                modal.hide();
                
                // Reset form
                this.reset();
                
                // Reload page to show new room
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                showAlert('danger', result.errors ? Object.values(result.errors).flat().join(', ') : 'Gagal menyimpan kamar');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('danger', 'Terjadi kesalahan saat menyimpan kamar');
        })
        .finally(() => {
            // Reset button state
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });

    function viewRoom(id) {
        // Show loading in modal
        const modalContent = document.getElementById('viewRoomContent');
        modalContent.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin fa-2x"></i><p class="mt-2">Memuat data kamar...</p></div>';
        
        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('viewRoomModal'));
        modal.show();
        
        // Fetch room data from API
        fetch(`/api/rooms/${id}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(result => {
            if (result.data) {
                const room = result.data;
                const amenitiesHtml = room.amenities && room.amenities.length > 0 
                    ? room.amenities.map(amenity => `<span class="badge bg-info me-1">${amenity}</span>`).join('')
                    : '<span class="text-muted">Tidak ada fasilitas</span>';
                
                const statusBadge = {
                    'available': '<span class="badge bg-success">Tersedia</span>',
                    'occupied': '<span class="badge bg-warning">Terisi</span>',
                    'maintenance': '<span class="badge bg-secondary">Maintenance</span>',
                    'out_of_order': '<span class="badge bg-danger">Rusak</span>'
                };
                
                const typeBadge = {
                    'single': '<span class="badge bg-info">Single</span>',
                    'double': '<span class="badge bg-primary">Double</span>',
                    'suite': '<span class="badge bg-success">Suite</span>',
                    'deluxe': '<span class="badge bg-warning">Deluxe</span>',
                    'family': '<span class="badge bg-danger">Family</span>'
                };
                
                modalContent.innerHTML = `
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Hotel:</label>
                                <p class="mb-0">${room.hotel.name}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Nomor Kamar:</label>
                                <p class="mb-0"><span class="badge bg-primary">${room.room_number}</span></p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Tipe Kamar:</label>
                                <p class="mb-0">${typeBadge[room.type] || room.type}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Kapasitas:</label>
                                <p class="mb-0">${room.capacity} orang</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Harga per Malam:</label>
                                <p class="mb-0 text-success fw-bold">Rp ${new Intl.NumberFormat('id-ID').format(room.price_per_night)}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Status:</label>
                                <p class="mb-0">${statusBadge[room.status] || room.status}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Status Aktif:</label>
                                <p class="mb-0">${room.is_active ? '<span class="badge bg-success">Aktif</span>' : '<span class="badge bg-secondary">Tidak Aktif</span>'}</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Deskripsi:</label>
                                <p class="mb-0">${room.description || 'Tidak ada deskripsi'}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Fasilitas:</label>
                                <div>${amenitiesHtml}</div>
                            </div>
                            ${room.image_url ? `
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Gambar:</label>
                                    <div><img src="${room.image_url}" class="img-fluid rounded" style="max-height: 200px;" alt="Room Image"></div>
                                </div>
                            ` : ''}
                        </div>
                    </div>
                `;
            } else {
                modalContent.innerHTML = '<div class="alert alert-danger">Gagal memuat data kamar</div>';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            modalContent.innerHTML = '<div class="alert alert-danger">Terjadi kesalahan saat memuat data kamar</div>';
        });
    }

    function editRoom(id) {
        // Fetch room data first
        fetch(`/api/rooms/${id}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(result => {
            if (result.data) {
                const room = result.data;
                
                // Fill form with room data
                document.getElementById('editRoomId').value = room.id;
                document.getElementById('editRoomNumber').value = room.room_number;
                document.getElementById('editRoomType').value = room.type;
                document.getElementById('editCapacity').value = room.capacity;
                document.getElementById('editPricePerNight').value = room.price_per_night;
                document.getElementById('editStatus').value = room.status;
                document.getElementById('editIsActive').checked = room.is_active;
                document.getElementById('editDescription').value = room.description || '';
                document.getElementById('editImageUrl').value = room.image_url || '';
                
                // Handle amenities array
                if (room.amenities && Array.isArray(room.amenities)) {
                    document.getElementById('editAmenities').value = room.amenities.join(', ');
                } else {
                    document.getElementById('editAmenities').value = '';
                }
                
                // Show modal
                const modal = new bootstrap.Modal(document.getElementById('editRoomModal'));
                modal.show();
            } else {
                showAlert('danger', 'Gagal memuat data kamar untuk diedit');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('danger', 'Terjadi kesalahan saat memuat data kamar');
        });
    }

    function deleteRoom(id) {
        showConfirmModal('Apakah Anda yakin ingin menghapus kamar ini? Tindakan ini tidak dapat dibatalkan.', function() {
            // Send AJAX request to delete room
            fetch(`/api/rooms/${id}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(result => {
                if (result.message) {
                    // Show success message
                    showAlert('success', result.message);
                    
                    // Reload page to update room list
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    showAlert('danger', 'Terjadi kesalahan saat menghapus kamar');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                if (error.message && error.message.includes('active bookings')) {
                    showAlert('warning', 'Tidak dapat menghapus kamar yang memiliki booking aktif');
                } else {
                    showAlert('danger', 'Terjadi kesalahan saat menghapus kamar');
                }
            });
        }, 'Hapus Kamar');
    }

    // Load room types from localStorage
    function loadRoomTypes() {
        const roomTypes = JSON.parse(localStorage.getItem('roomTypes') || '[]');
        const typeSelect = document.getElementById('type');
        const editTypeSelect = document.getElementById('editType');
        
        // Clear existing options except the first one
        typeSelect.innerHTML = '<option value="">Pilih Tipe</option>';
        if (editTypeSelect) {
            editTypeSelect.innerHTML = '<option value="">Pilih Tipe</option>';
        }
        
        roomTypes.forEach(type => {
            const option = new Option(type.name, type.code);
            typeSelect.appendChild(option);
            
            if (editTypeSelect) {
                const editOption = new Option(type.name, type.code);
                editTypeSelect.appendChild(editOption);
            }
        });
    }

    // Load capacity options from localStorage
    function loadCapacityOptions() {
        const settings = JSON.parse(localStorage.getItem('capacitySettings') || '{"min": 1, "max": 10}');
        const capacitySelect = document.getElementById('capacity');
        const editCapacitySelect = document.getElementById('editCapacity');
        
        // Clear existing options except the first one
        capacitySelect.innerHTML = '<option value="">Pilih Kapasitas</option>';
        if (editCapacitySelect) {
            editCapacitySelect.innerHTML = '<option value="">Pilih Kapasitas</option>';
        }
        
        for (let i = settings.min; i <= settings.max; i++) {
            const option = new Option(`${i} Orang`, i);
            capacitySelect.appendChild(option);
            
            if (editCapacitySelect) {
                const editOption = new Option(`${i} Orang`, i);
                editCapacitySelect.appendChild(editOption);
            }
        }
    }

    // Load amenities from localStorage
    function loadAmenities() {
        const amenities = JSON.parse(localStorage.getItem('amenities') || '[]');
        const container = document.getElementById('amenitiesContainer');
        const editContainer = document.getElementById('editAmenitiesContainer');
        
        // Filter only active amenities
        const activeAmenities = amenities.filter(amenity => amenity.is_active);
        
        let html = '';
        const itemsPerColumn = Math.ceil(activeAmenities.length / 3);
        
        for (let col = 0; col < 3; col++) {
            html += '<div class="col-md-4">';
            
            const startIndex = col * itemsPerColumn;
            const endIndex = Math.min(startIndex + itemsPerColumn, activeAmenities.length);
            
            for (let i = startIndex; i < endIndex; i++) {
                const amenity = activeAmenities[i];
                const id = `amenity_${amenity.name.toLowerCase().replace(/\s+/g, '_')}`;
                const editId = `edit_amenity_${amenity.name.toLowerCase().replace(/\s+/g, '_')}`;
                const icon = amenity.icon ? `<i class="${amenity.icon} me-1"></i>` : '';
                
                html += `
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="${id}" name="amenities[]" value="${amenity.name}">
                        <label class="form-check-label" for="${id}">${icon}${amenity.name}</label>
                    </div>
                `;
            }
            
            html += '</div>';
        }
        
        container.innerHTML = html;
        
        // Also populate edit form if exists
        if (editContainer) {
            editContainer.innerHTML = html.replace(/amenity_/g, 'edit_amenity_').replace(/id="edit_edit_/g, 'id="edit_');
        }
    }

    // Auto-fill capacity based on room type selection
    document.getElementById('type').addEventListener('change', function() {
        const selectedType = this.value;
        const roomTypes = JSON.parse(localStorage.getItem('roomTypes') || '[]');
        const capacitySelect = document.getElementById('capacity');
        
        const roomType = roomTypes.find(type => type.code === selectedType);
        if (roomType && roomType.default_capacity) {
            capacitySelect.value = roomType.default_capacity;
        }
    });

    // Initialize data when page loads
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize default data if not exists (same as room-settings page)
        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));
        }
        
        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));
        }
        
        // Load all dynamic data
        loadRoomTypes();
        loadCapacityOptions();
        loadAmenities();
    });
</script>
@endsection