@php
    use App\Support\MecReportType;
    $wizardSectorIsSar = MecReportType::isSar((string) ($reportType ?? ''));
    $wizardSectorCurrentId = (int) old('mec_sector_id', (int) ($mecSectorId ?? 0));
    $wizardSectorCurrentSubId = (int) old('mec_sub_sector_id', (int) ($mecSubSectorId ?? 0));
@endphp

@push('stylesheets')
<style>
    #wizard-sector-setup-form .select2-container { width: 100% !important; }
</style>
@endpush

<div class="card card-outline card-secondary shadow-sm mb-3" id="wizard-sector-setup-card">
    <div class="card-header py-2 d-flex flex-wrap align-items-center justify-content-between">
        <h6 class="mb-0 font-weight-bold">{{ __('Sector & sub-sector') }}</h6>
        <span class="small text-muted">{{ __('Changing these reloads report sections for the new selection.') }}</span>
    </div>
    <div class="card-body py-3">
        <form
            method="POST"
            action="{{ route('reports.wizard-sector-setup.update') }}"
            id="wizard-sector-setup-form"
            class="mb-0"
        >
            @csrf
            <input type="hidden" name="plan_scheme_id" value="{{ $planSchemeId ?? '' }}">
            <input type="hidden" name="report_type" value="{{ $reportType ?? '' }}">
            @if (! empty($reportDraftId))
                <input type="hidden" name="report_draft_id" value="{{ (int) $reportDraftId }}">
            @endif
            @if (! empty($mecReportWorkflowMode) && ($mecReportWorkflowMode ?? '') === 'meo_resubmit' && ! empty($mecReportWorkflowId))
                <input type="hidden" name="mec_workflow_report_id" value="{{ (int) $mecReportWorkflowId }}">
            @endif

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-md-0">
                        <label class="font-weight-bold mb-1" for="wizard_mec_sector_id">{{ __('Sector') }}</label>
                        <select
                            name="mec_sector_id"
                            id="wizard_mec_sector_id"
                            class="form-control @error('mec_sector_id') is-invalid @enderror"
                            @unless($wizardSectorIsSar) required @endunless
                        >
                            <option value="" @selected($wizardSectorCurrentId < 1)>{{ __('Select sector…') }}</option>
                            @foreach ($reportWizardSectors ?? [] as $sector)
                                <option value="{{ $sector->id }}" @selected($wizardSectorCurrentId === (int) $sector->id)>{{ $sector->name }}</option>
                            @endforeach
                        </select>
                        @error('mec_sector_id')
                            <span class="invalid-feedback d-block">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-md-0">
                        <label class="font-weight-bold mb-1" for="wizard_mec_sub_sector_id">{{ __('Sub-sector') }}</label>
                        <select
                            name="mec_sub_sector_id"
                            id="wizard_mec_sub_sector_id"
                            class="form-control @error('mec_sub_sector_id') is-invalid @enderror"
                            @unless($wizardSectorIsSar) required @endunless
                        >
                            <option value="" @selected($wizardSectorCurrentSubId < 1)>{{ __('Select sub-sector…') }}</option>
                        </select>
                        @error('mec_sub_sector_id')
                            <span class="invalid-feedback d-block">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>

            @if ($wizardSectorIsSar)
                <p class="small text-muted mb-2 mt-2 mb-md-0">{{ __('Sector and sub-sector are optional for Short Assessment Report (SAR).') }}</p>
            @endif

            <div class="d-flex flex-wrap align-items-center justify-content-end mt-3 pt-2 border-top">
                <button type="submit" class="btn btn-outline-primary btn-sm" id="wizard-sector-setup-submit">
                    {{ __('Apply sector change') }}
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
$(function () {
    var subBySector = @json($reportWizardSubSectorsBySectorForJs ?? []);
    var isSar = @json($wizardSectorIsSar);
    var $sector = $('#wizard_mec_sector_id');
    var $sub = $('#wizard_mec_sub_sector_id');
    var oldSector = @json($wizardSectorCurrentId);
    var oldSub = @json($wizardSectorCurrentSubId);
    var $mainForm = $('#report-wizard-form');
    var select2Base = { theme: 'bootstrap4', width: '100%' };

    function refillSubSectors(sectorId, selectSubId) {
        if ($sub.hasClass('select2-hidden-accessible')) {
            $sub.select2('destroy');
        }
        $sub.empty();
        var $ph = $('<option>', { value: '', text: @json(__('Select sub-sector…')) });
        $sub.append($ph);
        var picked = false;
        if (sectorId) {
            var list = subBySector[String(sectorId)] || [];
            list.forEach(function (row) {
                var sel = selectSubId && String(selectSubId) === String(row.id);
                if (sel) picked = true;
                $sub.append($('<option>', { value: row.id, text: row.name, selected: sel }));
            });
        }
        if (!picked) {
            $ph.prop('selected', true);
        }
        $sub.select2($.extend({}, select2Base, { placeholder: @json(__('Select sub-sector…')) }));
    }

    $sector.select2($.extend({}, select2Base, { placeholder: @json(__('Select sector…')) }));

    function applySarRules() {
        $sector.add($sub).prop('required', !isSar);
    }

    $sector.on('change', function () {
        refillSubSectors($(this).val(), '');
    });

    if (oldSector) {
        refillSubSectors(oldSector, oldSub || '');
    } else {
        refillSubSectors('', '');
    }
    applySarRules();

    $('#wizard-sector-setup-form').on('submit', function (e) {
        if (! window.confirm(@json(__('Apply this sector and sub-sector? Unsaved changes in the form will be lost and report sections will reload.')))) {
            e.preventDefault();
            return;
        }
        if ($mainForm.length) {
            $mainForm.find('input[name="mec_sector_id"]').val($sector.val() || '');
            $mainForm.find('input[name="mec_sub_sector_id"]').val($sub.val() || '');
        }
    });
});
</script>
@endpush