{{-- Part D §1 — Scheme Approval Documents (catalog rows; items a, f, h → dynamic “Any other document(s)” uploads). --}}
@php
    use App\Models\ReportSubSectorChecklistItem as PartDChecklistItem;
    $d1Base = 'report.part_d.scheme_approval_documents.rows';
    $addBase = 'report.part_d.scheme_approval_documents.additional_documents';
    $catalogItems = PartDChecklistItem::filterActiveSchemeApprovalItems($subSectorChecklistItemsSchemeApproval ?? []);

    $rowsOld = report_wizard_rows('part_d.scheme_approval_documents.rows', [], $reportPayload ?? null);
    $rowsByItemId = [];
    if (is_array($rowsOld)) {
        foreach ($rowsOld as $row) {
            if (! is_array($row)) {
                continue;
            }
            $itemId = (int) ($row['report_sub_sector_checklist_item_id'] ?? 0);
            if ($itemId > 0) {
                $rowsByItemId[$itemId] = $row;
            }
        }
    }
    $addDocsOld = report_wizard_rows('part_d.scheme_approval_documents.additional_documents', [], $reportPayload ?? null);
    $reportDraftIdForD = (int) old('report_draft_id', $reportDraftId ?? 0);
    $mecReportIdForD = (int) old('mec_workflow_report_id', $mecReportWorkflowId ?? 0);
@endphp

<div class="report-d1-documents" id="report-d1-root">
    <div class="report-b1-shell report-qc-shell">
        <div class="report-b1-card-body report-qc-card-body">
            @if ($catalogItems->isEmpty())
                <p class="text-muted small mb-0">Scheme Approval Documents catalog is empty. Run <code class="small">php artisan db:seed --class=ReportSubSectorChecklistSeeder</code>.</p>
            @else
                <div class="report-b1-table-wrap report-c2-ssc-table-wrap">
                    <div class="table-responsive">
                        <table class="table report-b1-data-table report-qc-table report-c2-ssc-table mb-0">
                            <thead>
                                <tr>
                                    <th scope="col">Items</th>
                                    <th scope="col">Availability (Yes/No)</th>
                                    <th scope="col">Observation</th>
                                    <th scope="col" style="min-width: 200px;">Attachment</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($catalogItems as $rIdx => $it)
                                    @php
                                        $row = $rowsByItemId[(int) $it->id] ?? [];
                                        $avail = old($d1Base.'.'.$rIdx.'.availability', $row['availability'] ?? '');
                                        $remarks = old($d1Base.'.'.$rIdx.'.remarks', $row['remarks'] ?? '');
                                        $d1AttachRow = is_array($row) ? $row : [];
                                        $dotBase = $d1Base.'.'.$rIdx.'.';
                                    @endphp
                                    <tr class="report-qc-data-row report-d1-fixed-row" data-sort-order="{{ $it->sort_order }}">
                                        <td class="report-b1-td">
                                            <input type="hidden" name="report[part_d][scheme_approval_documents][rows][{{ $rIdx }}][report_sub_sector_checklist_item_id]" value="{{ $it->id }}">
                                            <span class="mb-0">{{ $it->name }}</span>
                                        </td>
                                        <td class="report-b1-td">
                                            <select
                                                name="report[part_d][scheme_approval_documents][rows][{{ $rIdx }}][availability]"
                                                class="form-control form-control-sm report-b1-input @error($dotBase.'availability') is-invalid @enderror"
                                                aria-label="Availability for {{ $it->name }}"
                                            >
                                                <option value="" @selected($avail === '')>—</option>
                                                <option value="YES" @selected($avail === 'YES')>YES</option>
                                                <option value="NO" @selected($avail === 'NO')>NO</option>
                                                <option value="N/A" @selected($avail === 'N/A')>N/A</option>
                                            </select>
                                            @error($dotBase.'availability')
                                                <span class="invalid-feedback d-block">{{ $message }}</span>
                                            @enderror
                                        </td>
                                        <td class="report-b1-td">
                                            <textarea
                                                name="report[part_d][scheme_approval_documents][rows][{{ $rIdx }}][remarks]"
                                                rows="2"
                                                class="form-control form-control-sm report-b1-input @error($dotBase.'remarks') is-invalid @enderror"
                                                aria-label="Observation for {{ $it->name }}"
                                            >{{ $remarks }}</textarea>
                                            @error($dotBase.'remarks')
                                                <span class="invalid-feedback d-block">{{ $message }}</span>
                                            @enderror
                                        </td>
                                        <td class="report-b1-td">
                                            @include('reports.partials.part-d-attachment-field', [
                                                'nameBase' => 'report[part_d][scheme_approval_documents][rows]['.$rIdx.']',
                                                'dotBase' => $dotBase,
                                                'attachRow' => $d1AttachRow,
                                                'reportDraftIdForD' => $reportDraftIdForD,
                                                'mecReportIdForD' => $mecReportIdForD,
                                                'partDSection' => 'd1',
                                                'partDRowIdx' => (int) $rIdx,
                                                'inputId' => 'report_d1_row_file_'.$rIdx,
                                            ])
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="report-d1-additional border-top pt-3 mt-3" id="report-d1-additional-root">
                    <div class="d-flex flex-column flex-sm-row align-items-start justify-content-between gap-2 mb-2">
                        <div>
                            <h6 class="mb-0 small font-weight-bold text-uppercase text-muted">Any other document(s)</h6>
                            <p class="small text-muted mb-0">Add one or more rows. Name each document and attach a file.</p>
                        </div>
                        <button type="button" class="btn btn-sm report-b1-btn-outline flex-shrink-0" id="report-d1-add-doc-row">
                            + ADD DOCUMENT
                        </button>
                    </div>

                    <div id="report-d1-additional-list" class="report-d1-additional-list">
                        @foreach ($addDocsOld as $aIdx => $adoc)
                            @php
                                $dn = old($addBase.'.'.$aIdx.'.document_name', is_array($adoc) ? ($adoc['document_name'] ?? '') : '');
                                $dotAdd = $addBase.'.'.$aIdx.'.';
                                $d1AttachRow = is_array($adoc) ? $adoc : [];
                            @endphp
                            <div class="report-d1-add-row report-d1-add-doc-row card card-body py-2 px-3 mb-2 bg-light">
                                <div class="d-flex flex-wrap align-items-end gap-2">
                                    <div class="flex-grow-1" style="min-width: 200px;">
                                        <label class="small text-muted mb-0 d-block" for="report_d1_doc_name_{{ $aIdx }}">Document name</label>
                                        <input
                                            type="text"
                                            name="report[part_d][scheme_approval_documents][additional_documents][{{ $aIdx }}][document_name]"
                                            id="report_d1_doc_name_{{ $aIdx }}"
                                            value="{{ $dn }}"
                                            class="form-control form-control-sm @error($dotAdd.'document_name') is-invalid @enderror"
                                            placeholder="e.g. Supplementary approval letter"
                                            autocomplete="off"
                                        >
                                        @error($dotAdd.'document_name')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="flex-grow-1" style="min-width: 220px;">
                                        <label class="small text-muted mb-0 d-block" for="report_d1_doc_file_{{ $aIdx }}">Attachment</label>
                                        @include('reports.partials.part-d-attachment-field', [
                                            'nameBase' => 'report[part_d][scheme_approval_documents][additional_documents]['.$aIdx.']',
                                            'dotBase' => $dotAdd,
                                            'attachRow' => $d1AttachRow,
                                            'reportDraftIdForD' => $reportDraftIdForD,
                                            'mecReportIdForD' => $mecReportIdForD,
                                            'partDSection' => 'd1_additional',
                                            'partDRowIdx' => (int) $aIdx,
                                            'inputId' => 'report_d1_doc_file_'.$aIdx,
                                        ])
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-secondary report-d1-remove-doc mb-1" title="Remove" aria-label="Remove this document row">
                                        <i class="fas fa-times" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <template id="report-d1-add-doc-template">
                    <div class="report-d1-add-row report-d1-add-doc-row card card-body py-2 px-3 mb-2 bg-light">
                        <div class="d-flex flex-wrap align-items-end gap-2">
                            <div class="flex-grow-1" style="min-width: 200px;">
                                <label class="small text-muted mb-0 d-block">Document name</label>
                                <input
                                    type="text"
                                    name="report[part_d][scheme_approval_documents][additional_documents][__A__][document_name]"
                                    class="form-control form-control-sm"
                                    placeholder="e.g. Supplementary approval letter"
                                    autocomplete="off"
                                >
                            </div>
                            <div class="flex-grow-1" style="min-width: 220px;">
                                <label class="small text-muted mb-0 d-block">Attachment</label>
                                <div class="report-part-d-attachments" data-part-d-attachments>
                                    <input type="hidden" name="report[part_d][scheme_approval_documents][additional_documents][__A__][attachments_managed]" value="1">
                                    <ul class="list-unstyled mb-1 report-part-d-attachments__list" data-part-d-attachments-list></ul>
                                    <input
                                        type="file"
                                        name="report[part_d][scheme_approval_documents][additional_documents][__A__][attachment][]"
                                        class="form-control form-control-sm"
                                        accept=".pdf,.doc,.docx,image/*"
                                        multiple
                                    >
                                    <p class="small text-muted mb-0 mt-1">Add more files anytime — they accumulate in the list. Use × to remove any file.</p>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-secondary report-d1-remove-doc mb-1" title="Remove" aria-label="Remove this document row">
                                <i class="fas fa-times" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>
                </template>

                @push('scripts')
                <script>
                (function () {
                    var list = document.getElementById('report-d1-additional-list');
                    var btnAdd = document.getElementById('report-d1-add-doc-row');
                    var tpl = document.getElementById('report-d1-add-doc-template');
                    if (!list || !btnAdd || !tpl) return;

                    function renumberAdditionalDocRows() {
                        list.querySelectorAll('.report-d1-add-doc-row').forEach(function (row, i) {
                            row.querySelectorAll('[name]').forEach(function (el) {
                                el.name = el.name.replace(
                                    /report\[part_d\]\[scheme_approval_documents\]\[additional_documents\]\[\d+\]/,
                                    'report[part_d][scheme_approval_documents][additional_documents][' + i + ']'
                                );
                            });
                        });
                    }

                    btnAdd.addEventListener('click', function () {
                        var ix = list.querySelectorAll('.report-d1-add-doc-row').length;
                        var frag = document.importNode(tpl.content, true);
                        frag.querySelectorAll('[name]').forEach(function (el) {
                            el.name = el.name.replace(/__A__/g, String(ix));
                        });
                        list.appendChild(frag);
                        renumberAdditionalDocRows();
                        var last = list.querySelector('.report-d1-add-doc-row:last-of-type input[type="text"]');
                        if (last) last.focus();
                    });

                    list.addEventListener('click', function (e) {
                        var rm = e.target.closest('.report-d1-remove-doc');
                        if (!rm || !list.contains(rm)) return;
                        var row = rm.closest('.report-d1-add-doc-row');
                        if (row) row.parentNode.removeChild(row);
                        renumberAdditionalDocRows();
                    });

                    renumberAdditionalDocRows();
                })();
                </script>
                @endpush
            @endif
        </div>
    </div>
</div>