{{-- Formulaire de création de nouvelle confession - Interface moderne Tailwind CSS --}}
@extends("layouts.base")

{{-- * Titre de la page pour la création de confession --}}
@section("title", __("confession_create.title"))

{{-- * Section principale avec formulaire de création --}}
@section("content")
    {{-- * Container centré avec largeur responsive --}}
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {{-- * Carte principale du formulaire avec design moderne --}}
        <div
            class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden"
        >
            {{-- * Header du formulaire avec dégradé et icône --}}
            <div
                class="px-8 py-6 bg-gradient-to-r from-blue-600 to-indigo-600 text-white"
            >
                <div class="flex items-center">
                    <span class="text-2xl mr-3">✍️</span>
                    <h1 class="text-2xl font-bold">
                        {{ __("confession_create.header") }}
                    </h1>
                </div>
            </div>

            {{-- * Corps du formulaire avec espacement moderne --}}
            <div class="px-8 py-8">
                {{-- * Formulaire de soumission avec méthode POST --}}
                <form
                    method="POST"
                    action="{{ route("confession.store") }}"
                    class="space-y-6"
                >
                    @csrf

                    {{-- * Champ titre avec validation et design moderne --}}
                    <div class="space-y-2">
                        <label
                            for="title"
                            class="block text-sm font-semibold text-gray-700"
                        >
                            {{ __("confession_create.label_title") }}
                        </label>
                        <input
                            type="text"
                            id="title"
                            name="title"
                            class="w-full px-4 py-3 border {{ $errors->has("title") ? "border-red-300 focus:ring-red-500" : "border-gray-300 focus:ring-blue-500" }} rounded-lg focus:ring-2 focus:border-transparent transition-all duration-200 text-gray-900 placeholder-gray-500"
                            value="{{ old("title") }}"
                            placeholder="{{ __("confessions.title_placeholder") }}"
                            required
                        />
                        {{-- * Affichage des erreurs de validation pour le titre --}}
                        @error("title")
                            <div class="flex items-center text-red-600 text-sm">
                                <svg
                                    class="w-4 h-4 mr-1"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                    />
                                </svg>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    {{-- * Sélecteur de catégorie avec design moderne --}}
                    <div class="space-y-2">
                        <label
                            for="category_id"
                            class="block text-sm font-semibold text-gray-700"
                        >
                            {{ __("confession_create.label_category") }}
                        </label>
                        <div class="relative">
                            <select
                                id="category_id"
                                name="category_id"
                                class="w-full px-4 py-3 border {{ $errors->has("category_id") ? "border-red-300 focus:ring-red-500" : "border-gray-300 focus:ring-blue-500" }} rounded-lg focus:ring-2 focus:border-transparent transition-all duration-200 text-gray-900 bg-white appearance-none"
                                required
                            >
                                <option value="">
                                    {{ __("confession_create.choose_category") }}
                                </option>
                                {{-- * Boucle sur les catégories avec option sélectionnée --}}
                                @foreach ($categories as $category)
                                    <option
                                        value="{{ $category->id }}"
                                        {{ old("category_id") == $category->id ? "selected" : "" }}
                                    >
                                        {{ $category->translatedName }}
                                    </option>
                                @endforeach
                            </select>
                            {{-- * Icône de dropdown personnalisée --}}
                            <div
                                class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none"
                            >
                                <svg
                                    class="w-5 h-5 text-gray-400"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M19 9l-7 7-7-7"
                                    />
                                </svg>
                            </div>
                        </div>
                        {{-- * Affichage des erreurs de validation pour la catégorie --}}
                        @error("category_id")
                            <div class="flex items-center text-red-600 text-sm">
                                <svg
                                    class="w-4 h-4 mr-1"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                    />
                                </svg>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    {{-- * Sélecteur de langue avec design moderne --}}
                    <div class="space-y-2">
                        <label
                            for="language"
                            class="block text-sm font-semibold text-gray-700"
                        >
                            {{ __("confession_create.label_language") }}
                        </label>
                        <div class="relative">
                            <select
                                id="language"
                                name="language"
                                class="w-full px-4 py-3 border {{ $errors->has("language") ? "border-red-300 focus:ring-red-500" : "border-gray-300 focus:ring-blue-500" }} rounded-lg focus:ring-2 focus:border-transparent transition-all duration-200 text-gray-900 bg-white appearance-none"
                                required
                            >
                                {{-- * Boucle sur les langues disponibles avec langue actuelle sélectionnée --}}
                                @foreach (\App\Models\Confession::getAvailableLanguages() as $code => $label)
                                    <option
                                        value="{{ $code }}"
                                        {{ old("language", app()->getLocale()) == $code ? "selected" : "" }}
                                    >
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            {{-- * Icône de dropdown personnalisée --}}
                            <div
                                class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none"
                            >
                                <svg
                                    class="w-5 h-5 text-gray-400"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M19 9l-7 7-7-7"
                                    />
                                </svg>
                            </div>
                        </div>
                        {{-- * Affichage des erreurs de validation pour la langue --}}
                        @error("language")
                            <div class="flex items-center text-red-600 text-sm">
                                <svg
                                    class="w-4 h-4 mr-1"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                    />
                                </svg>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    {{-- * Zone de texte pour la description avec compteur de caractères --}}
                    <div class="space-y-2">
                        <label
                            for="description"
                            class="block text-sm font-semibold text-gray-700"
                        >
                            {{ __("confession_create.label_description") }}
                        </label>
                        <div class="relative">
                            <textarea
                                id="description"
                                name="description"
                                rows="8"
                                class="w-full px-4 py-3 border {{ $errors->has("description") ? "border-red-300 focus:ring-red-500" : "border-gray-300 focus:ring-blue-500" }} rounded-lg focus:ring-2 focus:border-transparent transition-all duration-200 text-gray-900 placeholder-gray-500 resize-none"
                                placeholder="{{ __("confessions.description_placeholder") }}"
                                required
                            >
{{ old("description") }}</textarea
                            >

                            {{-- * Compteur de caractères dynamique --}}
                            <div
                                class="absolute bottom-3 right-3 text-xs text-gray-400 bg-white px-2 py-1 rounded shadow-sm"
                            >
                                <span id="char-count">0</span>
                                caractères
                            </div>
                        </div>
                        {{-- * Affichage des erreurs de validation pour la description --}}
                        @error("description")
                            <div class="flex items-center text-red-600 text-sm">
                                <svg
                                    class="w-4 h-4 mr-1"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                    />
                                </svg>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    {{-- * Section de soumission avec bouton moderne --}}
                    <div class="pt-6 border-t border-gray-200">
                        <div class="flex justify-end">
                            <button
                                type="submit"
                                class="inline-flex items-center px-8 py-3 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
                            >
                                <svg
                                    class="w-5 h-5 mr-2"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M12 6v6m0 0v6m0-6h6m-6 0H6"
                                    />
                                </svg>
                                {{ __("confession_create.submit") }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- * Section d'informations et conseils --}}
        <div class="mt-8 grid md:grid-cols-2 gap-6">
            {{-- * Conseils pour une bonne confession --}}
            <div class="bg-blue-50 border border-blue-200 rounded-xl p-6">
                <h3
                    class="text-lg font-semibold text-blue-900 mb-4 flex items-center"
                >
                    <svg
                        class="w-5 h-5 mr-2"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                    </svg>
                    Conseils pour une bonne confession
                </h3>
                <ul class="space-y-2 text-blue-800 text-sm">
                    <li class="flex items-start">
                        <span class="text-blue-600 mr-2">•</span>
                        Soyez authentique et honnête dans votre récit
                    </li>
                    <li class="flex items-start">
                        <span class="text-blue-600 mr-2">•</span>
                        Choisissez la catégorie qui correspond le mieux
                    </li>
                    <li class="flex items-start">
                        <span class="text-blue-600 mr-2">•</span>
                        Respectez les autres utilisateurs dans vos propos
                    </li>
                </ul>
            </div>

            {{-- * Rappel de confidentialité --}}
            <div class="bg-green-50 border border-green-200 rounded-xl p-6">
                <h3
                    class="text-lg font-semibold text-green-900 mb-4 flex items-center"
                >
                    <svg
                        class="w-5 h-5 mr-2"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                        />
                    </svg>
                    {{ __("confessions.anonymity_protected") }}
                </h3>
                <p class="text-green-800 text-sm leading-relaxed">
                    {{ __("confessions.anonymity_description") }}
                </p>
            </div>
        </div>
    </div>

    {{-- * Script pour le compteur de caractères dynamique --}}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const textarea = document.getElementById('description');
            const charCount = document.getElementById('char-count');

            // Fonction pour mettre à jour le compteur
            function updateCharCount() {
                const count = textarea.value.length;
                charCount.textContent = count.toLocaleString();

                // Changer la couleur selon la longueur
                if (count > 500) {
                    charCount.className = 'text-green-600 font-medium';
                } else if (count > 200) {
                    charCount.className = 'text-blue-600';
                } else {
                    charCount.className = 'text-gray-400';
                }
            }

            // Écouter les changements dans le textarea
            textarea.addEventListener('input', updateCharCount);
            textarea.addEventListener('paste', function () {
                setTimeout(updateCharCount, 10);
            });

            // Initialiser le compteur
            updateCharCount();
        });
    </script>
@endsection