@php
    $operationCoaches = $sgrTrainOperation->coachInspections->sortBy('position')->values();
    $coachIndex = $operationCoaches->search(fn ($coach) => $coach->id === $sgrCoachInspection->id);
    $previousCoach = $coachIndex !== false && $coachIndex > 0 ? $operationCoaches[$coachIndex - 1] : null;
    $nextCoach = $coachIndex !== false && $coachIndex < $operationCoaches->count() - 1 ? $operationCoaches[$coachIndex + 1] : null;
    $isLocked = $sgrTrainOperation->status === 'Submitted';
    $items = $sgrCoachInspection->items->keyBy('activity_label');
    $valueFor = fn ($label) => old("checklist_data.{$label}", $items->get($label)?->value ?? '');
    $checklistGroups = [
        'Cleaning and disinfection' => [
            'Hand Wash Soap Provision' => ['Provided', 'Not Provided'],
            'Interleave Tissue / Hand Paper Towel Provision' => ['Provided', 'Not Provided'],
            'Inside Window Cleaning' => ['Cleaned', 'Not Cleaned'],
            'Floor Cleaning' => ['Cleaned', 'Not Cleaned'],
            'Seats Cleaning' => ['Cleaned', 'Not Cleaned'],
            'Seat Covers Cleaning (Setti Clean)' => ['Cleaned', 'Not Cleaned'],
            'Vacuum Cleaning' => ['Cleaned', 'Not Cleaned'],
            'Tables Cleaning' => ['Cleaned', 'Not Cleaned'],
            'Application of Certified Detergents' => ['Applied', 'Not Applied'],
            'Window Glass Cleaning' => ['Cleaned', 'Not Cleaned'],
            'Door Rubber Cleaning' => ['Cleaned', 'Not Cleaned'],
            'Diaphragm Cleaning' => ['Cleaned', 'Not Cleaned'],
            'Luggage Carrier Cleaned' => ['Cleaned', 'Not Cleaned'],
            'AC Poles Cleaned' => ['Cleaned', 'Not Cleaned'],
        ],
        'Sanitary bins and solid waste' => [
            'Sanitary Bin Provision' => ['Provided', 'Not Provided'],
            'Sanitary Bin Emptied' => ['Emptied', 'Not Emptied'],
            'Sanitary Bin Cleaned' => ['Cleaned', 'Not Cleaned'],
            'Plastic Bags Provision' => ['Provided', 'Not Provided'],
            'External Cleaning of Coaches' => ['Cleaned', 'Not Cleaned'],
        ],
        'Decantation' => [
            'Decantation of Coaches' => ['Decanted', 'Not Decanted'],
            'Flashing of Decanted Tanks' => ['Flashed', 'Not Flashed'],
            'Cleanliness of Storage Tank Exterior' => ['Cleaned', 'Not Cleaned'],
        ],
    ];
@endphp

<section class="mx-auto w-full max-w-6xl space-y-5">
    <header class="border-b border-slate-200 pb-4">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <a href="{{ route('cleaning.daily-control.index', ['dailyControl' => $dailyControl, 'tab' => 'sgr_show', 'train_id' => $sgrTrainOperation->id]) }}" class="text-xs font-bold uppercase tracking-widest text-cyan-800 hover:text-cyan-950">← Back to coaches</a>
                <p class="mt-4 text-xs font-black uppercase tracking-[0.18em] text-cyan-800">SGR coach cleaning · Coach inspection</p>
                <h2 class="mt-1 text-2xl font-black tracking-tight text-slate-950">Coach {{ $sgrCoachInspection->coach_number }}</h2>
                <p class="mt-1 text-sm text-slate-600">Train {{ $sgrTrainOperation->train_number }} <span aria-hidden="true">·</span> Position {{ str_pad((string) $sgrCoachInspection->position, 2, '0', STR_PAD_LEFT) }} <span aria-hidden="true">·</span> {{ $sgrTrainOperation->station?->name ?? $branch->name }} <span aria-hidden="true">·</span> {{ $dailyControl->date->format('d M Y') }}</p>
            </div>
            <div class="flex flex-wrap items-center gap-3">
                <span class="inline-flex min-h-9 items-center gap-2 border px-3 text-xs font-black uppercase tracking-wider {{ $isLocked ? 'border-emerald-300 bg-emerald-50 text-emerald-900' : 'border-amber-300 bg-amber-50 text-amber-950' }}">
                    <span class="h-2 w-2 rounded-full {{ $isLocked ? 'bg-emerald-700' : 'bg-amber-600' }}"></span>
                    {{ $isLocked ? 'Submitted · read only' : 'Draft · editing allowed' }}
                </span>
                <span class="inline-flex min-h-9 items-center border px-3 text-xs font-black uppercase tracking-wider {{ $sgrCoachInspection->inspection_status === 'Passed' ? 'border-emerald-300 bg-emerald-50 text-emerald-900' : ($sgrCoachInspection->inspection_status === 'Failed' ? 'border-red-300 bg-red-50 text-red-900' : 'border-slate-300 bg-slate-50 text-slate-700') }}">{{ $sgrCoachInspection->inspection_status }}</span>
            </div>
        </div>
        <nav aria-label="Coach navigation" class="mt-4 flex flex-wrap items-center justify-between gap-2 border-t border-slate-100 pt-3">
            @if($previousCoach && $previousCoach->availability_status !== 'Removed')
                <a href="{{ route('cleaning.sgr.coaches.inspect', [$dailyControl, $sgrTrainOperation, $previousCoach]) }}" class="inline-flex min-h-10 items-center border border-slate-300 px-3 text-sm font-bold text-slate-700 hover:bg-slate-50">← Previous: {{ $previousCoach->coach_number }}</a>
            @else
                <span></span>
            @endif
            <a href="{{ route('cleaning.daily-control.index', ['dailyControl' => $dailyControl, 'tab' => 'sgr_show', 'train_id' => $sgrTrainOperation->id]) }}" class="inline-flex min-h-10 items-center px-3 text-sm font-bold text-cyan-900 underline underline-offset-2">Coach list</a>
            @if($nextCoach && $nextCoach->availability_status !== 'Removed')
                <a href="{{ route('cleaning.sgr.coaches.inspect', [$dailyControl, $sgrTrainOperation, $nextCoach]) }}" class="inline-flex min-h-10 items-center border border-slate-300 px-3 text-sm font-bold text-slate-700 hover:bg-slate-50">Next: {{ $nextCoach->coach_number }} →</a>
            @else
                <span></span>
            @endif
        </nav>
    </header>

    <form method="POST" action="{{ route('cleaning.sgr.coaches.store', [$dailyControl, $sgrTrainOperation, $sgrCoachInspection]) }}" enctype="multipart/form-data" id="coach-inspection-form" class="space-y-5">
        @csrf
        @error('inspection')
            <div role="alert" class="border border-red-300 bg-red-50 px-4 py-3 text-sm font-semibold text-red-900">{{ $message }}</div>
        @enderror
        <section aria-labelledby="checklist-heading" class="border border-slate-200 bg-white">
            <div class="flex flex-col gap-3 border-b border-slate-200 bg-slate-50 px-5 py-4 sm:flex-row sm:items-end sm:justify-between">
                <div>
                    <p class="text-xs font-black uppercase tracking-widest text-slate-500">Section 1</p>
                    <h3 id="checklist-heading" class="mt-1 text-lg font-black text-slate-950">Cleaning checklist</h3>
                    <p class="mt-1 text-sm text-slate-600">Record the observed result for each legacy checklist item using its listed responses.</p>
                </div>
                <span class="text-sm font-bold text-slate-700"><span id="checklist-progress">{{ $items->count() }}</span> / 22 recorded</span>
            </div>
            @error('checklist_data')<p class="border-b border-red-200 bg-red-50 px-5 py-3 text-sm font-semibold text-red-800">{{ $message }}</p>@enderror
            <div class="grid gap-5 p-4 sm:p-5 xl:grid-cols-2">
                @foreach($checklistGroups as $groupTitle => $groupItems)
                    <section aria-label="{{ $groupTitle }}" class="border border-slate-200">
                        <h4 class="border-b border-slate-200 bg-slate-50 px-4 py-3 text-sm font-black text-slate-900">{{ $groupTitle }}</h4>
                        <div class="divide-y divide-slate-100 px-4">
                            @foreach($groupItems as $label => $options)
                                <fieldset class="py-3" @disabled($isLocked)>
                                    <legend class="mb-2 text-sm font-semibold leading-5 text-slate-800">{{ $label }}</legend>
                                    <div class="grid grid-cols-2 gap-2">
                                        @foreach($options as $option)
                                            <label class="flex min-h-11 cursor-pointer items-center gap-2 border border-slate-200 px-2.5 text-xs font-semibold text-slate-700 has-[:checked]:border-cyan-800 has-[:checked]:bg-cyan-50 has-[:checked]:text-cyan-950 {{ $isLocked ? 'cursor-not-allowed opacity-70' : 'hover:border-cyan-500' }}">
                                                <input type="radio" name="checklist_data[{{ $label }}]" value="{{ $option }}" class="h-4 w-4 shrink-0 border-slate-400 text-cyan-800 focus:ring-cyan-700" {{ $valueFor($label) === $option ? 'checked' : '' }} required>
                                                <span>{{ $option }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                    @error('checklist_data.'.$label)<p class="mt-1 text-xs font-semibold text-red-700">{{ $message }}</p>@enderror
                                </fieldset>
                            @endforeach
                        </div>
                    </section>
                @endforeach
            </div>
        </section>

        <section aria-labelledby="water-heading" class="border border-cyan-200 bg-white">
            <div class="border-b border-cyan-200 bg-cyan-50 px-5 py-4">
                <p class="text-xs font-black uppercase tracking-widest text-cyan-900">Section 2</p>
                <h3 id="water-heading" class="mt-1 text-lg font-black text-slate-950">Water levels</h3>
                <p class="mt-1 text-sm text-slate-700">Record litres for each tank at arrival and departure.</p>
            </div>
            <div class="grid gap-5 p-4 sm:p-5 lg:grid-cols-2">
                @foreach([
                    'Arrival' => ['water_arrival_p' => ['label' => 'Tank A (P)', 'value' => $sgrCoachInspection->water_arrival_p], 'water_arrival_t' => ['label' => 'Tank B (T)', 'value' => $sgrCoachInspection->water_arrival_t]],
                    'Departure' => ['water_departure_p' => ['label' => 'Tank A (P)', 'value' => $sgrCoachInspection->water_departure_p], 'water_departure_t' => ['label' => 'Tank B (T)', 'value' => $sgrCoachInspection->water_departure_t]],
                ] as $phase => $fields)
                    <fieldset class="space-y-3" @disabled($isLocked)>
                        <legend class="text-sm font-black uppercase tracking-wider text-slate-800">{{ $phase }}</legend>
                        @foreach($fields as $name => $field)
                            <div class="grid grid-cols-[minmax(0,1fr)_minmax(8rem,11rem)] items-center gap-3">
                                <label for="{{ $name }}" class="text-sm font-semibold text-slate-700">{{ $field['label'] }}</label>
                                <div class="relative">
                                    <input id="{{ $name }}" type="number" name="{{ $name }}" value="{{ old($name, $field['value']) }}" min="0" max="1000" step="any" required aria-describedby="{{ $name }}-unit" class="min-h-11 w-full rounded-md border-slate-300 pr-10 text-sm focus:border-cyan-700 focus:ring-cyan-700">
                                    <span id="{{ $name }}-unit" class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xs font-bold text-slate-500">L</span>
                                </div>
                                @error($name)<p class="col-span-2 text-xs font-semibold text-red-700">{{ $message }}</p>@enderror
                            </div>
                        @endforeach
                    </fieldset>
                @endforeach
            </div>
        </section>

        <section aria-labelledby="findings-heading" class="border border-slate-200 bg-white">
            <div class="border-b border-slate-200 bg-slate-50 px-5 py-4">
                <p class="text-xs font-black uppercase tracking-widest text-slate-500">Section 3</p>
                <h3 id="findings-heading" class="mt-1 text-lg font-black text-slate-950">Findings and comments</h3>
            </div>
            <div class="grid gap-5 p-4 sm:p-5 lg:grid-cols-2">
                <fieldset @disabled($isLocked)>
                    <label for="inspection-status" class="mb-1.5 block text-sm font-bold text-slate-800">Coach result</label>
                    <select id="inspection-status" name="inspection_status" required class="min-h-11 w-full rounded-md border-slate-300 text-sm font-semibold focus:border-cyan-700 focus:ring-cyan-700">
                        @foreach(['Pending', 'Passed', 'Failed'] as $status)
                            <option value="{{ $status }}" @selected(old('inspection_status', $sgrCoachInspection->inspection_status) === $status)>{{ $status }}</option>
                        @endforeach
                    </select>
                    @error('inspection_status')<p class="mt-1 text-xs font-semibold text-red-700">{{ $message }}</p>@enderror
                </fieldset>
                <fieldset @disabled($isLocked)>
                    <label for="remarks" class="mb-1.5 block text-sm font-bold text-slate-800">Remarks <span class="font-normal text-slate-500">(required when Failed)</span></label>
                    <textarea id="remarks" name="remarks" rows="3" maxlength="2000" class="w-full rounded-md border-slate-300 text-sm focus:border-cyan-700 focus:ring-cyan-700" placeholder="Describe the issue or relevant observation">{{ old('remarks', $sgrCoachInspection->remarks) }}</textarea>
                    @error('remarks')<p class="mt-1 text-xs font-semibold text-red-700">{{ $message }}</p>@enderror
                </fieldset>
            </div>
        </section>

        <section aria-labelledby="photo-heading" class="border border-slate-200 bg-white">
            <div class="border-b border-slate-200 bg-slate-50 px-5 py-4">
                <p class="text-xs font-black uppercase tracking-widest text-slate-500">Section 4</p>
                <h3 id="photo-heading" class="mt-1 text-lg font-black text-slate-950">Photo evidence</h3>
                <p class="mt-1 text-sm text-slate-600">Attach a photo when it helps document a finding. Optional.</p>
            </div>
            <div class="space-y-4 p-4 sm:p-5">
                @if($sgrCoachInspection->photo_path)
                    <figure class="max-w-sm">
                        <img src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($sgrCoachInspection->photo_path) }}" alt="Inspection evidence for coach {{ $sgrCoachInspection->coach_number }}" class="max-h-72 w-full border border-slate-200 object-contain object-left">
                        <figcaption class="mt-1 text-xs text-slate-500">Current inspection evidence</figcaption>
                    </figure>
                @endif
                @if(! $isLocked)
                    <label for="photo" class="block text-sm font-bold text-slate-800">{{ $sgrCoachInspection->photo_path ? 'Replace photo' : 'Choose photo' }}</label>
                    <input id="photo" type="file" name="photo" accept="image/*" class="block min-h-11 w-full text-sm text-slate-700 file:mr-4 file:min-h-11 file:border-0 file:bg-slate-100 file:px-4 file:text-sm file:font-bold file:text-slate-800 hover:file:bg-slate-200">
                    <p class="text-xs text-slate-500">Image files up to 5 MB.</p>
                    @error('photo')<p class="text-sm font-semibold text-red-700">{{ $message }}</p>@enderror
                @endif
            </div>
        </section>

        @if(! $isLocked)
            <div class="sticky bottom-0 z-10 -mx-2 flex flex-col-reverse gap-2 border-t border-slate-200 bg-white/95 p-3 shadow-[0_-4px_12px_rgba(15,23,42,0.08)] backdrop-blur sm:mx-0 sm:flex-row sm:items-center sm:justify-between sm:px-4">
                <a href="{{ route('cleaning.daily-control.index', ['dailyControl' => $dailyControl, 'tab' => 'sgr_show', 'train_id' => $sgrTrainOperation->id]) }}" class="inline-flex min-h-12 items-center justify-center px-4 text-sm font-bold text-slate-700 hover:text-slate-950">Back to coaches</a>
                <button type="submit" class="inline-flex min-h-12 items-center justify-center bg-cyan-800 px-6 text-sm font-black text-white hover:bg-cyan-900 focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:ring-offset-2">Save inspection</button>
            </div>
        @else
            <div class="border border-emerald-300 bg-emerald-50 p-4 text-sm font-bold text-emerald-950">This operation has been submitted. Inspection details are locked and read-only.</div>
        @endif
    </form>
</section>

@if(! $isLocked)
<script>
    (() => {
        const form = document.getElementById('coach-inspection-form');
        const radios = form.querySelectorAll('input[type="radio"][name^="checklist_data["]');
        const progress = document.getElementById('checklist-progress');
        const result = document.getElementById('inspection-status');
        const remarks = document.getElementById('remarks');
        const updateChecklistProgress = () => {
            const answered = new Set([...radios].filter(radio => radio.checked).map(radio => radio.name)).size;
            progress.textContent = answered;
        };
        const updateRemarksRequirement = () => {
            remarks.required = result.value === 'Failed';
        };
        form.addEventListener('change', updateChecklistProgress);
        result.addEventListener('change', updateRemarksRequirement);
        form.addEventListener('submit', event => {
            const button = form.querySelector('button[type="submit"]');
            button.disabled = true;
            button.textContent = 'Saving…';
        });
        updateChecklistProgress();
        updateRemarksRequirement();
    })();
</script>
@endif