@extends('layouts.admin-layout')

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

@section('content')
    <div class="p-6">
        <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">
                                <i class="fas fa-exclamation-circle text-red-500 flex-shrink-0 mt-0.5"></i>
                                <div class="ml-3">
                                    <h3 class="text-sm font-medium text-red-800">Erreurs de validation :</h3>
                                    <ul class="mt-2 text-sm text-red-700 list-disc list-inside space-y-1">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endif

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

                        {{-- ── 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>

                            {{-- Titre --}}
                            <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>Titre du média <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 bg-red-50 px-3 py-2 rounded-lg flex items-center">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            {{-- Description --}}
                            <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>Description
                                </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>
                            </div>

                            {{-- Type de média --}}
                            <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>Type de média <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') === '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>
                            </div>
                        </div>

                        {{-- ── Contenu & fichiers ───────────────────────────────── --}}
                        <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>

                            {{-- [VIDEO] Live / Stream --}}
                            <div class="mb-6 media-field" data-types="video">
                                <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 si ce flux doit être repassé en boucle sur la page d'accueil.
                                    </p>
                                </div>
                            </div>

                            {{-- [VIDEO] URL YouTube --}}
                            <div class="mb-6 media-field" data-types="video">
                                <label for="youtube_url" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-red-50 px-4 py-2 rounded-lg border-l-4 border-red-500">
                                    <i class="fab fa-youtube text-red-600 mr-2"></i>URL YouTube
                                </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-red-500 focus:ring-2 focus:ring-red-500 text-base"
                                    placeholder="https://www.youtube.com/watch?v=...">
                                <p class="mt-2 text-xs text-gray-500 italic">
                                    <i class="fas fa-info-circle mr-1"></i>La miniature sera générée automatiquement.
                                </p>
                                @error('youtube_url')
                                    <p class="mt-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg flex items-center">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            {{-- [AUDIO] SoundCloud --}}
                            <div class="mb-6 media-field" data-types="audio">
                                <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>URL SoundCloud
                                </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="https://soundcloud.com/... ou code <iframe...>">{{ old('soundcloud_url') }}</textarea>
                                <p class="mt-2 text-xs text-gray-500 italic">
                                    <i class="fas fa-info-circle mr-1"></i>Collez l'URL ou le code d'intégration (Share → Embed).
                                </p>
                                @error('soundcloud_url')
                                    <p class="mt-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg flex items-center">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            {{-- [AUDIO] Spotify --}}
                            <div class="mb-6 media-field" data-types="audio">
                                <label for="spotify_url" 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="fab fa-spotify text-green-600 mr-2"></i>URL Spotify
                                </label>
                                <textarea name="spotify_url" id="spotify_url" rows="3"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-2 focus:ring-green-500 text-base font-mono text-sm"
                                    placeholder="https://open.spotify.com/show/... ou code <iframe...>">{{ old('spotify_url') }}</textarea>
                                <p class="mt-2 text-xs text-gray-500 italic">
                                    <i class="fas fa-info-circle mr-1"></i>Collez l'URL ou le code d'intégration (... → Share → Embed show).
                                </p>
                                @error('spotify_url')
                                    <p class="mt-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg flex items-center">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            {{-- [AUDIO] Image du podcast --}}
                            <div class="mb-6 media-field" data-types="audio">
                                <label for="podcast_image_file" 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>Image du Podcast <span class="ml-1 text-xs font-normal text-gray-500">(optionnel)</span>
                                </label>
                                <input type="file" name="podcast_image_file" id="podcast_image_file" accept="image/*"
                                    class="block w-full text-sm text-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-amber-600 file:text-white hover:file:bg-amber-700 file:cursor-pointer">
                                <p class="mt-2 text-xs text-gray-500 italic">
                                    <i class="fas fa-info-circle mr-1"></i>Pochette de l'émission. Si vide, une image par défaut sera utilisée.
                                </p>
                                @error('podcast_image_file')
                                    <p class="mt-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg flex items-center">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            {{-- [VIDEO + AUDIO] URL du fichier (fallback) --}}
                            <div class="mb-6 media-field" data-types="video audio">
                                <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>URL du fichier média <span class="ml-1 text-xs font-normal text-gray-500">(optionnel)</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/fichier.mp4 ou .mp3">
                                <p class="mt-2 text-xs text-gray-500 italic">
                                    <i class="fas fa-info-circle mr-1"></i>Alternative si le fichier n'est pas sur YouTube / SoundCloud / Spotify.
                                </p>
                                @error('file_path')
                                    <p class="mt-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg flex items-center">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            {{-- [VIDEO + AUDIO] Miniature --}}
                            <div class="mb-6 media-field" data-types="video audio">
                                <label for="thumbnail_file" 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>Image miniature
                                    <span class="ml-2 text-xs font-normal text-gray-500">(optionnel — auto pour YouTube)</span>
                                </label>
                                <input type="file" name="thumbnail_file" id="thumbnail_file" accept="image/*"
                                    class="block w-full text-sm text-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-700 file:cursor-pointer">
                                <p class="mt-2 text-xs text-gray-500 italic">
                                    <i class="fas fa-info-circle mr-1"></i>Sera générée automatiquement pour les vidéos YouTube.
                                </p>
                                @error('thumbnail_file')
                                    <p class="mt-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg flex items-center">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            {{-- [IMAGE] Galerie --}}
                            <div class="mb-6 media-field" data-types="image">
                                <label for="uploaded_images" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-teal-50 px-4 py-2 rounded-lg border-l-4 border-teal-500">
                                    <i class="fas fa-images text-teal-600 mr-2"></i>Galerie d'images
                                    <span class="ml-2 text-xs font-normal text-gray-500">(optionnel)</span>
                                </label>
                                <input type="file" name="uploaded_images[]" id="uploaded_images" multiple accept="image/*"
                                    class="block w-full text-sm text-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-teal-600 file:text-white hover:file:bg-teal-700 file:cursor-pointer">
                                <p class="mt-2 text-xs text-gray-500 italic">
                                    <i class="fas fa-info-circle mr-1"></i>Maintenez Ctrl (Windows) ou Cmd (Mac) pour sélectionner plusieurs images. La première sera l'image principale.
                                </p>
                                @error('uploaded_images')
                                    <p class="mt-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg flex items-center">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>
                        </div>

                        {{-- ── 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</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>Église <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>
                                @error('church_id')
                                    <p class="mt-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg flex items-center">
                                        <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>Catégorie <span class="ml-1 text-xs font-normal text-gray-500">(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' : '' }}>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                    <p class="mt-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg flex items-center">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>
                        </div>

                        <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 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">
                                <i class="fas fa-save mr-2"></i>Créer le média
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        function toggleMediaFields(type) {
            document.querySelectorAll('.media-field').forEach(function (el) {
                const types = el.dataset.types ? el.dataset.types.split(' ') : [];
                el.style.display = types.includes(type) ? '' : 'none';
            });
        }

        const mediaTypeSelect = document.getElementById('media_type');
        mediaTypeSelect.addEventListener('change', function () {
            toggleMediaFields(this.value);
        });

        // Init au chargement
        toggleMediaFields(mediaTypeSelect.value);
    </script>
    @endpush
@endsection