@extends('layouts.admin')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3">
        <div>
            <h1 class="h3 fw-bold mb-1">Modifier l'Article</h1>
            <p class="text-muted">{{ Str::limit($article->titre, 50) }}</p>
        </div>
        <a href="{{ route('admin.articles.index') }}" class="btn btn-outline-secondary rounded-pill px-4">
            <i class="fa fa-arrow-left me-2"></i>Retour
        </a>
    </div>

    <form action="{{ route('admin.articles.update', $article->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <div class="row g-4">
            <div class="col-lg-8">
                {{-- Contenu principal --}}
                <div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
                    <div class="mb-4">
                        <label class="form-label fw-bold">Titre de l'article <span class="text-danger">*</span></label>
                        <input type="text" name="title" class="form-control" value="{{ old('title', $article->titre) }}" required>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold">Résumé (Chapeau) <span class="text-danger">*</span></label>
                        <textarea name="summary" rows="2" class="form-control" required>{{ old('summary', $article->contenu_court) }}</textarea>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold">Corps de l'article</label>
                        <textarea name="content" id="editor">{{ old('content', $article->contenu_long) }}</textarea>
                    </div>
                </div>

                {{-- Gestion de la Photothèque --}}
                <div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
                    <h6 class="fw-bold mb-3"><i class="fa fa-images me-2 text-success"></i>Galerie Photos</h6>
                    
                    @if($article->photos && $article->photos->count() > 0)
                        <div class="row g-3 mb-4 p-3 bg-light rounded">
                            @foreach($article->photos as $photo)
                                <div class="col-md-3 text-center position-relative">
                                    <img src="{{ asset('storage/' . $photo->chemin_photo) }}" class="img-thumbnail rounded mb-1" style="height: 100px; width: 100%; object-fit: cover;">
                                    <small class="d-block text-truncate text-muted">{{ $photo->legende }}</small>
                                    {{-- Note: Ajoutez ici une checkbox ou un bouton si vous voulez gérer la suppression --}}
                                </div>
                            @endforeach
                        </div>
                    @endif
                    
                    <div id="photos-container"></div>
                    <button type="button" class="btn btn-sm btn-outline-success rounded-pill" onclick="addPhotoFieldEdit()">
                        <i class="fa fa-plus me-1"></i> Ajouter de nouvelles photos
                    </button>
                </div>

                {{-- Gestion de la Vidéothèque --}}
                <div class="card border-0 shadow-sm rounded-4 p-4">
                    <h6 class="fw-bold mb-3"><i class="fa fa-video me-2 text-primary"></i>Vidéothèque</h6>
                    
                    {{-- Affichage des vidéos existantes (si vous avez une relation videos) --}}
                    @if(isset($article->videos) && $article->videos->count() > 0)
                        <div class="row g-3 mb-4 p-3 bg-light rounded">
                            @foreach($article->videos as $video)
                                <div class="col-md-4">
                                    <div class="border rounded p-2 bg-white">
                                        @if($video->type === 'youtube')
                                            <div class="ratio ratio-16x9 mb-2">
                                                <iframe src="https://www.youtube.com/embed/{{ $video->youtube_id }}" allowfullscreen></iframe>
                                            </div>
                                        @else
                                            <video width="100%" height="auto" controls class="rounded mb-2">
                                                <source src="{{ asset('storage/' . $video->chemin_video) }}" type="video/mp4">
                                            </video>
                                        @endif
                                        <small class="fw-bold d-block">{{ $video->titre }}</small>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif

                    <div id="videos-container"></div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-outline-primary rounded-pill" onclick="addVideoFieldEdit('file')">
                            <i class="fa fa-file-video me-1"></i> Nouveau fichier vidéo
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-info rounded-pill" onclick="addVideoFieldEdit('youtube')">
                            <i class="fa-brands fa-youtube me-1"></i> Nouveau lien YouTube
                        </button>
                    </div>
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
                    <label class="form-label fw-bold">Statut de publication</label>
                    <select name="status" class="form-select mb-4">
                        <option value="draft" {{ $article->etat == 'brouillon' ? 'selected' : '' }}>Brouillon</option>
                        <option value="published" {{ $article->etat == 'publié' ? 'selected' : '' }}>Publié</option>
                    </select>
                    <button type="submit" class="btn btn-primary-ci w-100 py-2 shadow-sm">
                        <i class="fa fa-save me-2"></i>Enregistrer les modifications
                    </button>
                </div>

                <div class="card border-0 shadow-sm rounded-4 p-4">
                    <label class="form-label fw-bold">Image à la une</label>
                    <div class="mb-3 border rounded-3 text-center bg-light" style="height: 200px; overflow: hidden; position: relative;">
                        <img src="{{ asset('storage/' . $article->image_url) }}" id="image-preview" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <input type="file" name="image" class="form-control form-control-sm" id="image-input">
                    <small class="text-muted mt-2 d-block">Laissez vide pour conserver l'image actuelle.</small>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>
<script>
    // CKEditor
    ClassicEditor.create(document.querySelector('#editor')).catch(error => console.error(error));

    // Aperçu Image à la une
    document.getElementById('image-input').onchange = function (evt) {
        const [file] = this.files;
        if (file) {
            document.getElementById('image-preview').src = URL.createObjectURL(file);
        }
    }

    // Ajout Photos
    function addPhotoFieldEdit() {
        const container = document.getElementById('photos-container');
        const div = document.createElement('div');
        div.className = 'mb-3 p-3 border rounded bg-light position-relative';
        div.innerHTML = `
            <button type="button" class="btn-close position-absolute top-0 end-0 m-2" onclick="this.parentElement.remove()"></button>
            <div class="row g-2">
                <div class="col-md-5"><input type="file" name="photos[]" class="form-control form-control-sm" required></div>
                <div class="col-md-7"><input type="text" name="legendes_new[]" class="form-control form-control-sm" placeholder="Légende de la photo" required></div>
            </div>
        `;
        container.appendChild(div);
    }

    // Ajout Vidéos
    function addVideoFieldEdit(type) {
        const container = document.getElementById('videos-container');
        const div = document.createElement('div');
        div.className = 'mb-3 p-3 border rounded bg-light position-relative';
        
        let inputContent = type === 'file' 
            ? `<input type="file" name="video_files[]" class="form-control form-control-sm" accept="video/mp4" required>`
            : `<input type="url" name="video_links[]" class="form-control form-control-sm" placeholder="Lien YouTube (https://...)" required>`;

        div.innerHTML = `
            <button type="button" class="btn-close position-absolute top-0 end-0 m-2" onclick="this.parentElement.remove()"></button>
            <div class="row g-2 mt-1">
                <div class="col-md-5">
                    <label class="small fw-bold">${type === 'file' ? 'Fichier MP4' : 'Lien YouTube'}</label>
                    ${inputContent}
                </div>
                <div class="col-md-7">
                    <label class="small fw-bold">Titre de la vidéo</label>
                    <input type="text" name="video_titles[]" class="form-control form-control-sm" placeholder="Titre de la vidéo" required>
                </div>
            </div>
        `;
        container.appendChild(div);
    }
</script>

<style>
    .btn-primary-ci { background-color: #009a44; border: none; color: white; transition: 0.3s; }
    .btn-primary-ci:hover { background-color: #007d37; transform: translateY(-2px); }
    .ck-editor__editable { min-height: 300px; }
</style>
@endsection