@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');
    $pesticidesUsed = old('pesticides', $items->get('Pesticides Used')?->value ?? '');
@endphp

<section class="mx-auto w-full max-w-4xl 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' => 'fumigation_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">Fumigation · 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 === 'Passed' ? 'Fumigated' : ($sgrCoachInspection->inspection_status === 'Failed' ? 'Not Fumigated' : 'Pending') }}</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.fumigation.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' => 'fumigation_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.fumigation.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.fumigation.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="fumigation-details-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">
                <p class="text-xs font-black uppercase tracking-widest text-slate-500">Section 1</p>
                <h3 id="fumigation-details-heading" class="mt-1 text-lg font-black text-slate-950">Fumigation Details</h3>
            </div>
            
            <div class="p-5 space-y-6">
                <fieldset @disabled($isLocked)>
                    <legend class="mb-2 text-sm font-bold text-slate-900">Was this coach fumigated?</legend>
                    <div class="flex flex-wrap gap-4">
                        <label class="flex min-h-11 cursor-pointer items-center gap-2 border border-slate-200 px-4 text-sm 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="inspection_status" value="Passed" class="h-4 w-4 shrink-0 border-slate-400 text-cyan-800 focus:ring-cyan-700" {{ old('inspection_status', $sgrCoachInspection->inspection_status) === 'Passed' ? 'checked' : '' }} required>
                            <span>Yes, Fumigated</span>
                        </label>
                        <label class="flex min-h-11 cursor-pointer items-center gap-2 border border-slate-200 px-4 text-sm font-semibold text-slate-700 has-[:checked]:border-red-800 has-[:checked]:bg-red-50 has-[:checked]:text-red-950 {{ $isLocked ? 'cursor-not-allowed opacity-70' : 'hover:border-red-500' }}">
                            <input type="radio" name="inspection_status" value="Failed" class="h-4 w-4 shrink-0 border-slate-400 text-red-800 focus:ring-red-700" {{ old('inspection_status', $sgrCoachInspection->inspection_status) === 'Failed' ? 'checked' : '' }} required>
                            <span>No, Not Fumigated</span>
                        </label>
                    </div>
                    @error('inspection_status')
                        <p class="mt-1.5 text-sm font-semibold text-red-700">{{ $message }}</p>
                    @enderror
                </fieldset>

                <div>
                    <label for="pesticides" class="mb-1.5 block text-sm font-bold text-slate-900">Pesticides Used</label>
                    <input type="text" id="pesticides" name="pesticides" value="{{ $pesticidesUsed }}" maxlength="255" autocomplete="off" placeholder="e.g. Lambda-cyhalothrin" class="block min-h-11 w-full rounded-md border-slate-300 text-sm focus:border-cyan-700 focus:ring-cyan-700 disabled:bg-slate-50 disabled:text-slate-500" {{ $isLocked ? 'disabled' : '' }}>
                    <p class="mt-1.5 text-xs text-slate-500">Specify the chemicals or pesticides used for this coach.</p>
                    @error('pesticides')
                        <p class="mt-1.5 text-sm font-semibold text-red-700">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label for="remarks" class="mb-1.5 block text-sm font-bold text-slate-900">Remarks <span class="font-normal text-slate-500">(Required if not fumigated)</span></label>
                    <textarea id="remarks" name="remarks" rows="3" maxlength="2000" class="block w-full rounded-md border-slate-300 text-sm focus:border-cyan-700 focus:ring-cyan-700 disabled:bg-slate-50 disabled:text-slate-500" {{ $isLocked ? 'disabled' : '' }}>{{ old('remarks', $sgrCoachInspection->remarks) }}</textarea>
                    <p class="mt-1.5 text-xs text-slate-500">Any notes, observations, or reasons why it was not fumigated.</p>
                    @error('remarks')
                        <p class="mt-1.5 text-sm font-semibold text-red-700">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </section>

        <section aria-labelledby="photo-evidence-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 2</p>
                <h3 id="photo-evidence-heading" class="mt-1 text-lg font-black text-slate-950">Photo Evidence</h3>
            </div>
            <div class="p-5">
                @if($sgrCoachInspection->photo_path)
                    <div class="mb-4">
                        <p class="mb-2 text-sm font-bold text-slate-800">Current photo</p>
                        <img src="{{ Storage::url($sgrCoachInspection->photo_path) }}" alt="Fumigation evidence for {{ $sgrCoachInspection->coach_number }}" class="max-h-64 rounded border border-slate-200 object-contain">
                    </div>
                @endif

                @if(! $isLocked)
                    <label for="photo" class="mb-1.5 block text-sm font-bold text-slate-900">{{ $sgrCoachInspection->photo_path ? 'Replace photo' : 'Upload photo' }}</label>
                    <input type="file" id="photo" name="photo" accept="image/*" capture="environment" class="block w-full text-sm text-slate-600 file:mr-4 file:min-h-11 file:rounded-full file:border-0 file:bg-cyan-50 file:px-4 file:font-semibold file:text-cyan-800 hover:file:bg-cyan-100">
                    <p class="mt-2 text-xs text-slate-500">Take a photo using the camera or upload an image. Max 5MB.</p>
                    @error('photo')
                        <p class="mt-1.5 text-sm font-semibold text-red-700">{{ $message }}</p>
                    @enderror
                @endif
            </div>
        </section>

        @if(! $isLocked)
            <div class="sticky bottom-4 z-10 flex flex-col-reverse gap-3 rounded-lg border border-slate-200 bg-white p-4 shadow-lg sm:flex-row sm:items-center sm:justify-end">
                <a href="{{ route('cleaning.daily-control.index', ['dailyControl' => $dailyControl, 'tab' => 'fumigation_show', 'train_id' => $sgrTrainOperation->id]) }}" 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-cyan-800 px-5 text-sm font-bold text-white shadow-sm hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:ring-offset-2">Save coach details</button>
            </div>
        @endif
    </form>
</section>