@extends('layouts.site')

@section('title', 'Remise de Devoir - ' . $assignment->title)

@section('content')
 <div class="bg-slate-50 min-h-screen p-8 lg:p-12">
    <div class="max-w-2xl mx-auto">
        <a href="{{ route('dashboard') }}" class="inline-flex items-center gap-2 text-slate-500 hover:text-blue-600 transition-colors mb-8 group">
            <svg class="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
            Retour au Dashboard
        </a>

        <div class="bg-white p-8 lg:p-12 rounded-3xl shadow-xl shadow-blue-500/5 border border-slate-100">
            <div class="mb-10">
                <span class="text-blue-600 font-black text-xs uppercase tracking-widest mb-1 block">{{ $assignment->course->title }}</span>
                <h1 class="text-3xl font-black text-slate-900 leading-tight">{{ $assignment->title }}</h1>
                <div class="mt-4 p-4 bg-red-50 text-red-600 rounded-xl text-sm font-bold inline-flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    À rendre avant le {{ \Carbon\Carbon::parse($assignment->deadline)->format('d/m/Y à H:i') }}
                </div>
            </div>

            <div class="prose prose-slate mb-10">
                <h3 class="text-lg font-bold text-slate-800 mb-2">Consignes :</h3>
                <p class="text-slate-600 leading-relaxed">{{ $assignment->description }}</p>
            </div>

            <form action="{{ route('assignments.submit', $assignment) }}" method="POST" enctype="multipart/form-data" class="space-y-6 pt-8 border-t border-slate-100">
                @csrf
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Votre message (optionnel)</label>
                    <textarea name="content" rows="4" placeholder="Ajoutez un message à l'attention du professeur..." class="w-full px-5 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all outline-none"></textarea>
                </div>

                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Fichier du devoir</label>
                    <div class="relative group">
                        <input type="file" name="file" class="hidden" id="file-upload">
                        <label for="file-upload" class="flex flex-col items-center justify-center w-full h-32 px-4 transition bg-white border-2 border-gray-300 border-dashed rounded-2xl appearance-none cursor-pointer hover:border-blue-400 focus:outline-none group-hover:bg-slate-50">
                            <span class="flex items-center space-x-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                                </svg>
                                <span class="font-medium text-gray-600">
                                    Cliquez pour choisir un fichier ou déposez-le ici
                                </span>
                            </span>
                        </label>
                    </div>
                    <p class="mt-2 text-xs text-slate-400">PDF, ZIP, DOC (max. 10MB)</p>
                </div>

                <div class="pt-4">
                    <button type="submit" class="w-full py-5 bg-slate-900 text-white font-black rounded-2xl shadow-xl shadow-slate-900/10 hover:bg-slate-800 hover:-translate-y-1 transition-all active:scale-95">
                        Soumettre mon travail
                    </button>
                </div>
            </form>
        </div>
    </div>
 </div>
@endsection