@extends('adminlte::page')

@section('title', 'Edit Items for '.$invoice->invoice_number)

@section('content_header')
    <h1>Items for {{ $invoice->invoice_number }}</h1>
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{ route('invoices.update-items', $invoice) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="form-group">
                    <label>Client</label>
                    <div class="form-control-plaintext">{{ $invoice->client->display_name ?? '—' }}</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="d-flex justify-content-between align-items-center mb-2">
                    <strong>DESCRIPTION</strong>
                    <button type="button" id="btn-add-item" class="btn btn-sm btn-outline-primary">Add Item</button>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm" id="items-table">
                        <thead>
                            <tr>
                                <th style="width:50%">Description</th>
                                <th class="text-right" style="width:10%">Qty</th>
                                <th class="text-right" style="width:20%">Unit Price</th>
                                <th class="text-right" style="width:15%">Line Total</th>
                                <th style="width:5%"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $items = old('items', $invoice->items->toArray()); @endphp
                            @forelse(($items ?? []) 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 class="row mt-3">
                    <div class="col-md-4">
                        <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 class="col-md-4">
                        <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 class="col-md-4">
                        <div class="form-group">
                            <label>Total Amount</label>
                            <input type="number" step="0.01" class="form-control" id="total_amount" value="0.00" readonly>
                        </div>
                    </div>
                </div>

                <div class="mt-3">
                    <button class="btn btn-primary" type="submit">Save Items</button>
                    <a href="{{ route('invoices.index') }}" class="btn btn-secondary">Back</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('js')
<script>
(function(){
    function toNumber(v){ const n = parseFloat(v); return isNaN(n) ? 0 : n; }
    function round2(n){ return Math.round(n * 100) / 100; }
    const itemsTbody = document.querySelector('#items-table tbody');
    const subtotalHidden = document.getElementById('subtotal');
    const subtotalDisplay = document.getElementById('subtotal_display');
    const btnAddItem = document.getElementById('btn-add-item');

    function computeItemsSubtotal(){
        let subtotal = 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;
        });
        subtotalHidden.value = round2(subtotal).toFixed(2);
        subtotalDisplay.textContent = round2(subtotal).toFixed(2);
        return subtotal;
    }

    function recalc(){
        const subtotal = toNumber(subtotalHidden.value);
        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, ppnAmount = 0;
        if (applyPpn) {
            if (taxInclusive) {
                dpp = ppnRate > 0 ? (subtotal / (1 + (ppnRate/100))) : subtotal;
                ppnAmount = Math.max(0, subtotal - dpp);
            } else {
                ppnAmount = dpp * (ppnRate/100);
            }
        }
        const withholding = applyPph23 ? (dpp * (pph23Rate/100)) : 0;
        const total = (applyPpn && taxInclusive) ? (subtotal - withholding) : (dpp + ppnAmount - withholding);
        document.getElementById('total_amount').value = round2(total).toFixed(2);
    }

    function renumberItemInputs(){
        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 }){
        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) {
            tr.remove();
            renumberItemInputs();
            computeItemsSubtotal();
            recalc();
        }
    }

    if (btnAddItem) btnAddItem.addEventListener('click', () => addItemRow());
    itemsTbody.addEventListener('input', function(e){ if (e.target.matches('.item-qty, .item-price')) { computeItemsSubtotal(); recalc(); }});
    itemsTbody.addEventListener('click', function(e){ if (e.target.matches('.btn-remove-item')) { removeItemRow(e.target); }});
    computeItemsSubtotal(); recalc();
})();
</script>
@endsection