@extends('layouts.app')

@section('title', 'Buat Invoice Only')
@section('page-title', 'Buat Invoice Only')

@section('page-actions')
<div class="btn-toolbar mb-2 mb-md-0">
    <a href="{{ route('invoice-only.index') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-2"></i>Kembali ke Daftar Invoice
    </a>
</div>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-file-invoice me-2"></i>Form Invoice Only
                </h6>
            </div>
            <div class="card-body">
                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('invoice-only.store') }}" method="POST">
                    @csrf
                    
                    <!-- Customer Information -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5 class="text-primary mb-3">Informasi Customer</h5>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="customer_name" class="form-label">Nama Customer <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="customer_name" name="customer_name" value="{{ old('customer_name') }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="customer_email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="customer_email" name="customer_email" value="{{ old('customer_email') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="customer_phone" class="form-label">Telepon</label>
                                <input type="text" class="form-control" id="customer_phone" name="customer_phone" value="{{ old('customer_phone') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="customer_identity_number" class="form-label">No. Identitas</label>
                                <input type="text" class="form-control" id="customer_identity_number" name="customer_identity_number" value="{{ old('customer_identity_number') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="company_name" class="form-label">Nama Perusahaan</label>
                                <input type="text" class="form-control" id="company_name" name="company_name" value="{{ old('company_name') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="customer_address" class="form-label">Alamat</label>
                                <textarea class="form-control" id="customer_address" name="customer_address" rows="2">{{ old('customer_address') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Room Information -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5 class="text-primary mb-3">Informasi Kamar</h5>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="room_number" class="form-label">Nomor Kamar</label>
                                <input type="text" class="form-control" id="room_number" name="room_number" value="{{ old('room_number') }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="room_type" class="form-label">Tipe Kamar</label>
                                <input type="text" class="form-control" id="room_type" name="room_type" value="{{ old('room_type') }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="room_floor" class="form-label">Lantai</label>
                                <input type="number" class="form-control" id="room_floor" name="room_floor" value="{{ old('room_floor') }}" min="1">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="room_capacity" class="form-label">Kapasitas</label>
                                <input type="number" class="form-control" id="room_capacity" name="room_capacity" value="{{ old('room_capacity') }}" min="1">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="room_price_per_night" class="form-label">Harga per Malam</label>
                                <input type="number" class="form-control" id="room_price_per_night" name="room_price_per_night" value="{{ old('room_price_per_night') }}" min="0" step="0.01">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="stay_duration" class="form-label">Durasi Menginap (Hari)</label>
                                <input type="number" class="form-control" id="stay_duration" name="stay_duration" value="{{ old('stay_duration') }}" min="1">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="check_in_date" class="form-label">Tanggal Check-in</label>
                                <input type="date" class="form-control" id="check_in_date" name="check_in_date" value="{{ old('check_in_date') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="check_out_date" class="form-label">Tanggal Check-out</label>
                                <input type="date" class="form-control" id="check_out_date" name="check_out_date" value="{{ old('check_out_date') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">&nbsp;</label>
                                <div class="form-control-plaintext">
                                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="calculateRoomTotal()">
                                        <i class="fas fa-calculator me-1"></i>Hitung Total Kamar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Invoice Details -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5 class="text-primary mb-3">Detail Invoice</h5>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="description" class="form-label">Deskripsi</label>
                                <textarea class="form-control" id="description" name="description" rows="3" placeholder="Deskripsi layanan atau produk">{{ old('description') }}</textarea>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="subtotal" class="form-label">Subtotal <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="subtotal" name="subtotal" value="{{ old('subtotal', 0) }}" min="0" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="tax_amount" class="form-label">Pajak (Rp)</label>
                                <input type="number" class="form-control" id="tax_amount" name="tax_amount" value="{{ old('tax_amount', 0) }}" min="0" step="0.01">
                                <div class="form-text">Masukkan jumlah pajak dalam rupiah</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="service_charge" class="form-label">Service Charge (Rp)</label>
                                <input type="number" class="form-control" id="service_charge" name="service_charge" value="{{ old('service_charge', 0) }}" min="0" step="0.01">
                                <div class="form-text">Masukkan jumlah service charge dalam rupiah</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="total_amount" class="form-label">Total Amount <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="total_amount" name="total_amount" value="{{ old('total_amount', 0) }}" min="0" step="0.01" required readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="paid_amount" class="form-label">Jumlah Bayar</label>
                                <input type="number" class="form-control" id="paid_amount" name="paid_amount" value="{{ old('paid_amount', 0) }}" min="0" step="0.01">
                            </div>
                        </div>
                    </div>

                    <!-- Payment Information -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5 class="text-primary mb-3">Informasi Pembayaran</h5>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="payment_method" class="form-label">Metode Pembayaran <span class="text-danger">*</span></label>
                                <select class="form-control" id="payment_method" name="payment_method" required>
                                    <option value="">Pilih Metode Pembayaran</option>
                                    <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>Tunai</option>
                                    <option value="credit_card" {{ old('payment_method') == 'credit_card' ? 'selected' : '' }}>Credit Card</option>
                                    <option value="debit_card" {{ old('payment_method') == 'debit_card' ? 'selected' : '' }}>Debit Card</option>
                                    <option value="bank_transfer" {{ old('payment_method') == 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                <select class="form-control" id="status" name="status" required>
                                    <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                                    <option value="issued" {{ old('status') == 'issued' ? 'selected' : '' }}>Issued</option>
                                    <option value="paid" {{ old('status') == 'paid' ? 'selected' : '' }}>Paid</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="notes" class="form-label">Catatan</label>
                                <textarea class="form-control" id="notes" name="notes" rows="2" placeholder="Catatan tambahan">{{ old('notes') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="text-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Simpan Invoice
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const subtotalInput = document.getElementById('subtotal');
    const taxAmountInput = document.getElementById('tax_amount');
    const serviceChargeInput = document.getElementById('service_charge');
    const totalAmountInput = document.getElementById('total_amount');

    function calculateTotals() {
        const subtotal = parseFloat(subtotalInput.value) || 0;
        const taxAmount = parseFloat(taxAmountInput.value) || 0;
        const serviceCharge = parseFloat(serviceChargeInput.value) || 0;
        const totalAmount = subtotal + taxAmount + serviceCharge;

        totalAmountInput.value = totalAmount.toFixed(2);
    }

    subtotalInput.addEventListener('input', calculateTotals);
    taxAmountInput.addEventListener('input', calculateTotals);
    serviceChargeInput.addEventListener('input', calculateTotals);
    
    // Calculate on page load
    calculateTotals();
});

function calculateRoomTotal() {
    const pricePerNight = parseFloat(document.getElementById('room_price_per_night').value) || 0;
    const duration = parseFloat(document.getElementById('stay_duration').value) || 0;
    const roomTotal = pricePerNight * duration;
    
    // Set the calculated room total as subtotal
    document.getElementById('subtotal').value = roomTotal.toFixed(2);
    
    // Recalculate totals
    calculateTotals();
    
    // Show alert
    alert(`Total kamar: Rp ${roomTotal.toLocaleString('id-ID')}\n(Harga per malam: Rp ${pricePerNight.toLocaleString('id-ID')} × ${duration} hari)`);
}
</script>
@endsection