@extends('app')

@section('title', 'Proposer une amélioration - (RE)Sources Relationnelles')

@section('content')
    <section class="container mx-auto px-4 py-12">
        <div class="max-w-2xl mx-auto">
            <!-- En-tête -->
            <div class="mb-8">
                <h1 class="text-4xl font-bold text-gray-900 mb-2">💡 Proposer une amélioration</h1>
                <p class="text-gray-600">
                    Une idée, une correction, un ajout ? Votre suggestion est directement transmise à
                    l'équipe sous forme de ticket. Merci de votre contribution !
                </p>
            </div>

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

            <!-- Compte Gitea créé (identifiants affichés une seule fois) -->
            @if (session('gitea_compte'))
                @php($compte = session('gitea_compte'))
                <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <p class="text-blue-800 font-semibold mb-2">🎉 Un compte Gitea a été créé pour vous !</p>
                    <p class="text-blue-700 text-sm mb-2">
                        Vous pouvez maintenant suivre, commenter et créer vos tickets directement sur
                        <a href="{{ $compte['url'] }}" target="_blank" rel="noopener" class="underline font-semibold">{{ $compte['url'] }}</a>.
                    </p>
                    <p class="text-blue-800 text-sm">
                        Identifiant : <strong>{{ $compte['username'] }}</strong><br>
                        Mot de passe temporaire : <strong>{{ $compte['mot_de_passe'] }}</strong>
                    </p>
                    <p class="text-blue-700 text-xs mt-2">
                        ⚠️ Notez ce mot de passe dès maintenant : il ne sera plus jamais affiché.
                        Il vous sera demandé de le changer à votre première connexion.
                    </p>
                </div>
            @endif

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

            <div class="bg-white rounded-xl border border-gray-200 p-8">
                <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 mb-2 text-gray-700">Type de demande</label>
                        <select
                            id="type"
                            name="type"
                            required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @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 nouveau contenu / 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 mb-2 text-gray-700">Titre</label>
                        <input
                            type="text"
                            id="titre"
                            name="titre"
                            required
                            minlength="5"
                            maxlength="120"
                            value="{{ old('titre') }}"
                            placeholder="Résumez votre suggestion en une phrase"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @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 mb-2 text-gray-700">Description détaillée</label>
                        <textarea
                            id="description"
                            name="description"
                            required
                            minlength="10"
                            maxlength="5000"
                            rows="8"
                            placeholder="Décrivez précisément votre proposition : quoi, où, pourquoi…"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @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 gradient-niagara text-white font-bold rounded-lg hover:shadow-lg transition-smooth duration-200">
                            📨 Envoyer ma suggestion
                        </button>
                        <a href="{{ route('home') }}" class="px-8 py-3 bg-gray-200 text-gray-900 font-bold rounded-lg hover:bg-gray-300 transition-smooth duration-200">
                            Annuler
                        </a>
                    </div>
                </form>
            </div>

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