@php
    $actualCoaches = $sgrTrainOperation->coachInspections()->orderBy('position')->get();
    $coachNumbers = old('coaches', $actualCoaches->pluck('coach_number')->all());
    $isEditable = $sgrTrainOperation->status !== 'Submitted' && ! $sgrTrainOperation->is_composition_confirmed;
@endphp

<section class="mx-auto w-full max-w-5xl space-y-6">
    <header class="flex flex-col gap-4 border-b border-slate-200 pb-5 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <a href="{{ route('cleaning.daily-control.index', ['dailyControl' => $dailyControl, 'tab' => 'sgr']) }}" class="text-xs font-bold uppercase tracking-widest text-cyan-800 hover:text-cyan-950">← Back to train operations</a>
            <p class="mt-4 text-xs font-black uppercase tracking-[0.18em] text-cyan-800">SGR coach cleaning · Step 2 of 3</p>
            <h2 class="mt-1 text-2xl font-black tracking-tight text-slate-950">Confirm actual coaches</h2>
            <p class="mt-1 text-sm text-slate-600">These are the coaches physically present for this operation.</p>
        </div>
        <div class="border-l-2 border-cyan-700 pl-3">
            <p class="text-xs font-bold uppercase tracking-wider text-slate-500">Train</p>
            <p class="text-lg font-black text-slate-950">{{ $sgrTrainOperation->train_number }}</p>
        </div>
    </header>

    @if(! $isEditable)
        <div class="border border-amber-300 bg-amber-50 p-4 text-sm text-amber-950" role="status">
            This operation’s composition is already confirmed. <a class="font-bold underline" href="{{ route('cleaning.sgr.show', [$dailyControl, $sgrTrainOperation]) }}">Open the coach workspace</a>.
        </div>
    @else
        <section class="border border-slate-200 bg-white">
            <div class="border-b border-slate-200 bg-slate-50 px-5 py-4">
                <h3 class="text-base font-black text-slate-950">Known coaches</h3>
                <p class="mt-1 text-sm text-slate-600">Suggestions only. The list below is the actual composition saved for this operation.</p>
            </div>
            <div class="flex flex-wrap gap-2 p-5">
                @forelse($masterCoaches ?? [] as $masterCoach)
                    <button type="button" class="known-coach-button min-h-10 border border-slate-300 bg-white px-3 text-sm font-semibold text-slate-700 hover:border-cyan-700 hover:text-cyan-900 focus:outline-none focus:ring-2 focus:ring-cyan-700" data-coach-number="{{ $masterCoach->number }}" aria-label="Add known coach {{ $masterCoach->number }}">+ {{ $masterCoach->number }}</button>
                @empty
                    <p class="text-sm text-slate-600">There are no registered coach suggestions. Add the coaches present below.</p>
                @endforelse
            </div>
        </section>

        <section class="border border-cyan-200 bg-white">
            <div class="flex flex-col gap-3 border-b border-cyan-200 bg-cyan-50 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <p class="text-xs font-black uppercase tracking-widest text-cyan-900">Actual operation data</p>
                    <h3 class="mt-1 text-base font-black text-slate-950">Coaches in this operation</h3>
                </div>
                <span class="text-sm font-bold text-slate-700"><span id="coach-count" aria-live="polite">{{ $actualCoaches->count() }}</span> selected</span>
            </div>

            <form method="POST" action="{{ route('cleaning.sgr.composition.update', [$dailyControl, $sgrTrainOperation]) }}" id="composition-form" class="p-5">
                @csrf
                <div id="coach-list" class="space-y-2" aria-label="Actual coaches, in train order">
                    @foreach($coachNumbers as $coachNumber)
                        <div class="coach-item grid grid-cols-[2.5rem_minmax(0,1fr)_auto] items-center gap-2 border border-slate-200 p-2">
                            <span class="coach-position text-center text-xs font-black text-slate-500">{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                            <input type="text" name="coaches[]" value="{{ $coachNumber }}" list="masterCoaches" autocomplete="off" maxlength="50" required aria-label="Coach number at position {{ $loop->iteration }}" class="min-h-11 min-w-0 rounded-md border-slate-300 text-sm font-bold focus:border-cyan-700 focus:ring-cyan-700">
                            <div class="flex items-center gap-1">
                                <button type="button" class="move-coach-up min-h-10 min-w-10 border border-slate-300 text-sm font-bold text-slate-700 hover:bg-slate-50 disabled:opacity-40" aria-label="Move coach up" title="Move up">↑</button>
                                <button type="button" class="move-coach-down min-h-10 min-w-10 border border-slate-300 text-sm font-bold text-slate-700 hover:bg-slate-50 disabled:opacity-40" aria-label="Move coach down" title="Move down">↓</button>
                                <button type="button" class="remove-coach min-h-10 min-w-10 border border-red-200 bg-red-50 text-lg font-bold text-red-800 hover:bg-red-100" aria-label="Remove coach {{ $coachNumber }}" title="Remove coach">×</button>
                            </div>
                        </div>
                    @endforeach
                </div>

                <datalist id="masterCoaches">
                    @foreach($masterCoaches ?? [] as $masterCoach)
                        <option value="{{ $masterCoach->number }}"></option>
                    @endforeach
                </datalist>

                @error('coaches')
                    <p class="mt-3 text-sm font-semibold text-red-700">{{ $message }}</p>
                @enderror
                @error('coaches.*')
                    <p class="mt-3 text-sm font-semibold text-red-700">{{ $message }}</p>
                @enderror
                @foreach($errors->get('coaches.*') as $coachErrorMessages)
                    @foreach($coachErrorMessages as $coachErrorMessage)
                        <p class="mt-2 text-sm font-semibold text-red-700">{{ $coachErrorMessage }}</p>
                    @endforeach
                @endforeach

                <button type="button" id="add-coach" class="mt-4 inline-flex min-h-11 items-center border border-slate-300 px-4 text-sm font-bold text-slate-800 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-cyan-700">+ Add coach</button>
                <div class="mt-5 flex flex-col-reverse gap-2 border-t border-slate-200 pt-4 sm:flex-row sm:justify-end">
                    <a href="{{ route('cleaning.daily-control.index', ['dailyControl' => $dailyControl, 'tab' => 'sgr']) }}" class="inline-flex min-h-11 items-center justify-center px-4 text-sm font-bold text-slate-600 hover:text-slate-950">Cancel</a>
                    <button type="submit" class="inline-flex min-h-11 items-center justify-center bg-slate-900 px-5 text-sm font-bold text-white hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:ring-offset-2">Save coach order</button>
                </div>
            </form>
        </section>

        <section class="border border-slate-300 bg-slate-900 p-5 text-white sm:p-6">
            <p class="text-xs font-black uppercase tracking-widest text-cyan-200">Step 3 · Start inspection</p>
            <h3 class="mt-2 text-lg font-black">Review the actual composition</h3>
            <p class="mt-1 text-sm text-slate-300"><span id="confirm-count">{{ $actualCoaches->count() }}</span> coaches selected. These coaches will be used for this SGR operation.</p>
            <form method="POST" action="{{ route('cleaning.sgr.composition.confirm', [$dailyControl, $sgrTrainOperation]) }}" class="mt-5 border-t border-slate-700 pt-4" id="confirm-composition-form">
                @csrf
                <label class="flex min-h-11 items-start gap-3 text-sm leading-6 text-slate-200">
                    <input type="checkbox" required class="mt-1 h-4 w-4 rounded border-slate-500 text-cyan-600 focus:ring-cyan-500">
                    <span>I have checked that this list matches the coaches physically present.</span>
                </label>
                <button type="submit" class="mt-4 inline-flex min-h-12 w-full items-center justify-center bg-cyan-400 px-5 text-sm font-black text-slate-950 hover:bg-cyan-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-900 sm:w-auto">Confirm composition &amp; start inspection</button>
            </form>
        </section>
    @endif
</section>

@if($isEditable)
<script>
    (() => {
        const list = document.getElementById('coach-list');
        const addButton = document.getElementById('add-coach');
        const count = document.getElementById('coach-count');
        const confirmCount = document.getElementById('confirm-count');

        const updatePositions = () => {
            const rows = [...list.querySelectorAll('.coach-item')];
            rows.forEach((row, index) => {
                row.querySelector('.coach-position').textContent = String(index + 1).padStart(2, '0');
                row.querySelector('input').setAttribute('aria-label', `Coach number at position ${index + 1}`);
                row.querySelector('.move-coach-up').disabled = index === 0;
                row.querySelector('.move-coach-down').disabled = index === rows.length - 1;
            });
            count.textContent = rows.length;
            confirmCount.textContent = rows.length;
        };

        const addCoach = (number = '') => {
            const row = document.createElement('div');
            row.className = 'coach-item grid grid-cols-[2.5rem_minmax(0,1fr)_auto] items-center gap-2 border border-slate-200 p-2';
            row.innerHTML = `<span class="coach-position text-center text-xs font-black text-slate-500"></span>
                <input type="text" name="coaches[]" list="masterCoaches" autocomplete="off" maxlength="50" required class="min-h-11 min-w-0 rounded-md border-slate-300 text-sm font-bold focus:border-cyan-700 focus:ring-cyan-700">
                <div class="flex items-center gap-1">
                    <button type="button" class="move-coach-up min-h-10 min-w-10 border border-slate-300 text-sm font-bold text-slate-700 hover:bg-slate-50 disabled:opacity-40" aria-label="Move coach up" title="Move up">↑</button>
                    <button type="button" class="move-coach-down min-h-10 min-w-10 border border-slate-300 text-sm font-bold text-slate-700 hover:bg-slate-50 disabled:opacity-40" aria-label="Move coach down" title="Move down">↓</button>
                    <button type="button" class="remove-coach min-h-10 min-w-10 border border-red-200 bg-red-50 text-lg font-bold text-red-800 hover:bg-red-100" aria-label="Remove coach" title="Remove coach">×</button>
                </div>`;
            const input = row.querySelector('input');
            input.value = number;
            list.appendChild(row);
            updatePositions();
            if (!number) input.focus();
        };

        addButton.addEventListener('click', () => addCoach());
        document.querySelectorAll('.known-coach-button').forEach(button => button.addEventListener('click', () => {
            const number = button.dataset.coachNumber;
            const exists = [...list.querySelectorAll('input[name="coaches[]"]')].some(input => input.value.trim().toLowerCase() === number.toLowerCase());
            if (!exists) addCoach(number);
        }));
        list.addEventListener('click', event => {
            const button = event.target.closest('button');
            if (!button) return;
            const row = button.closest('.coach-item');
            if (button.classList.contains('remove-coach')) row.remove();
            if (button.classList.contains('move-coach-up') && row.previousElementSibling) list.insertBefore(row, row.previousElementSibling);
            if (button.classList.contains('move-coach-down') && row.nextElementSibling) list.insertBefore(row.nextElementSibling, row);
            updatePositions();
        });
        updatePositions();
    })();
</script>
@endif