@extends('layouts.app')
@section('title', 'Invoice Rentcar')
@section('page-title', 'Buat Invoice Rentcar Baru')

@push('styles')
<style>
.inv-card{background:white;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.08);overflow:hidden;margin-bottom:1.25rem}
.inv-card-hdr{background:var(--primary-green);color:white;padding:.75rem 1.25rem;font-weight:600;display:flex;align-items:center;font-size:.95rem}
.inv-card-hdr i{margin-right:.5rem}
.inv-card-body{padding:1.5rem}
.inv-card-body-sm{padding:1.25rem}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:.35rem 0;font-size:.875rem}
.sum-row .sl{color:#6c757d}
.sum-total{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:1.1rem;color:var(--primary-green);border-top:2px solid #dee2e6;margin-top:.5rem;padding-top:.75rem}
.hint-box{background:#f0faf5;border:1px solid #c3e6cb;border-radius:6px;padding:.55rem .8rem;font-size:.8rem;color:#155724;display:flex;align-items:flex-start;margin-top:.75rem}
.hint-box i{margin-right:.4rem;margin-top:2px;flex-shrink:0}
.rp-grp{position:relative}
.rp-grp .rp-lbl{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#6c757d;z-index:10;font-size:.875rem;pointer-events:none}
.rp-grp input{padding-left:34px!important}
.items-tbl thead th{background:#f8f9fa;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#495057;border-bottom:2px solid #dee2e6;padding:.5rem}
.items-tbl td{vertical-align:middle;padding:.4rem .5rem}
.items-tbl .row-total{white-space:nowrap}
.notes-cnt{font-size:.75rem;color:#6c757d;text-align:right;margin-top:.25rem}
.btn-success{background-color:var(--primary-green)!important;border-color:var(--primary-green)!important}
.btn-success:hover,.btn-success:focus{filter:brightness(90%)}
</style>
@endpush

@section('content')
<div class="row mb-3">
    <div class="col-12">
        <a href="{{ route('invoices.index') }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left"></i> Kembali</a>
    </div>
</div>

<form method="POST" action="{{ route('invoices.store.rentcar') }}" id="invoice-form">
@csrf

<div class="row">
    <div class="col-lg-9">
        <div class="inv-card">
            <div class="inv-card-hdr"><i class="fas fa-file-invoice"></i> Informasi Invoice</div>
            <div class="inv-card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>No. Invoice</label>
                            <input type="text" class="form-control" value="{{ $number }}" readonly>
                            <small class="text-muted">Otomatis digenerate</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Pelanggan <span class="text-danger">*</span></label>
                            <select name="customer_id" class="form-control" required>
                                <option value="">-- Pilih Pelanggan --</option>
                                @foreach($customers as $c)
                                    <option value="{{ $c->id }}" @selected(old('customer_id') == $c->id)>{{ $c->name }}</option>
                                @endforeach
                            </select>
                            <small class="text-muted"><a href="{{ route('customers.create') }}" target="_blank">+ Tambah pelanggan baru</a></small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group mb-0">
                            <label>Tanggal Invoice <span class="text-danger">*</span></label>
                            <input type="date" name="invoice_date" class="form-control" value="{{ old('invoice_date', now()->format('Y-m-d')) }}" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group mb-0">
                            <label>Jatuh Tempo</label>
                            <input type="date" name="due_date" class="form-control" value="{{ old('due_date') }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group mb-0">
                            <label>Status</label>
                            <select name="status" class="form-control">
                                <option value="draft" @selected(old('status','draft')=='draft')>Draft</option>
                                <option value="sent" @selected(old('status')=='sent')>Terkirim</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="inv-card">
            <div class="inv-card-hdr"><i class="fas fa-car"></i> Detail Sewa Kendaraan</div>
            <div class="inv-card-body">
                <div class="table-responsive">
                    <table class="table items-tbl" id="items-table">
                        <thead>
                            <tr>
                                <th style="width:36px">No</th>
                                <th style="width:145px">Mobil</th>
                                <th>Deskripsi</th>
                                <th style="width:95px">No. Kendaraan</th>
                                <th style="width:80px">Durasi (Hr)</th>
                                <th style="width:65px">Qty</th>
                                <th style="width:120px">Harga/Hari</th>
                                <th style="width:85px" class="text-right">Total</th>
                                <th style="width:36px"></th>
                            </tr>
                        </thead>
                        <tbody id="items-body"></tbody>
                    </table>
                </div>
                <button type="button" class="btn btn-success btn-sm" id="add-item">
                    <i class="fas fa-plus"></i> Tambah Kendaraan
                </button>
            </div>
        </div>

        <div class="inv-card">
            <div class="inv-card-hdr"><i class="fas fa-calculator"></i> Pembayaran &amp; Potongan</div>
            <div class="inv-card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">Sudah Dibayar</label>
                            <div class="rp-grp"><span class="rp-lbl">Rp</span><input type="text" name="amount_paid" id="inp-paid" class="form-control form-control-sm currency-input" value="{{ old('amount_paid', 0) }}"></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">Diskon</label>
                            <div class="rp-grp"><span class="rp-lbl">Rp</span><input type="text" name="discount" id="inp-discount" class="form-control form-control-sm currency-input" value="{{ old('discount', 0) }}"></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">Pajak</label>
                            <div class="rp-grp"><span class="rp-lbl">Rp</span><input type="text" name="tax" id="inp-tax" class="form-control form-control-sm currency-input" value="{{ old('tax', 0) }}"></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">Biaya Admin</label>
                            <div class="rp-grp"><span class="rp-lbl">Rp</span><input type="text" name="shipping_cost" id="inp-shipping" class="form-control form-control-sm currency-input" value="{{ old('shipping_cost', 0) }}"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3">
        <div class="inv-card">
            <div class="inv-card-hdr"><i class="fas fa-receipt"></i> Ringkasan Invoice</div>
            <div class="inv-card-body-sm">
                <div class="sum-row"><span class="sl">Jumlah Kendaraan</span><span id="disp-count">0</span></div>
                <div class="sum-row"><span class="sl">Subtotal</span><span id="disp-subtotal">Rp 0</span></div>
                <div class="sum-row"><span class="sl">Dibayar (-)</span><span class="text-danger" id="disp-paid">Rp 0</span></div>
                <div class="sum-row"><span class="sl">Diskon (-)</span><span class="text-danger" id="disp-discount">Rp 0</span></div>
                <div class="sum-row"><span class="sl">Pajak (+)</span><span class="text-success" id="disp-tax">Rp 0</span></div>
                <div class="sum-row"><span class="sl">Admin (+)</span><span class="text-success" id="disp-shipping">Rp 0</span></div>
                <div class="sum-total"><span>Grand Total</span><span id="disp-total">Rp 0</span></div>
                <div class="hint-box"><i class="fas fa-info-circle"></i><span>Total otomatis terhitung setelah menambahkan kendaraan.</span></div>
            </div>
        </div>

        <div class="inv-card">
            <div class="inv-card-hdr"><i class="fas fa-sticky-note"></i> Catatan Tambahan</div>
            <div class="inv-card-body-sm">
                <textarea name="notes" id="inp-notes" class="form-control" rows="4" maxlength="500" placeholder="Catatan untuk pelanggan...">{{ old('notes') }}</textarea>
                <div class="notes-cnt"><span id="notes-len">0</span> / 500</div>
            </div>
        </div>

        <div class="row no-gutters">
            <div class="col-6 pr-1">
                <button type="submit" class="btn btn-outline-secondary btn-block"><i class="fas fa-save"></i> Simpan Draft</button>
            </div>
            <div class="col-6 pl-1">
                <button type="submit" class="btn btn-success btn-block"><i class="fas fa-paper-plane"></i> Simpan & Buat Invoice</button>
            </div>
        </div>
    </div>
</div>
</form>
@endsection

@push('scripts')
<script>
const rentcars = @json($rentcars);
let itemCount = 0;

function parseCurrency(val) {
    if (typeof val === 'number') return val;
    return parseFloat((val || '').toString().replace(/\D/g, '')) || 0;
}

function formatCurrency(val) {
    return (parseFloat(val) || 0).toLocaleString('id-ID');
}

function fmtRp(n) {
    return 'Rp ' + Math.max(0, n).toLocaleString('id-ID');
}

function addItem(car = '', desc = '', noKendaraan = '', durasi = 1, qty = 1, price = 0) {
    const idx = itemCount++;
    let opts = '<option value="">-- Pilih Mobil --</option>';
    rentcars.forEach(r => {
        opts += `<option value="${r.name}" data-type="${r.type||''}" ${car == r.name ? 'selected' : ''}>${r.name}</option>`;
    });

    document.getElementById('items-body').insertAdjacentHTML('beforeend', `
    <tr class="item-row" data-idx="${idx}">
        <td class="text-center text-muted small row-num"></td>
        <td><select name="items[${idx}][details][car]" class="form-control form-control-sm select-car" required>${opts}</select></td>
        <td><input type="text" name="items[${idx}][description]" class="form-control form-control-sm" value="${desc}" placeholder="Ex: Sewa Avanza 3 hari" required></td>
        <td><input type="text" name="items[${idx}][details][no_kendaraan]" class="form-control form-control-sm" value="${noKendaraan}" placeholder="Plat nomor"></td>
        <td><input type="number" name="items[${idx}][details][duration]" class="form-control form-control-sm duration" value="${durasi}" min="1" step="1" required></td>
        <td><input type="number" name="items[${idx}][quantity]" class="form-control form-control-sm qty" value="${qty}" min="1" step="1" required></td>
        <td><div class="rp-grp"><span class="rp-lbl">Rp</span><input type="text" name="items[${idx}][unit_price]" class="form-control form-control-sm unit-price currency-input" value="${formatCurrency(price)}" required></div></td>
        <td class="text-right"><strong class="row-total">${fmtRp(qty * durasi * price)}</strong><input type="hidden" class="row-total-val" value="${qty * durasi * price}"></td>
        <td class="text-center"><button type="button" class="btn btn-sm btn-link text-danger p-0 remove-item"><i class="fas fa-trash-alt"></i></button></td>
    </tr>`);

    reNumberRows();
    recalc();
}

function reNumberRows() {
    document.querySelectorAll('#items-body tr').forEach((tr, i) => tr.querySelector('.row-num').textContent = i + 1);
}

function recalc() {
    let subtotal = 0, count = 0;
    document.querySelectorAll('#items-body .item-row').forEach(tr => {
        const qty = parseFloat(tr.querySelector('.qty').value) || 0;
        const durasi = parseFloat(tr.querySelector('.duration').value) || 0;
        const price = parseCurrency(tr.querySelector('.unit-price').value);
        const t = qty * durasi * price;
        tr.querySelector('.row-total').textContent = fmtRp(t);
        tr.querySelector('.row-total-val').value = t;
        subtotal += t; count++;
    });
    const paid = parseCurrency(document.getElementById('inp-paid').value);
    const discount = parseCurrency(document.getElementById('inp-discount').value);
    const tax = parseCurrency(document.getElementById('inp-tax').value);
    const shipping = parseCurrency(document.getElementById('inp-shipping').value);
    document.getElementById('disp-count').textContent = count;
    document.getElementById('disp-subtotal').textContent = fmtRp(subtotal);
    document.getElementById('disp-paid').textContent = fmtRp(paid);
    document.getElementById('disp-discount').textContent = fmtRp(discount);
    document.getElementById('disp-tax').textContent = fmtRp(tax);
    document.getElementById('disp-shipping').textContent = fmtRp(shipping);
    document.getElementById('disp-total').textContent = fmtRp(subtotal - paid - discount + tax + shipping);
}

document.addEventListener('input', e => {
    if (e.target.classList.contains('currency-input')) {
        const v = e.target.value.replace(/\D/g, '');
        e.target.value = v === '' ? '0' : parseInt(v, 10).toLocaleString('id-ID');
        recalc();
    }
    if (e.target.matches('.qty, .unit-price, .duration')) recalc();
});

document.addEventListener('change', e => {
    if (e.target.classList.contains('select-car')) {
        const opt = e.target.selectedOptions[0];
        if (!opt.value) return;
        const tr = e.target.closest('tr');
        const desc = tr.querySelector('input[name*="[description]"]');
        if (!desc.value) desc.value = `Sewa ${opt.value} (${opt.dataset.type || ''})`;
    }
});

document.getElementById('items-body').addEventListener('click', e => {
    if (e.target.closest('.remove-item')) { e.target.closest('tr').remove(); reNumberRows(); recalc(); }
});

document.getElementById('add-item').addEventListener('click', () => addItem());

document.getElementById('inp-notes').addEventListener('input', function() {
    document.getElementById('notes-len').textContent = this.value.length;
});

document.getElementById('invoice-form').addEventListener('submit', function() {
    document.querySelectorAll('.currency-input').forEach(i => { i.value = parseCurrency(i.value); });
});

addItem();
</script>
@endpush