@extends('layouts.app')

@section('titre', 'Devoirs · '.$classe->nom)

@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.show', $classe) }}" class="underline underline-offset-4">{{ $classe->nom }}</a></p>
        <h1 class="mt-1 text-4xl font-extrabold tracking-tight">Devoirs maison</h1>
        <p class="mt-2 font-semibold">Les élèves rendent un texte libre (pas de fichier pour l'instant) avant l'échéance. Passée l'échéance, le rendu n'est plus possible.</p>

        <section class="mt-8 rounded-2xl border border-[#e3e5e8] bg-white p-6" aria-labelledby="t-nouveau">
            <h2 id="t-nouveau" class="text-xl font-extrabold">Nouveau devoir</h2>
            @error('titre')<p class="mt-2 font-bold text-[#A63D2A]">{{ $message }}</p>@enderror
            @error('consigne')<p class="mt-2 font-bold text-[#A63D2A]">{{ $message }}</p>@enderror
            @error('echeance')<p class="mt-2 font-bold text-[#A63D2A]">L'échéance doit être dans le futur.</p>@enderror
            <form action="{{ route('mes-classes.devoirs.store', $classe) }}" method="post" class="mt-4 grid gap-3">
                @csrf
                <input name="titre" required placeholder="Ex. Plan d'adressage" class="rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold">
                <textarea name="consigne" required rows="4" placeholder="Consigne" class="rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold"></textarea>
                <label class="grid gap-1 font-bold">Échéance<input type="datetime-local" name="echeance" required class="w-fit rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold"></label>
                <button type="submit" class="mt-2 inline-flex h-11 w-fit items-center rounded-full bg-[#0b57d0] px-5 font-bold text-white">Créer</button>
            </form>
        </section>

        <section class="mt-8" aria-labelledby="t-liste">
            <h2 id="t-liste" class="text-xl font-extrabold">Devoirs ({{ $devoirs->count() }})</h2>
            @if ($devoirs->isEmpty())
                <p class="mt-2 font-semibold">Aucun devoir pour l'instant.</p>
            @else
                <ul class="mt-4 grid gap-3">
                    @foreach ($devoirs as $devoir)
                        <li>
                            <a href="{{ route('mes-classes.devoirs.show', [$classe, $devoir]) }}" class="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-[#e3e5e8] bg-white p-5 hover:bg-[#f8f9fa]">
                                <span>
                                    <span class="block text-lg font-extrabold">{{ $devoir->titre }}</span>
                                    <span class="block font-mono text-sm font-semibold {{ $devoir->echeanceDepassee() ? 'text-[#A63D2A]' : '' }}">{{ $devoir->echeanceDepassee() ? 'Échéance dépassée' : 'À rendre' }} {{ $devoir->echeance->timezone(config('app.fuseau_utilisateurs'))->translatedFormat('d/m/Y H:i') }}</span>
                                </span>
                                <span class="font-mono text-sm font-semibold">{{ $devoir->rendus_count }}/{{ $classe->eleves->count() }} rendu(s)</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>
    </div>
@endsection