@extends('layouts.public-layout')

@section("title", "Témoignages - Mission Mondiale de la Parole de Vie - Les Rachetés de l'Eternel")

@section('content')
    <!-- Page Header -->
    <section class="bg-gradient-to-r from-slate-800 via-slate-700 to-slate-800 text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">
                    <i class="fas fa-quote-right mr-3 text-amber-400"></i>Témoignages
                </h1>
                <p class="text-xl text-slate-200 max-w-2xl mx-auto">
                    Découvrez comment Dieu transforme des vies à travers notre ministère
                </p>
            </div>
        </div>
    </section>

    <!-- Success Message -->
    @if(session('success'))
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
            <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-lg shadow-md">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-2xl mr-3"></i>
                    <div>
                        <p class="font-semibold">Succès !</p>
                        <p>{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Testimonials Grid -->
    <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-2">Témoignages</h2>
                <p class="text-gray-600">Lisez les témoignages inspirants de notre famille</p>
            </div>

            @if($testimonials->count() > 0)
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach($testimonials as $testimonial)
                        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition border border-slate-200">
                            <!-- Header with gradient -->
                            <div class="bg-gradient-to-r from-slate-800 to-slate-700 p-6 text-white">
                                <div class="flex items-center mb-3">
                                    <div class="bg-amber-600 bg-opacity-20 w-14 h-14 rounded-full flex items-center justify-center mr-4">
                                        @if($testimonial->testimonial_type === 'social')
                                            <i class="fas fa-play-circle text-2xl text-amber-400"></i>
                                        @else
                                            <i class="fas fa-user text-2xl text-amber-400"></i>
                                        @endif
                                    </div>
                                    <div class="flex-1">
                                        <h3 class="font-bold text-lg">{{ $testimonial->author_name }}</h3>
                                        @if($testimonial->church)
                                            <p class="text-slate-200 text-sm">
                                                <i class="fas fa-church mr-1 text-amber-400"></i>{{ $testimonial->church->name }}
                                            </p>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Content -->
                            <div class="p-6">
                                @if($testimonial->title)
                                    <h4 class="font-bold text-gray-900 mb-3 text-lg">{{ $testimonial->title }}</h4>
                                @endif

                                @if($testimonial->testimonial_type === 'social' && $testimonial->embed_code)
                                    <!-- Social Media Embed -->
                                    <div class="mb-4 flex items-center justify-center bg-gray-100 p-4 rounded-lg">
                                        <div class="text-center">
                                            @if($testimonial->social_platform === 'youtube')
                                                <i class="fab fa-youtube text-red-600 text-4xl mb-2"></i>
                                            @elseif($testimonial->social_platform === 'instagram')
                                                <i class="fab fa-instagram text-pink-600 text-4xl mb-2"></i>
                                            @elseif($testimonial->social_platform === 'facebook')
                                                <i class="fab fa-facebook text-blue-600 text-4xl mb-2"></i>
                                            @elseif($testimonial->social_platform === 'tiktok')
                                                <i class="fab fa-tiktok text-gray-900 text-4xl mb-2"></i>
                                            @endif
                                            <p class="text-sm text-gray-600 mb-3">Témoignage vidéo</p>
                                            <a href="{{ $testimonial->video_url }}" target="_blank" class="inline-block bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 transition">
                                                <i class="fas fa-external-link-alt mr-2"></i>Voir sur {{ ucfirst($testimonial->social_platform) }}
                                            </a>
                                        </div>
                                    </div>
                                @else
                                    <!-- Text Testimonial -->
                                    <div class="mb-3">
                                        <i class="fas fa-quote-left text-amber-200 text-3xl"></i>
                                    </div>

                                    <p class="text-slate-700 italic leading-relaxed mb-4">
                                        {{ $testimonial->content }}
                                    </p>

                                    <div class="flex justify-end">
                                        <i class="fas fa-quote-right text-amber-200 text-3xl"></i>
                                    </div>
                                @endif

                                <!-- Footer -->
                                <div class="mt-4 pt-4 border-t flex items-center justify-between text-sm text-slate-500">
                                    <span>
                                        <i class="fas fa-calendar-alt mr-1"></i>
                                        {{ \Carbon\Carbon::parse($testimonial->created_at)->format('d M Y') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="bg-white rounded-lg shadow-md p-12 text-center mb-12">
                    <i class="fas fa-quote-right text-gray-300 text-5xl mb-4"></i>
                    <p class="text-gray-500 text-lg">Aucun témoignage pour le moment</p>
                </div>
            @endif
        </div>
    </section>

    <!-- Submit Testimonial Form -->
    <section class="py-16 bg-white">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold text-gray-900 mb-2">Partagez Votre Témoignage</h2>
                <p class="text-gray-600">
                    Racontez-nous comment Dieu a agi dans votre vie. Votre témoignage sera examiné avant publication.
                </p>
            </div>

            <div class="bg-gray-50 rounded-lg shadow-md p-8">
                <form action="{{ route('public.testimonial.submit') }}" method="POST" id="testimonialForm">
                    @csrf

                    <!-- Hidden field for testimonial type (always text for public) -->
                    <input type="hidden" name="testimonial_type" value="text">

                    <!-- Author Name -->
                    <div class="mb-6">
                        <label for="author_name" class="block text-slate-700 font-semibold mb-2">
                            <i class="fas fa-user mr-2 text-amber-600"></i>Votre Nom *
                        </label>
                        <input type="text"
                               id="author_name"
                               name="author_name"
                               value="{{ old('author_name') }}"
                               class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition @error('author_name') border-red-500 @enderror"
                               placeholder="Entrez votre nom complet"
                               required>
                        @error('author_name')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Church Selection -->
                    <div class="mb-6">
                        <label for="church_id" class="block text-slate-700 font-semibold mb-2">
                            <i class="fas fa-church mr-2 text-slate-600"></i>Église (Optionnel)
                        </label>
                        <select id="church_id"
                                name="church_id"
                                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition @error('church_id') border-red-500 @enderror">
                            <option value="">Sélectionnez votre église</option>
                            @foreach($churches as $church)
                                <option value="{{ $church->id }}" {{ old('church_id') == $church->id ? 'selected' : '' }}>
                                    {{ $church->name }} - {{ $church->city }}
                                </option>
                            @endforeach
                        </select>
                        @error('church_id')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Title -->
                    <div class="mb-6">
                        <label for="title" class="block text-slate-700 font-semibold mb-2">
                            <i class="fas fa-heading mr-2 text-emerald-600"></i>Titre (Optionnel)
                        </label>
                        <input type="text"
                               id="title"
                               name="title"
                               value="{{ old('title') }}"
                               class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition @error('title') border-red-500 @enderror"
                               placeholder="Donnez un titre à votre témoignage">
                        @error('title')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Text Content -->
                    <div class="mb-6">
                        <label for="content" class="block text-slate-700 font-semibold mb-2">
                            <i class="fas fa-comment-dots mr-2 text-amber-600"></i>Votre Témoignage *
                        </label>
                        <textarea id="content"
                                  name="content"
                                  rows="8"
                                  required
                                  class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition @error('content') border-red-500 @enderror"
                                  placeholder="Partagez votre témoignage ici...">{{ old('content') }}</textarea>
                        @error('content')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                        <p class="text-gray-500 text-sm mt-2">
                            <i class="fas fa-info-circle mr-1"></i>Votre témoignage sera examiné par notre équipe avant d'être publié.
                        </p>
                    </div>

                    <!-- Submit Button -->
                    <div class="flex flex-col gap-3 sm:gap-4">
                        <p class="text-gray-600 text-xs sm:text-sm text-center">
                            <i class="fas fa-asterisk text-red-500 text-xs mr-1"></i>Champs obligatoires
                        </p>
                        <button type="submit"
                                class="w-full bg-amber-600 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-semibold text-base sm:text-lg hover:bg-amber-700 transition shadow-md hover:shadow-lg">
                            <i class="fas fa-paper-plane mr-2"></i>Envoyer mon Témoignage
                        </button>
                    </div>
                </form>
            </div>

            <!-- Info Box -->
            <div class="mt-8 bg-amber-50 border-l-4 border-amber-500 p-6 rounded-lg">
                <div class="flex items-start">
                    <i class="fas fa-lightbulb text-amber-600 text-2xl mr-4 mt-1"></i>
                    <div>
                        <h4 class="font-semibold text-slate-900 mb-2">Conseils pour un bon témoignage</h4>
                        <ul class="text-slate-700 space-y-1 text-sm">
                            <li><i class="fas fa-check text-amber-600 mr-2"></i>Soyez authentique et sincère</li>
                            <li><i class="fas fa-check text-amber-600 mr-2"></i>Partagez des détails concrets de votre expérience</li>
                            <li><i class="fas fa-check text-amber-600 mr-2"></i>Expliquez comment Dieu a agi dans votre vie</li>
                            <li><i class="fas fa-check text-amber-600 mr-2"></i>Inspirez les autres par votre récit</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection