@extends('layouts.admin')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 fw-bold mb-1" style="color: #002e33;">Nouvel Album Médiathèque</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.mediatheque.index') }}">Médiathèque</a></li>
                    <li class="breadcrumb-item active">Ajouter un ensemble</li>
                </ol>
            </nav>
        </div>
        <a href="{{ route('admin.mediatheque.index') }}" class="btn btn-outline-secondary rounded-pill px-3">
            <i class="fa fa-arrow-left me-2"></i>Retour
        </a>
    </div>

    @if (session('error'))
        <div class="alert alert-danger border-0 shadow-sm rounded-4 mb-4">
            <i class="fas fa-exclamation-triangle me-2"></i>{{ session('error') }}
        </div>
    @endif

    <form action="{{ route('admin.mediatheque.store') }}" method="POST" enctype="multipart/form-data" id="mediatheque-form">
        @csrf
        <div class="row g-4">
            {{-- BLOC GAUCHE : INFOS ALBUM --}}
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm rounded-4 p-4 h-100">
                    <h5 class="fw-bold mb-4 text-warning"><i class="fas fa-folder-open me-2"></i>Informations de l'Album</h5>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Titre de l'Album / de la Vidéo <span class="text-danger">*</span></label>
                        <input type="text" name="titre" class="form-control @error('titre') is-invalid @enderror" required value="{{ old('titre') }}" placeholder="Ex: Audience solennelle de rentrée 2026">
                        @error('titre')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Type Principal</label>
                            <select name="type" id="type-select" class="form-select" onchange="toggleMediaTypeZone()">
                                <option value="photo" {{ old('type') == 'photo' || !old('type') ? 'selected' : '' }}>Album Photos</option>
                                <option value="video" {{ old('type') == 'video' ? 'selected' : '' }}>Contenu Vidéo</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Événement / Lieu</label>
                            <input type="text" name="evenement" class="form-control" value="{{ old('evenement') }}" placeholder="Ex: Grand Amphithéâtre">
                        </div>
                    </div>

                    <div class="mt-3">
                        <label class="form-label fw-bold">Image de Couverture / Miniature <span class="text-danger">*</span></label>
                        <div class="upload-cover-zone" onclick="document.getElementById('cover-input').click()">
                            <img id="cover-preview" src="#" style="display:none; width:100%; height:100%; object-fit:cover; border-radius:10px;">
                            <div id="cover-placeholder" class="text-center">
                                <i class="fas fa-image fa-2x mb-2 opacity-50"></i>
                                <p class="small mb-0 text-muted">Cliquer pour choisir la couverture (Max: 5 Mo)</p>
                            </div>
                        </div>
                        {{-- Correction : required est retiré si old() possède déjà des données pour éviter un blocage navigateur --}}
                        <input type="file" name="image_path" id="cover-input" class="d-none @error('image_path') is-invalid @enderror" {{ old('titre') ? '' : 'required' }} accept="image/*" onchange="previewCover(this)">
                        @error('image_path')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            {{-- BLOC DROIT : CONTENU DYNAMIQUE --}}
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm rounded-4 p-4 h-100 d-flex flex-column">
                    
                    {{-- ZONE DU CONTENU PHOTOS --}}
                    <div id="photo-upload-zone">
                        <h5 class="fw-bold mb-4 text-success"><i class="fas fa-images me-2"></i>Contenu de la Galerie Photos</h5>
                        
                        <div class="multiple-upload-zone p-5">
                            <i class="fas fa-cloud-upload-alt fa-3x mb-3 text-primary opacity-50"></i>
                            <h6 class="fw-bold">Sélection multiple (Optionnel)</h6>
                            <p class="text-muted small">Faites glisser vos photos additionnelles ici (Max: 5 Mo par photo)</p>
                            <input type="file" name="fichiers[]" id="multiple-input" multiple accept="image/*" class="file-overlay-input" onchange="handleMultipleFiles(this)">
                        </div>

                        <div id="file-list-preview" class="mt-4 scrollbar-custom" style="max-height: 200px; overflow-y: auto;">
                            {{-- Liste générée par JS --}}
                        </div>
                    </div>

                    {{-- ZONE DU CONTENU VIDÉO --}}
                    <div id="video-link-zone" style="display: none;">
                        <h5 class="fw-bold mb-4 text-danger"><i class="fab fa-youtube me-2"></i>Lien de la Vidéo Externe</h5>
                        
                        <div class="p-4 rounded-4 bg-light border border-dashed">
                            <div class="mb-2">
                                <label class="form-label fw-bold">Lien YouTube de la vidéo <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white text-danger border-end-0"><i class="fab fa-youtube fa-lg"></i></span>
                                    <input type="url" name="youtube_url" id="youtube-url-input" class="form-control border-start-0 @error('youtube_url') is-invalid @enderror" value="{{ old('youtube_url') }}" placeholder="https://www.youtube.com/watch?v=...">
                                </div>
                                <small class="text-muted d-block mt-2">
                                    Collez l'adresse complète de la vidéo YouTube officielle.
                                </small>
                                @error('youtube_url')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    {{-- BOUTON DE PUBLICATION --}}
                    <div class="mt-auto pt-4 border-top">
                        <button type="submit" class="btn btn-dark btn-lg w-100 py-3 rounded-4 shadow-sm fw-bold">
                            <i class="fa fa-cloud-upload-alt me-2"></i>Publier le Contenu
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<style>
    .upload-cover-zone { height: 160px; border: 2px dashed #ddd; border-radius: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: #fafafa; overflow: hidden; }
    .multiple-upload-zone { position: relative; border: 2px dashed #0d6efd; border-radius: 15px; background: #f0f5ff; text-align: center; }
    .file-overlay-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
    .file-preview-item { display: flex; align-items: center; padding: 10px; background: #fff; border: 1px solid #eee; border-radius: 10px; margin-bottom: 8px; }
    .border-dashed { border-style: dashed !important; }
</style>

<script>
    const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5 Mo en Octets

    // 1. Aperçu et validation de la couverture
    function previewCover(input) {
        if (input.files && input.files[0]) {
            const file = input.files[0];

            if (file.size > MAX_FILE_SIZE) {
                alert(`L'image de couverture "${file.name}" dépasse la limite autorisée de 5 Mo.\nVeuillez choisir un fichier plus léger.`);
                input.value = ''; 
                document.getElementById('cover-preview').style.display = 'none';
                document.getElementById('cover-placeholder').style.display = 'block';
                return;
            }

            let reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('cover-preview').src = e.target.result;
                document.getElementById('cover-preview').style.display = 'block';
                document.getElementById('cover-placeholder').style.display = 'none';
            }
            reader.readAsDataURL(file);
        }
    }

    // 2. Gestion, filtrage et aperçu de la galerie d'images multiples
    function handleMultipleFiles(input) {
        const container = document.getElementById('file-list-preview');
        container.innerHTML = '';
        
        const dataTransfer = new DataTransfer();
        let rejectedFiles = [];

        Array.from(input.files).forEach(file => {
            if (file.size > MAX_FILE_SIZE) {
                rejectedFiles.push(file.name);
            } else {
                dataTransfer.items.add(file);
                
                const div = document.createElement('div');
                div.className = 'file-preview-item';
                div.innerHTML = `
                    <i class="fas fa-image me-3 text-success"></i> 
                    <span class="small flex-grow-1 text-truncate">${file.name}</span> 
                    <span class="badge bg-light text-dark me-2">${(file.size / (1024 * 1024)).toFixed(2)} Mo</span>
                    <i class="fas fa-check text-success"></i>
                `;
                container.appendChild(div);
            }
        });

        input.files = dataTransfer.files;

        if (rejectedFiles.length > 0) {
            alert(`Attention : Les fichiers suivants dépassent les 5 Mo réglementaires et ont été ignorés :\n\n- ${rejectedFiles.join('\n- ')}`);
        }
    }

    // 3. Basculement dynamique Photo / Vidéo et gestion fine des attributs "required"
    function toggleMediaTypeZone() {
        const typeSelect = document.getElementById('type-select');
        const photoZone = document.getElementById('photo-upload-zone');
        const videoZone = document.getElementById('video-link-zone');
        const youtubeInput = document.getElementById('youtube-url-input');
        const multipleInput = document.getElementById('multiple-input');

        if (typeSelect.value === 'video') {
            photoZone.style.display = 'none';
            videoZone.style.display = 'block';
            
            youtubeInput.required = true;
            multipleInput.required = false;
            
            multipleInput.value = ''; 
            document.getElementById('file-list-preview').innerHTML = '';
        } else {
            photoZone.style.display = 'block';
            videoZone.style.display = 'none';
            
            youtubeInput.required = false;
            youtubeInput.value = ''; 
            
            // Correction : Laisser l'attribut multiple facultatif au cas où l'album ne contiendrait que la couverture
            multipleInput.required = false;
        }
    }

    // Initialisation propre au chargement complet du DOM
    document.addEventListener("DOMContentLoaded", function() {
        toggleMediaTypeZone();
    });
</script>
@endsection