@extends('layouts.admin-layout')

@section('title', 'Ajouter un Témoignage')

@section('content')
    <div class="p-6">
        <!-- Page Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">Ajouter un Témoignage</h1>
            <p class="mt-2 text-gray-600">Créez un nouveau témoignage</p>
        </div>

        <div class="max-w-4xl mx-auto">
            <div class="bg-white overflow-hidden shadow-lg sm:rounded-xl border border-gray-200">
                <div class="p-8 text-gray-900">
                    <form action="{{ route('admin.testimonials.store') }}" method="POST" id="testimonialForm">
                        @csrf

                        <!-- Testimonial Type Selection -->
                        <div class="mb-6">
                            <label class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-purple-50 px-4 py-2 rounded-lg border-l-4 border-purple-500">
                                <i class="fas fa-layer-group text-purple-600 mr-2"></i>
                                <span>Type de témoignage</span>
                                <span class="text-red-500 ml-1">*</span>
                            </label>
                            <div class="grid grid-cols-2 gap-4">
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="testimonial_type" value="text" class="peer sr-only"
                                           {{ old('testimonial_type', 'text') === 'text' ? 'checked' : '' }}
                                           onchange="toggleTestimonialType()">
                                    <div class="bg-white border-2 border-gray-300 rounded-lg p-4 peer-checked:border-blue-600 peer-checked:bg-blue-50 transition hover:border-blue-400">
                                        <div class="text-center">
                                            <i class="fas fa-comment-dots text-3xl text-blue-600 mb-2"></i>
                                            <p class="font-semibold text-gray-900">Texte</p>
                                            <p class="text-xs text-gray-600 mt-1">Témoignage écrit</p>
                                        </div>
                                    </div>
                                </label>
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="testimonial_type" value="social" class="peer sr-only"
                                           {{ old('testimonial_type') === 'social' ? 'checked' : '' }}
                                           onchange="toggleTestimonialType()">
                                    <div class="bg-white border-2 border-gray-300 rounded-lg p-4 peer-checked:border-purple-600 peer-checked:bg-purple-50 transition hover:border-purple-400">
                                        <div class="text-center">
                                            <i class="fas fa-video text-3xl text-purple-600 mb-2"></i>
                                            <p class="font-semibold text-gray-900">Vidéo</p>
                                            <p class="text-xs text-gray-600 mt-1">Depuis les réseaux sociaux</p>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            @error('testimonial_type')
                                <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                    <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                </p>
                            @enderror
                        </div>

                        <!-- Author Name -->
                        <div class="mb-6">
                            <label for="author_name" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-blue-50 px-4 py-2 rounded-lg border-l-4 border-blue-500">
                                <i class="fas fa-user text-blue-600 mr-2"></i>
                                <span>Nom de l'auteur</span>
                                <span class="text-red-500 ml-1">*</span>
                            </label>
                            <input type="text" name="author_name" id="author_name" value="{{ old('author_name') }}" required
                                class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base"
                                placeholder="Entrez le nom complet de l'auteur">
                            @error('author_name')
                                <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                    <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                </p>
                            @enderror
                        </div>

                        <!-- Title -->
                        <div class="mb-6">
                            <label for="title" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-green-50 px-4 py-2 rounded-lg border-l-4 border-green-500">
                                <i class="fas fa-heading text-green-600 mr-2"></i>
                                <span>Titre</span>
                                <span class="text-gray-500 ml-1 text-xs">(Optionnel)</span>
                            </label>
                            <input type="text" name="title" id="title" value="{{ old('title') }}"
                                class="w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-2 focus:ring-green-500 text-base"
                                placeholder="Donnez un titre au témoignage">
                            @error('title')
                                <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                    <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                </p>
                            @enderror
                        </div>

                        <!-- Church Selection -->
                        <div class="mb-6">
                            <label for="church_id" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-indigo-50 px-4 py-2 rounded-lg border-l-4 border-indigo-500">
                                <i class="fas fa-church text-indigo-600 mr-2"></i>
                                <span>Église</span>
                                <span class="text-gray-500 ml-1 text-xs">(Optionnel)</span>
                            </label>
                            <select name="church_id" id="church_id"
                                class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 text-base">
                                <option value="">Sélectionner une é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="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                    <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                </p>
                            @enderror
                        </div>

                        <!-- Text Content (shown when type is text) -->
                        <div class="mb-6" id="textContentDiv">
                            <label for="content" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-orange-50 px-4 py-2 rounded-lg border-l-4 border-orange-500">
                                <i class="fas fa-comment-dots text-orange-600 mr-2"></i>
                                <span>Contenu du témoignage</span>
                                <span class="text-red-500 ml-1">*</span>
                            </label>
                            <textarea name="content" id="content" rows="8"
                                class="w-full rounded-lg border-gray-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-500 text-base"
                                placeholder="Écrivez le contenu du témoignage ici...">{{ old('content') }}</textarea>
                            @error('content')
                                <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                    <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                </p>
                            @enderror
                        </div>

                        <!-- Social Media Section (hidden by default) -->
                        <div class="mb-6 hidden" id="socialMediaDiv">
                            <!-- Platform Selection -->
                            <div class="mb-4">
                                <label class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-purple-50 px-4 py-2 rounded-lg border-l-4 border-purple-500">
                                    <i class="fas fa-share-alt text-purple-600 mr-2"></i>
                                    <span>Plateforme</span>
                                    <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                                    <label class="relative cursor-pointer">
                                        <input type="radio" name="social_platform" value="youtube" class="peer sr-only" {{ old('social_platform') === 'youtube' ? 'checked' : '' }}>
                                        <div class="bg-white border-2 border-gray-300 rounded-lg p-3 peer-checked:border-red-600 peer-checked:bg-red-50 transition hover:border-red-400">
                                            <div class="text-center">
                                                <i class="fab fa-youtube text-2xl text-red-600 mb-1"></i>
                                                <p class="text-xs font-semibold text-gray-900">YouTube</p>
                                            </div>
                                        </div>
                                    </label>
                                    <label class="relative cursor-pointer">
                                        <input type="radio" name="social_platform" value="instagram" class="peer sr-only" {{ old('social_platform') === 'instagram' ? 'checked' : '' }}>
                                        <div class="bg-white border-2 border-gray-300 rounded-lg p-3 peer-checked:border-pink-600 peer-checked:bg-pink-50 transition hover:border-pink-400">
                                            <div class="text-center">
                                                <i class="fab fa-instagram text-2xl text-pink-600 mb-1"></i>
                                                <p class="text-xs font-semibold text-gray-900">Instagram</p>
                                            </div>
                                        </div>
                                    </label>
                                    <label class="relative cursor-pointer">
                                        <input type="radio" name="social_platform" value="facebook" class="peer sr-only" {{ old('social_platform') === 'facebook' ? 'checked' : '' }}>
                                        <div class="bg-white border-2 border-gray-300 rounded-lg p-3 peer-checked:border-blue-600 peer-checked:bg-blue-50 transition hover:border-blue-400">
                                            <div class="text-center">
                                                <i class="fab fa-facebook text-2xl text-blue-600 mb-1"></i>
                                                <p class="text-xs font-semibold text-gray-900">Facebook</p>
                                            </div>
                                        </div>
                                    </label>
                                    <label class="relative cursor-pointer">
                                        <input type="radio" name="social_platform" value="tiktok" class="peer sr-only" {{ old('social_platform') === 'tiktok' ? 'checked' : '' }}>
                                        <div class="bg-white border-2 border-gray-300 rounded-lg p-3 peer-checked:border-gray-900 peer-checked:bg-gray-100 transition hover:border-gray-700">
                                            <div class="text-center">
                                                <i class="fab fa-tiktok text-2xl text-gray-900 mb-1"></i>
                                                <p class="text-xs font-semibold text-gray-900">TikTok</p>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                @error('social_platform')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            <!-- Video URL -->
                            <div>
                                <label for="video_url" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-purple-50 px-4 py-2 rounded-lg border-l-4 border-purple-500">
                                    <i class="fas fa-link text-purple-600 mr-2"></i>
                                    <span>URL de la vidéo</span>
                                    <span class="text-red-500 ml-1">*</span>
                                </label>
                                <input type="url" name="video_url" id="video_url" value="{{ old('video_url') }}"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-2 focus:ring-purple-500 text-base"
                                    placeholder="https://youtube.com/watch?v=xxxxx ou https://instagram.com/p/xxxxx">
                                @error('video_url')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                                <p class="text-gray-500 text-sm mt-2 flex items-center">
                                    <i class="fas fa-info-circle mr-2"></i>
                                    Collez l'URL complète de la vidéo depuis la plateforme sélectionnée
                                </p>
                            </div>
                        </div>

                        <!-- Status -->
                        <div class="mb-6">
                            <label for="status" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-pink-50 px-4 py-2 rounded-lg border-l-4 border-pink-500">
                                <i class="fas fa-toggle-on text-pink-600 mr-2"></i>
                                <span>Statut</span>
                                <span class="text-red-500 ml-1">*</span>
                            </label>
                            <select name="status" id="status" required
                                class="w-full rounded-lg border-gray-300 shadow-sm focus:border-pink-500 focus:ring-2 focus:ring-pink-500 text-base">
                                <option value="pending" {{ old('status', 'pending') === 'pending' ? 'selected' : '' }}>⏳ En attente</option>
                                <option value="approved" {{ old('status') === 'approved' ? 'selected' : '' }}>✅ Approuvé</option>
                                <option value="rejected" {{ old('status') === 'rejected' ? 'selected' : '' }}>❌ Rejeté</option>
                            </select>
                            @error('status')
                                <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                    <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                </p>
                            @enderror
                        </div>

                        <!-- Buttons -->
                        <div class="flex gap-3 pt-4 border-t">
                            <a href="{{ route('admin.testimonials.index') }}"
                                class="flex-1 px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold rounded-lg transition duration-200 text-center">
                                <i class="fas fa-times mr-2"></i>Annuler
                            </a>
                            <button type="submit"
                                class="flex-1 px-6 py-3 bg-gradient-to-r from-pink-600 to-pink-700 hover:from-pink-700 hover:to-pink-800 text-white font-bold rounded-lg shadow-lg hover:shadow-xl transition duration-200">
                                <i class="fas fa-save mr-2"></i>Enregistrer
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        function toggleTestimonialType() {
            const testimonialType = document.querySelector('input[name="testimonial_type"]:checked').value;
            const textContentDiv = document.getElementById('textContentDiv');
            const socialMediaDiv = document.getElementById('socialMediaDiv');
            const contentTextarea = document.getElementById('content');
            const videoUrlInput = document.getElementById('video_url');

            if (testimonialType === 'text') {
                textContentDiv.classList.remove('hidden');
                socialMediaDiv.classList.add('hidden');
                contentTextarea.required = true;
                videoUrlInput.required = false;
            } else {
                textContentDiv.classList.add('hidden');
                socialMediaDiv.classList.remove('hidden');
                contentTextarea.required = false;
                videoUrlInput.required = true;
            }
        }

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            toggleTestimonialType();
        });
    </script>
@endsection