@php
    $jenisOptions = ['Material', 'Jasa', 'Operasional', 'Transport', 'Akomodasi', 'Lainnya'];
    $rows = old('items');

    if ($rows === null && isset($items) && count($items) > 0) {
        $rows = collect($items)->map(function ($item) {
            return [
                'tanggal_biaya' => $item->tanggal_biaya ?? '',
                'jenis_biaya' => $item->jenis_biaya ?? 'Operasional',
                'nama_barang' => $item->nama_barang ?? '',
                'deskripsi' => $item->deskripsi ?? '',
                'qty' => $item->qty ?? 1,
                'satuan' => $item->satuan ?? '',
                'harga_satuan' => $item->harga_satuan ?? 0,
                'nominal' => $item->nominal ?? 0,
            ];
        })->toArray();
    }

    if (empty($rows)) {
        $rows = [
            [
                'tanggal_biaya' => date('Y-m-d'),
                'jenis_biaya' => 'Operasional',
                'nama_barang' => '',
                'deskripsi' => '',
                'qty' => 1,
                'satuan' => '',
                'harga_satuan' => 0,
                'nominal' => 0,
            ],
        ];
    }
@endphp

<section class="card erp-card" style="margin-bottom:1rem;">
    <div class="card-header erp-card-header">
        <div>
            <h2>Data SPJ</h2>
            <p>SPJ menjadi sumber realisasi biaya proyek.</p>
        </div>
    </div>

    <div class="form-grid">
        <div class="form-group">
            <label for="tanggal_spj">Tanggal SPJ <span class="text-danger">*</span></label>
            <input type="date" id="tanggal_spj" name="tanggal_spj" class="form-control erp-input" required
                   value="{{ old('tanggal_spj', $spj->tanggal_spj ?? date('Y-m-d')) }}">
        </div>

        <div class="form-group">
            <label for="status">Status</label>
            @php $statusValue = old('status', $spj->status ?? 'Diajukan'); @endphp
            <select name="status" id="status" class="form-control erp-input">
                @foreach(['Draft','Diajukan','Disetujui','Ditolak'] as $status)
                    <option value="{{ $status }}" {{ $statusValue === $status ? 'selected' : '' }}>{{ $status }}</option>
                @endforeach
            </select>
        </div>

        <div class="form-group form-group-full">
            <label for="keterangan">Keterangan</label>
            <textarea name="keterangan" id="keterangan" rows="3" class="form-control erp-input">{{ old('keterangan', $spj->keterangan ?? '') }}</textarea>
        </div>
    </div>
</section>

<section class="card erp-card">
    <div class="card-header erp-card-header" style="display:flex; justify-content:space-between; gap:1rem; align-items:center;">
        <div>
            <h2>Detail Biaya</h2>
            <p>Kategorikan biaya agar masuk ke cost control proyek.</p>
        </div>

        <button type="button" class="btn btn-secondary" id="addItemBtn">+ Tambah Item</button>
    </div>

    <div class="table-responsive erp-table-wrap">
        <table class="data-table erp-table">
            <thead>
                <tr>
                    <th style="width:46px;">No</th>
                    <th>Tanggal</th>
                    <th>Jenis</th>
                    <th>Barang/Jasa</th>
                    <th>Deskripsi</th>
                    <th>Qty</th>
                    <th>Satuan</th>
                    <th>Harga</th>
                    <th>Nominal</th>
                    <th>Bukti</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody id="itemBody">
                @foreach($rows as $i => $row)
                    <tr class="item-row">
                        <td class="row-number">{{ $i + 1 }}</td>
                        <td><input type="date" name="items[{{ $i }}][tanggal_biaya]" class="form-control erp-input" value="{{ $row['tanggal_biaya'] ?? date('Y-m-d') }}"></td>
                        <td>
                            <select name="items[{{ $i }}][jenis_biaya]" class="form-control erp-input">
                                @foreach($jenisOptions as $jenis)
                                    <option value="{{ $jenis }}" {{ ($row['jenis_biaya'] ?? 'Operasional') === $jenis ? 'selected' : '' }}>{{ $jenis }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td><input type="text" name="items[{{ $i }}][nama_barang]" class="form-control erp-input" value="{{ $row['nama_barang'] ?? '' }}"></td>
                        <td><input type="text" name="items[{{ $i }}][deskripsi]" class="form-control erp-input" value="{{ $row['deskripsi'] ?? '' }}" required></td>
                        <td><input type="text" name="items[{{ $i }}][qty]" class="form-control item-qty" value="{{ $row['qty'] ?? 1 }}"></td>
                        <td><input type="text" name="items[{{ $i }}][satuan]" class="form-control erp-input" value="{{ $row['satuan'] ?? '' }}"></td>
                        <td><input type="text" name="items[{{ $i }}][harga_satuan]" class="form-control item-harga" value="{{ $row['harga_satuan'] ?? 0 }}"></td>
                        <td><input type="text" name="items[{{ $i }}][nominal]" class="form-control item-nominal" value="{{ $row['nominal'] ?? 0 }}"></td>
                        <td><input type="file" name="item_bukti[{{ $i }}]" class="form-control erp-input"></td>
                        <td><button type="button" class="btn btn-sm btn-danger remove-item">Hapus</button></td>
                    </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="8" style="text-align:right;">Total SPJ</th>
                    <th><input type="text" id="totalSpj" class="form-control erp-input" readonly value="0"></th>
                    <th colspan="2"></th>
                </tr>
            </tfoot>
        </table>
    </div>

    <div style="display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem;">
        <button type="submit" class="btn btn-primary">Simpan SPJ</button>
        <a href="{{ route('kasbon.show', $kasbon->id_kasbon) }}" class="btn btn-secondary">Batal</a>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const body = document.getElementById('itemBody');
    const addBtn = document.getElementById('addItemBtn');
    const total = document.getElementById('totalSpj');
    const jenisOptions = @json($jenisOptions);

    function parseNumber(value) {
        value = String(value || '0').trim().replace(/\./g, '').replace(',', '.');
        const number = parseFloat(value);
        return isNaN(number) ? 0 : number;
    }

    function formatNumber(value) {
        return new Intl.NumberFormat('id-ID', { maximumFractionDigits: 2 }).format(value || 0);
    }

    function calculate() {
        let grand = 0;

        body.querySelectorAll('.item-row').forEach(row => {
            const qty = parseNumber(row.querySelector('.item-qty')?.value);
            const harga = parseNumber(row.querySelector('.item-harga')?.value);
            const nominal = row.querySelector('.item-nominal');
            const currentNominal = parseNumber(nominal?.value);
            const computed = qty * harga;

            if (computed > 0 && currentNominal === 0) {
                nominal.value = formatNumber(computed);
                grand += computed;
            } else {
                grand += currentNominal;
            }
        });

        total.value = formatNumber(grand);
    }

    function refreshRows() {
        body.querySelectorAll('.item-row').forEach((row, index) => {
            row.querySelector('.row-number').textContent = index + 1;

            row.querySelectorAll('input, select').forEach(input => {
                if (input.name) {
                    input.name = input.name.replace(/\[\d+\]/, '[' + index + ']');
                }
            });
        });
    }

    function bind(row) {
        row.querySelectorAll('.item-qty, .item-harga, .item-nominal').forEach(input => {
            input.addEventListener('input', calculate);
        });

        row.querySelector('.remove-item')?.addEventListener('click', function () {
            if (body.querySelectorAll('.item-row').length <= 1) {
                alert('Minimal harus ada satu item.');
                return;
            }

            row.remove();
            refreshRows();
            calculate();
        });
    }

    function addRow() {
        const index = body.querySelectorAll('.item-row').length;
        const tr = document.createElement('tr');
        tr.className = 'item-row';

        const options = jenisOptions.map(j => `<option value="${j}">${j}</option>`).join('');

        tr.innerHTML = `
            <td class="row-number">${index + 1}</td>
            <td><input type="date" name="items[${index}][tanggal_biaya]" class="form-control erp-input" value="{{ date('Y-m-d') }}"></td>
            <td><select name="items[${index}][jenis_biaya]" class="form-control erp-input">${options}</select></td>
            <td><input type="text" name="items[${index}][nama_barang]" class="form-control erp-input"></td>
            <td><input type="text" name="items[${index}][deskripsi]" class="form-control erp-input" required></td>
            <td><input type="text" name="items[${index}][qty]" class="form-control item-qty" value="1"></td>
            <td><input type="text" name="items[${index}][satuan]" class="form-control erp-input"></td>
            <td><input type="text" name="items[${index}][harga_satuan]" class="form-control item-harga" value="0"></td>
            <td><input type="text" name="items[${index}][nominal]" class="form-control item-nominal" value="0"></td>
            <td><input type="file" name="item_bukti[${index}]" class="form-control erp-input"></td>
            <td><button type="button" class="btn btn-sm btn-danger remove-item">Hapus</button></td>
        `;

        body.appendChild(tr);
        bind(tr);
        refreshRows();
        calculate();
    }

    body.querySelectorAll('.item-row').forEach(bind);
    addBtn?.addEventListener('click', addRow);
    calculate();
});
</script>