@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">Hasil Walk-in Check-in (Hari Ini)</h6>
                        <button class="btn btn-outline-secondary btn-sm" id="refreshWalkinListBtn">
                            <i class="fas fa-sync-alt me-1"></i>Refresh
                        </button>
                    </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 Walk-in</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">
                            <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-primary me-2"><i class="fas fa-door-open me-1"></i>Tercheck-in</span>
                    </div>
                    <div id="walkinHistoryCheckedIn">
                        <div class="text-muted">Memuat riwayat...</div>
                    </div>
                    <div class="mt-4 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-md-4">
                        <label class="form-label">Diskon (%)</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">Total Harga (Rp)</label>
                        <input type="number" name="total_price" id="walkin_total_price" class="form-control" min="0" readonly>
                    </div>
                    <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 <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">
                            <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">
                        <label class="form-label">Nomor KTP *</label>
                        <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>
                <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"><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">
                    <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 <span class="text-danger">*</span></label>
                                <select class="form-select" id="walkin_checkout_payment_channel_id" required>
                                    <option value="">-- Pilih Channel Pembayaran --</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-warning" id="walkinCheckoutBtn"><i class="fas fa-sign-out-alt me-1"></i>Check-out</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;
    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 formatDateOnly(val) {
        if (!val) return '-';
        const s = String(val);
        const t = s.indexOf('T');
        if (t > -1) return s.slice(0, t);
        return s.length >= 10 ? s.slice(0, 10) : s;
    }
    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>
                                    </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">${formatDateOnly(b.check_in_date)}</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 = new Date(b.check_in_date);
                                        const checkOut = new Date(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>
                            ${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">${b.special_requests}</small>
                                </div>
                            ` : ``}
                        </div>
                        <div class="card-footer bg-white d-flex gap-2">
                            <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 || []).filter(b => {
                    const dt = (b.actual_check_in_time || b.check_in_date || '').toString().slice(0,10);
                    const today = new Date().toISOString().split('T')[0];
                    return dt === today;
                }).sort((a,b) => {
                    const ta = new Date(a.actual_check_in_time || a.created_at || a.check_in_date || 0).getTime();
                    const tb = new Date(b.actual_check_in_time || b.created_at || b.check_in_date || 0).getTime();
                    return tb - ta;
                }).slice(0,20);
                renderWalkinList(items);
            })
            .catch(() => renderWalkinList([]));
    }
    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>
                                    </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">${formatDateOnly(b.check_in_date)}</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 = new Date(b.check_in_date);
                                        const checkOut = new Date(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>
                            ${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">${b.special_requests}</small>
                                </div>
                            ` : ``}
                        </div>
                        <div class="card-footer bg-white d-flex gap-2">
                            <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 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.actual_check_in_time || b.check_in_date || b.created_at || 0).getTime();
                    return t >= start.getTime() && t <= end.getTime();
                });
                const sorted = filtered.sort((a,b) => {
                    const ta = new Date(a.actual_check_in_time || a.created_at || a.check_in_date || 0).getTime();
                    const tb = new Date(b.actual_check_in_time || b.created_at || b.check_in_date || 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;
                }).slice(0,50);
                renderWalkinHistory(sorted, 'walkinHistoryCheckedOut');
            })
            .catch(() => renderWalkinHistory([], 'walkinHistoryCheckedOut'));
    }
    document.getElementById('refreshWalkinHistoryBtn').addEventListener('click', function(){
        loadWalkinHistoryCheckedIn();
        loadWalkinHistoryCheckedOut();
    });
    const debouncedLoadHistory = debounceWalkin(function(){
        loadWalkinHistoryCheckedIn();
        loadWalkinHistoryCheckedOut();
    }, 100);
    const histFromEl = document.getElementById('walkin_history_from');
    const histToEl = document.getElementById('walkin_history_to');
    if (histFromEl) histFromEl.addEventListener('change', debouncedLoadHistory);
    if (histToEl) histToEl.addEventListener('change', debouncedLoadHistory);
    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 = [];
                }
            })
            .catch(() => { walkinGuests = []; });
    }
    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 filtered = walkinGuests.filter(g => 
                (g.name || '').toLowerCase().includes(q) || (String(g.phone || '').toLowerCase().includes(q))
            );
            if (filtered.length === 0) { suggestions.style.display = 'none'; if (addNewGuestBtn) addNewGuestBtn.style.display = 'block'; selectedWalkinGuestId = null; return; }
            let html = '';
            filtered.forEach(g => {
                html += `
                    <button type="button" class="dropdown-item walkin-guest-suggestion" data-guest-id="${g.id}">
                        <div class="fw-bold">${g.name}</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 = walkinGuests.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';
                });
            });
    });
    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');
        if (!addForm) return;
        addForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const fd = new FormData(this);
            const idNumber = String(fd.get('id_number') || '').trim();
            if (!/^\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;
            }
            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, data: j }; })
            .then(({ ok, 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 {
                    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;
                window.WALKIN_CURRENT_STATUS = b.status;
                const g = b.guest || {};
                const r = b.room || {};
                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 = formatDateOnly(b.check_in_date);
                document.getElementById('detail-walkin-check-out').textContent = formatDateOnly(b.check_out_date);
                const statusEl = document.getElementById('detail-walkin-status');
                statusEl.textContent = (b.status || '').replace('_', ' ');
                statusEl.className = 'badge ' + (b.status === 'checked_in' ? 'bg-primary' : b.status === 'checked_out' ? 'bg-success' : 'bg-secondary');
                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((new Date(b.check_out_date) - new Date(b.check_in_date)) / (1000 * 60 * 60 * 24)));
                    const baselineNights = (b.invoice && b.invoice.nights) ? parseInt(b.invoice.nights) : plannedNights;
                    const actualNights = Math.max(1, Math.ceil((new Date() - new Date(b.check_in_date)) / (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 roomRate = parseInt(b.base_price || (r && r.price_per_night) || 0) || 0;
                    const baselineSubtotal = Math.max(0, baselineNights * roomRate);
                    const extendSubtotal = Math.max(0, extraNights * roomRate);
                    WALKIN_BASELINE_NIGHTS = baselineNights;
                    WALKIN_ROOM_RATE = roomRate;
                    WALKIN_EXTRA_NIGHTS = extraNights;
                    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 = extraNights;
                    if (exREl) exREl.textContent = roomRate.toLocaleString('id-ID');
                    if (exSEl) exSEl.textContent = extendSubtotal.toLocaleString('id-ID');
                    updateWalkinTotals();
                } catch(e) {}
                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 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 price = parseFloat(priceEl?.value || '0') || 0;
        const notes = (notesEl?.value || '').trim();
        if (!name || price <= 0) { showNotification('Nama dan harga extra bed harus diisi', '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 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;
        if (!channelId) { showNotification('Pilih channel pembayaran terlebih dahulu', 'error'); return; }
        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 = { payment_channel_id: channelId, 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;
            const nights = Math.max(1, parseInt(window.WALKIN_BASELINE_NIGHTS || 1));
            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')) : '';
            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 loadWalkinRooms() {
        const roomSelect = document.getElementById('walkin_room_id');
        const roomTypeSelect = document.getElementById('walkin_room_type');
        const checkInEl = document.getElementById('walkin_check_in_date');
        const checkOutEl = document.getElementById('walkin_check_out_date');
        const guestEl = document.getElementById('walkin_guest_count');
        if (!roomSelect) return;
        const checkIn = checkInEl ? checkInEl.value : '';
        const checkOut = checkOutEl ? checkOutEl.value : '';
        const selectedType = roomTypeSelect ? (roomTypeSelect.value || '') : '';
        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);
                option.textContent = `Kamar ${room.room_number} - ${room.type} - 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);
            });
            calculateWalkinTotalPrice();
        };
        const fallbackFetchRooms = function() {
            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({ ok, 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 capacityVal = guestEl ? parseInt(guestEl.value || '1', 10) : undefined;
            const payload = { check_in_date: checkIn, check_out_date: checkOut };
            if (selectedType) payload.type = selectedType;
            if (typeof capacityVal === 'number' && capacityVal > 0) payload.capacity = capacityVal;
            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 {
                    fallbackFetchRooms();
                }
            })
            .catch(function() { fallbackFetchRooms(); });
        } else {
            fallbackFetchRooms();
        }
    }
    function calculateWalkinTotalPrice() {
        const checkIn = document.getElementById('walkin_check_in_date').value;
        const checkOut = document.getElementById('walkin_check_out_date').value;
        const roomSelect = document.getElementById('walkin_room_id');
        const discountEl = document.getElementById('walkin_discount_percent');
        const guestEl = document.getElementById('walkin_guest_count');
        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 || !roomSelect.value) { totalEl.value = ''; return; }
        const diff = Math.max(0, Math.floor((new Date(checkOut) - new Date(checkIn)) / (1000 * 60 * 60 * 24)));
        const units = (String(window.BILLING_MODE) === 'day') ? Math.max(1, diff + 1) : diff;
        const selectedOption = roomSelect.options[roomSelect.selectedIndex];
        const ds = selectedOption && selectedOption.dataset ? selectedOption.dataset : {};
        const rate = parseFloat(ds.price || 0);
        const capacity = parseInt(ds.capacity || '0', 10) || 0;
        const guestCount = parseInt((guestEl ? (guestEl.value || '1') : '1'), 10) || 1;
        const roomSubtotal = units * rate;
        let baseTotal = roomSubtotal;
        const discPercent = parseFloat(discountEl.value || '0');
        if (!isNaN(discPercent) && discPercent > 0) {
            const discAmount = Math.floor((roomSubtotal * discPercent) / 100);
            baseTotal = Math.max(0, baseTotal - discAmount);
            if (discountAmountEl) discountAmountEl.textContent = 'Rp ' + discAmount.toLocaleString('id-ID');
        } else {
            if (discountAmountEl) discountAmountEl.textContent = 'Rp 0';
        }
        const EXTRA_BED_PRICE = {{ (int) \App\Models\Settings::get('extra_bed_price', 150000) }};
        const extraBeds = Math.max(0, guestCount - capacity);
        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')})` : '';
        if (grandTotalDisplayEl) grandTotalDisplayEl.textContent = 'Rp ' + grandTotal.toLocaleString('id-ID');
    }
    const debounceWalkin = (fn, delay) => {
        let t;
        return function() {
            const ctx = this, args = arguments;
            clearTimeout(t);
            t = setTimeout(function(){ fn.apply(ctx, args); }, delay);
        };
        };
        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) {
                const nextDay = new Date(d);
                nextDay.setDate(nextDay.getDate() + 1);
                out.setAttribute('min', nextDay.toISOString().split('T')[0]);
            }
            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', calculateWalkinTotalPrice);
    document.getElementById('walkinForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        const payload = {
            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: formData.get('special_requests'),
            discount_percent: formData.get('discount_percent'),
            tp_channel: 'Walkin',
            tp_ref: ''
        };
        const companyVal = formData.get('company');
        if (companyVal && String(companyVal).trim() !== '') {
            payload.special_requests = (payload.special_requests && String(payload.special_requests).trim() !== '')
                ? (payload.special_requests + ' | ' + ('Perusahaan: ' + companyVal))
                : ('Perusahaan: ' + companyVal);
        }
        if (selectedWalkinGuestId) { payload.guest_id = selectedWalkinGuestId; }
        fetch(`${window.APP_BASE_URL}/api/bookings`, {
            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, data: j }; })
        .then(({ ok, data }) => {
            if (!ok || !data.success || !data.data) {
                let msg = data.message || 'Gagal membuat booking';
                if (data.errors) {
                    const details = Object.values(data.errors).flat().join(', ');
                    if (details) msg += ': ' + details;
                }
                showNotification(msg, 'error');
                return;
            }
            const bookingId = data.data.id;
            fetch(`${window.APP_BASE_URL}/api/bookings/${bookingId}/confirm`, {
                method: 'POST',
                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 konfirmasi booking', 'error');
                    return;
                }
                const initialChannelEl = document.getElementById('walkin_payment_channel_id');
                const initialChannelId = initialChannelEl ? (initialChannelEl.value || '') : '';
                const checkinPayload = initialChannelId ? { payment_channel_id: parseInt(initialChannelId, 10) } : {};
                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)
                })
                .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 check-in', 'error');
                        return;
                    }
                    try {
                        if (typeof Swal !== 'undefined' && Swal && typeof Swal.fire === 'function') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil Check-in',
                                text: 'Check-in walk-in berhasil.',
                                timer: 1800,
                                showConfirmButton: false
                            });
                        } else {
                            showNotification('Check-in walk-in berhasil', 'success');
                        }
                    } catch(e) {
                        showNotification('Check-in walk-in berhasil', 'success');
                    }
                    fetch(`${window.APP_BASE_URL}/api/bookings/${bookingId}`, {
                        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.success && data.data) {
                            const b = data.data;
                            const g = b.guest || {};
                            const r = b.room || {};
                            const formModalEl = document.getElementById('walkinCheckinModal');
                            if (formModalEl) {
                                const formModal = bootstrap.Modal.getInstance(formModalEl) || new bootstrap.Modal(formModalEl);
                                formModal.hide();
                            }
                            try {
                                document.getElementById('walkinForm').reset();
                                document.getElementById('walkinGuestSuggestions').style.display = 'none';
                            } catch(e) {}
                            document.getElementById('result-booking-code').textContent = b.booking_code || '-';
                            document.getElementById('result-guest-name').textContent = b.guest_name || g.name || '-';
                            document.getElementById('result-guest-email').textContent = g.email || b.guest_email || '-';
                            document.getElementById('result-guest-phone').textContent = g.phone || b.guest_phone || '-';
                            document.getElementById('result-room-number').textContent = r.room_number || '-';
                            document.getElementById('result-room-type').textContent = r.type || '-';
                            document.getElementById('result-check-in').textContent = formatDateOnly(b.check_in_date);
                            document.getElementById('result-check-out').textContent = formatDateOnly(b.check_out_date);
                            const statusEl = document.getElementById('result-status');
                            statusEl.textContent = (b.status || '').replace('_',' ');
                            statusEl.className = 'badge ' + (b.status === 'checked_in' ? 'bg-primary' : 'bg-secondary');
                            const modal = new bootstrap.Modal(document.getElementById('walkinResultModal'));
                            modal.show();
                            loadWalkinCheckinList();
                        }
                    });
                });
            });
        })
        .catch(() => showNotification('Terjadi kesalahan saat membuat booking', 'error'));
    });
    (function init() {
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('walkin_check_in_date').value = today;
        const nextDay = new Date();
        nextDay.setDate(nextDay.getDate() + 1);
        document.getElementById('walkin_check_out_date').value = nextDay.toISOString().split('T')[0];
        document.getElementById('walkin_check_out_date').setAttribute('min', nextDay.toISOString().split('T')[0]);
        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 = fromHist.toISOString().split('T')[0];
        if (toEl) toEl.value = today;
        loadWalkinRooms();
        loadWalkinGuests();
        setupWalkinGuestSearch();
        loadWalkinCheckinList();
        loadWalkinHistoryCheckedIn();
        loadWalkinHistoryCheckedOut();
    })();
</script>
@endsection