@extends('layouts.admin-layout')

@section('title', 'Modifier 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>Modifier un Média
                    </h1>
                    <p class="mt-2 text-gray-600">Modifiez les informations de ce média</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">
                    <form action="{{ route('admin.media.update', $media) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <!-- 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', $media->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', $media->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', $media->media_type) === 'video' ? 'selected' : '' }}>
                                        📹 Vidéo
                                    </option>
                                    <option value="audio" {{ old('media_type', $media->media_type) === 'audio' ? 'selected' : '' }}>
                                        🎵 Audio
                                    </option>
                                    <option value="image" {{ old('media_type', $media->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>

                        <!-- 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', $media->getYoutubeUrl()) }}"
                                    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">
                                <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', $media->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>
                                    @error('is_live')
                                        <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>

                            <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', $media->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', $media->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', $media->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', $media->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">
                                    @if(old('images') || $media->images)
                                        @foreach(old('images', $media->images ?? []) as $index => $image)
                                            <div class="flex items-center gap-2">
                                                <input type="text" name="images[]" value="{{ $image }}" 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>
                                            </div>
                                        @endforeach
                                    @else
                                        <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>
                                    @endif
                                </div>

                                <div class="mt-3">
                                    <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 mr-2"></i>Ajouter une image
                                    </button>
                                </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', $media->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', $media->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>Mettre à jour 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