@extends('admin.layout')

@section('title', 'Modifica 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">Modifica Articolo</h2>
    </div>

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

        <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', $article->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', $article->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', $article->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>

                @if($article->featured_image)
                    <div class="mb-4" id="current-image-container">
                        <img src="{{ $article->featured_image_url }}" alt="{{ $article->title }}" class="max-w-sm rounded-lg shadow-md">
                        <p class="mt-2 text-sm text-gray-500">Immagine attuale</p>

                        <label class="flex items-center mt-3">
                            <input
                                type="checkbox"
                                id="remove_featured_image"
                                name="remove_featured_image"
                                value="1"
                                class="w-5 h-5 text-red-600 border-gray-300 rounded focus:ring-red-500"
                                onchange="toggleImageRemoval(this)"
                            >
                            <span class="ml-3 text-sm font-medium text-red-600">Rimuovi immagine in evidenza</span>
                        </label>
                    </div>
                @endif

                <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)"
                >
                <p class="mt-1 text-sm text-gray-500">
                    @if($article->featured_image)
                        Carica una nuova immagine per sostituire quella attuale
                    @else
                        Carica un'immagine in evidenza
                    @endif
                </p>

                <div id="image-preview" class="mt-4 hidden">
                    <img id="preview" class="max-w-sm rounded-lg shadow-md">
                    <p class="mt-2 text-sm text-gray-500">Nuova immagine</p>
                </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', $article->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', $article->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', $article->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</span>
                </label>
                <p class="mt-2 text-sm text-gray-500">
                    @if($article->is_published && $article->published_at)
                        Articolo pubblicato il {{ $article->published_at->format('d/m/Y H:i') }}
                    @else
                        L'articolo sarà visibile nel blog non appena pubblicato
                    @endif
                </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">
                Aggiorna 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']
            ]
        }
    });

    // Load existing content with conversion for backward compatibility
    var contentField = document.querySelector('#content');

    // Convert old Quill 1.3.7 format to Quill 2.0 format
    function convertLegacyListsToQuill2(html) {
        if (!html) return html;

        // Create a temporary container
        var temp = document.createElement('div');
        temp.innerHTML = html;

        // Convert unordered lists (ul > li) to Quill 2.0 format
        var ulLists = temp.querySelectorAll('ul');
        ulLists.forEach(function(ul) {
            var listItems = ul.querySelectorAll('li');
            listItems.forEach(function(li) {
                if (!li.hasAttribute('data-list')) {
                    li.setAttribute('data-list', 'bullet');
                }
            });
            // Replace ul with its children
            while (ul.firstChild) {
                ul.parentNode.insertBefore(ul.firstChild, ul);
            }
            ul.parentNode.removeChild(ul);
        });

        // Convert ordered lists (ol > li) to Quill 2.0 format
        var olLists = temp.querySelectorAll('ol');
        olLists.forEach(function(ol) {
            var listItems = ol.querySelectorAll('li');
            listItems.forEach(function(li) {
                if (!li.hasAttribute('data-list')) {
                    li.setAttribute('data-list', 'ordered');
                }
            });
            // Replace ol with its children
            while (ol.firstChild) {
                ol.parentNode.insertBefore(ol.firstChild, ol);
            }
            ol.parentNode.removeChild(ol);
        });

        return temp.innerHTML;
    }

    // Load and convert content
    var convertedContent = convertLegacyListsToQuill2(contentField.value);
    quill.root.innerHTML = convertedContent;

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

    // 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]);
            // Uncheck remove image checkbox if user uploads a new image
            var removeCheckbox = document.getElementById('remove_featured_image');
            if (removeCheckbox) {
                removeCheckbox.checked = false;
            }
        }
    }

    // Toggle image removal - disable file input when removing image
    function toggleImageRemoval(checkbox) {
        var fileInput = document.getElementById('featured_image');
        if (checkbox.checked) {
            fileInput.disabled = true;
            fileInput.value = '';
            var previewContainer = document.getElementById('image-preview');
            if (previewContainer) {
                previewContainer.classList.add('hidden');
            }
        } else {
            fileInput.disabled = false;
        }
    }
</script>
@endpush