@extends('layouts.app')

@section('title', 'Signaler / Proposer une amélioration')

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

    <!-- En-tête -->
    <div>
        <h1 class="text-3xl font-bold text-[#161616] mb-2">Signaler ou proposer une amélioration</h1>
        <p class="text-slate-600">
            Une idée, une correction, un bug à signaler ? Votre demande est directement transmise à
            l'équipe sous forme de ticket de suivi. Merci de votre contribution !
        </p>
    </div>

    <!-- Message de succès -->
    @if (session('success'))
        <div class="p-4 bg-green-50 border border-green-200 rounded-lg">
            <p class="text-green-700 font-semibold">✅ {{ session('success') }}</p>
        </div>
    @endif

    <!-- Erreurs -->
    @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('suggestions.store') }}" method="POST" class="space-y-6">
            @csrf

            <!-- Type de demande -->
            <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>
                @error('type')
                    <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Titre -->
            <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">
                @error('titre')
                    <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Description -->
            <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>
                @error('description')
                    <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Boutons -->
            <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('home') }}"
                    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>

    <p class="text-xs text-slate-500">
        ℹ️ Votre demande sera examinée par l'équipe avant toute prise en compte. Merci de rester courtois et constructif.
    </p>
</div>
@endsection