@extends('layouts.admin')

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

@section('content')
    <div class="container">
        <h2>Nuevo artículo</h2>

        {{-- Errores globales --}}
        @if ($errors->any())
            <div class="alert alert-danger">
                <strong>Se encontraron errores al guardar:</strong>
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @php
            // Si hay old('gallery_alts') por validación fallida,
            // usamos esa cantidad de filas; si no, al menos 1
            $oldGalleryAlts = old('gallery_alts', ['']);
        @endphp

        <form method="POST" action="{{ route('admin.blog-posts.store') }}" enctype="multipart/form-data">
            @csrf

            <div class="mb-3">
                <label for="title" class="form-label">Título</label>
                <input
                    type="text"
                    id="title"
                    class="form-control"
                    name="title"
                    value="{{ old('title') }}"
                    required
                >
                @error('title')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="mb-3">
                <label for="excerpt" class="form-label">Extracto</label>
                <textarea
                    id="excerpt"
                    name="excerpt"
                    class="form-control"
                    rows="2"
                >{{ old('excerpt') }}</textarea>
                @error('excerpt')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="mb-3">
                <label for="featured_image" class="form-label">Imagen destacada</label>
                <input
                    type="file"
                    id="featured_image"
                    name="featured_image"
                    class="form-control"
                    required
                >
                @error('featured_image')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <hr>
            <h5 class="mb-3">Galería de imágenes</h5>

            <div id="gallery-container">
                @foreach ($oldGalleryAlts as $i => $alt)
                    <div class="row mb-3 gallery-item" data-index="{{ $i }}">
                        <div class="col-md-6">
                            <label class="form-label">Imagen</label>
                            <input
                                type="file"
                                name="gallery_images[{{ $i }}]"
                                class="form-control"
                                accept="image/*"
                            >
                            @error("gallery_images.$i")
                                <small class="text-danger d-block">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-5">
                            <label class="form-label">Texto alternativo (alt)</label>
                            <input
                                type="text"
                                name="gallery_alts[{{ $i }}]"
                                class="form-control"
                                placeholder="Ej: decoración elegante para boda al aire libre"
                                value="{{ old("gallery_alts.$i") }}"
                            >
                            @error("gallery_alts.$i")
                                <small class="text-danger d-block">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-1 d-flex align-items-end">
                            <button type="button" class="btn btn-danger remove-image">&times;</button>
                        </div>
                    </div>
                @endforeach
            </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') == $category->id ? 'selected' : '' }}
                        >
                            {{ $category->name }}
                        </option>
                    @endforeach
                </select>
                @error('category_id')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="mb-3">
                <label for="editor" class="form-label">Contenido</label>
                <textarea
                    id="editor"
                    name="content"
                    class="form-control"
                    rows="10"
                >{{ old('content') }}</textarea>
                @error('content')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>
            
            <div class="mb-3">
                <label for="status" class="form-label">Estado</label>
                <select name="status" id="status" class="form-select" required>
                    <option
                        value="draft"
                        {{ old('status', 'draft') == 'draft' ? 'selected' : '' }}
                    >
                        Borrador
                    </option>
                    <option
                        value="published"
                        {{ old('status') == 'published' ? 'selected' : '' }}
                    >
                        Publicado
                    </option>
                </select>
                @error('status')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <button type="submit" class="btn btn-primary">Guardar</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);
            });
    </script>

    <script>
        // Empezamos desde la cantidad de filas ya renderizadas (old inputs)
        let galleryIndex = {{ count($oldGalleryAlts) }};

        document.getElementById('add-image').addEventListener('click', function () {
            const container = document.getElementById('gallery-container');

            const item = document.createElement('div');
            item.classList.add('row', 'mb-3', 'gallery-item');
            item.setAttribute('data-index', galleryIndex);

            item.innerHTML = `
                <div class="col-md-6">
                    <label class="form-label">Imagen</label>
                    <input
                        type="file"
                        name="gallery_images[${galleryIndex}]"
                        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[${galleryIndex}]"
                        class="form-control"
                        placeholder="Ej: decoración elegante para boda al aire libre"
                        value=""
                    >
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="button" class="btn btn-danger remove-image">&times;</button>
                </div>
            `;

            container.appendChild(item);
            galleryIndex++;
        });

        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