@extends('admin.layout')

@section('title', 'Nuovo Articolo')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet">
@endpush

@section('content')
<div class="px-4 sm:px-0">
    <div class="mb-8">
        <a href="{{ route('admin.articles.index') }}" class="text-indigo-600 hover:text-indigo-700 inline-flex items-center mb-4">
            <i data-lucide="arrow-left" class="mr-2" width="16" height="16"></i>
            Torna agli articoli
        </a>
        <h2 class="text-3xl font-bold text-gray-900">Nuovo Articolo</h2>
    </div>

    <form action="{{ route('admin.articles.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <!-- Titolo -->
            <div class="mb-6">
                <label for="title" class="block text-sm font-semibold text-gray-700 mb-2">
                    Titolo <span class="text-red-500">*</span>
                </label>
                <input
                    type="text"
                    id="title"
                    name="title"
                    value="{{ old('title') }}"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    required
                >
                @error('title')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Estratto -->
            <div class="mb-6">
                <label for="excerpt" class="block text-sm font-semibold text-gray-700 mb-2">
                    Estratto
                </label>
                <textarea
                    id="excerpt"
                    name="excerpt"
                    rows="3"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                >{{ old('excerpt') }}</textarea>
                <p class="mt-1 text-sm text-gray-500">Breve descrizione dell'articolo</p>
                @error('excerpt')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Contenuto -->
            <div class="mb-6">
                <label for="content" class="block text-sm font-semibold text-gray-700 mb-2">
                    Contenuto <span class="text-red-500">*</span>
                </label>
                <div id="editor" style="min-height: 400px;" class="bg-white border border-gray-300 rounded-lg"></div>
                <textarea id="content" name="content" class="hidden">{{ old('content') }}</textarea>
                <p id="content-error" class="mt-2 text-sm text-red-600 hidden">Il contenuto dell'articolo è obbligatorio.</p>
                @error('content')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Immagine in evidenza -->
            <div class="mb-6">
                <label for="featured_image" class="block text-sm font-semibold text-gray-700 mb-2">
                    Immagine in evidenza
                </label>
                <input
                    type="file"
                    id="featured_image"
                    name="featured_image"
                    accept="image/*"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    onchange="previewImage(event)"
                >
                <div id="image-preview" class="mt-4 hidden">
                    <img id="preview" class="max-w-sm rounded-lg shadow-md">
                </div>
                @error('featured_image')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- SEO Section -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Ottimizzazione SEO</h3>

            <!-- Meta Description -->
            <div class="mb-6">
                <label for="meta_description" class="block text-sm font-semibold text-gray-700 mb-2">
                    Meta Description
                </label>
                <textarea
                    id="meta_description"
                    name="meta_description"
                    rows="2"
                    maxlength="160"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                >{{ old('meta_description') }}</textarea>
                <p class="mt-1 text-sm text-gray-500">Massimo 160 caratteri</p>
                @error('meta_description')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Meta Keywords -->
            <div class="mb-6">
                <label for="meta_keywords" class="block text-sm font-semibold text-gray-700 mb-2">
                    Meta Keywords
                </label>
                <input
                    type="text"
                    id="meta_keywords"
                    name="meta_keywords"
                    value="{{ old('meta_keywords') }}"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    placeholder="parola1, parola2, parola3"
                >
                <p class="mt-1 text-sm text-gray-500">Separare le parole chiave con virgole</p>
                @error('meta_keywords')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Pubblicazione -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Pubblicazione</h3>

            <div>
                <label class="flex items-center">
                    <input
                        type="checkbox"
                        name="is_published"
                        value="1"
                        {{ old('is_published') ? 'checked' : '' }}
                        class="w-5 h-5 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
                    >
                    <span class="ml-3 text-sm font-medium text-gray-700">Pubblica articolo immediatamente</span>
                </label>
                <p class="mt-2 text-sm text-gray-500">L'articolo sarà visibile nel blog non appena pubblicato</p>
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="flex justify-end space-x-4">
            <a href="{{ route('admin.articles.index') }}" class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors font-medium">
                Annulla
            </a>
            <button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors font-medium">
                Crea Articolo
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<script>
    // Initialize Quill editor with improved toolbar
    var quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'font': [] }],
                [{ 'size': ['small', false, 'large', 'huge'] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'script': 'sub'}, { 'script': 'super' }],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
                [{ 'indent': '-1'}, { 'indent': '+1' }],
                [{ 'align': [] }],
                ['blockquote', 'code-block'],
                ['link', 'image', 'video'],
                ['clean']
            ]
        }
    });

    // Sync Quill content to hidden textarea and validate
    var form = document.querySelector('form');
    var contentError = document.getElementById('content-error');
    var contentField = document.querySelector('#content');

    // Sync content whenever editor changes
    quill.on('text-change', function() {
        contentField.value = quill.root.innerHTML;
    });

    form.addEventListener('submit', function(e) {
        var quillText = quill.getText().trim();

        // Final sync before submit
        contentField.value = quill.root.innerHTML;

        // Validate content - check if there's actual text
        if (quillText.length === 0 || quillText === '' || contentField.value.trim() === '' || contentField.value === '<p><br></p>') {
            e.preventDefault();
            e.stopPropagation();
            contentError.classList.remove('hidden');
            document.getElementById('editor').scrollIntoView({ behavior: 'smooth', block: 'center' });
            return false;
        } else {
            contentError.classList.add('hidden');
        }

        return true;
    });

    // Image preview
    function previewImage(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var preview = document.getElementById('preview');
            var previewContainer = document.getElementById('image-preview');
            preview.src = reader.result;
            previewContainer.classList.remove('hidden');
        };
        if (event.target.files[0]) {
            reader.readAsDataURL(event.target.files[0]);
        }
    }
</script>
@endpush