@extends('admin.layout')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1 text-primary fw-bold">Dashboard</h1>
                    <p class="text-muted mb-0">Selamat datang di sistem manajemen hotel</p>
                </div>
                <div class="text-end">
                    <small class="text-muted">{{ now()->format('l, d F Y') }}</small>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modern Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="modern-stat-card guests-card">
                <div class="card-gradient"></div>
                <div class="card-content">
                    <div class="stat-icon">
                        <div class="icon-wrapper guests-icon">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" fill="currentColor"/>
                                <path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" fill="currentColor"/>
                            </svg>
                        </div>
                    </div>
                    <div class="stat-info">
                        <div class="stat-label">Total Tamu</div>
                        <div class="stat-value">{{ $stats['total_guests'] }}</div>
                        <div class="stat-trend">+12% dari bulan lalu</div>
                    </div>
                </div>
                <div class="card-decoration"></div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="modern-stat-card rooms-card">
                <div class="card-gradient"></div>
                <div class="card-content">
                    <div class="stat-icon">
                        <div class="icon-wrapper rooms-icon">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M20 12V7C20 5.89543 19.1046 5 18 5H6C4.89543 5 4 5.89543 4 7V12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <path d="M4 12V17C4 18.1046 4.89543 19 6 19H18C19.1046 19 20 18.1046 20 17V12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <path d="M4 12H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <path d="M8 15H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </div>
                    </div>
                    <div class="stat-info">
                        <div class="stat-label">Total Kamar</div>
                        <div class="stat-value">{{ $stats['total_rooms'] }}</div>
                        <div class="stat-trend">{{ $stats['available_rooms'] ?? 0 }} tersedia</div>
                    </div>
                </div>
                <div class="card-decoration"></div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="modern-stat-card bookings-card">
                <div class="card-gradient"></div>
                <div class="card-content">
                    <div class="stat-icon">
                        <div class="icon-wrapper bookings-icon">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8 2V6M16 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M9 16L11 18L15 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                    </div>
                    <div class="stat-info">
                        <div class="stat-label">Booking Aktif</div>
                        <div class="stat-value">{{ $stats['active_bookings'] }}</div>
                        <div class="stat-trend">{{ $stats['pending_bookings'] ?? 0 }} menunggu</div>
                    </div>
                </div>
                <div class="card-decoration"></div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="modern-stat-card revenue-card">
                <div class="card-gradient"></div>
                <div class="card-content">
                    <div class="stat-icon">
                        <div class="icon-wrapper revenue-icon">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M3 3V21H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M7 12L12 7L16 11L21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M17 6H21V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                    </div>
                    <div class="stat-info">
                        <div class="stat-label">Revenue Bulan Ini</div>
                        <div class="stat-value">
                            <span class="revenue-amount" id="revenueText">Rp {{ number_format($stats['revenue_this_month'], 0, ',', '.') }}</span>
                        </div>
                        <div class="stat-trend">+8% dari target</div>
                    </div>
                </div>
                <div class="card-decoration"></div>
            </div>
        </div>
    </div>

    <!-- Recent Guests Card -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <div class="bg-info bg-opacity-10 rounded-2 p-2 me-3">
                                <i class="fas fa-users text-info"></i>
                            </div>
                            <div>
                                <h5 class="mb-0 fw-bold text-dark">Tamu Terbaru</h5>
                                <small class="text-muted">Tamu yang baru saja mendaftar</small>
                            </div>
                        </div>
                        <a href="{{ route('admin.guests.index') }}" class="btn btn-outline-info btn-sm">
                            <i class="fas fa-eye me-1"></i> Lihat Semua
                        </a>
                    </div>
                </div>
                <div class="card-body p-0">
                    @if(isset($recent_guests) && $recent_guests->count() > 0)
                        <div class="row g-0">
                            @foreach($recent_guests as $guest)
                                <div class="col-md-6 col-lg-3">
                                    <div class="guest-card-item p-4 border-end border-bottom h-100">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="guest-avatar me-3">
                                                <div class="avatar-circle bg-gradient-primary">
                                                    <i class="fas fa-user text-white"></i>
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-1 fw-bold text-dark">{{ $guest->name }}</h6>
                                                <small class="text-muted">{{ $guest->email }}</small>
                                            </div>
                                        </div>
                                        <div class="guest-stats">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <span class="text-muted small">Total Booking:</span>
                                                <span class="badge bg-primary rounded-pill">{{ $guest->bookings_count }}</span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <span class="text-muted small">Bergabung:</span>
                                                <span class="text-dark small fw-medium">{{ $guest->created_at->format('d M Y') }}</span>
                                            </div>
                                            @if($guest->bookings->first())
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span class="text-muted small">Booking Terakhir:</span>
                                                    <span class="text-success small fw-medium">{{ $guest->bookings->first()->created_at->format('d M Y') }}</span>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="guest-actions mt-3">
                                            <a href="{{ route('admin.guests.index') }}" class="btn btn-sm btn-outline-primary w-100">
                                                <i class="fas fa-eye me-1"></i> Lihat Detail
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-users fa-3x text-muted mb-3"></i>
                            <h6 class="text-muted">Belum Ada Tamu Terdaftar</h6>
                            <p class="text-muted small mb-0">Tamu akan muncul di sini setelah melakukan booking pertama</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Bookings & Quick Stats -->
    <div class="row">
        <div class="col-lg-8 mb-4">
            <div class="card border-0">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <div class="d-flex align-items-center">
                            <div class="bg-primary bg-opacity-10 rounded-2 p-2 me-3">
                                <i class="fas fa-bed text-primary"></i>
                            </div>
                            <h5 class="mb-0 fw-semibold">Timeline Kamar</h5>
                        </div>
                        <div class="d-flex align-items-center">
                            <button class="btn btn-sm btn-outline-primary me-2" onclick="previousWeek()">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <span id="currentWeek" class="fw-semibold mx-2"></span>
                            <button class="btn btn-sm btn-outline-primary ms-2" onclick="nextWeek()">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <div class="input-group me-3" style="width: 250px;">
                                <span class="input-group-text bg-light border-end-0">
                                    <i class="fas fa-search text-muted"></i>
                                </span>
                                <input type="text" class="form-control border-start-0" id="roomSearchInput" 
                                       placeholder="Cari nomor kamar..." onkeyup="searchRooms()">
                                <button class="btn btn-outline-secondary" type="button" onclick="clearSearch()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            <div class="input-group" style="width: 200px;">
                                <span class="input-group-text bg-light border-end-0">
                                    <i class="fas fa-filter text-muted"></i>
                                </span>
                                <select class="form-control border-start-0" id="roomTypeFilter" onchange="filterByRoomType()">
                                    <option value="">Semua Tipe</option>
                                    <option value="single">Single</option>
                                    <option value="double">Double</option>
                                    <option value="suite">Suite</option>
                                    <option value="deluxe">Deluxe</option>
                                    <option value="family">Family</option>
                                </select>
                                <button class="btn btn-outline-secondary" type="button" onclick="clearTypeFilter()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <button class="btn btn-sm btn-outline-info me-2" onclick="scrollToBottom()" title="Scroll ke bawah">
                                <i class="fas fa-arrow-down"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-info" onclick="scrollToTop()" title="Scroll ke atas">
                                <i class="fas fa-arrow-up"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div id="roomTimeline" class="room-timeline"></div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 mb-4">
            <div class="card border-0">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex align-items-center">
                        <div class="bg-success bg-opacity-10 rounded-2 p-2 me-3">
                            <i class="fas fa-chart-pie text-success"></i>
                        </div>
                        <h5 class="mb-0 fw-semibold">Statistik Cepat</h5>
                    </div>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted fw-medium">Total Booking</span>
                            <span class="fw-bold text-primary">{{ $stats['total_bookings'] }}</span>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted fw-medium">Booking Pending</span>
                            <span class="fw-bold text-warning">{{ $stats['pending_bookings'] }}</span>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted fw-medium">Booking Aktif</span>
                            <span class="fw-bold text-success">{{ $stats['active_bookings'] }}</span>
                        </div>
                    </div>
                    
                    <div class="mb-0">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted fw-medium">Tingkat Okupansi</span>
                            <span class="fw-bold">
                                @if($stats['total_rooms'] > 0)
                                    {{ round(($stats['active_bookings'] / $stats['total_rooms']) * 100, 1) }}%
                                @else
                                    0%
                                @endif
                            </span>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div class="progress-bar bg-primary" style="width: @if($stats['total_rooms'] > 0){{ round(($stats['active_bookings'] / $stats['total_rooms']) * 100, 1) }}@else 0 @endif%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card border-0 mt-4">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex align-items-center">
                        <div class="bg-warning bg-opacity-10 rounded-2 p-2 me-3">
                            <i class="fas fa-bolt text-warning"></i>
                        </div>
                        <h5 class="mb-0 fw-semibold">Aksi Cepat</h5>
                    </div>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-3">
                        <button class="btn btn-warning py-3 border-2" data-bs-toggle="modal" data-bs-target="#quickBookingModal">
                            <i class="fas fa-plus-circle me-2"></i>
                            <span class="fw-semibold">Booking Cepat</span>
                        </button>
                        <a href="{{ route('admin.guests.index') }}" class="btn btn-outline-primary py-3 border-2">
                            <i class="fas fa-users me-2"></i>
                            <span class="fw-semibold">Kelola Tamu</span>
                        </a>
                        <a href="{{ route('admin.rooms') }}" class="btn btn-outline-success py-3 border-2">
                            <i class="fas fa-bed me-2"></i>
                            <span class="fw-semibold">Kelola Kamar</span>
                        </a>
                        <a href="{{ route('admin.bookings') }}" class="btn btn-outline-info py-3 border-2">
                            <i class="fas fa-calendar me-2"></i>
                            <span class="fw-semibold">Kelola Booking</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- Welcome Message -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body text-center">
                <h4 class="text-primary">
                    <i class="fas fa-hand-wave"></i> Selamat Datang di Dashboard Admin Hotel!
                </h4>
                <p class="text-muted mb-0">
                    Kelola hotel, kamar, dan booking dengan mudah melalui dashboard ini.
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Quick Booking Modal -->
<div class="modal fade" id="quickBookingModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-warning text-white">
                <h5 class="modal-title">
                    <i class="fas fa-plus-circle"></i> Booking Cepat
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="quickBookingForm">
                <div class="modal-body">
                    <!-- Date Selection Section - Moved to top -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="quick_check_in_date" class="form-label">Tanggal Check-in *</label>
                                <input type="date" class="form-control" id="quick_check_in_date" name="check_in_date" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="quick_check_out_date" class="form-label">Tanggal Check-out *</label>
                                <input type="date" class="form-control" id="quick_check_out_date" name="check_out_date" required>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Room Selection Section -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="quick_room_id" class="form-label">Kamar *</label>
                                <select class="form-control" id="quick_room_id" name="room_id" required>
                                    <option value="">Pilih tanggal terlebih dahulu untuk melihat kamar yang tersedia</option>
                                    <!-- Rooms will be loaded here -->
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Guest Information Section -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="quick_guest_name" class="form-label">Nama Tamu *</label>
                                <div class="position-relative">
                                    <input type="text" class="form-control" id="quick_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 appear here -->
                                    </div>
                                    <button type="button" class="btn btn-outline-success btn-sm position-absolute" 
                                            id="addNewGuestBtn" style="right: 5px; top: 50%; transform: translateY(-50%); display: none;"
                                            onclick="showAddGuestModal()" title="Tambah Tamu Baru">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                                <small class="text-muted">Ketik nama untuk mencari tamu yang sudah terdaftar</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="quick_guest_email" class="form-label">Email Tamu</label>
                                <input type="email" class="form-control" id="quick_guest_email" name="guest_email">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="quick_guest_phone" class="form-label">Telepon Tamu</label>
                                <input type="text" class="form-control" id="quick_guest_phone" name="guest_phone">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="quick_guest_count" class="form-label">Jumlah Tamu *</label>
                                <select class="form-control" id="quick_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>
                    
                    <!-- Room Availability Display -->
                    <div class="row" id="roomAvailabilitySection" style="display: none;">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">
                                    <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">Status Ketersediaan</h6>
                                            </div>
                                            <div class="col-auto">
                                                <button type="button" class="btn btn-sm btn-outline-info" onclick="checkRoomAvailability()">
                                                    <i class="fas fa-sync-alt"></i> Refresh
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="availabilityLoading" class="text-center py-3" style="display: none;">
                                            <div class="spinner-border spinner-border-sm text-info" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                            <span class="ms-2">Memeriksa ketersediaan...</span>
                                        </div>
                                        
                                        <div id="availabilityResults">
                                            <div class="alert alert-info mb-0">
                                                <i class="fas fa-info-circle"></i>
                                                Pilih hotel, kamar, dan tanggal untuk melihat ketersediaan.
                                            </div>
                                        </div>
                                        
                                        <!-- Legend -->
                                        <div class="mt-3 pt-3 border-top">
                                            <small class="text-muted">
                                                <strong>Keterangan:</strong>
                                                <span class="badge bg-success ms-2">Tersedia</span>
                                                <span class="badge bg-warning ms-1">Terbatas</span>
                                                <span class="badge bg-danger ms-1">Penuh</span>
                                                <span class="badge bg-secondary ms-1">Maintenance</span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="quick_status" class="form-label">Status</label>
                                <select class="form-control" id="quick_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-3">
                                <label for="quick_total_price" class="form-label">Total Harga (Rp)</label>
                                <input type="number" class="form-control" id="quick_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-3">
                        <label for="quick_special_requests" class="form-label">Permintaan Khusus</label>
                        <textarea class="form-control" id="quick_special_requests" name="special_requests" rows="3" placeholder="Contoh: Kamar non-smoking, lantai tinggi, dll."></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-warning">
                        <i class="fas fa-save"></i> Simpan Booking
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add New 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="row">
                        <div class="col-md-6">
                            <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>
                        <div class="col-md-6">
                            <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>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <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>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="new_guest_id_number" class="form-label">Nomor Identitas</label>
                                <input type="text" class="form-control" id="new_guest_id_number" name="id_number">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <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>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="new_guest_nationality" class="form-label">Kewarganegaraan</label>
                                <select class="form-control" id="new_guest_nationality" name="nationality">
                                    <option value="">Pilih Kewarganegaraan</option>
                                    <option value="Indonesia" selected>Indonesia</option>
                                    <option value="Malaysia">Malaysia</option>
                                    <option value="Singapore">Singapore</option>
                                    <option value="Thailand">Thailand</option>
                                    <option value="Other">Lainnya</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="new_guest_birth_date" class="form-label">Tanggal Lahir</label>
                                <input type="date" class="form-control" id="new_guest_birth_date" name="birth_date">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save"></i> Simpan Tamu
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 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>
                                <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>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Tutup
                </button>
                <button type="button" class="btn btn-info" id="resendBookingEmailBtn">
                    <i class="fas fa-envelope"></i> Kirim Ulang Email
                </button>
                <button type="button" class="btn btn-primary" id="editBookingBtn">
                    <i class="fas fa-edit"></i> Edit Booking
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Auto refresh stats every 30 seconds
    setInterval(function() {
        // You can add AJAX call here to refresh stats
        console.log('Stats refreshed');
    }, 30000);
    
    function generateReport() {
        alert('Generate report functionality will be implemented here');
    }
    
    // Room Timeline functionality
    let currentWeekStart = new Date();
    let roomsData = @json($rooms ?? []);
    let bookingsData = @json($upcoming_bookings ?? []);
    
    // Set to start of week (Monday)
    currentWeekStart.setDate(currentWeekStart.getDate() - currentWeekStart.getDay() + 1);
    
    function initCalendar() {
        initRoomTimeline();
    }
    
    function initRoomTimeline() {
        renderRoomTimeline();
    }
    
    function renderRoomTimeline() {
        const timeline = document.getElementById('roomTimeline');
        const weekElement = document.getElementById('currentWeek');
        
        // Update week display
        const weekEnd = new Date(currentWeekStart);
        weekEnd.setDate(weekEnd.getDate() + 6);
        
        const options = { day: 'numeric', month: 'short' };
        weekElement.textContent = `${currentWeekStart.toLocaleDateString('id-ID', options)} - ${weekEnd.toLocaleDateString('id-ID', options)}`;
        
        // Clear timeline
        timeline.innerHTML = '';
        
        // Create timeline structure
        const timelineContainer = document.createElement('div');
        timelineContainer.className = 'timeline-container';
        
        // Create header with dates
        const header = document.createElement('div');
        header.className = 'timeline-header';
        
        // Room column header
        const roomHeader = document.createElement('div');
        roomHeader.className = 'room-header';
        roomHeader.innerHTML = `
            <div class="fw-bold">Kamar</div>
            <div class="fw-bold">Kapasitas</div>
            <div class="fw-bold">Status</div>
        `;
        header.appendChild(roomHeader);
        
        // Date headers
        for (let i = 0; i < 7; i++) {
            const date = new Date(currentWeekStart);
            date.setDate(date.getDate() + i);
            
            const dateHeader = document.createElement('div');
            dateHeader.className = 'date-header';
            dateHeader.innerHTML = `
                <div class="fw-bold">${date.getDate()}</div>
                <div class="small">${date.toLocaleDateString('id-ID', { weekday: 'short' })}</div>
            `;
            header.appendChild(dateHeader);
        }
        
        timelineContainer.appendChild(header);
        
        // Create room rows
        const roomRows = document.createElement('div');
        roomRows.className = 'room-rows';
        
        // Get rooms data from backend
        let roomsData = @json($rooms ?? []);
        
        // Ensure roomsData is initialized as empty array if no data
        if (!roomsData) {
            roomsData = [];
        } else {
            // Transform actual rooms data to match expected format
            roomsData = roomsData.map(room => ({
                id: room.id,
                name: `Kamar ${room.room_number}`,
                type: room.type || 'N/A',
                capacity: `${room.capacity} Tempat Tidur`,
                status: room.status || 'Siap'
            }));
        }
        
        // Ensure bookingsData is initialized as empty array if no data
        if (!bookingsData) {
            bookingsData = [];
        }
        
        // Check if there are no rooms available
        if (roomsData.length === 0) {
            const noRoomsMessage = document.createElement('div');
            noRoomsMessage.className = 'no-rooms-message';
            noRoomsMessage.innerHTML = `
                <div class="alert alert-info text-center">
                    <i class="fas fa-info-circle"></i>
                    <h5>Belum Ada Kamar Tersedia</h5>
                    <p>Silakan tambahkan kamar terlebih dahulu di halaman <a href="/admin/rooms" class="alert-link">Manajemen Kamar</a>.</p>
                </div>
            `;
            roomRows.appendChild(noRoomsMessage);
            return;
        }
        
        roomsData.forEach(room => {
            const roomRow = document.createElement('div');
            roomRow.className = 'room-row';
            
            // Room info
            const roomInfo = document.createElement('div');
            roomInfo.className = 'room-info';
            roomInfo.innerHTML = `
                <div class="room-name">${room.name}</div>
                <div class="room-type">${room.type || 'N/A'}</div>
                <div class="room-capacity">${room.capacity}</div>
                <div class="room-status status-${room.status.toLowerCase()}">${room.status}</div>
            `;
            roomRow.appendChild(roomInfo);
            
            // Timeline cells
            for (let i = 0; i < 7; i++) {
                const date = new Date(currentWeekStart);
                date.setDate(date.getDate() + i);
                
                const cell = document.createElement('div');
                cell.className = 'timeline-cell';
                
                // Check for bookings on this date for this room
                const dateStr = date.toISOString().split('T')[0];
                const roomBookings = getRoomBookingsForDate(room.id, dateStr);
                
                if (roomBookings.length > 0) {
                    roomBookings.forEach(booking => {
                        const bookingBar = document.createElement('div');
                        bookingBar.className = `booking-bar status-${booking.status}`;
                        
                        // Calculate booking duration and position
                        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));
                        
                        bookingBar.innerHTML = `
                            <div class="booking-info">
                                <div class="guest-name">${booking.guest_name}</div>
                                <div class="booking-dates">${new Date(booking.check_in_date).toLocaleDateString('id-ID')} - ${new Date(booking.check_out_date).toLocaleDateString('id-ID')}</div>
                                <div class="booking-status">${getStatusText(booking.status)}</div>
                                <div class="click-indicator"><i class="fas fa-info-circle"></i> Klik untuk detail</div>
                            </div>
                        `;
                        
                        // Add tooltip
                        bookingBar.setAttribute('title', 'Klik untuk melihat detail booking');
                        
                        // Add click event to show booking details
                        bookingBar.addEventListener('click', function(e) {
                            e.preventDefault();
                            showBookingDetails(booking);
                        });
                        
                        // Set width based on duration
                        if (duration > 1) {
                            bookingBar.style.width = `${Math.min(duration * 100, 700)}%`;
                            bookingBar.style.zIndex = '10';
                        }
                        
                        cell.appendChild(bookingBar);
                    });
                }
                
                roomRow.appendChild(cell);
            }
            
            roomRows.appendChild(roomRow);
        });
        
        timelineContainer.appendChild(roomRows);
        timeline.appendChild(timelineContainer);
    }
    
    function previousWeek() {
        currentWeekStart.setDate(currentWeekStart.getDate() - 7);
        renderRoomTimeline();
    }
    
    function nextWeek() {
        currentWeekStart.setDate(currentWeekStart.getDate() + 7);
        renderRoomTimeline();
    }
    
    function getRoomBookingsForDate(roomId, dateStr) {
        return bookingsData.filter(booking => {
            const checkIn = new Date(booking.check_in_date);
            const checkOut = new Date(booking.check_out_date);
            const currentDate = new Date(dateStr);
            
            return booking.room_id == roomId && currentDate >= checkIn && currentDate < checkOut;
        });
    }
    
    function getStatusText(status) {
        const statusMap = {
            'confirmed': 'Dikonfirmasi',
            'pending': 'Pending',
            'cancelled': 'Dibatalkan',
            'completed': 'Selesai'
        };
        return statusMap[status] || status;
    }
    
    // Global variable to store current booking
    let currentBooking = null;
    
    // Function to show booking details in modal
    function showBookingDetails(booking) {
        // Store current booking for resend email functionality
        currentBooking = booking;
        
        // Populate guest information
        document.getElementById('detail-guest-name').textContent = booking.guest_name || booking.user?.name || '-';
        document.getElementById('detail-guest-email').textContent = booking.guest_email || booking.user?.email || '-';
        document.getElementById('detail-guest-phone').textContent = booking.guest_phone || booking.user?.phone || '-';
        document.getElementById('detail-guest-count').textContent = booking.guests || '-';
        
        // Populate room information
        document.getElementById('detail-hotel-name').textContent = '{{ $settings['hotel_name'] }}';
        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 || '-';
        
        // Populate booking information
        const checkInDate = new Date(booking.check_in_date);
        const checkOutDate = new Date(booking.check_out_date);
        const duration = Math.ceil((checkOutDate - checkInDate) / (1000 * 60 * 60 * 24));
        
        document.getElementById('detail-check-in').textContent = checkInDate.toLocaleDateString('id-ID', {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
        document.getElementById('detail-check-out').textContent = checkOutDate.toLocaleDateString('id-ID', {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
        document.getElementById('detail-duration').textContent = duration;
        
        // Set status badge with appropriate color
        const statusElement = document.getElementById('detail-status');
        statusElement.textContent = getStatusText(booking.status);
        statusElement.className = 'badge';
        
        switch(booking.status) {
            case 'confirmed':
                statusElement.classList.add('bg-success');
                break;
            case 'pending':
                statusElement.classList.add('bg-warning');
                break;
            case 'cancelled':
                statusElement.classList.add('bg-danger');
                break;
            case 'completed':
                statusElement.classList.add('bg-info');
                break;
            default:
                statusElement.classList.add('bg-secondary');
        }
        
        // Populate payment information
        const pricePerNight = booking.room?.price_per_night || booking.price_per_night || 0;
        document.getElementById('detail-price-per-night').textContent = 'Rp ' + pricePerNight.toLocaleString('id-ID');
        document.getElementById('detail-total-price').textContent = 'Rp ' + (booking.total_price || 0).toLocaleString('id-ID');
        
        const bookingDate = new Date(booking.created_at || booking.booking_date);
        document.getElementById('detail-booking-date').textContent = bookingDate.toLocaleDateString('id-ID', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
        document.getElementById('detail-booking-code').textContent = booking.booking_code || booking.id || '-';
        
        // Handle special requests
        const specialRequestsSection = document.getElementById('detail-special-requests-section');
        const specialRequestsText = document.getElementById('detail-special-requests');
        
        if (booking.special_requests && booking.special_requests.trim() !== '') {
            specialRequestsText.textContent = booking.special_requests;
            specialRequestsSection.style.display = 'block';
        } else {
            specialRequestsSection.style.display = 'none';
        }
        
        // Set up edit button
        const editBtn = document.getElementById('editBookingBtn');
        editBtn.onclick = function() {
            // You can add edit functionality here
            alert('Fitur edit booking akan segera tersedia');
        };
        
        // Set up resend email button
        const resendEmailBtn = document.getElementById('resendBookingEmailBtn');
        resendEmailBtn.onclick = function() {
            resendBookingEmail();
        };
        
        // Show the modal
        const modal = new bootstrap.Modal(document.getElementById('bookingDetailModal'));
        modal.show();
    }
    
    // Function to resend booking email
    function resendBookingEmail() {
        if (!currentBooking || !currentBooking.id) {
            showBookingAlert('error', 'Tidak ada booking yang dipilih');
            return;
        }
        
        // Show confirmation modal
        showConfirmModal(
            `Apakah Anda yakin ingin mengirim ulang email booking untuk ${currentBooking.guest.name} (${currentBooking.guest.email})?`,
            function() {
                const btn = document.getElementById('resendBookingEmailBtn');
                const originalText = btn.innerHTML;
                
                // Show loading state
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Mengirim...';
                
                // Send request to resend email
                fetch(`{{ url('/api/bookings') }}/${currentBooking.id}/resend-email`, {
                    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) {
                        // Show success message
                        showBookingAlert('success', data.message);
                    } else {
                        // Show error message
                        showBookingAlert('error', data.message || 'Gagal mengirim email');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showBookingAlert('error', 'Terjadi kesalahan saat mengirim email');
                })
                .finally(() => {
                    // Restore button state
                    btn.disabled = false;
                    btn.innerHTML = originalText;
                });
            },
            'Konfirmasi Kirim Email'
        );
    }
    
    // Function to show alert in booking detail modal
    function showBookingAlert(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
        
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert ${alertClass} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            <i class="fas ${iconClass}"></i> ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        // Insert alert at the top of modal body
        const modalBody = document.querySelector('#bookingDetailModal .modal-body');
        modalBody.insertBefore(alertDiv, modalBody.firstChild);
        
        // Auto remove alert after 5 seconds
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    }

    
    // Initialize calendar and timeline when page loads
    document.addEventListener('DOMContentLoaded', function() {
        initCalendar();
        initQuickBooking();
    });
    
    // Quick Booking functionality
    function initQuickBooking() {
        // Load rooms when modal opens
        document.getElementById('quickBookingModal').addEventListener('show.bs.modal', function() {
            loadRoomsForQuickBooking();
            setDefaultDates();
            initGuestSearch();
        });
        
        // Handle room selection change
        document.getElementById('quick_room_id').addEventListener('change', function() {
            calculateTotalPrice();
            autoCheckAvailability();
        });
        
        // Handle date changes
        document.getElementById('quick_check_in_date').addEventListener('change', function() {
            calculateTotalPrice();
            autoCheckAvailability();
        });
        document.getElementById('quick_check_out_date').addEventListener('change', function() {
            calculateTotalPrice();
            autoCheckAvailability();
        });
        
        // Handle form submission
        document.getElementById('quickBookingForm').addEventListener('submit', function(e) {
            e.preventDefault();
            submitQuickBooking();
        });
        
        // Handle add guest form submission
        document.getElementById('addGuestForm').addEventListener('submit', function(e) {
            e.preventDefault();
            submitNewGuest();
        });
    }
    
    function loadRoomsForQuickBooking() {
        const roomSelect = document.getElementById('quick_room_id');
        roomSelect.innerHTML = '<option value="">Loading...</option>';
        
        // Load all rooms from API (without hotel filter since we use default hotel)
        fetch('{{ url('/api/rooms') }}')
            .then(response => response.json())
            .then(data => {
                roomSelect.innerHTML = '<option value="">Pilih Kamar</option>';
                
                if (data.success && data.data && data.data.length > 0) {
                    data.data.forEach(room => {
                        const option = document.createElement('option');
                        option.value = room.id;
                        
                        // Determine room availability status
                        const isAvailable = room.status === 'available';
                        const statusText = isAvailable ? '✓ Tersedia' : '✗ Tidak Tersedia';
                        const statusClass = isAvailable ? 'room-available' : 'room-unavailable';
                        
                        option.textContent = `${room.type} - ${room.room_number} - Rp ${parseInt(room.price_per_night).toLocaleString('id-ID')} (${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 {
                    roomSelect.innerHTML = '<option value="">Tidak ada kamar tersedia</option>';
                }
            })
            .catch(error => {
                console.error('Error loading rooms:', error);
                roomSelect.innerHTML = '<option value="">Error loading rooms</option>';
            });
    }
    
    function setDefaultDates() {
        const today = new Date();
        const tomorrow = new Date(today);
        tomorrow.setDate(tomorrow.getDate() + 1);
        
        document.getElementById('quick_check_in_date').value = today.toISOString().split('T')[0];
        document.getElementById('quick_check_out_date').value = tomorrow.toISOString().split('T')[0];
    }
    
    function calculateTotalPrice() {
        const roomSelect = document.getElementById('quick_room_id');
        const checkInDate = document.getElementById('quick_check_in_date').value;
        const checkOutDate = document.getElementById('quick_check_out_date').value;
        const totalPriceInput = document.getElementById('quick_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 = '';
        }
    }
    
    function submitQuickBooking() {
        const formData = new FormData(document.getElementById('quickBookingForm'));
        
        // Show loading state
        const submitBtn = document.querySelector('#quickBookingForm button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Menyimpan...';
        submitBtn.disabled = true;
        
        // Prepare booking data
        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'),
            guest_name: formData.get('guest_name'),
            guest_email: formData.get('guest_email'),
            guest_phone: formData.get('guest_phone'),
            status: formData.get('status'),
            total_price: formData.get('total_price'),
            special_requests: formData.get('special_requests')
        };
        
        // Send to API
        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 => {
            // Reset button
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
            
            if (data.success) {
                // Close modal and show success message
                const modal = bootstrap.Modal.getInstance(document.getElementById('quickBookingModal'));
                modal.hide();
                
                // Show success notification
                showNotification('Booking berhasil disimpan!', 'success');
                
                // Reset form
                document.getElementById('quickBookingForm').reset();
                
                // Refresh timeline to show new booking
                setTimeout(() => {
                    location.reload();
                }, 1500);
            } else {
                showNotification('Error: ' + (data.message || 'Terjadi kesalahan saat menyimpan booking'), 'danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            // Reset button
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
            
            showNotification('Terjadi kesalahan saat menyimpan booking', 'danger');
        });
    }
    
    function showNotification(message, type = 'info') {
        // Create notification element
        const notification = document.createElement('div');
        notification.className = `alert alert-${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);
    }
    
    // Room Availability Functions
    function checkRoomAvailability() {
        const roomId = document.getElementById('quick_room_id').value;
        const checkInDate = document.getElementById('quick_check_in_date').value;
        const checkOutDate = document.getElementById('quick_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) {
                displayRoomAvailabilityFromAPI(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 displayRoomAvailability(hotelId, roomId, checkInDate, checkOutDate) {
        // Hide loading
        document.getElementById('availabilityLoading').style.display = 'none';
        document.getElementById('availabilityResults').style.display = 'block';
        
        // Simulate availability data
        const availabilityData = generateAvailabilityData(checkInDate, checkOutDate);
        
        const resultsContainer = document.getElementById('availabilityResults');
        resultsContainer.innerHTML = `
            <div class="availability-summary mb-3">
                <div class="row">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-hotel text-primary me-2"></i>
                            <strong>Hotel:</strong>
                            <span class="ms-2">${getHotelName(hotelId)}</span>
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-bed text-info me-2"></i>
                            <strong>Kamar:</strong>
                            <span class="ms-2">${getRoomName(roomId)}</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-calendar-alt text-success me-2"></i>
                            <strong>Check-in:</strong>
                            <span class="ms-2">${formatDate(checkInDate)}</span>
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-calendar-alt text-danger me-2"></i>
                            <strong>Check-out:</strong>
                            <span class="ms-2">${formatDate(checkOutDate)}</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="availability-calendar">
                <div class="row g-2">
                    ${availabilityData.map(day => `
                        <div class="col-md-4 col-lg-3">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body p-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <h6 class="mb-0">${day.date}</h6>
                                        <span class="badge bg-${day.statusColor}">${day.status}</span>
                                    </div>
                                    <div class="small text-muted mb-2">
                                        <i class="fas fa-users"></i> ${day.occupancy}% Terisi
                                    </div>
                                    <div class="progress mb-2" style="height: 6px;">
                                        <div class="progress-bar bg-${day.statusColor}" style="width: ${day.occupancy}%"></div>
                                    </div>
                                    <div class="small">
                                        <div class="text-success"><i class="fas fa-check-circle"></i> ${day.available} Tersedia</div>
                                        <div class="text-danger"><i class="fas fa-times-circle"></i> ${day.booked} Terpesan</div>
                                        ${day.maintenance > 0 ? `<div class="text-secondary"><i class="fas fa-tools"></i> ${day.maintenance} Maintenance</div>` : ''}
                                    </div>
                                </div>
                            </div>
                        </div>
                    `).join('')}
                </div>
            </div>
            
            <div class="availability-summary mt-3 p-3 bg-light rounded">
                <div class="row">
                    <div class="col-md-8">
                        <h6 class="text-success mb-2">
                            <i class="fas fa-check-circle"></i> Kamar Tersedia untuk Periode Ini
                        </h6>
                        <p class="mb-0 small text-muted">
                            Kamar dapat dipesan untuk tanggal yang dipilih. 
                            Harga total: <strong>Rp ${calculateTotalPriceForPeriod(checkInDate, checkOutDate).toLocaleString('id-ID')}</strong>
                        </p>
                    </div>
                    <div class="col-md-4 text-end">
                        <button type="button" class="btn btn-success btn-sm" onclick="proceedWithBooking()">
                            <i class="fas fa-arrow-right"></i> Lanjutkan Booking
                        </button>
                    </div>
                </div>
            </div>
        `;
    }
    
    function displayRoomAvailabilityFromAPI(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>
                            </div>
                        </div>
                        <div class="col-md-4 text-end">
                            <button type="button" class="btn btn-success" onclick="proceedWithBooking()">
                                <i class="fas fa-arrow-right"></i> Lanjutkan Booking
                            </button>
                        </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-${getStatusColor(booking.status)}">
                                            ${getStatusText(booking.status)}
                                        </span>
                                    </div>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                ` : ''}
            `;
        }
    }
    
    function generateAvailabilityData(checkInDate, checkOutDate) {
        const startDate = new Date(checkInDate);
        const endDate = new Date(checkOutDate);
        const data = [];
        
        for (let date = new Date(startDate); date < endDate; date.setDate(date.getDate() + 1)) {
            const dayData = {
                date: date.toLocaleDateString('id-ID', { weekday: 'short', day: 'numeric', month: 'short' }),
                available: Math.floor(Math.random() * 5) + 1,
                booked: Math.floor(Math.random() * 3),
                maintenance: Math.random() > 0.8 ? 1 : 0
            };
            
            const total = dayData.available + dayData.booked + dayData.maintenance;
            dayData.occupancy = Math.round((dayData.booked / total) * 100);
            
            if (dayData.occupancy < 50) {
                dayData.status = 'Tersedia';
                dayData.statusColor = 'success';
            } else if (dayData.occupancy < 80) {
                dayData.status = 'Terbatas';
                dayData.statusColor = 'warning';
            } else {
                dayData.status = 'Penuh';
                dayData.statusColor = 'danger';
            }
            
            if (dayData.maintenance > 0) {
                dayData.status = 'Maintenance';
                dayData.statusColor = 'secondary';
            }
            
            data.push(dayData);
        }
        
        return data;
    }
    
    function getHotelName(hotelId) {
        return '{{ $settings['hotel_name'] }}';
    }
    
    function getRoomName(roomId) {
        const rooms = {
            '1': 'Deluxe Room - 101',
            '2': 'Superior Room - 201',
            '3': 'Suite Room - 301'
        };
        return rooms[roomId] || 'Kamar Tidak Dikenal';
    }
    
    function getStatusColor(status) {
        const colors = {
            'pending': 'warning',
            'confirmed': 'success',
            'checked_in': 'primary',
            'checked_out': 'secondary',
            'cancelled': 'danger',
            'completed': 'info'
        };
        return colors[status] || 'secondary';
    }
    
    function getStatusText(status) {
        const texts = {
            'pending': 'Pending',
            'confirmed': 'Dikonfirmasi',
            'checked_in': 'Check-in',
            'checked_out': 'Check-out',
            'cancelled': 'Dibatalkan',
            'completed': 'Selesai'
        };
        return texts[status] || status;
    }
    
    function formatDate(dateStr) {
        return new Date(dateStr).toLocaleDateString('id-ID', {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
    }
    
    function calculateTotalPriceForPeriod(checkInDate, checkOutDate) {
        const roomSelect = document.getElementById('quick_room_id');
        const selectedOption = roomSelect.options[roomSelect.selectedIndex];
        const roomPrice = parseInt(selectedOption.dataset.price || 500000);
        
        const checkIn = new Date(checkInDate);
        const checkOut = new Date(checkOutDate);
        const nights = Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24));
        
        return roomPrice * nights;
    }
    
    function proceedWithBooking() {
        document.getElementById('roomAvailabilitySection').style.display = 'none';
        showNotification('Silakan lengkapi data tamu untuk melanjutkan booking', 'info');
        document.getElementById('quick_guest_name').focus();
    }
    
    // Auto-check availability when dates or room changes
    function autoCheckAvailability() {
        const roomId = document.getElementById('quick_room_id').value;
        const checkInDate = document.getElementById('quick_check_in_date').value;
        const checkOutDate = document.getElementById('quick_check_out_date').value;
        
        if (roomId && checkInDate && checkOutDate) {
            document.getElementById('roomAvailabilitySection').style.display = 'block';
            setTimeout(() => {
                checkRoomAvailability();
            }, 500);
        } else {
             document.getElementById('roomAvailabilitySection').style.display = 'none';
         }
     }
     
     // Guest Search Functions
     let guestSearchTimeout;
     let existingGuests = [];
     
     function initGuestSearch() {
         const guestNameInput = document.getElementById('quick_guest_name');
         const suggestionsDiv = document.getElementById('guestSuggestions');
         const addNewBtn = document.getElementById('addNewGuestBtn');
         
         // Load existing guests data (simulate API call)
         loadExistingGuests();
         
         if (guestNameInput) {
              guestNameInput.addEventListener('input', function() {
                  const query = this.value.trim();
                  
                  // Clear previous timeout
                  clearTimeout(guestSearchTimeout);
                  
                  if (query.length < 2) {
                      hideSuggestions();
                      if (addNewBtn) addNewBtn.style.display = 'none';
                      return;
                  }
                  
                  // Debounce search
                  guestSearchTimeout = setTimeout(() => {
                      searchGuests(query);
                  }, 300);
              });
              
              // Test with keyup event as backup
              guestNameInput.addEventListener('keyup', function() {
                  const query = this.value.trim();
                  if (query.length >= 2) {
                      clearTimeout(guestSearchTimeout);
                      guestSearchTimeout = setTimeout(() => {
                          searchGuests(query);
                      }, 300);
                  }
              });
          }
         
         // Hide suggestions when clicking outside
         document.addEventListener('click', function(e) {
             if (guestNameInput && suggestionsDiv && 
                 !guestNameInput.contains(e.target) && !suggestionsDiv.contains(e.target)) {
                 hideSuggestions();
             }
         });
         
         // Handle input focus
         if (guestNameInput) {
             guestNameInput.addEventListener('focus', function() {
                 if (this.value.length >= 2) {
                     searchGuests(this.value.trim());
                 }
             });
         }
         

     }
     
     function loadExistingGuests() {
         // Fetch guests data from API
         fetch('{{ url('/') }}/api/guests')
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
                     existingGuests = data.data;
                     console.log('Loaded ' + existingGuests.length + ' guests from database');
                 } else {
                     console.error('Failed to load guests data');
                     // Fallback to empty array if API fails
                     existingGuests = [];
                 }
             })
             .catch(error => {
                 console.error('Error loading guests:', error);
                 // Fallback to empty array if API fails
                 existingGuests = [];
             });
     }
     
     function searchGuests(query) {
          const suggestionsDiv = document.getElementById('guestSuggestions');
          const addNewBtn = document.getElementById('addNewGuestBtn');
          
          // Filter guests based on name
          const matchedGuests = existingGuests.filter(guest => 
              guest.name.toLowerCase().includes(query.toLowerCase())
          );
         
         if (matchedGuests.length > 0) {
             showGuestSuggestions(matchedGuests);
             addNewBtn.style.display = 'none';
         } else {
             hideSuggestions();
             addNewBtn.style.display = 'block';
         }
     }
     
     function showGuestSuggestions(guests) {
         const suggestionsDiv = document.getElementById('guestSuggestions');
         
         let html = '';
         guests.forEach(guest => {
             html += `
                 <div class="dropdown-item guest-suggestion" onclick="selectGuest(${guest.id})" style="cursor: pointer;">
                     <div class="d-flex justify-content-between align-items-center">
                         <div>
                             <div class="fw-bold">${guest.name}</div>
                             <small class="text-muted">
                                 <i class="fas fa-envelope"></i> ${guest.email || 'Tidak ada email'}
                                 <span class="ms-2"><i class="fas fa-phone"></i> ${guest.phone || 'Tidak ada telepon'}</span>
                             </small>
                         </div>
                         <div class="text-end">
                             <small class="text-primary"><i class="fas fa-user"></i> Tamu Terdaftar</small>
                         </div>
                     </div>
                 </div>
             `;
         });
         
         suggestionsDiv.innerHTML = html;
         suggestionsDiv.style.display = 'block';
     }
     
     function hideSuggestions() {
         document.getElementById('guestSuggestions').style.display = 'none';
     }
     
     function selectGuest(guestId) {
         const guest = existingGuests.find(g => g.id === guestId);
         if (!guest) return;
         
         // Fill form with guest data
         document.getElementById('quick_guest_name').value = guest.name;
         document.getElementById('quick_guest_email').value = guest.email || '';
         document.getElementById('quick_guest_phone').value = guest.phone || '';
         
         // Hide suggestions and add button
         hideSuggestions();
         document.getElementById('addNewGuestBtn').style.display = 'none';
         
         // Show success notification
         showNotification(`Data tamu ${guest.name} berhasil dimuat`, 'success');
         
         // Focus to next field
         document.getElementById('quick_guest_count').focus();
     }
     
     function showAddGuestModal() {
         const currentName = document.getElementById('quick_guest_name').value;
         
         // Pre-fill name if available
         if (currentName) {
             document.getElementById('new_guest_name').value = currentName;
         }
         
         // Show modal
         const modal = new bootstrap.Modal(document.getElementById('addGuestModal'));
         modal.show();
     }
     
     function submitNewGuest() {
         const form = document.getElementById('addGuestForm');
         const formData = new FormData(form);
         const submitBtn = document.querySelector('#addGuestForm button[type="submit"]');
         const originalText = submitBtn.innerHTML;
         
         // Show loading state
         submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Menyimpan...';
         submitBtn.disabled = true;
         
         // Convert FormData to JSON
         const data = {};
         formData.forEach((value, key) => {
             data[key] = value;
         });
         
         // Send actual API request to save guest
         fetch('/admin/guests', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
                 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
             },
             body: JSON.stringify(data)
         })
         .then(response => response.json())
         .then(result => {
             if (result.success) {
                 const newGuest = result.guest;
                 
                 // Add to existing guests array
                 existingGuests.push(newGuest);
                 
                 // Fill quick booking form with new guest data
                 document.getElementById('quick_guest_name').value = newGuest.name;
                 document.getElementById('quick_guest_email').value = newGuest.email || '';
                 document.getElementById('quick_guest_phone').value = newGuest.phone || '';
                 
                 // Close modal
                 const modal = bootstrap.Modal.getInstance(document.getElementById('addGuestModal'));
                 modal.hide();
                 
                 // Reset form
                 form.reset();
                 
                 // Hide add button and suggestions
                 document.getElementById('addNewGuestBtn').style.display = 'none';
                 hideSuggestions();
                 
                 // Show success notification
                 showNotification(`Tamu baru ${newGuest.name} berhasil ditambahkan dan data dimuat ke form booking`, 'success');
                 
                 // Focus to next field
                 document.getElementById('quick_guest_count').focus();
             } else {
                 showNotification(result.message || 'Gagal menambahkan tamu', 'error');
             }
         })
         .catch(error => {
             console.error('Error:', error);
             showNotification('Terjadi kesalahan saat menambahkan tamu', 'error');
         })
         .finally(() => {
             // Reset button state
             submitBtn.innerHTML = originalText;
             submitBtn.disabled = false;
         });
     }
     
     // Room Timeline Search and Scroll Functions
     let originalRoomsData = [];
     
     function searchRooms() {
         const searchTerm = document.getElementById('roomSearchInput').value.toLowerCase();
         const typeFilter = document.getElementById('roomTypeFilter').value.toLowerCase();
         const roomRows = document.querySelectorAll('.room-row');
         let visibleCount = 0;
         
         // Remove previous highlights
         roomRows.forEach(row => {
             row.classList.remove('search-highlight');
         });
         
         roomRows.forEach(row => {
             const roomName = row.querySelector('.room-name');
             const roomType = row.querySelector('.room-type');
             
             if (roomName && roomType) {
                 const roomText = roomName.textContent.toLowerCase();
                 const typeText = roomType.textContent.toLowerCase();
                 
                 const matchesSearch = searchTerm.trim() === '' || roomText.includes(searchTerm);
                 const matchesType = typeFilter === '' || typeText.includes(typeFilter);
                 
                 if (matchesSearch && matchesType) {
                     row.style.display = 'grid';
                     visibleCount++;
                     
                     // Add highlight if search term matches
                     if (searchTerm.trim() !== '' && roomText.includes(searchTerm)) {
                         row.classList.add('search-highlight');
                     }
                 } else {
                     row.style.display = 'none';
                 }
             }
         });
         
         // Show "no results" message if no rooms are visible
         const roomRowsContainer = document.querySelector('.room-rows');
         let noResultsMsg = document.getElementById('noSearchResults');
         
         if (visibleCount === 0 && (searchTerm.trim() !== '' || typeFilter !== '')) {
             if (!noResultsMsg) {
                 noResultsMsg = document.createElement('div');
                 noResultsMsg.id = 'noSearchResults';
                 noResultsMsg.className = 'alert alert-warning text-center';
                 let filterText = '';
                 if (searchTerm.trim() !== '' && typeFilter !== '') {
                     filterText = `"<strong>${searchTerm}</strong>" dengan tipe "<strong>${typeFilter}</strong>"`;
                 } else if (searchTerm.trim() !== '') {
                     filterText = `"<strong>${searchTerm}</strong>"`;
                 } else if (typeFilter !== '') {
                     filterText = `tipe "<strong>${typeFilter}</strong>"`;
                 }
                 noResultsMsg.innerHTML = `
                     <i class="fas fa-search mb-2"></i>
                     <h6>Tidak ada kamar ditemukan</h6>
                     <p class="mb-0">Tidak ada kamar yang cocok dengan ${filterText}</p>
                     <small class="text-muted">Coba gunakan kata kunci lain atau kosongkan pencarian</small>
                 `;
                 roomRowsContainer.appendChild(noResultsMsg);
             }
         } else if (noResultsMsg) {
             noResultsMsg.remove();
         }
         
         // Update search info (disabled per user request)
          // updateSearchInfo(visibleCount, roomRows.length, searchTerm);
     }
     
     function filterByRoomType() {
         searchRooms(); // Reuse the search function with type filter
     }
     
     function clearSearch() {
         document.getElementById('roomSearchInput').value = '';
         searchRooms();
         document.getElementById('roomSearchInput').focus();
     }
     
     function clearTypeFilter() {
         document.getElementById('roomTypeFilter').value = '';
         searchRooms();
         document.getElementById('roomTypeFilter').focus();
     }
     
     function updateSearchInfo(visibleCount, totalCount, searchTerm) {
          // Remove search info display - user requested to remove the alert
          let searchInfo = document.getElementById('searchInfo');
          if (searchInfo) {
              searchInfo.remove();
          }
      }
     
     function scrollToTop() {
         const timeline = document.getElementById('roomTimeline');
         timeline.scrollTo({
             top: 0,
             behavior: 'smooth'
         });
     }
     
     function scrollToBottom() {
          const timeline = document.getElementById('roomTimeline');
          timeline.scrollTo({
              top: timeline.scrollHeight,
              behavior: 'smooth'
          });
      }
      
      // Keyboard shortcuts for timeline
      document.addEventListener('keydown', function(e) {
          // Only activate shortcuts when not typing in input fields
          if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
              // ESC to clear search when in search input
              if (e.key === 'Escape' && e.target.id === 'roomSearchInput') {
                  clearSearch();
              }
              return;
          }
          
          // Ctrl/Cmd + F to focus search
          if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
              e.preventDefault();
              document.getElementById('roomSearchInput').focus();
          }
          
          // Arrow keys for scrolling
          if (e.key === 'ArrowUp' && e.ctrlKey) {
              e.preventDefault();
              scrollToTop();
          }
          
          if (e.key === 'ArrowDown' && e.ctrlKey) {
              e.preventDefault();
              scrollToBottom();
          }
      });
      
      // Initialize timeline when page loads
      document.addEventListener('DOMContentLoaded', function() {
          initCalendar();
          
          // Add tooltip for keyboard shortcuts
          const searchInput = document.getElementById('roomSearchInput');
          if (searchInput) {
              searchInput.setAttribute('title', 'Tekan Ctrl+F untuk fokus, ESC untuk clear');
          }
      });
</script>

<style>


/* Room Timeline Styles */
.room-timeline {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    max-height: 600px;
    overflow-y: auto;
    position: relative;
}

.room-timeline::-webkit-scrollbar {
    width: 8px;
}

.room-timeline::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.room-timeline::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.room-timeline::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Search Box Styling */
.input-group .form-control:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
}

.input-group-text {
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* Scroll Buttons */
.btn-outline-info {
    border-color: #0ea5e9;
    color: #0ea5e9;
    transition: all 0.2s ease;
}

.btn-outline-info:hover {
    background-color: #0ea5e9;
    border-color: #0ea5e9;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(14, 165, 233, 0.3);
}

/* Room Row Highlight on Search */
.room-row.search-highlight {
    background: #fef3c7 !important;
    border-left: 4px solid #f59e0b;
    animation: highlightPulse 1s ease-in-out;
}

@keyframes highlightPulse {
    0% { background: #fef3c7; }
    50% { background: #fde68a; }
    100% { background: #fef3c7; }
}

/* No Results Message */
#noSearchResults {
    margin: 20px;
    border-radius: 8px;
    border-left: 4px solid #f59e0b;
}

.timeline-container {
    width: 100%;
    overflow-x: auto;
}

.timeline-header {
    display: grid;
    grid-template-columns: 200px repeat(7, 1fr);
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    min-width: 800px;
}

.room-header {
    padding: 16px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.date-header {
    padding: 16px 8px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.room-rows {
    min-width: 800px;
}

.room-row {
    display: grid;
    grid-template-columns: 200px repeat(7, 1fr);
    border-bottom: 1px solid #e5e7eb;
    min-height: 70px;
}

.room-row:hover {
    background: #f9fafb;
}

.room-info {
    padding: 16px;
    background: #f8fafc;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.room-name {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.room-capacity {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 4px;
}

.room-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    text-align: center;
    width: fit-content;
}

.room-status.status-siap {
    background: #d1fae5;
    color: #065f46;
}

.room-status.status-kotor {
    background: #fee2e2;
    color: #991b1b;
}

.room-status.status-pembersihan {
    background: #fef3c7;
    color: #92400e;
}

.timeline-cell {
    border-right: 1px solid #e5e7eb;
    position: relative;
    padding: 6px;
    display: flex;
    align-items: center;
    min-height: 70px;
}

.booking-bar {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    position: relative;
    width: 100%;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.booking-bar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    cursor: pointer;
.booking-bar:active {
    transform: translateY(0);
}

/* Room Dropdown Styling */
.room-available {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
}

.room-unavailable {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
}

#quick_room_id option.room-available {
    background-color: #d1fae5;
    color: #065f46;
}

#quick_room_id option.room-unavailable {
    background-color: #fee2e2;
    color: #991b1b;
}

#quick_room_id option:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Modal styles */
.modal-dialog.modal-lg {
    max-width: 900px;
}

.modal-header.bg-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}

.card.border-0.bg-light {
    background: #f8fafc !important;
    border-radius: 12px;
}

.card-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.badge.bg-secondary {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}

#detail-special-requests {
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid #6366f1;
    font-style: italic;
}

.booking-bar.status-confirmed {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.booking-bar.status-pending {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.booking-bar.status-cancelled {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.booking-info {
    line-height: 1.3;
}

.guest-name {
    font-weight: 600;
    margin-bottom: 2px;
}

.booking-dates {
    font-size: 0.6rem;
    opacity: 0.9;
    margin-bottom: 2px;
}

.booking-status {
    font-size: 0.6rem;
    opacity: 0.8;
}

.click-indicator {
    font-size: 0.55rem;
    opacity: 0.7;
    margin-top: 2px;
    transition: opacity 0.2s ease;
}

.booking-bar:hover .click-indicator {
    opacity: 1;
}

/* Responsive timeline */
@media (max-width: 768px) {
    .timeline-header {
        grid-template-columns: 150px repeat(7, 80px);
    }
    
    .room-row {
        grid-template-columns: 150px repeat(7, 80px);
    }
    
    .room-header {
        padding: 12px;
    }
    
    .date-header {
        padding: 12px 4px;
        font-size: 0.75rem;
    }
    
    .room-info {
        padding: 12px;
    }
    
    .room-name {
        font-size: 0.875rem;
    }
    
    .booking-bar {
        padding: 4px 6px;
        font-size: 0.6rem;
        min-height: 40px;
    }
}

/* Recent Guests Card Styles */
.guest-card-item {
    transition: all 0.3s ease;
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 0;
}

.guest-card-item:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.guest-avatar .avatar-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.guest-card-item:hover .avatar-circle {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.guest-stats {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.guest-actions .btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.guest-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

@media (max-width: 768px) {
    .guest-card-item {
        border-end: none !important;
    }
    
    .guest-card-item:last-child {
        border-bottom: none !important;
    }
}
</style>

<script>
// Revenue text scrolling functionality
document.addEventListener('DOMContentLoaded', function() {
    const revenueText = document.getElementById('revenueText');
    
    if (revenueText) {
        const container = revenueText.parentElement;
        const textWidth = revenueText.scrollWidth;
        const containerWidth = container.clientWidth;
        
        // If text is wider than container, add scrolling animation
        if (textWidth > containerWidth) {
            revenueText.classList.add('scrolling');
        }
        
        // Check on window resize
        window.addEventListener('resize', function() {
            const newTextWidth = revenueText.scrollWidth;
            const newContainerWidth = container.clientWidth;
            
            if (newTextWidth > newContainerWidth) {
                revenueText.classList.add('scrolling');
            } else {
                revenueText.classList.remove('scrolling');
            }
        });
    }
});
</script>
@endsection