@csrf
<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label>Client</label>
    <select name="client_id" id="invoice_client_id" class="form-control" required>
                <option value="">-- Select Client --</option>
                @foreach($clients as $c)
            <option value="{{ $c->id }}" @selected(old('client_id', request('client_id', $invoice->client_id ?? '')) == $c->id)>
                        {{ $c->display_name ?? ($c->company_name ?: ($c->first_name.' '.$c->last_name)) }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label>Case (optional)</label>
    <select name="case_id" id="invoice_case_id" class="form-control" {{ old('client_id', request('client_id', $invoice->client_id ?? '')) ? '' : 'disabled' }}>
                <option value="">-- None --</option>
            </select>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label>Invoice Number</label>
            <input type="text" class="form-control" name="invoice_number" value="{{ old('invoice_number', $invoice->invoice_number ?? '') }}" required>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label>Invoice Date</label>
            <input type="date" class="form-control" name="invoice_date" value="{{ old('invoice_date', optional($invoice->invoice_date ?? null)->format('Y-m-d')) }}" required>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label>Due Date</label>
            <input type="date" class="form-control" name="due_date" value="{{ old('due_date', optional($invoice->due_date ?? null)->format('Y-m-d')) }}" required>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label>Status</label>
            <select name="status" class="form-control" required>
                @foreach(['draft','sent','partial','paid','overdue','cancelled'] as $st)
                    <option value="{{ $st }}" @selected(old('status', $invoice->status ?? 'draft') == $st)>{{ ucfirst($st) }}</option>
                @endforeach
            </select>
        </div>
    </div>
</div>
@php
    $defPpn = (float) (\App\Models\Setting::get('finance_default_ppn_rate', '11.00'));
    $defPph = (float) (\App\Models\Setting::get('finance_default_pph23_rate', '2.00'));
    $defIncl = (bool) (\App\Models\Setting::get('finance_default_tax_inclusive', '0'));
@endphp
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label class="d-flex justify-content-between align-items-center">
                <span>Invoice Items</span>
                <button type="button" id="btn-add-item" class="btn btn-sm btn-outline-primary">Add Item</button>
            </label>
            <div class="table-responsive">
                <table class="table table-sm" id="items-table">
                    <thead>
                        <tr>
                            <th style="width:50%">Description</th>
                            <th style="width:10%" class="text-right">Qty</th>
                            <th style="width:20%" class="text-right">Unit Price</th>
                            <th style="width:15%" class="text-right">Line Total</th>
                            <th style="width:5%"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $oldItems = old('items', isset($invoice) ? $invoice->items->toArray() : []);
                            if (!is_array($oldItems)) { $oldItems = []; }
                        @endphp
                        @forelse($oldItems as $i => $it)
                            <tr>
                                <td>
                                    @if(!empty($it['id']))
                                        <input type="hidden" name="items[{{ $i }}][id]" value="{{ $it['id'] }}">
                                    @endif
                                    <input type="text" name="items[{{ $i }}][description]" class="form-control form-control-sm item-desc" value="{{ $it['description'] ?? '' }}" required>
                                </td>
                                <td>
                                    <input type="number" step="0.01" min="0" name="items[{{ $i }}][quantity]" class="form-control form-control-sm text-right item-qty" value="{{ $it['quantity'] ?? 1 }}">
                                </td>
                                <td>
                                    <input type="number" step="0.01" min="0" name="items[{{ $i }}][unit_price]" class="form-control form-control-sm text-right item-price" value="{{ $it['unit_price'] ?? 0 }}">
                                </td>
                                <td class="text-right align-middle"><span class="item-line-total">0.00</span></td>
                                <td class="text-center align-middle">
                                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-item">&times;</button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td>
                                    <input type="text" name="items[0][description]" class="form-control form-control-sm item-desc" placeholder="Description" required>
                                </td>
                                <td>
                                    <input type="number" step="0.01" min="0" name="items[0][quantity]" class="form-control form-control-sm text-right item-qty" value="1">
                                </td>
                                <td>
                                    <input type="number" step="0.01" min="0" name="items[0][unit_price]" class="form-control form-control-sm text-right item-price" value="0">
                                </td>
                                <td class="text-right align-middle"><span class="item-line-total">0.00</span></td>
                                <td class="text-center align-middle">
                                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-item">&times;</button>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="3" class="text-right">Subtotal (DPP)</th>
                            <th class="text-right"><span id="subtotal_display">0.00</span></th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <input type="hidden" id="subtotal" name="subtotal" value="{{ old('subtotal', $invoice->subtotal ?? 0) }}">
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label class="d-block">PPN</label>
            <div class="d-flex align-items-center">
                <div class="custom-control custom-switch mr-2">
                    <input type="checkbox" class="custom-control-input" id="apply_ppn" name="apply_ppn" value="1" {{ old('apply_ppn', $invoice->apply_ppn ?? true) ? 'checked' : '' }}>
                    <label class="custom-control-label" for="apply_ppn">Enable</label>
                </div>
                <div class="input-group" style="width: 140px;">
                    <input type="number" step="0.01" min="0" max="100" class="form-control" id="ppn_rate" name="ppn_rate" value="{{ old('ppn_rate', $invoice->ppn_rate ?? $defPpn) }}">
                    <div class="input-group-append"><span class="input-group-text">%</span></div>
                </div>
            </div>
            <div class="custom-control custom-switch mt-2">
                <input type="checkbox" class="custom-control-input" id="tax_inclusive" name="tax_inclusive" value="1" {{ old('tax_inclusive', $invoice->tax_inclusive ?? $defIncl) ? 'checked' : '' }}>
                <label class="custom-control-label" for="tax_inclusive">Harga sudah termasuk PPN</label>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label class="d-block">PPh 23 (Pot. Pajak)</label>
            <div class="d-flex align-items-center">
                <div class="custom-control custom-switch mr-2">
                    <input type="checkbox" class="custom-control-input" id="apply_pph23" name="apply_pph23" value="1" {{ old('apply_pph23', $invoice->apply_pph23 ?? false) ? 'checked' : '' }}>
                    <label class="custom-control-label" for="apply_pph23">Enable</label>
                </div>
                <div class="input-group" style="width: 140px;">
                    <input type="number" step="0.01" min="0" max="100" class="form-control" id="pph23_rate" name="pph23_rate" value="{{ old('pph23_rate', $invoice->pph23_rate ?? $defPph) }}">
                    <div class="input-group-append"><span class="input-group-text">%</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label>PPN Amount</label>
            <input type="number" step="0.01" class="form-control" id="tax_amount" name="tax_amount" value="{{ old('tax_amount', $invoice->tax_amount ?? 0) }}" readonly>
        </div>
        <div class="form-group">
            <label>PPh23 (Withholding)</label>
            <input type="number" step="0.01" class="form-control" id="withholding_amount" name="withholding_amount" value="{{ old('withholding_amount', $invoice->withholding_amount ?? 0) }}" readonly>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4 ml-auto">
        <div class="form-group">
            <label>Total Amount</label>
            <input type="number" step="0.01" class="form-control" id="total_amount" name="total_amount" value="{{ old('total_amount', $invoice->total_amount ?? 0) }}" required readonly>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label>Paid Date</label>
            <input type="date" class="form-control" name="paid_date" value="{{ old('paid_date', optional($invoice->paid_date ?? null)->format('Y-m-d')) }}">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label>Payment Method</label>
            <input type="text" class="form-control" name="payment_method" value="{{ old('payment_method', $invoice->payment_method ?? '') }}">
        </div>
    </div>
</div>
<div class="form-group">
    <label>Notes</label>
    <textarea class="form-control" name="notes" rows="3">{{ old('notes', $invoice->notes ?? '') }}</textarea>
</div>
<div class="mt-2">
    <button class="btn btn-primary" type="submit">Save</button>
    <a href="{{ route('invoices.index') }}" class="btn btn-secondary">Cancel</a>
</div>

@section('js')
<script>
    (function(){
        // Dependent Case select based on Client selection
        const clientSel = document.getElementById('invoice_client_id');
        const caseSel = document.getElementById('invoice_case_id');
        const selectedCaseId = '{{ old('case_id', request('case_id', $invoice->case_id ?? '')) }}';
        function setCaseDisabled(disabled){ if (caseSel) caseSel.disabled = !!disabled; }
        function renderCaseOptions(items) {
            caseSel.innerHTML = '';
            const none = document.createElement('option');
            none.value = '';
            none.textContent = '-- None --';
            caseSel.appendChild(none);
            items.forEach(it => {
                const opt = document.createElement('option');
                opt.value = it.id;
                opt.textContent = it.text;
                if (String(selectedCaseId) === String(it.id)) opt.selected = true;
                caseSel.appendChild(opt);
            });
        }
        async function loadCasesForClient(clientId){
            if (!clientId) {
                renderCaseOptions([]);
                setCaseDisabled(true);
                return;
            }
            try {
                setCaseDisabled(true);
                caseSel.innerHTML = '<option>Loading…</option>';
                const url = `{{ route('invoices.casesByClient', ['client' => 'CLIENT_ID']) }}`.replace('CLIENT_ID', encodeURIComponent(clientId));
                const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
                const json = await res.json();
                const items = (json && json.data) ? json.data : [];
                renderCaseOptions(items);
                setCaseDisabled(false);
            } catch (e) {
                renderCaseOptions([]);
                setCaseDisabled(true);
            }
        }
        if (clientSel && caseSel) {
            clientSel.addEventListener('change', function(){
                // Reset previously selected case when client changes
                caseSel.value = '';
                loadCasesForClient(this.value);
            });
            // Initial load (edit page or when client preselected)
            if (clientSel.value) {
                loadCasesForClient(clientSel.value);
            }
        }
        function toNumber(v){ const n = parseFloat(v); return isNaN(n) ? 0 : n; }
        function round2(n){ return Math.round(n * 100) / 100; }

        // Items dynamic handling
        const itemsTable = document.getElementById('items-table');
        const itemsTbody = itemsTable ? itemsTable.querySelector('tbody') : null;
        const subtotalHidden = document.getElementById('subtotal');
        const subtotalDisplay = document.getElementById('subtotal_display');
        const btnAddItem = document.getElementById('btn-add-item');

        function computeItemsSubtotal(){
            let subtotal = 0;
            if (!itemsTbody) return 0;
            const rows = itemsTbody.querySelectorAll('tr');
            rows.forEach((tr) => {
                const qty = toNumber(tr.querySelector('.item-qty')?.value);
                const price = toNumber(tr.querySelector('.item-price')?.value);
                const line = round2(qty * price);
                const span = tr.querySelector('.item-line-total');
                if (span) span.textContent = line.toFixed(2);
                subtotal += line;
            });
            if (subtotalHidden) subtotalHidden.value = round2(subtotal).toFixed(2);
            if (subtotalDisplay) subtotalDisplay.textContent = round2(subtotal).toFixed(2);
            return subtotal;
        }

        function renumberItemInputs(){
            if (!itemsTbody) return;
            const rows = itemsTbody.querySelectorAll('tr');
            rows.forEach((tr, i) => {
                tr.querySelectorAll('input').forEach((inp) => {
                    const name = inp.getAttribute('name');
                    if (!name) return;
                    const newName = name.replace(/items\[[0-9]+\]/, `items[${i}]`);
                    inp.setAttribute('name', newName);
                });
            });
        }

        function addItemRow(prefill = { description: '', quantity: 1, unit_price: 0 }){
            if (!itemsTbody) return;
            const idx = itemsTbody.querySelectorAll('tr').length;
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>
                    <input type="text" name="items[${idx}][description]" class="form-control form-control-sm item-desc" placeholder="Description" value="${prefill.description ?? ''}" required>
                </td>
                <td>
                    <input type="number" step="0.01" min="0" name="items[${idx}][quantity]" class="form-control form-control-sm text-right item-qty" value="${prefill.quantity ?? 1}">
                </td>
                <td>
                    <input type="number" step="0.01" min="0" name="items[${idx}][unit_price]" class="form-control form-control-sm text-right item-price" value="${prefill.unit_price ?? 0}">
                </td>
                <td class="text-right align-middle"><span class="item-line-total">0.00</span></td>
                <td class="text-center align-middle">
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-item">&times;</button>
                </td>
            `;
            itemsTbody.appendChild(tr);
            computeItemsSubtotal();
            recalc();
        }

        function removeItemRow(btn){
            const tr = btn.closest('tr');
            if (tr && itemsTbody) {
                tr.remove();
                renumberItemInputs();
                computeItemsSubtotal();
                recalc();
            }
        }

        if (btnAddItem) btnAddItem.addEventListener('click', () => addItemRow());
        if (itemsTbody) {
            itemsTbody.addEventListener('input', (e) => {
                if (e.target.matches('.item-qty, .item-price')) {
                    computeItemsSubtotal();
                    recalc();
                }
            });
            itemsTbody.addEventListener('click', (e) => {
                if (e.target.matches('.btn-remove-item')) {
                    removeItemRow(e.target);
                }
            });
            // Initial compute for prefilled data
            computeItemsSubtotal();
        }

        function recalc(){
            const subtotal = toNumber(subtotalHidden ? subtotalHidden.value : 0);
            const applyPpn = document.getElementById('apply_ppn').checked;
            const ppnRate = toNumber(document.getElementById('ppn_rate').value);
            const taxInclusive = document.getElementById('tax_inclusive').checked;
            const applyPph23 = document.getElementById('apply_pph23').checked;
            const pph23Rate = toNumber(document.getElementById('pph23_rate').value);

            let dpp = subtotal;
            let ppnAmount = 0;
            if (applyPpn) {
                if (taxInclusive) {
                    dpp = ppnRate > 0 ? (subtotal / (1 + (ppnRate/100))) : subtotal;
                    ppnAmount = Math.max(0, subtotal - dpp);
                } else {
                    dpp = subtotal;
                    ppnAmount = dpp * (ppnRate/100);
                }
            } else {
                dpp = subtotal;
                ppnAmount = 0;
            }
            let withholding = applyPph23 ? (dpp * (pph23Rate/100)) : 0;
            let total;
            if (applyPpn && taxInclusive) {
                total = subtotal - withholding;
            } else {
                total = dpp + ppnAmount - withholding;
            }
            document.getElementById('tax_amount').value = round2(ppnAmount).toFixed(2);
            document.getElementById('withholding_amount').value = round2(withholding).toFixed(2);
            document.getElementById('total_amount').value = round2(total).toFixed(2);
        }

        ['apply_ppn','ppn_rate','tax_inclusive','apply_pph23','pph23_rate'].forEach(id => {
            const el = document.getElementById(id);
            if (el) el.addEventListener('input', recalc);
            if (el && (el.type === 'checkbox')) el.addEventListener('change', recalc);
        });
        recalc();
    })();
</script>
@append