@extends('admin.layout')

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

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="h3 mb-1">Kelola Booking</h2>
                    <p class="text-muted mb-0">Kelola semua booking hotel dengan mudah</p>
                </div>
                <button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#addBookingModal">
                    <i class="fas fa-plus me-2"></i>Tambah Booking
                </button>
            </div>
        </div>
    </div>

    <!-- Statistik Booking -->
    <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 Booking
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-borderless">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width: 16.66%;">
                                        <i class="fas fa-calendar-check text-primary"></i><br>
                                        <small class="text-muted">Total Booking</small>
                                    </th>
                                    <th class="text-center" style="width: 16.66%;">
                                        <i class="fas fa-calendar-alt text-info"></i><br>
                                        <small class="text-muted">Bulan Ini</small>
                                    </th>
                                    <th class="text-center" style="width: 16.66%;">
                                        <i class="fas fa-calendar-day text-info"></i><br>
                                        <small class="text-muted">Hari Ini</small>
                                    </th>
                                    <th class="text-center" style="width: 16.66%;">
                                        <i class="fas fa-clock text-warning"></i><br>
                                        <small class="text-muted">Pending</small>
                                    </th>
                                    <th class="text-center" style="width: 16.66%;">
                                        <i class="fas fa-check-circle text-success"></i><br>
                                        <small class="text-muted">Terkonfirmasi</small>
                                    </th>
                                    <th class="text-center" style="width: 16.66%;">
                                        <i class="fas fa-sign-in-alt text-primary"></i><br>
                                        <small class="text-muted">Check-in</small>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-center">
                                        <h3 class="text-primary font-weight-bold mb-0">{{ number_format($stats['total_bookings']) }}</h3>
                                        <small class="text-muted">Booking</small>
                                    </td>
                                    <td class="text-center">
                                        <h3 class="text-info font-weight-bold mb-0">{{ number_format($stats['bookings_this_month']) }}</h3>
                                        <small class="text-muted">Booking</small>
                                    </td>
                                    <td class="text-center">
                                        <h3 class="text-info font-weight-bold mb-0">{{ number_format($stats['bookings_today']) }}</h3>
                                        <small class="text-muted">Booking</small>
                                    </td>
                                    <td class="text-center">
                                        <h3 class="text-warning font-weight-bold mb-0">{{ number_format($stats['pending_bookings']) }}</h3>
                                        <small class="text-muted">Menunggu</small>
                                    </td>
                                    <td class="text-center">
                                        <h3 class="text-success font-weight-bold mb-0">{{ number_format($stats['confirmed_bookings']) }}</h3>
                                        <small class="text-muted">Dikonfirmasi</small>
                                    </td>
                                    <td class="text-center">
                                        <h3 class="text-primary font-weight-bold mb-0">{{ number_format($stats['checked_in_bookings']) }}</h3>
                                        <small class="text-muted">Sudah masuk</small>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Additional Statistics Row -->
                    <div class="row mt-3">
                        <div class="col-md-2 text-center">
                            <div class="border-end">
                                <h5 class="text-success mb-1">Rp {{ number_format($stats['total_revenue'], 0, ',', '.') }}</h5>
                                <small class="text-muted">Total Pendapatan</small>
                            </div>
                        </div>
                        <div class="col-md-2 text-center">
                            <div class="border-end">
                                <h5 class="text-success mb-1">Rp {{ number_format($stats['revenue_this_month'], 0, ',', '.') }}</h5>
                                <small class="text-muted">Bulan Ini</small>
                            </div>
                        </div>
                        <div class="col-md-2 text-center">
                            <div class="border-end">
                                <h5 class="text-info mb-1">Rp {{ number_format($stats['avg_booking_value'], 0, ',', '.') }}</h5>
                                <small class="text-muted">Rata-rata</small>
                            </div>
                        </div>
                        <div class="col-md-2 text-center">
                            <div class="border-end">
                                <h5 class="text-primary mb-1">{{ number_format($stats['upcoming_check_ins']) }}</h5>
                                <small class="text-muted">Check-in 7 Hari</small>
                            </div>
                        </div>
                        <div class="col-md-2 text-center">
                            <div class="border-end">
                                <h5 class="text-warning mb-1">{{ number_format($stats['upcoming_check_outs']) }}</h5>
                                <small class="text-muted">Check-out 7 Hari</small>
                            </div>
                        </div>
                        <div class="col-md-2 text-center">
                            <h5 class="text-secondary mb-1">
                                @if($stats['popular_room_types']->count() > 0)
                                    {{ $stats['popular_room_types']->first()->type_name }}
                                @else
                                    -
                                @endif
                            </h5>
                            <small class="text-muted">Tipe Terpopuler</small>
                        </div>
                    </div>
                    
                    <!-- Progress Bar for Booking Status -->
                    <div class="mt-3">
                        <div class="row">
                            <div class="col-md-12">
                                <small class="text-muted">Status Booking:</small>
                                <div class="progress" style="height: 20px;">
                                    @php
                                        $totalActiveBookings = $stats['pending_bookings'] + $stats['confirmed_bookings'] + $stats['checked_in_bookings'] + $stats['completed_bookings'];
                                        $pendingPercentage = $totalActiveBookings > 0 ? ($stats['pending_bookings'] / $totalActiveBookings) * 100 : 0;
                                        $confirmedPercentage = $totalActiveBookings > 0 ? ($stats['confirmed_bookings'] / $totalActiveBookings) * 100 : 0;
                                        $checkedInPercentage = $totalActiveBookings > 0 ? ($stats['checked_in_bookings'] / $totalActiveBookings) * 100 : 0;
                                        $completedPercentage = $totalActiveBookings > 0 ? ($stats['completed_bookings'] / $totalActiveBookings) * 100 : 0;
                                    @endphp
                                    <div class="progress-bar bg-warning" role="progressbar" style="width: {{ $pendingPercentage }}%" 
                                         aria-valuenow="{{ $pendingPercentage }}" aria-valuemin="0" aria-valuemax="100">
                                        {{ number_format($pendingPercentage, 1) }}% Pending
                                    </div>
                                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ $confirmedPercentage }}%" 
                                         aria-valuenow="{{ $confirmedPercentage }}" aria-valuemin="0" aria-valuemax="100">
                                        {{ number_format($confirmedPercentage, 1) }}% Terkonfirmasi
                                    </div>
                                    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $checkedInPercentage }}%" 
                                         aria-valuenow="{{ $checkedInPercentage }}" aria-valuemin="0" aria-valuemax="100">
                                        {{ number_format($checkedInPercentage, 1) }}% Check-in
                                    </div>
                                    <div class="progress-bar bg-info" role="progressbar" style="width: {{ $completedPercentage }}%" 
                                         aria-valuenow="{{ $completedPercentage }}" aria-valuemin="0" aria-valuemax="100">
                                        {{ number_format($completedPercentage, 1) }}% Selesai
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body py-3">
                    <div class="row align-items-center">
                        <div class="col-md-3">
                            <label class="form-label fw-semibold mb-1">Filter Status</label>
                            <select class="form-select" id="statusFilter">
                                <option value="">Semua Status</option>
                                <option value="pending">Pending</option>
                                <option value="confirmed">Dikonfirmasi</option>
                                <option value="checked_in">Check-in</option>
                                <option value="checked_out">Check-out</option>
                                <option value="cancelled">Dibatalkan</option>
                                <option value="completed">Selesai</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-semibold mb-1">Pencarian</label>
                            <input type="text" class="form-control" id="searchInput" placeholder="Cari nama tamu, hotel...">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label fw-semibold mb-1">&nbsp;</label>
                            <button class="btn btn-outline-secondary d-block w-100" onclick="resetFilters()">
                                <i class="fas fa-refresh me-1"></i>Reset
                            </button>
                        </div>
                        <div class="col-md-4 text-end">
                            <small class="text-muted">Total: <span class="fw-bold">{{ $bookings->total() }}</span> booking</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bookings Grid -->
    @if($bookings->count() > 0)
        <div class="row" id="bookingsContainer">
            @foreach($bookings as $booking)
            <div class="col-xl-4 col-lg-6 col-md-6 mb-4 booking-card" 
                 data-status="{{ $booking->status }}" 
                 data-guest="{{ strtolower($booking->guest->name ?? $booking->guest_name ?? '') }}" 
                 data-hotel="{{ strtolower($settings['hotel_name']) }}">
                <div class="card h-100 border-0 shadow-sm hover-shadow">
                    <!-- Card Header -->
                    <div class="card-header bg-white border-bottom-0 pb-0">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="card-title mb-1 fw-bold">#{{ $booking->id }}</h6>
                                <div class="mb-1">
                                    <span class="badge bg-secondary-subtle text-secondary border px-2 py-1" style="font-family: 'Courier New', monospace; font-size: 0.7rem;">
                                        <i class="fas fa-barcode me-1"></i>{{ $booking->booking_code ?? 'BK-' . str_pad($booking->id, 6, '0', STR_PAD_LEFT) }}
                                    </span>
                                </div>
                                <small class="text-muted">{{ $booking->created_at->format('d M Y, H:i') }}</small>
                            </div>
                            <div class="text-end">
                                @switch($booking->status)
                                    @case('pending')
                                        <span class="badge bg-warning-subtle text-warning border border-warning-subtle px-3 py-2">
                                            <i class="fas fa-clock me-1"></i>Pending
                                        </span>
                                        @break
                                    @case('confirmed')
                                        <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2">
                                            <i class="fas fa-check-circle me-1"></i>Dikonfirmasi
                                        </span>
                                        @break
                                    @case('checked_in')
                                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2">
                                            <i class="fas fa-sign-in-alt me-1"></i>Check-in
                                        </span>
                                        @break
                                    @case('checked_out')
                                        <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle px-3 py-2">
                                            <i class="fas fa-sign-out-alt me-1"></i>Check-out
                                        </span>
                                        @break
                                    @case('cancelled')
                                        <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-3 py-2">
                                            <i class="fas fa-times-circle me-1"></i>Dibatalkan
                                        </span>
                                        @break
                                    @case('completed')
                                        <span class="badge bg-info-subtle text-info border border-info-subtle px-3 py-2">
                                            <i class="fas fa-flag-checkered me-1"></i>Selesai
                                        </span>
                                        @break
                                @endswitch
                            </div>
                        </div>
                    </div>

                    <!-- Card Body -->
                    <div class="card-body pt-3">
                        <!-- Guest Info -->
                        <div class="mb-3">
                            <div class="d-flex align-items-center mb-2">
                                <div class="bg-primary-subtle rounded-circle p-2 me-3">
                                    <i class="fas fa-user text-primary"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0 fw-semibold">
                                        {{ $booking->guest->name ?? $booking->guest_name ?? 'Guest' }}
                                    </h6>
                                    <small class="text-muted">
                                        {{ $booking->guest->email ?? $booking->guest_email ?? '' }}
                                    </small>
                                </div>
                            </div>
                            @if($booking->guest->phone ?? $booking->guest_phone)
                                <div class="ms-5">
                                    <small class="text-info">
                                        <i class="fas fa-phone me-1"></i>
                                        {{ $booking->guest->phone ?? $booking->guest_phone }}
                                    </small>
                                </div>
                            @endif
                        </div>

                        <!-- Hotel & Room Info -->
                        <div class="mb-3">
                            <div class="d-flex align-items-center mb-2">
                                <div class="bg-info-subtle rounded-circle p-2 me-3">
                                    <i class="fas fa-building text-info"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0 fw-semibold">{{ $settings['hotel_name'] }}</h6>
                                </div>
                            </div>
                            <div class="ms-5">
                                <span class="badge bg-primary me-2">{{ $booking->room->room_number }}</span>
                                <span class="badge bg-secondary">{{ ucfirst($booking->room->type) }}</span>
                            </div>
                        </div>

                        <!-- Booking Details -->
                        <div class="row g-3 mb-3">
                            <div class="col-6">
                                <div class="text-center p-3 bg-light rounded">
                                    <i class="fas fa-calendar-plus text-success mb-1"></i>
                                    <div class="fw-bold small">Check-in</div>
                                    <div class="text-muted small">{{ $booking->check_in_date->format('d M Y') }}</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center p-3 bg-light rounded">
                                    <i class="fas fa-calendar-minus text-danger mb-1"></i>
                                    <div class="fw-bold small">Check-out</div>
                                    <div class="text-muted small">{{ $booking->check_out_date->format('d M Y') }}</div>
                                </div>
                            </div>
                        </div>

                        <!-- Price & Duration -->
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                @php
                                    $nights = $booking->check_in_date->diffInDays($booking->check_out_date);
                                @endphp
                                <span class="badge bg-secondary-subtle text-secondary border px-3 py-2">
                                    <i class="fas fa-moon me-1"></i>{{ $nights }} malam
                                </span>
                                <span class="badge bg-info-subtle text-info border px-3 py-2 ms-1">
                                    <i class="fas fa-users me-1"></i>{{ $booking->guest_count }} tamu
                                </span>
                            </div>
                            <div class="text-end">
                                <div class="fw-bold text-success h6 mb-0">
                                    Rp {{ number_format($booking->total_price, 0, ',', '.') }}
                                </div>
                                @if($booking->room->price_per_night)
                                    <small class="text-muted">
                                        Rp {{ number_format($booking->room->price_per_night, 0, ',', '.') }}/malam
                                    </small>
                                @endif
                            </div>
                        </div>

                        <!-- Special Requests -->
                        @if($booking->special_requests)
                            <div class="mb-3">
                                <small class="text-muted d-block mb-1">
                                    <i class="fas fa-comment-dots me-1"></i>Permintaan Khusus:
                                </small>
                                <small class="text-dark">{{ $booking->special_requests }}</small>
                            </div>
                        @endif
                    </div>

                    <!-- Card Footer -->
                    <div class="card-footer bg-white border-top-0 pt-0">
                        <div class="d-flex gap-2 justify-content-center">
                            <button class="btn btn-outline-primary btn-sm flex-fill" 
                                    onclick="viewBooking({{ $booking->id }})" 
                                    data-bs-toggle="tooltip" title="Lihat Detail">
                                <i class="fas fa-eye me-1"></i>Detail
                            </button>
                            
                            @if($booking->status == 'pending')
                                <button class="btn btn-outline-success btn-sm flex-fill" 
                                        onclick="confirmBooking({{ $booking->id }})" 
                                        data-bs-toggle="tooltip" title="Konfirmasi">
                                    <i class="fas fa-check me-1"></i>Konfirmasi
                                </button>
                            @endif
                            
                            @if($booking->status == 'confirmed')
                                <button class="btn btn-outline-info btn-sm flex-fill" 
                                        onclick="checkinBooking({{ $booking->id }})" 
                                        data-bs-toggle="tooltip" title="Check-in">
                                    <i class="fas fa-sign-in-alt me-1"></i>Check-in
                                </button>
                            @endif
                            
                            @if($booking->status == 'checked_in')
                                <button class="btn btn-outline-warning btn-sm flex-fill" 
                                        onclick="checkoutBooking({{ $booking->id }})" 
                                        data-bs-toggle="tooltip" title="Check-out">
                                    <i class="fas fa-sign-out-alt me-1"></i>Check-out
                                </button>
                            @endif
                            
                            @if(in_array($booking->status, ['pending', 'confirmed']))
                                <button class="btn btn-outline-danger btn-sm flex-fill" 
                                        onclick="cancelBooking({{ $booking->id }})" 
                                        data-bs-toggle="tooltip" title="Batalkan">
                                    <i class="fas fa-times me-1"></i>Batal
                                </button>
                            @endif
                            
                            @if($booking->status !== 'checked_out')
                                <button class="btn btn-outline-warning btn-sm flex-fill" 
                                        onclick="editBooking({{ $booking->id }})" 
                                        data-bs-toggle="tooltip" title="Edit"
                                        data-booking-id="{{ $booking->id }}"
                                        data-room-id="{{ $booking->room_id }}"
                                        data-room-number="{{ $booking->room->room_number }}"
                                        data-room-type="{{ ucfirst($booking->room->type) }}"
                                        data-room-price="{{ $booking->room->price_per_night }}"
                                        data-status="{{ $booking->status }}"
                                        data-check-in="{{ $booking->check_in_date->format('Y-m-d') }}"
                                        data-check-out="{{ $booking->check_out_date->format('Y-m-d') }}"
                                        data-guest-count="{{ $booking->guest_count }}"
                                        data-total-price="{{ $booking->total_price }}"
                                        data-special-requests="{{ $booking->special_requests }}">
                                    <i class="fas fa-edit me-1"></i>Edit
                                </button>
                            @else
                                <button class="btn btn-secondary btn-sm flex-fill" 
                                        disabled
                                        data-bs-toggle="tooltip" title="Cannot edit checked-out booking">
                                    <i class="fas fa-edit me-1"></i>Edit (Disabled)
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <!-- Pagination -->
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-center mt-4">
                    @include('admin.custom-pagination', ['paginator' => $bookings])
                </div>
            </div>
        </div>
    @else
        <!-- Empty State -->
        <div class="row">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-body text-center py-5">
                        <div class="mb-4">
                            <i class="fas fa-calendar-times fa-4x text-muted opacity-50"></i>
                        </div>
                        <h4 class="text-muted mb-3">Belum ada booking</h4>
                        <p class="text-muted mb-4">Mulai kelola booking hotel dengan menambahkan booking pertama</p>
                        <button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#addBookingModal">
                            <i class="fas fa-plus me-2"></i>Tambah Booking Pertama
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

<!-- Add Booking Modal -->
<div class="modal fade" id="addBookingModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold">
                    <i class="fas fa-plus me-2"></i>Tambah Booking Baru
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="addBookingForm">
                <div class="modal-body p-4">
                    <!-- Hotel info display -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-4">
                                <div class="alert alert-info d-flex align-items-center">
                                    <i class="fas fa-hotel me-2"></i>
                                    <span>Hotel: <strong>{{ $settings['hotel_name'] ?? 'Hotel Management System' }}</strong></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Date Selection First -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="check_in_date" class="form-label fw-semibold">Tanggal Check-in *</label>
                                <input type="date" class="form-control form-control-lg" id="check_in_date" name="check_in_date" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="check_out_date" class="form-label fw-semibold">Tanggal Check-out *</label>
                                <input type="date" class="form-control form-control-lg" id="check_out_date" name="check_out_date" required>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Room Selection After Date -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-4">
                                <label for="room_id" class="form-label fw-semibold">Pilih Kamar *</label>
                                <select class="form-select form-select-lg" id="room_id" name="room_id" required>
                                    <option value="">Pilih tanggal terlebih dahulu untuk melihat kamar yang tersedia</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Room Availability Section -->
                    <div class="row" id="roomAvailabilitySection" style="display: none;">
                        <div class="col-12">
                            <div class="mb-4">
                                <label class="form-label fw-semibold">
                                    <i class="fas fa-calendar-check"></i> Ketersediaan Kamar
                                </label>
                                <div class="card border-info">
                                    <div class="card-header bg-light">
                                        <div class="row align-items-center">
                                            <div class="col">
                                                <h6 class="mb-0 text-info">
                                                    <i class="fas fa-search"></i> Cek Ketersediaan Kamar
                                                </h6>
                                            </div>
                                            <div class="col-auto">
                                                <button type="button" class="btn btn-info btn-sm" onclick="checkRoomAvailability()">
                                                    <i class="fas fa-sync-alt"></i> Cek Ulang
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <!-- Loading State -->
                                        <div id="availabilityLoading" class="text-center py-4" style="display: none;">
                                            <div class="spinner-border text-info" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                            <div class="mt-2 text-muted">Mengecek ketersediaan kamar...</div>
                                        </div>
                                        
                                        <!-- Results -->
                                        <div id="availabilityResults" style="display: none;">
                                            <!-- Results will be populated by JavaScript -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="guest_name" class="form-label fw-semibold">Nama Tamu *</label>
                                <div class="position-relative">
                                    <input type="text" class="form-control form-control-lg" id="guest_name" name="guest_name" 
                                           placeholder="Ketik nama tamu..." autocomplete="off" required>
                                    <div id="guestSuggestions" class="dropdown-menu position-absolute w-100" style="display: none; max-height: 200px; overflow-y: auto; z-index: 1050;">
                                        <!-- Guest suggestions will be loaded here -->
                                    </div>
                                    <button type="button" class="btn btn-outline-success btn-sm mt-2" id="addNewGuestBtn" style="display: none;">
                                        <i class="fas fa-plus"></i> Tambah Tamu Baru
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="guest_email" class="form-label fw-semibold">Email Tamu</label>
                                <input type="email" class="form-control form-control-lg" id="guest_email" name="guest_email">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="guest_phone" class="form-label fw-semibold">Telepon Tamu</label>
                                <input type="text" class="form-control form-control-lg" id="guest_phone" name="guest_phone">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="guest_count" class="form-label fw-semibold">Jumlah Tamu *</label>
                                <select class="form-select form-select-lg" id="guest_count" name="guest_count" required>
                                    <option value="">Pilih Jumlah</option>
                                    <option value="1">1 Orang</option>
                                    <option value="2">2 Orang</option>
                                    <option value="3">3 Orang</option>
                                    <option value="4">4 Orang</option>
                                    <option value="5">5 Orang</option>
                                    <option value="6">6 Orang</option>
                                    <option value="8">8 Orang</option>
                                    <option value="10">10 Orang</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="status" class="form-label fw-semibold">Status Booking</label>
                                <select class="form-select form-select-lg" id="status" name="status">
                                    <option value="pending">Pending</option>
                                    <option value="confirmed" selected>Dikonfirmasi</option>
                                    <option value="cancelled">Dibatalkan</option>
                                    <option value="completed">Selesai</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="total_price" class="form-label fw-semibold">Total Harga (Rp)</label>
                                <input type="number" class="form-control form-control-lg" id="total_price" name="total_price" min="0" readonly>
                                <small class="text-muted">Akan dihitung otomatis berdasarkan durasi menginap</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label for="special_requests" class="form-label fw-semibold">Permintaan Khusus</label>
                        <textarea class="form-control" id="special_requests" name="special_requests" rows="3" placeholder="Contoh: Kamar non-smoking, lantai tinggi, dll."></textarea>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>Batal
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Booking Modal -->
<div class="modal fade" id="editBookingModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title fw-bold">
                    <i class="fas fa-edit me-2"></i>Edit Booking
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editBookingForm">
                <input type="hidden" id="edit_booking_id" name="booking_id">
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-4" id="edit_room_section">
                                <label for="edit_room_id" class="form-label fw-semibold">Pilih Kamar *</label>
                                <select class="form-select form-select-lg" id="edit_room_id" name="room_id" required>
                                    <option value="">Pilih Kamar</option>
                                    @foreach($rooms as $room)
                                        <option value="{{ $room->id }}" data-price="{{ $room->price_per_night }}">
                                            Kamar {{ $room->room_number }} - {{ $settings['hotel_name'] }} - {{ ucfirst($room->type) }} (Rp {{ number_format($room->price_per_night, 0, ',', '.') }}/malam)
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-4" id="edit_room_display" style="display: none;">
                                <label class="form-label fw-semibold">Kamar</label>
                                <div class="form-control form-control-lg bg-light" id="edit_room_info">
                                    <!-- Room info will be displayed here -->
                                </div>
                                <small class="text-muted">Kamar tidak dapat diubah untuk booking yang sudah check-in</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="edit_check_in_date" class="form-label fw-semibold">Tanggal Check-in *</label>
                                <input type="date" class="form-control form-control-lg" id="edit_check_in_date" name="check_in_date" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="edit_check_out_date" class="form-label fw-semibold">Tanggal Check-out *</label>
                                <input type="date" class="form-control form-control-lg" id="edit_check_out_date" name="check_out_date" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="edit_guest_count" class="form-label fw-semibold">Jumlah Tamu *</label>
                                <select class="form-select form-select-lg" id="edit_guest_count" name="guest_count" required>
                                    <option value="">Pilih Jumlah</option>
                                    <option value="1">1 Orang</option>
                                    <option value="2">2 Orang</option>
                                    <option value="3">3 Orang</option>
                                    <option value="4">4 Orang</option>
                                    <option value="5">5 Orang</option>
                                    <option value="6">6 Orang</option>
                                    <option value="8">8 Orang</option>
                                    <option value="10">10 Orang</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="edit_total_price" class="form-label fw-semibold">Total Harga (Rp)</label>
                                <input type="number" class="form-control form-control-lg" id="edit_total_price" name="total_price" min="0" readonly>
                                <small class="text-muted">Akan dihitung otomatis berdasarkan durasi menginap</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label for="edit_special_requests" class="form-label fw-semibold">Permintaan Khusus</label>
                        <textarea class="form-control" id="edit_special_requests" name="special_requests" rows="3" placeholder="Contoh: Kamar non-smoking, lantai tinggi, dll."></textarea>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>Batal
                    </button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-save me-1"></i>Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Guest Modal -->
<div class="modal fade" id="addGuestModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-user-plus"></i> Tambah Tamu Baru
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="addGuestForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="new_guest_name" class="form-label">Nama Lengkap *</label>
                        <input type="text" class="form-control" id="new_guest_name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="new_guest_email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="new_guest_email" name="email">
                    </div>
                    <div class="mb-3">
                        <label for="new_guest_phone" class="form-label">Nomor Telepon</label>
                        <input type="text" class="form-control" id="new_guest_phone" name="phone">
                    </div>
                    <div class="mb-3">
                        <label for="new_guest_address" class="form-label">Alamat</label>
                        <textarea class="form-control" id="new_guest_address" name="address" rows="3"></textarea>
                    </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-success">
                        <i class="fas fa-save"></i> Simpan Tamu
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.hover-shadow {
    transition: all 0.3s ease;
}

.hover-shadow:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.booking-card {
    transition: all 0.3s ease;
}

.booking-card.filtered-out {
    display: none;
}

.badge {
    font-size: 0.75em;
    font-weight: 500;
}

.bg-primary-subtle {
    background-color: rgba(13, 110, 253, 0.1);
}

.bg-info-subtle {
    background-color: rgba(13, 202, 240, 0.1);
}

.bg-success-subtle {
    background-color: rgba(25, 135, 84, 0.1);
}

.bg-warning-subtle {
    background-color: rgba(255, 193, 7, 0.1);
}

.bg-danger-subtle {
    background-color: rgba(220, 53, 69, 0.1);
}

.bg-secondary-subtle {
    background-color: rgba(108, 117, 125, 0.1);
}

.text-primary { color: #0d6efd !important; }
.text-info { color: #0dcaf0 !important; }
.text-success { color: #198754 !important; }
.text-warning { color: #ffc107 !important; }
.text-danger { color: #dc3545 !important; }
.text-secondary { color: #6c757d !important; }

.border-primary-subtle { border-color: rgba(13, 110, 253, 0.2) !important; }
.border-info-subtle { border-color: rgba(13, 202, 240, 0.2) !important; }
.border-success-subtle { border-color: rgba(25, 135, 84, 0.2) !important; }
.border-warning-subtle { border-color: rgba(255, 193, 7, 0.2) !important; }
.border-danger-subtle { border-color: rgba(220, 53, 69, 0.2) !important; }
.border-secondary-subtle { border-color: rgba(108, 117, 125, 0.2) !important; }

/* Room availability styling for dropdown options */
#room_id option.room-available {
    color: #198754;
    font-weight: 500;
}

#room_id option.room-unavailable {
    color: #dc3545;
    background-color: #f8f9fa;
    font-style: italic;
}

@media (max-width: 768px) {
    .booking-card {
        margin-bottom: 1rem;
    }
    
    .card-footer .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        flex: 1;
    }
    
    .card-footer .btn i {
        display: none;
    }
    
    .card-footer .d-flex {
        flex-wrap: wrap;
        gap: 0.25rem !important;
    }
    
    .card-footer .btn.flex-fill {
        min-width: calc(50% - 0.125rem);
        max-width: calc(50% - 0.125rem);
    }
    
    /* Adjust card header for mobile */
    .card-header .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
    
    .card-header .text-end {
        align-self: flex-end;
    }
    
    /* Optimize guest info section */
    .card-body .d-flex.align-items-center .bg-primary-subtle,
    .card-body .d-flex.align-items-center .bg-info-subtle {
        padding: 0.5rem;
    }
    
    /* Adjust booking details grid */
    .row.g-3 .col-6 .text-center {
        padding: 0.75rem !important;
    }
    
    .row.g-3 .col-6 .text-center .small {
        font-size: 0.7rem !important;
    }
    
    /* Price section adjustments */
    .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
    
    .d-flex.justify-content-between.align-items-center .text-end {
        align-self: flex-end;
        text-align: right !important;
    }
}

@media (max-width: 576px) {
    /* Extra small screens - single column layout */
    .col-xl-4.col-lg-6.col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .card-footer .btn.flex-fill {
        min-width: 100%;
        max-width: 100%;
        margin-bottom: 0.25rem;
    }
    
    .card-footer .d-flex {
        flex-direction: column;
    }
    
    /* Compact card header */
    .card-header {
        padding: 0.75rem 1rem 0.5rem 1rem;
    }
    
    .card-body {
        padding: 0.75rem 1rem;
    }
    
    .card-footer {
        padding: 0.5rem 1rem 0.75rem 1rem;
    }
    
    /* Smaller badges and text */
    .badge {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .card-title {
        font-size: 1rem !important;
    }
    
    .fw-semibold {
        font-size: 0.9rem;
    }
    
    .small, small {
        font-size: 0.75rem !important;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    /* Tablet landscape - 2 columns */
    .col-xl-4.col-lg-6.col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* Desktop - 2 columns */
    .col-xl-4.col-lg-6.col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 1200px) {
    /* Large desktop - 3 columns */
    .col-xl-4.col-lg-6.col-md-6 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* Additional responsive improvements */
@media (max-width: 991px) {
    /* Filter section improvements for tablets and mobile */
    .row.align-items-center .col-md-3,
    .row.align-items-center .col-md-2,
    .row.align-items-center .col-md-4 {
        margin-bottom: 0.75rem;
    }
    
    .row.align-items-center .col-md-4.text-end {
        text-align: left !important;
    }
}
</style>
@endsection

@section('scripts')
<script>
    let guests = [];
    let rooms = [];
    let selectedGuestId = null;

    // Initialize tooltips and load data
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
        
        // Load initial data
        loadGuests();
        // Initialize room dropdown with message to select dates first
        loadAvailableRooms();
    });

    // Load all rooms with availability status
    function loadAvailableRooms(checkInDate = null, checkOutDate = null) {
        const roomSelect = document.getElementById('room_id');
        roomSelect.innerHTML = '<option value="">Memuat kamar...</option>';
        
        // Load all rooms from API
        fetch('{{ url('/') }}/api/rooms')
            .then(response => response.json())
            .then(data => {
                if (data.success && data.data && data.data.length > 0) {
                    roomSelect.innerHTML = '<option value="">Pilih Kamar</option>';
                    
                    // If dates are provided, check availability for each room
                    if (checkInDate && checkOutDate) {
                        // Check availability for each room
                        const availabilityPromises = data.data.map(room => {
                            return fetch('{{ url('/') }}/api/check-availability', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                                },
                                body: JSON.stringify({
                                    room_id: room.id,
                                    check_in_date: checkInDate,
                                    check_out_date: checkOutDate
                                })
                            })
                            .then(response => response.json())
                            .then(availabilityData => {
                                return {
                                    ...room,
                                    isAvailableForDates: availabilityData.success && availabilityData.available
                                };
                            })
                            .catch(() => {
                                return {
                                    ...room,
                                    isAvailableForDates: room.status === 'available'
                                };
                            });
                        });
                        
                        Promise.all(availabilityPromises).then(roomsWithAvailability => {
                            roomsWithAvailability.forEach(room => {
                                const option = document.createElement('option');
                                option.value = room.id;
                                
                                // Determine availability status
                                const isAvailable = room.isAvailableForDates && room.status === 'available';
                                const statusText = isAvailable ? '✓ Tersedia' : '✗ Tidak Tersedia';
                                const statusClass = isAvailable ? 'room-available' : 'room-unavailable';
                                
                                option.textContent = `Kamar ${room.room_number} - ${room.type} - Rp ${parseInt(room.price_per_night).toLocaleString('id-ID')}/malam (${statusText})`;
                                option.dataset.price = room.price_per_night;
                                option.dataset.status = room.status;
                                option.className = statusClass;
                                
                                // Disable option if room is not available
                                if (!isAvailable) {
                                    option.disabled = true;
                                }
                                
                                roomSelect.appendChild(option);
                            });
                        });
                    } else {
                        // No dates provided, show all rooms with general status
                        data.data.forEach(room => {
                            const option = document.createElement('option');
                            option.value = room.id;
                            
                            // Determine room availability status based on room status only
                            const isAvailable = room.status === 'available';
                            const statusText = isAvailable ? '✓ Tersedia' : '✗ Tidak Tersedia';
                            const statusClass = isAvailable ? 'room-available' : 'room-unavailable';
                            
                            option.textContent = `Kamar ${room.room_number} - ${room.type} - Rp ${parseInt(room.price_per_night).toLocaleString('id-ID')}/malam (${statusText})`;
                            option.dataset.price = room.price_per_night;
                            option.dataset.status = room.status;
                            option.className = statusClass;
                            
                            // Disable option if room is not available
                            if (!isAvailable) {
                                option.disabled = true;
                            }
                            
                            roomSelect.appendChild(option);
                        });
                    }
                    
                    rooms = data.data;
                } else {
                    console.error('Invalid rooms data format:', data);
                    roomSelect.innerHTML = '<option value="">Error memuat kamar</option>';
                    showNotification('Format data kamar tidak valid', 'error');
                }
            })
            .catch(error => {
                console.error('Error loading rooms:', error);
                roomSelect.innerHTML = '<option value="">Error memuat kamar</option>';
                showNotification('Gagal memuat data kamar', 'error');
            });
    }
    
    // Fallback function to load all available rooms (original behavior)
    function loadAllAvailableRooms() {
        const roomSelect = document.getElementById('room_id');
        roomSelect.innerHTML = '<option value="">Memuat kamar...</option>';
        
        fetch('{{ url('/') }}/api/rooms?status=available')
            .then(response => response.json())
            .then(data => {
                if (data.success && data.data) {
                    rooms = data.data;
                    roomSelect.innerHTML = '<option value="">Pilih Kamar</option>';
                    
                    rooms.forEach(room => {
                        roomSelect.innerHTML += `
                            <option value="${room.id}" data-price="${room.price_per_night}">
                                Kamar ${room.room_number} - ${room.type} (Rp ${new Intl.NumberFormat('id-ID').format(room.price_per_night)}/malam)
                            </option>
                        `;
                    });
                } else {
                    console.error('Invalid rooms data format:', data);
                    roomSelect.innerHTML = '<option value="">Error memuat kamar</option>';
                    showNotification('Format data kamar tidak valid', 'error');
                }
            })
            .catch(error => {
                console.error('Error loading rooms:', error);
                roomSelect.innerHTML = '<option value="">Error memuat kamar</option>';
                showNotification('Gagal memuat data kamar', 'error');
            });
    }

    // Load guests
    function loadGuests() {
        fetch('{{ url('/') }}/api/guests')
            .then(response => response.json())
            .then(data => {
                if (data.success && data.data) {
                    guests = data.data;
                } else {
                    console.error('Invalid guests data format:', data);
                    guests = [];
                }
            })
            .catch(error => {
                console.error('Error loading guests:', error);
                guests = [];
            });
    }


     
     // Room selection change handler
     document.getElementById('room_id').addEventListener('change', function() {
         calculateTotalPrice();
     });
     
     // Date change handlers
     document.getElementById('check_in_date').addEventListener('change', function() {
         const checkInDate = this.value;
         const checkOutInput = document.getElementById('check_out_date');
         if (checkInDate) {
             const nextDay = new Date(checkInDate);
             nextDay.setDate(nextDay.getDate() + 1);
             checkOutInput.setAttribute('min', nextDay.toISOString().split('T')[0]);
         }
         calculateTotalPrice();
     });
     
     document.getElementById('check_out_date').addEventListener('change', function() {
         calculateTotalPrice();
     });
     
     // Calculate total price function
     function calculateTotalPrice() {
         const roomSelect = document.getElementById('room_id');
         const checkInDate = document.getElementById('check_in_date').value;
         const checkOutDate = document.getElementById('check_out_date').value;
         const totalPriceInput = document.getElementById('total_price');
         
         if (!roomSelect.value || !checkInDate || !checkOutDate) {
             totalPriceInput.value = '';
             return;
         }
         
         const selectedOption = roomSelect.options[roomSelect.selectedIndex];
         const roomPrice = parseInt(selectedOption.dataset.price || 0);
         
         const checkIn = new Date(checkInDate);
         const checkOut = new Date(checkOutDate);
         const nights = Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24));
         
         if (nights > 0) {
             const totalPrice = roomPrice * nights;
             totalPriceInput.value = totalPrice;
         } else {
             totalPriceInput.value = '';
         }
     }

    // Guest name input with suggestions
    const guestNameInput = document.getElementById('guest_name');
    const guestSuggestions = document.getElementById('guestSuggestions');
    const addNewGuestBtn = document.getElementById('addNewGuestBtn');
    const guestEmailInput = document.getElementById('guest_email');
    const guestPhoneInput = document.getElementById('guest_phone');

    guestNameInput.addEventListener('input', function() {
        const query = this.value.toLowerCase();
        
        if (query.length < 2) {
            guestSuggestions.style.display = 'none';
            addNewGuestBtn.style.display = 'none';
            selectedGuestId = null;
            return;
        }

        const filteredGuests = guests.filter(guest => 
            guest.name.toLowerCase().includes(query)
        );

        if (filteredGuests.length > 0) {
            let suggestionsHTML = '';
            filteredGuests.forEach(guest => {
                suggestionsHTML += `
                    <button type="button" class="dropdown-item guest-suggestion" data-guest-id="${guest.id}">
                        <div class="fw-bold">${guest.name}</div>
                        <small class="text-muted">${guest.email || ''} ${guest.phone || ''}</small>
                    </button>
                `;
            });
            
            guestSuggestions.innerHTML = suggestionsHTML;
            guestSuggestions.style.display = 'block';
            addNewGuestBtn.style.display = 'block';
            
            // Add click handlers for suggestions
            document.querySelectorAll('.guest-suggestion').forEach(btn => {
                btn.addEventListener('click', function() {
                    const guestId = this.dataset.guestId;
                    const guest = guests.find(g => g.id == guestId);
                    
                    if (guest) {
                        selectedGuestId = guest.id;
                        guestNameInput.value = guest.name;
                        guestEmailInput.value = guest.email || '';
                        guestPhoneInput.value = guest.phone || '';
                        guestSuggestions.style.display = 'none';
                        addNewGuestBtn.style.display = 'none';
                    }
                });
            });
        } else {
            guestSuggestions.style.display = 'none';
            addNewGuestBtn.style.display = 'block';
            selectedGuestId = null;
        }
    });

    // Add new guest button handler
    addNewGuestBtn.addEventListener('click', function() {
        const currentName = guestNameInput.value;
        document.getElementById('new_guest_name').value = currentName;
        
        const addGuestModal = new bootstrap.Modal(document.getElementById('addGuestModal'));
        addGuestModal.show();
    });

    // Add guest form submission
    document.getElementById('addGuestForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const guestData = {
            name: formData.get('name'),
            email: formData.get('email'),
            phone: formData.get('phone'),
            address: formData.get('address')
        };

        fetch('{{ url('/') }}/api/guests', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(guestData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Add to guests array
                guests.push(data.guest);
                
                // Fill form with new guest data
                selectedGuestId = data.guest.id;
                guestNameInput.value = data.guest.name;
                guestEmailInput.value = data.guest.email || '';
                guestPhoneInput.value = data.guest.phone || '';
                
                // Hide modals and suggestions
                const addGuestModal = bootstrap.Modal.getInstance(document.getElementById('addGuestModal'));
                addGuestModal.hide();
                guestSuggestions.style.display = 'none';
                addNewGuestBtn.style.display = 'none';
                
                // Reset form
                this.reset();
                
                showNotification('Tamu baru berhasil ditambahkan!', 'success');
            } else {
                showNotification('Error: ' + (data.message || 'Gagal menambahkan tamu'), 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Terjadi kesalahan saat menambahkan tamu', 'error');
        });
    });

    // Hide suggestions when clicking outside
    document.addEventListener('click', function(e) {
        if (!guestNameInput.contains(e.target) && !guestSuggestions.contains(e.target)) {
            guestSuggestions.style.display = 'none';
        }
    });

    // Global variables for room services
    let currentBookingId = null;
    let roomServices = [];

    // Room service functions
    function addRoomService() {
        const serviceName = document.getElementById('detail-service-name').value.trim();
        const serviceQuantity = parseInt(document.getElementById('detail-service-quantity').value) || 1;
        const servicePrice = parseFloat(document.getElementById('detail-service-price').value) || 0;
        const serviceNotes = document.getElementById('detail-service-notes').value.trim();
        
        if (!serviceName || servicePrice <= 0) {
            showNotification('Nama layanan dan harga harus diisi dengan benar', 'error');
            return;
        }
        
        if (!currentBookingId) {
            showNotification('Booking ID tidak ditemukan', 'error');
            return;
        }
        
        // Show loading notification
        showNotification('Menambahkan layanan kamar...', 'info');
        
        // Send to backend
        fetch('{{ url('/') }}/api/room-services', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                booking_id: currentBookingId,
                service_name: serviceName,
                quantity: serviceQuantity,
                price: servicePrice,
                notes: serviceNotes
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Layanan kamar berhasil ditambahkan', 'success');
                
                // Clear form
                document.getElementById('detail-service-name').value = '';
                document.getElementById('detail-service-quantity').value = '1';
                document.getElementById('detail-service-price').value = '';
                document.getElementById('detail-service-notes').value = '';
                
                // Reload room services
                loadRoomServices(currentBookingId);
            } else {
                showNotification('Error: ' + (data.message || 'Gagal menambahkan layanan'), 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Terjadi kesalahan saat menambahkan layanan', 'error');
        });
    }
    
    function loadRoomServices(bookingId) {
        fetch(`{{ url('/') }}/api/room-services/${bookingId}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                roomServices = data.data || [];
                displayRoomServices();
            } else {
                console.error('Failed to load room services:', data.message);
                roomServices = [];
                displayRoomServices();
            }
        })
        .catch(error => {
            console.error('Error loading room services:', error);
            roomServices = [];
            displayRoomServices();
        });
    }
    
    function displayRoomServices() {
        const container = document.getElementById('detail-services-container');
        if (!container) return;
        
        if (roomServices.length === 0) {
            container.innerHTML = '<p class="text-muted">Belum ada layanan kamar yang ditambahkan.</p>';
            return;
        }
        
        let html = '';
        let totalAmount = 0;
        
        roomServices.forEach((service, index) => {
            const subtotal = service.quantity * service.unit_price;
            totalAmount += subtotal;
            
            html += `
                <div class="service-item border rounded p-3 mb-2">
                    <div class="d-flex justify-content-between align-items-start">
                        <div class="flex-grow-1">
                            <h6 class="mb-1">${service.service_name}</h6>
                            <p class="text-muted mb-1">Jumlah: ${service.quantity} × Rp ${service.unit_price.toLocaleString('id-ID')}</p>
                            ${service.notes ? `<p class="text-muted small mb-0">Catatan: ${service.notes}</p>` : ''}
                        </div>
                        <div class="text-end">
                            <strong>Rp ${subtotal.toLocaleString('id-ID')}</strong>
                            <br>
                            <button type="button" class="btn btn-sm btn-outline-danger mt-1" onclick="removeRoomService(${service.id})">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
        });
        
        html += `
            <div class="border-top pt-2 mt-3">
                <div class="d-flex justify-content-between">
                    <strong>Total Layanan Kamar:</strong>
                    <strong>Rp ${totalAmount.toLocaleString('id-ID')}</strong>
                </div>
            </div>
        `;
        
        container.innerHTML = html;
    }
    
    function removeRoomService(serviceId) {
        showNotification('Menghapus layanan kamar...', 'info');
        
        fetch(`/api/room-services/${serviceId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Layanan kamar berhasil dihapus', 'success');
                loadRoomServices(currentBookingId);
            } else {
                showNotification('Error: ' + (data.message || 'Gagal menghapus layanan'), 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Terjadi kesalahan saat menghapus layanan', 'error');
        });
    }

    // Filter and Search functionality
    function filterBookings() {
        const statusFilter = document.getElementById('statusFilter').value.toLowerCase();
        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
        const bookingCards = document.querySelectorAll('.booking-card');
        
        bookingCards.forEach(card => {
            const status = card.dataset.status;
            const guest = card.dataset.guest;
            const hotel = card.dataset.hotel;
            
            const statusMatch = !statusFilter || status === statusFilter;
            const searchMatch = !searchTerm || guest.includes(searchTerm) || hotel.includes(searchTerm);
            
            if (statusMatch && searchMatch) {
                card.classList.remove('filtered-out');
            } else {
                card.classList.add('filtered-out');
            }
        });
    }

    // Event listeners for filters
    document.getElementById('statusFilter').addEventListener('change', filterBookings);
    document.getElementById('searchInput').addEventListener('input', filterBookings);

    // Reset filters
    function resetFilters() {
        document.getElementById('statusFilter').value = '';
        document.getElementById('searchInput').value = '';
        filterBookings();
    }

    // Calculate total price when dates change
    function setupPriceCalculation(prefix = '') {
        const checkInId = prefix + 'check_in_date';
        const checkOutId = prefix + 'check_out_date';
        const roomId = prefix + 'room_id';
        const totalPriceId = prefix + 'total_price';
        
        document.getElementById(checkInId).addEventListener('change', () => calculateTotalPrice(prefix));
        document.getElementById(checkOutId).addEventListener('change', () => calculateTotalPrice(prefix));
        document.getElementById(roomId).addEventListener('change', () => calculateTotalPrice(prefix));
    }

    function calculateTotalPrice(prefix = '') {
        const checkIn = document.getElementById(prefix + 'check_in_date').value;
        const checkOut = document.getElementById(prefix + 'check_out_date').value;
        const roomSelect = document.getElementById(prefix + 'room_id');
        
        if (checkIn && checkOut) {
            const startDate = new Date(checkIn);
            const endDate = new Date(checkOut);
            const nights = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
            
            if (nights > 0) {
                let pricePerNight = 0;
                
                // For edit form, get price from room data or existing booking data
                if (prefix === 'edit_') {
                    // Try to get price from room select if available
                    if (roomSelect && roomSelect.value) {
                        const selectedOption = roomSelect.options[roomSelect.selectedIndex];
                        pricePerNight = parseInt(selectedOption.getAttribute('data-price')) || 0;
                    } else {
                        // For checked-in bookings where room select is not available,
                        // get price from the room display data
                        const roomDisplay = document.getElementById('edit_room_display');
                        if (roomDisplay && roomDisplay.dataset.roomPrice) {
                            pricePerNight = parseInt(roomDisplay.dataset.roomPrice) || 0;
                        }
                    }
                } else {
                    // For new booking form
                    if (roomSelect && roomSelect.value) {
                        const selectedOption = roomSelect.options[roomSelect.selectedIndex];
                        pricePerNight = parseInt(selectedOption.getAttribute('data-price')) || 0;
                    }
                }
                
                if (pricePerNight > 0) {
                    const totalPrice = nights * pricePerNight;
                    document.getElementById(prefix + 'total_price').value = totalPrice;
                }
            }
        }
    }

    // Setup price calculation for both forms
    setupPriceCalculation('');
    setupPriceCalculation('edit_');

    // Simple and reliable edit booking function
    function editBooking(bookingId) {
        // Get button element
        const button = event.target.closest('button');
        
        if (!button || !button.dataset.bookingId) {
            showNotification('Error: Data booking tidak ditemukan', 'error');
            return;
        }
        
        // Populate form with data from button attributes
        const bookingData = {
            id: button.dataset.bookingId,
            room_id: button.dataset.roomId,
            room_number: button.dataset.roomNumber,
            room_type: button.dataset.roomType,
            status: button.dataset.status,
            check_in_date: button.dataset.checkIn,
            check_out_date: button.dataset.checkOut,
            guest_count: button.dataset.guestCount,
            total_price: button.dataset.totalPrice,
            special_requests: button.dataset.specialRequests || ''
        };
        
        // Populate form fields
        document.getElementById('edit_booking_id').value = bookingData.id;
        document.getElementById('edit_check_in_date').value = bookingData.check_in_date;
        document.getElementById('edit_check_out_date').value = bookingData.check_out_date;
        document.getElementById('edit_guest_count').value = bookingData.guest_count;
        document.getElementById('edit_total_price').value = bookingData.total_price;
        document.getElementById('edit_special_requests').value = bookingData.special_requests;
        
        // Set minimum dates based on booking status
        const editCheckInInput = document.getElementById('edit_check_in_date');
        const editCheckOutInput = document.getElementById('edit_check_out_date');
        
        if (bookingData.status === 'checked_in') {
            // For checked-in bookings, disable check-in date and set minimum checkout to tomorrow
            editCheckInInput.setAttribute('readonly', 'readonly');
            editCheckInInput.style.backgroundColor = '#f8f9fa';
            editCheckInInput.style.cursor = 'not-allowed';
            
            // Set minimum checkout date to tomorrow from check-in date
            const checkInDate = new Date(bookingData.check_in_date);
            checkInDate.setDate(checkInDate.getDate() + 1);
            editCheckOutInput.setAttribute('min', checkInDate.toISOString().split('T')[0]);
        } else {
            // For other bookings, allow editing check-in date but set minimum to today
            editCheckInInput.removeAttribute('readonly');
            editCheckInInput.style.backgroundColor = '';
            editCheckInInput.style.cursor = '';
            
            const today = new Date().toISOString().split('T')[0];
            editCheckInInput.setAttribute('min', today);
            
            // Set minimum checkout date based on check-in date
            if (bookingData.check_in_date) {
                const checkInDate = new Date(bookingData.check_in_date);
                checkInDate.setDate(checkInDate.getDate() + 1);
                editCheckOutInput.setAttribute('min', checkInDate.toISOString().split('T')[0]);
            }
        }
        
        // Handle room selection based on booking status
        const roomSection = document.getElementById('edit_room_section');
        const roomDisplay = document.getElementById('edit_room_display');
        const roomInfo = document.getElementById('edit_room_info');
        const roomSelect = document.getElementById('edit_room_id');
        
        if (bookingData.status === 'checked_in') {
            // For checked-in bookings, show read-only room info
            roomSection.style.display = 'none';
            roomDisplay.style.display = 'block';
            roomSelect.removeAttribute('required'); // Remove required to prevent validation error
            
            // Add room price data attribute for price calculation
            roomDisplay.dataset.roomPrice = button.dataset.roomPrice || '0';
            
            roomInfo.innerHTML = `
                <div class="d-flex align-items-center">
                    <span class="badge bg-primary me-2">${bookingData.room_number}</span>
                    <span class="badge bg-secondary me-2">${bookingData.room_type}</span>
                    <span class="text-muted">- {{ $settings['hotel_name'] }}</span>
                </div>
            `;
            
            // Set hidden input for room_id
            let hiddenRoomInput = document.getElementById('edit_hidden_room_id');
            if (!hiddenRoomInput) {
                hiddenRoomInput = document.createElement('input');
                hiddenRoomInput.type = 'hidden';
                hiddenRoomInput.id = 'edit_hidden_room_id';
                hiddenRoomInput.name = 'room_id';
                document.getElementById('editBookingForm').appendChild(hiddenRoomInput);
            }
            hiddenRoomInput.value = bookingData.room_id;
        } else {
            // For other bookings, show dropdown
            roomSection.style.display = 'block';
            roomDisplay.style.display = 'none';
            roomSelect.setAttribute('required', 'required'); // Restore required attribute
            roomSelect.value = bookingData.room_id;
            
            // Remove hidden input if exists
            const hiddenRoomInput = document.getElementById('edit_hidden_room_id');
            if (hiddenRoomInput) {
                hiddenRoomInput.remove();
            }
        }
        
        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('editBookingModal'));
        modal.show();
        
        showNotification('Form edit berhasil dimuat', 'success');
    }

    // Notification system
    function showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `alert alert-${type === 'error' ? 'danger' : type} alert-dismissible fade show position-fixed`;
        notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
        notification.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        document.body.appendChild(notification);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            if (notification.parentNode) {
                notification.remove();
            }
        }, 5000);
    }

    // View booking function
    function viewBooking(bookingId) {
        // Show loading notification
        showNotification('Memuat detail booking...', 'info');
        
        fetch(`{{ url('/') }}/api/bookings/${bookingId}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.data) {
                const booking = data.data;
                
                // Fill guest information
                document.getElementById('detail-guest-name').textContent = booking.guest_name || booking.guest?.name || '-';
                document.getElementById('detail-guest-email').textContent = booking.guest_email || booking.guest?.email || '-';
                document.getElementById('detail-guest-phone').textContent = booking.guest_phone || booking.guest?.phone || '-';
                document.getElementById('detail-guest-count').textContent = booking.guests || '-';
                
                // Fill room information
                document.getElementById('detail-hotel-name').textContent = booking.room?.hotel?.name || 'Hotel';
                document.getElementById('detail-room-number').textContent = booking.room?.room_number || '-';
                document.getElementById('detail-room-type').textContent = booking.room?.type || '-';
                document.getElementById('detail-room-capacity').textContent = booking.room?.capacity || '-';
                
                // Fill booking information
                const checkIn = new Date(booking.check_in_date);
                const checkOut = new Date(booking.check_out_date);
                const duration = Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24));
                
                document.getElementById('detail-check-in').textContent = checkIn.toLocaleDateString('id-ID', {
                    weekday: 'long',
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
                
                // Show actual check-in date if guest has checked in and it's different from scheduled date
                const actualCheckInSection = document.getElementById('detail-actual-check-in-section');
                if (booking.actual_check_in_time && booking.status === 'checked_in') {
                    const actualCheckInDate = new Date(booking.actual_check_in_time);
                    const scheduledCheckInDate = new Date(booking.check_in_date);
                    
                    // Only show if actual check-in date is different from scheduled date
                    if (actualCheckInDate.toDateString() !== scheduledCheckInDate.toDateString()) {
                        document.getElementById('detail-actual-check-in').textContent = actualCheckInDate.toLocaleDateString('id-ID', {
                            weekday: 'long',
                            year: 'numeric',
                            month: 'long',
                            day: 'numeric'
                        });
                        actualCheckInSection.style.display = 'block';
                    } else {
                        actualCheckInSection.style.display = 'none';
                    }
                } else {
                    actualCheckInSection.style.display = 'none';
                }
                document.getElementById('detail-check-out').textContent = checkOut.toLocaleDateString('id-ID', {
                    weekday: 'long',
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
                document.getElementById('detail-duration').textContent = duration;
                
                // Fill status
                const statusElement = document.getElementById('detail-status');
                const statusText = {
                    'pending': 'Pending',
                    'confirmed': 'Dikonfirmasi',
                    'checked_in': 'Check-in',
                    'checked_out': 'Check-out',
                    'cancelled': 'Dibatalkan',
                    'completed': 'Selesai'
                };
                const statusClass = {
                    'pending': 'bg-warning',
                    'confirmed': 'bg-success',
                    'checked_in': 'bg-primary',
                    'checked_out': 'bg-secondary',
                    'cancelled': 'bg-danger',
                    'completed': 'bg-info'
                };
                statusElement.textContent = statusText[booking.status] || booking.status;
                statusElement.className = `badge ${statusClass[booking.status] || 'bg-secondary'}`;
                
                // Fill payment information
                document.getElementById('detail-price-per-night').textContent = 'Rp ' + (booking.room?.price_per_night || 0).toLocaleString('id-ID');
                document.getElementById('detail-total-price').textContent = 'Rp ' + (booking.total_price || 0).toLocaleString('id-ID');
                
                const bookingDate = new Date(booking.created_at);
                document.getElementById('detail-booking-date').textContent = bookingDate.toLocaleDateString('id-ID', {
                    weekday: 'long',
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
                
                document.getElementById('detail-booking-code').textContent = booking.booking_code || `BK-${String(booking.id).padStart(6, '0')}`;
                
                // Handle special requests
                const specialRequestsSection = document.getElementById('detail-special-requests-section');
                if (booking.special_requests) {
                    document.getElementById('detail-special-requests').textContent = booking.special_requests;
                    specialRequestsSection.style.display = 'block';
                } else {
                    specialRequestsSection.style.display = 'none';
                }
                
                // Store booking ID for room services
                currentBookingId = booking.id;
                
                // Load existing room services
                loadRoomServices(booking.id);
                
                // Show modal
                const modal = new bootstrap.Modal(document.getElementById('bookingDetailModal'));
                modal.show();
            } else {
                showNotification('Error: ' + (data.message || 'Gagal memuat detail booking'), 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Terjadi kesalahan saat memuat detail booking', 'error');
        });
    }

    // Confirm booking function
    function confirmBooking(bookingId) {
        showConfirmModal('Apakah Anda yakin ingin mengkonfirmasi booking ini?', function() {
            // Show loading notification
            showNotification('Sedang memproses konfirmasi...', 'info');
            
            fetch(`{{ url('/api') }}/bookings/${bookingId}/confirm`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showNotification('Booking berhasil dikonfirmasi!', 'success');
                    // Reload page to update status
                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                } else {
                    showNotification('Error: ' + (data.message || 'Gagal mengkonfirmasi booking'), 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Terjadi kesalahan saat mengkonfirmasi booking', 'error');
            });
        }, 'Konfirmasi Booking');
    }

    // Cancel booking function
    function cancelBooking(bookingId) {
        showConfirmModal('Apakah Anda yakin ingin membatalkan booking ini?', function() {
            // Show loading notification
            showNotification('Sedang memproses pembatalan...', 'info');
            
            fetch(`/api/bookings/${bookingId}/cancel`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showNotification('Booking berhasil dibatalkan!', 'warning');
                    // Reload page to update status
                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                } else {
                    showNotification('Error: ' + (data.message || 'Gagal membatalkan booking'), 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Terjadi kesalahan saat membatalkan booking', 'error');
            });
        }, 'Batalkan Booking');
    }

    // Check-in booking function
    function checkinBooking(bookingId) {
        showConfirmModal('Apakah Anda yakin ingin melakukan check-in untuk booking ini?', function() {
            // Show loading notification
            showNotification('Sedang memproses check-in...', 'info');
            
            fetch(`{{ url('/api') }}/bookings/${bookingId}/checkin`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showNotification('Check-in berhasil! Kamar sekarang ditempati.', 'success');
                    // Reload page to update status
                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                } else {
                    showNotification('Error: ' + (data.message || 'Gagal melakukan check-in'), 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Terjadi kesalahan saat melakukan check-in', 'error');
            });
        }, 'Check-in Tamu');
    }

    // Check-out booking function
    function checkoutBooking(bookingId) {
        // Fetch booking details first
        fetch(`{{ url('/') }}/api/bookings/${bookingId}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showCheckoutModal(data.data);
                } else {
                    showNotification('Error: ' + (data.message || 'Gagal mengambil data booking'), 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Terjadi kesalahan saat mengambil data booking', 'error');
            });
    }

    // Show checkout modal with booking details
    function showCheckoutModal(booking) {
        // Populate booking details with null checks
        const guestNameEl = document.getElementById('checkout-guest-name');
        const guestEmailEl = document.getElementById('checkout-guest-email');
        const guestPhoneEl = document.getElementById('checkout-guest-phone');
        const roomNumberEl = document.getElementById('checkout-room-number');
        const roomTypeEl = document.getElementById('checkout-room-type');
        const checkInEl = document.getElementById('checkout-check-in');
        const checkOutEl = document.getElementById('checkout-check-out');
        const durationEl = document.getElementById('checkout-duration');
        const roomPriceEl = document.getElementById('checkout-room-price');
        const checkoutFormEl = document.getElementById('checkoutForm');
        
        if (guestNameEl) guestNameEl.textContent = booking.guest_name || booking.guest?.name || '-';
        if (guestEmailEl) guestEmailEl.textContent = booking.guest_email || booking.guest?.email || '-';
        if (guestPhoneEl) guestPhoneEl.textContent = booking.guest_phone || booking.guest?.phone || '-';
        if (roomNumberEl) roomNumberEl.textContent = booking.room?.room_number || '-';
        if (roomTypeEl) roomTypeEl.textContent = booking.room?.type || '-';
        
        if (checkInEl) {
            checkInEl.textContent = new Date(booking.check_in_date).toLocaleDateString('id-ID', {
                weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
            });
        }
        
        if (checkOutEl) {
            checkOutEl.textContent = new Date(booking.check_out_date).toLocaleDateString('id-ID', {
                weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
            });
        }
        
        const nights = Math.ceil((new Date(booking.check_out_date) - new Date(booking.check_in_date)) / (1000 * 60 * 60 * 24));
        if (durationEl) durationEl.textContent = nights;
        if (roomPriceEl) roomPriceEl.textContent = 'Rp ' + parseInt(booking.total_price).toLocaleString('id-ID');
        
        // Store booking ID for checkout process
        if (checkoutFormEl) checkoutFormEl.setAttribute('data-booking-id', booking.id);
        
        // Load and display room services
        loadCheckoutRoomServices(booking.id);
        
        // Show modal
        const modalEl = document.getElementById('checkoutModal');
        if (modalEl) {
            const modal = new bootstrap.Modal(modalEl);
            modal.show();
        }
    }

    // Load room services for checkout modal
    function loadCheckoutRoomServices(bookingId) {
        fetch(`{{ url('/') }}/api/room-services/${bookingId}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    displayCheckoutRoomServices(data.data);
                } else {
                    console.error('Failed to load room services:', data.message);
                    displayCheckoutRoomServices([]);
                }
            })
            .catch(error => {
                console.error('Error loading room services:', error);
                displayCheckoutRoomServices([]);
            });
    }

    // Display room services in checkout modal
    function displayCheckoutRoomServices(services) {
        const container = document.getElementById('checkout-services-list');
        const section = document.getElementById('checkout-services-section');
        
        if (!container || !section) return;
        
        if (services.length === 0) {
            section.style.display = 'none';
            updateCheckoutTotals(0);
            return;
        }
        
        section.style.display = 'block';
        
        let html = '<div class="table-responsive"><table class="table table-sm">';
        html += '<thead><tr><th>Layanan</th><th>Qty</th><th>Harga Satuan</th><th>Subtotal</th></tr></thead><tbody>';
        
        let totalServices = 0;
        
        services.forEach(service => {
            const subtotal = service.quantity * service.unit_price;
            totalServices += subtotal;
            
            html += `<tr>
                <td>${service.service_name}</td>
                <td>${service.quantity}</td>
                <td>Rp ${parseInt(service.unit_price).toLocaleString('id-ID')}</td>
                <td>Rp ${subtotal.toLocaleString('id-ID')}</td>
            </tr>`;
        });
        
        html += '</tbody></table></div>';
        container.innerHTML = html;
        
        updateCheckoutTotals(totalServices);
    }

    // Update checkout totals
    function updateCheckoutTotals(servicesTotal) {
        const roomPriceEl = document.getElementById('checkout-room-price');
        const servicesTotalEl = document.getElementById('checkout-services-total');
        const grandTotalEl = document.getElementById('checkout-grand-total');
        
        if (!roomPriceEl || !servicesTotalEl || !grandTotalEl) return;
        
        // Get room price (remove 'Rp ' and convert to number)
        const roomPriceText = roomPriceEl.textContent.replace('Rp ', '').replace(/\./g, '');
        const roomPrice = parseInt(roomPriceText) || 0;
        
        // Update services total
        servicesTotalEl.textContent = 'Rp ' + servicesTotal.toLocaleString('id-ID');
        
        // Calculate and update grand total
        const grandTotal = roomPrice + servicesTotal;
        grandTotalEl.textContent = 'Rp ' + grandTotal.toLocaleString('id-ID');
    }

    // Form submissions
    document.getElementById('addBookingForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const bookingData = {
            room_id: formData.get('room_id'),
            check_in_date: formData.get('check_in_date'),
            check_out_date: formData.get('check_out_date'),
            guests: formData.get('guest_count'),
            total_price: formData.get('total_price'),
            special_requests: formData.get('special_requests'),
            status: formData.get('status'),
            guest_id: selectedGuestId,
            guest_name: formData.get('guest_name'),
            guest_email: formData.get('guest_email'),
            guest_phone: formData.get('guest_phone')
        };

        fetch('{{ url('/') }}/api/bookings', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(bookingData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Booking baru berhasil ditambahkan!', 'success');
                
                // Hide modal and reset form
                const modal = bootstrap.Modal.getInstance(document.getElementById('addBookingModal'));
                modal.hide();
                this.reset();
                selectedGuestId = null;
                
                // Reload page to show new booking
                setTimeout(() => {
                    location.reload();
                }, 1500);
            } else {
                let errorMessage = data.message || 'Gagal menambahkan booking';
                
                // Show detailed validation errors if available
                if (data.errors) {
                    const errorDetails = Object.values(data.errors).flat().join(', ');
                    errorMessage += ': ' + errorDetails;
                }
                
                showNotification('Error: ' + errorMessage, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Terjadi kesalahan saat menambahkan booking', 'error');
        });
    });

    document.getElementById('editBookingForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const bookingId = formData.get('booking_id');
        const bookingData = {
            room_id: formData.get('room_id'),
            check_in_date: formData.get('check_in_date'),
            check_out_date: formData.get('check_out_date'),
            guest_count: formData.get('guest_count'),
            total_price: formData.get('total_price'),
            special_requests: formData.get('special_requests')
        };

        fetch(`http://127.0.0.1:8000/api/bookings/${bookingId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(bookingData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Booking berhasil diupdate!', 'success');
                
                // Hide modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('editBookingModal'));
                modal.hide();
                
                // Reload page to show updated booking
                setTimeout(() => {
                    location.reload();
                }, 1500);
            } else {
                showNotification('Error: ' + (data.message || 'Gagal mengupdate booking'), 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Terjadi kesalahan saat mengupdate booking', 'error');
        });
    });

    // Reset form when modal is hidden
    document.getElementById('addBookingModal').addEventListener('hidden.bs.modal', function() {
        document.getElementById('addBookingForm').reset();
        document.getElementById('room_id').innerHTML = '<option value="">Pilih tanggal terlebih dahulu untuk melihat kamar yang tersedia</option>';
        selectedGuestId = null;
        guestSuggestions.style.display = 'none';
        addNewGuestBtn.style.display = 'none';
        // Hide room availability section
        document.getElementById('roomAvailabilitySection').style.display = 'none';
    });

    // Set minimum date to today
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('check_in_date').setAttribute('min', today);
    // Don't set minimum date for edit form - it will be handled in editBooking function
    
    // Update checkout minimum date when checkin changes
    document.getElementById('check_in_date').addEventListener('change', function() {
        const checkInDate = this.value;
        const checkOutInput = document.getElementById('check_out_date');
        if (checkInDate) {
            const nextDay = new Date(checkInDate);
            nextDay.setDate(nextDay.getDate() + 1);
            checkOutInput.setAttribute('min', nextDay.toISOString().split('T')[0]);
        }
        
        // Load available rooms when both dates are selected
        const checkOutDate = checkOutInput.value;
        if (checkInDate && checkOutDate) {
            loadAvailableRooms(checkInDate, checkOutDate);
        } else {
            // Reset room dropdown if dates are incomplete
            loadAvailableRooms();
        }
        
        // Auto check availability when dates change
        autoCheckAvailability();
    });
    
    document.getElementById('check_out_date').addEventListener('change', function() {
        const checkOutDate = this.value;
        const checkInDate = document.getElementById('check_in_date').value;
        
        // Load available rooms when both dates are selected
        if (checkInDate && checkOutDate) {
            loadAvailableRooms(checkInDate, checkOutDate);
        } else {
            // Reset room dropdown if dates are incomplete
            loadAvailableRooms();
        }
        
        // Auto check availability when dates change
        autoCheckAvailability();
    });
    
    document.getElementById('room_id').addEventListener('change', function() {
        // Auto check availability when room changes
        autoCheckAvailability();
    });
    
    document.getElementById('edit_check_in_date').addEventListener('change', function() {
        const checkInDate = this.value;
        const checkOutInput = document.getElementById('edit_check_out_date');
        if (checkInDate) {
            const nextDay = new Date(checkInDate);
            nextDay.setDate(nextDay.getDate() + 1);
            checkOutInput.setAttribute('min', nextDay.toISOString().split('T')[0]);
        }
    });
    
    // Room Availability Functions
    function checkRoomAvailability() {
        const roomId = document.getElementById('room_id').value;
        const checkInDate = document.getElementById('check_in_date').value;
        const checkOutDate = document.getElementById('check_out_date').value;
        
        if (!roomId || !checkInDate || !checkOutDate) {
            showNotification('Mohon lengkapi kamar dan tanggal terlebih dahulu', 'warning');
            return;
        }
        
        // Show loading
        document.getElementById('availabilityLoading').style.display = 'block';
        document.getElementById('availabilityResults').style.display = 'none';
        
        // Check availability via API
        fetch('{{ url('/') }}/api/check-availability', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                room_id: roomId,
                check_in_date: checkInDate,
                check_out_date: checkOutDate
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayRoomAvailabilityResults(data, roomId, checkInDate, checkOutDate);
            } else {
                document.getElementById('availabilityLoading').style.display = 'none';
                document.getElementById('availabilityResults').style.display = 'block';
                document.getElementById('availabilityResults').innerHTML = '<div class="alert alert-danger">Error: ' + (data.message || 'Gagal mengecek ketersediaan') + '</div>';
            }
        })
        .catch(error => {
            console.error('Error checking availability:', error);
            document.getElementById('availabilityLoading').style.display = 'none';
            document.getElementById('availabilityResults').style.display = 'block';
            document.getElementById('availabilityResults').innerHTML = '<div class="alert alert-danger">Terjadi kesalahan saat mengecek ketersediaan kamar</div>';
        });
    }
    
    function displayRoomAvailabilityResults(apiData, roomId, checkInDate, checkOutDate) {
        // Hide loading
        document.getElementById('availabilityLoading').style.display = 'none';
        document.getElementById('availabilityResults').style.display = 'block';
        
        const resultsContainer = document.getElementById('availabilityResults');
        
        // Check if apiData exists and has the expected structure
        if (!apiData || typeof apiData.available === 'undefined') {
            resultsContainer.innerHTML = '<div class="alert alert-danger">Error: Invalid response from server</div>';
            return;
        }
        
        if (apiData.available) {
            resultsContainer.innerHTML = `
                <div class="alert alert-success">
                    <h6><i class="fas fa-check-circle"></i> Kamar Tersedia</h6>
                    <p class="mb-0">Kamar dapat dipesan untuk periode ${formatDate(checkInDate)} - ${formatDate(checkOutDate)}</p>
                </div>
                <div class="availability-summary p-3 bg-light rounded">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-2">
                                <strong>Detail Kamar:</strong>
                                <div class="small text-muted mt-1">
                                    ${apiData.room ? `
                                        <div><i class="fas fa-bed"></i> ${apiData.room.type} - ${apiData.room.room_number}</div>
                                        <div><i class="fas fa-money-bill"></i> Rp ${parseInt(apiData.room.price_per_night).toLocaleString('id-ID')} / malam</div>
                                        <div><i class="fas fa-users"></i> Kapasitas: ${apiData.room.capacity} orang</div>
                                    ` : ''}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="text-success">
                                <i class="fas fa-check-circle"></i> Siap untuk booking
                            </div>
                        </div>
                    </div>
                </div>
            `;
        } else {
            resultsContainer.innerHTML = `
                <div class="alert alert-danger">
                    <h6><i class="fas fa-times-circle"></i> Kamar Tidak Tersedia</h6>
                    <p class="mb-0">Kamar sudah terpesan untuk periode ${formatDate(checkInDate)} - ${formatDate(checkOutDate)}</p>
                </div>
                ${apiData.conflicting_bookings && apiData.conflicting_bookings.length > 0 ? `
                    <div class="mt-3">
                        <h6>Booking yang Bertabrakan:</h6>
                        <div class="list-group">
                            ${apiData.conflicting_bookings.map(booking => `
                                <div class="list-group-item">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <strong>${booking.guest_name}</strong>
                                            <div class="small text-muted">
                                                ${formatDate(booking.check_in_date)} - ${formatDate(booking.check_out_date)}
                                            </div>
                                        </div>
                                        <span class="badge bg-${booking.status === 'confirmed' ? 'success' : 'warning'}">
                                            ${booking.status}
                                        </span>
                                    </div>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                ` : ''}
            `;
        }
    }
    
    function autoCheckAvailability() {
        const roomId = document.getElementById('room_id').value;
        const checkInDate = document.getElementById('check_in_date').value;
        const checkOutDate = document.getElementById('check_out_date').value;
        
        if (roomId && checkInDate && checkOutDate) {
            document.getElementById('roomAvailabilitySection').style.display = 'block';
            setTimeout(() => {
                checkRoomAvailability();
            }, 500);
        } else {
            document.getElementById('roomAvailabilitySection').style.display = 'none';
        }
    }
    
    function formatDate(dateStr) {
        return new Date(dateStr).toLocaleDateString('id-ID', {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
    }

    // Handle checkout form submission
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🔄 DOM Content Loaded - Setting up checkout form');
            
            const checkoutForm = document.getElementById('checkoutForm');
            const checkoutBtn = document.getElementById('checkoutSubmitBtn');
            console.log('🔍 Looking for checkout form:', checkoutForm);
            console.log('🔍 Looking for checkout button:', checkoutBtn);
            
            if (checkoutForm) {
                console.log('✅ Checkout form found and event listener attached');
                
                // Add both form submit and button click handlers for redundancy
                checkoutForm.addEventListener('submit', handleCheckoutSubmit);
                
                if (checkoutBtn) {
                    checkoutBtn.addEventListener('click', function(e) {
                        console.log('🖱️ Checkout button clicked!');
                        e.preventDefault();
                        handleCheckoutSubmit(e);
                    });
                }
                
                function handleCheckoutSubmit(e) {
                    e.preventDefault();
                    console.log('🚀 Checkout form submitted!');
                    
                    const checkoutForm = document.getElementById('checkoutForm');
                    const bookingId = checkoutForm ? checkoutForm.getAttribute('data-booking-id') : null;
                    console.log('📋 Booking ID:', bookingId);
                    
                    if (!bookingId) {
                        console.error('❌ No booking ID found!');
                        showNotification('Error: Booking ID tidak ditemukan', 'error');
                        return;
                    }
                    
                    // Check CSRF token
                    const csrfToken = document.querySelector('meta[name="csrf-token"]');
                    if (!csrfToken) {
                        console.error('❌ CSRF token not found!');
                        showNotification('Error: CSRF token tidak ditemukan', 'error');
                        return;
                    }
                    console.log('🔐 CSRF token found:', csrfToken.getAttribute('content').substring(0, 10) + '...');
                    
                    // Show loading notification
                    showNotification('Sedang memproses check-out...', 'info');
                    
                    const url = `{{ url('/') }}/api/bookings/${bookingId}/checkout`;
                    console.log('🌐 Making request to:', url);
                    
                    // Send checkout request
                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken.getAttribute('content')
                        }
                    })
                    .then(response => {
                        console.log('📡 Response received!');
                        console.log('📊 Status:', response.status);
                        console.log('📋 Status Text:', response.statusText);
                        console.log('🔗 URL:', response.url);
                        
                        if (!response.ok) {
                            console.error('❌ HTTP Error:', response.status, response.statusText);
                            throw new Error(`HTTP error! status: ${response.status} - ${response.statusText}`);
                        }
                        
                        return response.json();
                    })
                    .then(data => {
                        console.log('✅ Response data received:', data);
                        
                        if (data.success) {
                            console.log('🎉 Checkout successful!');
                            showNotification('Check-out berhasil! Invoice telah digenerate.', 'success');
                            
                            // Hide modal
                            const modal = bootstrap.Modal.getInstance(document.getElementById('checkoutModal'));
                            if (modal) {
                                modal.hide();
                            }
                            
                            // Refresh the page to show updated booking status
                            setTimeout(() => {
                                console.log('🔄 Reloading page...');
                                location.reload();
                            }, 1500);
                        } else {
                            console.error('❌ Checkout failed:', data.message);
                            showNotification('Gagal melakukan check-out: ' + (data.message || 'Unknown error'), 'error');
                        }
                    })
                    .catch(error => {
                        console.error('💥 Checkout error:', error);
                        console.error('💥 Error stack:', error.stack);
                        showNotification('Terjadi kesalahan saat check-out: ' + error.message, 'error');
                    });
                }
            } else {
                console.error('❌ Checkout form not found!');
            }
        });
</script>

<!-- Modal Detail Booking -->
<div class="modal fade" id="bookingDetailModal" tabindex="-1" aria-labelledby="bookingDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="bookingDetailModalLabel">
                    <i class="fas fa-info-circle"></i> Detail Booking
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card border-0 bg-light">
                            <div class="card-body">
                                <h6 class="card-title text-primary mb-3">
                                    <i class="fas fa-user"></i> Informasi Tamu
                                </h6>
                                <div class="mb-2">
                                    <strong>Nama:</strong>
                                    <span id="detail-guest-name">-</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Email:</strong>
                                    <span id="detail-guest-email">-</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Telepon:</strong>
                                    <span id="detail-guest-phone">-</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Jumlah Tamu:</strong>
                                    <span id="detail-guest-count">-</span> orang
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border-0 bg-light">
                            <div class="card-body">
                                <h6 class="card-title text-success mb-3">
                                    <i class="fas fa-bed"></i> Informasi Kamar
                                </h6>
                                <div class="mb-2">
                                    <strong>Hotel:</strong>
                                    <span id="detail-hotel-name">-</span>
                                </div>
                                <div class="mb-2">
                                    <strong>No. Kamar:</strong>
                                    <span id="detail-room-number">-</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Tipe Kamar:</strong>
                                    <span id="detail-room-type">-</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Kapasitas:</strong>
                                    <span id="detail-room-capacity">-</span> orang
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-3">
                    <div class="col-md-6">
                        <div class="card border-0 bg-light">
                            <div class="card-body">
                                <h6 class="card-title text-info mb-3">
                                    <i class="fas fa-calendar"></i> Informasi Booking
                                </h6>
                                <div class="mb-2">
                                    <strong>Check-in:</strong>
                                    <span id="detail-check-in">-</span>
                                    <div id="detail-actual-check-in-section" style="display: none;">
                                        <small class="text-muted">Tanggal Aktual Check-in:</small>
                                        <span id="detail-actual-check-in" class="text-primary fw-bold">-</span>
                                    </div>
                                </div>
                                <div class="mb-2">
                                    <strong>Check-out:</strong>
                                    <span id="detail-check-out">-</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Durasi:</strong>
                                    <span id="detail-duration">-</span> malam
                                </div>
                                <div class="mb-2">
                                    <strong>Status:</strong>
                                    <span id="detail-status" class="badge">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border-0 bg-light">
                            <div class="card-body">
                                <h6 class="card-title text-warning mb-3">
                                    <i class="fas fa-money-bill"></i> Informasi Pembayaran
                                </h6>
                                <div class="mb-2">
                                    <strong>Harga per Malam:</strong>
                                    <span id="detail-price-per-night">-</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Total Harga:</strong>
                                    <span id="detail-total-price" class="text-success fw-bold">-</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Tanggal Booking:</strong>
                                    <span id="detail-booking-date">-</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Kode Booking:</strong>
                                    <span id="detail-booking-code" class="badge bg-secondary">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-3" id="detail-special-requests-section" style="display: none;">
                    <div class="col-12">
                        <div class="card border-0 bg-light">
                            <div class="card-body">
                                <h6 class="card-title text-secondary mb-3">
                                    <i class="fas fa-comment"></i> Permintaan Khusus
                                </h6>
                                <p id="detail-special-requests" class="mb-0">-</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Room Services Section -->
                <div class="row mt-3" id="detail-room-services-section">
                    <div class="col-12">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-info text-white">
                                <h6 class="mb-0">
                                    <i class="fas fa-concierge-bell"></i> Layanan Kamar
                                </h6>
                            </div>
                            <div class="card-body">
                                <!-- Add Service Form -->
                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <label class="form-label">Nama Layanan</label>
                                        <input type="text" id="detail-service-name" class="form-control" placeholder="Contoh: Laundry, Room Service, Makanan">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Jumlah</label>
                                        <input type="number" id="detail-service-quantity" class="form-control" min="1" value="1">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Harga Satuan</label>
                                        <input type="number" id="detail-service-price" class="form-control" min="0" placeholder="0">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Catatan</label>
                                        <input type="text" id="detail-service-notes" class="form-control" placeholder="Opsional">
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                        <button type="button" class="btn btn-info btn-sm" onclick="addRoomService()">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- Services List -->
                                <div id="detail-services-list">
                                    <h6 class="text-muted mb-2">Layanan yang Ditambahkan:</h6>
                                    <div id="detail-services-container">
                                        <!-- Added services will appear here -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Tutup
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Checkout -->
<div class="modal fade" id="checkoutModal" tabindex="-1" aria-labelledby="checkoutModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title" id="checkoutModalLabel">
                    <i class="fas fa-sign-out-alt"></i> Check-out Tamu
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="checkoutForm" method="POST" action="#">
                <div class="modal-body">
                    <!-- Booking Details -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card border-0 bg-light">
                                <div class="card-body">
                                    <h6 class="card-title text-primary mb-3">
                                        <i class="fas fa-user"></i> Informasi Tamu
                                    </h6>
                                    <div class="mb-2">
                                        <strong>Nama:</strong>
                                        <span id="checkout-guest-name">-</span>
                                    </div>
                                    <div class="mb-2">
                                        <strong>Email:</strong>
                                        <span id="checkout-guest-email">-</span>
                                    </div>
                                    <div class="mb-2">
                                        <strong>Telepon:</strong>
                                        <span id="checkout-guest-phone">-</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card border-0 bg-light">
                                <div class="card-body">
                                    <h6 class="card-title text-success mb-3">
                                        <i class="fas fa-bed"></i> Informasi Kamar
                                    </h6>
                                    <div class="mb-2">
                                        <strong>No. Kamar:</strong>
                                        <span id="checkout-room-number">-</span>
                                    </div>
                                    <div class="mb-2">
                                        <strong>Tipe Kamar:</strong>
                                        <span id="checkout-room-type">-</span>
                                    </div>
                                    <div class="mb-2">
                                        <strong>Check-in:</strong>
                                        <span id="checkout-check-in">-</span>
                                    </div>
                                    <div class="mb-2">
                                        <strong>Check-out:</strong>
                                        <span id="checkout-check-out">-</span>
                                    </div>
                                    <div class="mb-2">
                                        <strong>Durasi:</strong>
                                        <span id="checkout-duration">-</span> malam
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Room Services Section -->
                    <div class="card border-0 bg-light mb-4" id="checkout-services-section" style="display: none;">
                        <div class="card-body">
                            <h6 class="card-title text-info mb-3">
                                <i class="fas fa-concierge-bell"></i> Layanan Kamar
                            </h6>
                            <div id="checkout-services-list">
                                <!-- Room services will be populated here -->
                            </div>
                        </div>
                    </div>

                    <!-- Total Calculation -->
                    <div class="card border-0 bg-light">
                        <div class="card-body">
                            <h6 class="card-title text-warning mb-3">
                                <i class="fas fa-calculator"></i> Kalkulasi Total
                            </h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Harga Kamar:</span>
                                        <span id="checkout-room-price" class="fw-bold">Rp 0</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Total Layanan:</span>
                                        <span id="checkout-services-total" class="fw-bold">Rp 0</span>
                                    </div>
                                    <hr>
                                    <div class="d-flex justify-content-between">
                                        <span class="fw-bold">Total Keseluruhan:</span>
                                        <span id="checkout-grand-total" class="fw-bold text-success h5">Rp 0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times"></i> Batal
                    </button>
                    <button type="submit" class="btn btn-warning" id="checkoutSubmitBtn">
                        <i class="fas fa-sign-out-alt"></i> Proses Check-out
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection