@extends('layouts.app')

@section('title', 'Create RFI')

@section('content')
    <h1>New {{ ucfirst($type) }} RFI</h1>
    <p class="subtitle">Step 2 of 4 — Select Job, Responsible Officer, and Sub Work Order.</p>

    <div class="card">
        <form method="POST" action="{{ route('rfi.store') }}" id="rfi-form">
            @csrf
            <input type="hidden" name="type" value="{{ $type }}">
            <input type="hidden" name="job_description" id="job_description">

            <div class="field">
                <label for="job_no">Job</label>
                <select name="job_no" id="job_no" required data-searchable data-placeholder="Search jobs…">
                    <option value="">Select a Job…</option>
                    @foreach ($jobs as $job)
                        <option value="{{ $job['no'] }}" data-description="{{ $job['description'] }}">
                            {{ $job['no'] }} — {{ $job['description'] }}
                        </option>
                    @endforeach
                </select>
                @if ($jobs->isEmpty())
                    <small class="hint" style="color:var(--danger)">
                        No Jobs returned from the Business Central Job API. Check JOB_API_URL / credentials / field mapping in BusinessCentralService.
                    </small>
                @endif
            </div>

            <div class="field">
                <label for="responsible_officer">Responsible Officer</label>
                <select name="responsible_officer" id="responsible_officer" required disabled data-searchable data-placeholder="Search officers…">
                    <option value="">Select a Job first…</option>
                </select>
            </div>

            <div class="field">
                <label for="swo_no">Sub Work Order (SWO)</label>
                <select name="swo_no" id="swo_no" required disabled data-searchable data-placeholder="Search SWOs…">
                    <option value="">Select Job and Responsible Officer first…</option>
                </select>
                <small class="hint" id="swo-hint"></small>
            </div>

            <button class="btn w-full" type="submit">Create RFI</button>
        </form>
    </div>

    <script>
        const jobSelect = document.getElementById('job_no');
        const jobDescription = document.getElementById('job_description');
        const officerSelect = document.getElementById('responsible_officer');
        const swoSelect = document.getElementById('swo_no');
        const swoHint = document.getElementById('swo-hint');
        const rfiType = @json($type);

        jobSelect.addEventListener('change', () => {
            const opt = jobSelect.options[jobSelect.selectedIndex];
            jobDescription.value = opt ? (opt.dataset.description || '') : '';
            refreshOfficerOptions();
        });

        async function refreshOfficerOptions() {
            const jobNo = jobSelect.value;

            officerSelect.innerHTML = '<option value="">Loading…</option>';
            officerSelect.disabled = true;
            resetSwoOptions('Select Job and Responsible Officer first…');

            if (!jobNo) {
                officerSelect.innerHTML = '<option value="">Select a Job first…</option>';
                return;
            }

            const params = new URLSearchParams({ job_no: jobNo });
            const res = await fetch(`{{ route('api.officers') }}?${params.toString()}`, {
                headers: { 'Accept': 'application/json' }
            });
            const officers = await res.json();

            if (officers.length === 0) {
                officerSelect.innerHTML = '<option value="">No Responsible Officers found for this Job</option>';
                return;
            }

            officerSelect.innerHTML = '<option value="">Select a Responsible Officer…</option>' +
                officers.map(o => `<option value="${o}">${o}</option>`).join('');
            officerSelect.disabled = false;
        }

        officerSelect.addEventListener('change', refreshSwoOptions);

        function resetSwoOptions(message) {
            swoSelect.innerHTML = `<option value="">${message}</option>`;
            swoSelect.disabled = true;
            swoHint.textContent = '';
        }

        async function refreshSwoOptions() {
            const jobNo = jobSelect.value;
            const officer = officerSelect.value;

            resetSwoOptions('Loading…');

            if (!jobNo || !officer) {
                resetSwoOptions('Select Job and Responsible Officer first…');
                return;
            }

            const params = new URLSearchParams({ job_no: jobNo, responsible_officer: officer, type: rfiType });
            const res = await fetch(`{{ route('api.swo-options') }}?${params.toString()}`, {
                headers: { 'Accept': 'application/json' }
            });
            const swoNos = await res.json();

            if (swoNos.length === 0) {
                swoSelect.innerHTML = '<option value="">No eligible Sub Work Orders</option>';
                swoHint.textContent = rfiType === 'commencement'
                    ? 'No Work Order rows with SWO = true and commencementRFIRequried = true for this Job / Responsible Officer.'
                    : 'No Work Order rows with SWO = true for this Job / Responsible Officer.';
                return;
            }

            swoSelect.innerHTML = '<option value="">Select an SWO…</option>' +
                swoNos.map(no => `<option value="${no}">${no}</option>`).join('');
            swoSelect.disabled = false;
        }
    </script>
@endsection