@extends('layouts.app')

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

@section('contenu')
    <div class="mx-auto max-w-3xl px-5 py-14 lg:px-10">
        <p class="font-mono text-sm font-semibold"><a href="{{ route('eleve') }}" class="underline underline-offset-4">Mon espace</a></p>
        <h1 class="mt-1 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>
        <p class="mt-4 whitespace-pre-wrap rounded-2xl border border-[#e3e5e8] bg-white p-5 font-semibold">{{ $devoir->consigne }}</p>

        @if (session('rendu_envoye'))
            <p class="mt-4 rounded-2xl border border-[#e3e5e8] bg-[#e6f4ea] p-4 font-semibold">Rendu envoyé.</p>
        @endif

        @if ($rendu && $rendu->note !== null)
            <p class="mt-6 font-mono text-2xl font-extrabold">Note : {{ $rendu->note }}/20</p>
        @endif

        @if ($devoir->echeanceDepassee() && ! $rendu)
            <p class="mt-6 rounded-2xl border border-[#A63D2A] bg-[#fce8e6] p-5 font-bold text-[#A63D2A]">Échéance dépassée : tu n'as pas rendu ce devoir.</p>
        @else
            <section class="mt-6 rounded-2xl border border-[#e3e5e8] bg-white p-6" aria-labelledby="t-rendre">
                <h2 id="t-rendre" class="text-xl font-extrabold">{{ $rendu ? 'Modifier mon rendu' : 'Rendre ce devoir' }}</h2>
                @if ($rendu)
                    <p class="mt-2 font-semibold text-[#5f6368]">Rendu le {{ $rendu->rendu_a->timezone(config('app.fuseau_utilisateurs'))->translatedFormat('d/m/Y H:i') }}. Un nouvel envoi remplace celui-ci{{ $devoir->echeanceDepassee() ? '' : ', jusqu\'à l\'échéance' }}.</p>
                @endif
                @error('reponse')<p class="mt-2 font-bold text-[#A63D2A]">{{ $message }}</p>@enderror
                @if (! $devoir->echeanceDepassee())
                    <form action="{{ route('devoirs.eleve.rendre', $devoir) }}" method="post" class="mt-4 grid gap-3">
                        @csrf
                        <textarea name="reponse" required rows="8" class="rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold">{{ old('reponse', $rendu->reponse ?? '') }}</textarea>
                        <button type="submit" class="mt-2 inline-flex h-11 w-fit items-center rounded-full bg-black px-5 font-bold text-white">Envoyer</button>
                    </form>
                @elseif ($rendu)
                    <p class="mt-4 whitespace-pre-wrap font-semibold">{{ $rendu->reponse }}</p>
                @endif
            </section>
        @endif
    </div>
@endsection