@extends('layouts.app')
@section('title', ($editRequest ?? null) ? 'Edit replacement request' : (($mecSimsModificationMode ?? false) ? __('Request visit cancellation') : 'New scheme plan change'))

@push('stylesheets')
<link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-11">
                <div class="card card-primary card-outline">
                    @if ($mecSimsModificationMode ?? false)
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <h3 class="card-title mb-0">{{ __('Request visit cancellation') }}</h3>
                        <a href="{{ $cancelUrl ?? route('mec-sims.modification.index') }}" class="btn btn-sm btn-default">{{ __('Back') }}</a>
                    </div>
                    @endif
                    <form method="post" action="{{ ($editRequest ?? null) ? route('scheme-plan-changes.update', $editRequest) : ($formAction ?? route('scheme-plan-changes.store')) }}" enctype="multipart/form-data" id="schemePlanChangeSubmitForm" novalidate>
                        @csrf
                        @if ($editRequest ?? null)
                            @method('PUT')
                        @endif
                        <div class="card-body">
                            @if ($mecSimsModificationMode ?? false)
                                <p class="text-muted small mb-3">
                                    {{ __('Select one or more schemes from your department’s approved visit plans. Schemes with a pending change request, monitoring report, or report draft are not listed.') }}
                                </p>
                                <input type="hidden" name="request_type" value="cancellation">
                            @endif
                            <!-- <p class="text-muted small mb-3">
                                Select your <strong>approved</strong> visit plan, choose <strong>cancellation</strong> or <strong>replacement</strong>, then tick one or more scheme rows assigned to you as Monitoring Officer.
                                For <strong>replacement</strong>, each ticked row appears below as its own replacement block with a single visit line; add or remove blocks by checking or clearing schemes in the list.
                                The same visit-plan rules apply as for plan editing (visit locations, visiting team conflicts, reserved locations, etc.).
                            </p> -->

                            @unless ($mecSimsModificationMode ?? false)
                            @if ($editRequest ?? null)
                                <div class="alert alert-info small">
                                    Revise this rejected replacement request and resubmit it for review. Rejection remarks are shown on the request detail page.
                                </div>
                                <input type="hidden" name="plan_id" id="spc_plan_id" value="{{ (int) $editRequest->plan_id }}">
                                <input type="hidden" name="request_type" value="replacement">
                            @else
                            <div class="form-group">
                                <label for="spc_plan_id">Visit plan <span class="text-danger">*</span></label>
                                <select name="plan_id" id="spc_plan_id" class="form-control @error('plan_id') is-invalid @enderror" required>
                                    <option value="">Select plan…</option>
                                    @foreach ($eligiblePlansForUi as $p)
                                        <option
                                            value="{{ $p['plan_id'] }}"
                                            data-plan-type="{{ e($p['plan_type']) }}"
                                            @selected((int) old('plan_id', $defaultPlanId ?? 0) === (int) $p['plan_id'])
                                        >{{ $p['label'] }}</option>
                                    @endforeach
                                </select>
                                @error('plan_id')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group mt-4">
                                <label>Request type <span class="text-danger">*</span></label>
                                <div class="d-flex flex-wrap gap-3">
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input" type="radio" name="request_type" id="rt_cancel" value="cancellation" {{ old('request_type', 'cancellation') === 'cancellation' ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="rt_cancel">Cancellation</label>
                                    </div>
                                    <div class="custom-control custom-radio mx-3">
                                        <input class="custom-control-input" type="radio" name="request_type" id="rt_replace" value="replacement" {{ old('request_type') === 'replacement' ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="rt_replace">Replacement</label>
                                    </div>
                                </div>
                                @error('request_type')
                                    <span class="text-danger small d-block">{{ $message }}</span>
                                @enderror
                            </div>
                            @endif
                            @endunless

                            <div id="spcSchemePickerWrap" class="{{ ($mecSimsModificationMode ?? false) ? '' : 'd-none' }}">
                                @if ($mecSimsModificationMode ?? false)
                                    <div class="table-responsive border rounded">
                                        <table class="table table-sm table-hover mb-0" id="spcSchemeTable">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th style="width:40px" class="text-center">
                                                        <input type="checkbox" id="spcModCancelSelectAll" title="{{ __('Select all') }}" aria-label="{{ __('Select all') }}">
                                                    </th>
                                                    <th>{{ __('ADP') }}</th>
                                                    <th>{{ __('UID') }}</th>
                                                    <th>{{ __('Scheme name') }}</th>
                                                    <th>{{ __('Visit date') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($flatSchemeRows ?? [] as $row)
                                                    <tr>
                                                        <td class="text-center align-middle">
                                                            <input
                                                                type="checkbox"
                                                                class="spc-scheme-cb"
                                                                name="source_plan_scheme_ids[]"
                                                                value="{{ $row['plan_scheme_id'] }}"
                                                                data-plan-scheme-id="{{ $row['plan_scheme_id'] }}"
                                                                @checked(in_array((int) $row['plan_scheme_id'], array_map('intval', (array) old('source_plan_scheme_ids', [])), true))
                                                            >
                                                        </td>
                                                        <td class="text-nowrap small">{{ $row['adp'] }}</td>
                                                        <td class="text-nowrap small font-weight-bold">{{ $row['uid'] }}</td>
                                                        <td class="small text-break" style="min-width: 14rem">{{ $row['scheme_name'] }}</td>
                                                        <td class="text-nowrap small">{{ $row['visit_date'] }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    @error('source_plan_scheme_ids')
                                        <span class="text-danger small d-block mt-2">{{ $message }}</span>
                                    @enderror
                                    @error('source_plan_scheme_ids.*')
                                        <span class="text-danger small d-block mt-2">{{ $message }}</span>
                                    @enderror
                                @else
                                <h6 class="text-uppercase text-muted font-weight-bold small mb-2">Schemes on this plan (your assignments)</h6>
                                <div class="table-responsive border rounded">
                                    <table class="table table-sm table-hover mb-0" id="spcSchemeTable">
                                        <thead class="thead-light">
                                            <tr>
                                                <th style="width:40px" class="text-center"></th>
                                                <th>ADP</th>
                                                <th>UID</th>
                                                <th>Scheme name</th>
                                                <th>Visit date</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                                @endif
                            </div>

                            <div id="spcReplacementPanels" class="d-none mt-4"></div>
                            <div id="replacementDynamicFields"></div>

                            <div class="form-group mt-4">
                                <label for="reason">Reason <span class="text-danger">*</span></label>
                                <textarea name="reason" id="reason" rows="4" class="form-control @error('reason') is-invalid @enderror" required>{{ old('reason', ($resubmitInitialPayload['reason'] ?? '')) }}</textarea>
                                @error('reason')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="attachment">Attachment</label>
                                <input type="file" name="attachment" id="attachment" class="form-control-file @error('attachment') is-invalid @enderror" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                                <small class="form-text text-muted">Optional. Max 10 MB (PDF, Word, or image).</small>
                                @error('attachment')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="card-footer d-flex flex-wrap justify-content-end align-items-center gap-2">
                            <a href="{{ ($editRequest ?? null) ? route('scheme-plan-changes.show', $editRequest) : ($cancelUrl ?? route('scheme-plan-changes.index')) }}" class="btn btn-default">Cancel</a>
                            <button type="submit" class="btn btn-primary" id="spcSubmitBtn">{{ ($editRequest ?? null) ? 'Resubmit request' : 'Submit request' }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<template id="tplSpcRepBlock">
        <div class="card border-primary mb-3 spc-rep-block" data-source-plan-scheme-id="">
            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                <strong class="small text-uppercase text-muted mb-0">Replacement for: <span class="spc-rep-source-label text-body"></span></strong>
            </div>
            <div class="card-body">
                <p class="small text-muted mb-2">Pick replacement scheme (ADP / UID / name stay in sync).</p>
                <div class="spc-rep-triple-wrap mb-3"></div>
                <h6 class="text-uppercase text-muted small font-weight-bold">Visit</h6>
                <div class="spc-rep-rows"></div>
            </div>
        </div>
    </template>

<template id="tplSpcRepRow">
        <div class="border rounded p-3 mb-2 spc-rep-row">
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="small font-weight-bold">Visit location <span class="text-danger">*</span></label>
                    <select class="form-control form-control-sm spc-inp visit_location" required></select>
                </div>
                <div class="form-group col-md-6">
                    <label class="small font-weight-bold">Visit date <span class="text-danger">*</span></label>
                    <input type="date" class="form-control form-control-sm spc-inp visit_date" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="small font-weight-bold">Physical %</label>
                    <input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm spc-inp physical_progress" value="0">
                </div>
                <div class="form-group col-md-6">
                    <label class="small font-weight-bold">Financial %</label>
                    <input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm spc-inp financial_progress" value="0">
                </div>
            </div>
            <div class="form-group mb-0">
                <label class="small font-weight-bold">Visiting team</label>
                <select class="form-control form-control-sm spc-team visiting-team-select" multiple placeholder="e.g. Asad, Arif…"></select>
            </div>
            <div class="form-group mb-0">
                <label class="small font-weight-bold">Remarks</label>
                <textarea class="form-control form-control-sm spc-inp remarks" rows="2" maxlength="2000"></textarea>
            </div>
            @if ($canAssignMonitoringOfficers)
            <div class="form-group mb-0">
                <label class="small font-weight-bold">Monitoring officer</label>
                <select class="form-control form-control-sm spc-mo">
                    <option value="">— Keep assigned officer —</option>
                    @foreach ($teamUserOptions as $u)
                        <option value="{{ $u['id'] }}">{{ $u['text'] }}</option>
                    @endforeach
                </select>
            </div>
            @endif
        </div>
    </template>
@endsection

@push('scripts')
@if (! ($mecSimsModificationMode ?? false))
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
@endif
<script>
(function () {
    var mecSimsModificationMode = @json((bool) ($mecSimsModificationMode ?? false));

    if (mecSimsModificationMode) {
        var selectAll = document.getElementById('spcModCancelSelectAll');
        var boxes = document.querySelectorAll('#spcSchemeTable .spc-scheme-cb');
        if (selectAll && boxes.length) {
            selectAll.addEventListener('change', function () {
                boxes.forEach(function (cb) { cb.checked = selectAll.checked; });
            });
            boxes.forEach(function (cb) {
                cb.addEventListener('change', function () {
                    var all = true;
                    var any = false;
                    boxes.forEach(function (b) {
                        if (!b.checked) all = false;
                        if (b.checked) any = true;
                    });
                    selectAll.checked = all && any;
                    selectAll.indeterminate = any && !all;
                });
            });
        }
        $('#schemePlanChangeSubmitForm').on('submit', function (e) {
            var any = false;
            boxes.forEach(function (cb) { if (cb.checked) any = true; });
            if (!any) {
                e.preventDefault();
                if (typeof Swal !== 'undefined') Swal.fire('{{ __('Required') }}', '{{ __('Select at least one scheme row.') }}', 'warning');
            }
        });
        return;
    }

    var eligiblePlans = @json($eligiblePlansForUi);
    var teamOptions = @json($teamUserOptions);
    var replacementUrl = @json(route('scheme-plan-changes.replacement-scheme-options'));
    var bootstrapUrl = @json(route('scheme-plan-changes.replacement-scheme-bootstrap'));
    var canAssignMo = @json($canAssignMonitoringOfficers);
    var defaultPlanId = @json((int) ($defaultPlanId ?? 0));
    var defaultPlanSchemeId = @json((int) ($defaultPlanSchemeId ?? 0));
    var initialPlanId = @json((int) old('plan_id', $defaultPlanId ?? 0));
    var initialSourcePlanSchemeIds = @json(array_values(array_unique(array_filter(array_map('intval', (array) old('source_plan_scheme_ids', []))))));
    var initialReplacementLines = @json(old('replacement_lines') ?? []);
    var resubmitInitialPayload = @json($resubmitInitialPayload ?? null);
    var isEditResubmit = @json((bool) ($editRequest ?? null));
    if (isEditResubmit && resubmitInitialPayload && !@json((bool) old('replacement_lines'))) {
        initialReplacementLines = resubmitInitialPayload.replacement_lines || [];
        if (!initialSourcePlanSchemeIds.length && Array.isArray(initialReplacementLines)) {
            initialSourcePlanSchemeIds = initialReplacementLines.map(function (block) {
                return parseInt(block.source_plan_scheme_id, 10);
            }).filter(function (id) { return id > 0; });
        }
    }
    function normalizeBlocksList(raw) {
        if (!raw) return [];
        if (Array.isArray(raw)) return raw;
        return Object.keys(raw).sort(function (a, b) { return parseInt(a, 10) - parseInt(b, 10); }).map(function (k) { return raw[k]; });
    }
    var restoringOld = false;
    var csrf = document.querySelector('meta[name="csrf-token"]');
    var csrfToken = csrf ? csrf.getAttribute('content') : '';
    var select2Base = { theme: 'bootstrap4', width: '100%', allowClear: true };

    function planById(id) {
        id = parseInt(id, 10);
        for (var i = 0; i < eligiblePlans.length; i++) {
            if (parseInt(eligiblePlans[i].plan_id, 10) === id) return eligiblePlans[i];
        }
        return null;
    }

    function fillSchemeTable(planId) {
        var $tb = $('#spcSchemeTable tbody');
        $tb.empty();
        var p = planById(planId);
        if (!p) return;
        p.schemes.forEach(function (s) {
            var $tr = $('<tr/>');
            var id = 'spc_cb_' + s.plan_scheme_id;
            var panelLabel = s.panel_label || s.scheme_name || '';
            $tr.attr('data-scheme-label', panelLabel);
            var aria = 'Select row ' + (s.uid && s.uid !== '—' ? s.uid + ', ' : '') + (s.scheme_name || '').slice(0, 80);
            $tr.append($('<td class="text-center align-middle"/>').append(
                $('<input/>', {
                    type: 'checkbox',
                    class: 'spc-scheme-cb',
                    id: id,
                    'data-plan-scheme-id': s.plan_scheme_id,
                    'aria-label': aria
                })
            ));
            $tr.append($('<td/>').addClass('text-nowrap small').text(s.adp != null ? s.adp : '—'));
            $tr.append($('<td/>').addClass('text-nowrap small font-weight-bold').text(s.uid != null ? s.uid : '—'));
            $tr.append($('<td/>').addClass('small text-break').css('min-width', '14rem').text(s.scheme_name != null ? s.scheme_name : '—'));
            $tr.append($('<td/>').addClass('text-nowrap small').text(s.visit_date != null ? s.visit_date : '—'));
            $tb.append($tr);
        });
    }

    function selectedPlanSchemeIds() {
        var ids = [];
        $('.spc-scheme-cb:checked').each(function () {
            ids.push(parseInt($(this).data('plan-scheme-id'), 10));
        });
        return ids;
    }

    function syncReplacementPanels() {
        var isRep = $('#rt_replace').prop('checked');
        var planId = parseInt($('#spc_plan_id').val(), 10);
        if (!isRep || !planId) {
            $('#spcReplacementPanels').addClass('d-none').empty();
            return Promise.resolve();
        }
        var $wrap = $('#spcReplacementPanels');
        $wrap.removeClass('d-none');
        var selected = {};
        $('.spc-scheme-cb:checked').each(function () {
            selected[parseInt($(this).data('plan-scheme-id'), 10)] = true;
        });
        $wrap.find('.spc-rep-block').each(function () {
            var sid = parseInt($(this).attr('data-source-plan-scheme-id'), 10);
            if (!selected[sid]) $(this).remove();
        });
        var pending = [];
        $('.spc-scheme-cb:checked').each(function () {
            var sid = parseInt($(this).data('plan-scheme-id'), 10);
            if ($wrap.find('.spc-rep-block[data-source-plan-scheme-id="' + sid + '"]').length) return;
            var label = $(this).closest('tr').attr('data-scheme-label') || '';
            var tpl = document.getElementById('tplSpcRepBlock');
            var node = tpl.content.firstElementChild.cloneNode(true);
            node.setAttribute('data-source-plan-scheme-id', String(sid));
            var $node = $(node);
            $node.find('.spc-rep-source-label').text(label);
            $wrap.append($node);
            pending.push(initTripleForBlock($node, planId));
            addRepRow($node, planId, null);
        });
        return pending.length ? Promise.all(pending) : Promise.resolve();
    }

    function initTripleForBlock($block, planId) {
        var $w = $block.find('.spc-rep-triple-wrap');
        $w.empty();
        var idBase = 'spc_rep_' + $block.attr('data-source-plan-scheme-id');
        var $s0 = $('<select class="form-control form-control-sm scheme-project-sync spc-rep-sel"/>').attr('name', idBase + '_adp');
        var $s1 = $('<select class="form-control form-control-sm scheme-project-sync"/>').attr('name', idBase + '_uid');
        var $s2 = $('<select class="form-control form-control-sm scheme-project-sync"/>').attr('name', idBase + '_name');
        $w.append($('<div class="form-row"/>').append(
            $('<div class="form-group col-md-4"/>').append($('<label class="small"/>').text('ADP #'), $s0),
            $('<div class="form-group col-md-4"/>').append($('<label class="small"/>').text('UID'), $s1),
            $('<div class="form-group col-md-4"/>').append($('<label class="small"/>').text('Scheme name'), $s2)
        ));
        var syncing = false;
        $w.find('select.scheme-project-sync').on('change select2:select', function () {
            if (syncing) return;
            var v = $(this).val();
            syncing = true;
            try {
                $w.find('select.scheme-project-sync').each(function () { $(this).val(v).trigger('change.select2'); });
            } finally {
                syncing = false;
            }
            var pid = parseInt(v, 10);
            if (pid > 0 && !restoringOld) {
                bootstrapRowsForBlock($block, planId, pid);
            }
        });
        return loadReplacementTriple($s0.add($s1).add($s2), planId);
    }

    var escapeHtml = window.pmsEscapeHtml;

    /** Group visiting team by region using <optgroup>; matches plan/crud makeVisitingTeamMultiOptions. */
    function makeVisitingTeamMultiOptions(options, selectedItems) {
        selectedItems = selectedItems || [];
        var selSet = {};
        selectedItems.forEach(function (id) { selSet[String(id)] = true; });
        var byRegion = {};
        (options || []).forEach(function (opt) {
            var r = (opt.region != null && String(opt.region).trim() !== '') ? String(opt.region).trim() : 'Other';
            if (!byRegion[r]) {
                byRegion[r] = [];
            }
            byRegion[r].push(opt);
        });
        var regions = Object.keys(byRegion).sort(function (a, b) {
            var ao = a === 'Other' ? 1 : 0;
            var bo = b === 'Other' ? 1 : 0;
            if (ao !== bo) {
                return ao - bo;
            }
            return String(a).localeCompare(String(b));
        });
        var html = '';
        regions.forEach(function (region) {
            var list = byRegion[region];
            if (!list || !list.length) {
                return;
            }
            var label = '--' + region + '--';
            var labelEsc = escapeHtml(label).replace(/"/g, '&quot;');
            html += '<optgroup label="' + labelEsc + '">';
            list.forEach(function (opt) {
                var isSelected = selSet[String(opt.id)] ? 'selected' : '';
                var idEsc = escapeHtml(String(opt.id));
                html += '<option value="' + idEsc + '" ' + isSelected + '>' + escapeHtml(String(opt.text || '')) + '</option>';
            });
            html += '</optgroup>';
        });
        return html;
    }

    /** Match only user option text; region (optgroup) labels are not used for search/filter. */
    function visitingTeamSelect2Matcher(params, data) {
        if ($.trim(params.term || '') === '') {
            return data;
        }
        var term = $.trim(params.term).toUpperCase();
        if (data.children && data.children.length) {
            var filtered = [];
            for (var i = 0; i < data.children.length; i++) {
                var m = visitingTeamSelect2Matcher(params, data.children[i]);
                if (m) {
                    filtered.push(m);
                }
            }
            if (filtered.length) {
                var modified = $.extend(true, {}, data);
                modified.children = filtered;
                return modified;
            }
            return null;
        }
        if (data.text == null) {
            return null;
        }
        return String(data.text).toUpperCase().indexOf(term) !== -1 ? data : null;
    }

    function visitingTeamSelect2Options() {
        return {
            theme: 'bootstrap4',
            width: '100%',
            closeOnSelect: false,
            matcher: visitingTeamSelect2Matcher
        };
    }

    function loadReplacementTriple($sels, planId) {
        var headers = { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' };
        if (csrfToken) headers['X-CSRF-TOKEN'] = csrfToken;
        return fetch(replacementUrl + '?plan_id=' + encodeURIComponent(String(planId)), { credentials: 'same-origin', headers: headers })
            .then(function (r) { if (!r.ok) throw new Error(); return r.json(); })
            .then(function (data) {
                function refill($sel, opts) {
                    if ($sel.hasClass('select2-hidden-accessible')) $sel.select2('destroy');
                    $sel.empty();
                    Object.keys(opts).forEach(function (k) { $sel.append($('<option>', { value: k, text: opts[k] })); });
                    $sel.select2(select2Base);
                }
                if ($sels.length < 3) return;
                refill($($sels[0]), data.adpOptions || {});
                refill($($sels[1]), data.schemeCodeOptions || {});
                refill($($sels[2]), data.projectOptions || {});
            });
    }

    function fillTeamSelect($sel, selectedIds) {
        selectedIds = selectedIds || [];
        var $el = $sel;
        if ($el.hasClass('select2-hidden-accessible')) {
            $el.select2('destroy');
        }
        $el[0].innerHTML = makeVisitingTeamMultiOptions(teamOptions, selectedIds);
        $el.select2(visitingTeamSelect2Options());
        $el.val(selectedIds.map(String));
    }

    /** Same rule as plan/crud visitLocationPickerRows(): Umbrella multi-site → scheme_locations; else master when Umbrella; Independent → scheme_locations. */
    function visitLocationPickerRowsFromBootstrap(bootstrapPayload) {
        if (!bootstrapPayload || typeof bootstrapPayload !== 'object') {
            return [];
        }
        var opt = bootstrapPayload.scheme_visit_location_options;
        if (Array.isArray(opt) && opt.length) {
            return opt;
        }
        var locs = bootstrapPayload.scheme_locations;
        return Array.isArray(locs) && locs.length ? locs : [];
    }

    function schemeLocationDisplayName(loc) {
        var name = (loc && loc.name != null) ? String(loc.name) : '';
        var trimmed = name.trim();
        if (trimmed === '' && loc && loc.location_id != null && String(loc.location_id) !== '') {
            name = 'Location #' + String(loc.location_id);
            trimmed = name.trim();
        }
        return { name: name, trimmed: trimmed };
    }

    function fillVisitLocationSelect($loc, bootstrapPayload) {
        $loc.empty();
        $loc.append($('<option>', { value: '', text: 'Select location' }));
        var rows = visitLocationPickerRowsFromBootstrap(bootstrapPayload);
        rows.forEach(function (x) {
            var disp = schemeLocationDisplayName(x);
            if (disp.trimmed === '') {
                return;
            }
            $loc.append($('<option>', { value: disp.name, text: disp.name }));
        });
    }

    function addRepRow($block, planId, bootstrapPayload) {
        var tpl = document.getElementById('tplSpcRepRow');
        var node = tpl.content.firstElementChild.cloneNode(true);
        var $row = $(node);
        $block.find('.spc-rep-rows').append($row);
        fillTeamSelect($row.find('.spc-team'));
        fillVisitLocationSelect($row.find('select.visit_location'), bootstrapPayload);
        var moId = bootstrapPayload && bootstrapPayload.monitoring_officer_id
            ? parseInt(bootstrapPayload.monitoring_officer_id, 10)
            : 0;
        if (!isNaN(moId) && moId > 0) {
            $row.attr('data-monitoring-officer-id', String(moId));
        }
    }

    function bootstrapRowsForBlock($block, planId, projectId) {
        var headers = { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' };
        if (csrfToken) headers['X-CSRF-TOKEN'] = csrfToken;
        return fetch(bootstrapUrl + '?plan_id=' + planId + '&project_id=' + projectId, { credentials: 'same-origin', headers: headers })
            .then(function (r) { return r.json().then(function (j) { if (!r.ok) throw new Error(j.message || 'Bootstrap failed'); return j; }); })
            .then(function (data) {
                $block.find('.spc-rep-rows').empty();
                addRepRow($block, planId, data);
                return data;
            })
            .catch(function (e) {
                if (typeof Swal !== 'undefined') Swal.fire('Error', String(e.message || e), 'error');
                throw e;
            });
    }

    function refreshSchemeUiForPlan(planId) {
        if (!planId) {
            $('#spcSchemePickerWrap').addClass('d-none');
            $('#spcReplacementPanels').addClass('d-none').empty();
            return Promise.resolve();
        }
        $('#spcSchemePickerWrap').removeClass('d-none');
        fillSchemeTable(planId);
        return syncReplacementPanels();
    }

    function normalizeRows(bl) {
        var r = bl && bl.rows != null ? bl.rows : [];
        return Array.isArray(r) ? r : Object.keys(r).sort(function (a, b) { return parseInt(a, 10) - parseInt(b, 10); }).map(function (k) { return r[k]; });
    }

    function restoreReplacementRowsFromOld(planId, blocksIn) {
        var blocks = Array.isArray(blocksIn) ? blocksIn : [];
        var chain = Promise.resolve();
        $('.spc-rep-block').each(function () {
            var $b = $(this);
            var sid = parseInt($b.attr('data-source-plan-scheme-id'), 10);
            var bl = null;
            for (var j = 0; j < blocks.length; j++) {
                if (parseInt(blocks[j].source_plan_scheme_id, 10) === sid) {
                    bl = blocks[j];
                    break;
                }
            }
            if (!bl) return;
            var rows = normalizeRows(bl);
            if (!rows.length) return;
            var row0 = rows[0];
            var pid = parseInt(row0.scheme_id, 10);
            if (!pid) return;
            chain = chain.then(function () {
                var $sels = $b.find('.spc-rep-triple-wrap select.scheme-project-sync');
                restoringOld = true;
                try {
                    $sels.val(String(pid)).trigger('change.select2');
                } finally {
                    restoringOld = false;
                }
                return bootstrapRowsForBlock($b, planId, pid).then(function () {
                    var $r = $b.find('.spc-rep-row').first();
                    if (!$r.length) return;
                    if (row0.visit_location) $r.find('select.visit_location').val(String(row0.visit_location).trim());
                    if (row0.visit_date) $r.find('input.visit_date').val(String(row0.visit_date).slice(0, 10));
                    if (row0.physical_progress != null && row0.physical_progress !== '') $r.find('input.physical_progress').val(row0.physical_progress);
                    if (row0.financial_progress != null && row0.financial_progress !== '') $r.find('input.financial_progress').val(row0.financial_progress);
                    if (row0.remarks) $r.find('textarea.remarks').val(row0.remarks);
                    var team = row0.visiting_team;
                    var teamIds = [];
                    if (Array.isArray(team)) {
                        teamIds = team.map(function (x) { return parseInt(x, 10); }).filter(function (n) { return !isNaN(n) && n > 0; });
                    } else if (team && typeof team === 'object') {
                        teamIds = Object.keys(team).sort(function (a, b) { return parseInt(a, 10) - parseInt(b, 10); }).map(function (k) { return parseInt(team[k], 10); }).filter(function (n) { return !isNaN(n) && n > 0; });
                    }
                    if (teamIds.length) fillTeamSelect($r.find('.spc-team'), teamIds);
                    if (row0.monitoring_officer_id) {
                        $r.attr('data-monitoring-officer-id', String(row0.monitoring_officer_id));
                    }
                    if (canAssignMo && row0.monitoring_officer_id) {
                        $r.find('select.spc-mo').val(String(row0.monitoring_officer_id));
                    }
                });
            });
        });
        return chain;
    }

    function applyServerFormStateAfterPlan(planId) {
        var rt = $('input[name="request_type"]:checked').val();
        var hadOldSources = initialSourcePlanSchemeIds && initialSourcePlanSchemeIds.length;
        var replBlocks = normalizeBlocksList(initialReplacementLines);
        var hadOldRepl = replBlocks.length > 0;
        if (rt === 'cancellation' && hadOldSources) {
            initialSourcePlanSchemeIds.forEach(function (id) {
                $('.spc-scheme-cb[data-plan-scheme-id="' + id + '"]').prop('checked', true);
            });
            return Promise.resolve();
        }
        if (rt === 'replacement' && hadOldRepl) {
            replBlocks.forEach(function (bl) {
                var sid = parseInt(bl.source_plan_scheme_id, 10);
                if (sid) $('.spc-scheme-cb[data-plan-scheme-id="' + sid + '"]').prop('checked', true);
            });
            return syncReplacementPanels().then(function () {
                return restoreReplacementRowsFromOld(planId, replBlocks);
            });
        }
        if (defaultPlanSchemeId) {
            $('.spc-scheme-cb[data-plan-scheme-id="' + defaultPlanSchemeId + '"]').prop('checked', true).trigger('change');
        }
        return Promise.resolve();
    }

    $('#spc_plan_id').on('change', function () {
        var id = parseInt($(this).val(), 10);
        refreshSchemeUiForPlan(id);
    });

    $(document).on('change', '.spc-scheme-cb', function () { syncReplacementPanels(); });
    $('input[name="request_type"]').on('change', function () {
        syncReplacementPanels();
        if (!$('#rt_replace').prop('checked')) $('#spcReplacementPanels').addClass('d-none').empty();
    });

    $('#schemePlanChangeSubmitForm').on('submit', function (e) {
        var planId = parseInt($('#spc_plan_id').val(), 10);
        if (!planId) {
            e.preventDefault();
            if (typeof Swal !== 'undefined') Swal.fire('Required', 'Select a visit plan.', 'warning');
            return;
        }
        var ids = selectedPlanSchemeIds();
        if (!ids.length) {
            e.preventDefault();
            if (typeof Swal !== 'undefined') Swal.fire('Required', 'Select at least one scheme row.', 'warning');
            return;
        }
        $('#replacementDynamicFields').empty();
        if ($('#rt_cancel').prop('checked')) {
            ids.forEach(function (id) {
                $('#replacementDynamicFields').append($('<input/>', { type: 'hidden', name: 'source_plan_scheme_ids[]', value: id }));
            });
            return;
        }
        var lineIx = 0;
        var err = null;
        $('.spc-rep-block').each(function () {
            var $b = $(this);
            var sid = parseInt($b.attr('data-source-plan-scheme-id'), 10);
            var $triple = $b.find('.spc-rep-triple-wrap select.scheme-project-sync').eq(2);
            var repPid = parseInt($triple.val(), 10);
            if (!repPid) err = 'Select a replacement scheme for each selected source.';
            var rowIx = 0;
            $b.find('.spc-rep-row').each(function () {
                var $r = $(this);
                var schemeId = repPid;
                var loc = ($r.find('select.visit_location').val() || '').trim();
                var dt = ($r.find('input.visit_date').val() || '').trim();
                if (!loc || !dt) err = 'Visit location and date are required on every replacement row.';
                $('#replacementDynamicFields').append(
                    $('<input/>', { type: 'hidden', name: 'replacement_lines[' + lineIx + '][source_plan_scheme_id]', value: sid }),
                    $('<input/>', { type: 'hidden', name: 'replacement_lines[' + lineIx + '][rows][' + rowIx + '][scheme_id]', value: schemeId }),
                    $('<input/>', { type: 'hidden', name: 'replacement_lines[' + lineIx + '][rows][' + rowIx + '][visit_location]', value: loc }),
                    $('<input/>', { type: 'hidden', name: 'replacement_lines[' + lineIx + '][rows][' + rowIx + '][visit_date]', value: dt }),
                    $('<input/>', { type: 'hidden', name: 'replacement_lines[' + lineIx + '][rows][' + rowIx + '][physical_progress]', value: $r.find('input.physical_progress').val() || '0' }),
                    $('<input/>', { type: 'hidden', name: 'replacement_lines[' + lineIx + '][rows][' + rowIx + '][financial_progress]', value: $r.find('input.financial_progress').val() || '0' }),
                    $('<input/>', { type: 'hidden', name: 'replacement_lines[' + lineIx + '][rows][' + rowIx + '][remarks]', value: $r.find('textarea.remarks').val() || '' })
                );
                var team = $r.find('.spc-team').val() || [];
                team.forEach(function (uid) {
                    $('#replacementDynamicFields').append(
                        $('<input/>', { type: 'hidden', name: 'replacement_lines[' + lineIx + '][rows][' + rowIx + '][visiting_team][]', value: uid })
                    );
                });
                var mo = '';
                if (canAssignMo) {
                    mo = $r.find('select.spc-mo').val() || '';
                }
                if (!mo) {
                    mo = $r.attr('data-monitoring-officer-id') || '';
                }
                if (mo) {
                    $('#replacementDynamicFields').append(
                        $('<input/>', { type: 'hidden', name: 'replacement_lines[' + lineIx + '][rows][' + rowIx + '][monitoring_officer_id]', value: mo })
                    );
                }
                rowIx++;
            });
            lineIx++;
        });
        if (err) {
            e.preventDefault();
            if (typeof Swal !== 'undefined') Swal.fire('Check form', err, 'warning');
        }
    });

    if (isEditResubmit) {
        $('#rt_replace').prop('checked', true);
    }

    if (initialPlanId) {
        $('#spc_plan_id').val(String(initialPlanId));
        refreshSchemeUiForPlan(initialPlanId).then(function () {
            return applyServerFormStateAfterPlan(initialPlanId);
        });
    }
})();
</script>
@endpush