@extends('admin.layout')

@section('title', 'Non-Stay Bill')
@section('page-title', 'Non-Stay Bill')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-primary fw-bold">
                <i class="fas fa-file-invoice-dollar me-2"></i>Non-Stay Bill
            </h1>
            <p class="text-muted mb-0">Terbitkan invoice tanpa menginap untuk keperluan administrasi</p>
        </div>
        <div>
            <a href="{{ route('admin.invoices.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Kembali
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <form method="POST" action="{{ route('admin.invoices.nonstay.store') }}" id="nonstay-form" class="card border-0 shadow-sm">
                @csrf
                <div class="card-body">
                    <h6 class="card-title mb-3"><i class="fas fa-user me-1"></i>Data Tamu</h6>
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Nama Tamu <span class="text-danger">*</span></label>
                            <input type="text" name="guest_name" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Email</label>
                            <input type="email" name="guest_email" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Telepon</label>
                            <input type="text" name="guest_phone" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Perusahaan</label>
                            <input type="text" name="company" class="form-control" placeholder="Nama perusahaan (opsional)">
                        </div>
                    </div>

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

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

                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Tanggal Invoice <span class="text-danger">*</span></label>
                            <input type="date" name="issued_at" id="issued_at" class="form-control" required value="{{ now()->toDateString() }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Jatuh Tempo</label>
                            <input type="date" name="due_date" id="due_date" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tarif Pajak</label>
                            <input type="text" class="form-control" value="{{ (int)$settings->tax_rate }}%" readonly>
                        </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> Ringkasan Total</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-2">
                                        <span><span id="ns-baseline-nights">0</span> x Rp <span id="ns-room-rate">0</span> = Rp <span id="ns-baseline-subtotal">0</span></span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Diskon:</span>
                                        <span id="ns-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="ns-total-include" class="fw-bold">Rp 0</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>DPP:</span>
                                        <span id="ns-dpp">Rp 0</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>PPN:</span>
                                        <span id="ns-tax">Rp 0</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span class="fw-bold">Total Dibayar:</span>
                                        <span id="ns-grand-total" class="fw-bold text-success">Rp 0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Terbitkan Invoice
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h6 class="card-title mb-2"><i class="fas fa-hotel me-1"></i>Hotel</h6>
                    <div class="text-muted">{{ $settings->hotel_name }}</div>
                    <small class="text-muted">Pajak: {{ (int)$settings->tax_rate }}%</small>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
(function(){
    const discountEl = document.getElementById('discount_percent');
    const roomSelect = document.getElementById('room_id');
    const checkInEl = document.getElementById('check_in_date');
    const checkOutEl = document.getElementById('check_out_date');
    const nightsEl = document.getElementById('nights');
    const roomRateEl = document.getElementById('room_rate');
    const roomSumNumEl = document.getElementById('room-summary-number');
    const roomSumTypeEl = document.getElementById('room-summary-type');
    const roomSumHotelEl = document.getElementById('room-summary-hotel');
    const statusEl = document.getElementById('status');
    const channelEl = document.getElementById('payment_channel_id');
    const paidAtEl = document.getElementById('paid_at');
    const TAX_RATE = {{ (int)$settings->tax_rate }};
    function computeTotals() {
        const nights = parseInt(nightsEl.value || '0') || 0;
        const rate = parseFloat(roomRateEl.value || '0') || 0;
        const roomSubtotal = Math.max(0, nights * rate);
        document.getElementById('ns-baseline-nights').textContent = nights;
        document.getElementById('ns-room-rate').textContent = rate.toLocaleString('id-ID');
        document.getElementById('ns-baseline-subtotal').textContent = roomSubtotal.toLocaleString('id-ID');
        const pct = Math.min(100, Math.max(0, parseFloat(discountEl.value || '0') || 0));
        const discountAmount = Math.floor((roomSubtotal * pct) / 100);
        const includeTotal = Math.max(0, roomSubtotal - discountAmount);
        const grandTotal = includeTotal;
        const rawDPP = grandTotal / (1 + (TAX_RATE / 100));
        const baseDPP = Math.floor(rawDPP);
        const dpp = ((rawDPP - baseDPP) < 0.5) ? baseDPP : (baseDPP + 1);
        const taxIncluded = Math.max(0, grandTotal - dpp);
        document.getElementById('ns-discount-total').textContent = 'Rp ' + discountAmount.toLocaleString('id-ID');
        document.getElementById('ns-total-include').textContent = 'Rp ' + includeTotal.toLocaleString('id-ID');
        document.getElementById('ns-dpp').textContent = 'Rp ' + dpp.toLocaleString('id-ID');
        document.getElementById('ns-tax').textContent = 'Rp ' + taxIncluded.toLocaleString('id-ID');
        document.getElementById('ns-grand-total').textContent = 'Rp ' + grandTotal.toLocaleString('id-ID');
    }
    function computeNights() {
        const ci = checkInEl.value ? new Date(checkInEl.value) : null;
        const co = checkOutEl.value ? new Date(checkOutEl.value) : null;
        if (ci && co && co >= ci) {
            const diff = Math.ceil((co - ci) / (1000*60*60*24));
            nightsEl.value = Math.max(0, diff);
        } else {
            nightsEl.value = 0;
        }
        computeTotals();
    }
    function updateRoomSummary() {
        const opt = roomSelect.options[roomSelect.selectedIndex];
        if (!opt || !opt.value) {
            roomSumNumEl.textContent = '-';
            roomSumTypeEl.textContent = '-';
            roomRateEl.value = '0';
            computeTotals();
            return;
        }
        roomSumNumEl.textContent = opt.getAttribute('data-number') || '-';
        roomSumTypeEl.textContent = opt.getAttribute('data-type') || '-';
        roomSumHotelEl.textContent = opt.getAttribute('data-hotel') || '{{ $settings->hotel_name }}';
        const rate = parseInt(opt.getAttribute('data-rate') || '0') || 0;
        if (!roomRateEl.value || parseInt(roomRateEl.value) === 0) {
            roomRateEl.value = rate;
        }
        computeTotals();
    }
    function ensurePaidFields() {
        const group = document.getElementById('paid_at_group');
        if (group) {
            group.style.display = 'none';
        }
        paidAtEl.value = '';
        paidAtEl.disabled = true;
        channelEl.required = (statusEl.value === 'paid');
    }
    discountEl.addEventListener('input', computeTotals);
    roomSelect.addEventListener('change', updateRoomSummary);
    checkInEl.addEventListener('change', computeNights);
    checkOutEl.addEventListener('change', computeNights);
    roomRateEl.addEventListener('input', computeTotals);
    statusEl.addEventListener('change', ensurePaidFields);
    ensurePaidFields();
    computeTotals();

    document.getElementById('nonstay-form').addEventListener('submit', function(e){
        // Tidak ada item tambahan, kirim langsung
    });
    updateRoomSummary();
    computeNights();
})();
</script>
@endsection