<?php
/**
 * ASISMA CRM - Editor embebido de SERVICIOS (planes, características, bonos y
 * branding del documento premium). Se incluye en el maestro de Productos: un
 * servicio es un producto de tipo servicio; su nombre y marca se administran
 * en el producto (aquí quedan en solo lectura, el server igual los fuerza).
 * Requiere: jQuery, SweetAlert2, Lucide y la variable JS APP_URL ya definida.
 */
?>

<!-- Editor del servicio (planes/bonos) en MODAL; se pinta por AJAX con servicios/detalle -->
<div id="editorServicioOverlay" class="hidden fixed inset-0 z-40 flex items-start justify-center bg-slate-950/80 backdrop-blur-sm overflow-y-auto py-8 px-4">
    <div id="editorServicio" class="w-full max-w-5xl space-y-6"></div>
</div>

<!-- Modal branding/documento del servicio -->
<div id="modalServicio" class="hidden fixed inset-0 z-50 flex items-start justify-center bg-slate-950/80 backdrop-blur-sm overflow-y-auto py-8">
    <div class="bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl w-full max-w-7xl mx-4">
        <div class="flex items-center justify-between px-6 py-4 border-b border-slate-800">
            <h3 id="tituloModalServicio" class="text-lg font-bold text-white">Configuración del Servicio</h3>
            <button onclick="cerrarModalServicio()" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800"><i data-lucide="x" class="w-5 h-5"></i></button>
        </div>
        <div class="flex flex-col xl:flex-row">
        <form id="formServicio" class="p-6 space-y-5 xl:w-[46%] xl:border-r xl:border-slate-800">
            <input type="hidden" name="id" value="">

            <!-- Tabs -->
            <div class="flex gap-1 bg-slate-950 border border-slate-800 rounded-xl p-1 text-xs font-semibold">
                <button type="button" data-tab="datos" class="tab-servicio flex-1 px-3 py-2 rounded-lg bg-blue-600 text-white">Datos</button>
                <button type="button" data-tab="branding" class="tab-servicio flex-1 px-3 py-2 rounded-lg text-slate-400 hover:text-white">Documento / Contenido</button>
            </div>

            <!-- Tab: Datos (nombre y marca se administran en el PRODUCTO) -->
            <div data-panel="datos" class="panel-servicio space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Nombre <span class="normal-case text-slate-600">(se edita en el producto)</span></label>
                        <input type="text" id="servicioNombreSoloLectura" readonly class="block w-full px-3 py-2.5 bg-slate-900/60 border border-slate-800 rounded-xl text-slate-500 text-sm cursor-not-allowed focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Marca <span class="normal-case text-slate-600">(se edita en el producto)</span></label>
                        <input type="text" id="servicioMarcaSoloLectura" readonly class="block w-full px-3 py-2.5 bg-slate-900/60 border border-slate-800 rounded-xl text-slate-500 text-sm cursor-not-allowed focus:outline-none">
                    </div>
                </div>
                <p class="text-[11px] text-slate-500">Para cambiar el nombre, la marca o desactivar el servicio, use el botón "Editar" del producto en el listado.</p>
            </div>

            <!-- Tab: Contenido del documento (la identidad corporativa —
                 colores, logo, transferencia, condiciones y diseño — se
                 configura en la MARCA: Catálogo → Marcas → Cotizaciones/Branding) -->
            <div data-panel="branding" class="panel-servicio hidden space-y-4">
                <p class="text-[11px] text-slate-500">Este es el CONTENIDO de la oferta de ESTE servicio. Los colores, logo, datos de transferencia, condiciones y diseño del documento se configuran en su <b>MARCA</b> (Catálogo → Marcas).</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Rótulo del cliente <span class="normal-case text-slate-600">("Cotización para {rótulo}:")</span></label>
                        <input type="text" name="rotulo_cliente" class="block w-full px-3 py-2.5 bg-slate-950 border border-slate-700 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="su FARMACIA">
                    </div>
                </div>
                <div>
                    <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Párrafos de presentación <span class="normal-case text-slate-600">(separar párrafos con una línea en blanco; se permite &lt;b&gt;negrita&lt;/b&gt;)</span></label>
                    <textarea name="parrafos_presentacion" rows="5" class="block w-full px-3 py-2.5 bg-slate-950 border border-slate-700 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Frase destacada</label>
                        <input type="text" name="frase_destacada" class="block w-full px-3 py-2.5 bg-slate-950 border border-slate-700 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Título de la caja de bonos</label>
                        <input type="text" name="titulo_bonos" class="block w-full px-3 py-2.5 bg-slate-950 border border-slate-700 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Bonos exclusivos por compras antes de 48 horas.">
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Garantía (días)</label>
                        <input type="number" name="garantia_dias" value="30" min="0" class="block w-full px-3 py-2.5 bg-slate-950 border border-slate-700 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Cita de la garantía</label>
                        <input type="text" name="garantia_cita" class="block w-full px-3 py-2.5 bg-slate-950 border border-slate-700 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Prueba el sistema por 30 días...">
                    </div>
                </div>
                <div>
                    <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Letra chica de la garantía <span class="normal-case text-slate-600">(una condición por línea)</span></label>
                    <textarea name="garantia_condiciones" rows="2" class="block w-full px-3 py-2.5 bg-slate-950 border border-slate-700 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
            </div>

            <div class="flex items-center justify-end gap-4 pt-2 border-t border-slate-800">
                <button type="button" onclick="cerrarModalServicio()" class="px-5 py-2.5 bg-slate-950 hover:bg-red-500/10 border border-red-500/40 hover:border-red-500/70 text-red-400 font-medium rounded-xl text-sm transition-colors">Cancelar</button>
                <button type="submit" class="px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white font-semibold rounded-xl text-sm transition-colors">Guardar Configuración</button>
            </div>
        </form>

        <!-- Vista previa en vivo del documento: reusa la MISMA plantilla del
             PDF/cotización pública (cotizaciones/publica_servicio) con el
             branding tal como está en el formulario en este instante (sin
             guardar). El plan/cliente mostrados son de MUESTRA. -->
        <div class="flex flex-col bg-slate-950 xl:w-[54%] xl:rounded-br-2xl overflow-hidden">
            <div class="flex items-center justify-between px-4 py-3 border-b border-slate-800 shrink-0">
                <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
                    <i data-lucide="eye" class="w-3.5 h-3.5 text-emerald-500"></i>
                    Vista previa en vivo <span class="text-slate-600 font-normal normal-case">(cliente y plan de muestra)</span>
                </span>
                <span id="brandingPreviewEstado" class="text-[10px] text-slate-500"></span>
            </div>
            <iframe id="brandingPreviewFrame" class="w-full flex-1 bg-white" style="min-height: 640px; border: 0;" title="Vista previa del documento"></iframe>
        </div>
        </div>
    </div>
</div>

<script>
var SERVICIO_ACTUAL = null;

// ── Modal de configuración (branding/documento) del servicio ────────────────
function abrirModalServicio(servicio) {
    var $form = $('#formServicio');
    $form[0].reset();
    $form.find('[name=id]').val(servicio.id);
    $('#tituloModalServicio').text('Configuración: ' + servicio.nombre);
    $('#servicioNombreSoloLectura').val(servicio.nombre);
    $('#servicioMarcaSoloLectura').val(servicio.marca_nombre || '');
    // Solo el CONTENIDO de la oferta (la identidad corporativa vive en la marca)
    var campos = ['rotulo_cliente', 'frase_destacada', 'titulo_bonos', 'garantia_dias'];
    campos.forEach(function(campo) {
        if (servicio[campo] !== null && servicio[campo] !== undefined) {
            $form.find('[name=' + campo + ']').val(servicio[campo]);
        }
    });
    try {
        var parrafos = JSON.parse(servicio.parrafos_presentacion || '[]');
        $form.find('[name=parrafos_presentacion]').val(parrafos.join('\n\n'));
    } catch (e) {}
    try {
        var garantia = JSON.parse(servicio.garantia_texto || '{}');
        $form.find('[name=garantia_cita]').val(garantia.cita || '');
        $form.find('[name=garantia_condiciones]').val((garantia.condiciones || []).join('\n'));
    } catch (e) {}
    cambiarTab('datos');
    $('#modalServicio').removeClass('hidden');
    lucide.createIcons();
    actualizarPreviewBranding();
}
function cerrarModalServicio() {
    $('#modalServicio').addClass('hidden');
    clearTimeout(brandingPreviewTimer);
}

// ── Vista previa en vivo del documento (branding tal cual está en el form) ──
var brandingPreviewTimer = null;
function actualizarPreviewBranding() {
    var $frame = $('#brandingPreviewFrame');
    if (!$frame.length) return;
    $('#brandingPreviewEstado').text('Actualizando...');
    $.post(APP_URL + '/servicios/previsualizar', $('#formServicio').serialize())
        .done(function(html) {
            $frame[0].srcdoc = html;
            $('#brandingPreviewEstado').text('Actualizado ' + new Date().toLocaleTimeString('es-CL'));
        })
        .fail(function() {
            $('#brandingPreviewEstado').text('No se pudo actualizar.');
        });
}
function programarPreviewBranding() {
    clearTimeout(brandingPreviewTimer);
    brandingPreviewTimer = setTimeout(actualizarPreviewBranding, 500);
}
$(document).on('input change', '#formServicio input, #formServicio textarea, #formServicio select', function() {
    programarPreviewBranding();
});

function cambiarTab(tab) {
    $('.tab-servicio').removeClass('bg-blue-600 text-white').addClass('text-slate-400');
    $('.tab-servicio[data-tab=' + tab + ']').addClass('bg-blue-600 text-white').removeClass('text-slate-400');
    $('.panel-servicio').addClass('hidden');
    $('.panel-servicio[data-panel=' + tab + ']').removeClass('hidden');
}
$(document).on('click', '.tab-servicio', function() { cambiarTab($(this).data('tab')); });

$('#formServicio').on('submit', function(e) {
    e.preventDefault();
    var idServicio = $(this).find('[name=id]').val();
    $.post(APP_URL + '/servicios/guardar', $(this).serialize(), function(r) {
        if (r.success) {
            cerrarModalServicio();
            Swal.fire({ icon: 'success', title: r.message, background: '#1e293b', color: '#f8fafc', timer: 1200, showConfirmButton: false });
            cargarEditor(idServicio);
        } else {
            Swal.fire({ icon: 'error', title: r.message, background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#3b82f6' });
        }
    }, 'json');
});

// ── Editor: planes, características y bonos ─────────────────────────────────
function cargarEditor(id) {
    $.get(APP_URL + '/servicios/detalle', { id: id }, function(r) {
        if (!r.success) { Swal.fire({ icon: 'error', title: r.message, background: '#1e293b', color: '#f8fafc' }); return; }
        SERVICIO_ACTUAL = r.servicio;
        pintarEditor(r.servicio);
    }, 'json');
}

function escaparHtmlEditor(texto) {
    return $('<span>').text(texto === null || texto === undefined ? '' : String(texto)).html();
}

function pintarEditor(s) {
    var html = '';
    html += '<div class="bg-slate-900 border border-slate-800/80 rounded-2xl p-6 shadow-xl">';
    html += '  <div class="flex flex-wrap items-center justify-between gap-3 mb-1">';
    html += '    <h2 class="text-xl font-bold text-white flex items-center gap-3"><span class="w-3.5 h-3.5 rounded-full" style="background: linear-gradient(135deg,' + escaparHtmlEditor(s.color_primario) + ',' + escaparHtmlEditor(s.color_secundario) + ');"></span>' + escaparHtmlEditor(s.nombre) + ' <span class="text-[10px] font-semibold text-purple-300 bg-purple-600/20 border border-purple-500/40 rounded-full px-2 py-0.5">SERVICIO</span></h2>';
    html += '    <div class="flex items-center gap-2">';
    html += '      <button onclick="abrirModalServicio(SERVICIO_ACTUAL)" class="inline-flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 text-xs font-semibold rounded-xl transition-colors"><i data-lucide="palette" class="w-3.5 h-3.5"></i> Documento y branding</button>';
    html += '      <button onclick="abrirModalPlan()" class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-semibold rounded-xl transition-colors"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Nuevo plan</button>';
    html += '      <button onclick="cerrarEditor()" title="Cerrar" class="p-2 bg-slate-950 hover:bg-slate-800 border border-slate-800 text-slate-400 hover:text-white rounded-xl"><i data-lucide="x" class="w-4 h-4"></i></button>';
    html += '    </div>';
    html += '  </div>';
    html += '  <p class="text-xs text-slate-500 mb-5">' + escaparHtmlEditor(s.marca_nombre) + ' · ' + escaparHtmlEditor(s.vertical_nombre) + '</p>';

    // Planes
    html += '  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">';
    if (!s.planes.length) {
        html += '<p class="text-sm text-slate-500 col-span-full">Sin planes aún. Agregue el primero con "Nuevo plan" (sin planes activos, el servicio no aparece al cotizar).</p>';
    }
    s.planes.forEach(function(p) {
        var inicial = p.precio_inicial !== null ? parseFloat(p.precio_inicial) : null;
        var mensual = p.precio_mensual !== null ? parseFloat(p.precio_mensual) : null;
        html += '<div class="bg-slate-950 border border-slate-800 rounded-xl p-4 ' + (p.activo == 1 ? '' : 'opacity-50') + '">';
        html += '  <div class="flex items-center justify-between mb-2">';
        html += '    <div class="font-bold text-slate-100">' + escaparHtmlEditor(p.nombre) + ' <span class="text-[10px] font-mono text-slate-500">' + escaparHtmlEditor(p.codigo) + '</span></div>';
        html += '    <div class="flex items-center gap-1">';
        html += '      <button onclick=\'abrirModalPlan(' + p.id + ')\' title="Editar plan" class="p-1.5 bg-slate-900 hover:bg-slate-800 text-slate-400 hover:text-white rounded-lg border border-slate-800"><i data-lucide="pencil" class="w-3.5 h-3.5"></i></button>';
        html += '      <button onclick="togglePlan(' + p.id + ')" title="' + (p.activo == 1 ? 'Desactivar' : 'Activar') + '" class="p-1.5 bg-slate-900 hover:bg-slate-800 ' + (p.activo == 1 ? 'text-amber-400' : 'text-green-400') + ' rounded-lg border border-slate-800"><i data-lucide="power" class="w-3.5 h-3.5"></i></button>';
        html += '    </div>';
        html += '  </div>';
        html += '  <div class="text-xs text-slate-400 space-y-0.5 mb-3">';
        var rangoInicial = (p.precio_inicial_minimo !== null || p.precio_inicial_maximo !== null)
            ? ' <span class="text-slate-600">(' + (p.precio_inicial_minimo !== null ? 'mín ' + parseFloat(p.precio_inicial_minimo) : '') + (p.precio_inicial_minimo !== null && p.precio_inicial_maximo !== null ? ' · ' : '') + (p.precio_inicial_maximo !== null ? 'máx ' + parseFloat(p.precio_inicial_maximo) : '') + ')</span>' : '';
        var rangoMensual = (p.precio_mensual_minimo !== null || p.precio_mensual_maximo !== null)
            ? ' <span class="text-slate-600">(' + (p.precio_mensual_minimo !== null ? 'mín ' + parseFloat(p.precio_mensual_minimo) : '') + (p.precio_mensual_minimo !== null && p.precio_mensual_maximo !== null ? ' · ' : '') + (p.precio_mensual_maximo !== null ? 'máx ' + parseFloat(p.precio_mensual_maximo) : '') + ')</span>' : '';
        html += inicial !== null ? '<div>Pago inicial: <b class="text-slate-200">' + inicial + ' ' + p.moneda + '</b>' + rangoInicial + '</div>' : '<div class="text-slate-600">Sin pago inicial</div>';
        html += mensual !== null ? '<div>Mensualidad: <b class="text-slate-200">' + mensual + ' ' + p.moneda + '</b>' + rangoMensual + '</div>' : '<div class="text-slate-600">Sin mensualidad</div>';
        html += '  </div>';
        html += '  <div class="border-t border-slate-800 pt-2 space-y-1">';
        p.caracteristicas.forEach(function(c) {
            html += '<div class="flex items-center justify-between gap-2 text-xs group">';
            html += '  <span class="text-slate-300">✓ ' + escaparHtmlEditor(c.titulo) + (c.descripcion ? ' <span class="text-slate-500">— ' + escaparHtmlEditor(c.descripcion) + '</span>' : '') + '</span>';
            html += '  <button onclick="eliminarCaracteristica(' + c.id + ')" title="Eliminar" class="opacity-0 group-hover:opacity-100 p-1 text-red-400 hover:text-red-300"><i data-lucide="trash-2" class="w-3 h-3"></i></button>';
            html += '</div>';
        });
        html += '  <form class="form-caracteristica flex gap-1.5 pt-1.5" data-plan="' + p.id + '">';
        html += '    <input type="text" name="titulo" placeholder="Nueva característica..." required class="flex-1 px-2 py-1.5 bg-slate-900 border border-slate-800 rounded-lg text-slate-200 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">';
        html += '    <button type="submit" class="px-2.5 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg text-xs border border-slate-700">+</button>';
        html += '  </form>';
        html += '  </div>';
        html += '</div>';
    });
    html += '  </div>';
    html += '</div>';

    // Bonos del servicio
    html += '<div class="bg-slate-900 border border-slate-800/80 rounded-2xl p-6 shadow-xl">';
    html += '  <h3 class="text-sm font-bold text-white uppercase tracking-wider mb-1">Bonos / Regalos del servicio</h3>';
    html += '  <p class="text-xs text-slate-500 mb-4">Los marcados como "incluido" van seleccionados por defecto al cotizar; el vendedor puede alternarlos.</p>';
    html += '  <div class="space-y-2">';
    s.bonos.forEach(function(b) {
        html += '<div class="flex items-center justify-between gap-3 bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5">';
        html += '  <div class="text-sm text-slate-200">' + escaparHtmlEditor(b.titulo) + (b.descripcion ? ' <span class="text-xs text-slate-500">— ' + escaparHtmlEditor(b.descripcion) + '</span>' : '') + '</div>';
        html += '  <div class="flex items-center gap-2 shrink-0">';
        html += '    <label class="flex items-center gap-1.5 text-xs text-slate-400 cursor-pointer"><input type="checkbox" class="bono-defecto rounded" data-id="' + b.id + '" ' + (b.incluido_por_defecto == 1 ? 'checked' : '') + '> incluido</label>';
        html += '    <button onclick="eliminarBono(' + b.id + ')" title="Eliminar" class="p-1.5 text-red-400 hover:text-red-300"><i data-lucide="trash-2" class="w-3.5 h-3.5"></i></button>';
        html += '  </div>';
        html += '</div>';
    });
    html += '  </div>';
    html += '  <form id="formNuevoBono" class="flex flex-col sm:flex-row gap-2 mt-4">';
    html += '    <input type="text" name="titulo" placeholder="Título del bono (ej: 🎁 Regalamos...)" required class="flex-1 px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">';
    html += '    <input type="text" name="descripcion" placeholder="Descripción corta" class="flex-1 px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">';
    html += '    <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold rounded-xl">Agregar bono</button>';
    html += '  </form>';
    html += '</div>';

    $('#editorServicio').html(html);
    $('#editorServicioOverlay').removeClass('hidden');
    lucide.createIcons();
}

function cerrarEditor() {
    $('#editorServicioOverlay').addClass('hidden');
    $('#editorServicio').empty();
    SERVICIO_ACTUAL = null;
}

// Clic en el fondo oscuro cierra el modal de planes
$(document).on('mousedown', '#editorServicioOverlay', function(e) {
    if (e.target === this) cerrarEditor();
});

// ── Planes ──────────────────────────────────────────────────────────────────
function abrirModalPlan(planId) {
    var plan = null;
    if (planId && SERVICIO_ACTUAL) {
        SERVICIO_ACTUAL.planes.forEach(function(p) { if (p.id == planId) plan = p; });
    }
    var valor = function(v) { return v === null || v === undefined ? '' : v; };
    Swal.fire({
        title: plan ? 'Editar plan' : 'Nuevo plan',
        background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#3b82f6',
        confirmButtonText: 'Guardar', showCancelButton: true, cancelButtonText: 'Cancelar',
        html:
            '<div class="text-left space-y-3 text-sm">' +
            '<input id="planNombre" class="swal2-input !m-0 !w-full" placeholder="Nombre del plan *" value="' + escaparHtmlEditor(plan ? plan.nombre : '') + '">' +
            '<div class="grid grid-cols-2 gap-2">' +
            '  <select id="planMoneda" class="swal2-input !m-0 !w-full"><option value="UF"' + (plan && plan.moneda === 'CLP' ? '' : ' selected') + '>UF</option><option value="CLP"' + (plan && plan.moneda === 'CLP' ? ' selected' : '') + '>CLP</option></select>' +
            '  <input id="planOrden" type="number" class="swal2-input !m-0 !w-full" placeholder="Orden" value="' + valor(plan ? plan.orden : '') + '">' +
            '</div>' +
            '<div class="grid grid-cols-3 gap-2">' +
            '  <input id="planInicial" type="number" step="0.01" class="swal2-input !m-0 !w-full" placeholder="Inicial recomendado" value="' + valor(plan ? plan.precio_inicial : '') + '">' +
            '  <input id="planInicialMin" type="number" step="0.01" class="swal2-input !m-0 !w-full" placeholder="Mínimo (opcional)" value="' + valor(plan ? plan.precio_inicial_minimo : '') + '">' +
            '  <input id="planInicialMax" type="number" step="0.01" class="swal2-input !m-0 !w-full" placeholder="Máximo (opcional)" value="' + valor(plan ? plan.precio_inicial_maximo : '') + '">' +
            '</div>' +
            '<div class="grid grid-cols-3 gap-2">' +
            '  <input id="planMensual" type="number" step="0.01" class="swal2-input !m-0 !w-full" placeholder="Mensual recomendado" value="' + valor(plan ? plan.precio_mensual : '') + '">' +
            '  <input id="planMensualMin" type="number" step="0.01" class="swal2-input !m-0 !w-full" placeholder="Mínimo (opcional)" value="' + valor(plan ? plan.precio_mensual_minimo : '') + '">' +
            '  <input id="planMensualMax" type="number" step="0.01" class="swal2-input !m-0 !w-full" placeholder="Máximo (opcional)" value="' + valor(plan ? plan.precio_mensual_maximo : '') + '">' +
            '</div>' +
            '<p class="text-[10px] text-slate-500">Deje vacío el precio si el plan no lo usa. Mínimo y máximo son opcionales: sin ellos, el vendedor edita libre.</p>' +
            '</div>',
        preConfirm: function() {
            return {
                id: plan ? plan.id : '',
                servicio_id: SERVICIO_ACTUAL.id,
                nombre: $('#planNombre').val(),
                codigo: plan ? plan.codigo : '',
                moneda: $('#planMoneda').val(),
                orden: $('#planOrden').val(),
                precio_inicial: $('#planInicial').val(),
                precio_inicial_minimo: $('#planInicialMin').val(),
                precio_inicial_maximo: $('#planInicialMax').val(),
                precio_mensual: $('#planMensual').val(),
                precio_mensual_minimo: $('#planMensualMin').val(),
                precio_mensual_maximo: $('#planMensualMax').val()
            };
        }
    }).then(function(res) {
        if (!res.isConfirmed) return;
        $.post(APP_URL + '/servicios/plan/guardar', res.value, function(r) {
            if (r.success) cargarEditor(SERVICIO_ACTUAL.id);
            else Swal.fire({ icon: 'error', title: r.message, background: '#1e293b', color: '#f8fafc' });
        }, 'json');
    });
}

function togglePlan(id) {
    $.post(APP_URL + '/servicios/plan/toggle', { id: id }, function(r) {
        if (r.success) cargarEditor(SERVICIO_ACTUAL.id);
        else Swal.fire({ icon: 'error', title: r.message, background: '#1e293b', color: '#f8fafc' });
    }, 'json');
}

// ── Características ─────────────────────────────────────────────────────────
$(document).on('submit', '.form-caracteristica', function(e) {
    e.preventDefault();
    var $form = $(this);
    $.post(APP_URL + '/servicios/caracteristica/guardar', {
        plan_id: $form.data('plan'),
        titulo: $form.find('[name=titulo]').val(),
        orden: 99
    }, function(r) {
        if (r.success) cargarEditor(SERVICIO_ACTUAL.id);
        else Swal.fire({ icon: 'error', title: r.message, background: '#1e293b', color: '#f8f8fc' });
    }, 'json');
});

function eliminarCaracteristica(id) {
    $.post(APP_URL + '/servicios/caracteristica/eliminar', { id: id }, function(r) {
        if (r.success) cargarEditor(SERVICIO_ACTUAL.id);
        else Swal.fire({ icon: 'error', title: r.message, background: '#1e293b', color: '#f8fafc' });
    }, 'json');
}

// ── Bonos ───────────────────────────────────────────────────────────────────
$(document).on('submit', '#formNuevoBono', function(e) {
    e.preventDefault();
    var $form = $(this);
    $.post(APP_URL + '/servicios/bono/guardar', {
        servicio_id: SERVICIO_ACTUAL.id,
        titulo: $form.find('[name=titulo]').val(),
        descripcion: $form.find('[name=descripcion]').val(),
        incluido_por_defecto: 1,
        orden: 99
    }, function(r) {
        if (r.success) cargarEditor(SERVICIO_ACTUAL.id);
        else Swal.fire({ icon: 'error', title: r.message, background: '#1e293b', color: '#f8fafc' });
    }, 'json');
});

$(document).on('change', '.bono-defecto', function() {
    var $chk = $(this);
    var bono = null;
    SERVICIO_ACTUAL.bonos.forEach(function(b) { if (b.id == $chk.data('id')) bono = b; });
    if (!bono) return;
    $.post(APP_URL + '/servicios/bono/guardar', {
        id: bono.id,
        servicio_id: SERVICIO_ACTUAL.id,
        titulo: bono.titulo,
        descripcion: bono.descripcion,
        incluido_por_defecto: $chk.is(':checked') ? 1 : 0,
        orden: bono.orden
    }, function(r) {
        if (!r.success) Swal.fire({ icon: 'error', title: r.message, background: '#1e293b', color: '#f8fafc' });
        else bono.incluido_por_defecto = $chk.is(':checked') ? 1 : 0;
    }, 'json');
});

function eliminarBono(id) {
    $.post(APP_URL + '/servicios/bono/eliminar', { id: id }, function(r) {
        if (r.success) cargarEditor(SERVICIO_ACTUAL.id);
        else Swal.fire({ icon: 'error', title: r.message, background: '#1e293b', color: '#f8fafc' });
    }, 'json');
}

// Al llegar con ?editar_servicio=ID (producto-servicio recién guardado) el
// editor de planes se abre solo. En ready: APP_URL se define más abajo.
$(function() {
    var coincide = window.location.search.match(/[?&]editar_servicio=(\d+)/);
    if (coincide) cargarEditor(parseInt(coincide[1], 10));
});
</script>
