@extends('layouts.app')

@section('title', 'Input Lampiran per transaksi')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Manajemen SPJ</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Input Lampiran per transaksi</p>
            <h1 class="pkbm-dashboard__title">Input Lampiran per transaksi</h1>
            <p class="pkbm-dashboard__subtitle">Lengkapi dokumen pendukung untuk setiap transaksi BKU, sesuai jenis belanjanya.</p>
        </div>
    </header>
    @include('pkbm.spj.partials.navigation', ['menus' => $menus])
    @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
    <div id="attachment-notice" role="status" class="settings-notice settings-notice--success" style="display: none;"></div>
    @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 data lampiran.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>
    @endif
    @php
        $categoryLabels = ['belanja_barang' => 'Belanja Barang', 'honor_guru' => 'Honor Guru', 'honor_narasumber' => 'Honor Narasumber', 'belanja_konsumsi' => 'Belanja Konsumsi', 'belanja_siplah' => 'Belanja SIPLah'];
        $documentActions = [
            'belanja_barang' => [['sp', 'SP'], ['bast', 'BAST']],
            'honor_guru' => [['sk_guru', 'SK'], ['absen_guru', 'Absen'], ['tanda_terima_guru', 'Struk']],
            'honor_narasumber' => [['permohonan_narsum', 'Permohonan'], ['tanda_terima_narsum', 'Struk']],
            'belanja_konsumsi' => [['undangan', 'Undangan'], ['absen_konsumsi', 'Absen'], ['notulensi', 'Notulen']],
        ];
    @endphp

    <section class="sp-card p-4">
        <form method="GET" class="flex flex-wrap items-end gap-3">
            <label class="sp-form-label mb-0">Bulan
                <select name="bulan" class="sp-form-control mt-1 px-3 py-2 text-sm">
                    @foreach (range(1, 12) as $month)
                        <option value="{{ $month }}" @selected((int) $filters['bulan'] === $month)>{{ \Carbon\Carbon::createFromDate(now()->year, $month, 1)->locale('id')->translatedFormat('F') }}</option>
                    @endforeach
                </select>
            </label>
            <label class="sp-form-label mb-0">Tahun
                <input name="tahun" type="number" min="2000" max="2100" value="{{ $filters['tahun'] }}" class="sp-form-control mt-1 px-3 py-2 text-sm">
            </label>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-funnel" aria-hidden="true"></i>Filter</button>
        </form>
    </section>

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header">
            <h2 class="sp-section-title">Transaksi BKU</h2>
            <p class="mt-1 text-xs text-slate-500">Transaksi dengan nomor bukti yang sama digabung. Lengkapi data lampiran, lalu cetak dokumen sesuai kategori belanja.</p>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[76rem]">
                <thead><tr><th class="w-14 text-center">No.</th><th>No. bukti</th><th>Tanggal</th><th>Uraian gabungan</th><th class="text-right">Total pengeluaran</th><th>Status lampiran</th><th class="text-right">Aksi generator</th></tr></thead>
                <tbody>
                    @forelse ($records as $record)
                        <tr>
                            <td class="text-center">{{ $records->firstItem() + $loop->index }}</td>
                            <td class="font-semibold text-blue-700">{{ $record->no_bukti }}</td>
                            <td>{{ \Carbon\Carbon::parse($record->tanggal)->format('d/m/Y') }}</td>
                            <td class="max-w-md whitespace-normal">{{ $record->uraian }}</td>
                            <td class="text-right font-semibold">Rp {{ number_format($record->pengeluaran, 0, ',', '.') }}</td>
                            <td>
                                @if ($record->kategori)
                                    <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700"><i class="bi bi-check-circle-fill" aria-hidden="true"></i>{{ $categoryLabels[$record->kategori] ?? $record->kategori }}</span>
                                @else
                                    <span class="inline-flex rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600">Belum diatur</span>
                                @endif
                            </td>
                            <td class="text-right">
                                <div class="flex flex-wrap justify-end gap-2">
                                    <button type="button" class="sp-btn-secondary px-3 py-1.5" data-edit-attachment data-url="{{ route('pkbm.spj.attachments.save', $record->id) }}" data-category="{{ $record->kategori }}" data-current="{{ json_encode($record->attachment_data) }}" data-no-bukti="{{ $record->no_bukti }}" data-tanggal="{{ \Carbon\Carbon::parse($record->tanggal)->format('d/m/Y') }}" data-uraian="{{ $record->uraian }}">
                                        <i class="bi bi-pencil-square" aria-hidden="true"></i>{{ $record->kategori ? 'Edit data' : 'Buat dokumen' }}
                                    </button>
                                    @if ($record->kategori === 'belanja_siplah')
                                        <span class="self-center text-xs text-slate-500">Dokumen tersedia di SIPLah</span>
                                    @elseif ($record->kategori)
                                        @foreach ($documentActions[$record->kategori] ?? [] as [$documentType, $label])
                                            <a href="{{ route('pkbm.spj.attachments.print', ['id' => $record->id, 'dokumen' => $documentType]) }}" target="_blank" rel="noopener" class="sp-btn-primary px-3 py-1.5"><i class="bi bi-printer" aria-hidden="true"></i>{{ $label }}</a>
                                        @endforeach
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="py-8 text-center text-sm text-slate-500">Tidak ada transaksi BKU pada bulan dan tahun terpilih.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($records->hasPages())<div class="p-4">{{ $records->links() }}</div>@endif
    </section>
</div>

<dialog id="attachment-dialog" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="attachment-title">
    <form id="attachment-form" method="POST">
        @csrf
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div class="flex items-start gap-3">
                <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-file-earmark-text"></i></span>
                <div>
                    <h2 id="attachment-title" class="sp-section-title">Buat dokumen lampiran</h2>
                    <p id="attachment-transaction" class="mt-1 text-xs text-slate-500">Lengkapi data lampiran transaksi BKU.</p>
                </div>
            </div>
            <button type="button" data-close-attachment class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
        </div>
        <div class="space-y-4 p-5">
            <div id="attachment-feedback" role="alert" class="hidden rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700"></div>
            <div>
                <label for="attachment-category" class="sp-form-label">Kategori transaksi</label>
                <select id="attachment-category" name="kategori" required class="sp-form-control px-3 py-2 text-sm">
                    <option value="">Pilih kategori</option>
                    <option value="belanja_barang">Belanja Barang (toko biasa)</option>
                    <option value="honor_guru">Honor Guru</option>
                    <option value="honor_narasumber">Honor Narasumber</option>
                    <option value="belanja_konsumsi">Belanja Konsumsi</option>
                    <option value="belanja_siplah">Belanja SIPLah</option>
                </select>
            </div>
            <div id="attachment-fields" class="grid gap-4 sm:grid-cols-2"></div>
        </div>
        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-attachment class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-save" aria-hidden="true"></i>Simpan data</button>
        </div>
    </form>
</dialog>

@push('scripts')
<script>
(() => {
    const dialog = document.getElementById('attachment-dialog');
    const form = document.getElementById('attachment-form');
    const categorySelect = document.getElementById('attachment-category');
    const fieldsContainer = document.getElementById('attachment-fields');
    const feedback = document.getElementById('attachment-feedback');
    const notice = document.getElementById('attachment-notice');
    const submitButton = form.querySelector('button[type="submit"]');
    const titleElement = document.getElementById('attachment-title');
    const transactionElement = document.getElementById('attachment-transaction');

    const savedMessage = sessionStorage.getItem('spjAttachmentStatus');
    if (savedMessage) {
        notice.textContent = savedMessage;
        notice.style.display = 'flex';
        sessionStorage.removeItem('spjAttachmentStatus');
    }
    const definitions = {
        belanja_barang: [
            ['nama_toko', 'Nama toko/rekanan', 'text', true],
            ['pemilik_toko', 'Nama pemilik toko', 'text', false],
            ['alamat_toko', 'Alamat toko', 'textarea', true],
            ['tgl_pesanan', 'Tanggal pesanan', 'date', true],
            ['tgl_bast', 'Tanggal serah terima (BAST)', 'date', true],
        ],
        honor_guru: [
            ['nama_guru', 'Nama guru (pisahkan dengan koma)', 'text', true],
            ['bulan_honor', 'Bulan honor', 'text', true],
            ['kegiatan_guru', 'Kegiatan/tugas', 'text', true],
        ],
        honor_narasumber: [
            ['nama_narsum', 'Nama narasumber', 'text', true],
            ['instansi_narsum', 'Instansi asal', 'text', true],
            ['topik_materi', 'Topik materi/acara', 'text', true],
            ['tgl_pelaksanaan', 'Tanggal pelaksanaan', 'date', true],
        ],
        belanja_konsumsi: [
            ['nama_kegiatan', 'Nama kegiatan/rapat', 'text', true],
            ['tgl_acara', 'Tanggal acara', 'date', true],
            ['tempat_acara', 'Tempat pelaksanaan', 'text', true],
            ['jml_peserta', 'Jumlah peserta hadir', 'number', true],
        ],
        belanja_siplah: [],
    };

    const renderFields = (category, values = {}) => {
        fieldsContainer.replaceChildren();
        if (category === 'belanja_siplah') {
            const notice = document.createElement('p');
            notice.className = 'sm:col-span-2 rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-800';
            notice.textContent = 'Dokumen pendukung transaksi SIPLah diterbitkan melalui aplikasi SIPLah.';
            fieldsContainer.append(notice);
        }
        for (const [name, title, type, required] of definitions[category] || []) {
            const wrapper = document.createElement('div');
            wrapper.className = name === 'alamat_toko' ? 'sm:col-span-2' : '';
            const label = document.createElement('label');
            label.className = 'sp-form-label';
            label.htmlFor = `attachment-${name}`;
            label.textContent = title;
            const control = type === 'textarea' ? document.createElement('textarea') : document.createElement('input');
            control.id = `attachment-${name}`;
            control.name = name;
            control.className = 'sp-form-control px-3 py-2 text-sm';
            if (type === 'textarea') control.rows = 2;
            if (type !== 'textarea') control.type = type;
            if (type === 'number') control.min = '1';
            control.required = required;
            control.value = values[name] || '';
            wrapper.append(label, control);
            fieldsContainer.append(wrapper);
        }
    };

    const close = () => {
        dialog.close();
    };

    document.querySelectorAll('[data-edit-attachment]').forEach((button) => {
        button.addEventListener('click', () => {
            let values = {};
            try { values = JSON.parse(button.dataset.current || '{}'); } catch (error) { values = {}; }
            form.action = button.dataset.url;
            categorySelect.value = button.dataset.category || '';
            const isEdit = Boolean(button.dataset.category);
            titleElement.textContent = isEdit ? 'Edit data lampiran SPJ' : 'Buat dokumen lampiran SPJ';
            transactionElement.textContent = `${button.dataset.noBukti} · ${button.dataset.tanggal} · ${button.dataset.uraian}`;
            feedback.textContent = '';
            feedback.classList.add('hidden');
            renderFields(categorySelect.value, values);
            submitButton.innerHTML = `<i class="bi bi-save" aria-hidden="true"></i>${isEdit ? 'Simpan perubahan' : 'Simpan data'}`;
            dialog.showModal();
        });
    });

    categorySelect.addEventListener('change', () => renderFields(categorySelect.value));
    document.querySelectorAll('[data-close-attachment]').forEach((button) => button.addEventListener('click', close));
    dialog.addEventListener('click', (event) => { if (event.target === dialog) close(); });

    form.addEventListener('submit', async (event) => {
        event.preventDefault();
        feedback.textContent = '';
        feedback.classList.add('hidden');
        submitButton.disabled = true;
        submitButton.textContent = 'Menyimpan...';
        try {
            const response = await fetch(form.action, {
                method: 'POST',
                headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                body: new FormData(form),
            });
            const result = await response.json();
            if (!response.ok) {
                const errors = Object.values(result.errors || {}).flat();
                throw new Error(errors.join(' ') || result.message || 'Data lampiran gagal disimpan.');
            }
            sessionStorage.setItem('spjAttachmentStatus', result.message);
            window.location.reload();
        } catch (error) {
            feedback.textContent = error.message || 'Terjadi kesalahan jaringan saat menyimpan data.';
            feedback.classList.remove('hidden');
        } finally {
            submitButton.disabled = false;
            const isEdit = Boolean(categorySelect.value);
            submitButton.innerHTML = `<i class="bi bi-save" aria-hidden="true"></i>${isEdit ? 'Simpan perubahan' : 'Simpan data'}`;
        }
    });
})();
</script>
@endpush
@endsection