@php
    /** @var \App\Models\ReportSubSectorComplianceCategory $sscCategory */
    $sscRowsKey = $sscCategory->rows_key;
    $sscRowsOld = report_wizard_rows($sscBase.'.'.$sscRowsKey, [
        ['report_sub_sector_checklist_item_id' => '', 'as_per_approved_design' => ''],
    ], $sscPayload);
    if ($sscCategory->has_remarks) {
        $sscRowsOld = report_wizard_rows($sscBase.'.'.$sscRowsKey, [
            ['report_sub_sector_checklist_item_id' => '', 'as_per_approved_design' => '', 'remarks' => ''],
        ], $sscPayload);
    }
    $showPanel = (bool) report_wizard_old('part_c.sub_sector_compliance.'.$sscCategory->code, data_get($sscPayload, 'part_c.sub_sector_compliance.'.$sscCategory->code, false), $sscPayload);
    $panelId = 'report-c2-panel-'.$sscCategory->code;
    $tbodyId = 'report-c2-tbody-'.$sscCategory->code;
    $btnId = 'report-c2-add-row-'.$sscCategory->code;
    $tplId = 'report-c2-row-template-'.$sscCategory->code;
    $rowClass = 'report-c2-data-row-'.$sscCategory->code;
@endphp

<div id="{{ $panelId }}" class="report-c2-ssc-panel mb-4 {{ $showPanel ? '' : 'd-none' }}" data-ssc-panel="{{ $sscCategory->code }}">
    <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">
                {{ display_text($sscCategory->displayHeading()) }}
                <span class="report-c2-ssc-checklist-subtitle">(Fill In Only the Relevant Items Based on the Visit Made)</span>
            </h3>
        </div>
    </div>
    @if ($sscItems->isEmpty())
        <p class="text-muted small mb-0">{{ display_text($sscCategory->label) }} checklist catalog is empty. Add items under Admin Controls → Sub-Sector Compliances.</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 class="text-center report-c2-ssc-th-num" scope="col">#</th>
                            <th scope="col">Items</th>
                            <th scope="col">As per approved design</th>
                            @if ($sscCategory->has_remarks)
                                <th scope="col">Remarks</th>
                            @endif
                            <th class="report-b1-th-actions"></th>
                        </tr>
                    </thead>
                    <tbody id="{{ $tbodyId }}" data-ssc-rows-key="{{ $sscRowsKey }}">
                        @foreach ($sscRowsOld as $rIdx => $row)
                            @php
                                $itemId = old($sscBase.'.'.$sscRowsKey.'.'.$rIdx.'.report_sub_sector_checklist_item_id', $row['report_sub_sector_checklist_item_id'] ?? '');
                                $ap = old($sscBase.'.'.$sscRowsKey.'.'.$rIdx.'.as_per_approved_design', $row['as_per_approved_design'] ?? '');
                                $remarks = old($sscBase.'.'.$sscRowsKey.'.'.$rIdx.'.remarks', $row['remarks'] ?? '');
                                $dotBase = $sscBase.'.'.$sscRowsKey.'.'.$rIdx.'.';
                            @endphp
                            <tr class="report-qc-data-row report-c2-data-row {{ $rowClass }}" data-row-index="{{ $rIdx }}">
                                <td class="report-b1-td text-center align-middle report-c2-ssc-row-num">{{ $rIdx + 1 }}</td>
                                <td class="report-b1-td">
                                    <select
                                        name="report[part_c][sub_sector_compliance][{{ $sscRowsKey }}][{{ $rIdx }}][report_sub_sector_checklist_item_id]"
                                        class="form-control form-control-sm report-b1-input report-c2-js-item @error($dotBase.'report_sub_sector_checklist_item_id') is-invalid @enderror"
                                        aria-label="Checklist item"
                                    >
                                        <option value="">Select item</option>
                                        @foreach ($sscItems as $it)
                                            <option value="{{ $it->id }}" @selected((string) $itemId === (string) $it->id)>{{ $it->sort_order }}. {{ display_text($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][sub_sector_compliance][{{ $sscRowsKey }}][{{ $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="As per approved design"
                                    >
                                        <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>
                                @if ($sscCategory->has_remarks)
                                    <td class="report-b1-td">
                                        <textarea
                                            name="report[part_c][sub_sector_compliance][{{ $sscRowsKey }}][{{ $rIdx }}][remarks]"
                                            rows="2"
                                            class="form-control form-control-sm report-b1-input @error($dotBase.'remarks') is-invalid @enderror"
                                        >{{ $remarks }}</textarea>
                                        @error($dotBase.'remarks')
                                            <span class="invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </td>
                                @endif
                                <td class="report-b1-td report-b1-td-actions text-center align-middle">
                                    <button type="button" class="btn btn-sm report-c2-remove-row" title="Remove row" aria-label="Remove row" @if (count($sscRowsOld) <= 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 report-c2-ssc-add-row-btn" id="{{ $btnId }}">
                + ADD ROW
            </button>
        </div>
    @endif
</div>

@if ($sscItems->isNotEmpty())
<template id="{{ $tplId }}">
    <tr class="report-qc-data-row report-c2-data-row {{ $rowClass }}" data-row-index="__R__">
        <td class="report-b1-td text-center align-middle report-c2-ssc-row-num">1</td>
        <td class="report-b1-td">
            <select name="report[part_c][sub_sector_compliance][{{ $sscRowsKey }}][__R__][report_sub_sector_checklist_item_id]" class="form-control form-control-sm report-b1-input report-c2-js-item" aria-label="Checklist item">
                <option value="">Select item</option>
                @foreach ($sscItems as $it)
                    <option value="{{ $it->id }}">{{ $it->sort_order }}. {{ display_text($it->name) }}</option>
                @endforeach
            </select>
        </td>
        <td class="report-b1-td">
            <select name="report[part_c][sub_sector_compliance][{{ $sscRowsKey }}][__R__][as_per_approved_design]" class="form-control form-control-sm report-b1-input" aria-label="As per approved design">
                <option value="">—</option>
                <option value="YES">YES</option>
                <option value="NO">NO</option>
                <option value="N/A">N/A</option>
            </select>
        </td>
        @if ($sscCategory->has_remarks)
            <td class="report-b1-td">
                <textarea name="report[part_c][sub_sector_compliance][{{ $sscRowsKey }}][__R__][remarks]" rows="2" class="form-control form-control-sm report-b1-input"></textarea>
            </td>
        @endif
        <td class="report-b1-td report-b1-td-actions text-center align-middle">
            <button type="button" class="btn btn-sm report-c2-remove-row" title="Remove row" aria-label="Remove row">
                <i class="fas fa-times"></i>
            </button>
        </td>
    </tr>
</template>
@endif