@extends('layouts.adminlte')

@section('title', 'REIMBURSEMENT')
@section('page_title', 'REIMBURSEMENT')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
        .status-pill { font-size: 0.75rem; }
        .att-chip { display:inline-flex; gap:6px; align-items:center; padding:2px 8px; border:1px solid #dee2e6; border-radius:999px; background:#f8f9fa; }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Reimbursement + Approval</h3>
            <div class="d-flex gap-2">
                <button class="btn btn-primary btn-sm" id="btnAdd"><i class="fas fa-plus me-1"></i>Tambah Reimbursement</button>
            </div>
        </div>
        <div class="card-body">
            <table id="rbTable" class="table table-striped table-hover w-100">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>No Request</th>
                        <th>Karyawan</th>
                        <th>Tanggal</th>
                        <th>Kategori</th>
                        <th>Nominal</th>
                        <th>Bukti</th>
                        <th>Flow</th>
                        <th>Level Approval</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="rbModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="rbModalTitle">Tambah Reimbursement</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="rbForm">
                    <div class="modal-body">
                        <input type="hidden" id="rbId" />
                        <div class="mb-2" id="karyawanGroup">
                            <label class="form-label">Karyawan</label>
                            <div class="border rounded-3 p-3 mb-2 bg-light-subtle">
                                <div class="d-flex flex-column flex-lg-row gap-2 align-items-lg-center justify-content-between">
                                    <div>
                                        <div class="fw-semibold small text-uppercase text-muted">Sort & Search Karyawan</div>
                                        <div class="small text-muted">Pilih target pencarian dulu, lalu list karyawan disusun seperti tabel agar lebih cepat dipilih.</div>
                                    </div>
                                    <div class="d-flex flex-wrap gap-2">
                                        <button type="button" class="btn btn-sm btn-primary btn-karyawan-sort active" data-sort-type="all">Semua</button>
                                        <button type="button" class="btn btn-sm btn-outline-primary btn-karyawan-sort" data-sort-type="code">Kode</button>
                                        <button type="button" class="btn btn-sm btn-outline-primary btn-karyawan-sort" data-sort-type="name">Nama</button>
                                        <button type="button" class="btn btn-sm btn-outline-primary btn-karyawan-sort" data-sort-type="group">Group</button>
                                        <button type="button" class="btn btn-sm btn-outline-primary btn-karyawan-sort" data-sort-type="export_group">Group Cetak</button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary" id="btnResetKaryawanSort">Reset</button>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <label class="form-label mb-0" for="karyawanSearch">Cari Karyawan</label>
                                        <span class="badge text-bg-primary" id="karyawanSearchActiveBadge">Semua</span>
                                    </div>
                                    <input type="text" id="karyawanSearch" class="form-control" placeholder="Cari kode / nama / group karyawan...">
                                    <div class="form-text" id="karyawanSearchHint">Sedang mencari berdasarkan kode, nama, group, atau group cetak.</div>
                                </div>
                            </div>
                            <select id="karyawanId" class="d-none" required></select>
                            <div class="border rounded-3 overflow-hidden" id="karyawanTableWrap">
                                <div class="table-responsive" style="max-height: 280px; overflow:auto;">
                                    <table class="table table-sm table-hover align-middle mb-0">
                                        <thead class="table-light sticky-top">
                                            <tr>
                                                <th style="width:120px;">Kode</th>
                                                <th>Nama</th>
                                                <th style="width:140px;">Group</th>
                                                <th style="width:170px;">Group Cetak</th>
                                            </tr>
                                        </thead>
                                        <tbody id="karyawanTableBody">
                                            <tr><td colspan="4" class="text-muted text-center py-3">Memuat data karyawan...</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="small text-muted mt-1" id="karyawanSelectionCount">Belum ada karyawan dipilih.</div>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Flow Approval</label>
                            <select id="flowId" class="form-select"></select>
                        </div>
                        <div class="row g-2">
                            <div class="col">
                                <label class="form-label">Tanggal</label>
                                <input type="date" id="requestDate" class="form-control" required />
                            </div>
                            <div class="col">
                                <label class="form-label">Nominal</label>
                                <input type="number" id="amount" class="form-control" min="0" step="0.01" required />
                            </div>
                        </div>
                        <div class="mt-2">
                            <label class="form-label">Kategori</label>
                            <input type="text" id="category" class="form-control" maxlength="120" placeholder="Contoh: Transport, Makan, ATK" />
                        </div>
                        <div class="mt-2">
                            <label class="form-label">Catatan</label>
                            <textarea id="notes" class="form-control" rows="2" maxlength="2000" placeholder="Keterangan singkat..."></textarea>
                        </div>
                        <div class="mt-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="form-label mb-0">Upload Bukti</label>
                                <small class="text-muted">JPG/PNG/PDF max 5MB</small>
                            </div>
                            <input type="file" id="attachment" class="form-control" accept=".jpg,.jpeg,.png,.webp,.pdf,image/*,application/pdf" />
                            <div class="mt-2 small text-muted" id="attHelp">Simpan draft dulu, lalu upload bukti. (Bisa upload lebih dari 1 bukti setelah draft dibuat.)</div>
                            <div class="mt-2" id="attList"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
                        <button class="btn btn-outline-primary" type="button" id="btnUploadAtt" disabled>Upload Bukti</button>
                        <button class="btn btn-primary" type="submit">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('vendor/sweetalert2/sweetalert2.min.js') }}"></script>

    <script>
        $(function () {
            const rbModal = new bootstrap.Modal(document.getElementById('rbModal'));
            let refs = { karyawans: [], flows: [], default_flow_id: null, self_mode: false };
            let rows = [];
            let karyawanSearchMode = 'all';

            const fmtRp = (n) => 'Rp ' + Number(n || 0).toLocaleString('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
            const escapeHtml = (str) => String(str ?? '')
                .replaceAll('&', '&amp;')
                .replaceAll('<', '&lt;')
                .replaceAll('>', '&gt;')
                .replaceAll('"', '&quot;')
                .replaceAll("'", '&#039;');
            const statusBadge = (st) => {
                const s = (st || '').toString();
                const cls = s === 'approved' ? 'text-bg-success'
                    : s === 'rejected' ? 'text-bg-danger'
                    : (s === 'submitted' || s === 'in_review') ? 'text-bg-warning'
                    : 'text-bg-secondary';
                return `<span class="badge rounded-pill ${cls} status-pill">${s || '-'}</span>`;
            };

            const getSelectedKaryawanValue = () => String($('#karyawanId').val() || '').trim();

            const syncKaryawanSelectionCount = () => {
                const selectedId = getSelectedKaryawanValue();
                const selectedRow = (refs.karyawans || []).find((x) => String(x.id) === selectedId);
                $('#karyawanSelectionCount').html(selectedRow
                    ? `Karyawan dipilih: <span class="fw-semibold">${escapeHtml(selectedRow.code || '-')} - ${escapeHtml(selectedRow.name || '-')}</span>`
                    : 'Belum ada karyawan dipilih.'
                );
            };

            const setSelectedKaryawanValue = (value) => {
                $('#karyawanId').val(String(value || '').trim());
                syncKaryawanSelectionCount();
            };

            const applyKaryawanSearchModeUi = () => {
                $('.btn-karyawan-sort').removeClass('active btn-primary').addClass('btn-outline-primary');
                $(`.btn-karyawan-sort[data-sort-type="${karyawanSearchMode}"]`).removeClass('btn-outline-primary').addClass('active btn-primary');

                const meta = {
                    all: { badge: 'Semua', placeholder: 'Cari kode / nama / group karyawan...', hint: 'Sedang mencari berdasarkan kode, nama, group, atau group cetak.' },
                    code: { badge: 'Kode', placeholder: 'Cari kode karyawan...', hint: 'Sedang mencari berdasarkan kode karyawan.' },
                    name: { badge: 'Nama', placeholder: 'Cari nama karyawan...', hint: 'Sedang mencari berdasarkan nama karyawan.' },
                    group: { badge: 'Group', placeholder: 'Cari group karyawan...', hint: 'Sedang mencari berdasarkan group karyawan.' },
                    export_group: { badge: 'Group Cetak', placeholder: 'Cari group cetak...', hint: 'Sedang mencari berdasarkan group cetak aktif/profil bulan terbaru.' }
                }[karyawanSearchMode] || { badge: 'Semua', placeholder: 'Cari kode / nama / group karyawan...', hint: 'Sedang mencari berdasarkan kode, nama, group, atau group cetak.' };

                $('#karyawanSearchActiveBadge').text(meta.badge);
                $('#karyawanSearch').attr('placeholder', meta.placeholder);
                $('#karyawanSearchHint').text(meta.hint);
            };

            const resetKaryawanSearchMode = () => {
                karyawanSearchMode = 'all';
                $('#karyawanSearch').val('');
                applyKaryawanSearchModeUi();
            };

            const resolveKaryawanDividerLabel = (row) => {
                if (karyawanSearchMode === 'group') return String(row.employee_group || '').trim() || 'Tanpa Group';
                if (karyawanSearchMode === 'export_group') return String(row.export_employee_group || '').trim() || 'Tanpa Group Cetak';
                if (karyawanSearchMode === 'name') return (String(row.name || '').trim().charAt(0) || '#').toUpperCase();
                if (karyawanSearchMode === 'code') return (String(row.code || '').trim().charAt(0) || '#').toUpperCase();
                return '';
            };

            const renderKaryawanOptions = (filterText = null) => {
                const keyword = String(filterText ?? $('#karyawanSearch').val() ?? '').trim().toLowerCase();
                const selectedId = getSelectedKaryawanValue();
                const filtered = (refs.karyawans || [])
                    .slice()
                    .sort((a, b) => {
                        if (karyawanSearchMode === 'export_group') {
                            return String(a.export_employee_group || '').localeCompare(String(b.export_employee_group || ''), 'id')
                                || String(a.name || '').localeCompare(String(b.name || ''), 'id');
                        }
                        if (karyawanSearchMode === 'group') {
                            return String(a.employee_group || '').localeCompare(String(b.employee_group || ''), 'id')
                                || String(a.name || '').localeCompare(String(b.name || ''), 'id');
                        }
                        if (karyawanSearchMode === 'name') {
                            return String(a.name || '').localeCompare(String(b.name || ''), 'id');
                        }
                        return String(a.code || '').localeCompare(String(b.code || ''), 'id');
                    })
                    .filter((x) => {
                        if (!keyword) return true;
                        const code = String(x.code || '').toLowerCase();
                        const name = String(x.name || '').toLowerCase();
                        const group = String(x.employee_group || '').toLowerCase();
                        const exportGroup = String(x.export_employee_group || '').toLowerCase();
                        if (karyawanSearchMode === 'code') return code.includes(keyword);
                        if (karyawanSearchMode === 'name') return name.includes(keyword);
                        if (karyawanSearchMode === 'group') return group.includes(keyword);
                        if (karyawanSearchMode === 'export_group') return exportGroup.includes(keyword);
                        return code.includes(keyword) || name.includes(keyword) || group.includes(keyword) || exportGroup.includes(keyword);
                    });

                $('#karyawanId').html(filtered.map((r) => `<option value="${r.id}">${r.code || '-'} - ${r.name || '-'}</option>`).join(''));
                if (selectedId && $('#karyawanId option[value="' + selectedId + '"]').length) {
                    $('#karyawanId').val(selectedId);
                }

                let previousDividerLabel = null;
                const rowsHtml = filtered.length ? filtered.map((r) => {
                    const dividerLabel = resolveKaryawanDividerLabel(r);
                    const dividerHtml = dividerLabel && karyawanSearchMode !== 'all' && dividerLabel !== previousDividerLabel
                        ? `<tr class="table-secondary small text-uppercase fw-semibold"><td colspan="4">${escapeHtml(dividerLabel)}</td></tr>`
                        : '';
                    previousDividerLabel = dividerLabel || previousDividerLabel;
                    const isSelected = String(r.id) === getSelectedKaryawanValue();
                    return `${dividerHtml}
                        <tr class="karyawan-table-row ${isSelected ? 'table-primary' : ''}" data-karyawan-id="${r.id}" style="cursor:pointer;">
                            <td class="fw-semibold">${escapeHtml(r.code || '-')}</td>
                            <td>${escapeHtml(r.name || '-')}</td>
                            <td>${r.employee_group ? escapeHtml(r.employee_group) : '<span class="text-muted">-</span>'}</td>
                            <td>${r.export_employee_group ? escapeHtml(r.export_employee_group) : '<span class="text-muted">-</span>'}</td>
                        </tr>`;
                }).join('') : '<tr><td colspan="4" class="text-muted text-center py-3">Tidak ada hasil karyawan.</td></tr>';
                $('#karyawanTableBody').html(rowsHtml);
                syncKaryawanSelectionCount();
            };

            const table = $('#rbTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: 'request_no' },
                    { data: null, render: (r) => `${r.employee_code || '-'} - ${r.employee_name || '-'}` },
                    { data: 'request_date' },
                    { data: 'category', render: (v) => v ? String(v) : '-' },
                    { data: 'amount', render: (v) => fmtRp(v) },
                    { data: null, orderable: false, render: (r) => `<span class="att-chip"><i class="fas fa-paperclip"></i>${Number(r.attachments_count || 0)}</span>` },
                    { data: 'flow_name', render: (v) => v ? String(v) : '-' },
                    { data: 'pending_level', render: (v) => v ? String(v) : '-' },
                    { data: 'status', orderable: false, render: (v) => statusBadge(v) },
                    {
                        data: null,
                        orderable: false,
                        render: (r) => {
                            const canEdit = !!r.can_edit;
                            const canApprove = !!r.can_approve;
                            const disabledEdit = canEdit ? '' : 'disabled';
                            const disabledSubmit = (r.status === 'draft' || r.status === 'rejected') ? '' : 'disabled';
                            const approveButtons = canApprove
                                ? `
                                    <button class="btn btn-sm btn-outline-success btn-approve" data-id="${r.id}">Approve</button>
                                    <button class="btn btn-sm btn-outline-danger btn-reject" data-id="${r.id}">Reject</button>
                                  `
                                : '';
                            return `
                                <button class="btn btn-sm btn-outline-primary btn-edit" ${disabledEdit} data-id="${r.id}">Edit</button>
                                <button class="btn btn-sm btn-outline-secondary btn-attachments" data-id="${r.id}">Bukti</button>
                                <button class="btn btn-sm btn-outline-dark btn-submit" ${disabledSubmit} data-id="${r.id}">Submit</button>
                                ${approveButtons}
                            `;
                        }
                    }
                ]
            });

            const loadRefs = () => $.getJSON(`{{ route('reimbursement_request.refs') }}`)
                .done((resp) => { refs = resp.data || refs; })
                .fail(() => { refs = { karyawans: [], flows: [], default_flow_id: null, self_mode: false }; });

            const loadData = () => $.getJSON(`{{ route('reimbursement_request.data') }}`)
                .done((resp) => {
                    rows = resp.data || [];
                    table.clear().rows.add(rows).draw();
                })
                .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Load data gagal', 'error'));

            const fillFormRefs = () => {
                renderKaryawanOptions('');

                const fOpts = ['<option value="">- Pilih Flow -</option>']
                    .concat((refs.flows || []).map((r) => `<option value="${r.id}">${r.code || '-'} - ${r.name}</option>`));
                $('#flowId').html(fOpts.join(''));

                if ($('#flowId').data('select2')) $('#flowId').select2('destroy');
                $('#flowId').select2({ theme: 'bootstrap-5', dropdownParent: $('#rbModal') });

                if (refs.self_mode) {
                    $('#karyawanGroup').addClass('d-none');
                    if ((refs.karyawans || []).length === 1) {
                        setSelectedKaryawanValue(String(refs.karyawans[0].id));
                    }
                } else {
                    $('#karyawanGroup').removeClass('d-none');
                }
            };

            const setAttList = (attRows) => {
                const items = (attRows || []).map((a) => `
                    <div class="d-flex justify-content-between align-items-center border rounded px-2 py-1 mb-1">
                        <div class="small">
                            <a href="${a.url}" target="_blank">${a.file_name || 'file'}</a>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-danger btn-del-att" data-att-id="${a.id}">Hapus</button>
                    </div>
                `);
                $('#attList').html(items.join('') || '<div class="text-muted small">Belum ada bukti.</div>');
            };

            const loadAttachments = (rbId) => {
                if (!rbId) {
                    setAttList([]);
                    return;
                }
                $.getJSON(`{{ url('/reimbursement-request') }}/${rbId}/attachments`)
                    .done((resp) => setAttList(resp.data || []))
                    .fail(() => setAttList([]));
            };

            const openAdd = () => {
                $('#rbModalTitle').text('Tambah Reimbursement');
                $('#rbId').val('');
                fillFormRefs();
                resetKaryawanSearchMode();
                renderKaryawanOptions('');
                $('#flowId').val(refs.default_flow_id ? String(refs.default_flow_id) : '').trigger('change');
                $('#requestDate').val(new Date().toISOString().slice(0,10));
                $('#amount').val('');
                $('#category').val('');
                $('#notes').val('');
                $('#attachment').val('');
                $('#btnUploadAtt').prop('disabled', true);
                setAttList([]);
                rbModal.show();
            };

            const openEdit = (row) => {
                $('#rbModalTitle').text('Edit Reimbursement');
                $('#rbId').val(String(row.id));
                fillFormRefs();
                if (!refs.self_mode) {
                    resetKaryawanSearchMode();
                    renderKaryawanOptions('');
                    setSelectedKaryawanValue(String(row.karyawan_id || ''));
                }
                $('#flowId').val(String(row.approval_flow_id || '')).trigger('change');
                $('#requestDate').val(row.request_date || '');
                $('#amount').val(String(row.amount || 0));
                $('#category').val(row.category || '');
                $('#notes').val(row.notes || '');
                $('#attachment').val('');
                $('#btnUploadAtt').prop('disabled', false);
                loadAttachments(row.id);
                rbModal.show();
            };

            $('#btnAdd').on('click', openAdd);
            $('.btn-karyawan-sort').on('click', function () {
                karyawanSearchMode = ($(this).data('sort-type') || 'all').toString();
                applyKaryawanSearchModeUi();
                renderKaryawanOptions($('#karyawanSearch').val());
            });
            $('#btnResetKaryawanSort').on('click', function () {
                resetKaryawanSearchMode();
                renderKaryawanOptions('');
            });
            $('#karyawanSearch').on('input', function () {
                renderKaryawanOptions($(this).val());
            });
            $('#karyawanTableBody').on('click', '.karyawan-table-row', function () {
                const id = String($(this).data('karyawan-id') || '').trim();
                if (!id) return;
                setSelectedKaryawanValue(id);
                renderKaryawanOptions($('#karyawanSearch').val());
            });

            $('#rbTable').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = rows.find((x) => Number(x.id) === id);
                if (!row) return;
                openEdit(row);
            });

            $('#rbTable').on('click', '.btn-submit', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Submit reimbursement?',
                    text: 'Setelah submit, akan masuk proses approval.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Submit'
                }).then((r) => {
                    if (!r.isConfirmed) return;
                    $.post(`{{ url('/reimbursement-request') }}/${id}/submit`)
                        .done((resp) => { Swal.fire('OK', resp?.message || 'Submitted', 'success'); loadData(); })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Submit gagal', 'error'));
                });
            });

            $('#rbTable').on('click', '.btn-approve', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Approve?',
                    input: 'textarea',
                    inputLabel: 'Catatan (opsional)',
                    showCancelButton: true,
                    confirmButtonText: 'Approve'
                }).then((r) => {
                    if (!r.isConfirmed) return;
                    $.post(`{{ url('/reimbursement-request') }}/${id}/approve`, { notes: r.value || '' })
                        .done((resp) => { Swal.fire('OK', resp?.message || 'Approved', 'success'); loadData(); })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Approve gagal', 'error'));
                });
            });

            $('#rbTable').on('click', '.btn-reject', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Reject?',
                    input: 'textarea',
                    inputLabel: 'Alasan reject',
                    showCancelButton: true,
                    confirmButtonText: 'Reject'
                }).then((r) => {
                    if (!r.isConfirmed) return;
                    $.post(`{{ url('/reimbursement-request') }}/${id}/reject`, { notes: r.value || '' })
                        .done((resp) => { Swal.fire('OK', resp?.message || 'Rejected', 'success'); loadData(); })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Reject gagal', 'error'));
                });
            });

            $('#rbForm').on('submit', function (e) {
                e.preventDefault();
                const id = ($('#rbId').val() || '').toString();
                const payload = {
                    karyawan_id: $('#karyawanId').val(),
                    approval_flow_id: $('#flowId').val(),
                    request_date: $('#requestDate').val(),
                    amount: $('#amount').val(),
                    category: $('#category').val(),
                    notes: $('#notes').val(),
                };
                const method = id ? 'PUT' : 'POST';
                const url = id ? `{{ url('/reimbursement-request') }}/${id}` : `{{ route('reimbursement_request.store') }}`;
                $.ajax({ url, type: method, data: payload })
                    .done((resp) => {
                        const newId = id || resp?.data?.id;
                        if (newId) {
                            $('#rbId').val(String(newId));
                            $('#btnUploadAtt').prop('disabled', false);
                        }
                        Swal.fire('OK', resp?.message || 'Saved', 'success');
                        loadData();
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save gagal', 'error'));
            });

            $('#btnUploadAtt').on('click', function () {
                const id = ($('#rbId').val() || '').toString();
                if (!id) {
                    Swal.fire('Info', 'Simpan draft dulu sebelum upload bukti.', 'info');
                    return;
                }
                const file = $('#attachment')[0].files[0];
                if (!file) {
                    Swal.fire('Info', 'Pilih file bukti dulu.', 'info');
                    return;
                }
                const fd = new FormData();
                fd.append('attachment', file);
                $.ajax({
                    url: `{{ url('/reimbursement-request') }}/${id}/attachments`,
                    type: 'POST',
                    data: fd,
                    contentType: false,
                    processData: false,
                }).done((resp) => {
                    Swal.fire('OK', resp?.message || 'Uploaded', 'success');
                    $('#attachment').val('');
                    loadAttachments(id);
                    loadData();
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Upload gagal', 'error'));
            });

            $('#attList').on('click', '.btn-del-att', function () {
                const id = ($('#rbId').val() || '').toString();
                const attId = Number($(this).data('att-id'));
                if (!id || !attId) return;
                Swal.fire({ title:'Hapus lampiran?', icon:'warning', showCancelButton:true, confirmButtonText:'Hapus' })
                    .then((r) => {
                        if (!r.isConfirmed) return;
                        $.ajax({ url: `{{ url('/reimbursement-request') }}/${id}/attachments/${attId}`, type: 'DELETE' })
                            .done((resp) => {
                                Swal.fire('OK', resp?.message || 'Deleted', 'success');
                                loadAttachments(id);
                                loadData();
                            })
                            .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete gagal', 'error'));
                    });
            });

            $('#rbTable').on('click', '.btn-attachments', function () {
                const id = Number($(this).data('id'));
                const row = rows.find((x) => Number(x.id) === id);
                if (!row) return;
                // Open edit directly focused on attachment.
                openEdit(row);
            });

            $.when(loadRefs()).always(() => {
                fillFormRefs();
                loadData();
            });
        });
    </script>
@endpush