@extends('app')

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

@section('content')
    <section class="container mx-auto px-4 py-8 sm:py-12">
        <div class="max-w-2xl mx-auto">
            <!-- En-tête -->
            <div class="mb-6 sm:mb-8">
                <h1 class="text-2xl sm:text-4xl font-bold text-gray-900 mb-2">💡 Proposer une amélioration</h1>
                <p class="text-sm sm:text-base 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 text-sm sm:text-base">✅ {{ session('success') }}</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-5 sm:p-8">
                <form action="{{ route('suggestions.store') }}" method="POST" class="space-y-5 sm: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 text-base 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 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 text-base 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>
                        <div class="flex items-baseline justify-between mb-2">
                            <label for="description" class="block text-sm font-bold text-gray-700">Description détaillée</label>
                            <span id="desc-count" class="text-xs text-gray-400 tabular-nums">0 / 5000</span>
                        </div>
                        <textarea
                            id="description"
                            name="description"
                            required
                            minlength="10"
                            maxlength="5000"
                            rows="6"
                            placeholder="Décrivez précisément votre proposition : quoi, où, pourquoi…"
                            class="w-full px-4 py-3 text-base 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 : empilés pleine largeur sur mobile, en ligne sur desktop -->
                    <div class="flex flex-col sm:flex-row gap-3 pt-2">
                        <button type="submit" class="w-full sm:w-auto px-8 py-3 gradient-niagara text-white font-bold rounded-lg hover:shadow-lg transition-smooth duration-200 text-center">
                            📨 Envoyer ma suggestion
                        </button>
                        <a href="{{ route('home') }}" class="w-full sm:w-auto px-8 py-3 bg-gray-200 text-gray-900 font-bold rounded-lg hover:bg-gray-300 transition-smooth duration-200 text-center">
                            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

@push('scripts')
    <script>
        (function () {
            const ta = document.getElementById('description');
            const compteur = document.getElementById('desc-count');
            if (!ta || !compteur) return;
            const maj = () => { compteur.textContent = ta.value.length + ' / 5000'; };
            ta.addEventListener('input', maj);
            maj();
        })();
    </script>
@endpush