@extends('layouts.admin')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom">
        <div>
            <h1 class="h3 fw-bold mb-1">Rédiger un Article</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-green-ci">Actualités</a></li>
                    <li class="breadcrumb-item active">Nouvel article</li>
                </ol>
            </nav>
        </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>Annuler
        </a>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger shadow-sm border-0 rounded-4 mb-4">
            <p class="fw-bold mb-2"><i class="fa fa-exclamation-triangle me-2"></i> Veuillez remplir tous les champs obligatoires :</p>
            <ul class="mb-0 small">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

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

                    <div class="mb-4">
                        <label for="summary" class="form-label fw-bold">Résumé (Chapeau) <span class="text-danger">*</span></label>
                        <textarea 
                            name="summary" 
                            id="summary" 
                            rows="2" 
                            class="form-control input-focus-ci" 
                            placeholder="Une ou deux phrases pour introduire l'article..."
                            maxlength="500" required>{{ old('summary') }}</textarea>
                        <div class="form-text small text-muted">Ce texte apparaîtra sur la liste des actualités (max 500 caractères).</div>
                    </div>

                    <div class="mb-4">
                        <label for="editor" class="form-label fw-bold">Corps de l'article <span class="text-danger">*</span></label>
                        <textarea name="content" id="editor" rows="15" class="form-control input-focus-ci">{{ old('content') }}</textarea>
                    </div>
                </div>

                <div class="card border-0 shadow-sm rounded-4 mt-4">
                    <div class="card-body p-4">
                        <h6 class="form-section-title mb-3 fw-bold">Photothèque (Galerie) <span class="text-danger">*</span></h6>
                        <div id="photos-container">
                            <div class="photo-entry mb-3 p-3 border rounded bg-light">
                                <div class="row g-3">
                                    <div class="col-md-5">
                                        <label class="small fw-bold">Image <span class="text-danger">*</span></label>
                                        <input type="file" name="photos[]" class="form-control form-control-sm" accept="image/*" required>
                                    </div>
                                    <div class="col-md-7">
                                        <label class="small fw-bold">Légende <span class="text-danger">*</span></label>
                                        <input type="text" name="legendes[]" class="form-control form-control-sm" placeholder="Ex: Cérémonie d'ouverture" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-success rounded-pill mt-2" onclick="addPhotoField()">
                            <i class="fa fa-plus-circle me-1"></i> Ajouter une autre photo à la galerie
                        </button>
                    </div>
                    <div class="card-body p-4">
                        <h6 class="form-section-title mb-3 fw-bold">Vidéothèque (Optionnel)</h6>
                        <div id="videos-container">
                            {{-- Les champs vidéo seront ajoutés ici --}}
                        </div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-sm btn-outline-primary rounded-pill mt-2" onclick="addVideoField('file')">
                                <i class="fa fa-file-video me-1"></i> Ajouter un fichier vidéo
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-info rounded-pill mt-2" onclick="addVideoField('youtube')">
                                <i class="fa-brands fa-youtube me-1"></i> Ajouter un lien YouTube
                            </button>
                        </div>
                        <div class="form-text small mt-2">Formats acceptés : MP4, WebM (Max 50Mo) ou liens YouTube.</div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-body">
                        <h6 class="form-section-title mb-3 fw-bold">Image à la une <span class="text-danger">*</span></h6>
                        
                        <div class="image-preview-wrapper mb-3 border rounded-3 d-flex align-items-center justify-content-center bg-light" id="preview-container" style="height: 200px; overflow: hidden;">
                            <i class="fa-solid fa-image fa-3x opacity-25" id="placeholder-icon"></i>
                            <img id="image-preview" src="#" alt="Aperçu" style="display:none; width:100%; height:100%; object-fit:cover;">
                        </div>

                        <input type="file" name="image" id="image-input" class="form-control form-control-sm input-focus-ci" accept="image/*" required>
                        <div class="form-text small">Taille recommandée : 1200x800px. Cette image sera l'icône de l'article.</div>
                    </div>
                </div>

                                <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                    <div class="flag-strip">
                        <div class="strip-o"></div><div class="strip-w"></div><div class="strip-g"></div>
                    </div>
                    <div class="card-body">
                        <h6 class="form-section-title mb-3 fw-bold">Publication</h6>
                        
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-muted">Statut <span class="text-danger">*</span></label>
                            <select name="status" class="form-select input-focus-ci" required>
                                <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Brouillon</option>
                                <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Publier immédiatement</option>
                            </select>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary-ci py-2 rounded-3 shadow-sm">
                                <i class="fa fa-save me-2"></i>Enregistrer l'article
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>

<script>
    // Initialisation de CKEditor avec gestion du texte obligatoire
    ClassicEditor
        .create(document.querySelector('#editor'), {
            toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'undo', 'redo' ],
            language: 'fr'
        })
        .then(editor => {
            // S'assurer que le textarea est mis à jour avant l'envoi du formulaire
            editor.model.document.on('change:data', () => {
                document.querySelector('#editor').value = editor.getData();
            });
        })
        .catch(error => { console.error(error); });

    // Aperçu de l'image principale
    document.getElementById('image-input').onchange = function (evt) {
        const [file] = this.files;
        if (file) {
            document.getElementById('image-preview').src = URL.createObjectURL(file);
            document.getElementById('image-preview').style.display = 'block';
            document.getElementById('placeholder-icon').style.display = 'none';
        }
    }

    // Ajout dynamique de champs pour la photothèque
    function addPhotoField() {
        const container = document.getElementById('photos-container');
        const div = document.createElement('div');
        div.className = 'photo-entry mb-3 p-3 border rounded bg-light';
        div.innerHTML = `
            <div class="row g-3">
                <div class="col-md-5">
                    <label class="small fw-bold">Image <span class="text-danger">*</span></label>
                    <input type="file" name="photos[]" class="form-control form-control-sm" accept="image/*" required>
                </div>
                <div class="col-md-7">
                    <label class="small fw-bold">Légende <span class="text-danger">*</span></label>
                    <div class="input-group input-group-sm">
                        <input type="text" name="legendes[]" class="form-control" placeholder="Légende de la photo" required>
                        <button type="button" class="btn btn-outline-danger" onclick="this.closest('.photo-entry').remove()"><i class="fa fa-trash"></i></button>
                    </div>
                </div>
            </div>
        `;
        container.appendChild(div);
    }

    function addVideoField(type) {
    const container = document.getElementById('videos-container');
    const div = document.createElement('div');
    div.className = 'video-entry mb-3 p-3 border rounded bg-light';
    
    let inputField = '';
    if (type === 'file') {
        inputField = `
            <label class="small fw-bold">Fichier Vidéo (MP4)</label>
            <input type="file" name="video_files[]" class="form-control form-control-sm" accept="video/mp4,video/x-m4v,video/*">`;
    } else {
        inputField = `
            <label class="small fw-bold">Lien YouTube</label>
            <input type="url" name="video_links[]" class="form-control form-control-sm" placeholder="https://www.youtube.com/watch?v=...">`;
    }

    div.innerHTML = `
        <div class="row g-3">
            <div class="col-md-5">
                ${inputField}
            </div>
            <div class="col-md-7">
                <label class="small fw-bold">Titre/Légende de la vidéo</label>
                <div class="input-group input-group-sm">
                    <input type="text" name="video_titles[]" class="form-control" placeholder="Ex: Interview du Président">
                    <button type="button" class="btn btn-outline-danger" onclick="this.closest('.video-entry').remove()"><i class="fa fa-trash"></i></button>
                </div>
            </div>
        </div>
    `;
    container.appendChild(div);
}
</script>

<style>
    .ck-editor__editable { min-height: 400px; border-radius: 0 0 12px 12px !important; }
    .ck-editor__top { border-radius: 12px 12px 0 0 !important; }
    .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) { border-color: #dee2e6; }
    .ck.ck-button.ck-on { background: rgba(0, 154, 68, 0.1) !important; color: #009a44 !important; }
    .image-preview-wrapper { position: relative; background-color: #f8f9fa; border: 2px dashed #dee2e6; }
</style>
@endsection