@php
    $coaches = $sgrTrainOperation->coachInspections->sortBy('position')->values();
    $removedCount = $coaches->where('availability_status', 'Removed')->count();
    $activeCoaches = $coaches->where('availability_status', '!=', 'Removed');
    $passedCount = $activeCoaches->where('inspection_status', 'Passed')->count();
    $failedCount = $activeCoaches->where('inspection_status', 'Failed')->count();
    $pendingCount = $activeCoaches->where('inspection_status', 'Pending')->count();
    $inspectedCount = $passedCount + $failedCount;
    $waterCompleteCount = $activeCoaches->filter(fn ($coach) => $coach->water_arrival_p !== null && $coach->water_arrival_t !== null && $coach->water_departure_p !== null && $coach->water_departure_t !== null)->count();
    $withRemarksCount = $activeCoaches->filter(fn ($coach) => filled($coach->remarks))->count();
    $withPhotoCount = $activeCoaches->filter(fn ($coach) => filled($coach->photo_path))->count();
@endphp

<section class="mx-auto w-full max-w-6xl space-y-6">
    <header class="flex flex-col gap-5 border-b border-slate-200 pb-5 lg:flex-row lg:items-end lg: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">← Train operations</a>
            <p class="mt-4 text-xs font-black uppercase tracking-[0.18em] text-cyan-800">SGR coach cleaning</p>
            <h2 class="mt-1 text-3xl font-black tracking-tight text-slate-950">{{ $sgrTrainOperation->train_number }}</h2>
            <p class="mt-1 text-sm text-slate-600">{{ $sgrTrainOperation->station?->name ?? $branch->name }} <span aria-hidden="true">·</span> {{ $dailyControl->date->format('d M Y') }} <span aria-hidden="true">·</span> Supervisor {{ $sgrTrainOperation->supervisor?->name ?? '—' }}</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 {{ $sgrTrainOperation->status === 'Submitted' ? '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 {{ $sgrTrainOperation->status === 'Submitted' ? 'bg-emerald-700' : 'bg-amber-600' }}"></span>
                {{ $sgrTrainOperation->status === 'Submitted' ? 'Submitted · editing locked' : 'Draft · editing allowed' }}
            </span>
            @if($sgrTrainOperation->status !== 'Submitted' && ! $sgrTrainOperation->is_composition_confirmed)
                <a href="{{ route('cleaning.daily-control.index', ['dailyControl' => $dailyControl, 'tab' => 'sgr_composition', 'train_id' => $sgrTrainOperation->id]) }}" class="inline-flex min-h-10 items-center border border-slate-300 px-3 text-sm font-bold text-slate-800 hover:bg-slate-50">Confirm coaches</a>
            @elseif($sgrTrainOperation->status !== 'Submitted')
                <a href="{{ route('cleaning.daily-control.index', ['dailyControl' => $dailyControl, 'tab' => 'sgr_composition', 'train_id' => $sgrTrainOperation->id]) }}" class="inline-flex min-h-10 items-center border border-slate-300 px-3 text-sm font-bold text-slate-800 hover:bg-slate-50">Edit composition</a>
            @endif
        </div>
    </header>

    <section aria-label="Operation progress" class="grid grid-cols-2 border-y border-slate-200 bg-white sm:grid-cols-3 lg:grid-cols-6">
        @foreach([
            ['label' => 'Actual coaches', 'value' => $coaches->count(), 'tone' => 'text-slate-950'],
            ['label' => 'Inspected', 'value' => $inspectedCount, 'tone' => 'text-slate-950'],
            ['label' => 'Passed', 'value' => $passedCount, 'tone' => 'text-emerald-800'],
            ['label' => 'Failed', 'value' => $failedCount, 'tone' => 'text-red-800'],
            ['label' => 'Pending', 'value' => $pendingCount, 'tone' => 'text-slate-600'],
            ['label' => 'Unavailable', 'value' => $removedCount, 'tone' => 'text-slate-500'],
        ] as $metric)
            <div class="border-b border-r border-slate-100 px-4 py-3 last:border-r-0 sm:border-b-0">
                <span class="block text-[10px] font-bold uppercase tracking-wider text-slate-500">{{ $metric['label'] }}</span>
                <span class="mt-0.5 block text-2xl font-black {{ $metric['tone'] }}">{{ $metric['value'] }}</span>
            </div>
        @endforeach
    </section>

    @if($coaches->isNotEmpty())
        <div class="h-1.5 w-full bg-slate-200" role="progressbar" aria-label="Coach inspections completed" aria-valuemin="0" aria-valuemax="{{ $activeCoaches->count() }}" aria-valuenow="{{ $inspectedCount }}">
            <div class="h-full bg-emerald-700" style="width: {{ $activeCoaches->count() ? min(100, ($inspectedCount / $activeCoaches->count()) * 100) : 0 }}%"></div>
        </div>
    @endif

    <section aria-labelledby="coach-list-heading">
        <div class="mb-3 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <p class="text-xs font-black uppercase tracking-widest text-slate-500">Actual operation coaches</p>
                <h3 id="coach-list-heading" class="mt-1 text-lg font-black text-slate-950">Coach inspections</h3>
            </div>
            <p class="text-sm text-slate-600">{{ $inspectedCount }} of {{ $activeCoaches->count() }} available coaches inspected</p>
        </div>

        @if($coaches->isNotEmpty())
            <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-3">
                @foreach($coaches as $coach)
                    @php
                        $isRemoved = $coach->availability_status === 'Removed';
                        $status = $isRemoved ? 'Unavailable' : $coach->inspection_status;
                        $statusTone = match ($status) {
                            'Passed' => 'text-emerald-900 border-emerald-300 bg-emerald-50',
                            'Failed' => 'text-red-900 border-red-300 bg-red-50',
                            'Unavailable' => 'text-slate-600 border-slate-300 bg-slate-100',
                            default => 'text-slate-600 border-slate-300 bg-slate-50',
                        };
                        $statusSymbol = match ($status) {
                            'Passed' => '✓',
                            'Failed' => '!',
                            'Unavailable' => '—',
                            default => '○',
                        };
                    @endphp
                    <article class="relative border {{ $isRemoved ? 'border-slate-200 bg-slate-50' : ($status === 'Failed' ? 'border-red-300 bg-white' : 'border-slate-200 bg-white') }}">
                        <a href="{{ route('cleaning.sgr.coaches.inspect', [$dailyControl, $sgrTrainOperation, $coach]) }}" class="block min-h-28 p-4 outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-700 {{ $isRemoved ? 'text-slate-500' : 'hover:bg-slate-50' }}" aria-label="{{ $isRemoved ? 'View unavailable' : ($sgrTrainOperation->status === 'Submitted' ? 'View' : 'Open') }} coach {{ $coach->coach_number }}, position {{ $coach->position }}, {{ $status }}">
                            <div class="flex items-start justify-between gap-3">
                                <div>
                                    <p class="text-xs font-bold uppercase tracking-wider text-slate-500">Position {{ str_pad((string) $coach->position, 2, '0', STR_PAD_LEFT) }}</p>
                                    <h4 class="mt-1 text-xl font-black tracking-tight {{ $isRemoved ? 'text-slate-500' : 'text-slate-950' }}">{{ $coach->coach_number }}</h4>
                                </div>
                                <span class="inline-flex min-h-8 items-center gap-1.5 border px-2 text-xs font-black {{ $statusTone }}"><span aria-hidden="true">{{ $statusSymbol }}</span>{{ $status }}</span>
                            </div>
                            @if($status === 'Failed' && filled($coach->remarks))
                                <p class="mt-3 line-clamp-2 text-sm text-red-900">{{ $coach->remarks }}</p>
                            @endif
                            <span class="mt-3 inline-block text-xs font-bold text-cyan-900">{{ $sgrTrainOperation->status === 'Submitted' ? 'View inspection' : ($isRemoved ? 'View record' : ($status === 'Pending' ? 'Inspect coach' : 'Open inspection')) }} <span aria-hidden="true">→</span></span>
                        </a>
                        @if($sgrTrainOperation->status !== 'Submitted' && ! $isRemoved)
                            <form method="POST" action="{{ route('cleaning.sgr.coaches.remove', [$dailyControl, $sgrTrainOperation, $coach]) }}" class="border-t border-slate-100 px-4 py-2" onsubmit="return confirm('Mark coach {{ $coach->coach_number }} as unavailable for this operation?');">
                                @csrf
                                <button type="submit" class="min-h-9 text-xs font-bold text-slate-600 underline decoration-slate-300 underline-offset-2 hover:text-red-800">Mark unavailable</button>
                            </form>
                        @endif
                    </article>
                @endforeach
            </div>
        @else
            <div class="border border-dashed border-slate-300 bg-slate-50 px-5 py-10 text-center">
                <p class="font-bold text-slate-900">No actual coaches are listed</p>
                @if($sgrTrainOperation->status !== 'Submitted')
                    <a href="{{ route('cleaning.daily-control.index', ['dailyControl' => $dailyControl, 'tab' => 'sgr_composition', 'train_id' => $sgrTrainOperation->id]) }}" class="mt-2 inline-block text-sm font-bold text-cyan-900 underline">Add coaches to this operation</a>
                @endif
            </div>
        @endif
    </section>

    <section aria-labelledby="review-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">Before final submission</p>
            <h3 id="review-heading" class="mt-1 text-lg font-black text-slate-950">Operation review</h3>
        </div>
        <div class="grid gap-5 p-5 lg:grid-cols-[1fr_auto] lg:items-start">
            <div>
                <dl class="grid grid-cols-2 gap-x-5 gap-y-3 text-sm sm:grid-cols-3">
                    <div><dt class="text-xs font-bold uppercase tracking-wide text-slate-500">Train</dt><dd class="mt-1 font-black text-slate-950">{{ $sgrTrainOperation->train_number }}</dd></div>
                    <div><dt class="text-xs font-bold uppercase tracking-wide text-slate-500">Station</dt><dd class="mt-1 font-semibold text-slate-900">{{ $sgrTrainOperation->station?->name ?? $branch->name }}</dd></div>
                    <div><dt class="text-xs font-bold uppercase tracking-wide text-slate-500">Date</dt><dd class="mt-1 font-semibold text-slate-900">{{ $dailyControl->date->format('d M Y') }}</dd></div>
                    <div><dt class="text-xs font-bold uppercase tracking-wide text-slate-500">Actual coach count</dt><dd class="mt-1 font-semibold text-slate-900">{{ $coaches->count() }}</dd></div>
                    <div><dt class="text-xs font-bold uppercase tracking-wide text-slate-500">Water complete</dt><dd class="mt-1 font-semibold text-slate-900">{{ $waterCompleteCount }} / {{ $activeCoaches->count() }}</dd></div>
                    <div><dt class="text-xs font-bold uppercase tracking-wide text-slate-500">Remarks / photos</dt><dd class="mt-1 font-semibold text-slate-900">{{ $withRemarksCount }} / {{ $withPhotoCount }} coaches</dd></div>
                </dl>
            </div>
            <div class="border-l-2 {{ $failedCount || $pendingCount ? 'border-amber-500' : 'border-emerald-700' }} pl-4 text-sm">
                @if($failedCount || $pendingCount)
                    <p class="font-black text-slate-950">Review needed</p>
                    @if($failedCount)<p class="mt-1 text-red-900">{{ $failedCount }} {{ $failedCount === 1 ? 'coach has' : 'coaches have' }} failed checklist items.</p>@endif
                    @if($pendingCount)<p class="mt-1 text-slate-700">{{ $pendingCount }} {{ $pendingCount === 1 ? 'coach is' : 'coaches are' }} still pending inspection.</p>@endif
                @else
                    <p class="font-black text-emerald-900">All available coaches inspected</p>
                @endif
                @if($removedCount)<p class="mt-1 text-slate-600">{{ $removedCount }} coach{{ $removedCount === 1 ? '' : 'es' }} marked unavailable.</p>@endif
            </div>
        </div>
    </section>

    @if($sgrTrainOperation->status !== 'Submitted')
        <section aria-labelledby="submit-operation-heading" class="border border-slate-700 bg-slate-900 p-5 text-white sm:p-6">
            <p class="text-xs font-black uppercase tracking-widest text-cyan-200">Final operational commitment</p>
            <h3 id="submit-operation-heading" class="mt-1 text-lg font-black">Submit this SGR operation</h3>
            <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-300">Submitting confirms that the coach composition and inspection information recorded above are accurate. After submission, editing is locked.</p>
            <form method="POST" action="{{ route('cleaning.sgr.submit', [$dailyControl, $sgrTrainOperation]) }}" class="mt-4 border-t border-slate-700 pt-4" id="submit-sgr-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-500 focus:ring-cyan-400">
                    <span>I have reviewed the coach statuses and am ready to submit.</span>
                </label>
                <button type="submit" class="mt-3 inline-flex min-h-12 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">Submit SGR operation</button>
            </form>
        </section>
        <script>
            document.getElementById('submit-sgr-form')?.addEventListener('submit', event => {
                const button = event.currentTarget.querySelector('button[type="submit"]');
                button.disabled = true;
                button.textContent = 'Submitting…';
            });
        </script>
    @else
        <div role="status" class="border border-emerald-300 bg-emerald-50 p-4 text-sm font-bold text-emerald-950">Submitted on {{ $sgrTrainOperation->submitted_at?->format('d M Y, H:i') ?? '—' }} · Editing is locked. This report is read-only.</div>
    @endif
</section>