{{-- ── Modal cancelar con motivo ───────────────────────────────
     Uso desde JS:
       cancelWithReason({
         title:   'Cancelar reserva',        // opcional
         message: 'Informe o motivo...',     // opcional
         onConfirm: (reason) => { ... },     // recibe el texto ingresado
       })
--}}

<div id="cancel-reason-overlay"
     class="fixed inset-0 z-50 hidden items-center justify-center p-4 backdrop-blur-sm bg-black/75">

    <div id="cancel-reason-box"
         class="relative w-full max-w-sm rounded-2xl border border-white/10 bg-[#111111] p-8 shadow-2xl shadow-black/80
                scale-95 opacity-0 transition-all duration-200">

        {{-- Cerrar --}}
        <button id="cr-close"
                class="absolute top-4 right-4 p-1.5 rounded-lg text-gray-500 hover:text-white hover:bg-white/8 transition-all cursor-pointer border-0 bg-transparent">
            <svg class="size-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>

        {{-- Icono --}}
        <div class="size-14 rounded-2xl bg-red-500/10 flex items-center justify-center mx-auto mb-6">
            <svg class="size-7 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
            </svg>
        </div>

        {{-- Texto --}}
        <h3 id="cr-title" class="font-heading font-bold text-white text-xl text-center mb-2"></h3>
        <p id="cr-message" class="text-gray-400 text-sm text-center leading-relaxed mb-5"></p>

        {{-- Textarea motivo --}}
        <textarea id="cr-reason"
                  rows="3"
                  maxlength="500"
                  placeholder="{{ __('Descreva o motivo do cancelamento') }}"
                  class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder-gray-600
                         focus:outline-none focus:border-red-500/50 resize-none transition-colors"></textarea>
        <p id="cr-reason-error" class="hidden text-red-400 text-xs mt-1.5 mb-4">{{ __('O motivo é obrigatório.') }}</p>
        <div class="mb-6"></div>

        {{-- Botones --}}
        <div class="flex gap-3">
            <button id="cr-cancel"
                    class="flex-1 py-3 rounded-xl border border-white/15 text-gray-300 font-semibold text-sm
                           hover:border-white/30 hover:text-white hover:bg-white/5 transition-all cursor-pointer bg-transparent">
                {{ __('Voltar') }}
            </button>
            <button id="cr-ok"
                    class="flex-1 py-3 rounded-xl bg-red-500 hover:bg-red-600 font-semibold text-sm text-white transition-all cursor-pointer border-0">
                {{ __('Confirmar') }}
            </button>
        </div>

    </div>
</div>

<script>
(function () {
    const overlay    = document.getElementById('cancel-reason-overlay');
    const box        = document.getElementById('cancel-reason-box');
    const titleEl    = document.getElementById('cr-title');
    const msgEl      = document.getElementById('cr-message');
    const textarea   = document.getElementById('cr-reason');
    const reasonErr  = document.getElementById('cr-reason-error');
    const btnOk      = document.getElementById('cr-ok');
    const btnBack    = document.getElementById('cr-cancel');
    const btnClose   = document.getElementById('cr-close');

    let locked   = false;
    let callback = null;

    function open(opts = {}) {
        if (locked) return;

        locked             = false;
        btnOk.disabled     = false;
        btnBack.disabled   = false;
        btnClose.disabled  = false;
        btnOk.innerHTML    = opts.confirmText ?? '{{ __('Confirmar') }}';
        textarea.value     = '';
        reasonErr.classList.add('hidden');
        textarea.classList.remove('border-red-500/60');

        titleEl.textContent = opts.title   ?? '{{ __('Cancelar reserva') }}';
        msgEl.textContent   = opts.message ?? '{{ __('Informe o motivo do cancelamento.') }}';
        callback            = opts.onConfirm ?? null;

        overlay.classList.remove('hidden');
        overlay.classList.add('flex');
        requestAnimationFrame(() => {
            box.classList.remove('scale-95', 'opacity-0');
            box.classList.add('scale-100', 'opacity-100');
        });
    }

    function close() {
        if (locked) return;
        box.classList.add('scale-95', 'opacity-0');
        box.classList.remove('scale-100', 'opacity-100');
        setTimeout(() => {
            overlay.classList.add('hidden');
            overlay.classList.remove('flex');
        }, 200);
    }

    function forceClose() {
        box.classList.add('scale-95', 'opacity-0');
        box.classList.remove('scale-100', 'opacity-100');
        setTimeout(() => {
            overlay.classList.add('hidden');
            overlay.classList.remove('flex');
        }, 200);
    }

    function unlock() {
        locked            = false;
        btnOk.disabled    = false;
        btnBack.disabled  = false;
        btnClose.disabled = false;
        btnOk.textContent = '{{ __('Confirmar') }}';
    }

    function lock() {
        locked           = true;
        btnOk.disabled   = true;
        btnBack.disabled = true;
        btnClose.disabled = true;
        btnOk.innerHTML  = `<svg class="animate-spin size-4 mx-auto" 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-8v8H4z"/>
        </svg>`;
    }

    btnOk.addEventListener('click', () => {
        if (locked) return;

        if (!textarea.value.trim()) {
            reasonErr.classList.remove('hidden');
            textarea.classList.add('border-red-500/60');
            textarea.focus();
            return;
        }

        lock();
        if (callback) callback(textarea.value.trim());
    });

    textarea.addEventListener('input', () => {
        if (textarea.value.trim()) {
            reasonErr.classList.add('hidden');
            textarea.classList.remove('border-red-500/60');
        }
    });

    btnBack.addEventListener('click',  close);
    btnClose.addEventListener('click', close);

    window.cancelWithReason   = open;
    window.closeCancelReason  = forceClose;
    window.unlockCancelReason = unlock;
})();
</script>