@php
    $planSchemeA3 = $reportWizardPlanScheme ?? null;
    $planLinkedA3 = $planSchemeA3 !== null;
    $plannedVisitPrefill = $reportMonitoringPlannedVisitDatePrefill ?? '';
    $lastVisitPrefill = $reportMonitoringLastVisitPrefill ?? ['date' => '', 'assessment_status' => ''];
    $pA3 = $reportPayload ?? report_wizard_payload_array(is_array($report ?? null) ? $report : null);
    $plannedVisitDisplay = report_wizard_old('part_a.monitoring_visit.planned_visit_date', $plannedVisitPrefill, $pA3);
    $plannedVisitHasPrefill = $plannedVisitPrefill !== '';
    $lastVisitDateDisplay = trim((string) report_wizard_old('part_a.monitoring_visit.last_visit_date', $lastVisitPrefill['date'] ?? 'N/A', $pA3));
    $lastVisitStatusDisplay = trim((string) report_wizard_old('part_a.monitoring_visit.last_visit_assessment_status', $lastVisitPrefill['assessment_status'] ?? 'N/A', $pA3));
    if ($lastVisitDateDisplay === '') {
        $lastVisitDateDisplay = 'N/A';
    }
    if ($lastVisitStatusDisplay === '') {
        $lastVisitStatusDisplay = 'N/A';
    }

    $reportingOfficerPrefill = $reportMonitoringReportingOfficerPrefill ?? ['name' => '', 'designation' => ''];
    $reportingOfficerNameDisplay = report_wizard_old('part_a.monitoring_visit.reporting_officer_name', $reportingOfficerPrefill['name'] ?? '', $pA3);
    $reportingOfficerDesDisplay = report_wizard_old('part_a.monitoring_visit.reporting_officer_designation', $reportingOfficerPrefill['designation'] ?? '', $pA3);
    $reportingOfficerLocked = $planLinkedA3 && trim((string) ($reportingOfficerPrefill['name'] ?? '')) !== '';

    $mecPrefill = $reportMonitoringMecTeamPrefillRows ?? [];
    $mecUserOptions = $reportMecTeamUserOptions ?? [];
    $isMecTeamRowPlanLocked = static function (array $pair) use ($planLinkedA3, $mecPrefill): bool {
        if (! $planLinkedA3 || $mecPrefill === []) {
            return false;
        }
        $name = strtolower(trim((string) ($pair['name'] ?? '')));
        if ($name === '') {
            return false;
        }
        foreach ($mecPrefill as $prefillRow) {
            if ($name === strtolower(trim((string) ($prefillRow['name'] ?? '')))) {
                return true;
            }
        }

        return false;
    };

    $oldMecNames = report_wizard_old('part_a.monitoring_visit.mec_team_names', null, $pA3);
    $oldMecDes = report_wizard_old('part_a.monitoring_visit.mec_team_designations', null, $pA3);
    if (is_array($oldMecNames) || is_array($oldMecDes)) {
        $names = is_array($oldMecNames) ? array_values(array_map(static fn ($v) => (string) $v, $oldMecNames)) : [];
        $dess = is_array($oldMecDes) ? array_values(array_map(static fn ($v) => (string) $v, $oldMecDes)) : [];
        $n = max(count($names), count($dess));
        $mecPairRows = [];
        for ($i = 0; $i < $n; $i++) {
            $pair = ['name' => (string) ($names[$i] ?? ''), 'designation' => (string) ($dess[$i] ?? '')];
            if (trim($pair['name']) !== '' || trim($pair['designation']) !== '') {
                $mecPairRows[] = array_merge($pair, ['locked' => $isMecTeamRowPlanLocked($pair)]);
            }
        }
    } elseif (
        report_wizard_old('part_a.monitoring_visit.mec_team_name', null, $pA3) !== null
        && (string) report_wizard_old('part_a.monitoring_visit.mec_team_name', '', $pA3) !== ''
    ) {
        $pair = [
            'name' => (string) report_wizard_old('part_a.monitoring_visit.mec_team_name', '', $pA3),
            'designation' => (string) report_wizard_old('part_a.monitoring_visit.mec_team_designation', '', $pA3),
        ];
        $mecPairRows = [array_merge($pair, ['locked' => $isMecTeamRowPlanLocked($pair)])];
    } elseif (count($mecPrefill) > 0 && data_get($pA3, 'part_a.monitoring_visit.mec_team_names') === null) {
        $mecPairRows = array_map(
            static fn (array $row) => array_merge($row, ['locked' => true]),
            $mecPrefill
        );
    } else {
        $mecPairRows = [];
    }

    $oldAdNames = report_wizard_old('part_a.monitoring_visit.ad_ea_officer_names', null, $pA3);
    $oldAdDes = report_wizard_old('part_a.monitoring_visit.ad_ea_officer_designations', null, $pA3);
    if (is_array($oldAdNames) || is_array($oldAdDes)) {
        $names = is_array($oldAdNames) ? array_values(array_map(static fn ($v) => (string) $v, $oldAdNames)) : [];
        $dess = is_array($oldAdDes) ? array_values(array_map(static fn ($v) => (string) $v, $oldAdDes)) : [];
        $n = max(count($names), count($dess), 1);
        $adEaPairRows = [];
        for ($i = 0; $i < $n; $i++) {
            $adEaPairRows[] = ['name' => (string) ($names[$i] ?? ''), 'designation' => (string) ($dess[$i] ?? '')];
        }
    } elseif (
        report_wizard_old('part_a.monitoring_visit.ad_ea_officer_name', null, $pA3) !== null
        && (string) report_wizard_old('part_a.monitoring_visit.ad_ea_officer_name', '', $pA3) !== ''
    ) {
        $adEaPairRows = [[
            'name' => (string) report_wizard_old('part_a.monitoring_visit.ad_ea_officer_name', '', $pA3),
            'designation' => (string) report_wizard_old('part_a.monitoring_visit.ad_ea_officer_designation', '', $pA3),
        ]];
    } else {
        $adEaPairRows = [['name' => '', 'designation' => '']];
    }
@endphp
{{-- Part A §3 — Monitoring Visit History (same green table as §1–§2; title from collapsible only) --}}
<div class="report-pa-field-table">
    <div class="table-responsive">
        <table class="table report-proc-table mb-0">
            <tbody>
                <tr>
                    <th scope="row" class="report-proc-label">Last Visit Date (if any)</th>
                    <td class="report-proc-cell">
                        <input
                            type="text"
                            name="report[part_a][monitoring_visit][last_visit_date]"
                            id="report_a_m_last_visit_date"
                            class="form-control form-control-sm pms-report-na-field"
                            data-na-type="date"
                            data-na-placeholder="N/A"
                            value="{{ $lastVisitDateDisplay }}"
                            autocomplete="off"
                        >
                    </td>
                    <th scope="row" class="report-proc-label">Last Visit's Assessment Status</th>
                    <td class="report-proc-cell">
                        <input
                            type="text"
                            name="report[part_a][monitoring_visit][last_visit_assessment_status]"
                            id="report_a_m_last_status"
                            class="form-control form-control-sm pms-report-na-field"
                            data-na-type="text"
                            data-na-placeholder="N/A"
                            value="{{ $lastVisitStatusDisplay }}"
                            autocomplete="off"
                        >
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="report-proc-label">Planned Visit Date</th>
                    <td class="report-proc-cell">
                        @if ($planLinkedA3)
                            <input
                                type="date"
                                id="report_a_m_planned_date"
                                class="form-control form-control-sm report-a1-identity-readonly @error('report.part_a.monitoring_visit.planned_visit_date') is-invalid @enderror"
                                value="{{ $plannedVisitDisplay }}"
                                disabled
                            >
                            @if ($plannedVisitHasPrefill)
                                <input type="hidden" name="report[part_a][monitoring_visit][planned_visit_date]" value="{{ $plannedVisitDisplay }}">
                            @endif
                        @else
                            <input
                                type="date"
                                name="report[part_a][monitoring_visit][planned_visit_date]"
                                id="report_a_m_planned_date"
                                class="form-control form-control-sm @error('report.part_a.monitoring_visit.planned_visit_date') is-invalid @enderror"
                                value="{{ $plannedVisitDisplay }}"
                            >
                        @endif
                        @error('report.part_a.monitoring_visit.planned_visit_date')
                            <span class="invalid-feedback d-block">{{ $message }}</span>
                        @enderror
                        @if ($planLinkedA3)
                            <small class="form-text text-muted">From this scheme’s planned visit date on the visit plan.</small>
                        @endif
                    </td>
                    <th scope="row" class="report-proc-label">Current Visit Date</th>
                    <td class="report-proc-cell">
                        <input
                            type="date"
                            name="report[part_a][monitoring_visit][current_visit_date]"
                            id="report_a_m_current_date"
                            class="form-control form-control-sm @error('report.part_a.monitoring_visit.current_visit_date') is-invalid @enderror"
                            value="{{ report_wizard_old('part_a.monitoring_visit.current_visit_date', '', $pA3) }}"
                        >
                        @error('report.part_a.monitoring_visit.current_visit_date')
                            <span class="invalid-feedback d-block">{{ $message }}</span>
                        @enderror
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="report-proc-label align-top">Reason for Delay (if any)</th>
                    <td class="report-proc-cell" colspan="3">
                        <x-form.text-input
                            name="report[part_a][monitoring_visit][delay_reason]"
                            :inline="true"
                            class="form-control-sm"
                            placeholder="If applicable…"
                            :value="report_wizard_old('part_a.monitoring_visit.delay_reason', '', $pA3)"
                            autocomplete="off"
                            id="report_a_m_delay_reason"
                        />
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="report-proc-label align-top">A.D/E.A Officer(s) during visit</th>
                    <td class="report-proc-cell align-top" colspan="3">
                        <div id="report-a3-ad-ea-stack" class="report-a1-location-stack" data-row-template="report-a3-tpl-ad-ea-row">
                            <button type="button" class="report-a1-stack-add btn btn-sm btn-outline-secondary mb-2" title="Add officer row" aria-label="Add officer row">
                                <i class="fas fa-plus" aria-hidden="true"></i>
                            </button>
                            <div class="report-a1-stack-rows">
                                @foreach ($adEaPairRows as $idx => $pair)
                                    <div class="report-a1-stack-row d-flex align-items-center mb-2">
                                        <button type="button" class="report-a1-stack-remove btn btn-sm btn-outline-danger mr-2 flex-shrink-0" title="Remove this row" aria-label="Remove this row">
                                            <i class="fas fa-minus" aria-hidden="true"></i>
                                        </button>
                                        <div class="flex-grow-1 d-flex flex-wrap align-items-center" style="min-width:0;gap:0.5rem">
                                            <div class="flex-grow-1" style="min-width:8rem">
                                                <label class="report-pa-subfield-label mb-0 d-md-none" for="report_a_m_ad_ea_name_{{ $idx }}">Name</label>
                                                <input
                                                    type="text"
                                                    name="report[part_a][monitoring_visit][ad_ea_officer_names][]"
                                                    id="{{ $idx === 0 ? 'report_a_m_ad_ea_name' : 'report_a_m_ad_ea_name_'.$idx }}"
                                                    value="{{ $pair['name'] }}"
                                                    autocomplete="name"
                                                    class="form-control form-control-sm"
                                                    placeholder="Name"
                                                >
                                            </div>
                                            <div class="flex-grow-1" style="min-width:8rem">
                                                <label class="report-pa-subfield-label mb-0 d-md-none" for="report_a_m_ad_ea_designation_{{ $idx }}">Designation</label>
                                                <input
                                                    type="text"
                                                    name="report[part_a][monitoring_visit][ad_ea_officer_designations][]"
                                                    id="{{ $idx === 0 ? 'report_a_m_ad_ea_designation' : 'report_a_m_ad_ea_designation_'.$idx }}"
                                                    value="{{ $pair['designation'] }}"
                                                    autocomplete="organization-title"
                                                    class="form-control form-control-sm"
                                                    placeholder="Designation"
                                                >
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="report-proc-label align-top">Reporting Officer</th>
                    <td class="report-proc-cell align-top" colspan="3">
                        <div class="d-flex flex-wrap align-items-center" style="gap:0.5rem">
                            <div class="flex-grow-1" style="min-width:8rem">
                                <label class="report-pa-subfield-label mb-0 d-md-none" for="report_a_m_reporting_officer_name">Name</label>
                                <input
                                    type="text"
                                    id="report_a_m_reporting_officer_name"
                                    class="form-control form-control-sm report-a1-identity-readonly"
                                    value="{{ $reportingOfficerNameDisplay }}"
                                    disabled
                                    aria-label="Reporting officer name"
                                >
                                @if ($reportingOfficerNameDisplay !== '')
                                    <input type="hidden" name="report[part_a][monitoring_visit][reporting_officer_name]" value="{{ $reportingOfficerNameDisplay }}">
                                @endif
                            </div>
                            <div class="flex-grow-1" style="min-width:8rem">
                                <label class="report-pa-subfield-label mb-0 d-md-none" for="report_a_m_reporting_officer_designation">Designation</label>
                                <input
                                    type="text"
                                    id="report_a_m_reporting_officer_designation"
                                    class="form-control form-control-sm report-a1-identity-readonly"
                                    value="{{ $reportingOfficerDesDisplay }}"
                                    disabled
                                    aria-label="Reporting officer designation"
                                >
                                @if ($reportingOfficerDesDisplay !== '')
                                    <input type="hidden" name="report[part_a][monitoring_visit][reporting_officer_designation]" value="{{ $reportingOfficerDesDisplay }}">
                                @endif
                            </div>
                        </div>
                        @if ($reportingOfficerLocked)
                        @endif
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="report-proc-label align-top">MEC Team During the Visit</th>
                    <td class="report-proc-cell align-top" colspan="3">
                        <div
                            id="report-a3-mec-team-stack"
                            class="report-a3-mec-team-stack"
                            data-mec-users='@json($mecUserOptions)'
                        >
                            <button type="button" class="report-a3-mec-team-add btn btn-sm btn-outline-secondary mb-2" title="Add MEC team row" aria-label="Add MEC team row">
                                <i class="fas fa-plus" aria-hidden="true"></i>
                            </button>
                            <div class="report-a3-mec-team-rows">
                                @foreach ($mecPairRows as $idx => $pair)
                                    @php $mecLocked = ! empty($pair['locked']); @endphp
                                    <div class="report-a3-mec-team-row d-flex align-items-center mb-2" @if ($mecLocked) data-a3-mec-locked="1" @endif>
                                        <button type="button" class="report-a3-mec-team-remove btn btn-sm btn-outline-danger mr-2 flex-shrink-0" title="Remove this row" aria-label="Remove this row">
                                            <i class="fas fa-minus" aria-hidden="true"></i>
                                        </button>
                                        <div class="flex-grow-1 d-flex flex-wrap align-items-center" style="min-width:0;gap:0.5rem">
                                            <div class="flex-grow-1" style="min-width:8rem">
                                                <label class="report-pa-subfield-label mb-0 d-md-none">Name</label>
                                                @if ($mecLocked)
                                                    <input
                                                        type="text"
                                                        class="form-control form-control-sm report-a1-identity-readonly"
                                                        value="{{ $pair['name'] }}"
                                                        disabled
                                                        aria-label="MEC team member name"
                                                    >
                                                    <input type="hidden" name="report[part_a][monitoring_visit][mec_team_names][]" value="{{ $pair['name'] }}">
                                                @else
                                                    <select
                                                        name="report[part_a][monitoring_visit][mec_team_names][]"
                                                        class="form-control form-control-sm report-a3-mec-user-select"
                                                        aria-label="MEC team member"
                                                        data-selected-name="{{ $pair['name'] }}"
                                                    >
                                                        <option value="">{{ __('Select MEC user…') }}</option>
                                                        @foreach ($mecUserOptions as $mecUser)
                                                            <option
                                                                value="{{ $mecUser['name'] }}"
                                                                data-designation="{{ $mecUser['designation'] }}"
                                                                @selected($pair['name'] === $mecUser['name'])
                                                            >{{ $mecUser['name'] }}</option>
                                                        @endforeach
                                                    </select>
                                                @endif
                                            </div>
                                            <div class="flex-grow-1" style="min-width:8rem">
                                                <label class="report-pa-subfield-label mb-0 d-md-none">Designation</label>
                                                @if ($mecLocked)
                                                    <input
                                                        type="text"
                                                        class="form-control form-control-sm report-a1-identity-readonly"
                                                        value="{{ $pair['designation'] }}"
                                                        disabled
                                                        aria-label="MEC team member designation"
                                                    >
                                                    <input type="hidden" name="report[part_a][monitoring_visit][mec_team_designations][]" value="{{ $pair['designation'] }}">
                                                @else
                                                    <input
                                                        type="text"
                                                        name="report[part_a][monitoring_visit][mec_team_designations][]"
                                                        class="form-control form-control-sm report-a3-mec-designation-input report-a1-identity-readonly"
                                                        value="{{ $pair['designation'] }}"
                                                        readonly
                                                        tabindex="-1"
                                                        aria-label="MEC team member designation"
                                                    >
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        @if ($planLinkedA3 && count($mecPrefill) > 0)
                        @endif
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="report-proc-label align-top">Community/Stakeholder feedback</th>
                    <td class="report-proc-cell" colspan="3">
                        <textarea
                            name="report[part_a][monitoring_visit][stakeholder_feedback]"
                            id="report_a_m_stakeholder_feedback"
                            rows="3"
                            class="form-control form-control-sm @error('report.part_a.monitoring_visit.stakeholder_feedback') is-invalid @enderror"
                            placeholder="Summarize feedback…"
                        >{{ report_wizard_old('part_a.monitoring_visit.stakeholder_feedback', '', $pA3) }}</textarea>
                        @error('report.part_a.monitoring_visit.stakeholder_feedback')
                            <span class="invalid-feedback d-block">{{ $message }}</span>
                        @enderror
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="report-proc-label align-top">Remarks</th>
                    <td class="report-proc-cell" colspan="3">
                        <textarea
                            name="report[part_a][monitoring_visit][remarks]"
                            id="report_a_m_remarks"
                            rows="4"
                            class="form-control form-control-sm @error('report.part_a.monitoring_visit.remarks') is-invalid @enderror"
                            placeholder="Additional remarks…"
                        >{{ report_wizard_old('part_a.monitoring_visit.remarks', '', $pA3) }}</textarea>
                        @error('report.part_a.monitoring_visit.remarks')
                            <span class="invalid-feedback d-block">{{ $message }}</span>
                        @enderror
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<template id="report-a3-tpl-ad-ea-row">
    <div class="report-a1-stack-row d-flex align-items-center mb-2">
        <button type="button" class="report-a1-stack-remove btn btn-sm btn-outline-danger mr-2 flex-shrink-0" title="Remove this row" aria-label="Remove this row">
            <i class="fas fa-minus" aria-hidden="true"></i>
        </button>
        <div class="flex-grow-1 d-flex flex-wrap align-items-center" style="min-width:0;gap:0.5rem">
            <div class="flex-grow-1" style="min-width:8rem">
                <input type="text" name="report[part_a][monitoring_visit][ad_ea_officer_names][]" class="form-control form-control-sm" autocomplete="name" placeholder="Name" value="">
            </div>
            <div class="flex-grow-1" style="min-width:8rem">
                <input type="text" name="report[part_a][monitoring_visit][ad_ea_officer_designations][]" class="form-control form-control-sm" autocomplete="organization-title" placeholder="Designation" value="">
            </div>
        </div>
    </div>
</template>

@push('scripts')
<script>
(function () {
    var stack = document.getElementById('report-a3-mec-team-stack');
    if (!stack) return;

    var users = [];
    try {
        users = JSON.parse(stack.getAttribute('data-mec-users') || '[]');
    } catch (e) {
        users = [];
    }

    function syncDesignationFromSelect(selectEl) {
        if (!selectEl) return;
        var row = selectEl.closest('.report-a3-mec-team-row');
        if (!row) return;
        var desInput = row.querySelector('.report-a3-mec-designation-input');
        if (!desInput) return;
        var opt = selectEl.options[selectEl.selectedIndex];
        desInput.value = opt && opt.dataset ? (opt.dataset.designation || '') : '';
    }

    function buildUserSelect(selectedName) {
        var sel = document.createElement('select');
        sel.name = 'report[part_a][monitoring_visit][mec_team_names][]';
        sel.className = 'form-control form-control-sm report-a3-mec-user-select';
        sel.setAttribute('aria-label', 'MEC team member');

        var empty = document.createElement('option');
        empty.value = '';
        empty.textContent = @json(__('Select MEC user…'));
        sel.appendChild(empty);

        users.forEach(function (u) {
            var opt = document.createElement('option');
            opt.value = u.name;
            opt.textContent = u.name;
            opt.dataset.designation = u.designation || '';
            if (selectedName && u.name === selectedName) {
                opt.selected = true;
            }
            sel.appendChild(opt);
        });

        sel.addEventListener('change', function () {
            syncDesignationFromSelect(sel);
        });

        return sel;
    }

    function buildManualRow(selectedName, selectedDes) {
        var row = document.createElement('div');
        row.className = 'report-a3-mec-team-row d-flex align-items-center mb-2';

        var rm = document.createElement('button');
        rm.type = 'button';
        rm.className = 'report-a3-mec-team-remove btn btn-sm btn-outline-danger mr-2 flex-shrink-0';
        rm.title = 'Remove this row';
        rm.setAttribute('aria-label', 'Remove this row');
        rm.innerHTML = '<i class="fas fa-minus" aria-hidden="true"></i>';

        var body = document.createElement('div');
        body.className = 'flex-grow-1 d-flex flex-wrap align-items-center';
        body.style.minWidth = '0';
        body.style.gap = '0.5rem';

        var nameWrap = document.createElement('div');
        nameWrap.className = 'flex-grow-1';
        nameWrap.style.minWidth = '8rem';
        var sel = buildUserSelect(selectedName || '');
        nameWrap.appendChild(sel);

        var desWrap = document.createElement('div');
        desWrap.className = 'flex-grow-1';
        desWrap.style.minWidth = '8rem';
        var des = document.createElement('input');
        des.type = 'text';
        des.name = 'report[part_a][monitoring_visit][mec_team_designations][]';
        des.className = 'form-control form-control-sm report-a3-mec-designation-input report-a1-identity-readonly';
        des.value = selectedDes || '';
        des.readOnly = true;
        des.tabIndex = -1;
        des.setAttribute('aria-label', 'MEC team member designation');
        desWrap.appendChild(des);

        body.appendChild(nameWrap);
        body.appendChild(desWrap);
        row.appendChild(rm);
        row.appendChild(body);
        syncDesignationFromSelect(sel);

        return row;
    }

    var rowsWrap = stack.querySelector('.report-a3-mec-team-rows');
    var addBtn = stack.querySelector('.report-a3-mec-team-add');

    stack.querySelectorAll('.report-a3-mec-user-select').forEach(function (sel) {
        sel.addEventListener('change', function () {
            syncDesignationFromSelect(sel);
        });
        syncDesignationFromSelect(sel);
    });

    if (addBtn && rowsWrap) {
        addBtn.addEventListener('click', function () {
            rowsWrap.appendChild(buildManualRow('', ''));
        });
    }

    if (rowsWrap) {
        rowsWrap.addEventListener('click', function (e) {
            var rm = e.target.closest('.report-a3-mec-team-remove');
            if (!rm || !rowsWrap.contains(rm)) return;
            var row = rm.closest('.report-a3-mec-team-row');
            if (row) {
                row.remove();
            }
        });
    }
})();
</script>
@endpush