<?php
/**
 * ASISMA CRM - Maestro de Productos (catalogo 100% del CRM)
 * Filtros + buscador + paginacion en servidor (soporta miles de productos),
 * carga masiva por CSV y descarga a Excel. Precio minimo/maximo/sugerido,
 * moneda CLP o UF y suscripcion con periodo.
 */
$puedeEditarCatalogo = SessionHelper::isAdmin();
$periodos = array('mensual' => 'Mensual', 'trimestral' => 'Trimestral', 'semestral' => 'Semestral', 'anual' => 'Anual');

// Query string con los filtros vigentes (para paginacion y exportar)
$filtrosQs = array();
foreach (array('q', 'vertical_id', 'marca_id', 'moneda', 'suscripcion', 'clase', 'estado', 'orden') as $claveFiltro) {
    // OJO: suscripcion='0' (venta unica) es un filtro valido, por eso no se usa empty()
    if ($filtros[$claveFiltro] !== '' && $filtros[$claveFiltro] !== 0) {
        $filtrosQs[$claveFiltro] = $filtros[$claveFiltro];
    }
}
$qsFiltros = http_build_query($filtrosQs);
$hayFiltros = $filtros['q'] !== '' || $filtros['vertical_id'] || $filtros['marca_id']
    || $filtros['moneda'] !== '' || $filtros['suscripcion'] !== '' || $filtros['clase'] !== ''
    || $filtros['estado'] !== 'activos';
?>

<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
    <div>
        <h1 class="text-3xl font-extrabold text-white tracking-tight flex items-center gap-3">
            <?php echo $puedeEditarCatalogo ? 'Catalogo de Productos' : 'Mis Productos'; ?>
            <span class="text-sm font-semibold text-slate-400 bg-slate-800 border border-slate-700 rounded-full px-3 py-1"><?php echo number_format($total, 0, ',', '.'); ?></span>
        </h1>
        <p class="text-slate-400 text-sm mt-1">
            <?php echo $puedeEditarCatalogo
                ? 'Servicios y licencias disponibles para cotizacion y venta. Se administran solo en el CRM.'
                : 'Productos autorizados para tu franquicia (por marca completa o producto suelto).'; ?>
        </p>
    </div>
    <div class="flex flex-wrap items-center gap-2">
        <a href="<?php echo APP_URL; ?>/productos/exportar<?php echo $qsFiltros ? '?' . htmlspecialchars($qsFiltros) : ''; ?>"
           class="inline-flex items-center gap-2 px-4 py-2.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 text-sm font-semibold rounded-xl transition-colors">
            <i data-lucide="download" class="w-4 h-4"></i> Descargar Excel
        </a>
        <?php if ($puedeEditarCatalogo): ?>
        <button onclick="abrirModalCarga()" class="inline-flex items-center gap-2 px-4 py-2.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 text-sm font-semibold rounded-xl transition-colors">
            <i data-lucide="upload" class="w-4 h-4"></i> Carga Masiva
        </button>
        <button onclick="openModal()" class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold rounded-xl transition-colors shadow-lg">
            <i data-lucide="plus" class="w-4 h-4"></i> Nuevo Producto
        </button>
        <?php endif; ?>
    </div>
</div>

<!-- Filtros del maestro -->
<form method="GET" action="<?php echo APP_URL; ?>/productos" id="formFiltros"
      class="bg-slate-900 border border-slate-800/80 rounded-2xl p-4 mb-6 shadow-xl">
    <div class="grid grid-cols-2 md:grid-cols-4 <?php echo $puedeEditarCatalogo ? 'xl:grid-cols-8' : 'xl:grid-cols-6'; ?> gap-3 items-end">
        <div class="col-span-2">
            <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Buscar</label>
            <div class="relative">
                <i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500"></i>
                <input type="text" name="q" value="<?php echo htmlspecialchars($filtros['q']); ?>" placeholder="Nombre, descripcion o marca..."
                       class="block w-full pl-9 pr-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>
        <?php if (count($verticales) > 1): ?>
        <div>
            <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Vertical</label>
            <select name="vertical_id" id="filtroVertical" onchange="cambioVerticalFiltro()"
                    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">
                <option value="">Todas</option>
                <?php foreach ($verticales as $v): ?>
                <option value="<?php echo $v['id']; ?>" <?php echo $filtros['vertical_id'] == $v['id'] ? 'selected' : ''; ?>><?php echo htmlspecialchars($v['nombre']); ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <?php endif; ?>
        <div>
            <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Marca</label>
            <select name="marca_id" id="filtroMarca"
                    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">
                <option value="">Todas</option>
            </select>
        </div>
        <div>
            <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Moneda</label>
            <select name="moneda" 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">
                <option value="">Todas</option>
                <option value="CLP" <?php echo $filtros['moneda'] === 'CLP' ? 'selected' : ''; ?>>Pesos (CLP)</option>
                <option value="UF" <?php echo $filtros['moneda'] === 'UF' ? 'selected' : ''; ?>>UF</option>
            </select>
        </div>
        <div>
            <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Clase</label>
            <select name="clase" 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">
                <option value="">Todas</option>
                <option value="producto" <?php echo $filtros['clase'] === 'producto' ? 'selected' : ''; ?>>Productos</option>
                <option value="servicio" <?php echo $filtros['clase'] === 'servicio' ? 'selected' : ''; ?>>Servicios</option>
            </select>
        </div>
        <div>
            <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Suscripcion</label>
            <select name="suscripcion" 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">
                <option value="">Todos</option>
                <option value="1" <?php echo $filtros['suscripcion'] === '1' ? 'selected' : ''; ?>>Suscripcion</option>
                <option value="0" <?php echo $filtros['suscripcion'] === '0' ? 'selected' : ''; ?>>Venta unica</option>
            </select>
        </div>
        <?php if ($puedeEditarCatalogo): ?>
        <div>
            <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Estado</label>
            <select name="estado" 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">
                <option value="activos" <?php echo $filtros['estado'] === 'activos' ? 'selected' : ''; ?>>Activos</option>
                <option value="inactivos" <?php echo $filtros['estado'] === 'inactivos' ? 'selected' : ''; ?>>Inactivos</option>
                <option value="todos" <?php echo $filtros['estado'] === 'todos' ? 'selected' : ''; ?>>Todos</option>
            </select>
        </div>
        <?php endif; ?>
        <div>
            <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Ordenar por</label>
            <select name="orden" 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">
                <option value="nombre" <?php echo $filtros['orden'] === 'nombre' ? 'selected' : ''; ?>>Nombre (A-Z)</option>
                <option value="precio_asc" <?php echo $filtros['orden'] === 'precio_asc' ? 'selected' : ''; ?>>Precio: menor a mayor</option>
                <option value="precio_desc" <?php echo $filtros['orden'] === 'precio_desc' ? 'selected' : ''; ?>>Precio: mayor a menor</option>
                <option value="recientes" <?php echo $filtros['orden'] === 'recientes' ? 'selected' : ''; ?>>Mas recientes</option>
            </select>
        </div>
        <div class="flex gap-2">
            <button type="submit" class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2.5 bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold rounded-xl transition-colors">
                <i data-lucide="filter" class="w-4 h-4"></i> Filtrar
            </button>
            <?php if ($hayFiltros): ?>
            <a href="<?php echo APP_URL; ?>/productos" title="Limpiar filtros"
               class="inline-flex items-center justify-center px-3 py-2.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 rounded-xl transition-colors">
                <i data-lucide="x" class="w-4 h-4"></i>
            </a>
            <?php endif; ?>
        </div>
    </div>
</form>

<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">Producto</th>
                    <th class="px-6 py-4 font-semibold">Vertical / Marca</th>
                    <th class="px-6 py-4 font-semibold">Precio Minimo</th>
                    <th class="px-6 py-4 font-semibold">Precio Maximo</th>
                    <th class="px-6 py-4 font-semibold">Precio Sugerido</th>
                    <th class="px-6 py-4 font-semibold text-center">Estado</th>
                    <?php if ($puedeEditarCatalogo): ?>
                    <th class="px-6 py-4 font-semibold text-right">Acciones</th>
                    <?php endif; ?>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800 text-slate-300">
                <?php if (empty($productos)): ?>
                <tr><td colspan="7" class="px-6 py-10 text-center text-slate-500">
                    <?php echo $hayFiltros ? 'Ningun producto coincide con los filtros aplicados.' : 'No hay productos registrados.'; ?>
                </td></tr>
                <?php else: ?>
                <?php foreach ($productos as $p):
                    $esUf = isset($p['moneda']) && $p['moneda'] === 'UF';
                    $simbolo = $esUf ? 'UF ' : '$';
                    $decimales = $esUf ? 2 : 0;
                    $esServicio = isset($p['tipo']) && $p['tipo'] === 'servicio';
                ?>
                <tr class="hover:bg-slate-800/30 transition-colors">
                    <td class="px-6 py-4">
                        <div class="font-bold text-slate-100 flex items-center gap-2">
                            <?php echo htmlspecialchars($p['nombre']); ?>
                            <?php if ($esServicio): ?>
                            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold bg-purple-600/20 text-purple-300 border border-purple-500/40">SERVICIO</span>
                            <?php endif; ?>
                            <?php if (!empty($p['es_suscripcion'])): ?>
                            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold bg-purple-500/10 text-purple-300 border border-purple-500/20">
                                Suscripcion <?php echo isset($periodos[$p['periodo_suscripcion']]) ? strtolower($periodos[$p['periodo_suscripcion']]) : ''; ?>
                            </span>
                            <?php endif; ?>
                            <?php if ($esUf): ?>
                            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold bg-sky-500/10 text-sky-300 border border-sky-500/20">UF</span>
                            <?php endif; ?>
                        </div>
                        <div class="text-slate-500 text-xs mt-0.5"><?php echo htmlspecialchars(isset($p['descripcion']) ? $p['descripcion'] : ''); ?></div>
                    </td>
                    <td class="px-6 py-4 text-xs">
                        <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($p['vertical_nombre']); ?></span>
                        <div class="text-slate-500 mt-1"><?php echo htmlspecialchars($p['marca_nombre']); ?></div>
                    </td>
                    <?php if ($esServicio): ?>
                    <!-- Sin colspan: la columna Item automática excluye filas con
                         colspan (las trata como estado vacío) y descuadra la tabla -->
                    <td class="px-6 py-4 text-xs text-purple-300/80 italic">Según plan</td>
                    <td class="px-6 py-4 text-xs text-slate-600">—</td>
                    <td class="px-6 py-4 text-xs text-slate-600">—</td>
                    <?php else: ?>
                    <td class="px-6 py-4 font-mono text-xs text-slate-300"><?php echo $simbolo . number_format($p['precio_minimo'], $decimales, ',', '.'); ?></td>
                    <td class="px-6 py-4 font-mono text-xs text-amber-300"><?php echo ($p['precio_maximo'] > 0) ? $simbolo . number_format($p['precio_maximo'], $decimales, ',', '.') : '—'; ?></td>
                    <td class="px-6 py-4 font-mono text-xs text-emerald-400 font-semibold"><?php echo $simbolo . number_format($p['precio_sugerido'], $decimales, ',', '.'); ?></td>
                    <?php endif; ?>
                    <td class="px-6 py-4 text-center">
                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold <?php echo $p['activo'] ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-red-500/10 text-red-400 border border-red-500/20'; ?>">
                            <?php echo $p['activo'] ? 'Activo' : 'Inactivo'; ?>
                        </span>
                    </td>
                    <?php if ($puedeEditarCatalogo): ?>
                    <td class="px-6 py-4 text-right space-x-2 whitespace-nowrap">
                        <?php if ($esServicio && !empty($p['servicio_id'])): ?>
                        <button onclick="cargarEditor(<?php echo (int)$p['servicio_id']; ?>)" class="px-3 py-1.5 bg-purple-600/20 hover:bg-purple-600 text-purple-300 hover:text-white rounded-lg text-xs font-semibold transition-colors border border-purple-500/40">Planes</button>
                        <?php endif; ?>
                        <button onclick='openModal(<?php echo json_encode($p); ?>)' class="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-lg text-xs font-semibold transition-colors border border-slate-700">Editar</button>
                        <button onclick="toggleEstado(<?php echo $p['id']; ?>, <?php echo $p['activo'] ? 0 : 1; ?>)"
                                class="px-3 py-1.5 <?php echo $p['activo'] ? 'bg-red-950/30 hover:bg-red-950/50 text-red-400 border border-red-900/30' : 'bg-green-950/30 hover:bg-green-950/50 text-green-400 border border-green-900/30'; ?> rounded-lg text-xs font-semibold transition-colors">
                            <?php echo $p['activo'] ? 'Desactivar' : 'Activar'; ?>
                        </button>
                    </td>
                    <?php endif; ?>
                </tr>
                <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <?php if ($total > 0): ?>
    <div class="flex flex-col sm:flex-row items-center justify-between gap-3 px-6 py-4 bg-slate-950/50 border-t border-slate-800">
        <p class="text-xs text-slate-500">
            Mostrando <span class="text-slate-300 font-semibold"><?php echo number_format($desde + 1, 0, ',', '.'); ?>–<?php echo number_format(min($desde + $porPagina, $total), 0, ',', '.'); ?></span>
            de <span class="text-slate-300 font-semibold"><?php echo number_format($total, 0, ',', '.'); ?></span> productos
        </p>
        <?php if ($totalPaginas > 1):
            $urlPagina = APP_URL . '/productos?' . ($qsFiltros ? htmlspecialchars($qsFiltros) . '&' : '') . 'pagina=';
            // Ventana de paginas: primera, ultima y ±2 alrededor de la actual
            $paginasVisibles = array();
            for ($i = 1; $i <= $totalPaginas; $i++) {
                if ($i == 1 || $i == $totalPaginas || abs($i - $pagina) <= 2) $paginasVisibles[] = $i;
            }
        ?>
        <nav class="flex items-center gap-1">
            <?php if ($pagina > 1): ?>
            <a href="<?php echo $urlPagina . ($pagina - 1); ?>" class="inline-flex items-center px-2.5 py-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 rounded-lg text-xs font-semibold transition-colors">
                <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
            </a>
            <?php endif; ?>
            <?php $anterior = 0; foreach ($paginasVisibles as $numeroPagina): ?>
                <?php if ($numeroPagina - $anterior > 1): ?>
                <span class="px-1.5 text-slate-600 text-xs">…</span>
                <?php endif; ?>
                <?php if ($numeroPagina == $pagina): ?>
                <span class="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-bold"><?php echo $numeroPagina; ?></span>
                <?php else: ?>
                <a href="<?php echo $urlPagina . $numeroPagina; ?>" class="inline-flex items-center px-3 py-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 rounded-lg text-xs font-semibold transition-colors"><?php echo $numeroPagina; ?></a>
                <?php endif; ?>
            <?php $anterior = $numeroPagina; endforeach; ?>
            <?php if ($pagina < $totalPaginas): ?>
            <a href="<?php echo $urlPagina . ($pagina + 1); ?>" class="inline-flex items-center px-2.5 py-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 rounded-lg text-xs font-semibold transition-colors">
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
            </a>
            <?php endif; ?>
        </nav>
        <?php endif; ?>
    </div>
    <?php endif; ?>
</div>

<?php if ($puedeEditarCatalogo): ?>
<!-- Modal producto (va antes del script para que los IDs existan en el DOM) -->
<div id="modalOverlay" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-slate-950/70 backdrop-blur-sm px-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg p-6 shadow-2xl max-h-[90vh] overflow-y-auto">
        <h3 id="modalTitle" class="text-lg font-bold text-white mb-5">Nuevo Producto</h3>
        <form id="modalForm" class="space-y-4">
            <input type="hidden" id="fId" name="id" value="">
            <!-- Clase: producto normal o SERVICIO con planes (documento premium) -->
            <div class="flex gap-2 bg-slate-950 border border-slate-800 rounded-xl p-1 text-xs font-semibold">
                <label class="flex-1 cursor-pointer">
                    <input type="radio" name="tipo" value="producto" checked class="peer hidden">
                    <span class="block text-center px-3 py-2 rounded-lg text-slate-400 peer-checked:bg-blue-600 peer-checked:text-white transition-colors">Producto</span>
                </label>
                <label class="flex-1 cursor-pointer">
                    <input type="radio" name="tipo" value="servicio" class="peer hidden">
                    <span class="block text-center px-3 py-2 rounded-lg text-slate-400 peer-checked:bg-purple-600 peer-checked:text-white transition-colors">Servicio</span>
                </label>
            </div>
            <p id="notaServicio" class="hidden text-[11px] text-purple-300/90 bg-purple-500/10 border border-purple-500/20 rounded-xl px-3 py-2">
                Los precios de un servicio viven en sus PLANES (se configuran al guardar). Se cotiza con el documento
                premium y en leads/rotación se comporta como cualquier producto.
            </p>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Vertical *</label>
                    <select id="fVerticalId" name="vertical_id" required
                            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">
                        <option value="">-- Seleccionar --</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-semibold text-slate-400 uppercase tracking-wider mb-1.5">Marca *</label>
                    <select id="fMarcaId" name="marca_id" required
                            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">
                        <option value="">-- Seleccionar vertical --</option>
                    </select>
                </div>
                <div class="col-span-2">
                    <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Nombre *</label>
                    <input type="text" id="fNombre" name="nombre" required
                           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="col-span-2">
                    <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Descripcion</label>
                    <textarea id="fDescripcion" name="descripcion" rows="2"
                              class="block w-full px-3 py-2 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="campo-solo-producto">
                    <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Moneda *</label>
                    <select id="fMoneda" name="moneda"
                            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">
                        <option value="CLP">Pesos (CLP)</option>
                        <option value="UF">UF</option>
                    </select>
                </div>
                <div class="campo-solo-producto">
                    <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Suscripcion</label>
                    <div class="flex items-center gap-3 mt-2.5">
                        <label class="inline-flex items-center gap-2 text-sm text-slate-300">
                            <input type="checkbox" id="fEsSuscripcion" name="es_suscripcion" value="1" class="rounded border-slate-600 bg-slate-950">
                            Es suscripcion
                        </label>
                        <select id="fPeriodo" name="periodo_suscripcion" disabled
                                class="flex-1 px-2 py-1.5 bg-slate-950 border border-slate-700 rounded-lg text-slate-200 text-xs focus:outline-none disabled:opacity-40">
                            <?php foreach ($periodos as $clave => $nombrePeriodo): ?>
                            <option value="<?php echo $clave; ?>"><?php echo $nombrePeriodo; ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
                <div class="campo-solo-producto">
                    <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Precio Minimo *</label>
                    <input type="number" id="fPrecioMinimo" name="precio_minimo" step="0.01" min="0" value="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="campo-solo-producto">
                    <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Precio Maximo</label>
                    <input type="number" id="fPrecioMaximo" name="precio_maximo" step="0.01" min="0" value=""
                           placeholder="Sin tope"
                           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="col-span-2 campo-solo-producto">
                    <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Precio Sugerido</label>
                    <input type="number" id="fPrecioSugerido" name="precio_sugerido" step="0.01" min="0" value="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">
                    <p class="text-[11px] text-slate-500 mt-1">Los precios van en la moneda elegida: si es UF, escribe el valor en UF (ej: 12,5). Al cotizar se valida que el precio quede entre el minimo y el maximo.</p>
                </div>
            </div>

            <!-- La identidad del documento (colores, logo, transferencia, diseño)
                 se configura POR MARCA: Catálogo → Marcas → Cotizaciones/Branding -->
            <div class="campo-solo-producto border-t border-slate-800 pt-4">
                <p class="text-[11px] text-slate-500 flex items-center gap-1.5">
                    <i data-lucide="palette" class="w-3.5 h-3.5 text-purple-400 shrink-0"></i>
                    La identidad del documento de cotización (colores, logo, transferencia y diseño) se configura en la <b class="text-slate-300">MARCA</b> del producto (Catálogo → Marcas → pestaña Cotizaciones/Branding).
                </p>
            </div>

            <div class="flex justify-end gap-4 pt-4 border-t border-slate-800">
                <button type="button" onclick="closeModal()" class="px-4 py-2 bg-slate-950 border border-red-500/40 hover:border-red-500/70 hover:bg-red-500/10 text-red-400 text-xs font-semibold rounded-lg transition-colors">Cancelar</button>
                <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-semibold rounded-lg transition-colors">Guardar</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal carga masiva -->
<div id="modalCargaOverlay" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-slate-950/70 backdrop-blur-sm px-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto">
        <h3 class="text-lg font-bold text-white mb-2 flex items-center gap-2">
            <i data-lucide="upload" class="w-5 h-5 text-blue-400"></i> Carga Masiva de Productos
        </h3>
        <p class="text-sm text-slate-400 mb-4">
            Sube un archivo CSV (guardado desde Excel). Si la fila trae <span class="text-slate-200 font-semibold">id</span> se actualiza ese producto;
            si no, se busca por <span class="text-slate-200 font-semibold">nombre + marca</span>: si existe se actualiza y si no, se crea.
            Las verticales y marcas que no existan se crean automaticamente.
        </p>
        <div class="bg-slate-950 border border-slate-800 rounded-xl p-4 mb-4 text-xs text-slate-400 space-y-1.5">
            <p class="font-semibold text-slate-300 uppercase tracking-wider text-[11px]">Columnas del archivo</p>
            <p><span class="text-slate-200 font-mono">vertical; marca; nombre</span> — obligatorias.</p>
            <p><span class="text-slate-200 font-mono">id; descripcion; moneda (CLP/UF); precio_minimo; precio_maximo; precio_sugerido; es_suscripcion (SI/NO); periodo_suscripcion (mensual/trimestral/semestral/anual); activo (SI/NO)</span> — opcionales.</p>
            <p>Los precios aceptan formato chileno ("10.000" o "12,5"). Maximo 20.000 filas y 8 MB por carga.</p>
            <a href="<?php echo APP_URL; ?>/productos/plantilla" class="inline-flex items-center gap-1.5 text-blue-400 hover:text-blue-300 font-semibold mt-1">
                <i data-lucide="file-down" class="w-3.5 h-3.5"></i> Descargar plantilla de ejemplo
            </a>
        </div>
        <form id="formCarga">
            <label id="zonaArchivo" class="flex flex-col items-center justify-center gap-2 border-2 border-dashed border-slate-700 hover:border-blue-500/60 rounded-xl p-6 cursor-pointer transition-colors">
                <i data-lucide="file-spreadsheet" class="w-8 h-8 text-slate-500"></i>
                <span id="nombreArchivo" class="text-sm text-slate-400">Haz clic para elegir el archivo CSV</span>
                <input type="file" id="archivoCarga" name="archivo" accept=".csv,text/csv" class="hidden">
            </label>
            <div class="flex justify-end gap-4 pt-4 mt-4 border-t border-slate-800">
                <button type="button" onclick="cerrarModalCarga()" class="px-4 py-2 bg-slate-950 border border-red-500/40 hover:border-red-500/70 hover:bg-red-500/10 text-red-400 text-xs font-semibold rounded-lg transition-colors">Cancelar</button>
                <button type="submit" id="botonCargar" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed text-white text-xs font-semibold rounded-lg transition-colors" disabled>Cargar productos</button>
            </div>
        </form>
    </div>
</div>

<?php
// Editor embebido de servicios (planes/características/bonos/branding):
// un servicio es un producto tipo servicio y se configura aquí mismo
include __DIR__ . '/parciales/editor_servicio.php';
?>
<?php endif; ?>

<script>
var APP_URL     = '<?php echo APP_URL; ?>';
var todasMarcas = <?php echo json_encode($marcas); ?>;
var marcaFiltroActual = '<?php echo (int)$filtros['marca_id']; ?>';

// ---------- Filtro de marcas en cascada (barra de filtros) ----------
function poblarMarcasFiltro(verticalId, marcaSeleccionada) {
    var sel = document.getElementById('filtroMarca');
    if (!sel) return;
    sel.innerHTML = '<option value="">Todas</option>';
    todasMarcas.forEach(function(m) {
        if (!verticalId || m.vertical_id == verticalId) {
            var opt = document.createElement('option');
            opt.value = m.id;
            opt.textContent = m.nombre;
            if (marcaSeleccionada && m.id == marcaSeleccionada) opt.selected = true;
            sel.appendChild(opt);
        }
    });
}
function cambioVerticalFiltro() {
    var vertical = document.getElementById('filtroVertical');
    poblarMarcasFiltro(vertical ? vertical.value : '', '');
}
(function() {
    var vertical = document.getElementById('filtroVertical');
    poblarMarcasFiltro(vertical ? vertical.value : '', marcaFiltroActual);
})();

// ---------- Modal crear/editar producto ----------
function filtrarMarcas(verticalId, selectedMarcaId) {
    var sel = document.getElementById('fMarcaId');
    sel.innerHTML = '<option value="">-- Seleccionar --</option>';
    todasMarcas.forEach(function(m) {
        if (!verticalId || m.vertical_id == verticalId) {
            var opt = document.createElement('option');
            opt.value = m.id;
            opt.textContent = m.nombre;
            if (selectedMarcaId && m.id == selectedMarcaId) { opt.selected = true; }
            sel.appendChild(opt);
        }
    });
}

// Con clase SERVICIO se ocultan moneda/suscripción/precios (los servicios
// tienen su propio editor de documento con planes). La IDENTIDAD del
// documento ya no se edita aquí: vive en la MARCA (Catálogo → Marcas).
function aplicarVisibilidadTipo() {
    var esServicio = $('input[name=tipo]:checked').val() === 'servicio';
    $('.campo-solo-producto').toggleClass('hidden', esServicio);
    $('#notaServicio').toggleClass('hidden', !esServicio);
}

// El modal solo existe para el admin de la matriz
if (document.getElementById('modalForm')) {
    document.getElementById('fVerticalId').addEventListener('change', function() {
        filtrarMarcas(this.value, '');
    });

    // El periodo solo se habilita cuando el producto es suscripcion
    document.getElementById('fEsSuscripcion').addEventListener('change', function() {
        document.getElementById('fPeriodo').disabled = !this.checked;
    });

    $(document).on('change', 'input[name=tipo]', aplicarVisibilidadTipo);

    document.getElementById('modalForm').addEventListener('submit', function(e) {
        e.preventDefault();
        var id = document.getElementById('fId').value;
        var url = id ? APP_URL + '/productos/editar' : APP_URL + '/productos/crear';
        $.post(url, $('#modalForm').serialize(), function(r) {
            if (r.success) {
                closeModal();
                Swal.fire({ icon: 'success', title: r.message, background: '#1e293b', color: '#f8fafc', timer: 1400, showConfirmButton: false })
                    .then(function() {
                        // Servicio: recargar abriendo el editor de planes al tiro
                        if (r.servicio_id) {
                            window.location.href = APP_URL + '/productos?editar_servicio=' + r.servicio_id;
                        } else {
                            location.reload();
                        }
                    });
            } else {
                Swal.fire({ icon: 'error', title: 'No se pudo guardar', text: r.message, background: '#1e293b', color: '#f8fafc' });
            }
        }, 'json');
    });
}

function openModal(data) {
    document.getElementById('modalForm').reset();
    document.getElementById('fId').value = '';
    document.getElementById('fPeriodo').disabled = true;
    filtrarMarcas('', '');

    if (data) {
        document.getElementById('modalTitle').textContent = data.tipo === 'servicio' ? 'Editar Servicio' : 'Editar Producto';
        document.getElementById('fId').value = data.id;
        document.getElementById('fVerticalId').value = data.vertical_id;
        filtrarMarcas(data.vertical_id, data.marca_id);
        document.getElementById('fNombre').value = data.nombre;
        document.getElementById('fDescripcion').value = data.descripcion || '';
        $('input[name=tipo][value=' + (data.tipo === 'servicio' ? 'servicio' : 'producto') + ']').prop('checked', true);
        document.getElementById('fMoneda').value = data.moneda || 'CLP';
        document.getElementById('fPrecioMinimo').value = data.precio_minimo;
        document.getElementById('fPrecioMaximo').value = (data.precio_maximo && data.precio_maximo > 0) ? data.precio_maximo : '';
        document.getElementById('fPrecioSugerido').value = data.precio_sugerido;
        document.getElementById('fEsSuscripcion').checked = data.es_suscripcion == 1;
        document.getElementById('fPeriodo').disabled = data.es_suscripcion != 1;
        if (data.periodo_suscripcion) document.getElementById('fPeriodo').value = data.periodo_suscripcion;
    } else {
        document.getElementById('modalTitle').textContent = 'Nuevo Producto / Servicio';
        $('input[name=tipo][value=producto]').prop('checked', true);
    }
    aplicarVisibilidadTipo();
    document.getElementById('modalOverlay').classList.remove('hidden');
}

function closeModal() {
    document.getElementById('modalOverlay').classList.add('hidden');
}

function toggleEstado(id, nuevoEstado) {
    Swal.fire({
        title: nuevoEstado ? '¿Activar producto?' : '¿Desactivar producto?',
        icon: 'question', showCancelButton: true, confirmButtonText: 'Si', cancelButtonText: 'Cancelar',
        background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#3b82f6'
    }).then(function(res) {
        if (res.isConfirmed) {
            $.post(APP_URL + '/productos/toggle', { id: id }, function(r) {
                if (r.success) location.reload();
                else Swal.fire({ icon: 'error', title: r.message, background: '#1e293b', color: '#f8fafc' });
            }, 'json');
        }
    });
}

// ---------- Carga masiva ----------
function abrirModalCarga() {
    document.getElementById('formCarga').reset();
    document.getElementById('nombreArchivo').textContent = 'Haz clic para elegir el archivo CSV';
    document.getElementById('botonCargar').disabled = true;
    document.getElementById('modalCargaOverlay').classList.remove('hidden');
}
function cerrarModalCarga() {
    document.getElementById('modalCargaOverlay').classList.add('hidden');
}

if (document.getElementById('formCarga')) {
    document.getElementById('archivoCarga').addEventListener('change', function() {
        var hayArchivo = this.files && this.files.length > 0;
        document.getElementById('nombreArchivo').textContent = hayArchivo ? this.files[0].name : 'Haz clic para elegir el archivo CSV';
        document.getElementById('botonCargar').disabled = !hayArchivo;
    });

    document.getElementById('formCarga').addEventListener('submit', function(e) {
        e.preventDefault();
        var entrada = document.getElementById('archivoCarga');
        if (!entrada.files || !entrada.files.length) return;

        var datos = new FormData();
        datos.append('archivo', entrada.files[0]);

        var boton = document.getElementById('botonCargar');
        boton.disabled = true;
        boton.textContent = 'Cargando...';

        $.ajax({
            url: APP_URL + '/productos/importar',
            type: 'POST',
            data: datos,
            processData: false,
            contentType: false,
            dataType: 'json'
        }).done(function(r) {
            if (!r.success) {
                Swal.fire({ icon: 'error', title: 'No se pudo cargar', text: r.message, background: '#1e293b', color: '#f8fafc' });
                return;
            }
            cerrarModalCarga();
            var detalle = '<div style="text-align:left;font-size:14px">'
                + '<p>Productos creados: <b>' + r.insertados + '</b></p>'
                + '<p>Productos actualizados: <b>' + r.actualizados + '</b></p>'
                + (r.verticales_creadas ? '<p>Verticales nuevas: <b>' + r.verticales_creadas + '</b></p>' : '')
                + (r.marcas_creadas ? '<p>Marcas nuevas: <b>' + r.marcas_creadas + '</b></p>' : '');
            if (r.errores_total > 0) {
                detalle += '<p style="margin-top:8px;color:#fca5a5">Filas con error (' + r.errores_total + '):</p>'
                    + '<ul style="max-height:180px;overflow-y:auto;color:#fca5a5;font-size:12px;padding-left:18px">';
                r.errores.forEach(function(err) { detalle += '<li>' + $('<div>').text(err).html() + '</li>'; });
                if (r.errores_total > r.errores.length) {
                    detalle += '<li>... y ' + (r.errores_total - r.errores.length) + ' mas.</li>';
                }
                detalle += '</ul>';
            }
            detalle += '</div>';
            Swal.fire({
                icon: r.errores_total > 0 ? 'warning' : 'success',
                title: r.message,
                html: detalle,
                background: '#1e293b', color: '#f8fafc',
                confirmButtonColor: '#3b82f6'
            }).then(function() { location.reload(); });
        }).fail(function() {
            Swal.fire({ icon: 'error', title: 'Error de red al subir el archivo', text: 'Revisa la conexion e intenta de nuevo.', background: '#1e293b', color: '#f8fafc' });
        }).always(function() {
            boton.disabled = false;
            boton.textContent = 'Cargar productos';
        });
    });
}
</script>
