@extends('layouts.dashboard')

@push('styles')
    <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css" rel="stylesheet">
    <style>
        #quill-wrapper { display: flex; flex-direction: column; flex: 1; min-height: 0; }
        .ql-toolbar {
            flex-shrink: 0;
            border-left: none !important;
            border-right: none !important;
            border-top: none !important;
            border-bottom: 1px solid #e7e5e4 !important;
            background: #fafaf9;
            padding: 10px 16px;
        }
        .ql-container {
            flex: 1 !important;
            height: auto !important;
            min-height: 0;
            overflow-y: auto;
            border: none !important;
            font-family: 'Satoshi', sans-serif;
            font-size: 1rem;
            line-height: 1.75;
        }
        .ql-editor {
            padding: 2rem 3rem;
            color: #111;
        }
        .ql-editor.ql-blank::before { color: #a8a29e; font-style: normal; left: 3rem; right: 3rem; top: 2rem; }
        .ql-editor h1 { font-size: 2rem; font-weight: 900; line-height: 1.2; margin-bottom: 1rem; color: #000; }
        .ql-editor h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.75rem; color: #111; }
        .ql-editor h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; color: #1a1a1a; }
        .ql-editor p  { margin-bottom: 1rem; }
        .ql-editor blockquote { border-left: 3px solid #00b4d8; padding-left: 1.25rem; color: #57534e; font-style: italic; margin: 1.25rem 0; }
        .ql-editor pre { background: #f5f5f4; border-radius: 0.75rem; padding: 1rem 1.25rem; font-size: 0.875rem; }
        .ql-editor img { max-width: 100%; height: auto; border-radius: 0.75rem; margin: 1.25rem auto; display: block; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .ql-editor a { color: #00b4d8; text-decoration: underline; }
        .editor-card.focused { border-color: #00b4d8 !important; }
        .sidebar-scroll::-webkit-scrollbar { width: 4px; }
        .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(0,180,216,0.25); border-radius: 4px; }
    </style>
@endpush

@section('page-title', 'Novo Blog')
@section('page-subtitle', 'Preencha os dados para criar um novo blog')

@section('content')

    @if ($errors->any())
        <div class="mb-4 p-4 rounded-2xl bg-red-50 border border-red-200 flex flex-wrap gap-x-6 gap-y-1">
            @foreach ($errors->all() as $error)
                <span class="text-sm text-red-600 flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                    </svg>
                    {{ $error }}
                </span>
            @endforeach
        </div>
    @endif

    <form id="main-form" method="POST" action="{{ route('blogs.store') }}"
          class="flex gap-5" style="height: calc(100vh - 205px);">
        @csrf

        {{-- ══ LEFT: Editor de conteúdo ══ --}}
        <div id="editor-card" class="editor-card flex-1 min-w-0 bg-white rounded-2xl border border-stone-200 flex flex-col overflow-hidden transition-colors">
            <div class="px-6 py-4 border-b border-stone-100 flex items-center justify-between flex-shrink-0">
                <div>
                    <p class="text-sm font-semibold text-black">
                        Conteúdo do blog <span class="text-red-500">*</span>
                        <span id="editor-lang-label" class="ml-2 inline-block px-2 py-0.5 rounded-lg bg-brand-500/10 text-brand-600 text-xs font-semibold align-middle">PT</span>
                    </p>
                    <p class="text-xs text-stone-400 mt-0.5">Use a barra de ferramentas para formatar e inserir imagens</p>
                </div>
            </div>
            <div id="quill-wrapper">
                <div id="quill-editor"></div>
            </div>
            <textarea name="translations[pt][content]" id="content-pt" class="hidden">{{ old('translations.pt.content') }}</textarea>
            <textarea name="translations[en][content]" id="content-en" class="hidden">{{ old('translations.en.content') }}</textarea>
            @error('translations.pt.content')
                <p class="px-6 py-2 text-xs text-red-600 bg-red-50 border-t border-red-100 flex-shrink-0">Conteúdo (PT): {{ $message }}</p>
            @enderror
            @error('translations.en.content')
                <p class="px-6 py-2 text-xs text-red-600 bg-red-50 border-t border-red-100 flex-shrink-0">Content (EN): {{ $message }}</p>
            @enderror
        </div>

        {{-- ══ RIGHT: Informações ══ --}}
        <div class="w-[360px] flex-shrink-0 bg-white rounded-2xl border border-stone-200 flex flex-col overflow-hidden">
            <div class="px-6 py-4 border-b border-stone-100 flex-shrink-0">
                <p class="text-sm font-semibold text-black">Informações do blog</p>
            </div>

            <div class="flex-1 overflow-y-auto sidebar-scroll p-6 space-y-5">

                {{-- Pestañas de idioma (PT / EN) --}}
                <div class="flex gap-2 border-b border-stone-200">
                    <button type="button" data-tab="pt" onclick="switchLang('pt')"
                        class="lang-tab px-3 py-2 text-sm font-semibold border-b-2 -mb-px transition-colors">Português</button>
                    <button type="button" data-tab="en" onclick="switchLang('en')"
                        class="lang-tab px-3 py-2 text-sm font-semibold border-b-2 -mb-px transition-colors">English</button>
                </div>

                {{-- Português --}}
                <div data-panel="pt" class="lang-panel space-y-5">
                    <div>
                        <label class="block text-sm font-semibold text-black mb-1.5">Título (PT) <span class="text-red-500">*</span></label>
                        <input type="text" name="translations[pt][title]" id="title-pt" value="{{ old('translations.pt.title') }}"
                               placeholder="Título do blog"
                               class="w-full px-4 py-3 rounded-2xl border-2 border-stone-200 bg-stone-50 text-black text-sm
                                      focus:outline-none focus:border-brand-500 focus:bg-white transition-all
                                      @error('translations.pt.title') border-red-300 bg-red-50 @enderror">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-black mb-1.5">Slug (PT)</label>
                        <input type="text" name="translations[pt][slug]" id="slug-pt" value="{{ old('translations.pt.slug') }}" readonly
                               placeholder="meu-blog"
                               class="w-full px-4 py-3 rounded-2xl border-2 border-stone-200 bg-stone-100 text-stone-400 text-sm cursor-not-allowed select-none outline-none focus:border-stone-200
                                      @error('translations.pt.slug') border-red-300 bg-red-50 @enderror">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-black mb-1.5">Descrição (PT) <span class="text-red-500">*</span></label>
                        <textarea name="translations[pt][description]" id="desc-pt" rows="3"
                                  placeholder="Breve descrição do blog"
                                  class="w-full px-4 py-3 rounded-2xl border-2 border-stone-200 bg-stone-50 text-black text-sm
                                         focus:outline-none focus:border-brand-500 focus:bg-white transition-all resize-none
                                         @error('translations.pt.description') border-red-300 bg-red-50 @enderror">{{ old('translations.pt.description') }}</textarea>
                        @error('translations.pt.description')
                            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                {{-- English --}}
                <div data-panel="en" class="lang-panel space-y-5 hidden">
                    <div>
                        <label class="block text-sm font-semibold text-black mb-1.5">Title (EN) <span class="text-red-500">*</span></label>
                        <input type="text" name="translations[en][title]" id="title-en" value="{{ old('translations.en.title') }}"
                               placeholder="Blog title"
                               class="w-full px-4 py-3 rounded-2xl border-2 border-stone-200 bg-stone-50 text-black text-sm
                                      focus:outline-none focus:border-brand-500 focus:bg-white transition-all
                                      @error('translations.en.title') border-red-300 bg-red-50 @enderror">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-black mb-1.5">Slug (EN)</label>
                        <input type="text" name="translations[en][slug]" id="slug-en" value="{{ old('translations.en.slug') }}" readonly
                               placeholder="my-blog"
                               class="w-full px-4 py-3 rounded-2xl border-2 border-stone-200 bg-stone-100 text-stone-400 text-sm cursor-not-allowed select-none outline-none focus:border-stone-200
                                      @error('translations.en.slug') border-red-300 bg-red-50 @enderror">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-black mb-1.5">Description (EN) <span class="text-red-500">*</span></label>
                        <textarea name="translations[en][description]" id="desc-en" rows="3"
                                  placeholder="Short blog description"
                                  class="w-full px-4 py-3 rounded-2xl border-2 border-stone-200 bg-stone-50 text-black text-sm
                                         focus:outline-none focus:border-brand-500 focus:bg-white transition-all resize-none
                                         @error('translations.en.description') border-red-300 bg-red-50 @enderror">{{ old('translations.en.description') }}</textarea>
                        @error('translations.en.description')
                            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                {{-- Imagem de capa --}}
                <div>
                    <label class="block text-sm font-semibold text-black mb-1.5">Imagem de capa <span class="text-red-500">*</span></label>
                    <input type="hidden" name="image_url" id="image_url_hidden" value="{{ old('image_url') }}">
                    <input type="hidden" name="image_path" id="image_path_hidden" value="{{ old('image_path') }}">

                    <div id="upload-zone"
                         class="cursor-pointer rounded-2xl border-2 border-dashed border-stone-200 p-5 text-center
                                hover:border-brand-500 hover:bg-brand-500/5 transition-all group
                                @error('image_url') border-red-300 @enderror"
                         onclick="document.getElementById('img-file-input').click()">
                        <div class="flex flex-col items-center gap-2 pointer-events-none">
                            <div class="w-10 h-10 rounded-xl bg-stone-100 group-hover:bg-brand-50 flex items-center justify-center transition-colors">
                                <svg class="w-5 h-5 text-stone-400 group-hover:text-brand-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                            </div>
                            <div>
                                <span class="text-sm font-semibold text-stone-600 group-hover:text-brand-500 transition-colors">Selecionar imagem de capa</span>
                                <p class="text-xs text-stone-400 mt-0.5">JPG, PNG, WebP — será recortada em 4:3</p>
                            </div>
                        </div>
                        <input type="file" id="img-file-input" accept="image/jpeg,image/png,image/webp" class="hidden">
                    </div>

                    <div id="img-preview" class="hidden mt-2.5 rounded-xl overflow-hidden border border-stone-200 aspect-square bg-stone-100 relative">
                        <img id="img-preview-el" src="" alt="" class="w-full h-full object-cover">
                        {{-- Botão tacho: elimina a imagem para poder trocar --}}
                        <button type="button" id="img-delete-btn" onclick="removeImage()"
                                class="absolute top-2 right-2 w-9 h-9 rounded-xl bg-white/90 hover:bg-red-500 text-red-500 hover:text-white
                                       shadow-md flex items-center justify-center transition-all cursor-pointer disabled:opacity-60"
                                title="Eliminar imagem">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    @error('image_url')
                        <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Link --}}
                <div>
                    <label class="block text-sm font-semibold text-black mb-1.5">
                        Link <span class="text-stone-400 font-normal text-xs">(opcional)</span>
                    </label>
                    <input type="url" name="link" value="{{ old('link') }}"
                           placeholder="https://exemplo.com"
                           class="w-full px-4 py-3 rounded-2xl border-2 border-stone-200 bg-stone-50 text-black text-sm
                                  focus:outline-none focus:border-brand-500 focus:bg-white transition-all
                                  @error('link') border-red-300 bg-red-50 @enderror">
                </div>

                {{-- País --}}
                <div>
                    <label class="block text-sm font-semibold text-black mb-1.5">País <span class="text-red-500">*</span></label>
                    <select name="idcountry" required
                            class="w-full px-4 py-3 rounded-2xl border-2 border-stone-200 bg-stone-50 text-black text-sm
                                   focus:outline-none focus:border-brand-500 focus:bg-white transition-all cursor-pointer
                                   @error('idcountry') border-red-300 bg-red-50 @enderror">
                        <option value="">Selecionar país</option>
                        @foreach ($countries as $country)
                            @php $country = (object) $country; @endphp
                            <option value="{{ $country->idcountry }}"
                                {{ old('idcountry') == $country->idcountry ? 'selected' : '' }}>
                                {{ $country->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Categoria --}}
                <div>
                    <label class="block text-sm font-semibold text-black mb-1.5">Categoria <span class="text-red-500">*</span></label>
                    <select name="idcategory" required
                            class="w-full px-4 py-3 rounded-2xl border-2 border-stone-200 bg-stone-50 text-black text-sm
                                   focus:outline-none focus:border-brand-500 focus:bg-white transition-all cursor-pointer
                                   @error('idcategory') border-red-300 bg-red-50 @enderror">
                        <option value="">Selecionar categoria</option>
                        @foreach ($categories as $cat)
                            @php $cat = (object) $cat; @endphp
                            <option value="{{ $cat->idcategory }}"
                                {{ old('idcategory') == $cat->idcategory ? 'selected' : '' }}>
                                {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

            </div>

            {{-- Botões fixos no rodapé --}}
            <div class="p-5 border-t border-stone-100 flex gap-3 flex-shrink-0">
                <button id="btn-cancel" type="button" onclick="cancelNav(this)"
                        data-href="{{ route('blogs.index') }}"
                        class="flex-1 py-3 rounded-2xl border-2 border-stone-200 text-stone-600 font-semibold text-sm
                               hover:bg-stone-50 transition-all cursor-pointer flex items-center justify-center gap-2
                               disabled:opacity-70 disabled:cursor-not-allowed">
                    <svg id="cancel-spinner" class="hidden w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                    </svg>
                    <span id="cancel-text">Cancelar</span>
                </button>
                <button id="btn-submit" type="submit"
                        class="flex-1 py-3 rounded-2xl bg-brand-600 hover:bg-brand-700 text-white font-semibold text-sm
                               transition-all cursor-pointer flex items-center justify-center gap-2
                               disabled:opacity-70 disabled:cursor-not-allowed">
                    <svg id="btn-spinner" class="hidden w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                    </svg>
                    <span id="btn-text">Criar blog</span>
                </button>
            </div>
        </div>

    </form>

{{-- ══ Modal de recorte ══ --}}
<div id="crop-modal" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4">
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeCropModal()"></div>
    <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md z-10">
        <div class="px-6 py-4 border-b border-stone-100 flex items-center justify-between">
            <div>
                <p class="font-bold text-sm text-black">Recortar imagen de portada</p>
                <p class="text-xs text-stone-400 mt-0.5">Ajusta el área — proporción 1:1 fija</p>
            </div>
            <button type="button" onclick="closeCropModal()" class="w-8 h-8 rounded-xl hover:bg-stone-100 flex items-center justify-center text-stone-400 hover:text-black transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="p-4">
            <div class="rounded-xl overflow-hidden bg-stone-900" style="max-height: 380px;">
                <img id="crop-img" src="" alt="" style="max-width: 100%; display: block;">
            </div>
        </div>
        <div class="px-6 pb-5 flex gap-3">
            <button type="button" onclick="closeCropModal()"
                    class="flex-1 py-2.5 rounded-xl border-2 border-stone-200 text-stone-600 text-sm font-semibold hover:bg-stone-50 transition-all">
                Cancelar
            </button>
            <button type="button" id="crop-confirm"
                    class="flex-1 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-700 text-white text-sm font-semibold transition-all flex items-center justify-center gap-2 disabled:opacity-60">
                <svg id="crop-spinner" class="hidden w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                </svg>
                <span id="crop-confirm-text">Recortar e subir</span>
            </button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>
<script>
    // ── Quill ──────────────────────────────────────────────────
    const quill = new Quill('#quill-editor', {
        theme: 'snow',
        placeholder: 'Comece a escrever o conteúdo do blog...',
        modules: {
            toolbar: [
                [{ header: [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ color: [] }, { background: [] }],
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ align: [] }],
                ['blockquote', 'code-block'],
                ['link', 'image'],
                ['clean']
            ]
        }
    });

    const editorCard = document.getElementById('editor-card');
    quill.on('focus', () => editorCard.classList.add('focused'));
    quill.on('blur',  () => editorCard.classList.remove('focused'));

    // ── Idiomas (PT / EN) ──────────────────────────────────────
    const contentBox = {
        pt: document.getElementById('content-pt'),
        en: document.getElementById('content-en'),
    };
    let currentLang = 'pt';

    // Carga inicial: contenido PT en el editor
    if (contentBox.pt.value) quill.root.innerHTML = contentBox.pt.value;

    function slugify(value) {
        return value.toLowerCase()
            .normalize('NFD').replace(/[̀-ͯ]/g, '')
            .replace(/[^a-z0-9\s-]/g, '')
            .trim().replace(/\s+/g, '-').replace(/-+/g, '-');
    }

    // Auto-slug por idioma
    ['pt', 'en'].forEach(function (lang) {
        const t = document.getElementById('title-' + lang);
        const s = document.getElementById('slug-' + lang);
        t.addEventListener('input', function () { s.value = slugify(t.value); });
    });

    // Alterna idioma: guarda el HTML del editor actual y carga el del nuevo idioma
    function switchLang(lang) {
        if (lang !== currentLang) {
            contentBox[currentLang].value = quill.root.innerHTML;
            currentLang = lang;
            quill.root.innerHTML = contentBox[lang].value || '';
        }
        document.querySelectorAll('.lang-panel').forEach(function (p) {
            p.classList.toggle('hidden', p.dataset.panel !== lang);
        });
        document.querySelectorAll('.lang-tab').forEach(function (tb) {
            const active = tb.dataset.tab === lang;
            tb.classList.toggle('border-brand-500', active);
            tb.classList.toggle('text-brand-600', active);
            tb.classList.toggle('border-transparent', !active);
            tb.classList.toggle('text-stone-400', !active);
        });
        document.getElementById('editor-lang-label').textContent = lang.toUpperCase();
    }

    // ── Image Upload + Crop ────────────────────────────────────
    let cropper = null;
    const imagePathHidden = document.getElementById('image_path_hidden');
    let currentUploadedPath = imagePathHidden.value || '';
    const imageUrlHidden = document.getElementById('image_url_hidden');
    const fileInput      = document.getElementById('img-file-input');
    const cropModal      = document.getElementById('crop-modal');
    const cropImg        = document.getElementById('crop-img');
    const cropConfirmBtn = document.getElementById('crop-confirm');
    const imgPreview     = document.getElementById('img-preview');
    const imgPreviewEl   = document.getElementById('img-preview-el');
    const uploadZone     = document.getElementById('upload-zone');

    // Estado inicial: se já existe imagem (ex: falha de validação), mostra preview e bloqueia upload
    if (imageUrlHidden.value) {
        imgPreviewEl.src = imageUrlHidden.value;
        imgPreview.classList.remove('hidden');
        uploadZone.classList.add('hidden');
    }

    fileInput.addEventListener('change', function () {
        const file = this.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = (e) => {
            cropImg.onload = () => {
                if (cropper) { cropper.destroy(); cropper = null; }
                cropper = new Cropper(cropImg, {
                    aspectRatio: 4 / 3,
                    viewMode: 1,
                    autoCropArea: 0.85,
                    movable: true,
                    zoomable: true,
                    rotatable: false,
                    scalable: false,
                });
            };
            cropImg.src = e.target.result;
            cropModal.classList.remove('hidden');
        };
        reader.readAsDataURL(file);
        this.value = '';
    });

    function closeCropModal() {
        cropModal.classList.add('hidden');
        if (cropper) { cropper.destroy(); cropper = null; }
    }

    // Elimina uma imagem do servidor pelo seu path
    async function deleteImage(path) {
        if (!path) return;
        try {
            await fetch('{{ route("blogs.delete-image") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ path })
            });
        } catch (e) {
            console.error('Erro ao deletar imagem', e);
        }
    }

    // Botão tacho: pede confirmação, elimina a imagem e libera o upload
    function removeImage() {
        window.confirm({
            title:       'Eliminar imagem',
            message:     'A imagem de capa será removida. Você poderá subir outra depois.',
            confirmText: 'Eliminar',
            danger:      true,
            onConfirm: async () => {
                const btn = document.getElementById('img-delete-btn');
                btn.disabled = true;
                await deleteImage(currentUploadedPath);

                currentUploadedPath   = '';
                imagePathHidden.value = '';
                imageUrlHidden.value  = '';
                imgPreviewEl.src      = '';
                imgPreview.classList.add('hidden');
                uploadZone.classList.remove('hidden');  // libera novo upload
                btn.disabled = false;
            }
        });
    }

    cropConfirmBtn.addEventListener('click', async () => {
        if (!cropper) return;

        const canvas = cropper.getCroppedCanvas({ width: 1200, height: 900 });
        cropConfirmBtn.disabled = true;
        document.getElementById('crop-spinner').classList.remove('hidden');
        document.getElementById('crop-confirm-text').textContent = 'Subindo...';

        try {
            const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.9));

            // Proxy a través de Laravel (evita CORS del bucket S3)
            const formData = new FormData();
            formData.append('image', blob, 'cover.jpg');

            const resp = await fetch('{{ route("blogs.upload") }}', {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
                body: formData
            });

            let data;
            try { data = await resp.json(); } catch (e) { data = {}; }

            if (!resp.ok) throw new Error(data.error || 'Erro ao subir imagem');
            const { fileUrl, path } = data;

            currentUploadedPath   = path;
            imagePathHidden.value = path;
            imageUrlHidden.value  = fileUrl;
            imgPreviewEl.src      = fileUrl;
            imgPreview.classList.remove('hidden');
            uploadZone.classList.add('hidden');   // bloqueia novo upload até eliminar

            closeCropModal();
        } catch (err) {
            alert('Error: ' + err.message);
        } finally {
            cropConfirmBtn.disabled = false;
            document.getElementById('crop-spinner').classList.add('hidden');
            document.getElementById('crop-confirm-text').textContent = 'Recortar e subir';
        }
    });

    // ── Submit ─────────────────────────────────────────────────
    document.getElementById('main-form').addEventListener('submit', function (e) {
        e.preventDefault();

        // Guarda el contenido del idioma que se está editando
        contentBox[currentLang].value = quill.root.innerHTML;

        // Valida que ambos idiomas tengan contenido
        const empty = ['pt', 'en'].filter(function (l) {
            return contentBox[l].value.replace(/<[^>]*>/g, '').trim().length === 0;
        });
        if (empty.length) {
            switchLang(empty[0]);
            editorCard.classList.add('!border-red-400');
            quill.focus();
            return;
        }

        if (!imageUrlHidden.value) {
            document.getElementById('upload-zone').classList.add('!border-red-400', 'bg-red-50/30');
            document.getElementById('upload-zone').scrollIntoView({ behavior: 'smooth', block: 'center' });
            return;
        }

        const btn     = document.getElementById('btn-submit');
        const spinner = document.getElementById('btn-spinner');
        const text    = document.getElementById('btn-text');
        btn.disabled  = true;
        spinner.classList.remove('hidden');
        text.textContent = 'Criando...';
        document.getElementById('btn-cancel').disabled = true;
        setTimeout(() => this.submit(), 300);
    });

    function cancelNav(btn) {
        btn.disabled = true;
        document.getElementById('cancel-spinner').classList.remove('hidden');
        document.getElementById('cancel-text').textContent = 'Voltando...';
        document.getElementById('btn-submit').disabled = true;
        setTimeout(() => { window.location.href = btn.dataset.href; }, 300);
    }

    // Init idioma: si hay errores de validación en inglés, abre esa pestaña
    @php $hasEnError = $errors->has('translations.en.title') || $errors->has('translations.en.slug') || $errors->has('translations.en.description') || $errors->has('translations.en.content'); @endphp
    switchLang(@json($hasEnError ? 'en' : 'pt'));
</script>
@endpush