<?php
/**
 * ASISMA CRM - Gestión de Franquiciados
 */
?>
<!-- Header -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
    <div>
        <h1 class="text-3xl font-extrabold text-white tracking-tight">Franquiciados</h1>
        <p class="text-slate-400 text-sm mt-1">Estructura de distribución regional y vertical del sistema.</p>
    </div>
    <?php if (SessionHelper::isAdmin()): ?>
    <button onclick="abrirModalCrear()"
            class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-xl transition-colors shadow-lg shadow-blue-600/20">
        <i data-lucide="plus" class="w-4 h-4"></i>
        Nuevo Franquiciado
    </button>
    <?php endif; ?>
</div>

<!-- Tabla -->
<div class="bg-slate-900 border border-slate-800/80 rounded-2xl overflow-hidden shadow-xl">
    <div class="overflow-x-auto">
        <table class="w-full text-left text-sm border-collapse">
            <thead>
                <tr class="bg-slate-950 border-b border-slate-800 text-slate-400 uppercase text-xs tracking-wider">
                    <th class="px-6 py-4 font-semibold">Franquiciado / Empresa</th>
                    <th class="px-6 py-4 font-semibold">Región</th>
                    <th class="px-6 py-4 font-semibold">Vertical</th>
                    <th class="px-6 py-4 font-semibold">SLA Toma</th>
                    <th class="px-6 py-4 font-semibold">Prioridad</th>
                    <th class="px-6 py-4 font-semibold">Estado</th>
                    <?php if (SessionHelper::isAdmin()): ?>
                    <th class="px-6 py-4 font-semibold text-right">Acciones</th>
                    <?php endif; ?>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800/60 text-slate-300">
                <?php if (empty($franquiciados)): ?>
                    <tr>
                        <td colspan="7" class="px-6 py-14 text-center text-slate-500">
                            <i data-lucide="building-2" class="w-10 h-10 mx-auto mb-3 opacity-30"></i>
                            <p class="font-medium">No hay franquiciados registrados.</p>
                            <?php if (SessionHelper::isAdmin()): ?>
                            <button onclick="abrirModalCrear()" class="mt-3 text-blue-400 hover:text-blue-300 text-sm underline">Crear el primero</button>
                            <?php endif; ?>
                        </td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($franquiciados as $f): ?>
                        <tr class="hover:bg-slate-800/30 transition-colors" id="fila-<?php echo $f['id']; ?>">
                            <td class="px-6 py-4">
                                <div class="font-bold text-slate-100"><?php echo htmlspecialchars($f['nombre_fantasia']); ?></div>
                                <div class="text-xs text-slate-500"><?php echo htmlspecialchars($f['razon_social']); ?> &bull; <?php echo htmlspecialchars($f['rut']); ?></div>
                                <?php if ($f['email'] || $f['telefono']): ?>
                                <div class="text-xs text-slate-400 mt-0.5 flex gap-2">
                                    <?php if ($f['email']): ?><span><?php echo htmlspecialchars($f['email']); ?></span><?php endif; ?>
                                    <?php if ($f['telefono']): ?><span>&bull; <?php echo htmlspecialchars($f['telefono']); ?></span><?php endif; ?>
                                </div>
                                <?php endif; ?>
                                <div class="mt-1.5">
                                    <?php if (!empty($f['control_empresas_id'])): ?>
                                        <span class="inline-flex items-center gap-1 rounded bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-400 border border-emerald-500/20" title="Empresa creada en Control Empresas">
                                            <i data-lucide="server" class="w-3 h-3"></i> CE #<?php echo (int)$f['control_empresas_id']; ?>
                                        </span>
                                    <?php else: ?>
                                        <span class="inline-flex items-center gap-1 rounded bg-slate-500/10 px-1.5 py-0.5 text-[10px] font-semibold text-slate-400 border border-slate-500/20" title="Sin empresa en Control Empresas">
                                            <i data-lucide="server-off" class="w-3 h-3"></i> Sin CE
                                        </span>
                                    <?php endif; ?>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-xs font-medium text-slate-300"><?php echo htmlspecialchars($f['region_nombre']); ?></td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center rounded-md bg-slate-800 px-2 py-0.5 text-xs font-semibold text-slate-300 border border-slate-700"><?php echo htmlspecialchars($f['vertical_nombre']); ?></span>
                                <div class="mt-1.5 flex flex-wrap gap-1">
                                    <?php if (!empty($f['marcas_asignadas']) || !empty($f['productos_asignados'])): ?>
                                        <?php foreach ($f['marcas_asignadas'] as $mNombre): ?>
                                            <span class="inline-flex items-center rounded bg-indigo-500/10 px-1.5 py-0.5 text-[10px] font-semibold text-indigo-400 border border-indigo-500/20" title="Marca completa"><?php echo htmlspecialchars($mNombre); ?></span>
                                        <?php endforeach; ?>
                                        <?php foreach ($f['productos_asignados'] as $pNombre): ?>
                                            <span class="inline-flex items-center rounded bg-sky-500/10 px-1.5 py-0.5 text-[10px] font-semibold text-sky-400 border border-sky-500/20" title="Producto suelto autorizado"><?php echo htmlspecialchars($pNombre); ?></span>
                                        <?php endforeach; ?>
                                    <?php else: ?>
                                        <span class="text-[10px] font-semibold text-amber-400 bg-amber-500/10 border border-amber-500/20 rounded px-1.5 py-0.5" title="Sin autorización de venta: no puede cotizar ni recibirá leads con marca/producto de interés">⚠ Sin autorización de venta</span>
                                    <?php endif; ?>
                                </div>
                            </td>
                            <td class="px-6 py-4 font-mono text-xs text-slate-400">
                                <?php echo $f['tiempo_toma_lead']; ?>s (<?php echo round($f['tiempo_toma_lead']/60); ?> min)
                            </td>
                            <td class="px-6 py-4 text-xs text-slate-400">Nivel <?php echo $f['prioridad']; ?></td>
                            <td class="px-6 py-4">
                                <span id="badge-estado-<?php echo $f['id']; ?>"
                                      class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border capitalize
                                             <?php echo $f['estado'] === 'activo' ? 'bg-green-500/10 text-green-400 border-green-500/20' : 'bg-amber-500/10 text-amber-400 border-amber-500/20'; ?>">
                                    <?php echo $f['estado']; ?>
                                </span>
                            </td>
                            <?php if (SessionHelper::isAdmin()): ?>
                            <td class="px-6 py-4 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <button onclick="abrirModalMarcas(<?php echo $f['id']; ?>, '<?php echo htmlspecialchars($f['nombre_fantasia'], ENT_QUOTES); ?>')"
                                            class="p-1.5 rounded-lg text-slate-400 hover:text-indigo-400 hover:bg-indigo-500/10 transition-colors" title="Asignar marcas autorizadas">
                                        <i data-lucide="tags" class="w-4 h-4"></i>
                                    </button>
                                    <?php if (empty($f['control_empresas_id'])): ?>
                                    <button onclick="provisionarCE(<?php echo $f['id']; ?>, '<?php echo htmlspecialchars($f['nombre_fantasia'], ENT_QUOTES); ?>')"
                                            class="p-1.5 rounded-lg text-slate-400 hover:text-emerald-400 hover:bg-emerald-500/10 transition-colors" title="Crear empresa en Control Empresas">
                                        <i data-lucide="server" class="w-4 h-4"></i>
                                    </button>
                                    <?php endif; ?>
                                    <button onclick="abrirModalEditar(<?php echo $f['id']; ?>)"
                                            class="p-1.5 rounded-lg text-slate-400 hover:text-blue-400 hover:bg-blue-500/10 transition-colors" title="Editar">
                                        <i data-lucide="pencil" class="w-4 h-4"></i>
                                    </button>
                                    <button onclick="toggleEstado(<?php echo $f['id']; ?>)"
                                            id="btn-toggle-<?php echo $f['id']; ?>"
                                            class="p-1.5 rounded-lg text-slate-400 hover:text-amber-400 hover:bg-amber-500/10 transition-colors"
                                            title="<?php echo $f['estado'] === 'activo' ? 'Suspender' : 'Activar'; ?>">
                                        <i data-lucide="<?php echo $f['estado'] === 'activo' ? 'pause-circle' : 'play-circle'; ?>" class="w-4 h-4"></i>
                                    </button>
                                </div>
                            </td>
                            <?php endif; ?>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<?php if (SessionHelper::isAdmin()): ?>
<!-- ===================== MODAL MARCAS AUTORIZADAS ===================== -->
<div id="modalMarcas" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4">
    <div class="absolute inset-0 bg-slate-950/80 backdrop-blur-sm" onclick="cerrarModalMarcas()"></div>
    <div class="relative w-full max-w-md bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl overflow-hidden">
        <div class="flex items-center justify-between px-6 py-4 border-b border-slate-800">
            <div>
                <h2 class="text-lg font-bold text-white">Marcas Autorizadas</h2>
                <p class="text-xs text-slate-400" id="marcasFranqNombre"></p>
            </div>
            <button onclick="cerrarModalMarcas()" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition-colors">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
        <div class="p-6">
            <p class="text-xs text-slate-400 mb-4 leading-relaxed">
                Define <b>qué puede vender</b> este franquiciado: una marca completa
                (incluye sus productos futuros) o solo <b>productos específicos</b>.
                Los leads le caerán según el producto de interés (o la marca, si el
                lead no trae producto).
            </p>
            <div id="listaMarcasCheck" class="space-y-3 max-h-80 overflow-y-auto pr-1">
                <p class="text-xs text-slate-500">Cargando...</p>
            </div>
        </div>
        <div class="px-6 py-4 border-t border-slate-800 flex justify-end gap-4">
            <button onclick="cerrarModalMarcas()" class="px-4 py-2.5 border border-red-500/40 hover:border-red-500/70 hover:bg-red-500/10 text-red-400 rounded-xl text-sm font-semibold transition-colors">Cancelar</button>
            <button onclick="guardarMarcasFranq()" id="btnGuardarMarcas" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-semibold transition-colors">Guardar</button>
        </div>
    </div>
</div>

<script>
var franqMarcasId = null;

function abrirModalMarcas(id, nombre) {
    franqMarcasId = id;
    $('#marcasFranqNombre').text(nombre);
    $('#listaMarcasCheck').html('<p class="text-xs text-slate-500">Cargando...</p>');
    $('#modalMarcas').removeClass('hidden');
    lucide.createIcons();

    $.getJSON('<?php echo APP_URL; ?>/franquiciados/marcas', { id: id }, function(res) {
        if (!res.success) {
            $('#listaMarcasCheck').html('<p class="text-xs text-red-400">' + (res.message || 'Error al cargar') + '</p>');
            return;
        }
        var asignadas = res.data.asignadas || [];
        var sueltos = res.data.productos_sueltos || [];
        var disponibles = res.data.disponibles || [];
        if (!disponibles.length) {
            $('#listaMarcasCheck').html('<p class="text-xs text-amber-400">La vertical de este franquiciado no tiene marcas activas. Sincroniza el catálogo desde Control Empresas primero.</p>');
            return;
        }
        var esc = function(t) { return $('<div>').text(t).html(); };
        var html = disponibles.map(function(m) {
            var marcaCompleta = asignadas.indexOf(parseInt(m.id, 10)) !== -1;
            var productosHtml = (m.productos || []).map(function(p) {
                var pChecked = marcaCompleta || sueltos.indexOf(parseInt(p.id, 10)) !== -1 ? 'checked' : '';
                return '<label class="flex items-center gap-2 pl-8 py-1 cursor-pointer text-xs text-slate-400 hover:text-slate-200 transition-colors">' +
                    '<input type="checkbox" class="chk-producto rounded border-slate-600 text-sky-600 focus:ring-sky-500" value="' + p.id + '" data-marca="' + m.id + '" ' + pChecked + (marcaCompleta ? ' disabled' : '') + '>' +
                    esc(p.nombre) +
                '</label>';
            }).join('');
            return '<div class="bg-slate-950 border border-slate-800 rounded-xl px-3 py-2.5">' +
                '<label class="flex items-center gap-3 cursor-pointer">' +
                    '<input type="checkbox" class="chk-marca rounded border-slate-600 text-indigo-600 focus:ring-indigo-500" value="' + m.id + '" ' + (marcaCompleta ? 'checked' : '') + '>' +
                    '<span class="text-sm font-semibold text-slate-200">' + esc(m.nombre) + '</span>' +
                    '<span class="text-[10px] text-slate-500">marca completa (incluye productos futuros)</span>' +
                '</label>' +
                (productosHtml ? '<div class="mt-1.5 space-y-0.5">' + productosHtml + '</div>'
                               : '<p class="pl-8 text-[11px] text-slate-600 mt-1">Sin productos activos.</p>') +
            '</div>';
        }).join('');
        $('#listaMarcasCheck').html(html);
    });
}

// Marcar una marca completa: sus productos quedan incluidos (checks bloqueados)
$(document).on('change', '.chk-marca', function() {
    var marcaId = this.value;
    var productos = $('.chk-producto[data-marca="' + marcaId + '"]');
    if (this.checked) {
        productos.prop('checked', true).prop('disabled', true);
    } else {
        productos.prop('disabled', false).prop('checked', false);
    }
});

function cerrarModalMarcas() { $('#modalMarcas').addClass('hidden'); franqMarcasId = null; }

function guardarMarcasFranq() {
    if (!franqMarcasId) return;
    var marcas = $('.chk-marca:checked').map(function() { return this.value; }).get();
    // Productos sueltos: solo los marcados de marcas NO completas
    var productos = $('.chk-producto:checked:not(:disabled)').map(function() { return this.value; }).get();
    $('#btnGuardarMarcas').prop('disabled', true).addClass('opacity-60');
    $.post('<?php echo APP_URL; ?>/franquiciados/marcas/guardar', { id: franqMarcasId, 'marcas[]': marcas, 'productos[]': productos }, function(res) {
        $('#btnGuardarMarcas').prop('disabled', false).removeClass('opacity-60');
        if (res.success) {
            Swal.fire({ icon: 'success', title: res.message, timer: 1800, showConfirmButton: false, background: '#1e293b', color: '#f8fafc' }).then(function() { location.reload(); });
        } else {
            Swal.fire({ icon: 'error', title: 'Error', text: res.message, background: '#1e293b', color: '#f8fafc' });
        }
    }, 'json');
}
</script>

<!-- ===================== MODAL CREAR / EDITAR ===================== -->
<div id="modalFranq" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4">
    <div class="absolute inset-0 bg-slate-950/80 backdrop-blur-sm" onclick="cerrarModal()"></div>
    <div class="relative w-full max-w-2xl bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl overflow-hidden">
        <!-- Header del modal -->
        <div class="flex items-center justify-between px-6 py-4 border-b border-slate-800">
            <h2 id="modalTitulo" class="text-lg font-bold text-white">Nuevo Franquiciado</h2>
            <button onclick="cerrarModal()" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition-colors">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <!-- Formulario -->
        <form id="formFranq" onsubmit="submitFranq(event)" class="p-6 space-y-5 overflow-y-auto max-h-[75vh]">
            <input type="hidden" id="franqId" name="id" value="">

            <!-- Datos Empresa -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-3">Datos de la Empresa</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Razón Social <span class="text-red-400">*</span></label>
                        <input type="text" name="razon_social" id="franqRazonSocial" required
                               class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Nombre Fantasía</label>
                        <input type="text" name="nombre_fantasia" id="franqNombreFant"
                               class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">RUT <span class="text-red-400">*</span></label>
                        <input type="text" name="rut" id="franqRut" required placeholder="12345678-9"
                               class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Email <span class="text-red-400">*</span></label>
                        <input type="email" name="email" id="franqEmail" required
                               class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Teléfono <span class="text-red-400">*</span></label>
                        <input type="text" name="telefono" id="franqTelefono" required
                               class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30">
                    </div>
                </div>
            </div>

            <!-- Datos de Facturacion: viajan a Control Empresas al crear su empresa -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-3">Datos de Facturación (Control Empresas)</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Giro <span class="text-red-400">*</span></label>
                        <input type="text" name="giro" id="franqGiro" required placeholder="Ej: VENTA DE SOFTWARE Y SERVICIOS INFORMATICOS"
                               class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Dirección (calle y número) <span class="text-red-400">*</span></label>
                        <input type="text" name="direccion" id="franqDireccion" required placeholder="Av. Ejemplo 1234, of. 5"
                               class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5 flex items-center justify-between">
                            <span>Comuna <span class="text-red-400">*</span></span>
                            <button type="button" onclick="sincronizarComunas(this)" title="Actualizar comunas desde Control Empresas"
                                    class="text-slate-500 hover:text-blue-400 transition-colors inline-flex items-center gap-1">
                                <i data-lucide="refresh-cw" class="w-3 h-3"></i>
                            </button>
                        </label>
                        <select name="comuna_id" id="franqComuna" required
                                class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500">
                            <option value="">Seleccionar comuna...</option>
                            <?php foreach ($comunas as $c): ?>
                                <option value="<?php echo $c['id']; ?>"><?php echo htmlspecialchars($c['nombre'] . ($c['ciudad'] !== '' && $c['ciudad'] !== $c['nombre'] ? ' — ' . $c['ciudad'] : '')); ?></option>
                            <?php endforeach; ?>
                        </select>
                        <?php if (empty($comunas)): ?>
                        <p class="text-[11px] text-amber-400 mt-1">El catálogo de comunas está vacío: usa el botón de actualizar (necesita Control Empresas configurado).</p>
                        <?php endif; ?>
                    </div>
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Nombre de Contacto</label>
                        <input type="text" name="nombre_contacto" id="franqNombreContacto" placeholder="Persona de contacto para facturación"
                               class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30">
                    </div>
                </div>
            </div>

            <!-- Asignación -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-3">Cobertura y Configuración</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Región <span class="text-red-400">*</span></label>
                        <select name="region_id" id="franqRegion" required
                                class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500">
                            <option value="">Seleccionar región...</option>
                            <?php foreach ($regiones as $r): ?>
                                <option value="<?php echo $r['id']; ?>"><?php echo htmlspecialchars($r['nombre']); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Vertical <span class="text-red-400">*</span></label>
                        <select name="vertical_id" id="franqVertical" required
                                class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500">
                            <option value="">Seleccionar vertical...</option>
                            <?php foreach ($verticales as $v): ?>
                                <option value="<?php echo $v['id']; ?>"><?php echo htmlspecialchars($v['nombre']); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Estado</label>
                        <select name="estado" id="franqEstado"
                                class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500">
                            <option value="activo">Activo</option>
                            <option value="suspendido">Suspendido</option>
                            <option value="inactivo">Inactivo</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">SLA Toma de Lead (segundos)</label>
                        <input type="number" name="tiempo_toma_lead" id="franqTiempo" value="300" min="60" max="3600"
                               class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Prioridad (mayor = primero)</label>
                        <input type="number" name="prioridad" id="franqPrioridad" value="0" min="0" max="100"
                               class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Max. Leads Activos (0 = sin límite)</label>
                        <input type="number" name="max_leads_activos" id="franqMaxLeads" value="0" min="0"
                               class="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-blue-500">
                    </div>
                </div>
            </div>

            <!-- Alerta de error -->
            <div id="franqError" class="hidden text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg px-4 py-3"></div>

            <!-- Footer del modal -->
            <div class="flex items-center justify-end gap-4 pt-2 border-t border-slate-800">
                <button type="button" onclick="cerrarModal()"
                        class="px-4 py-2 text-sm text-red-400 border border-red-500/40 hover:border-red-500/70 hover:bg-red-500/10 rounded-lg transition-colors">
                    Cancelar
                </button>
                <button type="submit" id="btnGuardarFranq"
                        class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg transition-colors flex items-center gap-2">
                    <i data-lucide="save" class="w-4 h-4"></i>
                    <span>Guardar</span>
                </button>
            </div>
        </form>
    </div>
</div>

<script>
const APP_URL = '<?php echo APP_URL; ?>';

function abrirModalCrear() {
    document.getElementById('modalTitulo').textContent = 'Nuevo Franquiciado';
    document.getElementById('formFranq').reset();
    document.getElementById('franqId').value = '';
    document.getElementById('franqError').classList.add('hidden');
    document.getElementById('modalFranq').classList.remove('hidden');
    lucide.createIcons();
}

async function abrirModalEditar(id) {
    document.getElementById('modalTitulo').textContent = 'Editar Franquiciado';
    document.getElementById('franqError').classList.add('hidden');

    const res = await fetch(APP_URL + '/franquiciados/data?id=' + id);
    const json = await res.json();

    if (!json.success) {
        alert('Error al cargar datos del franquiciado.');
        return;
    }

    const d = json.data;
    document.getElementById('franqId').value          = d.id;
    document.getElementById('franqRazonSocial').value = d.razon_social;
    document.getElementById('franqNombreFant').value  = d.nombre_fantasia;
    document.getElementById('franqRut').value         = d.rut;
    document.getElementById('franqEmail').value       = d.email || '';
    document.getElementById('franqTelefono').value    = d.telefono || '';
    document.getElementById('franqDireccion').value   = d.direccion || '';
    document.getElementById('franqGiro').value        = d.giro || '';
    document.getElementById('franqComuna').value      = d.comuna_id || '';
    document.getElementById('franqNombreContacto').value = d.nombre_contacto || '';
    document.getElementById('franqRegion').value      = d.region_id;
    document.getElementById('franqVertical').value    = d.vertical_id;
    document.getElementById('franqEstado').value      = d.estado;
    document.getElementById('franqTiempo').value      = d.tiempo_toma_lead;
    document.getElementById('franqPrioridad').value   = d.prioridad;
    document.getElementById('franqMaxLeads').value    = d.max_leads_activos;

    document.getElementById('modalFranq').classList.remove('hidden');
    lucide.createIcons();
}

function cerrarModal() {
    document.getElementById('modalFranq').classList.add('hidden');
}

// Actualiza el catalogo de comunas desde Control Empresas (IDs reales de CE)
async function sincronizarComunas(boton) {
    boton.disabled = true;
    try {
        const res = await fetch(APP_URL + '/franquiciados/sincronizar-comunas', { method: 'POST' });
        const json = await res.json();
        Swal.fire({
            icon: json.success ? 'success' : 'error',
            title: json.success ? 'Comunas actualizadas' : 'No se pudo sincronizar',
            text: json.message,
            background: '#1e293b', color: '#f8fafc',
            confirmButtonColor: '#3b82f6'
        }).then(function() { if (json.success) window.location.reload(); });
    } catch (e) {
        Swal.fire({ icon: 'error', title: 'Error de red al sincronizar comunas', background: '#1e293b', color: '#f8fafc' });
    }
    boton.disabled = false;
}

async function submitFranq(e) {
    e.preventDefault();
    const btn = document.getElementById('btnGuardarFranq');
    const errDiv = document.getElementById('franqError');
    btn.disabled = true;
    btn.querySelector('span').textContent = 'Guardando...';
    errDiv.classList.add('hidden');

    const id = document.getElementById('franqId').value;
    const url = APP_URL + (id ? '/franquiciados/editar' : '/franquiciados/crear');
    const formData = new FormData(document.getElementById('formFranq'));

    try {
        const res = await fetch(url, { method: 'POST', body: formData });
        const json = await res.json();

        if (json.success) {
            cerrarModal();
            if (json.detalle_ce) {
                // Resultado de la provisión en Control Empresas (solo al crear)
                Swal.fire({
                    icon: json.ce_ok ? 'success' : 'warning',
                    title: json.message,
                    text: json.detalle_ce,
                    background: '#1e293b', color: '#f8fafc',
                    confirmButtonText: 'Entendido'
                }).then(function() { window.location.reload(); });
            } else {
                window.location.reload();
            }
        } else {
            errDiv.textContent = json.message;
            errDiv.classList.remove('hidden');
        }
    } catch (err) {
        errDiv.textContent = 'Error de conexión al guardar.';
        errDiv.classList.remove('hidden');
    }

    btn.disabled = false;
    btn.querySelector('span').textContent = 'Guardar';
}

function provisionarCE(id, nombre) {
    Swal.fire({
        icon: 'question',
        title: '¿Crear empresa en Control Empresas?',
        text: 'Se creará la empresa "' + nombre + '" en Control Empresas con los datos registrados en el CRM.',
        showCancelButton: true,
        confirmButtonText: 'Sí, crear',
        cancelButtonText: 'Cancelar',
        background: '#1e293b', color: '#f8fafc'
    }).then(function(res) {
        if (!res.isConfirmed) return;
        $.post(APP_URL + '/franquiciados/provisionar-ce', { id: id }, function(json) {
            Swal.fire({
                icon: json.success ? 'success' : 'error',
                title: json.success ? 'Empresa creada' : 'No se pudo crear',
                text: json.message,
                background: '#1e293b', color: '#f8fafc'
            }).then(function() { if (json.success) location.reload(); });
        }, 'json').fail(function() {
            Swal.fire({ icon: 'error', title: 'Error de conexión', background: '#1e293b', color: '#f8fafc' });
        });
    });
}

async function toggleEstado(id) {
    if (!confirm('¿Confirma cambiar el estado de este franquiciado?')) return;

    const res = await fetch(APP_URL + '/franquiciados/toggle', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'id=' + id
    });
    const json = await res.json();

    if (json.success) {
        const badge = document.getElementById('badge-estado-' + id);
        const btn = document.getElementById('btn-toggle-' + id);

        if (json.estado === 'activo') {
            badge.className = 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border capitalize bg-green-500/10 text-green-400 border-green-500/20';
            badge.textContent = 'activo';
            btn.setAttribute('title', 'Suspender');
            btn.innerHTML = '<i data-lucide="pause-circle" class="w-4 h-4"></i>';
        } else {
            badge.className = 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border capitalize bg-amber-500/10 text-amber-400 border-amber-500/20';
            badge.textContent = json.estado;
            btn.setAttribute('title', 'Activar');
            btn.innerHTML = '<i data-lucide="play-circle" class="w-4 h-4"></i>';
        }
        lucide.createIcons();
    } else {
        alert(json.message);
    }
}
</script>

<?php endif; ?>
