@extends('admin.layout')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-walking me-2"></i>Check-in Walk-in</h5>
                    <div class="d-flex align-items-center gap-2">
                        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#walkinCheckinModal">
                            <i class="fas fa-walking me-1"></i>Walk-in Check-in
                        </button>
                        <a href="{{ route('admin.bookings') }}" class="btn btn-light btn-sm"><i class="fas fa-list me-1"></i>Lihat Booking</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="mb-0">Sedang Check-in</h6>
                        <div class="d-flex align-items-center gap-2">
                            <button class="btn btn-danger btn-sm" id="walkinCheckoutDueBtn">
                                <i class="fas fa-calendar-check me-1"></i>Check-out Jatuh Tempo
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" id="refreshWalkinListBtn">
                                <i class="fas fa-sync-alt me-1"></i>Refresh
                            </button>
                        </div>
                    </div>
                    <div id="walkinCheckinList">
                        <div class="text-muted">Memuat data...</div>
                    </div>
                    <hr class="my-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="mb-0">Riwayat Checked-out</h6>
                        <div class="d-flex align-items-center gap-2">
                            <input type="date" class="form-control form-control-sm" id="walkin_history_from" style="max-width:160px">
                            <input type="date" class="form-control form-control-sm" id="walkin_history_to" style="max-width:160px">
                            <select class="form-select form-select-sm" id="walkin_history_per_page" style="max-width:100px">
                                <option value="10" selected>10 / hlm</option>
                                <option value="25">25 / hlm</option>
                                <option value="50">50 / hlm</option>
                            </select>
                            <button class="btn btn-outline-secondary btn-sm" id="refreshWalkinHistoryBtn">
                                <i class="fas fa-sync-alt me-1"></i>Refresh Riwayat
                            </button>
                        </div>
                    </div>
                    <div class="mb-2">
                        <span class="badge bg-secondary me-2"><i class="fas fa-door-closed me-1"></i>Checked-out</span>
                    </div>
                    <div id="walkinHistoryCheckedOut">
                        <div class="text-muted">Memuat riwayat...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="cameraCaptureModalWalkin" 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="cameraVideoWalkin" autoplay playsinline style="width:100%; height:100%; object-fit:cover;"></video>
                            <canvas id="cameraCanvasWalkin" 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="cameraCaptureBtnWalkin"><i class="fas fa-camera me-1"></i>Ambil</button>
                            <button type="button" class="btn btn-warning" id="cameraRetakeBtnWalkin" style="display:none;"><i class="fas fa-redo me-1"></i>Ulangi</button>
                            <button type="button" class="btn btn-success" id="cameraUseBtnWalkin" style="display:none;"><i class="fas fa-check me-1"></i>Gunakan Foto</button>
                        </div>
                        <div class="mt-3 small text-muted">Pastikan KTP terlihat jelas dan tidak blur.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

<script>
let cameraStreamWalkin = null;
let cameraTargetInputIdWalkin = null;
let cameraBlobWalkin = null;

document.addEventListener('show.bs.modal', function(e) {
    const openCount = document.querySelectorAll('.modal.show').length;
    const z = 1050 + (openCount * 10);
    try { e.target.style.setProperty('z-index', String(z), 'important'); } catch(_) { e.target.style.zIndex = String(z); }
    setTimeout(function() {
        document.querySelectorAll('.modal-backdrop').forEach(function(bd) {
            try { bd.style.setProperty('z-index', String(z - 1), 'important'); } catch(_) { bd.style.zIndex = String(z - 1); }
        });
    }, 0);
});

function openWalkinKtpCamera(targetInputId) {
    cameraTargetInputIdWalkin = targetInputId;
    const modalEl = document.getElementById('cameraCaptureModalWalkin');
    const videoEl = document.getElementById('cameraVideoWalkin');
    const canvasEl = document.getElementById('cameraCanvasWalkin');
    const captureBtn = document.getElementById('cameraCaptureBtnWalkin');
    const retakeBtn = document.getElementById('cameraRetakeBtnWalkin');
    const useBtn = document.getElementById('cameraUseBtnWalkin');

    canvasEl.style.display = 'none';
    videoEl.style.display = 'block';
    retakeBtn.style.display = 'none';
    useBtn.style.display = 'none';
    cameraBlobWalkin = null;

    const bsModal = new bootstrap.Modal(modalEl);
    try { document.body.appendChild(modalEl); } catch(e) {}
    bsModal.show();
    try { modalEl.style.setProperty('z-index', '2050', 'important'); } catch(_) { modalEl.style.zIndex = '2050'; }
    const others = Array.from(document.querySelectorAll('.modal.show')).filter(m => m !== modalEl);
    others.forEach(function(m){ m.classList.add('pe-none'); m.setAttribute('aria-hidden','true'); });
    const backs = document.querySelectorAll('.modal-backdrop');
    if (backs.length > 0) {
        const last = backs[backs.length - 1];
        try { last.style.setProperty('z-index', '2045', 'important'); } catch(_) { last.style.zIndex = '2045'; }
        last.classList.add('camera-backdrop');
    }

    if (!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) {
        if (typeof Swal !== 'undefined' && Swal && typeof Swal.fire === 'function') {
            Swal.fire({ icon: 'error', title: 'Kamera Tidak Tersedia', text: 'Perangkat tidak mendukung kamera atau akses ditolak.', timer: 2000, showConfirmButton: false });
        } else {
            alert('Perangkat tidak mendukung kamera atau akses ditolak.');
        }
        return;
    }
    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
    .then(stream => {
        cameraStreamWalkin = stream;
        videoEl.srcObject = stream;
        videoEl.play();
    })
    .catch(() => {
        if (typeof Swal !== 'undefined' && Swal && typeof Swal.fire === 'function') {
            Swal.fire({ icon: 'error', title: 'Gagal Membuka Kamera', text: 'Tidak bisa membuka kamera. Periksa izin browser.', timer: 2000, showConfirmButton: false });
        } else {
            alert('Tidak bisa membuka kamera. Periksa izin browser.');
        }
    });

    captureBtn.onclick = function() {
        const w = videoEl.videoWidth || 1280;
        const h = videoEl.videoHeight || 720;
        canvasEl.width = w;
        canvasEl.height = h;
        const ctx = canvasEl.getContext('2d');
        ctx.drawImage(videoEl, 0, 0, w, h);
        canvasEl.toBlob(function(blob) {
            cameraBlobWalkin = blob;
            canvasEl.style.display = 'block';
            videoEl.style.display = 'none';
            retakeBtn.style.display = 'block';
            useBtn.style.display = 'block';
        }, 'image/png', 0.95);
    };

    retakeBtn.onclick = function() {
        cameraBlobWalkin = null;
        canvasEl.style.display = 'none';
        videoEl.style.display = 'block';
        retakeBtn.style.display = 'none';
        useBtn.style.display = 'none';
    };

    useBtn.onclick = function() {
        if (!cameraBlobWalkin) return;
        const file = new File([cameraBlobWalkin], 'ktp_capture.png', { type: 'image/png' });
        const dt = new DataTransfer();
        dt.items.add(file);
        const input = document.getElementById(cameraTargetInputIdWalkin);
        if (input) {
            input.files = dt.files;
        }
        if (cameraStreamWalkin) {
            cameraStreamWalkin.getTracks().forEach(t => t.stop());
            cameraStreamWalkin = null;
        }
        bsModal.hide();
    };

    modalEl.addEventListener('hidden.bs.modal', function handler() {
        modalEl.removeEventListener('hidden.bs.modal', handler);
        try { modalEl.style.setProperty('z-index', '', 'important'); } catch(_) { modalEl.style.zIndex = ''; }
        document.querySelectorAll('.modal.show').forEach(function(m){ if(m !== modalEl){ m.classList.remove('pe-none'); m.removeAttribute('aria-hidden'); m.style.zIndex = ''; } });
        document.querySelectorAll('.modal-backdrop').forEach(function(bd){ bd.style.zIndex = ''; bd.classList.remove('camera-backdrop'); });
        if (cameraStreamWalkin) {
            cameraStreamWalkin.getTracks().forEach(t => t.stop());
            cameraStreamWalkin = null;
        }
        videoEl.srcObject = null;
        cameraTargetInputIdWalkin = null;
        cameraBlobWalkin = null;
        canvasEl.style.display = 'none';
        videoEl.style.display = 'block';
        retakeBtn.style.display = 'none';
        useBtn.style.display = 'none';
    });
}
window.openWalkinKtpCamera = openWalkinKtpCamera;
</script>

<div class="modal fade" id="walkinCheckinModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-primary 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>
            <div class="modal-body">
                <form id="walkinForm" class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Nama Tamu</label>
                        <div class="position-relative">
                            <input type="text" name="guest_name" id="walkin_guest_name" class="form-control" 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>
                        </div>
                        <button type="button" class="btn btn-outline-success btn-sm mt-2" id="walkinAddNewGuestBtn" style="display: none;">
                            <i class="fas fa-user-plus me-1"></i>Tambah Tamu Baru
                        </button>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Email</label>
                        <input type="email" name="guest_email" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Telepon</label>
                        <input type="text" name="guest_phone" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Perusahaan</label>
                        <input type="text" name="company" id="walkin_guest_company" class="form-control" placeholder="Nama perusahaan">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tanggal Check-in</label>
                        <input type="date" name="check_in_date" id="walkin_check_in_date" class="form-control" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tanggal Check-out</label>
                        <input type="date" name="check_out_date" id="walkin_check_out_date" class="form-control" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Jumlah Tamu</label>
                        <select name="guests" id="walkin_guest_count" class="form-select" required>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tipe Kamar</label>
                        <select id="walkin_room_type" class="form-select">
                            <option value="">Semua Tipe</option>
                            @foreach($roomTypes as $type)
                                <option value="{{ $type->code }}">{{ $type->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">Kamar</label>
                        <select name="room_id" id="walkin_room_id" class="form-select" required>
                            <option value="">Pilih tanggal terlebih dahulu</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center">
                            <label class="form-label mb-0">Kamar Tambahan</label>
                            <button type="button" class="btn btn-outline-primary btn-sm" id="walkinAddRoomRowBtn">
                                <i class="fas fa-plus me-1"></i>Tambah Kamar
                            </button>
                        </div>
                        <div id="walkinExtraRoomsContainer" class="mt-2"></div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Diskon Kamar Utama (%)</label>
                        <input type="number" name="discount_percent" id="walkin_discount_percent" class="form-control" min="0" max="100" step="0.01" value="0">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Extra Bed Manual</label>
                        <input type="number" name="manual_extra_bed_qty" id="walkin_manual_extra_bed_qty" class="form-control" 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 class="col-md-4">
                        <label class="form-label">Total Harga (Rp)</label>
                        <input type="number" name="total_price" id="walkin_total_price" class="form-control" min="0" readonly>
                        <small class="text-muted">Dihitung otomatis dari rate per malam × durasi</small>
                    </div>
                    @if(auth()->user() && auth()->user()->isAdmin())
                    <div class="col-md-4">
                        <label class="form-label">Override Rate Kamar Utama (Rp/malam)</label>
                        <input type="number" id="walkin_override_rate" class="form-control" min="0" step="1" placeholder="Kosongkan untuk rate standar">
                        <small class="text-muted">Jika diisi, diskon kamar utama tidak diterapkan</small>
                    </div>
                    @endif
                    <div class="col-12">
                        <div class="card border-0 bg-light">
                            <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"></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="col-md-4">
                        <label class="form-label">Channel Pembayaran</label>
                        <select id="walkin_payment_channel_id" name="payment_channel_id" class="form-select">
                            <option value="">Pilih Channel</option>
                            @isset($paymentChannels)
                                @foreach($paymentChannels as $channel)
                                    <option value="{{ $channel->id }}">{{ $channel->name }}</option>
                                @endforeach
                            @endisset
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Permintaan Khusus</label>
                        <textarea name="special_requests" class="form-control" rows="2"></textarea>
                    </div>
                    <div class="col-12 d-flex justify-content-end">
                        <button type="submit" class="btn btn-success"><i class="fas fa-sign-in-alt me-1"></i>Check-in Sekarang</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="walkinResultModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="fas fa-check-circle me-2"></i>Check-in Walk-in Berhasil</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-6">
                        <div class="mb-2" id="result-booking-code-row">
                            <strong>Kode Booking:</strong>
                            <span id="result-booking-code">-</span>
                        </div>
                        <div class="mb-2">
                            <strong>Nama Tamu:</strong>
                            <span id="result-guest-name">-</span>
                        </div>
                        <div class="mb-2">
                            <strong>Email:</strong>
                            <span id="result-guest-email">-</span>
                        </div>
                        <div class="mb-2">
                            <strong>Telepon:</strong>
                            <span id="result-guest-phone">-</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-2">
                            <strong>No. Kamar:</strong>
                            <span id="result-room-number">-</span>
                        </div>
                        <div class="mb-2">
                            <strong>Tipe Kamar:</strong>
                            <span id="result-room-type">-</span>
                        </div>
                        <div class="mb-2">
                            <strong>Check-in:</strong>
                            <span id="result-check-in">-</span>
                        </div>
                        <div class="mb-2">
                            <strong>Check-out:</strong>
                            <span id="result-check-out">-</span>
                        </div>
                        <div class="mb-2">
                            <strong>Status:</strong>
                            <span id="result-status" class="badge bg-primary">-</span>
                        </div>
                    </div>
                </div>
                <div class="border-top pt-3 mt-3 d-flex justify-content-between align-items-center">
                    <a href="{{ route('admin.bookings') }}" class="btn btn-outline-primary">
                        <i class="fas fa-list me-1"></i>Lihat Semua Booking
                    </a>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="walkinAddGuestModal" 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 me-1"></i>Tambah Tamu Baru</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="walkinAddGuestForm" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nama Lengkap *</label>
                        <input type="text" class="form-control" id="new_walkin_guest_name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" id="new_walkin_guest_email" name="email">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nomor Telepon</label>
                        <input type="text" class="form-control" id="new_walkin_guest_phone" name="phone">
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <label class="form-label mb-0">Nomor KTP *</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="new_walkin_guest_is_company" name="is_company" value="1">
                                <label class="form-check-label small" for="new_walkin_guest_is_company">Perusahaan (tanpa NIK)</label>
                            </div>
                        </div>
                        <input type="text" class="form-control" id="new_walkin_guest_id_number" name="id_number" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Upload KTP</label>
                        <input type="file" class="form-control" id="new_walkin_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="openWalkinKtpCameraBtn">
                                <i class="fas fa-camera me-1"></i>Ambil Foto KTP
                            </button>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tanggal Lahir</label>
                        <input type="date" class="form-control" id="new_walkin_guest_birth_date" name="birth_date">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Kewarganegaraan</label>
                        <select class="form-select" id="new_walkin_guest_nationality" name="nationality">
                            <option value="">Pilih</option>
                            <option value="WNI">WNI</option>
                            <option value="WNA">WNA</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Alamat</label>
                        <textarea class="form-control" id="new_walkin_guest_address" name="address" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Perusahaan</label>
                        <input type="text" class="form-control" id="new_walkin_guest_company" name="company" placeholder="Nama perusahaan (opsional)">
                    </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 me-1"></i>Simpan Tamu</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="walkinDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title"><i class="fas fa-info-circle me-2"></i>Detail Booking Walk-in</h5>
                <div class="d-flex gap-2 ms-auto me-3">
                    <button type="button" class="btn btn-outline-light btn-sm" id="walkinAdjustDatesBtn" onclick="openWalkinAdjustDatesModal()" style="display:none;">
                        <i class="fas fa-calendar-alt me-1"></i>Koreksi Tanggal
                    </button>
                    <button type="button" class="btn btn-outline-light btn-sm" id="walkinMoveRoomBtn" onclick="openWalkinMoveRoomModal()" style="display:none;">
                        <i class="fas fa-exchange-alt me-1"></i>Pindah Kamar
                    </button>
                </div>
                <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-6">
                        <div class="mb-2" id="detail-walkin-booking-code-row"><strong>Kode Booking:</strong> <span id="detail-walkin-booking-code">-</span></div>
                        <div class="mb-2"><strong>Nama Tamu:</strong> <span id="detail-walkin-guest-name">-</span></div>
                        <div class="mb-2"><strong>Email:</strong> <span id="detail-walkin-guest-email">-</span></div>
                        <div class="mb-2"><strong>Telepon:</strong> <span id="detail-walkin-guest-phone">-</span></div>
                        <div class="mb-2"><strong>KTP:</strong> <span id="detail-walkin-guest-ktp">-</span></div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-2"><strong>No. Kamar:</strong> <span id="detail-walkin-room-number">-</span></div>
                        <div class="mb-2"><strong>Tipe Kamar:</strong> <span id="detail-walkin-room-type">-</span></div>
                        <div class="mb-2"><strong>Check-in:</strong> <span id="detail-walkin-check-in">-</span></div>
                        <div class="mb-2"><strong>Check-out:</strong> <span id="detail-walkin-check-out">-</span></div>
                        <div class="mb-2"><strong>Status:</strong> <span id="detail-walkin-status" class="badge bg-secondary">-</span></div>
                    </div>
                </div>
                <div class="card border-0 bg-light mb-3" id="walkin-services-section" style="display:none;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="card-title text-info mb-0"><i class="fas fa-concierge-bell me-1"></i>Layanan Kamar</h6>
                            <button type="button" class="btn btn-sm btn-info" id="walkinJumpToDamageBtn"><i class="fas fa-plus me-1"></i>Tambah Charge</button>
                        </div>
                        <div class="row g-2 align-items-end mb-3" id="walkin-service-form">
                            <div class="col-md-4">
                                <label class="form-label">Nama Layanan</label>
                                <select class="form-select" id="walkin-service-catalog">
                                    <option value="">Pilih dari katalog...</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Jumlah</label>
                                <input type="number" class="form-control" id="walkin-service-quantity" min="1" value="1" placeholder="Jumlah">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Harga</label>
                                <input type="number" class="form-control" id="walkin-service-price" min="0" placeholder="Harga Satuan">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Catatan</label>
                                <textarea class="form-control" id="walkin-service-notes" rows="1" placeholder="Opsional"></textarea>
                            </div>
                            <div class="col-12 col-md-1 d-grid">
                                <button type="button" class="btn btn-info w-100" id="walkinAddServiceBtn" aria-label="Tambah"><i class="fas fa-plus"></i></button>
                            </div>
                        </div>
                        <div id="walkin-services-list"></div>
                        <div class="text-end mt-2"><strong>Total Layanan:</strong> <span id="walkin-services-total">Rp 0</span></div>
                    </div>
                </div>
                <div class="card border-0 bg-light mb-3" id="walkin-damage-section" style="display:none;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="card-title text-danger mb-0"><i class="fas fa-tools me-1"></i>Charge</h6>
                        </div>
                        <div class="row g-2 align-items-end mb-3" id="walkin-damage-form">
                            <div class="col-md-4">
                                <label class="form-label">Item Charge</label>
                                <select class="form-select mb-2" id="walkin-damage-catalog">
                                    <option value="">Pilih dari katalog...</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Jumlah</label>
                                <input type="number" class="form-control" id="walkin-damage-quantity" min="1" value="1" placeholder="Jumlah">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Harga</label>
                                <input type="number" class="form-control" id="walkin-damage-price" min="0" placeholder="Harga Satuan">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Deskripsi</label>
                                <input type="text" class="form-control" id="walkin-damage-notes" placeholder="Contoh: Kerusakan TV, Kehilangan kunci">
                            </div>
                            <div class="col-12 col-md-1 d-grid">
                                <button type="button" class="btn btn-danger w-100" id="walkinAddDamageBtn" aria-label="Tambah"><i class="fas fa-plus"></i></button>
                            </div>
                        </div>
                        <div id="walkin-damage-list"></div>
                        <div class="text-end mt-2"><strong>Total Kerusakan:</strong> <span id="walkin-damage-total">Rp 0</span></div>
                    </div>
                </div>
                <div class="card border-0 bg-light mb-3" id="walkin-extrabed-section" style="display:none;">
                    <div class="card-body">
                        <h6 class="card-title text-success mb-2"><i class="fas fa-bed me-1"></i>Extra Bed</h6>
                        <div class="row g-2 align-items-end mb-2" id="walkin-extrabed-form">
                            <div class="col-md-4 col-sm-12">
                                <label class="form-label">Nama</label>
                                <input type="text" class="form-control" id="walkin-extrabed-name" placeholder="Extra Bed">
                            </div>
                            <div class="col-md-2 col-sm-6">
                                <label class="form-label">Jumlah</label>
                                <input type="number" class="form-control" id="walkin-extrabed-quantity" min="1" value="1" placeholder="Jumlah">
                            </div>
                            <div class="col-md-2 col-sm-6">
                                <label class="form-label">Harga</label>
                                <input type="number" class="form-control" id="walkin-extrabed-price" min="0" placeholder="Harga">
                            </div>
                            <div class="col-md-3 col-sm-12">
                                <label class="form-label">Catatan</label>
                                <input type="text" class="form-control" id="walkin-extrabed-notes" placeholder="Opsional">
                            </div>
                            <div class="col-12 col-md-1 d-grid">
                                <button type="button" class="btn btn-success w-100" id="walkinAddExtraBedBtn" aria-label="Tambah"><i class="fas fa-plus"></i></button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="small text-muted" id="walkin-extrabed-hint"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card border-0 bg-light mb-3" id="walkin-room-transfer-section" style="display:none;">
                    <div class="card-body">
                        <h6 class="card-title text-secondary mb-2"><i class="fas fa-door-open me-1"></i>Riwayat Pindah Kamar</h6>
                        <div id="walkin-room-transfer-list"></div>
                    </div>
                </div>
                <div class="card border-0 bg-light mb-3" id="walkin-date-adjustment-section" style="display:none;">
                    <div class="card-body">
                        <h6 class="card-title text-secondary mb-2"><i class="fas fa-history me-1"></i>Riwayat Koreksi Tanggal</h6>
                        <div id="walkin-date-adjustment-list"></div>
                    </div>
                </div>
                <div class="card border-0 bg-light">
                    <div class="card-body">
                        <h6 class="card-title text-primary mb-3"><i class="fas fa-credit-card me-1"></i>Metode Pembayaran</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Channel Pembayaran (Opsional)</label>
                                <select class="form-select" id="walkin_checkout_payment_channel_id">
                                    <option value="">-- Tanpa Channel --</option>
                                    @foreach(\App\Models\PaymentChannel::where('is_active', true)->orderBy('sort_order')->get() as $channel)
                                        <option value="{{ $channel->id }}">{{ $channel->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Diskon (%)</label>
                                <input type="number" class="form-control" id="walkin_checkout_discount_percent" min="0" max="100" value="0">
                                <div class="form-text">Diskon hanya dihitung dari total layanan</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card border-0 bg-light">
                    <div class="card-body">
                        <h6 class="card-title text-warning mb-3">
                            <i class="fas fa-calculator"></i> Kalkulasi Total
                        </h6>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-2">
                                    <span><span id="walkin-baseline-nights">0</span> x Rp <span id="walkin-room-rate">0</span> = Rp <span id="walkin-baseline-subtotal">0</span></span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Malam tambahan (extend):</span>
                                    <span><span id="walkin-extra-nights">0</span> x Rp <span id="walkin-extend-rate">0</span> = Rp <span id="walkin-extend-subtotal">0</span></span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Total Layanan:</span>
                                    <span id="walkin-services-total-summary" class="fw-bold">Rp 0</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Charge Kerusakan:</span>
                                    <span id="walkin-damage-total-summary" class="fw-bold">Rp 0</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Biaya Extend:</span>
                                    <span id="walkin-extend-total" class="fw-bold">Rp 0</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Diskon Layanan:</span>
                                    <span id="walkin-discount-total" class="text-danger">Rp 0</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Total Termasuk Pajak:</span>
                                    <span id="walkin-total-include" class="fw-bold">Rp 0</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>DPP:</span>
                                    <span id="walkin-dpp">Rp 0</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>PPN:</span>
                                    <span id="walkin-tax">Rp 0</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span class="fw-bold">Total Dibayar:</span>
                                    <span id="walkin-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-secondary" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-outline-primary" id="walkinAdjustDatesFooterBtn" onclick="openWalkinAdjustDatesModal()" style="display:none;">
                    <i class="fas fa-calendar-alt me-1"></i>Koreksi Tanggal
                </button>
                <button type="button" class="btn btn-outline-info" id="walkinMoveRoomFooterBtn" onclick="openWalkinMoveRoomModal()" style="display:none;">
                    <i class="fas fa-exchange-alt me-1"></i>Pindah Kamar
                </button>
                <button type="button" class="btn btn-warning" id="walkinCheckoutBtn"><i class="fas fa-sign-out-alt me-1"></i>Check-out</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="walkinMoveRoomModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title"><i class="fas fa-exchange-alt me-2"></i>Pindah Kamar Walk-in</h5>
                <button type="button" class="btn-close btn-close-white" onclick="backToWalkinDetailFromMoveRoom()"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-light border mb-3">
                    <div class="small text-muted">Kamar Saat Ini</div>
                    <div class="fw-semibold" id="walkin_move_current_room">-</div>
                    <div class="small text-muted mt-2">Periode Menginap</div>
                    <div class="fw-semibold" id="walkin_move_stay_period">-</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Kamar Tujuan</label>
                    <select class="form-select" id="walkin_move_new_room_id">
                        <option value="">Pilih kamar tujuan</option>
                    </select>
                </div>
                <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" id="walkin_move_adjust_price" checked>
                    <label class="form-check-label" for="walkin_move_adjust_price">Sesuaikan tarif sisa malam otomatis</label>
                </div>
                <div class="border rounded p-3 bg-light mb-3" id="walkin_move_adjustment_preview" style="display:none;">
                    <div class="d-flex justify-content-between small mb-1">
                        <span>Tarif kamar lama</span>
                        <strong id="walkin_move_old_rate">Rp 0</strong>
                    </div>
                    <div class="d-flex justify-content-between small mb-1">
                        <span>Tarif kamar baru</span>
                        <strong id="walkin_move_new_rate">Rp 0</strong>
                    </div>
                    <div class="d-flex justify-content-between small mb-1">
                        <span>Sisa malam</span>
                        <strong id="walkin_move_remaining_nights">0</strong>
                    </div>
                    <div class="d-flex justify-content-between small mb-1">
                        <span>Selisih per malam</span>
                        <strong id="walkin_move_diff_per_night">Rp 0</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-semibold">Estimasi penyesuaian</span>
                        <strong id="walkin_move_adjustment_total">Rp 0</strong>
                    </div>
                    <div class="small text-muted" id="walkin_move_adjustment_note"></div>
                </div>
                <div class="mb-0">
                    <label class="form-label">Alasan Pindah Kamar</label>
                    <textarea class="form-control" id="walkin_move_reason" rows="3" placeholder="Contoh: AC kamar bermasalah"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="backToWalkinDetailFromMoveRoom()">Kembali</button>
                <button type="button" class="btn btn-info" onclick="submitWalkinMoveRoom()">
                    <i class="fas fa-save me-1"></i>Simpan Perpindahan
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="walkinAdjustDatesModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="fas fa-calendar-alt me-2"></i>Koreksi Tanggal Walk-in</h5>
                <button type="button" class="btn-close btn-close-white" onclick="backToWalkinDetailFromAdjustDates()"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-light border mb-3">
                    <div class="small text-muted">Booking</div>
                    <div class="fw-semibold" id="walkin_adjust_room_info">-</div>
                </div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Check-in Baru</label>
                        <input type="date" class="form-control" id="walkin_adjust_check_in_date">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Check-out Baru</label>
                        <input type="date" class="form-control" id="walkin_adjust_check_out_date">
                    </div>
                </div>
                <div class="border rounded p-3 bg-light my-3" id="walkin_adjust_dates_preview" style="display:none;">
                    <div class="d-flex justify-content-between small mb-1">
                        <span>Periode lama</span>
                        <strong id="walkin_adjust_old_range">-</strong>
                    </div>
                    <div class="d-flex justify-content-between small mb-1">
                        <span>Periode baru</span>
                        <strong id="walkin_adjust_new_range">-</strong>
                    </div>
                    <div class="d-flex justify-content-between small mb-1">
                        <span>Tarif efektif / malam</span>
                        <strong id="walkin_adjust_effective_rate">Rp 0</strong>
                    </div>
                    <div class="d-flex justify-content-between small mb-1">
                        <span>Total lama</span>
                        <strong id="walkin_adjust_old_total">Rp 0</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-semibold">Estimasi total baru</span>
                        <strong id="walkin_adjust_new_total">Rp 0</strong>
                    </div>
                    <div class="small text-muted" id="walkin_adjust_preview_note"></div>
                </div>
                <div class="mb-0">
                    <label class="form-label">Alasan Koreksi</label>
                    <textarea class="form-control" id="walkin_adjust_reason" rows="3" placeholder="Contoh: Salah input tanggal check-out oleh staf"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="backToWalkinDetailFromAdjustDates()">Kembali</button>
                <button type="button" class="btn btn-primary" onclick="submitWalkinAdjustDates()">
                    <i class="fas fa-save me-1"></i>Simpan Koreksi
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="walkinExtendModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="fas fa-calendar-plus me-2"></i>Extend Menginap</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="walkin_extend_booking_id">
                <div class="mb-3">
                    <label class="form-label">Checkout Saat Ini</label>
                    <input type="date" class="form-control" id="walkin_extend_current_checkout" readonly>
                </div>
                <div class="mb-2">
                    <label class="form-label">Checkout Baru</label>
                    <input type="date" class="form-control" id="walkin_extend_new_checkout">
                </div>
                <div class="border rounded p-2 bg-light mb-2">
                    <div class="d-flex justify-content-between small mb-1">
                        <span>Tarif Efektif / Malam</span>
                        <strong id="walkin_extend_preview_rate">Rp 0</strong>
                    </div>
                    <div class="d-flex justify-content-between small mb-1">
                        <span>Malam Extend</span>
                        <strong id="walkin_extend_preview_nights">0 malam</strong>
                    </div>
                    <div class="d-flex justify-content-between small">
                        <span>Estimasi Subtotal Extend</span>
                        <strong id="walkin_extend_preview_subtotal">Rp 0</strong>
                    </div>
                </div>
                <div class="border rounded p-2 bg-light mb-2">
                    <div class="mb-2">
                        <label class="form-label mb-1">Extra Bed Saat Extend</label>
                        <input type="number" class="form-control form-control-sm" id="walkin_extend_extrabed_qty" min="0" step="1" value="0">
                    </div>
                    <div class="d-flex justify-content-between small mb-1">
                        <span>Harga Extra Bed / Malam</span>
                        <strong id="walkin_extend_extrabed_rate">Rp 0</strong>
                    </div>
                    <div class="d-flex justify-content-between small">
                        <span>Estimasi Extra Bed Extend</span>
                        <strong id="walkin_extend_extrabed_total">Rp 0</strong>
                    </div>
                </div>
                <div class="form-text">Pilih tanggal checkout baru. Sistem akan menerbitkan invoice extend otomatis.</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="walkinExtendSubmitBtn"><i class="fas fa-check me-1"></i>Extend</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    let walkinGuests = [];
    let selectedWalkinGuestId = null;
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const globalShowNotification = (typeof window !== 'undefined' ? window.showNotification : undefined);
    let WALKIN_EXTEND_COST = 0;
    let WALKIN_BASELINE_NIGHTS = 0;
    let WALKIN_ROOM_RATE = 0;
    let WALKIN_EXTRA_NIGHTS = 0;
    let WALKIN_BASELINE_SUBTOTAL = 0;
    let WALKIN_STAY_NIGHTS = 1;
    let WALKIN_EXTRA_BED_BASE_PRICE = 0;
    let WALKIN_EXTEND_EFFECTIVE_RATE = 0;
    let WALKIN_EXTEND_EXTRA_BED_PRICE = 0;
    let WALKIN_EXTEND_EXTRA_BED_NAME = 'Extra Bed';
    let WALKIN_HISTORY_OUT_ITEMS = [];
    let WALKIN_HISTORY_OUT_PAGE = 1;
    let WALKIN_HISTORY_OUT_PER_PAGE = 10;
    let WALKIN_CURRENT_BOOKING = null;
    window.BILLING_MODE = '{{ \App\Models\Settings::get('billing_mode', 'night') }}';
    if (String(window.BILLING_MODE) !== 'night') { window.BILLING_MODE = 'night'; }
    function showNotification(message, type = 'info') {
        if (typeof globalShowNotification === 'function' && globalShowNotification !== showNotification) {
            try { globalShowNotification(message, type); } catch (e) { alert(message); }
        } else {
            alert(message);
        }
    }
    function getApiErrorMessage(data, fallback = 'Permintaan gagal') {
        const messages = [];
        if (data && data.errors && typeof data.errors === 'object') {
            Object.entries(data.errors).forEach(function([field, values]) {
                const entries = Array.isArray(values) ? values : [values];
                entries.filter(Boolean).forEach(function(message) {
                    messages.push(`${field}: ${message}`);
                });
            });
        }
        const title = (data && data.message) ? data.message : fallback;
        return messages.length > 0 ? `${title} — ${messages.join(' | ')}` : title;
    }
    function formatDateOnly(val) {
        if (!val) return '-';
        const d = parseDateLocal(val);
        if (d && !isNaN(d.getTime())) return formatLocalYMD(d);
        const s = String(val);
        return s.length >= 10 ? s.slice(0, 10) : s;
    }
    function formatDateOnlyLocal(val) {
        return formatDateOnly(val);
    }
    function formatWalkinRupiah(amount) {
        const numeric = Number(amount || 0);
        const prefix = numeric < 0 ? '-Rp ' : 'Rp ';
        return prefix + Math.abs(numeric).toLocaleString('id-ID');
    }
    function isExtendedReopen(booking) {
        const notes = String((booking && booking.special_requests) || '');
        return notes.toUpperCase().includes('EXTENDED_REOPEN');
    }
    function cleanSpecialRequestsText(val) {
        return String(val || '')
            .replace(/\s*\|\s*EXTENDED_REOPEN/gi, '')
            .replace(/EXTENDED_REOPEN/gi, '')
            .trim();
    }
    function getActualCheckInDateOnly(booking) {
        // Always prioritize logical stay date (check_in_date), not click-time timestamp.
        return formatDateOnlyLocal((booking && booking.check_in_date) ? booking.check_in_date : booking?.actual_check_in_time);
    }
    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 formatLocalYMD(dateObj) {
        if (!dateObj) return '';
        const y = dateObj.getFullYear();
        const m = String(dateObj.getMonth() + 1).padStart(2, '0');
        const d = String(dateObj.getDate()).padStart(2, '0');
        return `${y}-${m}-${d}`;
    }
    function getWalkinAllRoomRows() {
        const rows = [{
            typeEl: document.getElementById('walkin_room_type'),
            roomEl: document.getElementById('walkin_room_id'),
            guestsEl: document.getElementById('walkin_guest_count'),
            discountEl: document.getElementById('walkin_discount_percent'),
            overrideRateEl: document.getElementById('walkin_override_rate'),
            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'),
                discountEl: row.querySelector('.walkin-extra-room-discount'),
                overrideRateEl: row.querySelector('.walkin-extra-room-override-rate'),
                extra: true
            });
        });
        return rows;
    }
    function syncWalkinOverrideMode() {
        getWalkinAllRoomRows().forEach(function(row) {
            if (!row.discountEl || !row.overrideRateEl) return;
            const hasOverride = (parseFloat(row.overrideRateEl.value || '0') || 0) > 0;
            row.discountEl.disabled = hasOverride;
            if (hasOverride) row.discountEl.value = '0';
        });
    }
    function renderWalkinList(items) {
        const list = document.getElementById('walkinCheckinList');
        if (!list) return;
        if (!Array.isArray(items) || items.length === 0) {
            list.innerHTML = '<div class="text-muted">Belum ada check-in walk-in hari ini.</div>';
            return;
        }
        let html = '<div class="row">';
        items.forEach(b => {
            const g = b.guest || {};
            const r = b.room || {};
            html += `
                <div class="col-xl-4 col-lg-6 col-md-6 mb-4 booking-card">
                    <div class="card h-100 border-0 shadow-sm hover-shadow">
                        <div class="card-header bg-white border-bottom-0 pb-0">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <div class="d-flex align-items-center mb-2">
                                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center me-3" style="width:36px;height:36px;">
                                            <i class="fas fa-user text-primary"></i>
                                        </div>
                                        <div>
                                            <div class="fw-bold">${b.guest_name || g.name || '-'}</div>
                                            <small class="text-muted">${g.email || b.guest_email || ''} ${g.phone || b.guest_phone || ''}</small>
                                        </div>
                                    </div>
                                    <div class="small text-muted">
                                        <span class="badge ${b.status === 'checked_in' ? 'bg-primary' : 'bg-secondary'}">${(b.status || '').replace('_',' ')}</span>
                                        ${isExtendedReopen(b) ? '<span class="badge bg-warning text-dark ms-1">Extended</span>' : ''}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body pt-3">
                            <div class="mb-3">
                                <div class="d-flex align-items-center mb-2">
                                        <div class="bg-info-subtle rounded-circle p-2 me-3">
                                            <i class="fas fa-building text-info"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-0 fw-semibold">{{ $settings['hotel_name'] }}</h6>
                                        </div>
                                    </div>
                                    <div class="ms-5">
                                        <span class="badge bg-primary me-2">${r.room_number || '-'}</span>
                                        <span class="badge bg-secondary">${(r.type || '-').toString().charAt(0).toUpperCase() + (r.type || '-').toString().slice(1)}</span>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-6">
                                    <div class="text-center p-3 bg-light rounded">
                                        <i class="fas fa-calendar-plus text-success mb-1"></i>
                                        <div class="fw-bold small">Check-in</div>
                                        <div class="text-muted small">${getActualCheckInDateOnly(b)}</div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-center p-3 bg-light rounded">
                                        <i class="fas fa-calendar-minus text-danger mb-1"></i>
                                        <div class="fw-bold small">Check-out</div>
                                        <div class="text-muted small">${formatDateOnly(b.check_out_date)}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div>
                                    ${(() => {
                                        const checkIn = parseDateLocal(b.check_in_date);
                                        const checkOut = parseDateLocal(b.check_out_date);
                                        const nights = Math.max(1, Math.ceil((checkOut - checkIn) / (1000*60*60*24)));
                                        const guestCount = parseInt(b.guests || b.guest_count || 0) || 0;
                                        return `
                                            <span class="badge bg-secondary-subtle text-secondary border px-3 py-2">
                                                <i class="fas fa-moon me-1"></i>${nights} malam
                                            </span>
                                            <span class="badge bg-info-subtle text-info border px-3 py-2 ms-1">
                                                <i class="fas fa-users me-1"></i>${guestCount} tamu
                                            </span>
                                        `;
                                    })()}
                                </div>
                                <div class="text-end">
                                    ${(() => {
                                        const total = parseInt(b.total_price || 0) || 0;
                                        const pricePerNight = parseInt((r && r.price_per_night) || 0) || 0;
                                        let html = '';
                                        if (total > 0) {
                                            html += `<div class="fw-bold text-success h6 mb-0">Rp ${total.toLocaleString('id-ID')}</div>`;
                                        }
                                        if (pricePerNight > 0) {
                                            html += `<small class="text-muted">Rp ${pricePerNight.toLocaleString('id-ID')}/malam</small>`;
                                        }
                                        return html;
                                    })()}
                                </div>
                            </div>
                            ${cleanSpecialRequestsText(b.special_requests) ? `
                                <div class="mb-2">
                                    <small class="text-muted d-block mb-1">
                                        <i class="fas fa-comment-dots me-1"></i>Permintaan Khusus:
                                    </small>
                                    <small class="text-dark">${cleanSpecialRequestsText(b.special_requests)}</small>
                                </div>
                            ` : ``}
                        </div>
                        <div class="card-footer bg-white d-flex gap-2">
                            <button type="button" class="btn btn-outline-warning flex-fill" onclick="openWalkinExtendModal(${b.id}, '${formatDateOnly(b.check_out_date)}')">
                                <i class="fas fa-calendar-plus me-1"></i>Extend
                            </button>
                            <button type="button" class="btn btn-outline-primary flex-fill" onclick="openWalkinDetail(${b.id})">
                                <i class="fas fa-eye me-1"></i>Detail
                            </button>
                            <a class="btn btn-outline-secondary flex-fill" href="{{ route('admin.invoices.index') }}">
                                <i class="fas fa-file-invoice me-1"></i>Invoice
                            </a>
                        </div>
                    </div>
                </div>
            `;
        });
        html += '</div>';
        list.innerHTML = html;
    }
    function loadWalkinCheckinList() {
        const params = new URLSearchParams({ status: 'checked_in', booking_source: 'Walkin' });
        const url = `${window.APP_BASE_URL}/api/bookings?${params.toString()}`;
        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(async r => {
                const ct = r.headers.get('content-type') || '';
                const j = ct.includes('application/json') ? await r.json() : { success: false, data: [] };
                return { ok: r.ok, data: j };
            })
            .then(({ ok, data }) => {
                if (!ok || !data.success) { renderWalkinList([]); return; }
                const items = (data.data || []).sort((a,b) => {
                    const ta = new Date(a.check_in_date || a.actual_check_in_time || a.created_at || 0).getTime();
                    const tb = new Date(b.check_in_date || b.actual_check_in_time || b.created_at || 0).getTime();
                    return tb - ta;
                }).slice(0,20);
                renderWalkinList(items);
            })
            .catch(() => renderWalkinList([]));
    }
    function runWalkinCheckoutDue() {
        fetch(`${window.APP_BASE_URL}/api/bookings/checkout-due`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({})
        })
        .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
        .then(({ ok, data }) => {
            if (!ok || !data?.success) {
                showNotification(data?.message || 'Gagal menjalankan checkout massal jatuh tempo', 'error');
                return;
            }
            const processed = data?.data?.processed || 0;
            const failed = data?.data?.failed || 0;
            showNotification(
                failed > 0
                    ? `Checkout jatuh tempo selesai. Berhasil: ${processed}, Gagal: ${failed}`
                    : `Checkout jatuh tempo selesai. Berhasil: ${processed}`,
                failed > 0 ? 'warning' : 'success'
            );
            setTimeout(() => {
                loadWalkinCheckinList();
                loadWalkinHistoryCheckedOut();
            }, 500);
        })
        .catch(() => showNotification('Terjadi kesalahan saat checkout massal jatuh tempo', 'error'));
    }
    function updateWalkinExtendPreview() {
        const currentDate = document.getElementById('walkin_extend_current_checkout')?.value;
        const newDate = document.getElementById('walkin_extend_new_checkout')?.value;
        const rateEl = document.getElementById('walkin_extend_preview_rate');
        const nightsEl = document.getElementById('walkin_extend_preview_nights');
        const subtotalEl = document.getElementById('walkin_extend_preview_subtotal');
        const nightly = Math.max(0, Number(WALKIN_EXTEND_EFFECTIVE_RATE || 0));
        const oldD = parseDateLocal(currentDate);
        const newD = parseDateLocal(newDate);
        const extraNights = (oldD && newD) ? Math.max(0, Math.ceil((newD - oldD) / (1000 * 60 * 60 * 24))) : 0;
        const subtotal = Math.max(0, Math.round(nightly * extraNights));
        const extraBedQty = Math.max(0, parseInt(document.getElementById('walkin_extend_extrabed_qty')?.value || '0', 10) || 0);
        const extraBedRate = Math.max(0, Number(WALKIN_EXTEND_EXTRA_BED_PRICE || 0));
        const extraBedTotal = Math.max(0, Math.round(extraBedQty * extraBedRate * extraNights));
        const extraBedRateEl = document.getElementById('walkin_extend_extrabed_rate');
        const extraBedTotalEl = document.getElementById('walkin_extend_extrabed_total');
        if (rateEl) rateEl.textContent = 'Rp ' + Math.round(nightly).toLocaleString('id-ID');
        if (nightsEl) nightsEl.textContent = `${extraNights} malam`;
        if (subtotalEl) subtotalEl.textContent = 'Rp ' + subtotal.toLocaleString('id-ID');
        if (extraBedRateEl) extraBedRateEl.textContent = 'Rp ' + Math.round(extraBedRate).toLocaleString('id-ID');
        if (extraBedTotalEl) extraBedTotalEl.textContent = 'Rp ' + extraBedTotal.toLocaleString('id-ID');
    }
    document.getElementById('walkinCheckoutDueBtn').addEventListener('click', function() {
        if (window.Swal && typeof window.Swal.fire === 'function') {
            window.Swal.fire({
                icon: 'question',
                title: 'Checkout Jatuh Tempo',
                text: 'Proses semua tamu check-in yang sudah mencapai tanggal check-out hari ini?',
                showCancelButton: true,
                confirmButtonText: 'Ya, Proses',
                cancelButtonText: 'Batal'
            }).then((res) => {
                if (res.isConfirmed) {
                    runWalkinCheckoutDue();
                }
            });
            return;
        }
        if (confirm('Proses semua tamu check-in yang sudah mencapai tanggal check-out hari ini?')) {
            runWalkinCheckoutDue();
        }
    });
    function openWalkinExtendModal(bookingId, currentCheckoutDate) {
        const idEl = document.getElementById('walkin_extend_booking_id');
        const currentEl = document.getElementById('walkin_extend_current_checkout');
        const newEl = document.getElementById('walkin_extend_new_checkout');
        const extraBedQtyEl = document.getElementById('walkin_extend_extrabed_qty');
        if (!idEl || !currentEl || !newEl) return;
        const currentVal = formatDateOnly(currentCheckoutDate);
        idEl.value = String(bookingId || '');
        currentEl.value = currentVal;
        const cur = parseDateLocal(currentVal);
        const minDate = new Date(cur.getTime());
        minDate.setDate(minDate.getDate() + 1);
        const minVal = formatLocalYMD(minDate);
        newEl.min = minVal;
        newEl.value = minVal;
        if (extraBedQtyEl) extraBedQtyEl.value = '0';
        WALKIN_EXTEND_EFFECTIVE_RATE = 0;
        WALKIN_EXTEND_EXTRA_BED_PRICE = 0;
        WALKIN_EXTEND_EXTRA_BED_NAME = 'Extra Bed';
        updateWalkinExtendPreview();
        fetch(`${window.APP_BASE_URL}/api/room-service-extra-bed`, { headers: { 'Accept': 'application/json' } })
            .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
            .then(({ ok, data }) => {
                if (!ok || !data?.success || !data?.data) return;
                const info = data.data || {};
                WALKIN_EXTEND_EXTRA_BED_NAME = String(info.name || 'Extra Bed');
                WALKIN_EXTEND_EXTRA_BED_PRICE = Math.max(0, parseFloat(info.price || 0) || 0);
                updateWalkinExtendPreview();
            })
            .catch(() => {});
        fetch(`${window.APP_BASE_URL}/api/bookings/${bookingId}`, { headers: { 'Accept': 'application/json' } })
            .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
            .then(({ ok, data }) => {
                if (!ok || !data?.success || !data?.data) return;
                const b = data.data;
                const invoice = b.invoice || {};
                const oldCheckout = parseDateLocal(currentVal);
                const checkIn = parseDateLocal(b.check_in_date);
                let baseNights = parseInt(invoice.nights || 0, 10) || 0;
                if (baseNights <= 0 && checkIn && oldCheckout) {
                    baseNights = Math.max(1, Math.ceil((oldCheckout - checkIn) / (1000 * 60 * 60 * 24)));
                }
                let baseSubtotal = parseFloat(invoice.subtotal || 0) || 0;
                if (baseSubtotal <= 0) baseSubtotal = parseFloat(b.total_price || 0) || 0;
                let nightly = 0;
                if (baseNights > 0 && baseSubtotal > 0) nightly = baseSubtotal / baseNights;
                if (nightly <= 0) nightly = parseFloat(b.base_price || (b.room && b.room.price_per_night) || 0) || 0;
                WALKIN_EXTEND_EFFECTIVE_RATE = Math.max(0, nightly);
                updateWalkinExtendPreview();
            })
            .catch(() => {});
        newEl.oninput = updateWalkinExtendPreview;
        if (extraBedQtyEl) extraBedQtyEl.oninput = updateWalkinExtendPreview;
        const modal = new bootstrap.Modal(document.getElementById('walkinExtendModal'));
        modal.show();
    }
    window.openWalkinExtendModal = openWalkinExtendModal;
    document.getElementById('walkinExtendSubmitBtn').addEventListener('click', function() {
        const id = document.getElementById('walkin_extend_booking_id')?.value;
        const currentDate = document.getElementById('walkin_extend_current_checkout')?.value;
        const newDate = document.getElementById('walkin_extend_new_checkout')?.value;
        const extraBedQty = Math.max(0, parseInt(document.getElementById('walkin_extend_extrabed_qty')?.value || '0', 10) || 0);
        const oldD = parseDateLocal(currentDate);
        const newD = parseDateLocal(newDate);
        const extraNights = (oldD && newD) ? Math.max(0, Math.ceil((newD - oldD) / (1000 * 60 * 60 * 24))) : 0;
        if (!id) { showNotification('Booking tidak ditemukan', 'error'); return; }
        if (!newDate) { showNotification('Tanggal checkout baru wajib diisi', 'error'); return; }
        if (newDate <= currentDate) { showNotification('Tanggal checkout baru harus lebih besar dari tanggal saat ini', 'error'); return; }
        fetch(`${window.APP_BASE_URL}/api/bookings/${id}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ check_out_date: newDate })
        })
        .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
        .then(({ ok, data }) => {
            if (!ok || !data?.success) {
                showNotification(data?.message || 'Gagal melakukan extend', 'error');
                return;
            }
            const invNum = data?.meta?.extension_invoice?.invoice_number || null;
            if (invNum) {
                showNotification(`Extend berhasil. Invoice terbit: ${invNum}`, 'success');
            } else {
                showNotification('Extend berhasil. Invoice extend tidak terbit (cek setting auto biaya extend).', 'warning');
            }
            const addExtraBedAfterExtend = () => {
                if (extraBedQty <= 0 || extraNights <= 0) {
                    return Promise.resolve({ added: false });
                }
                const unitPrice = Math.max(0, Math.round((WALKIN_EXTEND_EXTRA_BED_PRICE || 0) * extraNights));
                if (unitPrice <= 0) {
                    return Promise.resolve({ added: false });
                }
                return fetch(`${window.APP_BASE_URL}/api/room-services`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                    body: JSON.stringify({
                        booking_id: parseInt(id, 10),
                        service_name: `${WALKIN_EXTEND_EXTRA_BED_NAME} (Extend)`,
                        quantity: extraBedQty,
                        price: unitPrice,
                        notes: `Auto add dari Extend (${extraNights} malam)`
                    })
                })
                .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
                .then(({ ok, data }) => ({ added: ok && data?.success }))
                .catch(() => ({ added: false }));
            };

            addExtraBedAfterExtend().then((res) => {
                if (res.added) {
                    showNotification('Extra bed extend berhasil ditambahkan', 'success');
                }
                const modal = bootstrap.Modal.getInstance(document.getElementById('walkinExtendModal'));
                if (modal) modal.hide();
                setTimeout(() => {
                    loadWalkinCheckinList();
                    loadWalkinHistoryCheckedOut();
                }, 500);
            });
        })
        .catch(() => showNotification('Terjadi kesalahan saat extend', 'error'));
    });
    document.getElementById('refreshWalkinListBtn').addEventListener('click', function(){
        loadWalkinCheckinList();
    });
    function renderWalkinHistory(items, containerId) {
        const list = document.getElementById(containerId);
        if (!list) return;
        if (!Array.isArray(items) || items.length === 0) {
            list.innerHTML = '<div class="text-muted">Belum ada data riwayat untuk filter ini.</div>';
            return;
        }
        let html = '<div class="row">';
        items.forEach(b => {
            const g = b.guest || {};
            const r = b.room || {};
            const total = parseInt(b.total_price || 0) || 0;
            const pricePerNight = parseInt((r && r.price_per_night) || 0) || 0;
            const statusText = (b.status || '').replace('_',' ');
            const statusClass = b.status === 'checked_in' ? 'bg-primary' : (b.status === 'checked_out' ? 'bg-secondary' : 'bg-secondary');
            html += `
                <div class="col-xl-4 col-lg-6 col-md-6 mb-4 booking-card">
                    <div class="card h-100 border-0 shadow-sm hover-shadow">
                        <div class="card-header bg-white border-bottom-0 pb-0">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <div class="d-flex align-items-center mb-2">
                                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center me-3" style="width:36px;height:36px;">
                                            <i class="fas fa-user text-primary"></i>
                                        </div>
                                        <div>
                                            <div class="fw-bold">${b.guest_name || g.name || '-'}</div>
                                            <small class="text-muted">${g.email || b.guest_email || ''} ${g.phone || b.guest_phone || ''}</small>
                                        </div>
                                    </div>
                                    <div class="small">
                                        <span class="badge ${statusClass}">${statusText}</span>
                                        ${isExtendedReopen(b) ? '<span class="badge bg-warning text-dark ms-1">Extended</span>' : ''}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body pt-3">
                            <div class="mb-3">
                                <div class="d-flex align-items-center mb-2">
                                        <div class="bg-info-subtle rounded-circle p-2 me-3">
                                            <i class="fas fa-building text-info"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-0 fw-semibold">{{ $settings['hotel_name'] }}</h6>
                                        </div>
                                    </div>
                                    <div class="ms-5">
                                        <span class="badge bg-primary me-2">${r.room_number || '-'}</span>
                                        <span class="badge bg-secondary">${(r.type || '-').toString().charAt(0).toUpperCase() + (r.type || '-').toString().slice(1)}</span>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-6">
                                    <div class="text-center p-3 bg-light rounded">
                                        <i class="fas fa-calendar-plus text-success mb-1"></i>
                                        <div class="fw-bold small">Check-in</div>
                                        <div class="text-muted small">${getActualCheckInDateOnly(b)}</div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-center p-3 bg-light rounded">
                                        <i class="fas fa-calendar-minus text-danger mb-1"></i>
                                        <div class="fw-bold small">Check-out</div>
                                        <div class="text-muted small">${formatDateOnly(b.check_out_date)}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div>
                                    ${(() => {
                                        const checkIn = parseDateLocal(b.check_in_date);
                                        const checkOut = parseDateLocal(b.check_out_date);
                                        const nights = Math.max(1, Math.ceil((checkOut - checkIn) / (1000*60*60*24)));
                                        const guestCount = parseInt(b.guests || b.guest_count || 0) || 0;
                                        return `
                                            <span class="badge bg-secondary-subtle text-secondary border px-3 py-2">
                                                <i class="fas fa-moon me-1"></i>${nights} malam
                                            </span>
                                            <span class="badge bg-info-subtle text-info border px-3 py-2 ms-1">
                                                <i class="fas fa-users me-1"></i>${guestCount} tamu
                                            </span>
                                        `;
                                    })()}
                                </div>
                                <div class="text-end">
                                    ${(() => {
                                        let html = '';
                                        if (total > 0) { html += `<div class="fw-bold text-success h6 mb-0">Rp ${total.toLocaleString('id-ID')}</div>`; }
                                        if (pricePerNight > 0) { html += `<small class="text-muted">Rp ${pricePerNight.toLocaleString('id-ID')}/malam</small>`; }
                                        return html;
                                    })()}
                                </div>
                            </div>
                            ${cleanSpecialRequestsText(b.special_requests) ? `
                                <div class="mb-2">
                                    <small class="text-muted d-block mb-1">
                                        <i class="fas fa-comment-dots me-1"></i>Permintaan Khusus:
                                    </small>
                                    <small class="text-dark">${cleanSpecialRequestsText(b.special_requests)}</small>
                                </div>
                            ` : ``}
                        </div>
                        <div class="card-footer bg-white d-flex gap-2">
                            ${['checked_in','checked_out'].includes(String(b.status || '')) ? `
                            <button type="button" class="btn btn-outline-warning flex-fill" onclick="openWalkinExtendModal(${b.id}, '${formatDateOnly(b.check_out_date)}')">
                                <i class="fas fa-calendar-plus me-1"></i>Extend
                            </button>
                            ` : ``}
                            <button type="button" class="btn btn-outline-primary flex-fill" onclick="openWalkinDetail(${b.id})">
                                <i class="fas fa-eye me-1"></i>Detail
                            </button>
                            <a class="btn btn-outline-secondary flex-fill" href="{{ route('admin.invoices.index') }}">
                                <i class="fas fa-file-invoice me-1"></i>Invoice
                            </a>
                        </div>
                    </div>
                </div>
            `;
        });
        html += '</div>';
        list.innerHTML = html;
    }
    function renderWalkinHistoryCheckedOutList(items, containerId) {
        const list = document.getElementById(containerId);
        if (!list) return;
        WALKIN_HISTORY_OUT_ITEMS = Array.isArray(items) ? items : [];
        if (WALKIN_HISTORY_OUT_ITEMS.length === 0) {
            list.innerHTML = '<div class="text-muted">Belum ada data riwayat untuk filter ini.</div>';
            return;
        }
        const totalItems = WALKIN_HISTORY_OUT_ITEMS.length;
        const totalPages = Math.max(1, Math.ceil(totalItems / WALKIN_HISTORY_OUT_PER_PAGE));
        if (WALKIN_HISTORY_OUT_PAGE > totalPages) WALKIN_HISTORY_OUT_PAGE = totalPages;
        if (WALKIN_HISTORY_OUT_PAGE < 1) WALKIN_HISTORY_OUT_PAGE = 1;
        const startIndex = (WALKIN_HISTORY_OUT_PAGE - 1) * WALKIN_HISTORY_OUT_PER_PAGE;
        const endIndex = Math.min(startIndex + WALKIN_HISTORY_OUT_PER_PAGE, totalItems);
        const pageItems = WALKIN_HISTORY_OUT_ITEMS.slice(startIndex, endIndex);
        let html = `
            <div class="table-responsive">
                <table class="table table-sm table-striped align-middle">
                    <thead>
                        <tr>
                            <th style="width: 16%;">Waktu Checkout</th>
                            <th>Nama Tamu</th>
                            <th style="width: 14%;">Kamar</th>
                            <th style="width: 12%;">Durasi</th>
                            <th style="width: 14%;">Total</th>
                            <th style="width: 24%;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
        `;
        pageItems.forEach(b => {
            const g = b.guest || {};
            const r = b.room || {};
            const checkIn = parseDateLocal(b.check_in_date);
            const checkOut = parseDateLocal(b.check_out_date);
            const nights = (checkIn && checkOut) ? Math.max(1, Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24))) : 0;
            const total = parseInt(b.total_price || 0, 10) || 0;
            const outTs = b.actual_check_out_time || b.updated_at || b.check_out_date;
            html += `
                <tr>
                    <td>${outTs ? formatDateOnly(outTs) : '-'}</td>
                    <td>
                        <div class="fw-semibold">${b.guest_name || g.name || '-'}</div>
                        <small class="text-muted">${g.phone || b.guest_phone || ''}</small>
                    </td>
                    <td>
                        <span class="badge bg-primary me-1">${r.room_number || '-'}</span>
                        <span class="badge bg-secondary">${(r.type || '-').toString().charAt(0).toUpperCase() + (r.type || '-').toString().slice(1)}</span>
                    </td>
                    <td>${nights > 0 ? `${nights} malam` : '-'}</td>
                    <td>${total > 0 ? `Rp ${total.toLocaleString('id-ID')}` : '-'}</td>
                    <td>
                        <div class="d-flex gap-1">
                            <button type="button" class="btn btn-outline-warning btn-sm" onclick="openWalkinExtendModal(${b.id}, '${formatDateOnly(b.check_out_date)}')">
                                <i class="fas fa-calendar-plus me-1"></i>Extend
                            </button>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="openWalkinDetail(${b.id})">
                                <i class="fas fa-eye me-1"></i>Detail
                            </button>
                            <a class="btn btn-outline-secondary btn-sm" href="{{ route('admin.invoices.index') }}">
                                <i class="fas fa-file-invoice me-1"></i>Invoice
                            </a>
                        </div>
                    </td>
                </tr>
            `;
        });
        html += `
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-between align-items-center mt-2">
                <small class="text-muted">Menampilkan ${startIndex + 1}-${endIndex} dari ${totalItems} data</small>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-outline-secondary" onclick="changeWalkinHistoryOutPage(-1)" ${WALKIN_HISTORY_OUT_PAGE <= 1 ? 'disabled' : ''}>Prev</button>
                    <button type="button" class="btn btn-outline-secondary" disabled>Hal ${WALKIN_HISTORY_OUT_PAGE}/${totalPages}</button>
                    <button type="button" class="btn btn-outline-secondary" onclick="changeWalkinHistoryOutPage(1)" ${WALKIN_HISTORY_OUT_PAGE >= totalPages ? 'disabled' : ''}>Next</button>
                </div>
            </div>
        `;
        list.innerHTML = html;
    }
    function changeWalkinHistoryOutPage(step) {
        WALKIN_HISTORY_OUT_PAGE = Math.max(1, WALKIN_HISTORY_OUT_PAGE + Number(step || 0));
        renderWalkinHistoryCheckedOutList(WALKIN_HISTORY_OUT_ITEMS, 'walkinHistoryCheckedOut');
    }
    function loadWalkinHistoryCheckedIn() {
        const fromEl = document.getElementById('walkin_history_from');
        const toEl = document.getElementById('walkin_history_to');
        const from = fromEl && fromEl.value ? fromEl.value : '';
        const to = toEl && toEl.value ? toEl.value : '';
        const params = new URLSearchParams({ status: 'checked_in', booking_source: 'Walkin' });
        if (from) { params.set('from_date', from); }
        const url = `${window.APP_BASE_URL}/api/bookings?${params.toString()}`;
        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(async r => {
                const ct = r.headers.get('content-type') || '';
                const j = ct.includes('application/json') ? await r.json() : { success: false, data: [] };
                return { ok: r.ok, data: j };
            })
            .then(({ ok, data }) => {
                const items = ok && data.success ? (data.data || []) : [];
                const start = from ? new Date(from) : new Date(new Date().getFullYear(), new Date().getMonth(), 1);
                const end = to ? new Date(to) : new Date();
                end.setHours(23,59,59,999);
                const filtered = items.filter(b => {
                    const t = new Date(b.check_in_date || b.actual_check_in_time || b.created_at || 0).getTime();
                    return t >= start.getTime() && t <= end.getTime();
                });
                const sorted = filtered.sort((a,b) => {
                    const ta = new Date(a.check_in_date || a.actual_check_in_time || a.created_at || 0).getTime();
                    const tb = new Date(b.check_in_date || b.actual_check_in_time || b.created_at || 0).getTime();
                    return tb - ta;
                }).slice(0,50);
                renderWalkinHistory(sorted, 'walkinHistoryCheckedIn');
            })
            .catch(() => renderWalkinHistory([], 'walkinHistoryCheckedIn'));
    }
    function loadWalkinHistoryCheckedOut() {
        const fromEl = document.getElementById('walkin_history_from');
        const toEl = document.getElementById('walkin_history_to');
        const from = fromEl && fromEl.value ? fromEl.value : '';
        const to = toEl && toEl.value ? toEl.value : '';
        const params = new URLSearchParams({ status: 'checked_out', booking_source: 'Walkin' });
        if (to) { params.set('to_date', to); }
        const url = `${window.APP_BASE_URL}/api/bookings?${params.toString()}`;
        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(async r => {
                const ct = r.headers.get('content-type') || '';
                const j = ct.includes('application/json') ? await r.json() : { success: false, data: [] };
                return { ok: r.ok, data: j };
            })
            .then(({ ok, data }) => {
                const items = ok && data.success ? (data.data || []) : [];
                const start = from ? new Date(from) : new Date(new Date().getFullYear(), new Date().getMonth(), 1);
                const end = to ? new Date(to) : new Date();
                end.setHours(23,59,59,999);
                const filtered = items.filter(b => {
                    const t = new Date(b.actual_check_out_time || b.check_out_date || b.updated_at || 0).getTime();
                    return t >= start.getTime() && t <= end.getTime();
                });
                const sorted = filtered.sort((a,b) => {
                    const ta = new Date(a.actual_check_out_time || a.updated_at || a.check_out_date || 0).getTime();
                    const tb = new Date(b.actual_check_out_time || b.updated_at || b.check_out_date || 0).getTime();
                    return tb - ta;
                });
                WALKIN_HISTORY_OUT_PAGE = 1;
                renderWalkinHistoryCheckedOutList(sorted, 'walkinHistoryCheckedOut');
            })
            .catch(() => renderWalkinHistoryCheckedOutList([], 'walkinHistoryCheckedOut'));
    }
    document.getElementById('refreshWalkinHistoryBtn').addEventListener('click', function(){
        loadWalkinHistoryCheckedOut();
    });
    const debouncedLoadHistory = debounceWalkin(function(){
        loadWalkinHistoryCheckedOut();
    }, 100);
    const histFromEl = document.getElementById('walkin_history_from');
    const histToEl = document.getElementById('walkin_history_to');
    const histPerPageEl = document.getElementById('walkin_history_per_page');
    if (histFromEl) histFromEl.addEventListener('change', debouncedLoadHistory);
    if (histToEl) histToEl.addEventListener('change', debouncedLoadHistory);
    if (histPerPageEl) {
        histPerPageEl.addEventListener('change', function() {
            const val = parseInt(this.value || '10', 10);
            WALKIN_HISTORY_OUT_PER_PAGE = [10, 25, 50].includes(val) ? val : 10;
            WALKIN_HISTORY_OUT_PAGE = 1;
            renderWalkinHistoryCheckedOutList(WALKIN_HISTORY_OUT_ITEMS, 'walkinHistoryCheckedOut');
        });
    }
    function loadWalkinGuests() {
        fetch(`${window.APP_BASE_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 && Array.isArray(data.data)) {
                    walkinGuests = data.data;
                } else {
                    walkinGuests = [];
                    showNotification('Gagal memuat data tamu', 'error');
                }
            })
            .catch(() => { 
                walkinGuests = []; 
                showNotification('Terjadi kesalahan saat memuat data tamu', 'error');
            });
    }
    function upsertWalkinGuest(guest) {
        if (!guest || !guest.id) return;
        const idx = walkinGuests.findIndex(item => String(item.id) === String(guest.id));
        if (idx >= 0) {
            walkinGuests[idx] = guest;
        } else {
            walkinGuests.push(guest);
        }
    }
    function applyExistingGuestToWalkin(guest) {
        if (!guest) return;
        upsertWalkinGuest(guest);
        selectedWalkinGuestId = guest.id;
        const nameInput = document.getElementById('walkin_guest_name');
        const emailInput = document.querySelector('input[name="guest_email"]');
        const phoneInput = document.querySelector('input[name="guest_phone"]');
        const suggestions = document.getElementById('walkinGuestSuggestions');
        const addNewGuestBtn = document.getElementById('walkinAddNewGuestBtn');
        if (nameInput) nameInput.value = guest.name || '';
        if (emailInput) emailInput.value = guest.email || '';
        if (phoneInput) phoneInput.value = guest.phone || '';
        if (suggestions) suggestions.style.display = 'none';
        if (addNewGuestBtn) addNewGuestBtn.style.display = 'none';
    }
    function restackVisibleWalkinModals() {
        const openModals = Array.from(document.querySelectorAll('.modal.show'));
        const backdrops = Array.from(document.querySelectorAll('.modal-backdrop'));
        openModals.forEach(function(modalEl, index) {
            const zIndex = 1055 + (index * 10);
            try { modalEl.style.setProperty('z-index', String(zIndex), 'important'); } catch(_) { modalEl.style.zIndex = String(zIndex); }
            modalEl.classList.remove('pe-none');
            modalEl.removeAttribute('aria-hidden');
        });
        backdrops.forEach(function(backdropEl, index) {
            const zIndex = 1050 + (index * 10);
            try { backdropEl.style.setProperty('z-index', String(zIndex), 'important'); } catch(_) { backdropEl.style.zIndex = String(zIndex); }
        });
        if (openModals.length > 0) {
            document.body.classList.add('modal-open');
        }
    }
    function showExistingGuestAppliedToastForWalkin() {
        if (typeof Swal !== 'undefined' && Swal && typeof Swal.fire === 'function') {
            return Swal.fire({
                toast: true,
                icon: 'success',
                title: 'Data tamu existing digunakan',
                position: 'top-end',
                showConfirmButton: false,
                timer: 1800,
                timerProgressBar: true
            });
        }
        showNotification('Data tamu existing digunakan', 'success');
        return Promise.resolve();
    }
    function restoreWalkinModalAfterGuestSelection() {
        window.setTimeout(function() {
            const shownModals = document.querySelectorAll('.modal.show').length;
            const backdrops = Array.from(document.querySelectorAll('.modal-backdrop'));
            while (backdrops.length > shownModals) {
                const orphaned = backdrops.pop();
                if (orphaned) orphaned.remove();
            }
            const checkinModalEl = document.getElementById('walkinCheckinModal');
            if (checkinModalEl && checkinModalEl.classList.contains('show')) {
                document.body.classList.add('modal-open');
                checkinModalEl.classList.remove('pe-none');
                checkinModalEl.removeAttribute('aria-hidden');
            }
            restackVisibleWalkinModals();
            showExistingGuestAppliedToastForWalkin();
        }, 200);
    }
    function showExistingGuestPopupForWalkin(guest) {
        if (!guest) return Promise.resolve(false);
        const ktp = guest.id_number || '-';
        const email = guest.email || '-';
        const phone = guest.phone || '-';
        if (typeof Swal !== 'undefined' && Swal && typeof Swal.fire === 'function') {
            return Swal.fire({
                icon: 'info',
                title: 'Nomor KTP Sudah Terdaftar',
                html: `
                    <div class="text-start">
                        <div><strong>Nama:</strong> ${guest.name || '-'}</div>
                        <div><strong>KTP:</strong> ${ktp}</div>
                        <div><strong>Email:</strong> ${email}</div>
                        <div><strong>Telepon:</strong> ${phone}</div>
                    </div>
                `,
                showCancelButton: true,
                confirmButtonText: 'Gunakan Data Ini',
                cancelButtonText: 'Batal'
            }).then(result => {
                if (result.isConfirmed) {
                    applyExistingGuestToWalkin(guest);
                    const addModalEl = document.getElementById('walkinAddGuestModal');
                    const addModal = addModalEl ? (bootstrap.Modal.getInstance(addModalEl) || new bootstrap.Modal(addModalEl)) : null;
                    if (addModalEl && addModal) {
                        addModalEl.addEventListener('hidden.bs.modal', restoreWalkinModalAfterGuestSelection, { once: true });
                        addModal.hide();
                    } else {
                        restoreWalkinModalAfterGuestSelection();
                    }
                    return true;
                }
                return false;
            });
        }
        const confirmed = window.confirm(`Nomor KTP sudah terdaftar atas nama ${guest.name || '-'}. Gunakan data ini?`);
        if (confirmed) {
            applyExistingGuestToWalkin(guest);
            return Promise.resolve(true);
        }
        return Promise.resolve(false);
    }
    async function lookupExistingWalkinGuestByIdNumber(idNumber) {
        const normalized = String(idNumber || '').trim();
        if (!/^\d{16}$/.test(normalized)) return null;
        const localGuest = walkinGuests.find(guest => String(guest.id_number || '').trim() === normalized) || null;
        if (localGuest) return localGuest;
        try {
            const response = await fetch(`${window.APP_BASE_URL}/api/guests?search=${encodeURIComponent(normalized)}`, { headers: { 'Accept': 'application/json' } });
            const data = await response.json();
            if (response.ok && data.success && Array.isArray(data.data) && data.data.length > 0) {
                const guest = data.data.find(item => String(item.id_number || '').trim() === normalized) || data.data[0];
                if (guest) {
                    upsertWalkinGuest(guest);
                    return guest;
                }
            }
        } catch (error) {
            console.error('Error checking duplicate walk-in KTP:', error);
        }
        return null;
    }
    async function promptExistingGuestByIdNumberForWalkin(idNumber) {
        const guest = await lookupExistingWalkinGuestByIdNumber(idNumber);
        if (!guest) return false;
        return showExistingGuestPopupForWalkin(guest);
    }
    function setupWalkinGuestSearch() {
        const nameInput = document.getElementById('walkin_guest_name');
        const suggestions = document.getElementById('walkinGuestSuggestions');
        const emailInput = document.querySelector('input[name="guest_email"]');
        const phoneInput = document.querySelector('input[name="guest_phone"]');
        const addNewGuestBtn = document.getElementById('walkinAddNewGuestBtn');
        if (!nameInput || !suggestions) return;
        nameInput.addEventListener('input', function() {
            const q = this.value.trim().toLowerCase();
            if (q.length < 2) { suggestions.style.display = 'none'; if (addNewGuestBtn) addNewGuestBtn.style.display = 'none'; selectedWalkinGuestId = null; return; }
            const renderSuggestions = function(list) {
                if (!Array.isArray(list) || list.length === 0) {
                    suggestions.style.display = 'none';
                    if (addNewGuestBtn) addNewGuestBtn.style.display = 'block';
                    selectedWalkinGuestId = null;
                    return;
                }
                let html = '';
                list.forEach(g => {
                    html += `
                        <button type="button" class="dropdown-item walkin-guest-suggestion" data-guest-id="${g.id}">
                            <div class="fw-bold">${g.name} ${g.id_number ? `<span class="text-muted">(${g.id_number})</span>` : ''}</div>
                            <small class="text-muted">${g.email || ''} ${g.phone || ''}</small>
                        </button>
                    `;
                });
                suggestions.innerHTML = html;
                suggestions.style.display = 'block';
                if (addNewGuestBtn) addNewGuestBtn.style.display = 'block';
                document.querySelectorAll('.walkin-guest-suggestion').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const gid = this.dataset.guestId;
                        const g = (list || []).find(x => String(x.id) === String(gid));
                        if (!g) return;
                        selectedWalkinGuestId = g.id;
                        nameInput.value = g.name || '';
                        if (emailInput) emailInput.value = g.email || '';
                        if (phoneInput) phoneInput.value = g.phone || '';
                        suggestions.style.display = 'none';
                        if (addNewGuestBtn) addNewGuestBtn.style.display = 'none';
                    });
                });
            };
            const local = walkinGuests.filter(g => {
                const nm = String(g.name || '').toLowerCase();
                const em = String(g.email || '').toLowerCase();
                const ph = String(g.phone || '').toLowerCase();
                const idn = String(g.id_number || '').toLowerCase();
                return nm.includes(q) || em.includes(q) || ph.includes(q) || idn.includes(q);
            });
            if (local.length > 0) {
                renderSuggestions(local);
            } else {
                fetch(`${window.APP_BASE_URL}/api/guests?search=${encodeURIComponent(q)}`, { headers: { 'Accept': 'application/json' } })
                    .then(async r => {
                        const ct = r.headers.get('content-type') || '';
                        const j = ct.includes('application/json') ? await r.json() : { success: false, data: [] };
                        return { ok: r.ok, data: j };
                    })
                    .then(({ ok, data }) => {
                        if (ok && data && data.success && Array.isArray(data.data)) {
                            walkinGuests = data.data;
                            renderSuggestions(data.data);
                        } else {
                            renderSuggestions([]);
                        }
                    })
                    .catch(() => renderSuggestions([]));
            }
    });
    document.addEventListener('click', function(e) {
        if (!nameInput.contains(e.target) && !suggestions.contains(e.target)) {
            suggestions.style.display = 'none';
        }
    });
        if (addNewGuestBtn) {
            addNewGuestBtn.addEventListener('click', function() {
                const currentName = nameInput.value || '';
                document.getElementById('new_walkin_guest_name').value = currentName;
                const addModal = new bootstrap.Modal(document.getElementById('walkinAddGuestModal'));
                addModal.show();
            });
        }
    }
    document.addEventListener('DOMContentLoaded', function() {
        const addForm = document.getElementById('walkinAddGuestForm');
        const isCompanyEl = document.getElementById('new_walkin_guest_is_company');
        const idInputEl = document.getElementById('new_walkin_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();
            let lastHandledId = '';
            const handleExistingGuestCheck = async function() {
                const normalized = String(idInputEl.value || '').trim();
                if (!/^\d{16}$/.test(normalized) || normalized === lastHandledId || (isCompanyEl && isCompanyEl.checked)) return;
                const used = await promptExistingGuestByIdNumberForWalkin(normalized);
                if (used) {
                    lastHandledId = normalized;
                    idInputEl.classList.remove('is-invalid');
                }
            };
            idInputEl.addEventListener('change', handleExistingGuestCheck);
            idInputEl.addEventListener('blur', handleExistingGuestCheck);
        }
        if (!addForm) return;
        addForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            const fd = new FormData(this);
            const isCompany = isCompanyEl && isCompanyEl.checked;
            if (isCompany) {
                fd.set('is_company', '1');
            }
            const idNumber = String(fd.get('id_number') || '').trim();
            if (!isCompany && !/^\d{16}$/.test(idNumber)) {
                if (typeof Swal !== 'undefined' && Swal && typeof Swal.fire === 'function') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Nomor KTP Tidak Valid',
                        text: 'Nomor KTP harus 16 digit angka',
                        timer: 1600,
                        showConfirmButton: false
                    });
                } else {
                    showNotification('Nomor KTP harus 16 digit', 'error');
                }
                const idEl = document.getElementById('new_walkin_guest_id_number');
                if (idEl) idEl.classList.add('is-invalid');
                return;
            }
            if (!isCompany && /^\d{16}$/.test(idNumber)) {
                const used = await promptExistingGuestByIdNumberForWalkin(idNumber);
                if (used) {
                    this.reset();
                    return;
                }
            }
            const companyVal = String(fd.get('company') || '').trim();
            if (companyVal !== '') {
                const baseNotes = String(fd.get('notes') || '').trim();
                const combined = baseNotes !== '' ? (baseNotes + ' | ' + ('Perusahaan: ' + companyVal)) : ('Perusahaan: ' + companyVal);
                fd.set('notes', combined);
            }
            fetch(`${window.APP_BASE_URL}/api/guests`, {
                method: 'POST',
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                body: fd
            })
            .then(async r => { const j = await r.json(); return { ok: r.ok, status: r.status, data: j }; })
            .then(({ ok, status, data }) => {
                if (ok && data.success && data.guest) {
                    walkinGuests.push(data.guest);
                    selectedWalkinGuestId = data.guest.id;
                    document.getElementById('walkin_guest_name').value = data.guest.name || '';
                    const emailInput = document.querySelector('input[name="guest_email"]');
                    const phoneInput = document.querySelector('input[name="guest_phone"]');
                    if (emailInput) emailInput.value = data.guest.email || '';
                    if (phoneInput) phoneInput.value = data.guest.phone || '';
                    const addModalEl = document.getElementById('walkinAddGuestModal');
                    const addModal = bootstrap.Modal.getInstance(addModalEl) || new bootstrap.Modal(addModalEl);
                    addModal.hide();
                    const suggestions = document.getElementById('walkinGuestSuggestions');
                    const addNewGuestBtn = document.getElementById('walkinAddNewGuestBtn');
                    if (suggestions) suggestions.style.display = 'none';
                    if (addNewGuestBtn) addNewGuestBtn.style.display = 'none';
                    this.reset();
                    showNotification('Tamu baru berhasil ditambahkan', 'success');
                } else if (status === 409 && data.existing_guest) {
                    showExistingGuestPopupForWalkin(data.existing_guest);
                } else {
                    let msg = data.message || 'Gagal menambahkan tamu';
                    if (data.errors) {
                        const details = Object.values(data.errors).flat().join(', ');
                        if (details) msg += ': ' + details;
                    }
                    showNotification(msg, 'error');
                }
            })
            .catch(() => showNotification('Terjadi kesalahan saat menambahkan tamu', 'error'));
        });
        addForm.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                const tag = (e.target.tagName || '').toLowerCase();
                if (tag === 'textarea') return;
                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(e.target);
                if (idx > -1 && idx < focusables.length - 1) {
                    const next = focusables[idx + 1];
                    next.focus();
                    if (next.select && next.tagName.toLowerCase() === 'input') { next.select(); }
                } else {
                    this.requestSubmit ? this.requestSubmit() : this.dispatchEvent(new Event('submit', { cancelable: true }));
                }
            }
        });
        const takeBtn = document.getElementById('openWalkinKtpCameraBtn');
        if (takeBtn) {
            takeBtn.addEventListener('click', function() {
                if (typeof openWalkinKtpCamera === 'function') {
                    openWalkinKtpCamera('new_walkin_guest_ktp_file');
                } else if (typeof window.openWalkinKtpCamera === 'function') {
                    window.openWalkinKtpCamera('new_walkin_guest_ktp_file');
                } else {
                    alert('Fungsi kamera belum siap. Coba reload halaman.');
                }
            });
        }
        document.querySelectorAll('button[onclick*="openWalkinKtpCamera"]').forEach(function(btn) {
            btn.removeAttribute('onclick');
            btn.addEventListener('click', function() {
                if (typeof openWalkinKtpCamera === 'function') {
                    openWalkinKtpCamera('new_walkin_guest_ktp_file');
                } else if (typeof window.openWalkinKtpCamera === 'function') {
                    window.openWalkinKtpCamera('new_walkin_guest_ktp_file');
                } else {
                    alert('Fungsi kamera belum siap. Coba reload halaman.');
                }
            });
        });
        if (typeof window.openWalkinKtpCamera !== 'function') {
            window.openWalkinKtpCamera = function(targetInputId) {
                var modalEl = document.getElementById('cameraCaptureModalWalkin');
                var videoEl = document.getElementById('cameraVideoWalkin');
                var canvasEl = document.getElementById('cameraCanvasWalkin');
                var captureBtn = document.getElementById('cameraCaptureBtnWalkin');
                var retakeBtn = document.getElementById('cameraRetakeBtnWalkin');
                var useBtn = document.getElementById('cameraUseBtnWalkin');
                canvasEl.style.display = 'none';
                videoEl.style.display = 'block';
                retakeBtn.style.display = 'none';
                useBtn.style.display = 'none';
                window.__cameraBlobW = null;
                var bsModal = new bootstrap.Modal(modalEl);
                bsModal.show();
                if (!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) {
                    alert('Perangkat tidak mendukung kamera atau akses ditolak.');
                    return;
                }
                navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
                .then(function(stream) {
                    window.__cameraStreamW = stream;
                    videoEl.srcObject = stream;
                    videoEl.play();
                })
                .catch(function() {
                    alert('Tidak bisa membuka kamera. Periksa izin browser.');
                });
                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.__cameraBlobW = 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.__cameraBlobW = null;
                    canvasEl.style.display = 'none';
                    videoEl.style.display = 'block';
                    retakeBtn.style.display = 'none';
                    useBtn.style.display = 'none';
                };
                useBtn.onclick = function() {
                    if (!window.__cameraBlobW) return;
                    var file = new File([window.__cameraBlobW], '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.__cameraStreamW) {
                        window.__cameraStreamW.getTracks().forEach(function(t) { t.stop(); });
                        window.__cameraStreamW = null;
                    }
                    bsModal.hide();
                };
                modalEl.addEventListener('hidden.bs.modal', function handler() {
                    modalEl.removeEventListener('hidden.bs.modal', handler);
                    if (window.__cameraStreamW) {
                        window.__cameraStreamW.getTracks().forEach(function(t) { t.stop(); });
                        window.__cameraStreamW = null;
                    }
                    videoEl.srcObject = null;
                    window.__cameraBlobW = null;
                    canvasEl.style.display = 'none';
                    videoEl.style.display = 'block';
                    retakeBtn.style.display = 'none';
                    useBtn.style.display = 'none';
                });
            };
        }
    });
    let WALKIN_DETAIL_BOOKING_ID = null;
    let WALKIN_SERVICES_TOTAL = 0;
    window.WALKIN_DAMAGE_TOTAL = 0;
    function openWalkinDetail(bookingId) {
        WALKIN_DETAIL_BOOKING_ID = bookingId;
        const url = `${window.APP_BASE_URL}/api/bookings/${bookingId}`;
        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
            .then(({ ok, data }) => {
                if (!ok || !data.success || !data.data) {
                    showNotification(data.message || 'Gagal memuat detail booking', 'error');
                    return;
                }
                const b = data.data;
                WALKIN_CURRENT_BOOKING = b;
                window.WALKIN_CURRENT_STATUS = b.status;
                const g = b.guest || {};
                const r = b.room || {};
                const detailCodeRow = document.getElementById('detail-walkin-booking-code-row');
                if (detailCodeRow) {
                    if (String(b.booking_source || '').toLowerCase() === 'walkin') {
                        detailCodeRow.style.display = 'none';
                    } else {
                        detailCodeRow.style.display = '';
                        document.getElementById('detail-walkin-booking-code').textContent = b.booking_code || '-';
                    }
                }
                document.getElementById('detail-walkin-guest-name').textContent = b.guest_name || g.name || '-';
                document.getElementById('detail-walkin-guest-email').textContent = g.email || b.guest_email || '-';
                document.getElementById('detail-walkin-guest-phone').textContent = g.phone || b.guest_phone || '-';
                (function(){
                    const ktpEl = document.getElementById('detail-walkin-guest-ktp');
                    const path = g.ktp_path || '';
                    if (ktpEl) {
                        if (path) {
                            const base = (window.APP_BASE_URL || '').replace(/\/+$/,'');
                            const gid = g.id;
                            const href = gid ? `${base}/admin/guests/${gid}/ktp` : '';
                            const isPdf = String(path).toLowerCase().endsWith('.pdf');
                            ktpEl.innerHTML = href ? (`<a href="${href}" target="_blank">Lihat KTP</a>` + (isPdf ? '' : `<br><img src="${href}" alt="KTP" style="max-width: 100%; height: auto; border: 1px solid #eee; border-radius: 6px;">`)) : '-';
                        } else {
                            ktpEl.textContent = '-';
                        }
                    }
                })();
                document.getElementById('detail-walkin-room-number').textContent = r.room_number || '-';
                document.getElementById('detail-walkin-room-type').textContent = r.type || '-';
                document.getElementById('detail-walkin-check-in').textContent = getActualCheckInDateOnly(b);
                document.getElementById('detail-walkin-check-out').textContent = formatDateOnly(b.check_out_date);
                const statusEl = document.getElementById('detail-walkin-status');
                statusEl.textContent = isExtendedReopen(b)
                    ? ((b.status || '').replace('_', ' ') + ' (extended)')
                    : (b.status || '').replace('_', ' ');
                statusEl.className = 'badge ' + (b.status === 'checked_in' ? 'bg-primary' : b.status === 'checked_out' ? 'bg-success' : 'bg-secondary');
                const moveBtn = document.getElementById('walkinMoveRoomBtn');
                if (moveBtn) moveBtn.style.display = (b.status === 'checked_in') ? '' : 'none';
                const moveFooterBtn = document.getElementById('walkinMoveRoomFooterBtn');
                if (moveFooterBtn) moveFooterBtn.style.display = (b.status === 'checked_in') ? '' : 'none';
                const adjustBtn = document.getElementById('walkinAdjustDatesBtn');
                if (adjustBtn) adjustBtn.style.display = ['pending', 'confirmed', 'checked_in'].includes(String(b.status || '')) ? '' : 'none';
                const adjustFooterBtn = document.getElementById('walkinAdjustDatesFooterBtn');
                if (adjustFooterBtn) adjustFooterBtn.style.display = ['pending', 'confirmed', 'checked_in'].includes(String(b.status || '')) ? '' : 'none';
                const checkoutBtn = document.getElementById('walkinCheckoutBtn');
                if (checkoutBtn) checkoutBtn.style.display = (b.status === 'checked_in') ? '' : 'none';
                const formSec = document.getElementById('walkin-service-form');
                if (formSec) { formSec.style.display = (b.status === 'checked_in') ? '' : 'none'; }
                const damageFormSec = document.getElementById('walkin-damage-form');
                if (damageFormSec) { damageFormSec.style.display = (b.status === 'checked_in') ? '' : 'none'; }
                const extraBedFormSec = document.getElementById('walkin-extrabed-form');
                if (extraBedFormSec) { extraBedFormSec.style.display = (b.status === 'checked_in') ? '' : 'none'; }
                try {
                    const plannedNights = Math.max(1, Math.ceil((parseDateLocal(b.check_out_date) - parseDateLocal(b.check_in_date)) / (1000 * 60 * 60 * 24)));
                    const baselineNights = (b.invoice && b.invoice.nights) ? parseInt(b.invoice.nights) : plannedNights;
                    const checkInDate = parseDateLocal(b.check_in_date);
                    const checkoutCutoffDate = (b.status === 'checked_out')
                        ? (parseDateLocal(b.actual_check_out_time || b.check_out_date) || parseDateLocal(b.check_out_date))
                        : new Date();
                    const actualNights = Math.max(1, Math.ceil((checkoutCutoffDate - checkInDate) / (1000 * 60 * 60 * 24)));
                    const extraByPlanned = Math.max(0, plannedNights - baselineNights);
                    const extraByActual = Math.max(0, actualNights - baselineNights);
                    const extraNights = Math.max(extraByPlanned, extraByActual);
                    const autoExtendChargeEnabled = {{ \App\Models\Settings::get('auto_extend_charge_enabled', true) ? 'true' : 'false' }};
                    const chargeableExtraNights = autoExtendChargeEnabled ? extraNights : 0;
                    const roomRate = parseInt(b.base_price || (r && r.price_per_night) || 0) || 0;
                    const baselineSubtotal = Math.max(0, baselineNights * roomRate);
                    const extendSubtotal = Math.max(0, chargeableExtraNights * roomRate);
                    WALKIN_BASELINE_NIGHTS = baselineNights;
                    WALKIN_STAY_NIGHTS = plannedNights;
                    WALKIN_ROOM_RATE = roomRate;
                    WALKIN_EXTRA_NIGHTS = chargeableExtraNights;
                    WALKIN_BASELINE_SUBTOTAL = baselineSubtotal;
                    WALKIN_EXTEND_COST = extendSubtotal;
                    const blNEl = document.getElementById('walkin-baseline-nights');
                    const rrEl = document.getElementById('walkin-room-rate');
                    const blSEl = document.getElementById('walkin-baseline-subtotal');
                    const exNEl = document.getElementById('walkin-extra-nights');
                    const exREl = document.getElementById('walkin-extend-rate');
                    const exSEl = document.getElementById('walkin-extend-subtotal');
                    if (blNEl) blNEl.textContent = baselineNights;
                    if (rrEl) rrEl.textContent = roomRate.toLocaleString('id-ID');
                    if (blSEl) blSEl.textContent = baselineSubtotal.toLocaleString('id-ID');
                    if (exNEl) exNEl.textContent = chargeableExtraNights;
                    if (exREl) exREl.textContent = roomRate.toLocaleString('id-ID');
                    if (exSEl) exSEl.textContent = extendSubtotal.toLocaleString('id-ID');
                    updateWalkinTotals();
                } catch(e) {}
                renderWalkinRoomTransfers(b.room_transfers || []);
                renderWalkinDateAdjustments(b.date_adjustments || []);
                loadWalkinRoomServices(bookingId);
                loadWalkinDamageCharges(bookingId);
                loadWalkinExtraBedSettings();
                try {
                    const initialChannelEl = document.getElementById('walkin_payment_channel_id');
                    const checkoutChannelEl = document.getElementById('walkin_checkout_payment_channel_id');
                    if (initialChannelEl && checkoutChannelEl && initialChannelEl.value) {
                        checkoutChannelEl.value = initialChannelEl.value;
                    }
                } catch(e) {}
                const modal = new bootstrap.Modal(document.getElementById('walkinDetailModal'));
                modal.show();
            })
            .catch(() => showNotification('Terjadi kesalahan saat memuat detail booking', 'error'));
    }
    function renderWalkinRoomTransfers(transfers) {
        const sec = document.getElementById('walkin-room-transfer-section');
        const list = document.getElementById('walkin-room-transfer-list');
        if (!sec || !list) return;
        if (!Array.isArray(transfers) || transfers.length === 0) {
            sec.style.display = 'none';
            list.innerHTML = '';
            return;
        }
        list.innerHTML = transfers.map(function(transfer) {
            const movedAt = transfer.transferred_at ? new Date(transfer.transferred_at) : null;
            const movedAtText = movedAt && !isNaN(movedAt)
                ? movedAt.toLocaleString('id-ID', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })
                : '-';
            const byName = transfer.transferred_by?.name || '-';
            const reason = String(transfer.reason || '').trim();
            return `
                <div class="border rounded p-2 mb-2 bg-light">
                    <div class="fw-semibold">${transfer.old_room_number || '-'} <i class="fas fa-arrow-right mx-1 text-muted"></i> ${transfer.new_room_number || '-'}</div>
                    <div class="small text-muted">Dipindahkan: ${movedAtText} oleh ${byName}</div>
                    <div class="small">${reason !== '' ? reason : '<span class="text-muted">Tanpa alasan</span>'}</div>
                </div>
            `;
        }).join('');
        sec.style.display = 'block';
    }
    function renderWalkinDateAdjustments(adjustments) {
        const sec = document.getElementById('walkin-date-adjustment-section');
        const list = document.getElementById('walkin-date-adjustment-list');
        if (!sec || !list) return;
        if (!Array.isArray(adjustments) || adjustments.length === 0) {
            sec.style.display = 'none';
            list.innerHTML = '';
            return;
        }
        list.innerHTML = adjustments.map(function(adj) {
            const adjustedAt = adj.adjusted_at ? new Date(adj.adjusted_at) : null;
            const adjustedAtText = adjustedAt && !isNaN(adjustedAt)
                ? adjustedAt.toLocaleString('id-ID', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })
                : '-';
            const byName = adj.adjusted_by?.name || '-';
            const reason = String(adj.reason || '').trim();
            return `
                <div class="border rounded p-2 mb-2 bg-light">
                    <div class="fw-semibold">${formatDateOnly(adj.old_check_in_date)} - ${formatDateOnly(adj.old_check_out_date)} <i class="fas fa-arrow-right mx-1 text-muted"></i> ${formatDateOnly(adj.new_check_in_date)} - ${formatDateOnly(adj.new_check_out_date)}</div>
                    <div class="small text-muted">Dikoreksi: ${adjustedAtText} oleh ${byName}</div>
                    <div class="small">Total: ${formatWalkinRupiah(adj.old_total_price || 0)} -> ${formatWalkinRupiah(adj.new_total_price || 0)}</div>
                    <div class="small">${reason !== '' ? reason : '<span class="text-muted">Tanpa alasan</span>'}</div>
                </div>
            `;
        }).join('');
        sec.style.display = 'block';
    }
    function getWalkinTransferStartDate() {
        const today = new Date();
        return formatLocalYMD(today);
    }
    function getWalkinRemainingNights() {
        if (!WALKIN_CURRENT_BOOKING?.check_out_date) return 0;
        const start = parseDateLocal(getWalkinTransferStartDate());
        const end = parseDateLocal(WALKIN_CURRENT_BOOKING.check_out_date);
        const diff = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
        return Math.max(0, diff);
    }
    function updateWalkinMoveRoomPreview() {
        const preview = document.getElementById('walkin_move_adjustment_preview');
        const oldRateEl = document.getElementById('walkin_move_old_rate');
        const newRateEl = document.getElementById('walkin_move_new_rate');
        const nightsEl = document.getElementById('walkin_move_remaining_nights');
        const diffEl = document.getElementById('walkin_move_diff_per_night');
        const totalEl = document.getElementById('walkin_move_adjustment_total');
        const noteEl = document.getElementById('walkin_move_adjustment_note');
        const roomEl = document.getElementById('walkin_move_new_room_id');
        const toggleEl = document.getElementById('walkin_move_adjust_price');
        if (!preview || !oldRateEl || !newRateEl || !nightsEl || !diffEl || !totalEl || !noteEl || !roomEl || !toggleEl || !WALKIN_CURRENT_BOOKING) return;

        const oldRate = Number(WALKIN_CURRENT_BOOKING.room?.price_per_night || 0);
        const selected = roomEl.options[roomEl.selectedIndex];
        const newRate = Number(selected?.dataset?.price || 0);
        const remainingNights = getWalkinRemainingNights();
        oldRateEl.textContent = formatWalkinRupiah(oldRate);
        nightsEl.textContent = String(remainingNights);
        if (!selected || !roomEl.value || remainingNights <= 0) {
            preview.style.display = 'none';
            return;
        }
        const diff = newRate - oldRate;
        const total = diff * remainingNights;
        newRateEl.textContent = formatWalkinRupiah(newRate);
        diffEl.textContent = formatWalkinRupiah(diff);
        totalEl.textContent = formatWalkinRupiah(total);
        if (!toggleEl.checked) {
            noteEl.textContent = 'Penyesuaian tarif dinonaktifkan. Sistem hanya memindahkan kamar.';
            noteEl.className = 'small text-muted';
        } else if (Math.abs(total) < 0.00001) {
            noteEl.textContent = 'Tidak ada selisih tarif karena harga kamar sama.';
            noteEl.className = 'small text-muted';
        } else if (total > 0) {
            noteEl.textContent = 'Sistem akan menambahkan charge penyesuaian tarif untuk sisa malam.';
            noteEl.className = 'small text-danger';
        } else {
            noteEl.textContent = 'Sistem akan menambahkan pengurang tagihan untuk sisa malam.';
            noteEl.className = 'small text-success';
        }
        preview.style.display = 'block';
    }
    function openWalkinMoveRoomModal() {
        if (!WALKIN_CURRENT_BOOKING || !WALKIN_DETAIL_BOOKING_ID) {
            showNotification('Detail booking belum dimuat', 'error');
            return;
        }
        if (window.WALKIN_CURRENT_STATUS !== 'checked_in') {
            showNotification('Hanya booking check-in yang dapat pindah kamar', 'error');
            return;
        }
        const roomInfoEl = document.getElementById('walkin_move_current_room');
        const periodEl = document.getElementById('walkin_move_stay_period');
        const roomSelectEl = document.getElementById('walkin_move_new_room_id');
        const reasonEl = document.getElementById('walkin_move_reason');
        const toggleEl = document.getElementById('walkin_move_adjust_price');
        if (roomInfoEl) {
            const r = WALKIN_CURRENT_BOOKING.room || {};
            roomInfoEl.textContent = `Kamar ${r.room_number || '-'} - ${r.type || '-'} - ${formatWalkinRupiah(r.price_per_night || 0)}/malam`;
        }
        if (periodEl) {
            periodEl.textContent = `${formatDateOnly(WALKIN_CURRENT_BOOKING.check_in_date)} s/d ${formatDateOnly(WALKIN_CURRENT_BOOKING.check_out_date)}`;
        }
        if (roomSelectEl) {
            roomSelectEl.innerHTML = '<option value="">Memuat kamar tersedia...</option>';
            roomSelectEl.onchange = updateWalkinMoveRoomPreview;
        }
        if (reasonEl) reasonEl.value = '';
        if (toggleEl) {
            toggleEl.checked = true;
            toggleEl.onchange = updateWalkinMoveRoomPreview;
        }
        updateWalkinMoveRoomPreview();
        const detailModal = bootstrap.Modal.getInstance(document.getElementById('walkinDetailModal'));
        if (detailModal) detailModal.hide();
        const modal = new bootstrap.Modal(document.getElementById('walkinMoveRoomModal'));
        modal.show();
        loadWalkinMoveRoomOptions();
    }
    function loadWalkinMoveRoomOptions() {
        const roomSelectEl = document.getElementById('walkin_move_new_room_id');
        if (!roomSelectEl || !WALKIN_CURRENT_BOOKING) return;
        const transferStartDate = getWalkinTransferStartDate();
        const transferStart = parseDateLocal(transferStartDate);
        const transferEnd = parseDateLocal(WALKIN_CURRENT_BOOKING.check_out_date);
        if (!transferStart || !transferEnd || transferEnd <= transferStart) {
            roomSelectEl.innerHTML = '<option value="">Tidak ada sisa masa inap untuk pindah kamar</option>';
            updateWalkinMoveRoomPreview();
            return;
        }
        const payload = {
            check_in_date: transferStartDate,
            check_out_date: WALKIN_CURRENT_BOOKING.check_out_date
        };
        const capacity = Number(WALKIN_CURRENT_BOOKING.guests || WALKIN_CURRENT_BOOKING.guest_count || 0);
        if (capacity > 0) {
            payload.capacity = capacity;
        }
        fetch(`${window.APP_BASE_URL}/api/rooms/available`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify(payload)
        })
            .then(async r => { const j = await r.json(); return { ok: r.ok, status: r.status, data: j }; })
            .then(({ ok, status, data }) => {
                if (!ok || !data.success || !Array.isArray(data.data)) {
                    if (status === 422 && data.errors) {
                        console.error('Walk-in move room available validation failed:', data.errors, payload);
                    }
                    roomSelectEl.innerHTML = '<option value="">Gagal memuat kamar tujuan</option>';
                    return;
                }
                const currentRoomId = Number(WALKIN_CURRENT_BOOKING.room_id || 0);
                const rooms = data.data.filter(room => Number(room.id) !== currentRoomId);
                if (rooms.length === 0) {
                    roomSelectEl.innerHTML = '<option value="">Tidak ada kamar tersedia untuk sisa masa inap</option>';
                    return;
                }
                roomSelectEl.innerHTML = '<option value="">Pilih kamar tujuan</option>' + rooms.map(room => {
                    return `<option value="${room.id}" data-price="${room.price_per_night || 0}">Kamar ${room.room_number} - ${room.type || ''} - Rp ${Number(room.price_per_night || 0).toLocaleString('id-ID')}/malam</option>`;
                }).join('');
                updateWalkinMoveRoomPreview();
            })
            .catch(() => {
                roomSelectEl.innerHTML = '<option value="">Terjadi kesalahan saat memuat kamar tujuan</option>';
                updateWalkinMoveRoomPreview();
            });
    }
    function backToWalkinDetailFromMoveRoom() {
        const modal = bootstrap.Modal.getInstance(document.getElementById('walkinMoveRoomModal'));
        if (modal) modal.hide();
        if (WALKIN_DETAIL_BOOKING_ID) {
            setTimeout(() => openWalkinDetail(WALKIN_DETAIL_BOOKING_ID), 200);
        }
    }
    function submitWalkinMoveRoom() {
        if (!WALKIN_DETAIL_BOOKING_ID) { showNotification('Booking ID tidak ditemukan', 'error'); return; }
        const roomId = document.getElementById('walkin_move_new_room_id')?.value;
        const reason = document.getElementById('walkin_move_reason')?.value || '';
        const adjustPrice = !!document.getElementById('walkin_move_adjust_price')?.checked;
        if (!roomId) { showNotification('Pilih kamar tujuan terlebih dahulu', 'warning'); return; }
        showNotification('Memindahkan kamar...', 'info');
        fetch(`${window.APP_BASE_URL}/api/bookings/${WALKIN_DETAIL_BOOKING_ID}/move-room`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ new_room_id: Number(roomId), reason, adjust_price: adjustPrice })
        })
            .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
            .then(({ ok, data }) => {
                if (!ok || !data.success) {
                    let message = data.message || 'Gagal memindahkan kamar';
                    if (data.errors) message += ': ' + Object.values(data.errors).flat().join(', ');
                    showNotification(message, 'error');
                    return;
                }
                const modal = bootstrap.Modal.getInstance(document.getElementById('walkinMoveRoomModal'));
                if (modal) modal.hide();
                if (data.meta?.adjustment_created) {
                    showNotification(`Kamar berhasil dipindahkan. Penyesuaian tarif: ${formatWalkinRupiah(data.meta.adjustment_total || 0)}`, 'success');
                } else {
                    showNotification('Kamar berhasil dipindahkan', 'success');
                }
                setTimeout(() => location.reload(), 800);
            })
            .catch(() => showNotification('Terjadi kesalahan saat memindahkan kamar', 'error'));
    }
    function updateWalkinAdjustDatesPreview() {
        const preview = document.getElementById('walkin_adjust_dates_preview');
        const oldRangeEl = document.getElementById('walkin_adjust_old_range');
        const newRangeEl = document.getElementById('walkin_adjust_new_range');
        const oldTotalEl = document.getElementById('walkin_adjust_old_total');
        const newTotalEl = document.getElementById('walkin_adjust_new_total');
        const rateEl = document.getElementById('walkin_adjust_effective_rate');
        const noteEl = document.getElementById('walkin_adjust_preview_note');
        const inEl = document.getElementById('walkin_adjust_check_in_date');
        const outEl = document.getElementById('walkin_adjust_check_out_date');
        if (!preview || !oldRangeEl || !newRangeEl || !oldTotalEl || !newTotalEl || !rateEl || !noteEl || !inEl || !outEl || !WALKIN_CURRENT_BOOKING) return;
        oldRangeEl.textContent = `${formatDateOnly(WALKIN_CURRENT_BOOKING.check_in_date)} s/d ${formatDateOnly(WALKIN_CURRENT_BOOKING.check_out_date)}`;
        oldTotalEl.textContent = formatWalkinRupiah(WALKIN_CURRENT_BOOKING.total_price || 0);
        const newIn = inEl.value;
        const newOut = outEl.value;
        if (!newIn || !newOut) {
            preview.style.display = 'none';
            return;
        }
        const oldNights = Math.max(1, Math.ceil((parseDateLocal(WALKIN_CURRENT_BOOKING.check_out_date) - parseDateLocal(WALKIN_CURRENT_BOOKING.check_in_date)) / (1000 * 60 * 60 * 24)));
        const effectiveRate = Number(WALKIN_CURRENT_BOOKING.total_price || 0) > 0
            ? (Number(WALKIN_CURRENT_BOOKING.total_price || 0) / oldNights)
            : Number(WALKIN_CURRENT_BOOKING.base_price || WALKIN_CURRENT_BOOKING.room?.price_per_night || 0);
        const newNights = Math.ceil((parseDateLocal(newOut) - parseDateLocal(newIn)) / (1000 * 60 * 60 * 24));
        if (newNights <= 0) {
            preview.style.display = 'none';
            return;
        }
        const newTotal = Math.max(0, effectiveRate * newNights);
        newRangeEl.textContent = `${newIn} s/d ${newOut}`;
        rateEl.textContent = formatWalkinRupiah(effectiveRate);
        newTotalEl.textContent = formatWalkinRupiah(newTotal);
        const currentTotal = Number(WALKIN_CURRENT_BOOKING.total_price || 0);
        if (newTotal > currentTotal) {
            noteEl.textContent = 'Estimasi total naik karena durasi menginap lebih panjang.';
            noteEl.className = 'small text-danger';
        } else if (newTotal < currentTotal) {
            noteEl.textContent = 'Estimasi total turun karena durasi menginap lebih pendek.';
            noteEl.className = 'small text-success';
        } else {
            noteEl.textContent = 'Estimasi total tetap.';
            noteEl.className = 'small text-muted';
        }
        preview.style.display = 'block';
    }
    function openWalkinAdjustDatesModal() {
        if (!WALKIN_CURRENT_BOOKING || !WALKIN_DETAIL_BOOKING_ID) {
            showNotification('Detail booking belum dimuat', 'error');
            return;
        }
        if (['checked_out', 'cancelled', 'completed'].includes(String(window.WALKIN_CURRENT_STATUS || ''))) {
            showNotification('Status booking ini tidak bisa dikoreksi tanggalnya', 'error');
            return;
        }
        const roomInfoEl = document.getElementById('walkin_adjust_room_info');
        const inEl = document.getElementById('walkin_adjust_check_in_date');
        const outEl = document.getElementById('walkin_adjust_check_out_date');
        const reasonEl = document.getElementById('walkin_adjust_reason');
        if (roomInfoEl) {
            const r = WALKIN_CURRENT_BOOKING.room || {};
            roomInfoEl.textContent = `Kamar ${r.room_number || '-'} - ${r.type || '-'}`;
        }
        if (inEl) {
            inEl.value = formatDateOnly(WALKIN_CURRENT_BOOKING.check_in_date);
            inEl.onchange = updateWalkinAdjustDatesPreview;
        }
        if (outEl) {
            outEl.value = formatDateOnly(WALKIN_CURRENT_BOOKING.check_out_date);
            outEl.onchange = updateWalkinAdjustDatesPreview;
        }
        if (reasonEl) reasonEl.value = '';
        if (String(window.WALKIN_CURRENT_STATUS || '') !== 'checked_in') {
            const today = formatLocalYMD(new Date());
            if (inEl) inEl.min = today;
            if (outEl) outEl.min = today;
        } else {
            if (inEl) inEl.removeAttribute('min');
            if (outEl) {
                const tomorrow = new Date();
                tomorrow.setDate(tomorrow.getDate() + 1);
                outEl.min = formatLocalYMD(tomorrow);
            }
        }
        updateWalkinAdjustDatesPreview();
        const detailModal = bootstrap.Modal.getInstance(document.getElementById('walkinDetailModal'));
        if (detailModal) detailModal.hide();
        const modal = new bootstrap.Modal(document.getElementById('walkinAdjustDatesModal'));
        modal.show();
    }
    function backToWalkinDetailFromAdjustDates() {
        const modal = bootstrap.Modal.getInstance(document.getElementById('walkinAdjustDatesModal'));
        if (modal) modal.hide();
        if (WALKIN_DETAIL_BOOKING_ID) {
            setTimeout(() => openWalkinDetail(WALKIN_DETAIL_BOOKING_ID), 200);
        }
    }
    function submitWalkinAdjustDates() {
        if (!WALKIN_DETAIL_BOOKING_ID) { showNotification('Booking ID tidak ditemukan', 'error'); return; }
        const checkInDate = document.getElementById('walkin_adjust_check_in_date')?.value;
        const checkOutDate = document.getElementById('walkin_adjust_check_out_date')?.value;
        const reason = document.getElementById('walkin_adjust_reason')?.value || '';
        if (!checkInDate || !checkOutDate) {
            showNotification('Tanggal check-in dan check-out wajib diisi', 'warning');
            return;
        }
        showNotification('Menyimpan koreksi tanggal...', 'info');
        fetch(`${window.APP_BASE_URL}/api/bookings/${WALKIN_DETAIL_BOOKING_ID}/adjust-dates`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ check_in_date: checkInDate, check_out_date: checkOutDate, reason })
        })
            .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
            .then(({ ok, data }) => {
                if (!ok || !data.success) {
                    let message = data.message || 'Gagal mengoreksi tanggal booking';
                    if (data.errors) message += ': ' + Object.values(data.errors).flat().join(', ');
                    showNotification(message, 'error');
                    return;
                }
                const modal = bootstrap.Modal.getInstance(document.getElementById('walkinAdjustDatesModal'));
                if (modal) modal.hide();
                const oldTotal = Number(data.meta?.old_total_price || 0);
                const newTotal = Number(data.meta?.new_total_price || 0);
                if (Math.abs(newTotal - oldTotal) > 0.00001) {
                    showNotification(`Tanggal booking berhasil dikoreksi. Estimasi room total: ${formatWalkinRupiah(newTotal)}`, 'success');
                } else {
                    showNotification('Tanggal booking berhasil dikoreksi', 'success');
                }
                setTimeout(() => location.reload(), 800);
            })
            .catch(() => showNotification('Terjadi kesalahan saat mengoreksi tanggal booking', 'error'));
    }
    window.openWalkinMoveRoomModal = openWalkinMoveRoomModal;
    window.backToWalkinDetailFromMoveRoom = backToWalkinDetailFromMoveRoom;
    window.submitWalkinMoveRoom = submitWalkinMoveRoom;
    window.openWalkinAdjustDatesModal = openWalkinAdjustDatesModal;
    window.backToWalkinDetailFromAdjustDates = backToWalkinDetailFromAdjustDates;
    window.submitWalkinAdjustDates = submitWalkinAdjustDates;
    function loadWalkinRoomServices(bookingId) {
        const sec = document.getElementById('walkin-services-section');
        const list = document.getElementById('walkin-services-list');
        const totalEl = document.getElementById('walkin-services-total');
        const totalSummaryEl = document.getElementById('walkin-services-total-summary');
        if (sec && list && totalEl) {
            sec.style.display = 'block';
            list.innerHTML = '<p class="text-muted mb-2">Belum ada layanan kamar.</p>';
            totalEl.textContent = 'Rp 0';
        }
        fetch(`${window.APP_BASE_URL}/api/room-services/${bookingId}`, { headers: { 'Accept': 'application/json' } })
            .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
            .then(({ ok, data }) => {
                if (!ok || !data.success) { WALKIN_SERVICES_TOTAL = 0; return; }
                const services = (data.data || []).filter(function(s){ return !String(s.service_name || '').startsWith('[DAMAGE] '); });
                if (services.length === 0) { WALKIN_SERVICES_TOTAL = 0; return; }
                let html = '';
                let total = 0;
                services.forEach(s => {
                    const subtotal = (parseInt(s.quantity) || 1) * (parseInt(s.unit_price) || 0);
                    total += subtotal;
                    html += `
                        <div class="d-flex justify-content-between border rounded p-2 mb-2">
                            <div>
                                <div class="fw-semibold">${s.service_name}</div>
                                <small class="text-muted">Jumlah: ${s.quantity} × Rp ${parseInt(s.unit_price).toLocaleString('id-ID')}</small>
                            </div>
                            <div class="text-end">
                                <strong>Rp ${subtotal.toLocaleString('id-ID')}</strong>
                                ${window.WALKIN_CURRENT_STATUS === 'checked_in' ? `
                                    <br>
                                    <button type="button" class="btn btn-sm btn-outline-danger mt-1" onclick="removeWalkinRoomService(${s.id})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                ` : ``}
                            </div>
                        </div>
                    `;
                });
                WALKIN_SERVICES_TOTAL = total;
                const sec = document.getElementById('walkin-services-section');
                const list = document.getElementById('walkin-services-list');
                const totalEl = document.getElementById('walkin-services-total');
                if (sec && list && totalEl) {
                    list.innerHTML = services.length > 0 ? html : '<p class="text-muted mb-2">Belum ada layanan kamar.</p>';
                    totalEl.textContent = 'Rp ' + total.toLocaleString('id-ID');
                    sec.style.display = 'block';
                }
                if (totalSummaryEl) totalSummaryEl.textContent = 'Rp ' + total.toLocaleString('id-ID');
                updateWalkinTotals();
            })
            .catch(() => { WALKIN_SERVICES_TOTAL = 0; });
    }
    function loadWalkinDamageCharges(bookingId) {
        const sec = document.getElementById('walkin-damage-section');
        const list = document.getElementById('walkin-damage-list');
        const totalEl = document.getElementById('walkin-damage-total');
        const totalSummaryEl = document.getElementById('walkin-damage-total-summary');
        if (sec && list && totalEl) {
            sec.style.display = 'block';
            list.innerHTML = '<p class="text-muted mb-2">Belum ada charge kerusakan.</p>';
            totalEl.textContent = 'Rp 0';
        }
        fetch(`${window.APP_BASE_URL}/api/room-services/${bookingId}`, { headers: { 'Accept': 'application/json' } })
            .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
            .then(({ ok, data }) => {
                if (!ok || !data.success) { window.WALKIN_DAMAGE_TOTAL = 0; return; }
                const items = (data.data || []).filter(function(s){
                    const nm = String(s.service_name || '');
                    return nm.toLowerCase().includes('charge');
                });
                if (items.length === 0) { window.WALKIN_DAMAGE_TOTAL = 0; return; }
                let html = '';
                let total = 0;
                items.forEach(s => {
                    const subtotal = (parseInt(s.quantity) || 1) * (parseInt(s.unit_price) || 0);
                    total += subtotal;
                    html += `
                        <div class="d-flex justify-content-between border rounded p-2 mb-2">
                            <div>
                                <div class="fw-semibold">${s.service_name}</div>
                                <small class="text-muted">Jumlah: ${s.quantity} × Rp ${parseInt(s.unit_price).toLocaleString('id-ID')}</small>
                            </div>
                            <div class="text-end">
                                <strong>Rp ${subtotal.toLocaleString('id-ID')}</strong>
                                ${window.WALKIN_CURRENT_STATUS === 'checked_in' ? `
                                    <br>
                                    <button type="button" class="btn btn-sm btn-outline-danger mt-1" onclick="removeWalkinDamageCharge(${s.id})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                ` : ``}
                            </div>
                        </div>
                    `;
                });
                window.WALKIN_DAMAGE_TOTAL = total;
                const sec = document.getElementById('walkin-damage-section');
                const list = document.getElementById('walkin-damage-list');
                const totalEl = document.getElementById('walkin-damage-total');
                if (sec && list && totalEl) {
                    list.innerHTML = items.length > 0 ? html : '<p class="text-muted mb-2">Belum ada charge kerusakan.</p>';
                    totalEl.textContent = 'Rp ' + total.toLocaleString('id-ID');
                    sec.style.display = 'block';
                }
                if (totalSummaryEl) totalSummaryEl.textContent = 'Rp ' + total.toLocaleString('id-ID');
                updateWalkinTotals();
            })
            .catch(() => { window.WALKIN_DAMAGE_TOTAL = 0; });
    }
    function updateWalkinTotals() {
        const discountEl = document.getElementById('walkin_checkout_discount_percent');
        const extendTotalEl = document.getElementById('walkin-extend-total');
        const discountTotalEl = document.getElementById('walkin-discount-total');
        const grandTotalEl = document.getElementById('walkin-grand-total');
        const servicesTotalSummaryEl = document.getElementById('walkin-services-total-summary');
        const damageTotalSummaryEl = document.getElementById('walkin-damage-total-summary');
        const totalIncludeEl = document.getElementById('walkin-total-include');
        const dppEl = document.getElementById('walkin-dpp');
        const taxEl = document.getElementById('walkin-tax');
        const pct = Math.min(100, Math.max(0, parseFloat(discountEl?.value || '0') || 0));
        const servicesBase = Math.max(0, WALKIN_SERVICES_TOTAL || 0);
        const damageBase = Math.max(0, window.WALKIN_DAMAGE_TOTAL || 0);
        const extendBase = Math.max(0, WALKIN_EXTEND_COST || 0);
        const discountAmount = Math.floor((servicesBase * pct) / 100);
        const baseTotal = Math.max(0, servicesBase + damageBase + extendBase);
        const grandTotal = Math.max(0, baseTotal - discountAmount);
        if (extendTotalEl) extendTotalEl.textContent = 'Rp ' + extendBase.toLocaleString('id-ID');
        if (discountTotalEl) discountTotalEl.textContent = 'Rp ' + discountAmount.toLocaleString('id-ID');
        if (grandTotalEl) grandTotalEl.textContent = 'Rp ' + grandTotal.toLocaleString('id-ID');
        if (servicesTotalSummaryEl) servicesTotalSummaryEl.textContent = 'Rp ' + servicesBase.toLocaleString('id-ID');
        if (damageTotalSummaryEl) damageTotalSummaryEl.textContent = 'Rp ' + damageBase.toLocaleString('id-ID');
        if (totalIncludeEl && dppEl && taxEl) {
            const taxRate = (window.TAX_RATE !== undefined) ? parseInt(window.TAX_RATE) : {{ (int) \App\Models\Settings::get('tax_rate', 10) }};
            const rawDPP = grandTotal / (1 + (taxRate / 100));
            const baseDPP = Math.floor(rawDPP);
            const dpp = ((rawDPP - baseDPP) < 0.5) ? baseDPP : (baseDPP + 1);
            const taxIncluded = Math.max(0, grandTotal - dpp);
            totalIncludeEl.textContent = 'Rp ' + grandTotal.toLocaleString('id-ID');
            dppEl.textContent = 'Rp ' + dpp.toLocaleString('id-ID');
            taxEl.textContent = 'Rp ' + taxIncluded.toLocaleString('id-ID');
        }
    }
    function addWalkinRoomService() {
        if (!WALKIN_DETAIL_BOOKING_ID) { showNotification('Booking ID tidak ditemukan', 'error'); return; }
        const catalogEl = document.getElementById('walkin-service-catalog');
        const qtyEl = document.getElementById('walkin-service-quantity');
        const priceEl = document.getElementById('walkin-service-price');
        const notesEl = document.getElementById('walkin-service-notes');
        const name = decodeURIComponent(catalogEl?.value || '').trim();
        const qty = parseInt(qtyEl?.value || '1') || 1;
        const price = parseFloat(priceEl?.value || '0') || 0;
        const notes = (notesEl?.value || '').trim();
        if (!name || price <= 0) { showNotification('Nama layanan dan harga harus diisi dengan benar', 'error'); return; }
        fetch(`${window.APP_BASE_URL}/api/room-services`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ booking_id: WALKIN_DETAIL_BOOKING_ID, service_name: name, quantity: qty, price: price, notes })
        })
        .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
        .then(({ ok, data }) => {
            if (!ok || !data.success) { showNotification(data.message || 'Gagal menambahkan layanan', 'error'); return; }
            if (qtyEl) qtyEl.value = '1';
            if (priceEl) priceEl.value = '';
            if (notesEl) notesEl.value = '';
            loadWalkinRoomServices(WALKIN_DETAIL_BOOKING_ID);
        })
        .catch(() => showNotification('Terjadi kesalahan saat menambahkan layanan', 'error'));
    }
    function addWalkinDamageCharge() {
        if (!WALKIN_DETAIL_BOOKING_ID) { showNotification('Booking ID tidak ditemukan', 'error'); return; }
        const catalogEl = document.getElementById('walkin-damage-catalog');
        const qtyEl = document.getElementById('walkin-damage-quantity');
        const priceEl = document.getElementById('walkin-damage-price');
        const notesEl = document.getElementById('walkin-damage-notes');
        const selectedName = decodeURIComponent(catalogEl?.value || '').trim();
        let name = selectedName || 'Charge';
        if (!/charge/i.test(name)) { name = 'Charge - ' + name; }
        const qty = parseInt(qtyEl?.value || '1') || 1;
        const price = parseFloat(priceEl?.value || '0') || 0;
        const notes = (notesEl?.value || '').trim();
        if (!name || price <= 0) { showNotification('Nama kerusakan dan harga harus diisi dengan benar', 'error'); return; }
        fetch(`${window.APP_BASE_URL}/api/room-services`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ booking_id: WALKIN_DETAIL_BOOKING_ID, service_name: name, quantity: qty, price: price, notes })
        })
        .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
        .then(({ ok, data }) => {
            if (!ok || !data.success) { showNotification(data.message || 'Gagal menambahkan charge kerusakan', 'error'); return; }
            if (qtyEl) qtyEl.value = '1';
            if (priceEl) priceEl.value = '';
            if (notesEl) notesEl.value = '';
            loadWalkinDamageCharges(WALKIN_DETAIL_BOOKING_ID);
        })
        .catch(() => showNotification('Terjadi kesalahan saat menambahkan charge kerusakan', 'error'));
    }
    function addWalkinExtraBed() {
        if (!WALKIN_DETAIL_BOOKING_ID) { showNotification('Booking ID tidak ditemukan', 'error'); return; }
        const nameEl = document.getElementById('walkin-extrabed-name');
        const qtyEl = document.getElementById('walkin-extrabed-quantity');
        const priceEl = document.getElementById('walkin-extrabed-price');
        const notesEl = document.getElementById('walkin-extrabed-notes');
        const name = (nameEl?.value || 'Extra Bed').trim();
        const qty = parseInt(qtyEl?.value || '1') || 1;
        const nights = Math.max(1, parseInt(window.WALKIN_STAY_NIGHTS || 1, 10));
        const basePrice = parseFloat(window.WALKIN_EXTRA_BED_BASE_PRICE || 0) || 0;
        const computedPrice = basePrice > 0 ? (basePrice * nights) : 0;
        const price = computedPrice > 0 ? computedPrice : (parseFloat(priceEl?.value || '0') || 0);
        const notes = (notesEl?.value || '').trim();
        if (!name || price <= 0) { showNotification('Nama dan harga extra bed harus diisi', 'error'); return; }
        if (priceEl && computedPrice > 0) { priceEl.value = Math.round(computedPrice); }
        fetch(`${window.APP_BASE_URL}/api/room-services`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ booking_id: WALKIN_DETAIL_BOOKING_ID, service_name: name, quantity: qty, price: price, notes })
        })
        .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
        .then(({ ok, data }) => {
            if (!ok || !data.success) { showNotification(data.message || 'Gagal menambahkan extra bed', 'error'); return; }
            if (qtyEl) qtyEl.value = '1';
            if (notesEl) notesEl.value = '';
            loadWalkinRoomServices(WALKIN_DETAIL_BOOKING_ID);
        })
        .catch(() => showNotification('Terjadi kesalahan saat menambahkan extra bed', 'error'));
    }
    function removeWalkinRoomService(serviceId) {
        fetch(`${window.APP_BASE_URL}/api/room-services/${serviceId}`, {
            method: 'DELETE',
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken }
        })
        .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
        .then(({ ok, data }) => {
            if (!ok || !data.success) { showNotification(data.message || 'Gagal menghapus layanan', 'error'); return; }
            showNotification('Layanan kamar berhasil dihapus', 'success');
            loadWalkinRoomServices(WALKIN_DETAIL_BOOKING_ID);
        })
        .catch(() => showNotification('Terjadi kesalahan saat menghapus layanan', 'error'));
    }
    function removeWalkinDamageCharge(serviceId) {
        fetch(`${window.APP_BASE_URL}/api/room-services/${serviceId}`, {
            method: 'DELETE',
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken }
        })
        .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
        .then(({ ok, data }) => {
            if (!ok || !data.success) { showNotification(data.message || 'Gagal menghapus charge kerusakan', 'error'); return; }
            showNotification('Charge kerusakan berhasil dihapus', 'success');
            loadWalkinDamageCharges(WALKIN_DETAIL_BOOKING_ID);
        })
        .catch(() => showNotification('Terjadi kesalahan saat menghapus charge kerusakan', 'error'));
    }
    const addBtn = document.getElementById('walkinAddServiceBtn');
    if (addBtn) {
        addBtn.addEventListener('click', function() {
            if (window.WALKIN_CURRENT_STATUS !== 'checked_in') {
                showNotification('Hanya booking yang check-in yang dapat menambah layanan', 'error');
                return;
            }
            addWalkinRoomService();
        });
    }
    const addDamageBtn = document.getElementById('walkinAddDamageBtn');
    if (addDamageBtn) {
        addDamageBtn.addEventListener('click', function() {
            if (window.WALKIN_CURRENT_STATUS !== 'checked_in') {
                showNotification('Hanya booking yang check-in yang dapat menambah charge kerusakan', 'error');
                return;
            }
            addWalkinDamageCharge();
        });
    }
    const addExtraBedBtn = document.getElementById('walkinAddExtraBedBtn');
    if (addExtraBedBtn) {
        addExtraBedBtn.addEventListener('click', function() {
            if (window.WALKIN_CURRENT_STATUS !== 'checked_in') {
                showNotification('Hanya booking yang check-in yang dapat menambah extra bed', 'error');
                return;
            }
            addWalkinExtraBed();
        });
    }
    const jumpToDamageBtn = document.getElementById('walkinJumpToDamageBtn');
    if (jumpToDamageBtn) {
        jumpToDamageBtn.addEventListener('click', function() {
            const sec = document.getElementById('walkin-damage-section');
            if (sec) {
                sec.scrollIntoView({ behavior: 'smooth', block: 'start' });
                const sel = document.getElementById('walkin-damage-catalog');
                (sel)?.focus();
            }
        });
    }
    document.getElementById('walkinCheckoutBtn').addEventListener('click', function() {
        const bookingId = WALKIN_DETAIL_BOOKING_ID;
        if (!bookingId) { showNotification('Booking ID tidak ditemukan', 'error'); return; }
        const channelId = document.getElementById('walkin_checkout_payment_channel_id')?.value;
        const percentEl = document.getElementById('walkin_checkout_discount_percent');
        const pct = Math.min(100, Math.max(0, parseFloat(percentEl.value) || 0));
        const discountAmount = Math.floor((WALKIN_SERVICES_TOTAL * pct) / 100);
        const url = `${window.APP_BASE_URL}/api/bookings/${bookingId}/checkout`;
        const payload = channelId
            ? { payment_channel_id: channelId, discount_amount: discountAmount }
            : { discount_amount: discountAmount };
        const headers = { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken };
        fetch(url, { method: 'POST', headers, body: JSON.stringify(payload) })
            .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
            .then(({ ok, data }) => {
                if (!ok || !data.success) {
                    showNotification(data.message || 'Gagal melakukan check-out', 'error');
                    return;
                }
                try {
                    if (typeof Swal !== 'undefined' && Swal && typeof Swal.fire === 'function') {
                        Swal.fire({ icon: 'success', title: 'Check-out Berhasil', text: 'Tamu berhasil check-out.', timer: 1600, showConfirmButton: false });
                    } else {
                        showNotification('Check-out berhasil', 'success');
                    }
                } catch(e) {
                    showNotification('Check-out berhasil', 'success');
                }
                const modal = bootstrap.Modal.getInstance(document.getElementById('walkinDetailModal'));
                if (modal) modal.hide();
                setTimeout(() => { loadWalkinCheckinList(); }, 600);
            })
            .catch(() => showNotification('Terjadi kesalahan saat check-out', 'error'));
    });
    function setupWalkinServiceKeyboardNav() {
        const ids = ['walkin-service-catalog','walkin-service-quantity','walkin-service-price','walkin-service-notes'];
        ids.forEach((id, idx) => {
            const el = document.getElementById(id);
            if (!el) return;
            el.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    const tag = (e.target.tagName || '').toLowerCase();
                    if (tag === 'textarea') return;
                    e.preventDefault();
                    const nextId = ids[idx + 1];
                    if (nextId) {
                        const nextEl = document.getElementById(nextId);
                        if (nextEl) { nextEl.focus(); if (typeof nextEl.select === 'function') nextEl.select(); }
                    } else {
                        addWalkinRoomService();
                    }
                }
            });
        });
    }
    function setupWalkinDamageKeyboardNav() {
        const ids = ['walkin-damage-catalog','walkin-damage-quantity','walkin-damage-price','walkin-damage-notes'];
        ids.forEach((id, idx) => {
            const el = document.getElementById(id);
            if (!el) return;
            el.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    const tag = (e.target.tagName || '').toLowerCase();
                    if (tag === 'textarea') return;
                    e.preventDefault();
                    const nextId = ids[idx + 1];
                    if (nextId) {
                        const nextEl = document.getElementById(nextId);
                        if (nextEl) { nextEl.focus(); if (typeof nextEl.select === 'function') nextEl.select(); }
                    } else {
                        addWalkinDamageCharge();
                    }
                }
            });
        });
    }
    function setupWalkinExtraBedKeyboardNav() {
        const ids = ['walkin-extrabed-name','walkin-extrabed-quantity','walkin-extrabed-price','walkin-extrabed-notes'];
        ids.forEach((id, idx) => {
            const el = document.getElementById(id);
            if (!el) return;
            el.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    const tag = (e.target.tagName || '').toLowerCase();
                    if (tag === 'textarea') return;
                    e.preventDefault();
                    const nextId = ids[idx + 1];
                    if (nextId) {
                        const nextEl = document.getElementById(nextId);
                        if (nextEl) { nextEl.focus(); if (typeof nextEl.select === 'function') nextEl.select(); }
                    } else {
                        addWalkinExtraBed();
                    }
                }
            });
        });
    }
    function setupWalkinCheckoutKeyboardNav() {
        const channelEl = document.getElementById('walkin_checkout_payment_channel_id');
        const discountEl = document.getElementById('walkin_checkout_discount_percent');
        const btn = document.getElementById('walkinCheckoutBtn');
        if (channelEl) {
            channelEl.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    if (discountEl) { discountEl.focus(); if (typeof discountEl.select === 'function') discountEl.select(); }
                }
            });
        }
        if (discountEl && btn) {
            discountEl.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    btn.click();
                }
            });
            discountEl.addEventListener('input', function() {
                updateWalkinTotals();
            });
        }
    }
    function setupWalkinFormKeyboardNav() {
        const form = document.getElementById('walkinForm');
        if (!form) return;
        form.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                const target = e.target;
                const tag = (target.tagName || '').toLowerCase();
                if (tag === 'textarea') return;
                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') { next.select(); }
                } else {
                    this.requestSubmit ? this.requestSubmit() : this.dispatchEvent(new Event('submit', { cancelable: true }));
                }
            }
        });
    }
    function loadServiceCatalogForWalkin() {
        const selectEl = document.getElementById('walkin-service-catalog');
        if (!selectEl) return;
        fetch(`${window.APP_BASE_URL}/api/room-service-catalog`, {
            method: 'GET',
            headers: { 'Accept': 'application/json' }
        })
        .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
        .then(({ ok, data }) => {
            const list = ok && data && data.data ? data.data : [];
            const options = ['<option value="">Pilih dari katalog...</option>'];
            list.forEach(item => {
                const price = parseFloat(item.price || 0);
                options.push(`<option value="${encodeURIComponent(item.name)}" data-price="${price}">${item.name} - Rp ${price.toLocaleString('id-ID')}</option>`);
            });
            selectEl.innerHTML = options.join('');
        })
        .catch(() => {
            selectEl.innerHTML = '<option value="">Gagal memuat katalog</option>';
        });
        selectEl.addEventListener('change', function() {
            const val = this.value;
            if (!val) return;
            const price = parseFloat(this.options[this.selectedIndex].getAttribute('data-price') || '0') || 0;
            const priceEl = document.getElementById('walkin-service-price');
            if (priceEl) priceEl.value = price;
            const qtyEl = document.getElementById('walkin-service-quantity');
            if (qtyEl && (!qtyEl.value || parseInt(qtyEl.value) < 1)) qtyEl.value = '1';
        });
    }
    function loadDamageCatalogForWalkin() {
        const selectEl = document.getElementById('walkin-damage-catalog');
        if (!selectEl) return;
        fetch(`${window.APP_BASE_URL}/api/room-service-catalog`, {
            method: 'GET',
            headers: { 'Accept': 'application/json' }
        })
        .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
        .then(({ ok, data }) => {
            const list = ok && data && data.data ? data.data : [];
            const options = ['<option value="">Pilih dari katalog...</option>'];
            list.forEach(item => {
                const nm = String(item.name || '');
                if (nm.toLowerCase().includes('charge')) {
                    const price = parseFloat(item.price || 0);
                    options.push(`<option value="${encodeURIComponent(nm)}" data-price="${price}">${nm} - Rp ${price.toLocaleString('id-ID')}</option>`);
                }
            });
            selectEl.innerHTML = options.join('');
        })
        .catch(() => {
            selectEl.innerHTML = '<option value="">Gagal memuat katalog</option>';
        });
        selectEl.addEventListener('change', function() {
            const val = this.value;
            if (!val) return;
            const price = parseFloat(this.options[this.selectedIndex].getAttribute('data-price') || '0') || 0;
            const priceEl = document.getElementById('walkin-damage-price');
            if (priceEl) priceEl.value = price;
            const qtyEl = document.getElementById('walkin-damage-quantity');
            if (qtyEl && (!qtyEl.value || parseInt(qtyEl.value) < 1)) qtyEl.value = '1';
        });
    }
    function loadWalkinExtraBedSettings() {
        const nameEl = document.getElementById('walkin-extrabed-name');
        const priceEl = document.getElementById('walkin-extrabed-price');
        const hintEl = document.getElementById('walkin-extrabed-hint');
        fetch(`${window.APP_BASE_URL}/api/room-service-extra-bed`, {
            method: 'GET',
            headers: { 'Accept': 'application/json' }
        })
        .then(async r => { const j = await r.json(); return { ok: r.ok, data: j }; })
        .then(({ ok, data }) => {
            if (!ok || !data || !data.success) { return; }
            const info = data.data || {};
            const nm = String(info.name || 'Extra Bed');
            const basePrice = parseFloat(info.price || 0) || 0;
            WALKIN_EXTRA_BED_BASE_PRICE = basePrice;
            const nights = Math.max(1, parseInt(window.WALKIN_STAY_NIGHTS || 1, 10));
            const totalUnit = basePrice * nights;
            if (nameEl) nameEl.value = nm;
            if (priceEl) priceEl.value = totalUnit > 0 ? Math.round(totalUnit) : '';
            if (hintEl) {
                hintEl.textContent = basePrice > 0
                    ? (`Harga per malam: Rp ${basePrice.toLocaleString('id-ID')} | Durasi: ${nights} malam | Auto harga: Rp ${Math.round(totalUnit).toLocaleString('id-ID')}`)
                    : '';
            }
            const sec = document.getElementById('walkin-extrabed-section');
            if (sec) sec.style.display = 'block';
        })
        .catch(() => {});
    }
    document.addEventListener('DOMContentLoaded', function() {
        setupWalkinServiceKeyboardNav();
        setupWalkinDamageKeyboardNav();
        setupWalkinExtraBedKeyboardNav();
        setupWalkinCheckoutKeyboardNav();
        setupWalkinFormKeyboardNav();
        loadServiceCatalogForWalkin();
        loadDamageCatalogForWalkin();
        loadWalkinRooms();
    });
    function loadWalkinRoomsForElements(roomTypeSelect, roomSelect, guestEl) {
        if (!roomSelect) return Promise.resolve();
        const checkInEl = document.getElementById('walkin_check_in_date');
        const checkOutEl = document.getElementById('walkin_check_out_date');
        const checkIn = checkInEl ? checkInEl.value : '';
        const checkOut = checkOutEl ? checkOutEl.value : '';
        const selectedType = roomTypeSelect ? (roomTypeSelect.value || '') : '';
        const requestedGuests = guestEl ? Math.max(1, parseInt(guestEl.value || '1', 10) || 1) : 1;
        roomSelect.innerHTML = '<option value="">Memuat kamar...</option>';
        const renderFromRooms = function(rooms) {
            roomSelect.innerHTML = '<option value="">Pilih Kamar</option>';
            rooms.forEach(function(room) {
                if (selectedType && (String(room.type || '') !== selectedType)) { return; }
                const isAvailable = (room.status === 'available') || (room.isAvailableForDates === true);
                const option = document.createElement('option');
                option.value = room.id;
                const price = parseInt(room.price_per_night);
                const roomCapacity = Math.max(0, parseInt(room.capacity || 0, 10) || 0);
                const extraBedNeeded = roomCapacity > 0 && requestedGuests > roomCapacity;
                const capacityNote = roomCapacity > 0 ? ` · Kapasitas ${roomCapacity}` : '';
                const extraBedNote = extraBedNeeded ? ` · Perlu ${requestedGuests - roomCapacity} extra bed` : '';
                option.textContent = `Kamar ${room.room_number} - ${room.type}${capacityNote}${extraBedNote} - Rp ${price.toLocaleString('id-ID')}/malam ${isAvailable ? '(✓ Tersedia)' : '(✗ Tidak Tersedia)'}`;
                option.disabled = !isAvailable;
                option.dataset.price = parseFloat(room.price_per_night || 0);
                option.dataset.capacity = parseInt(room.capacity || 0, 10);
                roomSelect.appendChild(option);
            });
        };
        const fallbackFetchRooms = function() {
            return fetch(`${window.APP_BASE_URL}/api/rooms`, { headers: { 'Accept': 'application/json' } })
                .then(async function(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(function({ data }) {
                    if (data.success && Array.isArray(data.data)) {
                        renderFromRooms(data.data);
                    } else {
                        roomSelect.innerHTML = '<option value="">Error memuat kamar</option>';
                    }
                })
                .catch(function() { roomSelect.innerHTML = '<option value="">Error memuat kamar</option>'; });
        };
        if (checkIn && checkOut) {
            const payload = { check_in_date: checkIn, check_out_date: checkOut };
            if (selectedType) payload.type = selectedType;
            // Do not exclude rooms by base capacity: the booking workflow can
            // add extra beds automatically when guest count exceeds capacity.
            return fetch(`${window.APP_BASE_URL}/api/rooms/available`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                body: JSON.stringify(payload)
            })
            .then(async function(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(function({ ok, data }) {
                if (ok && data.success && Array.isArray(data.data) && data.data.length > 0) {
                    const rooms = data.data.map(function(room) {
                        room.isAvailableForDates = true;
                        return room;
                    });
                    renderFromRooms(rooms);
                } else if (!ok && data && data.errors) {
                    roomSelect.innerHTML = '';
                    const option = document.createElement('option');
                    option.value = '';
                    option.textContent = 'Gagal memvalidasi ketersediaan kamar';
                    roomSelect.appendChild(option);
                    showNotification(getApiErrorMessage(data, 'Gagal memvalidasi ketersediaan kamar'), 'error');
                } else {
                    return fallbackFetchRooms();
                }
            })
            .catch(function() { return fallbackFetchRooms(); });
        }
        return fallbackFetchRooms();
    }
    function loadWalkinRooms() {
        const rows = getWalkinAllRoomRows();
        Promise.all(rows.map(function(row) {
            return loadWalkinRoomsForElements(row.typeEl, row.roomEl, row.guestsEl);
        })).finally(function() {
            calculateWalkinTotalPrice();
        });
    }
    function calculateWalkinTotalPrice() {
        const checkIn = document.getElementById('walkin_check_in_date').value;
        const checkOut = document.getElementById('walkin_check_out_date').value;
        const discountEl = document.getElementById('walkin_discount_percent');
        const manualExtraBedEl = document.getElementById('walkin_manual_extra_bed_qty');
        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');
        if (!checkIn || !checkOut) { totalEl.value = ''; return; }
        const diff = Math.max(0, Math.floor((parseDateLocal(checkOut) - parseDateLocal(checkIn)) / (1000 * 60 * 60 * 24)));
        const units = (String(window.BILLING_MODE) === 'day') ? Math.max(1, diff + 1) : diff;
        if (units <= 0) { totalEl.value = ''; return; }
        const EXTRA_BED_PRICE = {{ (int) \App\Models\Settings::get('extra_bed_price', 150000) }};
        let roomSubtotal = 0;
        let totalDiscount = 0;
        getWalkinAllRoomRows().forEach(function(row) {
            if (!row.roomEl || !row.roomEl.value) return;
            const selectedOption = row.roomEl.options[row.roomEl.selectedIndex];
            const ds = selectedOption && selectedOption.dataset ? selectedOption.dataset : {};
            const overrideRate = Math.max(0, parseFloat((row.overrideRateEl && row.overrideRateEl.value) || '0') || 0);
            const rate = overrideRate > 0 ? overrideRate : parseFloat(ds.price || 0);
            const lineSubtotal = Math.max(0, units * rate);
            roomSubtotal += lineSubtotal;
            const lineDiscPercent = Math.min(100, Math.max(0, parseFloat((row.discountEl && row.discountEl.value) || '0') || 0));
            if (lineDiscPercent > 0) {
                totalDiscount += Math.floor((lineSubtotal * lineDiscPercent) / 100);
            }
        });
        const baseTotal = Math.max(0, roomSubtotal - totalDiscount);
        if (discountAmountEl) discountAmountEl.textContent = 'Rp ' + totalDiscount.toLocaleString('id-ID');
        const extraBeds = Math.max(0, parseInt((manualExtraBedEl ? manualExtraBedEl.value : '0') || '0', 10) || 0);
        const unitPrice = units > 0 ? (EXTRA_BED_PRICE * units) : 0;
        const extraBedTotal = extraBeds > 0 ? (extraBeds * unitPrice) : 0;
        const grandTotal = Math.max(0, baseTotal + extraBedTotal);
        totalEl.value = grandTotal > 0 ? grandTotal : '';
        if (roomSubtotalEl) roomSubtotalEl.textContent = 'Rp ' + roomSubtotal.toLocaleString('id-ID');
        if (extrabedTotalEl) extrabedTotalEl.textContent = 'Rp ' + extraBedTotal.toLocaleString('id-ID');
        if (extrabedDescEl) extrabedDescEl.textContent = extraBeds > 0 ? `(${extraBeds} x Rp ${unitPrice.toLocaleString('id-ID')})` : '(0)';
        if (grandTotalDisplayEl) grandTotalDisplayEl.textContent = 'Rp ' + grandTotal.toLocaleString('id-ID');
    }
    function debounceWalkin(fn, delay) {
        let t;
        return function() {
            const ctx = this, args = arguments;
            clearTimeout(t);
            t = setTimeout(function(){ fn.apply(ctx, args); }, delay);
        };
    }
    function addWalkinExtraRoomRow() {
        const container = document.getElementById('walkinExtraRoomsContainer');
        const mainType = document.getElementById('walkin_room_type');
        if (!container || !mainType) return;
        const row = document.createElement('div');
        row.className = 'row g-2 align-items-end mb-2 walkin-extra-room-row';
        const typeOptions = Array.from(mainType.options).map(function(opt){
            const v = String(opt.value || '').replace(/"/g, '&quot;');
            return `<option value="${v}">${opt.textContent}</option>`;
        }).join('');
        row.innerHTML = `
            <div class="col-md-2">
                <label class="form-label">Tipe Kamar</label>
                <select class="form-select walkin-extra-room-type">${typeOptions}</select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Kamar</label>
                <select class="form-select walkin-extra-room-id"><option value="">Pilih tipe dan tanggal</option></select>
            </div>
            <div class="col-md-1">
                <label class="form-label">Tamu</label>
                <select class="form-select walkin-extra-room-guests"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Diskon (%)</label>
                <input type="number" class="form-control walkin-extra-room-discount" min="0" max="100" step="0.01" value="${(document.getElementById('walkin_discount_percent')?.value || '0')}">
            </div>
            @if(auth()->user() && auth()->user()->isAdmin())
            <div class="col-md-3">
                <label class="form-label">Override Rate / Malam</label>
                <input type="number" class="form-control walkin-extra-room-override-rate" min="0" step="1" placeholder="Rate standar">
            </div>
            @endif
            <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 discountEl = row.querySelector('.walkin-extra-room-discount');
        const overrideRateEl = row.querySelector('.walkin-extra-room-override-rate');
        const removeBtn = row.querySelector('.walkin-remove-room-btn');
        if (typeEl) typeEl.addEventListener('change', function(){ loadWalkinRoomsForElements(typeEl, roomEl, guestsEl).finally(calculateWalkinTotalPrice); });
        if (roomEl) roomEl.addEventListener('change', calculateWalkinTotalPrice);
        if (guestsEl) guestsEl.addEventListener('change', function(){ loadWalkinRoomsForElements(typeEl, roomEl, guestsEl).finally(calculateWalkinTotalPrice); });
        if (discountEl) discountEl.addEventListener('input', function() {
            discountEl.dataset.touchedByUser = '1';
            calculateWalkinTotalPrice();
        });
        if (overrideRateEl) overrideRateEl.addEventListener('input', function() {
            syncWalkinOverrideMode();
            calculateWalkinTotalPrice();
        });
        if (removeBtn) removeBtn.addEventListener('click', function(){ row.remove(); syncWalkinOverrideMode(); calculateWalkinTotalPrice(); });
        syncWalkinOverrideMode();
    }
        const walkinAllowBackdate = true;
        const debouncedLoadWalkinRooms = debounceWalkin(loadWalkinRooms, 100);
        const debouncedCalcWalkinTotalPrice = debounceWalkin(calculateWalkinTotalPrice, 100);
        document.getElementById('walkin_check_in_date').addEventListener('change', function() {
            const d = this.value;
            const out = document.getElementById('walkin_check_out_date');
            if (d && !walkinAllowBackdate) {
                const nextDay = parseDateLocal(d);
                nextDay.setDate(nextDay.getDate() + 1);
                out.setAttribute('min', formatLocalYMD(nextDay));
            } else if (out && walkinAllowBackdate) {
                out.removeAttribute('min');
            }
            debouncedLoadWalkinRooms();
            debouncedCalcWalkinTotalPrice();
        });
        document.getElementById('walkin_check_out_date').addEventListener('change', function(){ debouncedLoadWalkinRooms(); debouncedCalcWalkinTotalPrice(); });
        document.getElementById('walkin_room_type').addEventListener('change', function(){ debouncedLoadWalkinRooms(); debouncedCalcWalkinTotalPrice(); });
        document.getElementById('walkin_room_id').addEventListener('change', calculateWalkinTotalPrice);
        document.getElementById('walkin_guest_count').addEventListener('change', function(){ debouncedLoadWalkinRooms(); debouncedCalcWalkinTotalPrice(); });
        document.getElementById('walkin_discount_percent').addEventListener('input', function(){
            const baseVal = this.value || '0';
            document.querySelectorAll('.walkin-extra-room-discount').forEach(function(el){
                if (!el.dataset.touchedByUser) {
                    el.value = baseVal;
                }
            });
            calculateWalkinTotalPrice();
        });
        const manualExtraBedEl = document.getElementById('walkin_manual_extra_bed_qty');
        if (manualExtraBedEl) manualExtraBedEl.addEventListener('input', calculateWalkinTotalPrice);
        const addRoomBtn = document.getElementById('walkinAddRoomRowBtn');
        if (addRoomBtn) addRoomBtn.addEventListener('click', addWalkinExtraRoomRow);
        const overrideRateInput = document.getElementById('walkin_override_rate');
        if (overrideRateInput) overrideRateInput.addEventListener('input', function() {
            syncWalkinOverrideMode();
            calculateWalkinTotalPrice();
        });
    document.getElementById('walkinForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        try {
            const formData = new FormData(this);
            const rows = getWalkinAllRoomRows().filter(function(row){ return row.roomEl && row.roomEl.value; });
            if (rows.length === 0) { showNotification('Pilih minimal satu kamar', 'error'); return; }
            const ids = rows.map(function(row){ return String(row.roomEl.value); });
            if (new Set(ids).size !== ids.length) { showNotification('Kamar tidak boleh duplikat', 'error'); return; }
            let specialRequests = formData.get('special_requests');
            const companyVal = formData.get('company');
            if (companyVal && String(companyVal).trim() !== '') {
                specialRequests = (specialRequests && String(specialRequests).trim() !== '')
                    ? (specialRequests + ' | ' + ('Perusahaan: ' + companyVal))
                    : ('Perusahaan: ' + companyVal);
            }
            const manualExtraBedQty = Math.max(0, parseInt((formData.get('manual_extra_bed_qty') || document.getElementById('walkin_manual_extra_bed_qty')?.value || '0'), 10) || 0);
            if (manualExtraBedQty > 0) {
                specialRequests = (specialRequests && String(specialRequests).trim() !== '')
                    ? (specialRequests + ' | ' + (`Extra Bed Manual: ${manualExtraBedQty}`))
                    : (`Extra Bed Manual: ${manualExtraBedQty}`);
            }
            if (rows.length === 1) {
                const mainOverrideRate = Math.max(0, parseFloat((rows[0].overrideRateEl && rows[0].overrideRateEl.value) || '0') || 0);
                const payload = {
                    user_id: '{{ auth()->id() }}',
                    room_id: formData.get('room_id'),
                    check_in_date: formData.get('check_in_date'),
                    check_out_date: formData.get('check_out_date'),
                    guests: parseInt(formData.get('guests') || '1', 10),
                    guest_name: formData.get('guest_name'),
                    guest_email: formData.get('guest_email'),
                    guest_phone: formData.get('guest_phone'),
                    special_requests: specialRequests,
                    discount_percent: mainOverrideRate > 0 ? 0 : formData.get('discount_percent'),
                    manual_extra_bed_qty: parseInt(formData.get('manual_extra_bed_qty') || '0', 10) || 0,
                    override_price_per_night: mainOverrideRate > 0 ? mainOverrideRate : undefined,
                    tp_channel: 'Walkin',
                    tp_ref: ''
                };
                if (selectedWalkinGuestId) payload.guest_id = selectedWalkinGuestId;
                const createResp = await fetch(`${window.APP_BASE_URL}/api/bookings/internal`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                    body: JSON.stringify(payload)
                });
                const createData = await createResp.json();
                if (!createResp.ok || !createData.success || !createData.data) throw new Error(getApiErrorMessage(createData, 'Gagal membuat booking'));
                const bookingId = createData.data.id;
                const confirmResp = await fetch(`${window.APP_BASE_URL}/api/bookings/${bookingId}/confirm`, {
                    method: 'POST',
                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken }
                });
                const confirmData = await confirmResp.json();
                if (!confirmResp.ok || !confirmData.success) throw new Error(getApiErrorMessage(confirmData, 'Gagal mengonfirmasi booking'));
                const initialChannelEl = document.getElementById('walkin_payment_channel_id');
                const initialChannelId = initialChannelEl ? (initialChannelEl.value || '') : '';
                const checkinPayload = initialChannelId ? { payment_channel_id: parseInt(initialChannelId, 10) } : {};
                const checkinResp = await fetch(`${window.APP_BASE_URL}/api/bookings/${bookingId}/checkin`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                    body: JSON.stringify(checkinPayload)
                });
                const checkinData = await checkinResp.json();
                if (!checkinResp.ok || !checkinData.success) throw new Error(getApiErrorMessage(checkinData, 'Gagal check-in'));
                if (checkinData?.data?.invoice?.id) {
                    window.location.href = `${window.APP_BASE_URL}/admin/invoices/${checkinData.data.invoice.id}`;
                    return;
                }
                location.reload();
                return;
            }
            const bulkResp = await fetch(`${window.APP_BASE_URL}/api/bookings/bulk`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                body: JSON.stringify({
                    user_id: '{{ auth()->id() }}',
                    guest_id: selectedWalkinGuestId || undefined,
                    guest_name: formData.get('guest_name'),
                    guest_email: formData.get('guest_email'),
                    guest_phone: formData.get('guest_phone'),
                    check_in_date: formData.get('check_in_date'),
                    check_out_date: formData.get('check_out_date'),
                    discount_percent: formData.get('discount_percent'),
                    bookings: rows.map(function(row) {
                        const rowOverrideRate = Math.max(0, parseFloat((row.overrideRateEl && row.overrideRateEl.value) || '0') || 0);
                        const rowDiscount = Math.min(100, Math.max(0, parseFloat((row.discountEl ? row.discountEl.value : '0') || '0') || 0));
                        return {
                            room_id: parseInt(row.roomEl.value, 10),
                            guests: parseInt((row.guestsEl ? row.guestsEl.value : '1') || '1', 10),
                            discount_percent: rowOverrideRate > 0 ? 0 : rowDiscount,
                            override_price_per_night: rowOverrideRate > 0 ? rowOverrideRate : undefined,
                            special_requests: specialRequests || '',
                            tp_channel: 'Walkin'
                        };
                    })
                })
            });
            const bulkData = await bulkResp.json();
            const created = bulkData?.data?.created || [];
            if (!bulkResp.ok || !bulkData.success || !created.length) {
                let failMsg = getApiErrorMessage(bulkData, 'Gagal membuat booking multiple kamar');
                const failures = Array.isArray(bulkData?.data?.failures) ? bulkData.data.failures : [];
                if (failures.length > 0) {
                    const reasons = failures.map(function(f){
                        const room = f.room_number ? `Kamar ${f.room_number}` : `Room ID ${f.room_id || '-'}`;
                        const reason = f.reason || f.message || 'Gagal diproses';
                        return `${room}: ${reason}`;
                    }).join(' | ');
                    if (reasons) failMsg += ` (${reasons})`;
                }
                throw new Error(failMsg);
            }
            const bookingIds = created.map(function(item){ return item.id; });
            const confirmResponses = await Promise.all(bookingIds.map(function(id){
                return fetch(`${window.APP_BASE_URL}/api/bookings/${id}/confirm`, { method: 'POST', headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken } });
            }));
            for (const response of confirmResponses) {
                const responseData = await response.json();
                if (!response.ok || !responseData.success) throw new Error(getApiErrorMessage(responseData, 'Gagal mengonfirmasi salah satu booking'));
            }
            const bulkCheckinResp = await fetch(`${window.APP_BASE_URL}/api/bookings/bulk-checkin`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                body: JSON.stringify({ booking_ids: bookingIds, single_invoice: true })
            });
            const bulkCheckinData = await bulkCheckinResp.json();
            if (!bulkCheckinResp.ok || !bulkCheckinData.success) throw new Error(getApiErrorMessage(bulkCheckinData, 'Gagal check-in multiple kamar'));
            if (bulkCheckinData?.data?.invoice?.id) {
                window.location.href = `${window.APP_BASE_URL}/admin/invoices/${bulkCheckinData.data.invoice.id}`;
                return;
            }
            if (Array.isArray(bulkCheckinData?.data?.invoices) && bulkCheckinData.data.invoices[0]?.id) {
                window.location.href = `${window.APP_BASE_URL}/admin/invoices/${bulkCheckinData.data.invoices[0].id}`;
                return;
            }
            location.reload();
        } catch (err) {
            showNotification(err.message || 'Terjadi kesalahan saat membuat booking', 'error');
        }
    });
    (function init() {
        const today = formatLocalYMD(new Date());
        document.getElementById('walkin_check_in_date').value = today;
        const nextDay = new Date();
        nextDay.setDate(nextDay.getDate() + 1);
        document.getElementById('walkin_check_out_date').value = formatLocalYMD(nextDay);
        if (!walkinAllowBackdate) {
            document.getElementById('walkin_check_out_date').setAttribute('min', formatLocalYMD(nextDay));
        } else {
            document.getElementById('walkin_check_out_date').removeAttribute('min');
            document.getElementById('walkin_check_in_date').removeAttribute('min');
        }
        const overrideRateEl = document.getElementById('walkin_override_rate');
        const totalEl = document.getElementById('walkin_total_price');
        const manualExtraBedEl = document.getElementById('walkin_manual_extra_bed_qty');
        const extraRoomsEl = document.getElementById('walkinExtraRoomsContainer');
        if (extraRoomsEl) extraRoomsEl.innerHTML = '';
        if (overrideRateEl) overrideRateEl.value = '';
        if (totalEl) totalEl.readOnly = true;
        if (manualExtraBedEl) manualExtraBedEl.value = '0';
        syncWalkinOverrideMode();
        const now = new Date();
        const fromHist = new Date(now.getFullYear(), now.getMonth(), 1);
        const fromEl = document.getElementById('walkin_history_from');
        const toEl = document.getElementById('walkin_history_to');
        if (fromEl) fromEl.value = formatLocalYMD(fromHist);
        if (toEl) toEl.value = today;
        loadWalkinRooms();
        loadWalkinGuests();
        setupWalkinGuestSearch();
        loadWalkinCheckinList();
        loadWalkinHistoryCheckedOut();
    })();
</script>
@endsection