@extends('layouts.app')

@section('title', 'Generate Report')

@push('styles')
<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') }}">
<style>
    #report-create-details-form .select2-container { width: 100% !important; }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <div class="card card-outline card-primary shadow-sm">
                    <div class="card-header rounded-top border-0 py-3" style="background: linear-gradient(135deg, #00401A 0%, #069494 45%, #1a4a6e 100%) !important;">
                        <h5 class="mb-0 text-white font-weight-bold">Select Type of Report</h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="border rounded p-3 mb-4 bg-light small">
                            <div class="font-weight-bold mb-1">Visit plan</div>
                            <div class="text-muted">Plan type: <span class="font-weight-bold text-body">{{ $plan->plan_type ?? '—' }}</span></div>
                            <div class="text-muted">Visit Date: <span class="font-weight-bold text-body">{{ $planScheme->visit_date->format('d M Y') ?? '—' }}</span></div>
                            @if ($project)
                                <div class="text-muted mt-1">ADP: <span class="font-weight-bold text-body">{{ ($adpLabel = \App\Support\MecReportAdpFiscalYear::displayForUnsavedPlan($plan ?? null, $project ?? null)) !== '' ? $adpLabel : '—' }}</span></div>
                                <div class="text-muted mt-1">UID: <span class="font-weight-bold text-body">{{ $project->code ?? '—' }}</span></div>
                                <div class="text-muted mt-1">Scheme Name: <span class="font-weight-bold text-body">{{ $project->name ?? '—' }}</span></div>
                            @endif
                        </div>

                        <form method="POST" action="{{ route('reports.create.details.store') }}" id="report-create-details-form">
                            @csrf
                            <input type="hidden" name="plan_scheme_id" value="{{ old('plan_scheme_id', $planScheme->id) }}">
                            <input type="hidden" name="report_entry" value="{{ old('report_entry', $reportEntry) }}">

                            <div class="form-group">
                                <label class="font-weight-bold" for="report_kind">Type of report</label>
                                <select name="report_kind" id="report_kind" class="form-control @error('report_kind') is-invalid @enderror" required>
                                    @foreach ($reportKindOptions as $opt)
                                        <option value="{{ $opt['value'] }}" @selected(old('report_kind', $defaultReportKind) === $opt['value'])>{{ $opt['label'] }}</option>
                                    @endforeach
                                </select>
                                @error('report_kind')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>

                            <div id="report-sector-sub-wrap">
                                <div class="form-group">
                                    <label class="font-weight-bold" for="report_mec_sector_id">Sector</label>
                                    <select
                                        name="mec_sector_id"
                                        id="report_mec_sector_id"
                                        class="form-control @error('mec_sector_id') is-invalid @enderror"
                                        data-sar-optional="1"
                                        required
                                    >
                                        <option value="" @selected(! old('mec_sector_id'))>Select sector…</option>
                                        @foreach ($sectors as $sector)
                                            <option value="{{ $sector->id }}" @selected((int) old('mec_sector_id', (int) ($defaultMecSectorId ?? 0)) === (int) $sector->id)>{{ $sector->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('mec_sector_id')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group mb-0">
                                    <label class="font-weight-bold" for="report_mec_sub_sector_id">Sub-sector</label>
                                    <select
                                        name="mec_sub_sector_id"
                                        id="report_mec_sub_sector_id"
                                        class="form-control @error('mec_sub_sector_id') is-invalid @enderror"
                                        data-sar-optional="1"
                                        required
                                    >
                                        <option value="" @selected(! old('mec_sub_sector_id'))>Select sub-sector…</option>
                                    </select>
                                    @error('mec_sub_sector_id')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                <p class="small text-muted mb-0" id="report-sar-sector-hint" style="display: none;">Sector and sub-sector are optional for Short Assessment Report (SAR).</p>
                            </div>

                            <div class="d-flex flex-wrap align-items-center justify-content-between mt-4 pt-2 border-top">
                                <a href="{{ route('reports.scheme-selection', ['report_type' => $reportEntry]) }}" class="btn btn-outline-secondary">Cancel</a>
                                <button type="submit" class="btn btn-primary">Continue to Report</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<script>
$(function () {
    var subBySector = @json($subSectorsBySectorForJs);
    var $kind = $('#report_kind');
    var $sector = $('#report_mec_sector_id');
    var $sub = $('#report_mec_sub_sector_id');
    var oldSector = @json((int) old('mec_sector_id', (int) ($defaultMecSectorId ?? 0)));
    var oldSub = @json((int) old('mec_sub_sector_id', (int) ($defaultMecSubSectorId ?? 0)));

    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: '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: 'Select sub-sector…' }));
    }

    $kind.select2($.extend({}, select2Base, {
        placeholder: 'Select type…',
        minimumResultsForSearch: Infinity,
    }));
    $sector.select2($.extend({}, select2Base, { placeholder: 'Select sector…' }));

    function applyReportKindSectorRules() {
        var isSar = $kind.val() === 'sar';
        $('#report-sar-sector-hint').toggle(isSar);
        $sector.add($sub).each(function () {
            this.required = !isSar;
        });
        if (isSar) {
            $sector.add($sub).prop('required', false);
        }
    }

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

    if (oldSector) {
        refillSubSectors(oldSector, oldSub || '');
    } else {
        refillSubSectors('', '');
    }
    applyReportKindSectorRules();
});
</script>
@endpush