@extends('layouts.app')

@section('titre', $devoir->titre)

@section('contenu')
    <div class="mx-auto max-w-4xl px-5 py-14 lg:px-10">
        <p class="font-mono text-sm font-semibold"><a href="{{ route('mes-classes.devoirs.index', $classe) }}" class="underline underline-offset-4">Devoirs · {{ $classe->nom }}</a></p>
        <div class="mt-1 flex flex-wrap items-start justify-between gap-4">
            <div>
                <h1 class="text-4xl font-extrabold tracking-tight">{{ $devoir->titre }}</h1>
                <p class="mt-2 font-mono text-sm font-semibold {{ $devoir->echeanceDepassee() ? 'text-[#A63D2A]' : '' }}">{{ $devoir->echeanceDepassee() ? 'Échéance dépassée le' : 'À rendre avant le' }} {{ $devoir->echeance->timezone(config('app.fuseau_utilisateurs'))->translatedFormat('d/m/Y H:i') }}</p>
            </div>
            <form action="{{ route('mes-classes.devoirs.destroy', [$classe, $devoir]) }}" method="post" data-confirmer="Supprimer ce devoir et tous ses rendus ?">
                @csrf
                <button type="submit" class="font-bold text-[#A63D2A] underline underline-offset-4">Supprimer</button>
            </form>
        </div>
        <p class="mt-4 whitespace-pre-wrap font-semibold">{{ $devoir->consigne }}</p>

        <section class="mt-8 rounded-2xl border border-[#e3e5e8] bg-white" aria-labelledby="t-rendus">
            <h2 id="t-rendus" class="px-6 pt-6 text-xl font-extrabold">Rendus ({{ $rendus->count() }}/{{ $eleves->count() }})</h2>
            <ul class="mt-4 divide-y divide-[#e3e5e8]">
                @foreach ($eleves as $eleve)
                    @php($rendu = $rendus->get($eleve->id))
                    <li class="p-6">
                        <div class="flex flex-wrap items-center justify-between gap-3">
                            <span class="text-lg font-extrabold">{{ $eleve->nomAffiche() }}</span>
                            @if ($rendu)
                                <span class="font-mono text-sm font-semibold text-[#3C8A5A]">Rendu le {{ $rendu->rendu_a->timezone(config('app.fuseau_utilisateurs'))->translatedFormat('d/m/Y H:i') }}</span>
                            @else
                                <span class="font-mono text-sm font-semibold text-[#5f6368]">Pas encore rendu</span>
                            @endif
                        </div>
                        @if ($rendu)
                            <p class="mt-3 whitespace-pre-wrap rounded-xl border border-[#e3e5e8] bg-[#f8f9fa] p-4 font-semibold">{{ $rendu->reponse }}</p>
                            <form action="{{ route('mes-classes.devoirs.noter', [$classe, $devoir, $rendu]) }}" method="post" class="mt-3 flex items-center gap-2">
                                @csrf
                                <label class="font-bold">Note <input type="number" name="note" min="0" max="20" value="{{ $rendu->note }}" class="w-20 rounded-xl border border-[#c4c7c5] bg-white px-2 py-1 font-semibold"> / 20</label>
                                <button type="submit" class="inline-flex h-9 items-center rounded-full bg-[#0b57d0] px-4 text-sm font-bold text-white">Enregistrer</button>
                            </form>
                        @endif
                    </li>
                @endforeach
            </ul>
        </section>
    </div>
    <script nonce="{{ Vite::cspNonce() }}">
        document.querySelectorAll('form[data-confirmer]').forEach(function (f) {
            f.addEventListener('submit', function (e) { if (!window.confirm(f.dataset.confirmer)) e.preventDefault(); });
        });
    </script>
@endsection