@extends('layouts.app')

@section('titre', 'Mes devoirs')

@section('contenu')
    <div class="mx-auto max-w-3xl px-5 py-10">
        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Mes devoirs</h1>

        @if ($sessionQuiz)
            <section class="mt-8">
                <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">QCM en cours</h2>
                <p class="mt-2 rounded-2xl border p-4 font-semibold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">
                    Un quiz flash est en cours. Rends-toi sur ton tableau de bord pour y répondre.
                </p>
            </section>
        @endif

        @if ($seancesOuvertes->isNotEmpty())
            <section class="mt-8">
                <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">TP disponibles</h2>
                <ul class="mt-3 grid gap-3">
                    @foreach ($seancesOuvertes as $seance)
                        <li class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
                            <span class="font-bold" style="color:var(--sy-ink)">{{ $seance->lab->titre }}</span>
                            <form action="{{ route('seances.rejoindre', $seance) }}" method="post">
                                @csrf
                                <button type="submit" class="inline-flex h-10 items-center rounded-full px-4 font-bold text-white" style="background:var(--sy-blue)">Rejoindre</button>
                            </form>
                        </li>
                    @endforeach
                </ul>
            </section>
        @endif

        <section class="mt-8">
            <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">Devoirs maison</h2>
            @if ($devoirs->isEmpty())
                <p class="mt-3 font-semibold" style="color:var(--sy-muted)">Aucun devoir maison pour l'instant.</p>
            @else
                <ul class="mt-3 grid gap-3">
                    @foreach ($devoirs as $devoir)
                        @php($monRendu = $devoir->rendus->first())
                        <li>
                            <a href="{{ route('devoirs.eleve.show', $devoir) }}" class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
                                <span class="font-bold" style="color:var(--sy-ink)">{{ $devoir->titre }}</span>
                                <span class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">
                                    @if ($monRendu) Rendu
                                    @elseif ($devoir->echeanceDepassee()) Non rendu, échéance dépassée
                                    @else À rendre avant le {{ $devoir->echeance->timezone(config('app.fuseau_utilisateurs'))->translatedFormat('d/m H:i') }}
                                    @endif
                                </span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>
    </div>
@endsection