{{-- Part C §2 — Misc. Checks/Compliances (YES/NO + Observation) --}}
@php
    $miscBase = 'report.part_c.misc_compliance.rows';
    $sscItemsMisc = isset($subSectorChecklistItemsMisc) ? collect($subSectorChecklistItemsMisc) : collect();

    $miscRowsOld = report_wizard_rows('part_c.misc_compliance.rows', [
        ['report_sub_sector_checklist_item_id' => '', 'as_per_approved_design' => '', 'remarks' => ''],
    ], $reportPayload ?? null);
@endphp

<div class="report-c3-misc" id="report-c3-misc-root">
    <div class="report-b1-shell report-qc-shell">
        <div class="report-b1-card-body report-qc-card-body">
            <div class="report-c2-ssc-head d-flex flex-column flex-md-row align-items-start justify-content-between gap-2 gap-md-3 mb-2 mb-md-3">
                <div class="report-c2-ssc-checklist-title-wrap flex-grow-1 min-w-0 pr-md-2">
                    <h3 class="report-c2-ssc-checklist-title mb-0" id="report-c3-misc-heading">
                        Misc. Checks/Compliances
                    </h3>
                </div>
            </div>

            @if ($sscItemsMisc->isEmpty())
                <p class="text-muted small mb-0">Misc. Checks 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">Check (Yes/No)</th>
                                    <th scope="col">Observation</th>
                                    <th class="report-b1-th-actions"></th>
                                </tr>
                            </thead>
                            <tbody id="report-c3-tbody-misc">
                                @foreach ($miscRowsOld as $rIdx => $row)
                                    @php
                                        $itemId = old($miscBase.'.'.$rIdx.'.report_sub_sector_checklist_item_id', $row['report_sub_sector_checklist_item_id'] ?? '');
                                        $ap = old($miscBase.'.'.$rIdx.'.as_per_approved_design', $row['as_per_approved_design'] ?? '');
                                        $remarks = old($miscBase.'.'.$rIdx.'.remarks', $row['remarks'] ?? '');
                                        $dotBase = $miscBase.'.'.$rIdx.'.';
                                    @endphp
                                    <tr class="report-qc-data-row report-c3-data-row-misc" data-row-index="{{ $rIdx }}">
                                        <td class="report-b1-td">
                                            <select
                                                name="report[part_c][misc_compliance][rows][{{ $rIdx }}][report_sub_sector_checklist_item_id]"
                                                class="form-control form-control-sm report-b1-input @error($dotBase.'report_sub_sector_checklist_item_id') is-invalid @enderror"
                                                aria-label="Misc. checklist item"
                                            >
                                                <option value="">Select item</option>
                                                @foreach ($sscItemsMisc as $it)
                                                    <option value="{{ $it->id }}" @selected((string) $itemId === (string) $it->id)>{{ $it->name }}</option>
                                                @endforeach
                                            </select>
                                            @error($dotBase.'report_sub_sector_checklist_item_id')
                                                <span class="invalid-feedback d-block">{{ $message }}</span>
                                            @enderror
                                        </td>
                                        <td class="report-b1-td">
                                            <select
                                                name="report[part_c][misc_compliance][rows][{{ $rIdx }}][as_per_approved_design]"
                                                class="form-control form-control-sm report-b1-input @error($dotBase.'as_per_approved_design') is-invalid @enderror"
                                                aria-label="Check Yes or No"
                                            >
                                                <option value="" @selected($ap === '')>—</option>
                                                <option value="YES" @selected($ap === 'YES')>YES</option>
                                                <option value="NO" @selected($ap === 'NO')>NO</option>
                                                <option value="N/A" @selected($ap === 'N/A')>N/A</option>
                                            </select>
                                            @error($dotBase.'as_per_approved_design')
                                                <span class="invalid-feedback d-block">{{ $message }}</span>
                                            @enderror
                                        </td>
                                        <td class="report-b1-td">
                                            <textarea
                                                name="report[part_c][misc_compliance][rows][{{ $rIdx }}][remarks]"
                                                rows="2"
                                                class="form-control form-control-sm report-b1-input @error($dotBase.'remarks') is-invalid @enderror"
                                                aria-label="Observation"
                                            >{{ $remarks }}</textarea>
                                            @error($dotBase.'remarks')
                                                <span class="invalid-feedback d-block">{{ $message }}</span>
                                            @enderror
                                        </td>
                                        <td class="report-b1-td report-b1-td-actions text-center align-middle">
                                            <button type="button" class="btn btn-sm report-c3-remove-row" title="Remove row" aria-label="Remove row" @if (count($miscRowsOld) <= 1) style="visibility:hidden" @endif>
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="report-b2-toolbar pms-report-toolbar-row--bottom mb-2">
                    <button type="button" class="btn report-b1-btn-outline" id="report-c3-add-row-misc">
                        + ADD ROW
                    </button>
                </div>
            @endif
        </div>
    </div>
</div>

@if ($sscItemsMisc->isNotEmpty())
<template id="report-c3-row-template-misc">
    <tr class="report-qc-data-row report-c3-data-row-misc" data-row-index="__R__">
        <td class="report-b1-td">
            <select name="report[part_c][misc_compliance][rows][__R__][report_sub_sector_checklist_item_id]" class="form-control form-control-sm report-b1-input" aria-label="Misc. checklist item">
                <option value="">Select item</option>
                @foreach ($sscItemsMisc as $it)
                    <option value="{{ $it->id }}">{{ $it->name }}</option>
                @endforeach
            </select>
        </td>
        <td class="report-b1-td">
            <select name="report[part_c][misc_compliance][rows][__R__][as_per_approved_design]" class="form-control form-control-sm report-b1-input" aria-label="Check Yes or No">
                <option value="">—</option>
                <option value="YES">YES</option>
                <option value="NO">NO</option>
                <option value="N/A">N/A</option>
            </select>
        </td>
        <td class="report-b1-td">
            <textarea name="report[part_c][misc_compliance][rows][__R__][remarks]" rows="2" class="form-control form-control-sm report-b1-input" aria-label="Observation"></textarea>
        </td>
        <td class="report-b1-td report-b1-td-actions text-center align-middle">
            <button type="button" class="btn btn-sm report-c3-remove-row" title="Remove row" aria-label="Remove row">
                <i class="fas fa-times"></i>
            </button>
        </td>
    </tr>
</template>
@endif

@push('scripts')
<script>
(function () {
    var root = document.getElementById('report-c3-misc-root');
    var tbody = document.getElementById('report-c3-tbody-misc');
    var btnAdd = document.getElementById('report-c3-add-row-misc');
    var tpl = document.getElementById('report-c3-row-template-misc');
    if (!root || !tbody || !btnAdd || !tpl) return;

    var nameRe = /report\[part_c\]\[misc_compliance\]\[rows\]\[\d+\]/;

    function renumberRows() {
        var rows = tbody.querySelectorAll('.report-c3-data-row-misc');
        rows.forEach(function (tr, i) {
            tr.setAttribute('data-row-index', String(i));
            tr.querySelectorAll('[name]').forEach(function (el) {
                el.name = el.name.replace(nameRe, 'report[part_c][misc_compliance][rows][' + i + ']');
            });
            var rm = tr.querySelector('.report-c3-remove-row');
            if (rm) rm.style.visibility = rows.length <= 1 ? 'hidden' : 'visible';
        });
    }

    function bindRemove(tr) {
        var rm = tr.querySelector('.report-c3-remove-row');
        if (!rm) return;
        rm.addEventListener('click', function () {
            if (tbody.querySelectorAll('.report-c3-data-row-misc').length <= 1) return;
            tr.parentNode.removeChild(tr);
            renumberRows();
        });
    }

    tbody.querySelectorAll('.report-c3-data-row-misc').forEach(function (tr) {
        bindRemove(tr);
    });

    btnAdd.addEventListener('click', function () {
        var ix = tbody.querySelectorAll('.report-c3-data-row-misc').length;
        var frag = document.importNode(tpl.content, true);
        var tr = frag.querySelector('tr');
        if (!tr) return;
        tr.querySelectorAll('[name]').forEach(function (el) {
            el.name = el.name.replace(/__R__/g, String(ix));
        });
        tbody.appendChild(tr);
        renumberRows();
        bindRemove(tr);
        var sel = tr.querySelector('select[name*="[report_sub_sector_checklist_item_id]"]');
        if (sel) sel.focus();
    });
})();
</script>
@endpush