{{-- Part F §1 — Compliance observations (CMR: dropdown conclusive remarks; other types: free text).
     Default: one empty row. Optional: pass $reportPartFComplianceObservationRows when loading from the backend.
--}}
@php
    use App\Support\MecReportType;
    $mecSidF1 = isset($mecSectorId) ? (int) $mecSectorId : null;
    $f1ConclusiveDropdown = MecReportType::isCmr((string) ($reportType ?? ''));
    $f1SocialProdCmr = $f1ConclusiveDropdown
        && in_array((string) (MecReportType::sectorCodeFromMecSectorId($mecSidF1) ?? ''), ['social', 'production'], true);
    $f1ConcColTitle = $f1SocialProdCmr
        ? 'Conclusive Remarks (Satisfactory / Unsatisfactory)'
        : ($f1ConclusiveDropdown ? 'Conclusive Remarks' : 'Conclusive Remarks (Satisfactory / Unsatisfactory)');
    $fBase = 'report.part_f.compliance_observations.rows';
    $fRowsOld = report_wizard_rows('part_f.compliance_observations.rows', [
        ['last_visit_observation' => '', 'ea_replies' => '', 'mec_compliance_replies' => '', 'conclusive_remarks' => ''],
    ], $reportPayload ?? null);
@endphp

<div class="report-f1-root" id="report-f1-root" data-f1-conclusive-dropdown="{{ $f1ConclusiveDropdown ? '1' : '0' }}">
    <div class="report-b1-shell report-qc-shell">
        <div class="report-b1-card-body report-qc-card-body">
            <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" class="text-center" style="width:3.5rem;">S#</th>
                                <th scope="col">Last Visit Observation</th>
                                <th scope="col">EA Replies</th>
                                <th scope="col">MEC Compliance Replies</th>
                                <th scope="col">{{ $f1ConcColTitle }}</th>
                                <th class="report-b1-th-actions"></th>
                            </tr>
                        </thead>
                        <tbody id="report-f1-tbody">
                            @foreach ($fRowsOld as $rIdx => $row)
                                @php
                                    $lvo = old($fBase.'.'.$rIdx.'.last_visit_observation', $row['last_visit_observation'] ?? '');
                                    $ea = old($fBase.'.'.$rIdx.'.ea_replies', $row['ea_replies'] ?? '');
                                    $mec = old($fBase.'.'.$rIdx.'.mec_compliance_replies', $row['mec_compliance_replies'] ?? '');
                                    $conc = old($fBase.'.'.$rIdx.'.conclusive_remarks', $row['conclusive_remarks'] ?? '');
                                    $dotBase = $fBase.'.'.$rIdx.'.';
                                    $concSel = $f1ConclusiveDropdown && in_array((string) $conc, ['Satisfactory', 'Unsatisfactory'], true) ? (string) $conc : '';
                                @endphp
                                <tr class="report-qc-data-row report-f1-data-row" data-row-index="{{ $rIdx }}">
                                    <td class="report-b1-td text-center align-middle font-weight-bold text-muted report-f1-serial">{{ $rIdx + 1 }}</td>
                                    <td class="report-b1-td">
                                        <textarea
                                            name="report[part_f][compliance_observations][rows][{{ $rIdx }}][last_visit_observation]"
                                            rows="3"
                                            class="form-control form-control-sm report-b1-input @error($dotBase.'last_visit_observation') is-invalid @enderror"
                                            aria-label="Last visit observation"
                                        >{{ $lvo }}</textarea>
                                        @error($dotBase.'last_visit_observation')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </td>
                                    <td class="report-b1-td">
                                        <textarea
                                            name="report[part_f][compliance_observations][rows][{{ $rIdx }}][ea_replies]"
                                            rows="3"
                                            class="form-control form-control-sm report-b1-input @error($dotBase.'ea_replies') is-invalid @enderror"
                                            aria-label="EA replies"
                                        >{{ $ea }}</textarea>
                                        @error($dotBase.'ea_replies')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </td>
                                    <td class="report-b1-td">
                                        <textarea
                                            name="report[part_f][compliance_observations][rows][{{ $rIdx }}][mec_compliance_replies]"
                                            rows="3"
                                            class="form-control form-control-sm report-b1-input @error($dotBase.'mec_compliance_replies') is-invalid @enderror"
                                            aria-label="MEC compliance replies"
                                        >{{ $mec }}</textarea>
                                        @error($dotBase.'mec_compliance_replies')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </td>
                                    <td class="report-b1-td">
                                        @if ($f1ConclusiveDropdown)
                                            <select
                                                name="report[part_f][compliance_observations][rows][{{ $rIdx }}][conclusive_remarks]"
                                                class="form-control form-control-sm report-b1-input @error($dotBase.'conclusive_remarks') is-invalid @enderror"
                                                aria-label="Conclusive remarks"
                                            >
                                                <option value="" @selected($concSel === '')>—</option>
                                                <option value="Satisfactory" @selected($concSel === 'Satisfactory')>Satisfactory</option>
                                                <option value="Unsatisfactory" @selected($concSel === 'Unsatisfactory')>Unsatisfactory</option>
                                                <option value="N/A" @selected($concSel === 'N/A')>N/A</option>
                                            </select>
                                        @else
                                            <textarea
                                                name="report[part_f][compliance_observations][rows][{{ $rIdx }}][conclusive_remarks]"
                                                rows="3"
                                                class="form-control form-control-sm report-b1-input @error($dotBase.'conclusive_remarks') is-invalid @enderror"
                                                placeholder="e.g. Satisfactory — brief justification"
                                                aria-label="Conclusive remarks"
                                            >{{ $conc }}</textarea>
                                        @endif
                                        @error($dotBase.'conclusive_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-f1-remove-row" title="Remove row" aria-label="Remove row" @if (count($fRowsOld) <= 1) style="visibility:hidden" @endif>
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="report-b2-toolbar report-f1-toolbar pms-report-toolbar-row--bottom mb-2">
                <button type="button" class="btn report-b1-btn-outline" id="report-f1-add-row">
                    + ADD ROW
                </button>
            </div>
        </div>
    </div>
</div>

<template id="report-f1-row-template-select">
    <tr class="report-qc-data-row report-f1-data-row" data-row-index="__R__">
        <td class="report-b1-td text-center align-middle font-weight-bold text-muted report-f1-serial"></td>
        <td class="report-b1-td">
            <textarea name="report[part_f][compliance_observations][rows][__R__][last_visit_observation]" rows="3" class="form-control form-control-sm report-b1-input" aria-label="Last visit observation"></textarea>
        </td>
        <td class="report-b1-td">
            <textarea name="report[part_f][compliance_observations][rows][__R__][ea_replies]" rows="3" class="form-control form-control-sm report-b1-input" aria-label="EA replies"></textarea>
        </td>
        <td class="report-b1-td">
            <textarea name="report[part_f][compliance_observations][rows][__R__][mec_compliance_replies]" rows="3" class="form-control form-control-sm report-b1-input" aria-label="MEC compliance replies"></textarea>
        </td>
        <td class="report-b1-td">
            <select name="report[part_f][compliance_observations][rows][__R__][conclusive_remarks]" class="form-control form-control-sm report-b1-input" aria-label="Conclusive remarks">
                <option value="">—</option>
                <option value="Satisfactory">Satisfactory</option>
                <option value="Unsatisfactory">Unsatisfactory</option>
                <option value="N/A">N/A</option>
            </select>
        </td>
        <td class="report-b1-td report-b1-td-actions text-center align-middle">
            <button type="button" class="btn btn-sm report-f1-remove-row" title="Remove row" aria-label="Remove row">
                <i class="fas fa-times"></i>
            </button>
        </td>
    </tr>
</template>

<template id="report-f1-row-template-textarea">
    <tr class="report-qc-data-row report-f1-data-row" data-row-index="__R__">
        <td class="report-b1-td text-center align-middle font-weight-bold text-muted report-f1-serial"></td>
        <td class="report-b1-td">
            <textarea name="report[part_f][compliance_observations][rows][__R__][last_visit_observation]" rows="3" class="form-control form-control-sm report-b1-input" aria-label="Last visit observation"></textarea>
        </td>
        <td class="report-b1-td">
            <textarea name="report[part_f][compliance_observations][rows][__R__][ea_replies]" rows="3" class="form-control form-control-sm report-b1-input" aria-label="EA replies"></textarea>
        </td>
        <td class="report-b1-td">
            <textarea name="report[part_f][compliance_observations][rows][__R__][mec_compliance_replies]" rows="3" class="form-control form-control-sm report-b1-input" aria-label="MEC compliance replies"></textarea>
        </td>
        <td class="report-b1-td">
            <textarea name="report[part_f][compliance_observations][rows][__R__][conclusive_remarks]" rows="3" class="form-control form-control-sm report-b1-input" placeholder="e.g. Satisfactory — brief justification" aria-label="Conclusive remarks"></textarea>
        </td>
        <td class="report-b1-td report-b1-td-actions text-center align-middle">
            <button type="button" class="btn btn-sm report-f1-remove-row" title="Remove row" aria-label="Remove row">
                <i class="fas fa-times"></i>
            </button>
        </td>
    </tr>
</template>

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

    var useSelect = root.getAttribute('data-f1-conclusive-dropdown') === '1';
    var tplId = useSelect ? 'report-f1-row-template-select' : 'report-f1-row-template-textarea';
    var tplEl = document.getElementById(tplId);
    var nameRe = /report\[part_f\]\[compliance_observations\]\[rows\]\[[^\]]+\]/;

    function updateSerials() {
        tbody.querySelectorAll('.report-f1-data-row').forEach(function (tr, i) {
            var cell = tr.querySelector('.report-f1-serial');
            if (cell) cell.textContent = String(i + 1);
        });
    }

    function renumberRows() {
        var rows = tbody.querySelectorAll('.report-f1-data-row');
        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_f][compliance_observations][rows][' + i + ']');
            });
            var rm = tr.querySelector('.report-f1-remove-row');
            if (rm) rm.style.visibility = rows.length <= 1 ? 'hidden' : 'visible';
        });
        updateSerials();
    }

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

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

    if (btnAdd && tplEl && tplEl.content) {
        btnAdd.addEventListener('click', function () {
            var frag = tplEl.content.cloneNode(true);
            var tr = frag.querySelector('tr');
            if (!tr) return;
            tbody.appendChild(tr);
            bindRemove(tr);
            renumberRows();
        });
    }
})();
</script>
@endpush