@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>
                </div>
            </div>
        </div>
    </div>
</div>

<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>
                    <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">
                        <h6 class="card-title text-info mb-2"><i class="fas fa-concierge-bell me-1"></i>Layanan Kamar</h6>
                        <div class="row g-2 mb-3" id="walkin-service-form">
                            <div class="col-md-4">
                                <select class="form-select mb-2" id="walkin-service-catalog">
                                    <option value="">Pilih dari katalog...</option>
                                </select>
                                <input type="text" class="form-control" id="walkin-service-name" placeholder="Nama layanan">
                            </div>
                            <div class="col-md-2">
                                <input type="number" class="form-control" id="walkin-service-quantity" min="1" value="1" placeholder="Jumlah">
                            </div>
                            <div class="col-md-3">
                                <input type="number" class="form-control" id="walkin-service-price" min="0" placeholder="Harga">
                            </div>
                            <div class="col-md-3 d-grid">
                                <button type="button" class="btn btn-info" id="walkinAddServiceBtn"><i class="fas fa-plus me-1"></i>Tambah</button>
                            </div>
                            <div class="col-12">
                                <textarea class="form-control" id="walkin-service-notes" rows="2" placeholder="Catatan (opsional)"></textarea>
                            </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">
                    <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_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>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;
    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">${(r.hotel && r.hotel.name) ? r.hotel.name : '{{ $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 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 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 }));
                }
            }
        });
    });
    let WALKIN_DETAIL_BOOKING_ID = null;
    let WALKIN_SERVICES_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 href = `${base}/storage/${path}`;
                            const isPdf = String(path).toLowerCase().endsWith('.pdf');
                            ktpEl.innerHTML = `<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'; }
                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);
                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 || [];
                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 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 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 extendBase = Math.max(0, WALKIN_EXTEND_COST || 0);
        const discountAmount = Math.floor((servicesBase * pct) / 100);
        const baseTotal = Math.max(0, servicesBase + 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 (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 nameEl = document.getElementById('walkin-service-name');
        const qtyEl = document.getElementById('walkin-service-quantity');
        const priceEl = document.getElementById('walkin-service-price');
        const notesEl = document.getElementById('walkin-service-notes');
        const name = (nameEl?.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 (nameEl) nameEl.value = '';
            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 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'));
    }
    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();
        });
    }
    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_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-name','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 setupWalkinCheckoutKeyboardNav() {
        const channelEl = document.getElementById('walkin_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 name = decodeURIComponent(val);
            const price = parseFloat(this.options[this.selectedIndex].getAttribute('data-price') || '0') || 0;
            const nameEl = document.getElementById('walkin-service-name');
            const priceEl = document.getElementById('walkin-service-price');
            if (nameEl) nameEl.value = name;
            if (priceEl) priceEl.value = price;
            const qtyEl = document.getElementById('walkin-service-quantity');
            if (qtyEl && (!qtyEl.value || parseInt(qtyEl.value) < 1)) qtyEl.value = '1';
        });
    }
    document.addEventListener('DOMContentLoaded', function() {
        setupWalkinServiceKeyboardNav();
        setupWalkinCheckoutKeyboardNav();
        setupWalkinFormKeyboardNav();
        loadServiceCatalogForWalkin();
    });
    function loadWalkinRooms() {
        const roomSelect = document.getElementById('walkin_room_id');
        const roomTypeSelect = document.getElementById('walkin_room_type');
        const checkIn = document.getElementById('walkin_check_in_date').value;
        const checkOut = document.getElementById('walkin_check_out_date').value;
        const selectedType = roomTypeSelect.value || '';
        roomSelect.innerHTML = '<option value="">Memuat kamar...</option>';
        fetch(`${window.APP_BASE_URL}/api/rooms`, { 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 && data.data && data.data.length > 0) {
                    roomSelect.innerHTML = '<option value="">Pilih Kamar</option>';
                    const promises = (checkIn && checkOut) ? data.data.map(room => {
                        return fetch(`${window.APP_BASE_URL}/api/check-availability`, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                            body: JSON.stringify({ room_id: room.id, check_in_date: checkIn, check_out_date: checkOut })
                        })
                        .then(async r => {
                            const ct = r.headers.get('content-type') || '';
                            const av = ct.includes('application/json') ? await r.json() : { success: false, available: false };
                            return { ...room, isAvailableForDates: av.success && av.available };
                        })
                        .catch(() => ({ ...room, isAvailableForDates: room.status === 'available' }));
                    }) : data.data.map(room => ({ ...room, isAvailableForDates: room.status === 'available' }));
                    Promise.all(promises).then(rooms => {
                        rooms.forEach(room => {
                            if (selectedType && (room.type || '').toString() !== selectedType) { return; }
                            const isAvailable = room.isAvailableForDates && room.status === 'available';
                            const option = document.createElement('option');
                            option.value = room.id;
                            option.textContent = `Kamar ${room.room_number} - ${room.type} - Rp ${parseInt(room.price_per_night).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();
                    });
                } else {
                    roomSelect.innerHTML = '<option value="">Error memuat kamar</option>';
                }
            })
            .catch(() => { roomSelect.innerHTML = '<option value="">Error memuat kamar</option>'; });
        }
    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 nights = Math.max(0, Math.floor((new Date(checkOut) - new Date(checkIn)) / (1000 * 60 * 60 * 24)));
        const selectedOption = roomSelect.options[roomSelect.selectedIndex];
        const rate = parseFloat(selectedOption?.dataset?.price || 0);
        const capacity = parseInt(selectedOption?.dataset?.capacity || '0', 10) || 0;
        const guestCount = parseInt(guestEl?.value || '1', 10) || 1;
        const roomSubtotal = nights * 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 = nights > 0 ? (EXTRA_BED_PRICE * nights) : 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');
    }
    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]);
        }
        loadWalkinRooms();
        calculateWalkinTotalPrice();
    });
    document.getElementById('walkin_check_out_date').addEventListener('change', function(){ loadWalkinRooms(); calculateWalkinTotalPrice(); });
    document.getElementById('walkin_room_type').addEventListener('change', function(){ loadWalkinRooms(); calculateWalkinTotalPrice(); });
    document.getElementById('walkin_room_id').addEventListener('change', calculateWalkinTotalPrice);
    document.getElementById('walkin_guest_count').addEventListener('change', calculateWalkinTotalPrice);
    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]);
        loadWalkinRooms();
        loadWalkinGuests();
        setupWalkinGuestSearch();
        loadWalkinCheckinList();
    })();
</script>
@endsection