@extends('layouts.app')

@section('title', 'Appel — ' . $class->name)
@section('heading', 'Appel — ' . $class->name)
@section('subheading', $date->translatedFormat('l j F Y') . ($class->homeroomTeacher ? ' · Titulaire : ' . $class->homeroomTeacher->fullName() : ''))

@section('content')
    <div class="mb-3 d-flex gap-2 flex-wrap align-items-center">
        <a href="{{ route('attendance.index', ['date' => $date->toDateString()]) }}"
           class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Classes du jour
        </a>

        @unless ($date->isToday())
            <span class="badge text-bg-warning">
                <i class="bi bi-clock-history me-1"></i>Date passée : correction d'un appel
            </span>
        @endunless

        @if ($alreadyDone)
            <span class="small text-secondary">
                Appel déjà enregistré — vos modifications remplaceront l'existant.
            </span>
        @endif
    </div>

    @if ($enrollments->isEmpty())
        <div class="card">
            <div class="card-body text-center text-secondary py-5">Aucun élève actif dans cette classe.</div>
        </div>
    @else
        <form method="POST" action="{{ route('attendance.store', $class) }}" id="form-appel">
            @csrf
            <input type="hidden" name="date" value="{{ $date->toDateString() }}">

            <div class="card">
                <div class="card-header bg-white d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <span class="fw-semibold">{{ $enrollments->count() }} élève{{ $enrollments->count() > 1 ? 's' : '' }}</span>
                    <div class="d-flex gap-2 align-items-center">
                        {{-- Le cas courant : tout le monde est là sauf deux ou
                             trois. On part de « tous présents » et on ne
                             touche qu'aux exceptions. --}}
                        <button type="button" class="btn btn-sm btn-outline-success" id="tous-presents">
                            <i class="bi bi-check-all me-1"></i>Tous présents
                        </button>
                        <span class="small text-secondary" id="compteur"></span>
                        <button type="submit" class="btn btn-sm btn-primary">
                            <i class="bi bi-save me-1"></i>Enregistrer l'appel
                        </button>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table align-middle mb-0" id="table-appel">
                        <thead>
                            <tr>
                                <th style="width: 3rem;">#</th>
                                <th>Élève</th>
                                <th>Présence</th>
                                <th style="min-width: 14rem;">Remarque</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($enrollments as $i => $enrollment)
                                @php
                                    $row = $existing->get($enrollment->id);
                                    $current = old("statuses.{$enrollment->id}", $row?->status->value ?? 'present');
                                @endphp
                                <tr data-enrollment="{{ $enrollment->id }}">
                                    <td class="text-secondary small">{{ $i + 1 }}</td>
                                    <td>
                                        <div class="fw-semibold">{{ $enrollment->student->last_name }}, {{ $enrollment->student->first_name }}</div>
                                        <div class="small text-secondary text-matricule">{{ $enrollment->student->student_id }}</div>
                                    </td>
                                    <td>
                                        {{-- Groupe de boutons radio : un clic, pas de menu déroulant.
                                             Sur téléphone, cinq boutons tiennent sur une ligne. --}}
                                        <div class="btn-group btn-group-sm" role="group" aria-label="Présence de {{ $enrollment->student->fullName() }}">
                                            @foreach ($statuses as $status)
                                                <input type="radio" class="btn-check statut"
                                                       name="statuses[{{ $enrollment->id }}]"
                                                       id="s-{{ $enrollment->id }}-{{ $status->value }}"
                                                       value="{{ $status->value }}"
                                                       @checked($current === $status->value)
                                                       data-absent="{{ $status->countsAsAbsence() ? '1' : '0' }}">
                                                <label class="btn btn-outline-{{ match ($status) {
                                                            \App\Enums\AttendanceStatus::Present => 'success',
                                                            \App\Enums\AttendanceStatus::Absent => 'danger',
                                                            \App\Enums\AttendanceStatus::Late => 'warning',
                                                            \App\Enums\AttendanceStatus::Excused => 'info',
                                                            \App\Enums\AttendanceStatus::SentHome => 'secondary',
                                                        } }}"
                                                       for="s-{{ $enrollment->id }}-{{ $status->value }}"
                                                       title="{{ $status->label() }}">
                                                    <span class="d-none d-md-inline">{{ $status->label() }}</span>
                                                    <span class="d-md-none">{{ $status->shortLabel() }}</span>
                                                </label>
                                            @endforeach
                                        </div>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control form-control-sm"
                                               name="notes[{{ $enrollment->id }}]" maxlength="200"
                                               value="{{ old("notes.{$enrollment->id}", $row?->notes) }}"
                                               placeholder="Facultatif">
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="card-footer bg-white d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <span class="small text-secondary">
                        <i class="bi bi-info-circle me-1"></i>
                        Seul « Absent » compte comme absence sur le bulletin. Un retard ou une
                        absence excusée est conservé mais n'y figure pas.
                    </span>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save me-1"></i>Enregistrer l'appel
                    </button>
                </div>
            </div>
        </form>

        <script>
            (() => {
                const table = document.getElementById('table-appel');
                const compteur = document.getElementById('compteur');

                function recompter() {
                    const absents = table.querySelectorAll('.statut[data-absent="1"]:checked').length;
                    const autres = table.querySelectorAll('.statut:checked:not([value="present"])').length - absents;
                    compteur.textContent = absents + ' absent(s)' + (autres ? ', ' + autres + ' autre(s)' : '');
                }

                table.addEventListener('change', (e) => {
                    if (e.target.classList.contains('statut')) recompter();
                });

                document.getElementById('tous-presents').addEventListener('click', () => {
                    table.querySelectorAll('.statut[value="present"]').forEach((r) => { r.checked = true; });
                    recompter();
                });

                recompter();
            })();
        </script>
    @endif
@endsection