@extends('layouts.app')

@section('title', 'RAB Kegiatan')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><a href="{{ route('pkbm.kegiatan.administration') }}">Administrasi Kegiatan</a><i class="bi bi-chevron-right" aria-hidden="true"></i>RAB & Realisasi</p>
            <h1 class="pkbm-dashboard__title">Anggaran Kegiatan</h1>
            <p class="pkbm-dashboard__subtitle">{{ $activity->judul_kegiatan }} · kelola rencana biaya, pengeluaran aktual, dan sisa anggaran.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('pkbm.kegiatan.administration.print-budget', $activity->id) }}" target="_blank" rel="noopener" class="sp-btn-primary"><i class="bi bi-printer" aria-hidden="true"></i>Cetak RAB</a>
            <a href="{{ route('pkbm.kegiatan.administration') }}" class="sp-btn-secondary"><i class="bi bi-arrow-left" aria-hidden="true"></i>Kembali</a>
        </div>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i><div><p class="font-semibold">Periksa kembali data anggaran.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>
    @endif

    <section class="grid grid-cols-3 gap-2 sm:gap-3" data-budget-summary>
        @foreach ([['Rencana anggaran', $totalBudget, 'bg-blue-50 text-blue-700', 'bi-wallet2', 'budget-summary-total'], ['Realisasi', $totalRealization, 'bg-violet-50 text-violet-700', 'bi-arrow-repeat', 'budget-summary-realization'], ['Sisa anggaran', $totalBudget - $totalRealization, $totalBudget - $totalRealization < 0 ? 'bg-rose-50 text-rose-700' : 'bg-emerald-50 text-emerald-700', 'bi-piggy-bank', 'budget-summary-balance']] as [$label, $amount, $color, $icon, $id])
            <article class="sp-card flex min-w-0 items-center gap-2 p-3 sm:gap-4 sm:p-5">
                <span class="grid size-9 shrink-0 place-items-center rounded-xl {{ $color }} text-lg sm:size-11 sm:text-xl"><i class="bi {{ $icon }}" aria-hidden="true"></i></span>
                <div class="min-w-0"><p class="truncate text-[10px] font-semibold uppercase tracking-wide text-slate-500 sm:text-xs">{{ $label }}</p><p id="{{ $id }}" class="mt-1 truncate text-sm font-bold text-slate-900 sm:text-xl">Rp {{ number_format($amount, 0, ',', '.') }}</p></div>
            </article>
        @endforeach
    </section>

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-2">
            <div><h2 class="sp-section-title">Rincian anggaran</h2><p class="mt-1 text-xs text-slate-500">Perubahan tersimpan otomatis saat Anda mengisi setiap baris.</p></div>
            @if ($canManage)
                <span class="text-xs text-slate-500"><i class="bi bi-cloud-check mr-1 text-emerald-600" aria-hidden="true"></i>Tersimpan otomatis</span>
            @endif
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-full" data-budget-table>
                <thead>
                    <tr>
                        <th class="w-12">No.</th>
                        <th>Nama item</th>
                        <th class="w-24">Volume</th>
                        <th class="w-32">Satuan</th>
                        <th class="w-40 text-right">Harga satuan</th>
                        <th class="w-40 text-right">Realisasi</th>
                        <th class="w-40 text-right">Jumlah RAB</th>
                        <th class="w-40 text-right">Saldo</th>
                        @if ($canManage)<th class="w-24 text-right">Status</th>@endif
                    </tr>
                </thead>
                <tbody data-budget-rows>
                    @foreach ($items as $item)
                        @php($rowForm = 'budget-row-'.$item->id)
                        <tr data-budget-item-row data-budget-item-id="{{ $item->id }}">
                            <td class="text-slate-500" data-row-number>{{ $loop->iteration }}</td>
                            <td><input form="{{ $rowForm }}" name="nama_item" maxlength="255" required value="{{ $item->nama_item }}" class="sp-form-control min-w-44 px-2.5 py-2 text-sm" aria-label="Nama item"></td>
                            <td><input form="{{ $rowForm }}" type="number" name="volume" min="1" max="1000000" required value="{{ $item->volume }}" class="sp-form-control w-20 px-2 py-2 text-right text-sm" aria-label="Volume"></td>
                            <td><input form="{{ $rowForm }}" name="satuan" maxlength="50" required value="{{ $item->satuan }}" class="sp-form-control w-28 px-2 py-2 text-sm" aria-label="Satuan"></td>
                            <td><input form="{{ $rowForm }}" type="text" inputmode="numeric" name="harga_satuan" data-budget-money required value="{{ number_format((int) $item->harga_satuan, 0, ',', '.') }}" class="sp-form-control w-36 px-2 py-2 text-right text-sm" aria-label="Harga satuan"></td>
                            <td><input form="{{ $rowForm }}" type="text" inputmode="numeric" name="biaya_riil" data-budget-money required value="{{ number_format((int) $item->biaya_riil, 0, ',', '.') }}" class="sp-form-control w-36 px-2 py-2 text-right text-sm" aria-label="Realisasi"></td>
                            <td class="text-right font-semibold text-slate-800" data-row-total>Rp {{ number_format($item->subtotal, 0, ',', '.') }}</td>
                            <td @class(['text-right font-semibold', 'text-rose-700' => $item->saldo < 0, 'text-emerald-700' => $item->saldo >= 0]) data-row-balance>Rp {{ number_format($item->saldo, 0, ',', '.') }}</td>
                            @if ($canManage)
                                <td class="text-right">
                                    <div class="flex items-center justify-end gap-1">
                                        <span class="budget-row-status" data-save-status role="status" aria-live="polite"></span>
                                        <button type="submit" form="budget-delete-{{ $item->id }}" class="settings-icon-action settings-icon-action--delete" title="Hapus item" aria-label="Hapus {{ $item->nama_item }}"><i class="bi bi-trash3" aria-hidden="true"></i></button>
                                    </div>
                                    <form id="{{ $rowForm }}" method="POST" action="{{ route('pkbm.kegiatan.budget.update', [$activity->id, $item->id]) }}" class="hidden">@csrf @method('PUT')</form>
                                    <form id="budget-delete-{{ $item->id }}" method="POST" action="{{ route('pkbm.kegiatan.budget.destroy', [$activity->id, $item->id]) }}" onsubmit="return confirm('Hapus item anggaran ini?')">@csrf @method('DELETE')</form>
                                </td>
                            @endif
                        </tr>
                    @endforeach
                    @if ($canManage)
                        <tr data-budget-add-row>
                            <td>
                                <button type="button" class="settings-icon-action text-blue-700" data-add-budget-row title="Tambah baris RAB" aria-label="Tambah baris RAB"><i class="bi bi-plus-circle-fill" aria-hidden="true"></i></button>
                            </td>
                            <td colspan="8" class="text-xs text-slate-500">Tambah item anggaran baru</td>
                        </tr>
                    @elseif ($items->isEmpty())
                        <tr><td colspan="8" class="px-4 py-10 text-center"><i class="bi bi-wallet2 text-2xl text-slate-300" aria-hidden="true"></i><p class="mt-2 font-semibold text-slate-700">Belum ada item anggaran</p></td></tr>
                    @endif
                </tbody>
                <tfoot><tr class="bg-slate-50 font-bold"><td colspan="6" class="text-right">TOTAL</td><td id="budget-table-total" class="text-right">Rp {{ number_format($totalBudget, 0, ',', '.') }}</td><td id="budget-table-balance" @class(['text-right', 'text-rose-700' => $totalBudget < $totalRealization, 'text-emerald-700' => $totalBudget >= $totalRealization])>Rp {{ number_format($totalBudget - $totalRealization, 0, ',', '.') }}</td>@if ($canManage)<td></td>@endif</tr></tfoot>
            </table>
        </div>
        <div data-budget-forms class="hidden"></div>
    </section>
</div>
@if ($canManage)
    <template id="budget-row-template">
        <tr class="bg-blue-50/50" data-budget-item-row data-budget-new-row>
            <td class="text-slate-500" data-row-number></td>
            <td><input name="nama_item" maxlength="255" required placeholder="Nama item" class="sp-form-control min-w-44 px-2.5 py-2 text-sm" aria-label="Nama item"></td>
            <td><input type="number" name="volume" min="1" max="1000000" required value="1" class="sp-form-control w-20 px-2 py-2 text-right text-sm" aria-label="Volume"></td>
            <td><input name="satuan" maxlength="50" required placeholder="Paket" class="sp-form-control w-28 px-2 py-2 text-sm" aria-label="Satuan"></td>
            <td><input type="text" inputmode="numeric" name="harga_satuan" data-budget-money required placeholder="0" class="sp-form-control w-36 px-2 py-2 text-right text-sm" aria-label="Harga satuan"></td>
            <td><input type="text" inputmode="numeric" name="biaya_riil" data-budget-money value="0" required class="sp-form-control w-36 px-2 py-2 text-right text-sm" aria-label="Realisasi"></td>
            <td class="text-right font-semibold text-slate-800" data-row-total>Rp 0</td>
            <td class="text-right font-semibold text-emerald-700" data-row-balance>Rp 0</td>
            <td class="text-right"><span class="budget-row-status" data-save-status role="status" aria-live="polite"></span></td>
        </tr>
    </template>
    @push('scripts')
        <script>
            (() => {
                const tableBody = document.querySelector('[data-budget-rows]');
                const rowTemplate = document.getElementById('budget-row-template');
                const addRow = document.querySelector('[data-add-budget-row]');
                if (!tableBody || !rowTemplate || !addRow) return;

                const createUrl = @json(route('pkbm.kegiatan.budget.store', $activity->id));
                const updateUrlTemplate = @json(route('pkbm.kegiatan.budget.update', [$activity->id, '__ITEM__']));
                const deleteUrlTemplate = @json(route('pkbm.kegiatan.budget.destroy', [$activity->id, '__ITEM__']));
                const csrfToken = @json(csrf_token());
                const timers = new WeakMap();
                const saving = new WeakSet();

                const digits = (value) => value.replace(/\D/g, '');
                const formatNumber = (value) => {
                    const number = Number(value || 0);
                    return `Rp ${new Intl.NumberFormat('id-ID').format(number)}`;
                };
                const formatMoneyInput = (input) => {
                    const cursor = input.selectionStart ?? input.value.length;
                    const digitsBeforeCursor = digits(input.value.slice(0, cursor)).length;
                    const raw = digits(input.value).slice(0, 12);
                    const formatted = raw ? new Intl.NumberFormat('id-ID').format(Number(raw)) : '';
                    input.value = formatted;
                    let nextCursor = 0;
                    let seen = 0;
                    while (nextCursor < formatted.length && seen < digitsBeforeCursor) {
                        if (/\d/.test(formatted[nextCursor])) seen += 1;
                        nextCursor += 1;
                    }
                    input.setSelectionRange(nextCursor, nextCursor);
                };
                const inputValue = (row, name) => row.querySelector(`[name="${name}"]`)?.value.trim() ?? '';

                const updateTotals = () => {
                    let totalBudget = 0;
                    let totalRealization = 0;
                    tableBody.querySelectorAll('[data-budget-item-row]').forEach((row, index) => {
                        const volume = Number(inputValue(row, 'volume')) || 0;
                        const price = Number(digits(inputValue(row, 'harga_satuan'))) || 0;
                        const realization = Number(digits(inputValue(row, 'biaya_riil'))) || 0;
                        const subtotal = volume * price;
                        const balance = subtotal - realization;
                        const totalCell = row.querySelector('[data-row-total]');
                        const balanceCell = row.querySelector('[data-row-balance]');
                        if (totalCell) totalCell.textContent = formatNumber(subtotal);
                        if (balanceCell) {
                            balanceCell.textContent = formatNumber(balance);
                            balanceCell.classList.toggle('text-rose-700', balance < 0);
                            balanceCell.classList.toggle('text-emerald-700', balance >= 0);
                        }
                        row.querySelector('[data-row-number]').textContent = String(index + 1);
                        totalBudget += subtotal;
                        totalRealization += realization;
                    });
                    const balance = totalBudget - totalRealization;
                    document.getElementById('budget-summary-total').textContent = formatNumber(totalBudget);
                    document.getElementById('budget-summary-realization').textContent = formatNumber(totalRealization);
                    document.getElementById('budget-summary-balance').textContent = formatNumber(balance);
                    const totalCell = document.getElementById('budget-table-total');
                    const balanceCell = document.getElementById('budget-table-balance');
                    if (totalCell) totalCell.textContent = formatNumber(totalBudget);
                    if (balanceCell) {
                        balanceCell.textContent = formatNumber(balance);
                        balanceCell.classList.toggle('text-rose-700', balance < 0);
                        balanceCell.classList.toggle('text-emerald-700', balance >= 0);
                    }
                };

                const setStatus = (row, message, state) => {
                    const status = row.querySelector('[data-save-status]');
                    if (!status) return;
                    status.textContent = message;
                    status.dataset.state = state;
                };

                const promoteNewRow = (row, itemId) => {
                    row.removeAttribute('data-budget-new-row');
                    row.dataset.budgetItemId = itemId;
                    row.classList.remove('bg-blue-50/50');
                    const formId = `budget-row-${itemId}`;
                    const form = document.createElement('form');
                    form.id = formId;
                    form.method = 'POST';
                    form.action = updateUrlTemplate.replace('__ITEM__', itemId);
                    form.className = 'hidden';
                    form.innerHTML = `<input type="hidden" name="_token" value="${csrfToken}"><input type="hidden" name="_method" value="PUT">`;
                    const deleteForm = document.createElement('form');
                    deleteForm.id = `budget-delete-${itemId}`;
                    deleteForm.method = 'POST';
                    deleteForm.action = deleteUrlTemplate.replace('__ITEM__', itemId);
                    deleteForm.className = 'hidden';
                    deleteForm.innerHTML = `<input type="hidden" name="_token" value="${csrfToken}"><input type="hidden" name="_method" value="DELETE">`;
                    deleteForm.addEventListener('submit', (event) => {
                        if (!window.confirm('Hapus item anggaran ini?')) event.preventDefault();
                    });
                    row.querySelectorAll('input').forEach((input) => input.setAttribute('form', formId));
                    const actionCell = row.lastElementChild;
                    actionCell.innerHTML = '<div class="flex items-center justify-end gap-1"><span class="budget-row-status" data-save-status role="status" aria-live="polite"></span><button type="submit" class="settings-icon-action settings-icon-action--delete" title="Hapus item" aria-label="Hapus item"><i class="bi bi-trash3" aria-hidden="true"></i></button></div>';
                    actionCell.querySelector('button').setAttribute('form', deleteForm.id);
                    document.querySelector('[data-budget-forms]').append(form, deleteForm);
                    setStatus(row, 'Tersimpan', 'saved');

                    const addRowContainer = document.querySelector('[data-budget-add-row]');
                    if (addRowContainer) {
                        const nextRow = rowTemplate.content.firstElementChild.cloneNode(true);
                        addRowContainer.before(nextRow);
                    }
                    updateTotals();
                };

                const saveRow = async (row) => {
                    const isNew = row.hasAttribute('data-budget-new-row');
                    const invalidInput = [...row.querySelectorAll('input[required]')].find((input) => !input.value.trim() || !input.checkValidity());
                    if (invalidInput) {
                        setStatus(row, 'Lengkapi data wajib', 'error');
                        return;
                    }
                    const form = isNew
                        ? null
                        : document.getElementById(`budget-row-${row.dataset.budgetItemId}`);
                    if (saving.has(row)) {
                        row.dataset.saveAgain = 'true';
                        return;
                    }
                    const formData = form ? new FormData(form) : new FormData();
                    if (isNew) formData.append('_token', csrfToken);
                    ['nama_item', 'volume', 'satuan', 'harga_satuan', 'biaya_riil'].forEach((name) => {
                        const value = inputValue(row, name);
                        if (name === 'harga_satuan' || name === 'biaya_riil') {
                            formData.set(name, digits(value) || '0');
                        } else {
                            formData.set(name, value);
                        }
                    });
                    const version = row.dataset.editVersion || '0';
                    saving.add(row);
                    row.dataset.saveAgain = 'false';
                    setStatus(row, 'Menyimpan…', 'saving');
                    try {
                        const response = await fetch(isNew ? createUrl : form.action, {
                            method: 'POST',
                            headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                            body: formData,
                        });
                        const payload = await response.json();
                        if (!response.ok) {
                            const validationMessage = payload.errors
                                ? Object.values(payload.errors).flat()[0]
                                : payload.message;
                            throw new Error(validationMessage || 'Perubahan tidak berhasil disimpan.');
                        }
                        if (isNew) promoteNewRow(row, payload.id);
                        else setStatus(row, 'Tersimpan', 'saved');
                        updateTotals();
                    } catch (error) {
                        setStatus(row, error.message || 'Gagal menyimpan. Periksa koneksi lalu ubah baris ini untuk mencoba lagi.', 'error');
                    } finally {
                        saving.delete(row);
                        if (row.dataset.saveAgain === 'true' || row.dataset.editVersion !== version) scheduleSave(row);
                    }
                };

                function scheduleSave(row, delay = 700) {
                    clearTimeout(timers.get(row));
                    timers.set(row, setTimeout(() => saveRow(row), delay));
                }

                const addNewRow = () => {
                    const existingDraft = tableBody.querySelector('[data-budget-new-row]');
                    if (existingDraft) {
                        existingDraft.querySelector('input[name="nama_item"]')?.focus();
                        return;
                    }
                    const row = rowTemplate.content.firstElementChild.cloneNode(true);
                    tableBody.querySelector('[data-budget-add-row]').before(row);
                    updateTotals();
                    row.querySelector('input[name="nama_item"]')?.focus();
                };

                addRow.addEventListener('click', addNewRow);
                tableBody.addEventListener('input', (event) => {
                    const input = event.target;
                    if (!(input instanceof HTMLInputElement)) return;
                    const row = input.closest('[data-budget-item-row]');
                    if (!row) return;
                    if (input.matches('[data-budget-money]')) formatMoneyInput(input);
                    row.dataset.editVersion = String(Number(row.dataset.editVersion || 0) + 1);
                    updateTotals();
                    setStatus(row, 'Belum tersimpan', 'dirty');
                    scheduleSave(row);
                });
                tableBody.addEventListener('focusout', (event) => {
                    const row = event.target.closest?.('[data-budget-item-row]');
                    if (row && row.dataset.editVersion) scheduleSave(row, 200);
                });
                tableBody.querySelectorAll('[data-budget-money]').forEach(formatMoneyInput);
                updateTotals();
            })();
        </script>
    @endpush
@endif
@endsection