{{-- Part C §1 — Sub-Sector Specific Compliance (checkboxes + per-category checklist tables) --}}
@php
    use App\Models\ReportSubSectorChecklistItem;

    $sscBase = 'report.part_c.sub_sector_compliance';
    $sscCategories = isset($subSectorComplianceCategories) ? collect($subSectorComplianceCategories) : collect();
    $sscItemsByCategory = $subSectorChecklistItemsByCategory ?? [];
    $sscPayload = $reportPayload ?? report_wizard_payload_array(is_array($report ?? null) ? $report : null);

    $sscAnyCatOld = false;
    foreach ($sscCategories as $sscCat) {
        if ((bool) report_wizard_old('part_c.sub_sector_compliance.'.$sscCat->code, data_get($sscPayload, 'part_c.sub_sector_compliance.'.$sscCat->code, false), $sscPayload)) {
            $sscAnyCatOld = true;
            break;
        }
    }
@endphp

<div class="report-c2-ssc" id="report-c2-ssc-root">
    <div class="report-c2-ssc-checks mb-3">
        <div class="row align-items-center mb-0">
            @forelse ($sscCategories as $sscCat)
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="form-check mb-2 mb-md-0">
                        <input
                            type="checkbox"
                            class="form-check-input report-c2-ssc-cat @error($sscBase.'.'.$sscCat->code) is-invalid @enderror"
                            name="report[part_c][sub_sector_compliance][{{ $sscCat->code }}]"
                            id="report-ssc-{{ $sscCat->code }}"
                            value="1"
                            data-ssc-panel="{{ $sscCat->code }}"
                            @checked(report_wizard_old('part_c.sub_sector_compliance.'.$sscCat->code, data_get($sscPayload, 'part_c.sub_sector_compliance.'.$sscCat->code, false), $sscPayload))
                        >
                        <label class="form-check-label" for="report-ssc-{{ $sscCat->code }}">{{ display_text($sscCat->label) }}</label>
                    </div>
                    @error($sscBase.'.'.$sscCat->code)
                        <span class="invalid-feedback d-block">{{ $message }}</span>
                    @enderror
                </div>
            @empty
                <div class="col-12">
                    <p class="text-muted small mb-0">No sub-sector compliance categories configured. Add categories under Admin Controls → SSC Categories.</p>
                </div>
            @endforelse
        </div>
    </div>

    <fieldset class="report-c2-ssc-fieldset border-0 p-0 m-0" id="report-c2-ssc-rows-fieldset" @unless ($sscAnyCatOld) disabled @endunless>
        <div class="report-c2-ssc-rows-inner">
            @foreach ($sscCategories as $sscCat)
                @include('reports.partials.c2-sub-sector-compliance-category', [
                    'sscCategory' => $sscCat,
                    'sscItems' => collect($sscItemsByCategory[$sscCat->code] ?? []),
                    'sscBase' => $sscBase,
                    'sscPayload' => $sscPayload,
                ])
            @endforeach
        </div>
    </fieldset>
</div>

@push('scripts')
<script>
(function () {
    var root = document.getElementById('report-c2-ssc-root');
    var fieldset = document.getElementById('report-c2-ssc-rows-fieldset');
    var form = root && root.closest ? root.closest('form') : null;
    if (!root || !fieldset) return;

    var cats = root.querySelectorAll('.report-c2-ssc-cat');

    function anyCatChecked() {
        for (var i = 0; i < cats.length; i++) {
            if (cats[i].checked) return true;
        }
        return false;
    }

    function syncFieldsetDisabled() {
        fieldset.disabled = !anyCatChecked();
    }

    function syncPanels() {
        cats.forEach(function (cb) {
            var code = cb.getAttribute('data-ssc-panel');
            if (!code) return;
            var panel = document.getElementById('report-c2-panel-' + code);
            if (panel) {
                panel.classList.toggle('d-none', !cb.checked);
            }
        });
    }

    cats.forEach(function (cb) {
        cb.addEventListener('change', function () {
            syncFieldsetDisabled();
            syncPanels();
        });
    });

    if (form) {
        form.addEventListener('submit', function () {
            fieldset.disabled = false;
        });
    }

    syncFieldsetDisabled();
    syncPanels();

    function setupDynamicTable(tbodyId, btnId, tplId, rowSelector) {
        var tbody = document.getElementById(tbodyId);
        var btnAdd = document.getElementById(btnId);
        var tpl = document.getElementById(tplId);
        if (!tbody || !btnAdd || !tpl) return;

        var keySeg = tbody.getAttribute('data-ssc-rows-key') || 'roads_rows';
        var nameRe = new RegExp('sub_sector_compliance\\]\\[' + keySeg.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\]\\[\\d+\\]');

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

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

        tbody.querySelectorAll(rowSelector).forEach(function (tr) {
            bindRemove(tr);
        });

        btnAdd.addEventListener('click', function () {
            if (fieldset.disabled) return;
            var ix = tbody.querySelectorAll(rowSelector).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('.report-c2-js-item');
            if (sel) sel.focus();
        });
    }

    @foreach ($sscCategories as $sscCat)
        setupDynamicTable(
            'report-c2-tbody-{{ $sscCat->code }}',
            'report-c2-add-row-{{ $sscCat->code }}',
            'report-c2-row-template-{{ $sscCat->code }}',
            '.report-c2-data-row-{{ $sscCat->code }}'
        );
    @endforeach
})();
</script>
@endpush