@extends('layouts.app')

@section('title', 'Nouvelle demande')

@section('content')
<div class="max-w-2xl mx-auto space-y-8">

    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-[#161616] mb-2">Nouvelle demande</h1>
            <p class="text-slate-600">
                Une idée, une correction, un bug ? Votre demande crée un ticket de suivi que
                vous pourrez consulter à tout moment.
            </p>
        </div>
        <a href="{{ route('tickets.index') }}" class="shrink-0 text-sm font-bold text-[--fr-blue] hover:underline">
            ← Mes tickets
        </a>
    </div>

    @if ($errors->any())
        <div class="p-4 bg-red-50 border border-red-200 rounded-lg space-y-1">
            @foreach ($errors->all() as $error)
                <p class="text-red-700 text-sm">{{ $error }}</p>
            @endforeach
        </div>
    @endif

    <div class="bg-white p-8 border border-slate-200 shadow-sm">
        <form action="{{ route('tickets.store') }}" method="POST" class="space-y-6">
            @csrf

            <div>
                <label for="type" class="block text-sm font-bold text-slate-700 mb-2">Type de demande</label>
                <select id="type" name="type" required
                    class="w-full border-slate-200 rounded-lg focus:ring-[--fr-blue] focus:border-[--fr-blue] @error('type') border-red-500 @enderror">
                    @php($typeChoisi = old('type'))
                    <option value="Modification" @selected($typeChoisi === 'Modification')>✏️ Modification d'un contenu existant</option>
                    <option value="Ajout" @selected($typeChoisi === 'Ajout')>➕ Ajout d'un contenu / d'une fonctionnalité</option>
                    <option value="Correction" @selected($typeChoisi === 'Correction')>🐛 Correction d'une erreur / d'un bug</option>
                </select>
            </div>

            <div>
                <label for="titre" class="block text-sm font-bold text-slate-700 mb-2">Titre</label>
                <input type="text" id="titre" name="titre" required minlength="5" maxlength="120"
                    value="{{ old('titre') }}" placeholder="Résumez votre demande en une phrase"
                    class="w-full border-slate-200 rounded-lg focus:ring-[--fr-blue] focus:border-[--fr-blue] @error('titre') border-red-500 @enderror">
            </div>

            <div>
                <label for="description" class="block text-sm font-bold text-slate-700 mb-2">Description détaillée</label>
                <textarea id="description" name="description" required minlength="10" maxlength="5000" rows="8"
                    placeholder="Décrivez précisément votre demande : quoi, où, pourquoi…"
                    class="w-full border-slate-200 rounded-lg focus:ring-[--fr-blue] focus:border-[--fr-blue] @error('description') border-red-500 @enderror">{{ old('description') }}</textarea>
            </div>

            <div class="flex gap-4 pt-2">
                <button type="submit"
                    class="px-8 py-3 bg-[#000091] text-white font-bold rounded-sm hover:bg-blue-800 shadow-md transition-all uppercase tracking-widest">
                    Envoyer ma demande
                </button>
                <a href="{{ route('tickets.index') }}"
                    class="px-8 py-3 bg-slate-200 text-slate-900 font-bold rounded-sm hover:bg-slate-300 transition-all">
                    Annuler
                </a>
            </div>
        </form>
    </div>
</div>
@endsection