@extends('layouts.admin')

@section('content')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            {{-- Fil d'Ariane --}}
            <nav aria-label="breadcrumb" class="mb-4">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none">Tableau de bord</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.mediatheque.index') }}" class="text-decoration-none">Médiathèque</a></li>
                    <li class="breadcrumb-item active">Modifier le média</li>
                </ol>
            </nav>

            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold mb-0 text-dark">
                        <i class="fa-solid fa-pen-to-square me-2 text-success"></i>Modifier l'élément #{{ $mediatheque->id }}
                    </h5>
                    <span class="badge {{ $mediatheque->type == 'photo' ? 'bg-primary' : 'bg-danger' }}">
                        {{ strtoupper($mediatheque->type) }}
                    </span>
                </div>
                
                <div class="card-body p-4">
                    {{-- Affichage des erreurs globales --}}
                    @if ($errors->any())
                        <div class="alert alert-danger border-0 rounded-4">
                            <ul class="mb-0 small">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('admin.mediatheque.update', $mediatheque->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="row g-4">
                            {{-- Colonne de Gauche : Aperçu actuel --}}
                            <div class="col-md-5">
                                <label class="small fw-bold text-muted mb-2 text-uppercase d-block">Couverture / Miniature Actuelle</label>
                                <div class="rounded-4 overflow-hidden shadow-sm border bg-light position-relative" id="media-preview-container">
                                    @php
                                        $cleanPath = str_replace('\\', '/', $mediatheque->image_path);
                                        $fileUrl = asset('storage/' . ltrim($cleanPath, '/'));
                                    @endphp
                                    <img src="{{ $fileUrl }}" id="preview-img" class="img-fluid w-100" style="max-height: 350px; object-fit: cover;" onerror="this.src='https://placehold.co/600x400?text=Image+Introuvable'">
                                </div>

                                <div class="mt-4 p-3 bg-light rounded-4 border border-dashed">
                                    <label class="form-label fw-bold mb-2">Remplacer l'image de couverture</label>
                                    <input type="file" name="image_path" id="file-input" class="form-control form-control-sm rounded-pill shadow-sm @error('image_path') is-invalid @enderror" accept="image/*">
                                    @error('image_path') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    <div class="form-text small mt-2">Laissez vide si vous ne souhaitez pas modifier l'image de couverture / miniature.</div>
                                </div>
                            </div>

                            {{-- Colonne de Droite : Informations --}}
                            <div class="col-md-7">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Titre du média</label>
                                    <input type="text" name="titre" value="{{ old('titre', $mediatheque->titre) }}" class="form-control rounded-3 shadow-sm @error('titre') is-invalid @enderror" required>
                                    @error('titre') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-bold">Événement / Lieu associé</label>
                                    <input type="text" name="evenement" value="{{ old('evenement', $mediatheque->evenement) }}" class="form-control rounded-3 shadow-sm @error('evenement') is-invalid @enderror">
                                    @error('evenement') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold text-muted">Type (Non modifiable)</label>
                                        <select class="form-select rounded-3 shadow-sm bg-light text-muted" disabled>
                                            <option value="photo" {{ $mediatheque->type == 'photo' ? 'selected' : '' }}>Album Photos</option>
                                            <option value="video" {{ $mediatheque->type == 'video' ? 'selected' : '' }}>Contenu Vidéo</option>
                                        </select>
                                        {{-- Champ caché pour conserver la valeur en POST pour le contrôleur --}}
                                        <input type="hidden" name="type" value="{{ $mediatheque->type }}">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold">Ordre d'affichage</label>
                                        <input type="number" name="ordre" value="{{ old('ordre', $mediatheque->ordre) }}" class="form-control rounded-3 shadow-sm @error('ordre') is-invalid @enderror">
                                        @error('ordre') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>
                                </div>

                                {{-- COMPOSANT RENDU DYNAMIQUE : LIEN YOUTUBE (Uniquement si type == video) --}}
                                @if($mediatheque->type == 'video')
                                    @php 
                                        $fichierVideo = $mediatheque->fichiers->first();
                                        $urlActuelle = $fichierVideo ? $fichierVideo->chemin : '';
                                    @endphp
                                    <div class="mt-4 p-3 rounded-4 bg-light border border-dashed border-danger">
                                        <h6 class="fw-bold text-danger mb-3"><i class="fab fa-youtube me-2"></i>Source de la Vidéo Externe</h6>
                                        <div class="mb-2">
                                            <label class="form-label small 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', $urlActuelle) }}" required placeholder="https://www.youtube.com/watch?v=...">
                                            </div>
                                            @error('youtube_url') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                            
                                            {{-- Mini lecteur d'aperçu de la vidéo existante si YouTube --}}
                                            @if($fichierVideo && $fichierVideo->is_youtube)
                                                <div class="mt-3">
                                                    <label class="small text-muted d-block mb-1">Aperçu du flux vidéo :</label>
                                                    <div class="ratio ratio-16x9 rounded overflow-hidden shadow-sm bg-black" style="max-height: 150px;">
                                                        <iframe src="{{ $fichierVideo->youtube_embed_url }}" title="Aperçu YouTube" allowfullscreen></iframe>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @endif

                                <div class="mb-3">
                                    <div class="form-check form-switch mt-4">
                                        <input class="form-check-input" type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', $mediatheque->is_active) ? 'checked' : '' }}>
                                        <label class="form-check-label fw-bold" for="is_active">Rendre ce média visible sur le site</label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <hr class="my-4 opacity-10">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('admin.mediatheque.index') }}" class="btn btn-outline-secondary rounded-pill px-4">
                                        Annuler
                                    </a>
                                    <button type="submit" class="btn btn-success rounded-pill px-5 shadow-sm fw-bold">
                                        <i class="fa-solid fa-floppy-disk me-2"></i>Mettre à jour le média
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Preview dynamique locale de l'image de couverture lors du changement
    document.getElementById('file-input').addEventListener('change', function(evt) {
        const [file] = this.files;
        const previewImg = document.getElementById('preview-img');

        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImg.src = e.target.result;
            }
            reader.readAsDataURL(file);
        }
    });
</script>

<style>
    .border-dashed { border-style: dashed !important; border-width: 2px !important; }
    .form-control:focus, .form-select:focus {
        border-color: #198754;
        box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.1);
    }
</style>
@endsection