@extends('layouts.admin-layout')

@section('title', 'Ajouter un Média')

@section('content')
    <div class="p-6">
        <!-- Page Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                        <i class="fas fa-photo-video text-purple-600 mr-3"></i>Ajouter un Média
                    </h1>
                    <p class="mt-2 text-gray-600">Ajoutez une vidéo, un audio ou une image à votre médiathèque</p>
                </div>
                <a href="{{ route('admin.media.index') }}"
                   class="inline-flex items-center px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition duration-200">
                    <i class="fas fa-arrow-left mr-2"></i>Retour
                </a>
            </div>
        </div>

        <div class="max-w-4xl mx-auto">
            <div class="bg-white overflow-hidden shadow-lg sm:rounded-2xl border border-gray-100">
                <div class="p-8 text-gray-900">
                    @if ($errors->any())
                        <div class="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-exclamation-circle text-red-500"></i>
                                </div>
                                <div class="ml-3">
                                    <h3 class="text-sm font-medium text-red-800">Erreurs de validation :</h3>
                                    <div class="mt-2 text-sm text-red-700">
                                        <ul class="list-disc list-inside space-y-1">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <form action="{{ route('admin.media.store') }}" method="POST">
                        @csrf

                        <!-- Section: Informations de base -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-purple-500">
                                <div class="bg-purple-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-info-circle text-purple-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Informations de base</h2>
                            </div>

                            <div class="mb-6">
                                <label for="title" 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-heading text-purple-600 mr-2"></i>
                                    <span>Titre du média</span>
                                    <span class="text-red-500 ml-1">*</span>
                                </label>
                                <input type="text" name="title" id="title" value="{{ old('title') }}" required
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-2 focus:ring-purple-500 text-base">
                                @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>

                            <div class="mb-6">
                                <label for="description" 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-align-left text-purple-600 mr-2"></i>
                                    <span>Description</span>
                                </label>
                                <textarea name="description" id="description" rows="4"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-2 focus:ring-purple-500 text-base"
                                    placeholder="Décrivez le contenu de ce média...">{{ old('description') }}</textarea>
                                @error('description')
                                    <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>

                            <div class="mb-6">
                                <label for="media_type" 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 média</span>
                                    <span class="text-red-500 ml-1">*</span>
                                </label>
                                <select name="media_type" id="media_type" required
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-2 focus:ring-purple-500 text-base">
                                    <option value="video" {{ old('media_type') === 'video' ? 'selected' : '' }}>
                                        📹 Vidéo
                                    </option>
                                    <option value="audio" {{ old('media_type') === 'audio' ? 'selected' : '' }}>
                                        🎵 Audio
                                    </option>
                                    <option value="image" {{ old('media_type') === 'image' ? 'selected' : '' }}>
                                        🖼️ Image
                                    </option>
                                </select>
                                @error('media_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>

                            <div class="mb-6">
                                <div class="bg-red-50 px-4 py-3 rounded-lg border-l-4 border-red-500">
                                    <label class="flex items-center cursor-pointer">
                                        <input type="checkbox" name="is_live" id="is_live" value="1" {{ old('is_live') ? 'checked' : '' }}
                                            class="w-5 h-5 text-red-600 rounded focus:ring-red-500 focus:ring-2">
                                        <span class="ml-3 text-sm font-bold text-gray-800">
                                            <i class="fas fa-circle text-red-600 mr-2 animate-pulse"></i>
                                            C'est un Live / Stream YouTube
                                        </span>
                                    </label>
                                    <p class="mt-2 text-xs text-gray-600 ml-8 italic">
                                        <i class="fas fa-info-circle mr-1"></i>Cochez cette case si cette vidéo est un live/stream qui doit être repassé en boucle sur la page d'accueil
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Section: Contenu -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-blue-500">
                                <div class="bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-file-video text-blue-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Contenu et fichiers</h2>
                            </div>

                            <div class="mb-6">
                                <label for="youtube_url" 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="fab fa-youtube text-blue-600 mr-2"></i>
                                    <span>URL YouTube</span>
                                </label>
                                <input type="text" name="youtube_url" id="youtube_url" value="{{ old('youtube_url') }}"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base"
                                    placeholder="Ex: https://www.youtube.com/watch?v=dQw4w9WgXcQ">
                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>Pour les vidéos YouTube uniquement. Collez l'URL complète de la vidéo. La miniature sera générée automatiquement.
                                </p>
                                @error('youtube_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
                            </div>

                            <div class="mb-6">
                                <label for="soundcloud_url" 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="fab fa-soundcloud text-orange-600 mr-2"></i>
                                    <span>URL SoundCloud</span>
                                </label>
                                <textarea name="soundcloud_url" id="soundcloud_url" rows="3"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-500 text-base font-mono text-sm"
                                    placeholder="Collez soit l'URL (ex: https://soundcloud.com/...) soit le code d'intégration <iframe...>">{{ old('soundcloud_url') }}</textarea>
                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>Sur SoundCloud, cliquez "Share" → "Embed" et collez le code d'intégration complet ici. Vous pouvez aussi coller directement l'URL du podcast.
                                </p>
                                @error('soundcloud_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
                            </div>

                            <div class="mb-6">
                                <label for="podcast_image" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-amber-50 px-4 py-2 rounded-lg border-l-4 border-amber-500">
                                    <i class="fas fa-image text-amber-600 mr-2"></i>
                                    <span>Image du Podcast (optionnel)</span>
                                </label>
                                <input type="text" name="podcast_image" id="podcast_image" value="{{ old('podcast_image') }}"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-amber-500 focus:ring-2 focus:ring-amber-500 text-base"
                                    placeholder="https://exemple.com/podcast-cover.jpg">
                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>URL de l'image de couverture du podcast. Si vide, une image par défaut sera utilisée.
                                </p>
                                @error('podcast_image')
                                    <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>

                            <div class="mb-6">
                                <label for="file_path" 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-link text-blue-600 mr-2"></i>
                                    <span>URL du fichier média</span>
                                </label>
                                <input type="text" name="file_path" id="file_path" value="{{ old('file_path') }}"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base"
                                    placeholder="https://exemple.com/media/fichier.mp4">
                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>URL complète du fichier (vidéo MP4, audio MP3, ou image JPG/PNG)
                                </p>
                                @error('file_path')
                                    <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>

                            <div class="mb-6">
                                <label for="thumbnail" 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-image text-blue-600 mr-2"></i>
                                    <span>Image miniature</span>
                                    <span class="ml-2 text-xs font-normal text-gray-600">(optionnel pour YouTube)</span>
                                </label>
                                <input type="text" name="thumbnail" id="thumbnail" value="{{ old('thumbnail') }}"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base"
                                    placeholder="https://exemple.com/images/miniature.jpg">
                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>Sera générée automatiquement pour les vidéos YouTube. Spécifiez manuellement pour les autres types de médias.
                                </p>
                                @error('thumbnail')
                                    <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>

                            <div class="mb-6">
                                <label 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-images text-blue-600 mr-2"></i>
                                    <span>Galerie d'images</span>
                                    <span class="ml-2 text-xs font-normal text-gray-600">(optionnel)</span>
                                </label>

                                <div id="images-container" class="space-y-3">
                                    <div class="flex items-center gap-2">
                                        <input type="text" name="images[]" class="flex-1 rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base"
                                            placeholder="https://exemple.com/image1.jpg">
                                        <button type="button" onclick="addImageField()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                </div>

                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>Ajoutez plusieurs URLs d'images. La première image sera l'image principale affichée en grand sur le site public.
                                </p>
                                @error('images')
                                    <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>
                        </div>

                        <!-- Section: Association -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-green-500">
                                <div class="bg-green-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-church text-green-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Association à une église</h2>
                            </div>

                            <div class="mb-6">
                                <label for="church_id" 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-church text-green-600 mr-2"></i>
                                    <span>Église</span>
                                    <span class="text-red-500 ml-1">*</span>
                                </label>
                                <select name="church_id" id="church_id" required
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-2 focus:ring-green-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 }}
                                        </option>
                                    @endforeach
                                </select>
                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>Sélectionnez l'église à laquelle ce média est associé
                                </p>
                                @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>

                            <div class="mb-6">
                                <label for="category_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-folder text-indigo-600 mr-2"></i>
                                    <span>Catégorie (optionnel)</span>
                                </label>
                                <select name="category_id" id="category_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="">Aucune catégorie</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                            @if($category->icon)
                                                {{ $category->name }}
                                            @else
                                                {{ $category->name }}
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>Classez ce média dans une catégorie pour faciliter l'organisation
                                </p>
                                @error('category_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>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex gap-4 pt-6 border-t border-gray-200">
                            <a href="{{ route('admin.media.index') }}"
                                class="flex-1 px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg font-semibold 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-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white rounded-lg font-semibold shadow-lg transition duration-200">
                                <i class="fas fa-save mr-2"></i>Créer le média
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        function addImageField() {
            const container = document.getElementById('images-container');
            const newField = document.createElement('div');
            newField.className = 'flex items-center gap-2';
            newField.innerHTML = `
                <input type="text" name="images[]" class="flex-1 rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base"
                    placeholder="https://exemple.com/image.jpg">
                <button type="button" onclick="removeImageField(this)" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition">
                    <i class="fas fa-trash"></i>
                </button>
            `;
            container.appendChild(newField);
        }

        function removeImageField(button) {
            button.parentElement.remove();
        }
    </script>
    @endpush
@endsection