@extends('layouts.admin')

@section('title', 'Editar artículo')

@section('content')
<div class="container">
    <h2>Editar artículo</h2>
    <form method="POST" action="{{ route('admin.blog-posts.update', $blog_post) }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="mb-3">
            <label for="title" class="form-label">Título</label>
            <input type="text" class="form-control" name="title" value="{{ old('title', $blog_post->title) }}" required>
        </div>

        <div class="mb-3">
            <label for="excerpt" class="form-label">Extracto</label>
            <textarea name="excerpt" class="form-control" rows="2">{{ old('excerpt', $blog_post->excerpt) }}</textarea>
        </div>

        <div class="mb-3">
            <label class="form-label">Imagen destacada actual</label><br>
            @if($blog_post->featured_image)
                <img src="{{ asset($blog_post->featured_image) }}" alt="Imagen actual" class="img-fluid mb-2" style="max-height: 200px;">
            @else
                <p class="text-muted">No hay imagen destacada</p>
            @endif
        </div>

        <div class="mb-3">
            <label for="featured_image" class="form-label">Nueva imagen destacada (opcional)</label>
            <input type="file" name="featured_image" class="form-control">
        </div>

        <hr>
        <h5 class="mb-3">Galería actual</h5>

        @if($blog_post->images->count())
            <div class="row g-3 mb-4">
                @foreach($blog_post->images as $image)
                    <div class="col-md-4">
                        <div class="card h-100 shadow-sm">
                            <img src="{{ asset($image->image_path) }}" class="card-img-top" alt="{{ $image->alt_text }}">
                            <div class="card-body">
                                <p class="card-text text-muted small">{{ $image->alt_text }}</p>
                          
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-muted">No hay imágenes en la galería.</p>
        @endif

        <h5 class="mb-3">Agregar nuevas imágenes a la galería</h5>

        <div id="gallery-container">
            <div class="row mb-3 gallery-item">
                <div class="col-md-6">
                    <label class="form-label">Imagen</label>
                    <input type="file" name="gallery_images[]" class="form-control" accept="image/*">
                </div>
                <div class="col-md-5">
                    <label class="form-label">Texto alternativo (alt)</label>
                    <input type="text" name="gallery_alts[]" class="form-control" placeholder="Ej: decoración elegante para boda al aire libre">
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="button" class="btn btn-danger remove-image">&times;</button>
                </div>
            </div>
        </div>

        <button type="button" class="btn btn-outline-primary mb-3" id="add-image">Agregar otra imagen</button>

        <div class="mb-3">
            <label for="category_id" class="form-label">Estilo de boda (categoría)</label>
            <select class="form-select" name="category_id" id="category_id" required>
                <option value="">Seleccione una categoría</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}" {{ old('category_id', $blog_post->category_id) == $category->id ? 'selected' : '' }}>
                        {{ $category->name }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="mb-3">
            <label for="content" class="form-label">Contenido</label>
            <textarea id="editor" name="content" class="form-control" rows="10">{{ old('content', $blog_post->content) }}</textarea>
        </div>

        <div class="mb-3">
            <label for="status" class="form-label">Estado</label>
            <select name="status" class="form-select">
                <option value="draft" {{ old('status', $blog_post->status) == 'draft' ? 'selected' : '' }}>Borrador</option>
                <option value="published" {{ old('status', $blog_post->status) == 'published' ? 'selected' : '' }}>Publicado</option>
            </select>
        </div>

        <button type="submit" class="btn btn-primary">Actualizar</button>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'), {
            simpleUpload: {
                uploadUrl: '{{ url("/upload-image") }}',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            }
        })
        .catch(error => {
            console.error(error);
        });

    document.getElementById('add-image').addEventListener('click', function () {
        const container = document.getElementById('gallery-container');
        const item = document.querySelector('.gallery-item').cloneNode(true);
        item.querySelector('input[name="gallery_images[]"]').value = '';
        item.querySelector('input[name="gallery_alts[]"]').value = '';
        container.appendChild(item);
    });

    document.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-image')) {
            const items = document.querySelectorAll('.gallery-item');
            if (items.length > 1) {
                e.target.closest('.gallery-item').remove();
            }
        }
    });
</script>
@endpush