@extends('layouts.dashboard')

@push('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css" rel="stylesheet">
@endpush

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

@section('content')

    <div class="max-w-2xl mx-auto">

        @if ($errors->any())
            <div class="mb-6 p-5 rounded-2xl bg-red-50 border border-red-200">
                <ul class="text-sm text-red-600 space-y-1.5">
                    @foreach ($errors->all() as $error)
                        <li class="flex items-start gap-2">
                            <svg class="w-4 h-4 mt-0.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 }}
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="bg-white rounded-2xl border border-stone-200 p-8">
            <form id="main-form" method="POST" action="{{ route('testimonials.store') }}" class="space-y-5">
                @csrf

                {{-- Autor --}}
                <div>
                    <label class="block text-sm font-semibold text-black mb-1.5">Autor <span class="text-red-500">*</span></label>
                    <input type="text" name="author" value="{{ old('author') }}" required placeholder="Nome do autor"
                        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('author') border-red-300 bg-red-50 @enderror">
                </div>

                {{-- Traduções (PT / EN) --}}
                <div>
                    <div class="flex gap-2 mb-4 border-b border-stone-200">
                        <button type="button" data-tab="pt" onclick="switchLang('pt')"
                            class="lang-tab px-4 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-4 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]" value="{{ old('translations.pt.title') }}" placeholder="Título do Itasted"
                                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">Conteúdo (PT) <span class="text-red-500">*</span></label>
                            <textarea name="translations[pt][content]" rows="8" placeholder="Escreva o Itasted..."
                                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.content') border-red-300 bg-red-50 @enderror">{{ old('translations.pt.content') }}</textarea>
                        </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]" value="{{ old('translations.en.title') }}" placeholder="Testimonial 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">Content (EN) <span class="text-red-500">*</span></label>
                            <textarea name="translations[en][content]" rows="8" placeholder="Write the testimonial..."
                                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.content') border-red-300 bg-red-50 @enderror">{{ old('translations.en.content') }}</textarea>
                        </div>
                    </div>
                </div>

                {{-- Imagem --}}
                <div>
                    <label class="block text-sm font-semibold text-black mb-1.5">Imagem <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 id="upload-label" class="text-sm font-semibold text-stone-600 group-hover:text-brand-500 transition-colors">Selecionar imagem</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 bg-stone-100 relative aspect-[4/3]">
                        <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>

                {{-- Destaque --}}
                <div class="flex items-center gap-3 py-1">
                    <input type="checkbox" name="is_featured" id="is_featured" value="1"
                        {{ old('is_featured') ? 'checked' : '' }}
                        class="w-5 h-5 rounded-lg border-stone-300 accent-brand-500 cursor-pointer">
                    <label for="is_featured" class="text-sm text-stone-600 cursor-pointer select-none">
                        Marcar como destaque
                    </label>
                </div>

                {{-- Acciones --}}
                <div class="flex gap-3 pt-2">
                    <button id="btn-cancel" type="button" onclick="cancelNav(this)"
                            data-href="{{ route('testimonials.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 Itasted</span>
                    </button>
                </div>

            </form>
        </div>
    </div>

{{-- ══ 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-lg 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 imagem</p>
                <p class="text-xs text-stone-400 mt-0.5">Ajusta el área — proporción 4:3 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://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>
<script>
    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("testimonials.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 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));

            const formData = new FormData();
            formData.append('image', blob, 'testimonial.jpg');

            const resp = await fetch('{{ route("testimonials.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';
        }
    });

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

        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);
    }

    // ── Pestañas de idioma (PT / EN) ──
    function switchLang(lang) {
        document.querySelectorAll('.lang-panel').forEach(p => {
            p.classList.toggle('hidden', p.dataset.panel !== lang);
        });
        document.querySelectorAll('.lang-tab').forEach(t => {
            const active = t.dataset.tab === lang;
            t.classList.toggle('border-brand-500', active);
            t.classList.toggle('text-brand-600', active);
            t.classList.toggle('border-transparent', !active);
            t.classList.toggle('text-stone-400', !active);
        });
    }

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