@extends('admin.layout')

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

@section('content')
<div class="container-fluid py-4 dashboard-zoom">
    <!-- 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>
    
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body d-flex flex-wrap align-items-center gap-2">
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#quickBookingModal">
                        <i class="fas fa-plus-circle me-2"></i>Tambah Booking
                    </button>
                    <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#bookingListModal">
                        <i class="fas fa-list me-2"></i>Daftar Booking
                    </button>
                    <button class="btn btn-info text-white" data-bs-toggle="modal" data-bs-target="#walkinQuickModal">
                        <i class="fas fa-walking me-2"></i>Walk-in Check-in
                    </button>
                    <span class="vr mx-1 d-none d-md-inline-flex"></span>
                    <div class="w-100 d-md-none border-top my-1"></div>

                    <button class="btn btn-outline-warning" data-bs-toggle="modal" data-bs-target="#extendBookingModal">
                        <i class="fas fa-clock me-2"></i>Extend
                    </button>
                    <button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#billChargeModal">
                        <i class="fas fa-receipt me-2"></i>Bill Charge
                    </button>
                    <button class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#invoiceQuickModal">
                        <i class="fas fa-file-invoice me-2"></i>Non Stay Bill
                    </button>
                    <button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#invoiceCreateModal">
                        <i class="fas fa-file-invoice-dollar me-2"></i>Buat Invoice
                    </button>
                    <span class="vr mx-1 d-none d-md-inline-flex"></span>
                    <div class="w-100 d-md-none border-top my-1"></div>

                    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addGuestModal">
                        <i class="fas fa-user-plus me-2"></i>Tamu
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Room Availability Card + Booking Calendar -->
    <div class="row mb-4 align-items-stretch">
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <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-bed text-info"></i>
                            </div>
                            <div>
                                <h5 class="mb-0 fw-bold text-dark">Ketersediaan Kamar</h5>
                                <small class="text-muted">Pilih tipe kamar untuk melihat nomor kamar tersedia</small>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <input type="date" class="form-control form-control-sm me-2" id="availCheckIn" value="{{ now()->toDateString() }}">
                            <input type="date" class="form-control form-control-sm" id="availCheckOut" value="{{ now()->addDay()->toDateString() }}">
                        </div>
                    </div>
                </div>
                <div class="card-body p-3">
                    <div class="d-flex flex-wrap gap-2">
                        @foreach(($roomTypes ?? []) as $type)
                            <button type="button" class="btn btn-outline-primary btn-sm room-type-btn"
                                    data-type-code="{{ $type->code }}" data-type-name="{{ $type->name }}">
                                <i class="fas fa-tag me-1"></i><span class="type-name">{{ $type->name }}</span>
                                <span class="badge bg-secondary ms-1 type-count"></span>
                            </button>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center">
                        <div class="bg-primary bg-opacity-10 rounded-2 p-2 me-2">
                            <i class="fas fa-calendar-alt text-primary"></i>
                        </div>
                        @php
                            $currentMonth = \Carbon\Carbon::now()->startOfMonth();
                            $monthName = $currentMonth->copy()->locale('id_ID')->translatedFormat('F Y');
                        @endphp
                        <h6 id="calendarMonthLabel" class="mb-0 fw-bold">{{ $monthName }}</h6>
                    </div>
                    <div class="d-flex align-items-center">
                        <button id="prevMonthBtn" type="button" class="btn btn-sm btn-outline-primary me-2" aria-label="Bulan sebelumnya">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button id="nextMonthBtn" type="button" class="btn btn-sm btn-outline-primary" aria-label="Bulan berikutnya">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="booking-calendar">
                        <div id="dashboardCalendarGrid" class="calendar-grid"></div>
                    </div>
                    <small class="text-muted d-block mt-2"><i class="fas fa-info-circle me-1"></i> Hover pada tanggal untuk melihat detail booking</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Bookings & Quick Stats -->
    <div class="row">
        <div class="col-12 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>
                                    @foreach(($roomTypes ?? []) as $type)
                                        <option value="{{ strtolower($type->name) }}">{{ $type->name }}</option>
                                    @endforeach
                                </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>
    
    @php
        $calendarData = [];
        foreach (($upcoming_bookings ?? []) as $b) {
            $calendarData[] = [
                'check_in_date' => $b->check_in_date,
                'check_out_date' => $b->check_out_date,
                'booking_code' => $b->booking_code,
                'room_number' => $b->room->room_number ?? $b->unit_number ?? null,
                'guest_name' => $b->guest->name ?? $b->guest_name ?? null
            ];
        }
    @endphp
    <script>
        window.UPCOMING_BOOKINGS = @json($calendarData);
        (function(){
            const dayNames = ['Sen','Sel','Rab','Kam','Jum','Sab','Min'];
            let currentMonthDate = new Date();
            const gridEl = document.getElementById('dashboardCalendarGrid');
            const monthLabelEl = document.getElementById('calendarMonthLabel');
            function formatMonthLabel(date) {
                try {
                    return date.toLocaleDateString('id-ID', { month: 'long', year: 'numeric' });
                } catch (_) {
                    const months = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
                    return months[date.getMonth()] + ' ' + date.getFullYear();
                }
            }
            function initTooltips(container) {
                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
                    const tooltipTriggerList = [].slice.call(container.querySelectorAll('[data-bs-toggle="tooltip"]'));
                    tooltipTriggerList.forEach(function (tooltipTriggerEl) {
                        new bootstrap.Tooltip(tooltipTriggerEl);
                    });
                }
            }
            function getBookingsForDate(dateObj) {
                const dStart = new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate(), 0, 0, 0, 0);
                const dEndExclusive = new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate()+1, 0, 0, 0, 0);
                return (window.UPCOMING_BOOKINGS || []).filter(b => {
                    const ci = parseDateLocal(b.check_in_date);
                    const co = parseDateLocal(b.check_out_date);
                    // overlap rule: [ci, co) intersects [dStart, dEndExclusive)
                    return ci < dEndExclusive && co > dStart;
                });
            }
            function renderCalendar() {
                if (!gridEl) return;
                // clear
                gridEl.innerHTML = '';
                // month label
                if (monthLabelEl) monthLabelEl.textContent = formatMonthLabel(currentMonthDate);
                // header day names
                dayNames.forEach(dn => {
                    const el = document.createElement('div');
                    el.className = 'calendar-day-name';
                    el.textContent = dn;
                    gridEl.appendChild(el);
                });
                const monthStart = new Date(currentMonthDate.getFullYear(), currentMonthDate.getMonth(), 1);
                const daysInMonth = new Date(currentMonthDate.getFullYear(), currentMonthDate.getMonth()+1, 0).getDate();
                const startWeekdayIso = (monthStart.getDay() === 0) ? 7 : monthStart.getDay();
                for (let i = 1; i < startWeekdayIso; i++) {
                    const empty = document.createElement('div');
                    empty.className = 'calendar-day empty';
                    gridEl.appendChild(empty);
                }
                for (let day = 1; day <= daysInMonth; day++) {
                    const dateObj = new Date(currentMonthDate.getFullYear(), currentMonthDate.getMonth(), day);
                    const items = getBookingsForDate(dateObj);
                    const has = items.length > 0;
                    const cell = document.createElement('div');
                    cell.className = 'calendar-day' + (has ? ' has-booking' : '');
                    cell.setAttribute('data-has-bookings', has ? '1' : '0');
                    if (has) {
                        const lines = items.map(b => {
                            const room = b.room_number ?? '-';
                            const guest = b.guest_name ?? '-';
                            return `#${b.booking_code} • Kamar ${room} • ${guest}`;
                        });
                        cell.setAttribute('data-bs-toggle', 'tooltip');
                        cell.setAttribute('data-bs-html', 'true');
                        cell.setAttribute('data-bs-custom-class', `calendar-tooltip tooltip-day-${((dateObj.getDay()===0)?7:dateObj.getDay())}`);
                        cell.setAttribute('title', lines.join('<br>'));
                    }
                    const dn = document.createElement('span');
                    dn.className = 'day-number';
                    dn.textContent = String(day);
                    cell.appendChild(dn);
                    if (has) {
                        const dot = document.createElement('span');
                        dot.className = 'booking-dot';
                        dot.setAttribute('aria-label', 'Ada booking');
                        cell.appendChild(dot);
                    }
                    gridEl.appendChild(cell);
                }
                initTooltips(gridEl);
            }
            renderCalendar();
            const prevBtn = document.getElementById('prevMonthBtn');
            const nextBtn = document.getElementById('nextMonthBtn');
            if (prevBtn) prevBtn.addEventListener('click', function(){
                currentMonthDate.setMonth(currentMonthDate.getMonth() - 1);
                renderCalendar();
            });
            if (nextBtn) nextBtn.addEventListener('click', function(){
                currentMonthDate.setMonth(currentMonthDate.getMonth() + 1);
                renderCalendar();
            });
        })();
    </script>

<div class="modal fade" id="availableRoomsModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content shadow-lg border-0">
            <div class="modal-header bg-primary text-white">
                <div class="d-flex align-items-center">
                    <i class="fas fa-bed me-2"></i>
                    <h5 class="modal-title" id="availableRoomsTitle">Kamar Tersedia</h5>
                    <span id="availableRoomsCount" class="badge bg-light text-primary ms-2"></span>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div>
                        <div class="small text-muted">Periode</div>
                        <div class="fw-semibold" id="availableRoomsPeriod"></div>
                    </div>
                    <div style="width: 260px;">
                        <div class="input-group">
                            <span class="input-group-text bg-light border-end-0">
                                <i class="fas fa-search"></i>
                            </span>
                            <input type="text" id="availableRoomsSearch" class="form-control border-start-0" placeholder="Cari nomor kamar">
                        </div>
                    </div>
                </div>
                <div id="availableRoomsLoading" class="p-2"></div>
                <div id="availableRoomsContent" class="list-group list-group-flush"></div>
                <div id="availableRoomsEmpty" class="text-center text-muted py-4" style="display:none;">
                    <i class="fas fa-info-circle mb-2"></i>
                    <div>Tidak ada kamar tersedia</div>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<style>
#availableRoomsModal .modal-content { border-radius: 12px }
#availableRoomsModal .list-group-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border: 1px solid #f1f5f9; border-left: 4px solid #e2e8f0; border-radius: 10px; margin-bottom: 8px }
#availableRoomsModal .list-group-item:hover { border-left-color: #2563eb; background: #f8fafc }
#availableRoomsModal .room-num { font-weight: 700; font-size: 16px }
#availableRoomsModal .room-meta { display: flex; align-items: center; gap: 8px }
#availableRoomsModal .room-price { font-weight: 700; color: #2563eb }
#availableRoomsLoading .skeleton-item { height: 52px; border-radius: 10px; background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 37%, rgba(0,0,0,0.06) 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite; margin-bottom: 10px }
@keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
</style>

<script>
    (function(){
        const btns = document.querySelectorAll('.room-type-btn');
        const ci = document.getElementById('availCheckIn');
        const co = document.getElementById('availCheckOut');
        const modalEl = document.getElementById('availableRoomsModal');
        const titleEl = document.getElementById('availableRoomsTitle');
        const countEl = document.getElementById('availableRoomsCount');
        const periodEl = document.getElementById('availableRoomsPeriod');
        const listEl = document.getElementById('availableRoomsContent');
        const emptyEl = document.getElementById('availableRoomsEmpty');
        const loadingEl = document.getElementById('availableRoomsLoading');
        const searchEl = document.getElementById('availableRoomsSearch');
        const WALKIN_URL = '{{ route('admin.walkin-checkin') }}';
        function formatIDR(n) {
            try { return 'Rp ' + Number(n).toLocaleString('id-ID'); } catch(_) { return 'Rp ' + String(n); }
        }
        function showLoadingSkeleton() {
            loadingEl.innerHTML = '';
            for (let i = 0; i < 6; i++) {
                const sk = document.createElement('div');
                sk.className = 'skeleton-item';
                loadingEl.appendChild(sk);
            }
            loadingEl.style.display = '';
        }
        function hideLoadingSkeleton() {
            loadingEl.innerHTML = '';
            loadingEl.style.display = 'none';
        }
        btns.forEach(btn => {
            btn.addEventListener('click', async function(){
                const typeCode = this.getAttribute('data-type-code');
                const typeName = this.getAttribute('data-type-name');
                titleEl.textContent = 'Kamar Tersedia: ' + typeName;
                countEl.textContent = '';
                periodEl.textContent = (ci && ci.value ? ci.value : '') + (co && co.value ? ' - ' + co.value : '');
                listEl.innerHTML = '';
                emptyEl.style.display = 'none';
                showLoadingSkeleton();
                const params = new URLSearchParams();
                params.set('type', typeCode);
                if (ci && ci.value) params.set('check_in', ci.value);
                if (co && co.value) params.set('check_out', co.value);
                try {
                    const res = await fetch('{{ route('admin.available-rooms') }}' + '?' + params.toString(), { headers: { 'Accept': 'application/json' } });
                    const data = await res.json();
                    hideLoadingSkeleton();
                    if (data.success && Array.isArray(data.rooms) && data.rooms.length > 0) {
                        countEl.textContent = String(data.count) + ' kamar';
                        data.rooms.forEach(r => {
                            const item = document.createElement('div');
                            item.className = 'list-group-item';
                            item.setAttribute('data-room-number', String(r.room_number ?? ''));
                            const left = document.createElement('div');
                            const right = document.createElement('div');
                            left.innerHTML = '<div class="room-num">Kamar ' + (r.room_number ?? '-') + '</div>' +
                                '<div class="room-meta"><span class="badge bg-secondary">Kapasitas ' + (r.capacity ?? '-') + '</span></div>';
                            right.className = 'd-flex align-items-center gap-2';
                            const priceEl = document.createElement('span');
                            priceEl.className = 'room-price';
                            priceEl.textContent = formatIDR(r.price_per_night ?? '0');
                            const bookBtn = document.createElement('button');
                            bookBtn.type = 'button';
                            bookBtn.className = 'btn btn-outline-primary btn-sm';
                            bookBtn.textContent = 'Booking';
                            const checkinBtn = document.createElement('button');
                            checkinBtn.type = 'button';
                            checkinBtn.className = 'btn btn-success btn-sm';
                            checkinBtn.textContent = 'Check-in';
                            right.appendChild(priceEl);
                            right.appendChild(bookBtn);
                            right.appendChild(checkinBtn);
                            const row = document.createElement('div');
                            row.className = 'd-flex align-items-center justify-content-between w-100';
                            row.appendChild(left);
                            row.appendChild(right);
                            item.appendChild(row);
                            bookBtn.addEventListener('click', function(){
                                const m = new bootstrap.Modal(document.getElementById('quickBookingModal'));
                                const ciEl = document.getElementById('quick_check_in_date');
                                const coEl = document.getElementById('quick_check_out_date');
                                const typeEl = document.getElementById('quick_room_type');
                                const roomEl = document.getElementById('quick_room_id');
                                if (ciEl && ci) ciEl.value = ci.value || '';
                                if (coEl && co) coEl.value = co.value || '';
                                if (typeEl) {
                                    const typeCode = String(r.type || '');
                                    if (typeCode !== '') {
                                        typeEl.value = typeCode;
                                    }
                                }
                                if (roomEl) {
                                    const optLabel = 'Kamar ' + (r.room_number ?? '-') + ' • ' + (r.type_name ?? '');
                                    let opt = Array.from(roomEl.options).find(o => String(o.value) === String(r.id));
                                    if (!opt) {
                                        opt = document.createElement('option');
                                        opt.value = String(r.id);
                                        opt.textContent = optLabel;
                                        roomEl.appendChild(opt);
                                    } else {
                                        opt.textContent = optLabel;
                                    }
                                    roomEl.value = String(r.id);
                                }
                                m.show();
                            });
                            checkinBtn.addEventListener('click', function(){
                                const params = new URLSearchParams();
                                params.set('room_id', String(r.id));
                                if (ci && ci.value) params.set('check_in', ci.value);
                                if (co && co.value) params.set('check_out', co.value);
                                window.location.href = WALKIN_URL + '?' + params.toString();
                            });
                            listEl.appendChild(item);
                        });
                    } else {
                        countEl.textContent = '0 kamar';
                        emptyEl.style.display = '';
                    }
                    new bootstrap.Modal(modalEl).show();
                } catch (e) {
                    hideLoadingSkeleton();
                    countEl.textContent = '';
                    emptyEl.style.display = '';
                    new bootstrap.Modal(modalEl).show();
                }
            });
        });
        if (searchEl) {
            searchEl.addEventListener('input', function() {
                const term = this.value.trim().toLowerCase();
                let visible = 0;
                Array.from(listEl.children).forEach(item => {
                    const match = item.textContent.toLowerCase().includes(term);
                    item.style.display = match ? '' : 'none';
                    if (match) visible++;
                });
                emptyEl.style.display = visible === 0 ? '' : 'none';
            });
        }
        async function updateTypeCounts() {
            const params = new URLSearchParams();
            params.set('aggregate', '1');
            if (ci && ci.value) params.set('check_in', ci.value);
            if (co && co.value) params.set('check_out', co.value);
            try {
                const res = await fetch('{{ route('admin.available-rooms') }}' + '?' + params.toString(), { headers: { 'Accept': 'application/json' } });
                const data = await res.json();
                if (data && data.success && Array.isArray(data.counts)) {
                    const map = {};
                    data.counts.forEach(function(c){ map[String(c.type)] = Number(c.count || 0); });
                    btns.forEach(function(btn){
                        const code = btn.getAttribute('data-type-code') || '';
                        const badge = btn.querySelector('.type-count');
                        const val = map[String(code)] || 0;
                        if (badge) {
                            badge.textContent = val > 0 ? String(val) : '';
                            badge.className = 'badge ms-1 type-count ' + (val > 0 ? 'bg-primary' : 'bg-secondary');
                        }
                    });
                }
            } catch(_) {}
        }
        if (ci) ci.addEventListener('change', updateTypeCounts);
        if (co) co.addEventListener('change', updateTypeCounts);
        updateTypeCounts();
    })();
</script>
<!-- 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" data-bs-backdrop="static" data-bs-keyboard="false">
    <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-6">
                            <div class="mb-3">
                                <label for="quick_room_type" class="form-label">Tipe Kamar</label>
                                <select class="form-control" id="quick_room_type" name="room_type">
                                    <option value="">Pilih Tipe Kamar</option>
                                    @foreach($roomTypes as $type)
                                        <option value="{{ $type->code }}">{{ $type->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <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>
                                <input type="hidden" id="quick_status" name="status" value="confirmed">
                                <div class="form-control bg-light">Dikonfirmasi</div>
                            </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>
                                @if(auth()->user() && auth()->user()->isAdmin())
                                <small class="text-muted">Akan dihitung otomatis berdasarkan durasi menginap</small>
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="checkbox" id="quick_override_price" name="override_total_price">
                                    <label class="form-check-label" for="quick_override_price">Override Harga</label>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    
                    <!-- Booking Source -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="quick_tp_channel" class="form-label">Sumber Booking</label>
                                <select class="form-control" id="quick_tp_channel" name="tp_channel">
                                    <option value="">Internal</option>
                                    @foreach(($booking_sources ?? []) as $src)
                                        @if($src !== 'Internal')
                                            <option value="{{ $src }}">{{ $src }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <small class="text-muted">Pilih OTA/sumber jika bukan internal</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="quick_tp_ref" class="form-label">Ref Sumber/Order ID</label>
                                <input type="text" class="form-control" id="quick_tp_ref" name="tp_ref" placeholder="Contoh: Booking.com #12345">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                    <label for="quick_discount_percent" class="form-label">Diskon (%)</label>
                    <input type="number" class="form-control" id="quick_discount_percent" name="discount_percent" min="0" max="100" value="0">
                            </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>

<div class="modal fade" id="walkinQuickModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="fas fa-walking me-2"></i>Walk-in Check-in</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="walkinQuickForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Tanggal Check-in</label>
                                <input type="date" class="form-control" id="walkin_check_in_date" name="check_in_date" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Tanggal Check-out</label>
                                <input type="date" class="form-control" id="walkin_check_out_date" name="check_out_date" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Tipe Kamar</label>
                                <select class="form-control" id="walkin_room_type" name="room_type">
                                    <option value="">Pilih Tipe</option>
                                    @foreach(($roomTypes ?? []) as $type)
                                        <option value="{{ $type->code }}">{{ $type->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Kamar</label>
                                <select class="form-control" id="walkin_room_id" name="room_id" required>
                                    <option value="">Pilih tipe dan tanggal</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <label class="form-label mb-0">Kamar Tambahan</label>
                        <button type="button" class="btn btn-outline-success btn-sm" id="walkinAddRoomBtn">
                            <i class="fas fa-plus me-1"></i>Tambah Kamar
                        </button>
                    </div>
                    <div id="walkinExtraRoomsContainer" class="mb-3"></div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Nama Tamu</label>
                                <div class="position-relative">
                                    <input type="text" class="form-control" id="walkin_guest_name" name="guest_name" autocomplete="off" required>
                                    <div id="walkinGuestSuggestions" class="dropdown-menu position-absolute w-100" style="display: none; max-height: 200px; overflow-y: auto; z-index: 1050;"></div>
                                    <button type="button" class="btn btn-outline-success btn-sm position-absolute"
                                            id="walkinAddNewGuestBtn" style="right: 5px; top: 50%; transform: translateY(-50%); display: none;"
                                            onclick="showAddGuestModal('walkin')" title="Tambah Tamu Baru">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Email Tamu</label>
                                <input type="email" class="form-control" id="walkin_guest_email" name="guest_email">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Telepon Tamu</label>
                                <input type="text" class="form-control" id="walkin_guest_phone" name="guest_phone">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Jumlah Tamu</label>
                                <select class="form-control" id="walkin_guest_count" name="guest_count" required>
                                    <option value="1">1 Orang</option>
                                    <option value="2">2 Orang</option>
                                    <option value="3">3 Orang</option>
                                    <option value="4">4 Orang</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Diskon (%)</label>
                                <input type="number" class="form-control" id="walkin_discount_percent" name="discount_percent" min="0" max="100" step="0.01" value="0">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Extra Bed Manual</label>
                                <input type="number" class="form-control" id="walkin_manual_extra_bed_qty" name="manual_extra_bed_qty" min="0" step="1" value="0">
                                <small class="text-muted">Harga per bed / malam: Rp {{ number_format((int)\App\Models\Settings::get('extra_bed_price', 150000), 0, ',', '.') }}</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Total Harga (Rp)</label>
                                <input type="number" class="form-control" id="walkin_total_price" name="total_price" min="0" readonly>
                                @if(auth()->user() && auth()->user()->isAdmin())
                                <small class="text-muted">Akan dihitung otomatis berdasarkan durasi menginap</small>
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="checkbox" id="walkin_override_price" name="override_total_price">
                                    <label class="form-check-label" for="walkin_override_price">Override Harga</label>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="card border-0 bg-light mb-2">
                        <div class="card-body">
                            <h6 class="card-title text-warning mb-2"><i class="fas fa-calculator me-1"></i>Ringkasan Biaya</h6>
                            <div class="d-flex justify-content-between mb-1">
                                <span>Harga Kamar</span>
                                <span id="walkin_room_subtotal">Rp 0</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span>Diskon</span>
                                <span id="walkin_discount_amount">Rp 0</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span>Extra Bed (Manual) <small class="text-muted" id="walkin_extrabed_desc">(0)</small></span>
                                <span id="walkin_extrabed_total">Rp 0</span>
                            </div>
                            <hr class="my-2">
                            <div class="d-flex justify-content-between">
                                <strong>Total</strong>
                                <strong id="walkin_grand_total_display">Rp 0</strong>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">Proses Check-in</button>
                </div>
            </form>
        </div>
    </div>
    </div>

<div class="modal fade" id="extendBookingModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title"><i class="fas fa-clock me-2"></i>Extend Booking</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-2 mb-3">
                    <div class="col-md-8">
                        <label class="form-label">Pilih Booking (Sedang Check-in)</label>
                        <select id="extend_booking_id" class="form-select">
                            <option value="">Memuat daftar booking...</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Check-out Baru</label>
                        <input type="date" id="extend_new_checkout" class="form-control">
                    </div>
                </div>
                <div class="card border-0 bg-light">
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Check-out Saat Ini:</span>
                            <span id="extend_current_checkout" class="fw-semibold">-</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>Tarif/Malam:</span>
                            <span id="extend_room_rate" class="fw-semibold">Rp 0</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>Malam Tambahan:</span>
                            <span id="extend_extra_nights" class="fw-semibold">0</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span>Estimasi Biaya Extend:</span>
                            <span id="extend_estimated_cost" class="fw-bold text-warning">Rp 0</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" id="extendSubmitBtn" class="btn btn-warning">Simpan Extend</button>
            </div>
        </div>
    </div>
    </div>

<div class="modal fade" id="billChargeModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="fas fa-receipt me-2"></i>Bill Charge</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-12">
                        <label class="form-label">Pilih Tamu Check-in</label>
                        <select id="bill_booking_id" class="form-select">
                            <option value="">Memuat booking check-in...</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Jenis Item</label>
                        <select id="bill_item_type" class="form-select">
                            <option value="service">Layanan</option>
                            <option value="charge">Charge</option>
                        </select>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">Pilih dari Katalog</label>
                        <select id="bill_catalog" class="form-select">
                            <option value="">Pilih item...</option>
                        </select>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">Nama Item</label>
                        <input type="text" id="bill_name" class="form-control" placeholder="Nama layanan/charge">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Qty</label>
                        <input type="number" id="bill_qty" class="form-control" min="1" value="1">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Harga</label>
                        <input type="number" id="bill_price" class="form-control" min="0" placeholder="0">
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Catatan</label>
                        <textarea id="bill_notes" class="form-control" rows="2" placeholder="Opsional"></textarea>
                    </div>
                </div>
                <div class="mt-3">
                    <button type="button" id="bill_add_btn" class="btn btn-danger">
                        <i class="fas fa-plus me-1"></i>Tambah Item
                    </button>
                </div>
                <hr>
                <div id="bill_items_list" class="list-group"></div>
                <div class="d-flex justify-content-end mt-2">
                    <strong>Total: <span id="bill_total">Rp 0</span></strong>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="bill_create_btn" class="btn btn-danger">Buat Bill</button>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
    </div>

<div class="modal fade" id="bookingListModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="fas fa-list me-2"></i>Pilih Booking untuk Check-in</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-2 mb-3">
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-text bg-light border-end-0"><i class="fas fa-search"></i></span>
                            <input type="text" id="bookingListSearch" class="form-control border-start-0" placeholder="Cari nama tamu atau kode booking">
                        </div>
                    </div>
                    <div class="col-md-6 text-end">
                        <span id="bookingListCount" class="badge bg-light text-primary"></span>
                    </div>
                </div>
                <div id="bookingListLoading" class="p-2"></div>
                <div id="bookingList" class="list-group list-group-flush"></div>
                <div id="bookingListEmpty" class="text-center text-muted py-4" style="display:none;">Tidak ada booking yang siap check-in</div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
    </div>

<div class="modal fade" id="invoiceQuickModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-secondary text-white">
                <h5 class="modal-title"><i class="fas fa-file-invoice me-2"></i>Non Stay Bill</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('admin.invoices.nonstay.store') }}" id="nonstay-form">
                @csrf
                <div class="modal-body">
                    <h6 class="card-title mb-3"><i class="fas fa-user me-1"></i>Data Tamu</h6>
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Nama Tamu <span class="text-danger">*</span></label>
                            <input type="text" name="guest_name" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Email</label>
                            <input type="email" name="guest_email" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Telepon</label>
                            <input type="text" name="guest_phone" class="form-control">
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">Alamat</label>
                            <input type="text" name="guest_address" class="form-control" placeholder="Alamat tamu (opsional)">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Perusahaan</label>
                            <input type="text" name="company" class="form-control" placeholder="Nama perusahaan (opsional)">
                        </div>
                    </div>

                    <h6 class="card-title mb-3"><i class="fas fa-bed me-1"></i>Informasi Kamar (Opsional)</h6>
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Pilih Kamar</label>
                            <select class="form-select" id="room_id" name="room_id">
                                <option value="">-- Tanpa Kamar --</option>
                                @foreach(($rooms ?? []) as $room)
                                    <option value="{{ $room->id }}"
                                            data-number="{{ $room->room_number }}"
                                            data-type="{{ $room->roomType->name ?? $room->type }}"
                                            data-hotel="{{ $room->hotel->name ?? ($settings['hotel_name'] ?? '') }}"
                                            data-rate="{{ (int)($room->price_per_night ?? 0) }}">
                                        Kamar {{ $room->room_number }} - {{ $room->roomType->name ?? $room->type }} - Rp {{ number_format((int)($room->price_per_night ?? 0), 0, ',', '.') }}/malam
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Check-in</label>
                            <input type="date" class="form-control" id="check_in_date" name="check_in_date">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Check-out</label>
                            <input type="date" class="form-control" id="check_out_date" name="check_out_date">
                        </div>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-md-3">
                            <label class="form-label">Malam</label>
                            <input type="number" class="form-control" id="nights" min="0" value="0" readonly>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Rate/Malam (Rp)</label>
                            <input type="number" class="form-control" id="room_rate" name="room_rate" min="0" value="0" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Ringkasan Kamar</label>
                            <div class="form-text">
                                <span id="room-summary-number">-</span> • <span id="room-summary-type">-</span> • <span id="room-summary-hotel">{{ $settings['hotel_name'] ?? '' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Diskon (%)</label>
                            <input type="number" class="form-control" id="discount_percent" name="discount_percent" min="0" max="100" value="0">
                            <div class="form-text">Diskon diterapkan pada subtotal kamar</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Catatan</label>
                            <textarea name="notes" class="form-control" rows="2" placeholder="Catatan tambahan (opsional)"></textarea>
                        </div>
                    </div>

                    <h6 class="card-title mb-3"><i class="fas fa-credit-card me-1"></i>Pembayaran</h6>
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" id="status" class="form-select" required>
                                <option value="draft">Draft</option>
                                <option value="sent">Terkirim</option>
                                <option value="paid">Dibayar</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Channel Pembayaran</label>
                            <select name="payment_channel_id" id="payment_channel_id" class="form-select">
                                <option value="">-- Pilih Channel --</option>
                                @foreach(($paymentChannels ?? []) as $ch)
                                    <option value="{{ $ch->id }}">{{ $ch->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4" id="paid_at_group">
                            <label class="form-label">Tanggal Dibayar</label>
                            <input type="date" name="paid_at" id="paid_at" class="form-control">
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Tanggal Invoice <span class="text-danger">*</span></label>
                            <input type="date" name="issued_at" id="issued_at" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Jatuh Tempo</label>
                            <input type="date" name="due_date" id="due_date" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tarif Pajak</label>
                            <input type="text" class="form-control" value="{{ (int)($settings['tax_rate'] ?? 0) }}%" readonly>
                        </div>
                    </div>

                    <div class="card border-0 bg-light">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Jumlah Malam:</span>
                                        <span id="ns-baseline-nights">0</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Tarif/Malam:</span>
                                        <span>Rp <span id="ns-room-rate">0</span></span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Subtotal Kamar:</span>
                                        <span>Rp <span id="ns-baseline-subtotal">0</span></span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Diskon:</span>
                                        <span id="ns-discount-total">Rp 0</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Total (Include Tax):</span>
                                        <span id="ns-total-include">Rp 0</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>DPP:</span>
                                        <span id="ns-dpp">Rp 0</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>PPN:</span>
                                        <span id="ns-tax">Rp 0</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span class="fw-bold">Total Dibayar:</span>
                                        <span id="ns-grand-total" class="fw-bold text-success">Rp 0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-secondary">Terbitkan Invoice</button>
                </div>
            </form>
        </div>
    </div>
    </div>

<div class="modal fade" id="invoiceCreateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title"><i class="fas fa-file-invoice-dollar me-2"></i>Buat Invoice dari Booking</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('admin.invoices.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Pilih Booking (Checked-in / Siap Ditagih)</label>
                        <select class="form-control" name="booking_id" id="invoice_booking_id" required>
                            <option value="">Memuat daftar booking...</option>
                        </select>
                        <small class="text-muted">Hanya booking yang belum memiliki invoice akan ditampilkan.</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Tanggal Invoice</label>
                                <input type="date" class="form-control" name="invoice_date" id="invoice_date" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Jatuh Tempo</label>
                                <input type="date" class="form-control" name="due_date" id="invoice_due_date">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Status</label>
                                <select class="form-control" name="status" id="invoice_status" required>
                                    <option value="draft">Draft</option>
                                    <option value="sent">Terkirim</option>
                                    <option value="paid">Dibayar</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Catatan</label>
                                <textarea class="form-control" name="notes" rows="2" placeholder="Catatan tambahan..."></textarea>
                            </div>
                        </div>
                    </div>
                    <div id="invoice-paid-wrap" style="display:none;">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">ID Channel Pembayaran</label>
                                    <input type="number" class="form-control" name="payment_channel_id" placeholder="Misal: 1">
                                    <small class="text-muted">Wajib diisi jika status Dibayar.</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Waktu Dibayar</label>
                                    <input type="datetime-local" class="form-control" name="paid_at">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Biaya Kartu (opsional)</label>
                                    <input type="number" class="form-control" name="card_charge" min="0" step="1">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" id="bill_to_third_party" name="bill_to_third_party" value="1">
                        <label class="form-check-label" for="bill_to_third_party">Tagihkan ke pihak ketiga</label>
                    </div>
                    <div id="third-party-wrap" class="mt-2" style="display:none;">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Nama Pihak Ketiga</label>
                                    <input type="text" class="form-control" name="third_party_name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Email Pihak Ketiga</label>
                                    <input type="email" class="form-control" name="third_party_email">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Telepon Pihak Ketiga</label>
                                    <input type="text" class="form-control" name="third_party_phone">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-dark">Buat Invoice</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" enctype="multipart/form-data">
                <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">
                                <div class="d-flex justify-content-between align-items-center">
                                    <label for="new_guest_id_number" class="form-label mb-0">Nomor KTP *</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="new_guest_is_company" name="is_company" value="1">
                                        <label class="form-check-label small" for="new_guest_is_company">Perusahaan (tanpa NIK)</label>
                                    </div>
                                </div>
                                <input type="text" class="form-control" id="new_guest_id_number" name="id_number" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="new_guest_ktp_file" class="form-label">Upload KTP</label>
                                <input type="file" class="form-control" id="new_guest_ktp_file" name="ktp_file" accept="image/*,application/pdf">
                                <div class="form-text">Format: JPG/PNG/PDF, maks 4 MB</div>
                                <div class="d-flex align-items-center mt-2">
                                    <button type="button" class="btn btn-outline-secondary btn-sm" id="openDashboardKtpCameraBtn">
                                        <i class="fas fa-camera me-1"></i>Ambil Foto KTP
                                    </button>
                                </div>
                            </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="WNI" selected>WNI</option>
                                    <option value="WNA">WNA</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>

<div class="modal fade" id="cameraCaptureModalDashboard" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title"><i class="fas fa-camera me-1"></i>Ambil Foto KTP</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="ratio ratio-4x3 border rounded">
                            <video id="cameraVideoDashboard" autoplay playsinline style="width:100%; height:100%; object-fit:cover;"></video>
                            <canvas id="cameraCanvasDashboard" style="display:none; width:100%; height:100%;"></canvas>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-primary" id="cameraCaptureBtnDashboard"><i class="fas fa-camera me-1"></i>Ambil</button>
                            <button type="button" class="btn btn-warning" id="cameraRetakeBtnDashboard" style="display:none;"><i class="fas fa-redo me-1"></i>Ulangi</button>
                            <button type="button" class="btn btn-success" id="cameraUseBtnDashboard" style="display:none;"><i class="fas fa-check me-1"></i>Gunakan</button>
                        </div>
                    </div>
                </div>
            </div>
        </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.room_type && room.room_type.name) ? room.room_type.name : (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.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '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 = parseDateLocal(booking.check_in_date);
                        const checkOut = parseDateLocal(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">${parseDateLocal(booking.check_in_date).toLocaleDateString('id-ID')} - ${parseDateLocal(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 = parseDateLocal(booking.check_in_date);
            const checkOut = parseDateLocal(booking.check_out_date);
            const currentDate = parseDateLocal(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 = parseDateLocal(booking.check_in_date);
        const checkOutDate = parseDateLocal(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();
        try {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.forEach(function (el) { new bootstrap.Tooltip(el); });
        } catch (e) {}
    });
    
    // Quick Booking functionality
    let quickRoomsCache = null;
    function initQuickBooking() {
        initGuestSearch();
        // Load rooms when modal opens
        document.getElementById('quickBookingModal').addEventListener('show.bs.modal', function() {
            loadRoomsForQuickBooking();
            setDefaultDates();
            const overrideEl = document.getElementById('quick_override_price');
            const totalEl = document.getElementById('quick_total_price');
            if (overrideEl) overrideEl.checked = false;
            if (totalEl) totalEl.readOnly = true;
        });

        // Handle room type change
        const typeSelect = document.getElementById('quick_room_type');
        if (typeSelect) {
            typeSelect.addEventListener('change', function() {
                loadRoomsForQuickBooking();
                calculateTotalPrice();
                autoCheckAvailability();
            });
        }

        // 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();
        });
        const da = document.getElementById('quick_discount_percent');
        if (da) {
            da.addEventListener('input', calculateTotalPrice);
            da.addEventListener('change', calculateTotalPrice);
        }
        const overrideEl = document.getElementById('quick_override_price');
        if (overrideEl) {
            overrideEl.addEventListener('change', function() {
                const totalEl = document.getElementById('quick_total_price');
                if (totalEl) totalEl.readOnly = !overrideEl.checked;
                if (!overrideEl.checked) {
                    calculateTotalPrice();
                }
            });
        }
        
        // 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(){
            const isCompanyEl = document.getElementById('new_guest_is_company');
            const idInputEl = document.getElementById('new_guest_id_number');
            if (isCompanyEl && idInputEl) {
                const toggleIdRequirement = function() {
                    const checked = isCompanyEl.checked;
                    if (checked) { idInputEl.classList.remove('is-invalid'); }
                    idInputEl.disabled = checked;
                };
                isCompanyEl.addEventListener('change', toggleIdRequirement);
                toggleIdRequirement();
            }
            const takeBtn = document.getElementById('openDashboardKtpCameraBtn');
            if (takeBtn) {
                takeBtn.addEventListener('click', function() {
                    if (typeof openDashboardKtpCamera === 'function') {
                        openDashboardKtpCamera('new_guest_ktp_file');
                    } else if (typeof window.openDashboardKtpCamera === 'function') {
                        window.openDashboardKtpCamera('new_guest_ktp_file');
                    } else {
                        showNotification('Fungsi kamera belum siap. Coba reload halaman.', 'error');
                    }
                });
            }
        })();
        // Enable Enter to move to next field in Add Guest form
        (function(){
            const addForm = document.getElementById('addGuestForm');
            if (!addForm) return;
            addForm.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    const target = e.target;
                    const tag = (target.tagName || '').toLowerCase();
                    if (tag === 'textarea') return; // allow newline in textarea
                    e.preventDefault();
                    const focusables = Array.from(this.querySelectorAll('input, select, textarea, button'))
                        .filter(el => !el.disabled && el.type !== 'hidden' && el.offsetParent !== null);
                    const idx = focusables.indexOf(target);
                    if (idx > -1 && idx < focusables.length - 1) {
                        const next = focusables[idx + 1];
                        next.focus();
                        if (next.select && next.tagName.toLowerCase() === 'input' && ['text','email','tel','number'].includes(next.type)) {
                            next.select();
                        }
                    } else {
                        this.requestSubmit ? this.requestSubmit() : this.dispatchEvent(new Event('submit', {cancelable: true}));
                    }
                }
            });
        })();
    }
    
    function loadRoomsForQuickBooking() {
        const roomSelect = document.getElementById('quick_room_id');
        const typeSelect = document.getElementById('quick_room_type');
        const selectedType = typeSelect ? (typeSelect.value || '').toString() : '';
        roomSelect.innerHTML = '<option value="">Loading...</option>';

        const rebuildOptions = (rooms, selectedType) => {
            roomSelect.innerHTML = '<option value="">Pilih Kamar</option>';
            let appended = 0;
            const addOption = (room) => {
                const option = document.createElement('option');
                option.value = room.id;
                const isAvailable = room.status === 'available';
                const statusText = isAvailable ? '✓ Tersedia' : '✗ Tidak Tersedia';
                const statusClass = isAvailable ? 'room-available' : 'room-unavailable';
                const bed = room.bed_type ? room.bed_type.charAt(0).toUpperCase() + room.bed_type.slice(1) : null;
                const bedPart = bed ? ` • Bed ${bed}` : '';
                option.textContent = `${room.type} - ${room.room_number}${bedPart} - 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;
                if (!isAvailable) option.disabled = true;
                roomSelect.appendChild(option);
                appended++;
            };
            const normalizedType = (selectedType || '').trim();
            if (normalizedType) {
                rooms.forEach(room => {
                    const rt = (room.type || '').toString();
                    if (rt === normalizedType) addOption(room);
                });
            }
            if (appended === 0) rooms.forEach(room => addOption(room));
            if (appended === 0 && rooms.length === 0) {
                roomSelect.innerHTML = '<option value="">Tidak ada kamar tersedia</option>';
            }
        };

        if (quickRoomsCache && Array.isArray(quickRoomsCache)) {
            rebuildOptions(quickRoomsCache, selectedType);
            return;
        }

        const url = '{{ url('/api/rooms') }}';
        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(async response => {
                const ct = response.headers.get('content-type') || '';
                const data = ct.includes('application/json') ? await response.json() : { success: false, data: [] };
                return { ok: response.ok, data };
            })
            .then(({ ok, data }) => {
                if (data.success && Array.isArray(data.data)) {
                    quickRoomsCache = data.data;
                    rebuildOptions(quickRoomsCache, selectedType);
                } else {
                    roomSelect.innerHTML = '<option value="">' + ((ok ? '' : 'HTTP error. ') + '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);
        const ymd = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
        const inEl = document.getElementById('quick_check_in_date');
        const outEl = document.getElementById('quick_check_out_date');
        const todayStr = ymd(today);
        const tomorrowStr = ymd(tomorrow);
        if (inEl) { inEl.value = todayStr; inEl.setAttribute('min', todayStr); }
        if (outEl) { outEl.value = tomorrowStr; outEl.setAttribute('min', tomorrowStr); }
    }
    
    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');
        const discountInput = document.getElementById('quick_discount_percent');
        const overrideToggle = document.getElementById('quick_override_price');
        if (overrideToggle && overrideToggle.checked) {
            return;
        }
        
        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 baseTotal = roomPrice * nights;
            const percent = Math.min(100, Math.max(0, parseFloat(discountInput?.value || 0) || 0));
            const discount = Math.floor((baseTotal * percent) / 100);
            const totalPrice = Math.max(0, baseTotal - discount);
            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'),
            tp_channel: formData.get('tp_channel'),
            tp_ref: formData.get('tp_ref'),
            status: formData.get('status'),
            total_price: formData.get('total_price'),
            override_total_price: !!formData.get('override_total_price'),
            discount_percent: formData.get('discount_percent'),
            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',
                'Accept': '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(async response => {
            const ct = response.headers.get('content-type') || '';
            const data = ct.includes('application/json') ? await response.json() : { success: false, message: await response.text() };
            return { ok: response.ok, data };
        })
        .then(({ ok, 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: ' + ((ok ? '' : 'HTTP 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 parseDateLocal(val) {
        if (!val) return null;
        const s = String(val);
        if (s.length >= 10 && s.indexOf('T') === -1) {
            const parts = s.slice(0, 10).split('-').map(n => parseInt(n, 10));
            if (parts.length === 3 && parts.every(n => !isNaN(n))) {
                return new Date(parts[0], parts[1] - 1, parts[2]);
            }
        }
        return new Date(s);
    }

    function formatDate(dateStr) {
        return parseDateLocal(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 = parseDateLocal(checkInDate);
        const checkOut = parseDateLocal(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 = [];
     let guestFormTarget = 'quick';
     let guestSearchInitialized = false;
     let guestDataLoaded = false;
     
     function initGuestSearch() {
         if (guestSearchInitialized) return;
         guestSearchInitialized = true;
         const guestNameInput = document.getElementById('quick_guest_name');
         const suggestionsDiv = document.getElementById('guestSuggestions');
         const addNewBtn = document.getElementById('addNewGuestBtn');
         
         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());
                 }
             });
         }
         

        initWalkinGuestSearch();
     }
     
     function loadExistingGuests() {
         if (guestDataLoaded) return;
         guestDataLoaded = true;
         // Fetch guests data from API
        fetch('{{ url('/') }}/api/guests', { headers: { 'Accept': 'application/json' } })
            .then(async response => {
                const ct = response.headers.get('content-type') || '';
                const data = ct.includes('application/json') ? await response.json() : { success: false, data: [] };
                return { ok: response.ok, data };
            })
            .then(({ ok, data }) => {
                if (data.success) {
                    existingGuests = data.data;
                    console.log('Loaded ' + existingGuests.length + ' guests from database');
                } else {
                    console.error('Failed to load guests data' + (ok ? '' : ' (HTTP error)'));
                    // Fallback to empty array if API fails
                    existingGuests = [];
                    guestDataLoaded = false;
                }
            })
             .catch(error => {
                 console.error('Error loading guests:', error);
                 // Fallback to empty array if API fails
                 existingGuests = [];
                 guestDataLoaded = false;
             });
     }
     
     function searchGuests(query) {
          const suggestionsDiv = document.getElementById('guestSuggestions');
          const addNewBtn = document.getElementById('addNewGuestBtn');
          
          // Filter guests based on name or KTP (id_number)
          const q = (query || '').toLowerCase();
          const matchedGuests = existingGuests.filter(guest => {
              const nameMatch = (guest.name || '').toLowerCase().includes(q);
              const ktp = String(guest.id_number || '').toLowerCase();
              const ktpMatch = ktp && ktp.includes(q);
              return nameMatch || ktpMatch;
          });
         
         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} <span class="text-muted">(${guest.id_number || '-'})</span></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 initWalkinGuestSearch() {
        const walkinGuestInput = document.getElementById('walkin_guest_name');
        const walkinSuggestions = document.getElementById('walkinGuestSuggestions');
        const walkinAddBtn = document.getElementById('walkinAddNewGuestBtn');
        if (!walkinGuestInput || !walkinSuggestions) return;
        walkinGuestInput.addEventListener('input', function() {
            const query = this.value.trim();
            clearTimeout(guestSearchTimeout);
            if (query.length < 2) {
                hideWalkinSuggestions();
                if (walkinAddBtn) walkinAddBtn.style.display = 'none';
                return;
            }
            guestSearchTimeout = setTimeout(() => {
                searchWalkinGuests(query);
            }, 300);
        });
        walkinGuestInput.addEventListener('focus', function() {
            if (this.value.trim().length >= 2) {
                searchWalkinGuests(this.value.trim());
            }
        });
        document.addEventListener('click', function(e) {
            if (!walkinGuestInput.contains(e.target) && !walkinSuggestions.contains(e.target)) {
                hideWalkinSuggestions();
            }
        });
    }
    
    function searchWalkinGuests(query) {
        const walkinAddBtn = document.getElementById('walkinAddNewGuestBtn');
        const q = (query || '').toLowerCase();
        const matchedGuests = existingGuests.filter(guest => {
            const nameMatch = (guest.name || '').toLowerCase().includes(q);
            const ktp = String(guest.id_number || '').toLowerCase();
            const ktpMatch = ktp && ktp.includes(q);
            return nameMatch || ktpMatch;
        });
        if (matchedGuests.length > 0) {
            showWalkinSuggestions(matchedGuests);
            if (walkinAddBtn) walkinAddBtn.style.display = 'none';
        } else {
            hideWalkinSuggestions();
            if (walkinAddBtn) walkinAddBtn.style.display = 'block';
        }
    }
    
    function showWalkinSuggestions(guests) {
        const suggestionsDiv = document.getElementById('walkinGuestSuggestions');
        if (!suggestionsDiv) return;
        let html = '';
        guests.forEach(guest => {
            html += `
                <div class="dropdown-item guest-suggestion" onclick="selectWalkinGuest(${guest.id})" style="cursor: pointer;">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                           <div class="fw-bold">${guest.name} <span class="text-muted">(${guest.id_number || '-'})</span></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 hideWalkinSuggestions() {
        const suggestionsDiv = document.getElementById('walkinGuestSuggestions');
        if (suggestionsDiv) suggestionsDiv.style.display = 'none';
    }
    
    function selectWalkinGuest(guestId) {
        const guest = existingGuests.find(g => g.id === guestId);
        if (!guest) return;
        const nameInput = document.getElementById('walkin_guest_name');
        const emailInput = document.getElementById('walkin_guest_email');
        const phoneInput = document.getElementById('walkin_guest_phone');
        if (nameInput) nameInput.value = guest.name || '';
        if (emailInput) emailInput.value = guest.email || '';
        if (phoneInput) phoneInput.value = guest.phone || '';
        hideWalkinSuggestions();
        const walkinAddBtn = document.getElementById('walkinAddNewGuestBtn');
        if (walkinAddBtn) walkinAddBtn.style.display = 'none';
        const nextEl = document.getElementById('walkin_guest_count');
        if (nextEl) nextEl.focus();
    }
     
     function showAddGuestModal(target = 'quick') {
         guestFormTarget = target === 'walkin' ? 'walkin' : 'quick';
         const sourceId = guestFormTarget === 'walkin' ? 'walkin_guest_name' : 'quick_guest_name';
         const currentName = (document.getElementById(sourceId)?.value || '').trim();
         
         // 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 isCompanyEl = document.getElementById('new_guest_is_company');
        const idInputEl = document.getElementById('new_guest_id_number');
        const isCompany = !!(isCompanyEl && isCompanyEl.checked);
        if (isCompany) {
            formData.set('is_company', '1');
        }
        const idNumber = String(formData.get('id_number') || '').trim();
        if (!isCompany) {
            if (!/^\d{16}$/.test(idNumber)) {
                if (idInputEl) idInputEl.classList.add('is-invalid');
                showNotification('Nomor KTP harus 16 digit', 'error');
                return;
            }
        }
         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;
         
         fetch('{{ route('admin.guests.store') }}', {
             method: 'POST',
             headers: {
                 'Accept': 'application/json',
                 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
             },
             body: formData
         })
         .then(async response => {
             const ct = response.headers.get('content-type') || '';
             const result = ct.includes('application/json') ? await response.json() : { success: false, message: await response.text() };
             return { ok: response.ok, result };
         })
        .then(({ ok, result }) => {
            if (result.success) {
                 const newGuest = result.guest;
                 
                 // Add to existing guests array
                 existingGuests.push(newGuest);
                 
                 if (guestFormTarget === 'walkin') {
                    document.getElementById('walkin_guest_name').value = newGuest.name;
                    document.getElementById('walkin_guest_email').value = newGuest.email || '';
                    document.getElementById('walkin_guest_phone').value = newGuest.phone || '';
                 } else {
                    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
                 if (guestFormTarget === 'walkin') {
                    const walkinAddBtn = document.getElementById('walkinAddNewGuestBtn');
                    if (walkinAddBtn) walkinAddBtn.style.display = 'none';
                    hideWalkinSuggestions();
                 } else {
                    document.getElementById('addNewGuestBtn').style.display = 'none';
                    hideSuggestions();
                 }
                 
                 // Show success notification
                 showNotification(`Tamu baru ${newGuest.name} berhasil ditambahkan`, 'success');
                 
                 // Focus to next field
                 if (guestFormTarget === 'walkin') {
                    document.getElementById('walkin_guest_count').focus();
                 } else {
                    document.getElementById('quick_guest_count').focus();
                 }
            } else {
                showNotification(((ok ? '' : 'HTTP error. ') + (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;
         });
     }
    function openDashboardKtpCamera(targetInputId) {
        var modalEl = document.getElementById('cameraCaptureModalDashboard');
        var videoEl = document.getElementById('cameraVideoDashboard');
        var canvasEl = document.getElementById('cameraCanvasDashboard');
        var captureBtn = document.getElementById('cameraCaptureBtnDashboard');
        var retakeBtn = document.getElementById('cameraRetakeBtnDashboard');
        var useBtn = document.getElementById('cameraUseBtnDashboard');
        canvasEl.style.display = 'none';
        videoEl.style.display = 'block';
        retakeBtn.style.display = 'none';
        useBtn.style.display = 'none';
        window.__cameraBlobD = null;
        var bsModal = new bootstrap.Modal(modalEl);
        bsModal.show();
        if (!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) {
            showNotification('Perangkat tidak mendukung kamera atau akses ditolak.', 'error');
            return;
        }
        navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
        .then(function(stream) {
            window.__cameraStreamD = stream;
            videoEl.srcObject = stream;
            videoEl.play();
        })
        .catch(function() {
            showNotification('Tidak bisa membuka kamera. Periksa izin browser.', 'error');
        });
        captureBtn.onclick = function() {
            var w = videoEl.videoWidth || 1280;
            var h = videoEl.videoHeight || 720;
            canvasEl.width = w;
            canvasEl.height = h;
            var ctx = canvasEl.getContext('2d');
            ctx.drawImage(videoEl, 0, 0, w, h);
            canvasEl.toBlob(function(blob) {
                window.__cameraBlobD = blob;
                canvasEl.style.display = 'block';
                videoEl.style.display = 'none';
                retakeBtn.style.display = 'block';
                useBtn.style.display = 'block';
            }, 'image/png', 0.95);
        };
        retakeBtn.onclick = function() {
            window.__cameraBlobD = null;
            canvasEl.style.display = 'none';
            videoEl.style.display = 'block';
            retakeBtn.style.display = 'none';
            useBtn.style.display = 'none';
        };
        useBtn.onclick = function() {
            if (!window.__cameraBlobD) return;
            var file = new File([window.__cameraBlobD], 'ktp_capture.png', { type: 'image/png' });
            var dt = new DataTransfer();
            dt.items.add(file);
            var input = document.getElementById(targetInputId);
            if (input) {
                input.files = dt.files;
            }
            if (window.__cameraStreamD) {
                window.__cameraStreamD.getTracks().forEach(function(t) { t.stop(); });
                window.__cameraStreamD = null;
            }
            bsModal.hide();
        };
        modalEl.addEventListener('hidden.bs.modal', function handler() {
            modalEl.removeEventListener('hidden.bs.modal', handler);
            if (window.__cameraStreamD) {
                window.__cameraStreamD.getTracks().forEach(function(t) { t.stop(); });
                window.__cameraStreamD = null;
            }
            videoEl.srcObject = null;
            window.__cameraBlobD = null;
            canvasEl.style.display = 'none';
            videoEl.style.display = 'block';
            retakeBtn.style.display = 'none';
            useBtn.style.display = 'none';
        });
    }
     
     // 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);
}

/* Additional statuses for active/finished bookings */
.booking-bar.status-checked_in {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.booking-bar.status-checked_out {
    background: linear-gradient(135deg, #6b7280 0%, #374151 100%);
    box-shadow: 0 2px 8px rgba(55, 65, 81, 0.3);
}

.booking-bar.status-completed {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 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: 100%;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.calendar-day-name {
    text-align: center;
    font-weight: 600;
    color: #475569;
    padding: 4px 0;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 0.8rem;
}

.calendar-day {
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    min-height: 52px;
    padding: 6px;
    background: #ffffff;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.calendar-day.has-booking {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

.calendar-day .day-number {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

.booking-dot {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Colored tooltip for calendar */
.tooltip.calendar-tooltip {
    --bs-tooltip-bg: #1e40af;
    --bs-tooltip-color: #ffffff;
    --bs-tooltip-max-width: 280px;
    --bs-tooltip-padding-x: 0.75rem;
    --bs-tooltip-padding-y: 0.5rem;
}
.tooltip.calendar-tooltip .tooltip-inner {
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: left;
}

.tooltip.tooltip-day-1 { --bs-tooltip-bg: #1e40af; --bs-tooltip-color: #ffffff; }
.tooltip.tooltip-day-2 { --bs-tooltip-bg: #047857; --bs-tooltip-color: #ffffff; }
.tooltip.tooltip-day-3 { --bs-tooltip-bg: #7c3aed; --bs-tooltip-color: #ffffff; }
.tooltip.tooltip-day-4 { --bs-tooltip-bg: #b91c1c; --bs-tooltip-color: #ffffff; }
.tooltip.tooltip-day-5 { --bs-tooltip-bg: #f59e0b; --bs-tooltip-color: #1f2937; }
.tooltip.tooltip-day-6 { --bs-tooltip-bg: #0ea5e9; --bs-tooltip-color: #ffffff; }
.tooltip.tooltip-day-7 { --bs-tooltip-bg: #16a34a; --bs-tooltip-color: #ffffff; }

.dashboard-zoom {
    zoom: 0.7;
}
@supports not (zoom: 0.7) {
    .dashboard-zoom {
        transform: scale(0.7);
        transform-origin: top center;
        width: calc(100% / 0.7);
    }
}

html {
    font-size: 110%;
}

    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>
<script>
document.addEventListener('DOMContentLoaded', function(){
    const walkinAllowBackdate = {{ auth()->user() && auth()->user()->isAdmin() ? 'true' : 'false' }};
    const walkinRoomTypes = @json((($roomTypes ?? collect())->map(fn($type) => ['code' => $type->code, 'name' => $type->name])->values()));
    const walkinModal = document.getElementById('walkinQuickModal');
    if (walkinModal) {
        walkinModal.addEventListener('show.bs.modal', function() {
            const now = new Date();
            const tomorrow = new Date(now.getTime() + 24*60*60*1000);
            const pad = n => n.toString().padStart(2,'0');
            const toYMD = d => d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate());
            const ci = document.getElementById('walkin_check_in_date');
            const co = document.getElementById('walkin_check_out_date');
            if (ci) {
                ci.value = toYMD(now);
                if (walkinAllowBackdate) { ci.removeAttribute('min'); } else { ci.setAttribute('min', toYMD(now)); }
            }
            if (co) {
                co.value = toYMD(tomorrow);
                if (walkinAllowBackdate) { co.removeAttribute('min'); } else { co.setAttribute('min', toYMD(tomorrow)); }
            }
            const rsel = document.getElementById('walkin_room_id');
            if (rsel) rsel.innerHTML = '<option value="">Pilih tipe dan tanggal</option>';
            const tsel = document.getElementById('walkin_room_type');
            if (tsel) tsel.value = '';
            const gn = document.getElementById('walkin_guest_name');
            if (gn) gn.value = '';
            const ge = document.getElementById('walkin_guest_email');
            if (ge) ge.value = '';
            const gp = document.getElementById('walkin_guest_phone');
            if (gp) gp.value = '';
            const walkinAddBtn = document.getElementById('walkinAddNewGuestBtn');
            if (walkinAddBtn) walkinAddBtn.style.display = 'none';
            hideWalkinSuggestions();
            const gc = document.getElementById('walkin_guest_count');
            if (gc) gc.value = '1';
            const overrideEl = document.getElementById('walkin_override_price');
            const totalEl = document.getElementById('walkin_total_price');
            const discountEl = document.getElementById('walkin_discount_percent');
            const manualExtraEl = document.getElementById('walkin_manual_extra_bed_qty');
            const extraContainer = document.getElementById('walkinExtraRoomsContainer');
            if (extraContainer) extraContainer.innerHTML = '';
            if (overrideEl) overrideEl.checked = false;
            if (discountEl) discountEl.value = '0';
            if (manualExtraEl) manualExtraEl.value = '0';
            if (totalEl) {
                totalEl.readOnly = true;
                totalEl.value = '';
            }
            const roomSubtotalEl = document.getElementById('walkin_room_subtotal');
            const discountAmountEl = document.getElementById('walkin_discount_amount');
            const extrabedDescEl = document.getElementById('walkin_extrabed_desc');
            const extrabedTotalEl = document.getElementById('walkin_extrabed_total');
            const grandTotalDisplayEl = document.getElementById('walkin_grand_total_display');
            if (roomSubtotalEl) roomSubtotalEl.textContent = 'Rp 0';
            if (discountAmountEl) discountAmountEl.textContent = 'Rp 0';
            if (extrabedDescEl) extrabedDescEl.textContent = '(0)';
            if (extrabedTotalEl) extrabedTotalEl.textContent = 'Rp 0';
            if (grandTotalDisplayEl) grandTotalDisplayEl.textContent = 'Rp 0';
            syncWalkinOverrideMode();
        });
    }
    function getWalkinAllRoomRows() {
        const rows = [{
            typeEl: document.getElementById('walkin_room_type'),
            roomEl: document.getElementById('walkin_room_id'),
            guestsEl: document.getElementById('walkin_guest_count'),
            extra: false
        }];
        document.querySelectorAll('#walkinExtraRoomsContainer .walkin-extra-room-row').forEach(function(row) {
            rows.push({
                typeEl: row.querySelector('.walkin-extra-room-type'),
                roomEl: row.querySelector('.walkin-extra-room-id'),
                guestsEl: row.querySelector('.walkin-extra-room-guests'),
                extra: true
            });
        });
        return rows;
    }
    function syncWalkinOverrideMode() {
        const overrideEl = document.getElementById('walkin_override_price');
        const totalEl = document.getElementById('walkin_total_price');
        const hasExtraRows = document.querySelectorAll('#walkinExtraRoomsContainer .walkin-extra-room-row').length > 0;
        if (!overrideEl || !totalEl) return;
        if (hasExtraRows) {
            overrideEl.checked = false;
            overrideEl.disabled = true;
            totalEl.readOnly = true;
        } else {
            overrideEl.disabled = false;
            totalEl.readOnly = !overrideEl.checked;
        }
    }
    function loadWalkinRoomsForElements(typeEl, roomEl) {
        const ci = document.getElementById('walkin_check_in_date');
        const co = document.getElementById('walkin_check_out_date');
        if (!typeEl || !roomEl) return Promise.resolve();
        const type = (typeEl.value || '').toString();
        if (type === '') {
            roomEl.innerHTML = '<option value="">Pilih tipe</option>';
            return Promise.resolve();
        }
        const p = new URLSearchParams();
        p.set('type', type);
        if (ci && ci.value) p.set('check_in', ci.value);
        if (co && co.value) p.set('check_out', co.value);
        return fetch('{{ route('admin.available-rooms') }}' + '?' + p.toString(), { headers: { 'Accept': 'application/json' } })
            .then(r => r.json())
            .then(data => {
                roomEl.innerHTML = '';
                if (data && data.success && Array.isArray(data.rooms) && data.rooms.length > 0) {
                    const ph = document.createElement('option');
                    ph.value = '';
                    ph.textContent = 'Pilih Kamar';
                    roomEl.appendChild(ph);
                    data.rooms.forEach(function(room){
                        const o = document.createElement('option');
                        o.value = String(room.id);
                        const isAvailable = room.is_available !== false;
                        const statusText = isAvailable ? '✓ Tersedia' : '✗ Tidak Tersedia';
                        const bed = room.bed_type ? room.bed_type.charAt(0).toUpperCase() + room.bed_type.slice(1) : '';
                        const bedPart = bed ? ' • Bed ' + bed : '';
                        o.textContent = 'Kamar ' + (room.room_number || '-') + ' • ' + (room.type_name || '') + bedPart + ' (' + statusText + ')';
                        o.dataset.price = room.price_per_night || 0;
                        o.disabled = !isAvailable;
                        roomEl.appendChild(o);
                    });
                } else {
                    const o = document.createElement('option');
                    o.value = '';
                    o.textContent = 'Tidak ada kamar tersedia';
                    roomEl.appendChild(o);
                }
            })
            .catch(() => {
                roomEl.innerHTML = '<option value="">Error memuat kamar</option>';
            });
    }
    function calculateWalkinTotalPrice() {
        const checkInDate = document.getElementById('walkin_check_in_date')?.value;
        const checkOutDate = document.getElementById('walkin_check_out_date')?.value;
        const totalEl = document.getElementById('walkin_total_price');
        const overrideEl = document.getElementById('walkin_override_price');
        const discountEl = document.getElementById('walkin_discount_percent');
        const manualExtraBedEl = document.getElementById('walkin_manual_extra_bed_qty');
        const roomSubtotalEl = document.getElementById('walkin_room_subtotal');
        const discountAmountEl = document.getElementById('walkin_discount_amount');
        const extrabedDescEl = document.getElementById('walkin_extrabed_desc');
        const extrabedTotalEl = document.getElementById('walkin_extrabed_total');
        const grandTotalDisplayEl = document.getElementById('walkin_grand_total_display');
        const EXTRA_BED_PRICE = {{ (int) \App\Models\Settings::get('extra_bed_price', 150000) }};
        if (!totalEl) return;
        if (overrideEl && overrideEl.checked && !overrideEl.disabled) return;
        if (!checkInDate || !checkOutDate) {
            totalEl.value = '';
            if (roomSubtotalEl) roomSubtotalEl.textContent = 'Rp 0';
            if (discountAmountEl) discountAmountEl.textContent = 'Rp 0';
            if (extrabedDescEl) extrabedDescEl.textContent = '(0)';
            if (extrabedTotalEl) extrabedTotalEl.textContent = 'Rp 0';
            if (grandTotalDisplayEl) grandTotalDisplayEl.textContent = 'Rp 0';
            return;
        }
        const checkIn = parseDateLocal(checkInDate);
        const checkOut = parseDateLocal(checkOutDate);
        const nights = Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24));
        if (nights > 0) {
            let roomSubtotal = 0;
            getWalkinAllRoomRows().forEach(function(row) {
                const selectedOption = row.roomEl && row.roomEl.options ? row.roomEl.options[row.roomEl.selectedIndex] : null;
                const roomPrice = parseInt(selectedOption?.dataset?.price || 0, 10) || 0;
                if (row.roomEl && row.roomEl.value && roomPrice > 0) {
                    roomSubtotal += roomPrice * nights;
                }
            });
            const discPercent = parseFloat(discountEl?.value || '0');
            const discountAmount = (!isNaN(discPercent) && discPercent > 0) ? Math.floor((roomSubtotal * discPercent) / 100) : 0;
            const baseTotal = Math.max(0, roomSubtotal - discountAmount);
            const manualExtraBeds = Math.max(0, parseInt(manualExtraBedEl?.value || '0', 10) || 0);
            const extraBedUnit = EXTRA_BED_PRICE * nights;
            const extraBedTotal = manualExtraBeds > 0 ? manualExtraBeds * extraBedUnit : 0;
            const grandTotal = Math.max(0, baseTotal + extraBedTotal);
            totalEl.value = grandTotal > 0 ? grandTotal : '';
            if (roomSubtotalEl) roomSubtotalEl.textContent = 'Rp ' + roomSubtotal.toLocaleString('id-ID');
            if (discountAmountEl) discountAmountEl.textContent = 'Rp ' + discountAmount.toLocaleString('id-ID');
            if (extrabedDescEl) extrabedDescEl.textContent = manualExtraBeds > 0 ? `(${manualExtraBeds} x Rp ${extraBedUnit.toLocaleString('id-ID')})` : '(0)';
            if (extrabedTotalEl) extrabedTotalEl.textContent = 'Rp ' + extraBedTotal.toLocaleString('id-ID');
            if (grandTotalDisplayEl) grandTotalDisplayEl.textContent = 'Rp ' + grandTotal.toLocaleString('id-ID');
        } else {
            totalEl.value = '';
            if (roomSubtotalEl) roomSubtotalEl.textContent = 'Rp 0';
            if (discountAmountEl) discountAmountEl.textContent = 'Rp 0';
            if (extrabedDescEl) extrabedDescEl.textContent = '(0)';
            if (extrabedTotalEl) extrabedTotalEl.textContent = 'Rp 0';
            if (grandTotalDisplayEl) grandTotalDisplayEl.textContent = 'Rp 0';
        }
    }
    function updateWalkinOverrideDisplay() {
        const totalEl = document.getElementById('walkin_total_price');
        const roomSubtotalEl = document.getElementById('walkin_room_subtotal');
        const discountAmountEl = document.getElementById('walkin_discount_amount');
        const extrabedDescEl = document.getElementById('walkin_extrabed_desc');
        const extrabedTotalEl = document.getElementById('walkin_extrabed_total');
        const grandTotalDisplayEl = document.getElementById('walkin_grand_total_display');
        const overrideEl = document.getElementById('walkin_override_price');
        if (!overrideEl || !overrideEl.checked || overrideEl.disabled) return;
        const val = Math.max(0, parseFloat(totalEl?.value || '0') || 0);
        if (roomSubtotalEl) roomSubtotalEl.textContent = 'Rp ' + val.toLocaleString('id-ID');
        if (discountAmountEl) discountAmountEl.textContent = 'Rp 0';
        if (extrabedDescEl) extrabedDescEl.textContent = '(0)';
        if (extrabedTotalEl) extrabedTotalEl.textContent = 'Rp 0';
        if (grandTotalDisplayEl) grandTotalDisplayEl.textContent = 'Rp ' + val.toLocaleString('id-ID');
    }
    function loadWalkinRooms() {
        Promise.all(getWalkinAllRoomRows().map(function(row){
            return loadWalkinRoomsForElements(row.typeEl, row.roomEl);
        })).finally(function() {
            calculateWalkinTotalPrice();
        });
    }
    function addWalkinExtraRoomRow() {
        const container = document.getElementById('walkinExtraRoomsContainer');
        if (!container) return;
        const row = document.createElement('div');
        row.className = 'row g-2 align-items-end mb-2 walkin-extra-room-row';
        const guestOptions = ['1','2','3','4'].map(v => `<option value="${v}">${v} Orang</option>`).join('');
        const typeOptions = walkinRoomTypes.map(type => `<option value="${type.code}">${type.name}</option>`).join('');
        row.innerHTML = `
            <div class="col-md-4">
                <label class="form-label">Tipe Kamar Tambahan</label>
                <select class="form-control walkin-extra-room-type">
                    <option value="">Pilih Tipe</option>
                    ${typeOptions}
                </select>
            </div>
            <div class="col-md-5">
                <label class="form-label">Kamar Tambahan</label>
                <select class="form-control walkin-extra-room-id">
                    <option value="">Pilih tipe dan tanggal</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Jumlah Tamu</label>
                <select class="form-control walkin-extra-room-guests">${guestOptions}</select>
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-outline-danger w-100 walkin-remove-room-btn">&times;</button>
            </div>
        `;
        container.appendChild(row);
        const typeEl = row.querySelector('.walkin-extra-room-type');
        const roomEl = row.querySelector('.walkin-extra-room-id');
        const guestsEl = row.querySelector('.walkin-extra-room-guests');
        const removeBtn = row.querySelector('.walkin-remove-room-btn');
        if (typeEl) typeEl.addEventListener('change', function(){ loadWalkinRoomsForElements(typeEl, roomEl).finally(calculateWalkinTotalPrice); });
        if (roomEl) roomEl.addEventListener('change', calculateWalkinTotalPrice);
        if (guestsEl) guestsEl.addEventListener('change', calculateWalkinTotalPrice);
        if (removeBtn) removeBtn.addEventListener('click', function() { row.remove(); syncWalkinOverrideMode(); calculateWalkinTotalPrice(); });
        syncWalkinOverrideMode();
    }
    const tsel = document.getElementById('walkin_room_type');
    const ci = document.getElementById('walkin_check_in_date');
    const co = document.getElementById('walkin_check_out_date');
    if (tsel) tsel.addEventListener('change', function(){ loadWalkinRooms(); calculateWalkinTotalPrice(); });
    if (ci) ci.addEventListener('change', function(){ loadWalkinRooms(); calculateWalkinTotalPrice(); });
    if (co) co.addEventListener('change', function(){ loadWalkinRooms(); calculateWalkinTotalPrice(); });
    const rsel = document.getElementById('walkin_room_id');
    if (rsel) rsel.addEventListener('change', calculateWalkinTotalPrice);
    const walkinDiscountEl = document.getElementById('walkin_discount_percent');
    if (walkinDiscountEl) walkinDiscountEl.addEventListener('input', calculateWalkinTotalPrice);
    const walkinManualExtraEl = document.getElementById('walkin_manual_extra_bed_qty');
    if (walkinManualExtraEl) walkinManualExtraEl.addEventListener('input', calculateWalkinTotalPrice);
    const addRoomBtn = document.getElementById('walkinAddRoomBtn');
    if (addRoomBtn) addRoomBtn.addEventListener('click', addWalkinExtraRoomRow);
    const overrideEl = document.getElementById('walkin_override_price');
    if (overrideEl) {
        overrideEl.addEventListener('change', function() {
            const totalEl = document.getElementById('walkin_total_price');
            if (totalEl) totalEl.readOnly = !overrideEl.checked;
            if (!overrideEl.checked) {
                calculateWalkinTotalPrice();
            } else {
                updateWalkinOverrideDisplay();
            }
        });
    }
    const walkinTotalOverrideInput = document.getElementById('walkin_total_price');
    if (walkinTotalOverrideInput) walkinTotalOverrideInput.addEventListener('input', updateWalkinOverrideDisplay);
    const walkinForm = document.getElementById('walkinQuickForm');
    if (walkinForm) {
        walkinForm.addEventListener('submit', function(e){
            e.preventDefault();
            const fd = new FormData(walkinForm);
            const roomRows = getWalkinAllRoomRows().filter(function(row) {
                return row.roomEl && row.roomEl.value;
            });
            if (roomRows.length === 0) {
                showNotification('Pilih minimal satu kamar', 'danger');
                return;
            }
            const payload = {
                user_id: '{{ auth()->id() }}',
                room_id: fd.get('room_id'),
                check_in_date: fd.get('check_in_date'),
                check_out_date: fd.get('check_out_date'),
                guests: fd.get('guest_count'),
                guest_name: fd.get('guest_name'),
                guest_email: fd.get('guest_email'),
                guest_phone: fd.get('guest_phone'),
                total_price: fd.get('total_price'),
                override_total_price: !!fd.get('override_total_price'),
                discount_percent: fd.get('discount_percent'),
                tp_channel: 'Walkin',
                status: 'pending'
            };
            const manualExtraBedQty = Math.max(0, parseInt(fd.get('manual_extra_bed_qty') || '0', 10) || 0);
            if (manualExtraBedQty > 0) {
                payload.special_requests = `Extra Bed Manual: ${manualExtraBedQty}`;
            }
            const btn = walkinForm.querySelector('button[type="submit"]');
            const original = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Memproses';
            const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const request = roomRows.length === 1
                ? fetch('{{ url('/api/bookings') }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
                    body: JSON.stringify(payload)
                }).then(r => r.json()).then(data => {
                    if (!(data && data.success && data.data && data.data.id)) throw new Error('create_failed');
                    const id = data.data.id;
                    return fetch('{{ url('/api/bookings') }}/' + id + '/checkin', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf }
                    }).then(r => r.json());
                })
                : fetch(`${window.APP_BASE_URL}/api/bookings/bulk`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
                    body: JSON.stringify({
                        user_id: '{{ auth()->id() }}',
                        guest_name: fd.get('guest_name'),
                        guest_email: fd.get('guest_email'),
                        guest_phone: fd.get('guest_phone'),
                        check_in_date: fd.get('check_in_date'),
                        check_out_date: fd.get('check_out_date'),
                        discount_percent: fd.get('discount_percent'),
                        bookings: roomRows.map(row => ({
                            room_id: Number(row.roomEl.value),
                            guests: Number(row.guestsEl?.value || 1),
                            special_requests: manualExtraBedQty > 0 ? `Extra Bed Manual: ${manualExtraBedQty}` : '',
                            tp_channel: 'Walkin'
                        }))
                    })
                }).then(r => r.json()).then(async data => {
                    const created = data?.data?.created || [];
                    if (!(data && data.success && created.length > 0)) throw new Error('bulk_create_failed');
                    await Promise.all(created.map(item => fetch(`${window.APP_BASE_URL}/api/bookings/${item.id}/confirm`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf }
                    })));
                    return fetch(`${window.APP_BASE_URL}/api/bookings/bulk-checkin`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
                        body: JSON.stringify({ booking_ids: created.map(item => item.id), single_invoice: true })
                    }).then(r => r.json());
                });
            request
            .then(resp => {
                btn.disabled = false;
                btn.innerHTML = original;
                const m = bootstrap.Modal.getInstance(document.getElementById('walkinQuickModal'));
                if (m) m.hide();
                if (resp && resp.success && resp.data && resp.data.invoice && resp.data.invoice.id) {
                    window.location.href = '{{ url('/admin/invoices') }}/' + resp.data.invoice.id;
                } else if (resp && resp.success && resp.data && Array.isArray(resp.data.invoices) && resp.data.invoices[0] && resp.data.invoices[0].id) {
                    window.location.href = '{{ url('/admin/invoices') }}/' + resp.data.invoices[0].id;
                } else {
                    location.reload();
                }
            })
            .catch(() => {
                btn.disabled = false;
                btn.innerHTML = original;
                showNotification('Gagal memproses check-in', 'danger');
            });
        });
    }
    const invoiceModal = document.getElementById('invoiceQuickModal');
    if (invoiceModal) {
        const discountEl = document.getElementById('discount_percent');
        const roomSelect = document.getElementById('room_id');
        const checkInEl = document.getElementById('check_in_date');
        const checkOutEl = document.getElementById('check_out_date');
        const dueDateEl = document.getElementById('due_date');
        const nightsEl = document.getElementById('nights');
        const roomRateEl = document.getElementById('room_rate');
        const roomSumNumEl = document.getElementById('room-summary-number');
        const roomSumTypeEl = document.getElementById('room-summary-type');
        const roomSumHotelEl = document.getElementById('room-summary-hotel');
        const statusEl = document.getElementById('status');
        const channelEl = document.getElementById('payment_channel_id');
        const paidAtEl = document.getElementById('paid_at');
        const TAX_RATE = {{ (int)($settings['tax_rate'] ?? 0) }};
        function computeTotals() {
            const nights = parseInt(nightsEl.value || '0') || 0;
            const rate = parseFloat(roomRateEl.value || '0') || 0;
            const roomSubtotal = Math.max(0, nights * rate);
            document.getElementById('ns-baseline-nights').textContent = nights;
            document.getElementById('ns-room-rate').textContent = rate.toLocaleString('id-ID');
            document.getElementById('ns-baseline-subtotal').textContent = roomSubtotal.toLocaleString('id-ID');
            const pct = Math.min(100, Math.max(0, parseFloat(discountEl.value || '0') || 0));
            const discountAmount = Math.floor((roomSubtotal * pct) / 100);
            const includeTotal = Math.max(0, roomSubtotal - discountAmount);
            const grandTotal = includeTotal;
            const rawDPP = grandTotal / (1 + (TAX_RATE / 100));
            const baseDPP = Math.floor(rawDPP);
            const dpp = ((rawDPP - baseDPP) < 0.5) ? baseDPP : (baseDPP + 1);
            const taxIncluded = Math.max(0, grandTotal - dpp);
            document.getElementById('ns-discount-total').textContent = 'Rp ' + discountAmount.toLocaleString('id-ID');
            document.getElementById('ns-total-include').textContent = 'Rp ' + includeTotal.toLocaleString('id-ID');
            document.getElementById('ns-dpp').textContent = 'Rp ' + dpp.toLocaleString('id-ID');
            document.getElementById('ns-tax').textContent = 'Rp ' + taxIncluded.toLocaleString('id-ID');
            document.getElementById('ns-grand-total').textContent = 'Rp ' + grandTotal.toLocaleString('id-ID');
        }
        function computeNights() {
            const ci = checkInEl.value ? new Date(checkInEl.value) : null;
            const co = checkOutEl.value ? new Date(checkOutEl.value) : null;
            if (ci && co && co >= ci) {
                const diff = Math.ceil((co - ci) / (1000*60*60*24));
                nightsEl.value = Math.max(0, diff);
            } else {
                nightsEl.value = 0;
            }
            computeTotals();
            if (dueDateEl) {
                dueDateEl.value = checkInEl.value || '';
            }
        }
        function updateRoomSummary() {
            const opt = roomSelect.options[roomSelect.selectedIndex];
            if (!opt || !opt.value) {
                roomSumNumEl.textContent = '-';
                roomSumTypeEl.textContent = '-';
                roomRateEl.value = '0';
                computeTotals();
                return;
            }
            roomSumNumEl.textContent = opt.getAttribute('data-number') || '-';
            roomSumTypeEl.textContent = opt.getAttribute('data-type') || '-';
            roomSumHotelEl.textContent = opt.getAttribute('data-hotel') || '';
            const rate = parseInt(opt.getAttribute('data-rate') || '0') || 0;
            if (!roomRateEl.value || parseInt(roomRateEl.value) === 0) {
                roomRateEl.value = rate;
            }
            computeTotals();
        }
        function ensurePaidFields() {
            const group = document.getElementById('paid_at_group');
            if (group) {
                group.style.display = 'none';
            }
            paidAtEl.value = '';
            paidAtEl.disabled = true;
            channelEl.required = (statusEl.value === 'paid');
        }
        discountEl.addEventListener('input', computeTotals);
        roomSelect.addEventListener('change', updateRoomSummary);
        checkInEl.addEventListener('change', computeNights);
        checkOutEl.addEventListener('change', computeNights);
        roomRateEl.addEventListener('input', computeTotals);
        statusEl.addEventListener('change', ensurePaidFields);
        invoiceModal.addEventListener('show.bs.modal', function() {
            const issuedAt = document.getElementById('issued_at');
            if (issuedAt) {
                const now = new Date();
                const pad = n => n.toString().padStart(2,'0');
                const ymd = now.getFullYear() + '-' + pad(now.getMonth()+1) + '-' + pad(now.getDate());
                issuedAt.value = ymd;
            }
            ensurePaidFields();
            updateRoomSummary();
            computeNights();
        });
        ensurePaidFields();
        computeTotals();
    }
    const invoiceCreateModal = document.getElementById('invoiceCreateModal');
    if (invoiceCreateModal) {
        const bookingSelect = document.getElementById('invoice_booking_id');
        const statusSelect = document.getElementById('invoice_status');
        const paidWrap = document.getElementById('invoice-paid-wrap');
        const thirdPartyToggle = document.getElementById('bill_to_third_party');
        const thirdPartyWrap = document.getElementById('third-party-wrap');
        const invDate = document.getElementById('invoice_date');
        const dueDate = document.getElementById('invoice_due_date');
        function setTodayDate(input) {
            const now = new Date();
            const pad = n => n.toString().padStart(2,'0');
            const ymd = now.getFullYear() + '-' + pad(now.getMonth()+1) + '-' + pad(now.getDate());
            input.value = ymd;
        }
        function togglePaidWrap() {
            paidWrap.style.display = (statusSelect && statusSelect.value === 'paid') ? 'block' : 'none';
        }
        function toggleThirdParty() {
            thirdPartyWrap.style.display = thirdPartyToggle && thirdPartyToggle.checked ? 'block' : 'none';
        }
        invoiceCreateModal.addEventListener('show.bs.modal', function() {
            if (invDate) setTodayDate(invDate);
            if (dueDate) dueDate.value = '';
            if (statusSelect) { statusSelect.value = 'draft'; togglePaidWrap(); }
            if (thirdPartyToggle) { thirdPartyToggle.checked = false; toggleThirdParty(); }
            if (bookingSelect) {
                bookingSelect.innerHTML = '<option value="">Memuat daftar booking...</option>';
                fetch('{{ url('/api/bookings') }}', { headers: { 'Accept': 'application/json' } })
                    .then(r => r.json())
                    .then(data => {
                        const list = Array.isArray(data.data) ? data.data : [];
                        const filtered = list.filter(function(b){
                            const st = String(b.status || '');
                            if (!['checked_in','confirmed','pending'].includes(st)) return false;
                            try {
                                const hasInvoice = !!b.invoice;
                                if (hasInvoice) return false;
                            } catch(_) {}
                            return true;
                        });
                        bookingSelect.innerHTML = '<option value="">Pilih Booking</option>';
                        filtered.forEach(function(b){
                            const txt = (b.booking_code || 'BK-' + b.id) + ' • ' + (b.guest_name || '-') + (b.room && b.room.room_number ? (' • Kamar ' + b.room.room_number) : '');
                            const opt = document.createElement('option');
                            opt.value = String(b.id);
                            opt.textContent = txt;
                            bookingSelect.appendChild(opt);
                        });
                        if (filtered.length === 0) {
                            const opt = document.createElement('option');
                            opt.value = '';
                            opt.textContent = 'Tidak ada booking tersedia';
                            bookingSelect.appendChild(opt);
                        }
                    })
                    .catch(() => {
                        bookingSelect.innerHTML = '<option value="">Gagal memuat booking</option>';
                    });
            }
        });
        if (statusSelect) statusSelect.addEventListener('change', togglePaidWrap);
        if (thirdPartyToggle) thirdPartyToggle.addEventListener('change', toggleThirdParty);
    }
    const extendModal = document.getElementById('extendBookingModal');
    if (extendModal) {
        const bookingSelect = document.getElementById('extend_booking_id');
        const newCheckoutEl = document.getElementById('extend_new_checkout');
        const currentCheckoutEl = document.getElementById('extend_current_checkout');
        const roomRateEl = document.getElementById('extend_room_rate');
        const extraNightsEl = document.getElementById('extend_extra_nights');
        const estCostEl = document.getElementById('extend_estimated_cost');
        const submitBtn = document.getElementById('extendSubmitBtn');
        let extendData = [];
        function toDate(value) {
            const d = new Date(value);
            d.setHours(0, 0, 0, 0);
            return d;
        }
        function dateToYmd(d) {
            const pad = n => n.toString().padStart(2, '0');
            return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());
        }
        function renderExtendSummary() {
            const selected = extendData.find(x => String(x.id) === String(bookingSelect.value));
            if (!selected) {
                currentCheckoutEl.textContent = '-';
                roomRateEl.textContent = 'Rp 0';
                extraNightsEl.textContent = '0';
                estCostEl.textContent = 'Rp 0';
                return;
            }
            currentCheckoutEl.textContent = selected.check_out_date || '-';
            const rate = parseInt(selected.base_price || (selected.room && selected.room.price_per_night) || 0) || 0;
            roomRateEl.textContent = 'Rp ' + rate.toLocaleString('id-ID');
            let extraNights = 0;
            if (newCheckoutEl.value) {
                const current = toDate(selected.check_out_date);
                const next = toDate(newCheckoutEl.value);
                extraNights = Math.max(0, Math.ceil((next - current) / (1000 * 60 * 60 * 24)));
            }
            const extendCost = Math.max(0, extraNights * rate);
            extraNightsEl.textContent = String(extraNights);
            estCostEl.textContent = 'Rp ' + extendCost.toLocaleString('id-ID');
        }
        function setDefaultNewCheckout() {
            const selected = extendData.find(x => String(x.id) === String(bookingSelect.value));
            if (!selected) return;
            const current = toDate(selected.check_out_date);
            const minDate = new Date(current.getTime() + 24 * 60 * 60 * 1000);
            const ymd = dateToYmd(minDate);
            newCheckoutEl.min = ymd;
            if (!newCheckoutEl.value || toDate(newCheckoutEl.value) < minDate) {
                newCheckoutEl.value = ymd;
            }
            renderExtendSummary();
        }
        extendModal.addEventListener('show.bs.modal', function() {
            bookingSelect.innerHTML = '<option value="">Memuat daftar booking...</option>';
            extendData = [];
            fetch('{{ url('/api/bookings') }}', { headers: { 'Accept': 'application/json' } })
                .then(r => r.json())
                .then(data => {
                    const all = Array.isArray(data.data) ? data.data : [];
                    extendData = all.filter(b => String(b.status || '') === 'checked_in');
                    bookingSelect.innerHTML = '<option value="">Pilih Booking</option>';
                    extendData.forEach(function(b) {
                        const opt = document.createElement('option');
                        opt.value = String(b.id);
                        opt.textContent = (b.booking_code || ('BK-' + b.id)) + ' • ' + (b.guest_name || '-') + ' • CO ' + (b.check_out_date || '-');
                        bookingSelect.appendChild(opt);
                    });
                    if (extendData.length === 0) {
                        const opt = document.createElement('option');
                        opt.value = '';
                        opt.textContent = 'Tidak ada booking check-in untuk di-extend';
                        bookingSelect.appendChild(opt);
                    }
                    bookingSelect.value = extendData.length > 0 ? String(extendData[0].id) : '';
                    setDefaultNewCheckout();
                })
                .catch(() => {
                    bookingSelect.innerHTML = '<option value="">Gagal memuat booking</option>';
                    renderExtendSummary();
                });
        });
        bookingSelect.addEventListener('change', setDefaultNewCheckout);
        newCheckoutEl.addEventListener('change', renderExtendSummary);
        submitBtn.addEventListener('click', function() {
            const id = bookingSelect.value;
            const newCheckout = newCheckoutEl.value;
            if (!id) { showNotification('Pilih booking terlebih dahulu', 'warning'); return; }
            if (!newCheckout) { showNotification('Pilih tanggal check-out baru', 'warning'); return; }
            submitBtn.disabled = true;
            const original = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Menyimpan';
            fetch('{{ url('/api/bookings') }}/' + id, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ check_out_date: newCheckout })
            })
            .then(r => r.json())
            .then(resp => {
                submitBtn.disabled = false;
                submitBtn.innerHTML = original;
                if (resp && resp.success) {
                    const m = bootstrap.Modal.getInstance(extendModal);
                    if (m) m.hide();
                    showNotification('Extend booking berhasil disimpan', 'success');
                    if (resp.meta && resp.meta.extension_invoice && resp.meta.extension_invoice.id) {
                        setTimeout(() => {
                            window.location.href = '{{ url('/admin/invoices') }}/' + resp.meta.extension_invoice.id;
                        }, 500);
                    } else {
                        setTimeout(() => location.reload(), 700);
                    }
                } else {
                    const msg = (resp && resp.message) ? resp.message : 'Gagal extend booking';
                    showNotification(msg, 'danger');
                }
            })
            .catch(() => {
                submitBtn.disabled = false;
                submitBtn.innerHTML = original;
                showNotification('Gagal extend booking', 'danger');
            });
        });
    }
    const billChargeModal = document.getElementById('billChargeModal');
    if (billChargeModal) {
        const bookingEl = document.getElementById('bill_booking_id');
        const typeEl = document.getElementById('bill_item_type');
        const catalogEl = document.getElementById('bill_catalog');
        const nameEl = document.getElementById('bill_name');
        const qtyEl = document.getElementById('bill_qty');
        const priceEl = document.getElementById('bill_price');
        const notesEl = document.getElementById('bill_notes');
        const addBtn = document.getElementById('bill_add_btn');
        const createBtn = document.getElementById('bill_create_btn');
        const listEl = document.getElementById('bill_items_list');
        const totalEl = document.getElementById('bill_total');
        let billBookings = [];
        let billCatalog = [];
        function isChargeName(name) {
            const n = String(name || '').toLowerCase();
            return n.includes('charge') || n.includes('kerusakan') || n.includes('kehilangan') || n.includes('denda');
        }
        function formatRp(value) {
            return 'Rp ' + (parseInt(value || 0) || 0).toLocaleString('id-ID');
        }
        function renderCatalog() {
            const type = typeEl.value;
            const options = ['<option value="">Pilih item...</option>'];
            if (type === 'charge') options.push('<option value="custom">Item Kustom...</option>');
            billCatalog.forEach(item => {
                const name = item.name || '';
                const match = type === 'charge' ? isChargeName(name) : !isChargeName(name);
                if (!match) return;
                const price = parseFloat(item.price || 0) || 0;
                options.push(`<option value="${encodeURIComponent(name)}" data-price="${price}">${name} - Rp ${price.toLocaleString('id-ID')}</option>`);
            });
            catalogEl.innerHTML = options.join('');
        }
        function renderBillItems(items) {
            if (!Array.isArray(items) || items.length === 0) {
                listEl.innerHTML = '<div class="text-muted">Belum ada item bill untuk booking ini.</div>';
                totalEl.textContent = 'Rp 0';
                return;
            }
            let total = 0;
            listEl.innerHTML = '';
            items.forEach(s => {
                const qty = parseInt(s.quantity || 0) || 0;
                const price = parseInt(s.unit_price || 0) || 0;
                const subtotal = qty * price;
                total += subtotal;
                const row = document.createElement('div');
                row.className = 'list-group-item';
                row.innerHTML = `<div class="d-flex justify-content-between"><div><strong>${s.service_name || '-'}</strong><div class="small text-muted">Qty ${qty} x ${formatRp(price)}</div></div><div class="text-end"><strong>${formatRp(subtotal)}</strong></div></div>`;
                listEl.appendChild(row);
            });
            totalEl.textContent = formatRp(total);
        }
        function loadBillItems() {
            const bookingId = bookingEl.value;
            if (!bookingId) { renderBillItems([]); return; }
            fetch('{{ url('/api/room-services') }}/' + bookingId, { headers: { 'Accept': 'application/json' } })
                .then(r => r.json())
                .then(data => renderBillItems(data && data.success ? (data.data || []) : []))
                .catch(() => renderBillItems([]));
        }
        billChargeModal.addEventListener('show.bs.modal', function() {
            bookingEl.innerHTML = '<option value="">Memuat booking check-in...</option>';
            listEl.innerHTML = '';
            totalEl.textContent = 'Rp 0';
            qtyEl.value = '1';
            priceEl.value = '';
            nameEl.value = '';
            notesEl.value = '';
            fetch('{{ url('/api/bookings') }}', { headers: { 'Accept': 'application/json' } })
                .then(r => r.json())
                .then(data => {
                    const all = Array.isArray(data.data) ? data.data : [];
                    billBookings = all.filter(b => String(b.status || '') === 'checked_in');
                    bookingEl.innerHTML = '<option value="">Pilih Booking Check-in</option>';
                    billBookings.forEach(b => {
                        const opt = document.createElement('option');
                        opt.value = String(b.id);
                        opt.textContent = (b.booking_code || ('BK-' + b.id)) + ' • ' + (b.guest_name || '-') + (b.room && b.room.room_number ? (' • Kamar ' + b.room.room_number) : '');
                        bookingEl.appendChild(opt);
                    });
                })
                .catch(() => {
                    bookingEl.innerHTML = '<option value="">Gagal memuat booking</option>';
                });
            fetch('{{ url('/api/room-service-catalog') }}', { headers: { 'Accept': 'application/json' } })
                .then(r => r.json())
                .then(result => {
                    billCatalog = Array.isArray(result.data) ? result.data : [];
                    renderCatalog();
                })
                .catch(() => {
                    billCatalog = [];
                    renderCatalog();
                });
        });
        typeEl.addEventListener('change', function() {
            renderCatalog();
            nameEl.value = '';
            priceEl.value = '';
        });
        bookingEl.addEventListener('change', loadBillItems);
        catalogEl.addEventListener('change', function() {
            const val = this.value;
            if (!val) {
                nameEl.value = '';
                priceEl.value = '';
                return;
            }
            if (val === 'custom') {
                nameEl.value = '';
                return;
            }
            const name = decodeURIComponent(val);
            const price = parseFloat(this.options[this.selectedIndex].getAttribute('data-price') || '0') || 0;
            nameEl.value = name;
            priceEl.value = String(price);
        });
        addBtn.addEventListener('click', function() {
            const bookingId = bookingEl.value;
            const serviceName = (nameEl.value || '').trim();
            const quantity = Math.max(1, parseInt(qtyEl.value || '1') || 1);
            const price = parseFloat(priceEl.value || '0') || 0;
            const notes = (notesEl.value || '').trim();
            if (!bookingId) { showNotification('Pilih booking check-in terlebih dahulu', 'warning'); return; }
            if (!serviceName) { showNotification('Nama item wajib diisi', 'warning'); return; }
            if (price <= 0) { showNotification('Harga item harus lebih dari 0', 'warning'); return; }
            addBtn.disabled = true;
            const original = addBtn.innerHTML;
            addBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Menyimpan';
            fetch('{{ url('/api/room-services') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    booking_id: bookingId,
                    service_name: serviceName,
                    quantity: quantity,
                    price: price,
                    notes: notes
                })
            })
            .then(r => r.json())
            .then(resp => {
                addBtn.disabled = false;
                addBtn.innerHTML = original;
                if (resp && resp.success) {
                    showNotification('Item bill berhasil ditambahkan', 'success');
                    catalogEl.value = '';
                    nameEl.value = '';
                    qtyEl.value = '1';
                    priceEl.value = '';
                    notesEl.value = '';
                    loadBillItems();
                } else {
                    showNotification((resp && resp.message) ? resp.message : 'Gagal menambah item bill', 'danger');
                }
            })
            .catch(() => {
                addBtn.disabled = false;
                addBtn.innerHTML = original;
                showNotification('Terjadi kesalahan saat menambah item bill', 'danger');
            });
        });
        createBtn.addEventListener('click', function() {
            const bookingId = bookingEl.value;
            if (!bookingId) { showNotification('Pilih booking check-in terlebih dahulu', 'warning'); return; }
            createBtn.disabled = true;
            const original = createBtn.innerHTML;
            createBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Membuat';
            fetch('{{ url('/api/bookings') }}/' + bookingId + '/services-invoice', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({})
            })
            .then(r => r.json())
            .then(resp => {
                createBtn.disabled = false;
                createBtn.innerHTML = original;
                if (resp && resp.success && resp.data && resp.data.id) {
                    const m = bootstrap.Modal.getInstance(billChargeModal);
                    if (m) m.hide();
                    window.location.href = '{{ url('/admin/invoices') }}/' + resp.data.id;
                } else {
                    showNotification((resp && resp.message) ? resp.message : 'Gagal membuat bill', 'danger');
                }
            })
            .catch(() => {
                createBtn.disabled = false;
                createBtn.innerHTML = original;
                showNotification('Terjadi kesalahan saat membuat bill', 'danger');
            });
        });
    }
    const bookingListModal = document.getElementById('bookingListModal');
    const bookingListEl = document.getElementById('bookingList');
    const bookingListEmpty = document.getElementById('bookingListEmpty');
    const bookingListLoading = document.getElementById('bookingListLoading');
    const bookingListSearch = document.getElementById('bookingListSearch');
    const bookingListCount = document.getElementById('bookingListCount');
    let bookingListData = [];
    function showBookingLoading() {
        bookingListLoading.innerHTML = '';
        for (let i = 0; i < 6; i++) {
            const sk = document.createElement('div');
            sk.className = 'skeleton-item';
            bookingListLoading.appendChild(sk);
        }
        bookingListLoading.style.display = '';
    }
    function hideBookingLoading() {
        bookingListLoading.innerHTML = '';
        bookingListLoading.style.display = 'none';
    }
    function renderBookings(filter) {
        bookingListEl.innerHTML = '';
        const term = (filter || '').toLowerCase();
        let count = 0;
        bookingListData.forEach(function(b){
            const name = String(b.guest_name || '').toLowerCase();
            const code = String(b.booking_code || '').toLowerCase();
            if (term && !(name.includes(term) || code.includes(term))) return;
            const allowed = ['pending','confirmed'];
            if (!allowed.includes(String(b.status || ''))) return;
            try {
                const ci = parseDateLocal(b.check_in_date);
                const today = new Date(); today.setHours(0,0,0,0);
                if (ci > today) return;
            } catch(_) {}
            const item = document.createElement('div');
            item.className = 'list-group-item d-flex align-items-center justify-content-between';
            const left = document.createElement('div');
            const right = document.createElement('div');
            right.className = 'd-flex align-items-center gap-2';
            const title = document.createElement('div');
            const sub = document.createElement('div');
            title.className = 'fw-semibold';
            title.textContent = (b.guest_name || '-') + ' • ' + (b.booking_code || '');
            sub.className = 'small text-muted';
            sub.textContent = 'CI ' + (b.check_in_date || '-') + ' • CO ' + (b.check_out_date || '-') + ' • ' + (b.status || '');
            left.appendChild(title);
            left.appendChild(sub);
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'btn btn-sm btn-success';
            btn.textContent = 'Check-in';
            btn.addEventListener('click', function(){
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Memproses';
                fetch('{{ url('/api/bookings') }}/' + b.id + '/checkin', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(r => r.json())
                .then(resp => {
                    const m = bootstrap.Modal.getInstance(bookingListModal);
                    if (m) m.hide();
                    if (resp && resp.success && resp.data && resp.data.invoice && resp.data.invoice.id) {
                        window.location.href = '{{ url('/admin/invoices') }}/' + resp.data.invoice.id;
                    } else {
                        location.reload();
                    }
                })
                .catch(() => {
                    btn.disabled = false;
                    btn.textContent = 'Check-in';
                    showNotification('Gagal memproses check-in', 'danger');
                });
            });
            right.appendChild(btn);
            item.appendChild(left);
            item.appendChild(right);
            bookingListEl.appendChild(item);
            count++;
        });
        bookingListCount.textContent = count > 0 ? (String(count) + ' booking') : '';
        bookingListEmpty.style.display = count === 0 ? '' : 'none';
    }
    if (bookingListSearch) bookingListSearch.addEventListener('input', function(){ renderBookings(this.value); });
    if (bookingListModal) {
        bookingListModal.addEventListener('show.bs.modal', function(){
            bookingListData = [];
            bookingListEl.innerHTML = '';
            bookingListEmpty.style.display = 'none';
            showBookingLoading();
            fetch('{{ url('/api/bookings') }}', { headers: { 'Accept': 'application/json' } })
                .then(r => r.json())
                .then(data => {
                    hideBookingLoading();
                    bookingListData = Array.isArray(data.data) ? data.data : [];
                    renderBookings(bookingListSearch ? bookingListSearch.value : '');
                })
                .catch(() => {
                    hideBookingLoading();
                    bookingListEmpty.style.display = '';
                });
        });
    }
});
</script>
@endsection