<?php
/**
 * ASISMA CRM - Filtros de Leads (compartido por listado y tablero)
 *
 * Se incluye desde leads/index.php y leads/tablero.php. Antes del include hay
 * que definir $filtrosAction (URL destino del form GET). Los valores actuales
 * llegan como $filters (listado) o $filtros (tablero); aca se unifican en $F.
 * La segmentacion (vertical/marca/producto/franquiciado) es solo del admin y
 * usa autocompletar (escribes para buscar), con cascada vertical→marca→producto.
 */
$F = isset($filtros) ? $filtros : (isset($filters) ? $filters : array());
$val = function($k) use ($F) { return isset($F[$k]) ? $F[$k] : ''; };
$acAdmin = SessionHelper::isAdmin();

// Nombre a mostrar del item seleccionado (para prellenar el input de texto)
$nombreSel = function($lista, $idSel, $campoNombre = 'nombre', $campoId = 'id') {
    foreach ($lista as $it) {
        if ((string)$it[$campoId] === (string)$idSel && $idSel !== '' && $idSel !== 0 && $idSel !== '0') {
            return $it[$campoNombre];
        }
    }
    return '';
};
?>
<form method="GET" action="<?php echo $filtrosAction; ?>"
      class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl mb-8 grid grid-cols-1 md:grid-cols-4 gap-4">

    <!-- Buscar -->
    <div>
        <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Buscar</label>
        <div class="relative">
            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-slate-500">
                <i data-lucide="search" class="w-4 h-4"></i>
            </span>
            <input type="text" name="q" value="<?php echo htmlspecialchars($val('q')); ?>"
                   class="block w-full pl-9 pr-3 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                   placeholder="Nombre, RUT, mail, tel...">
        </div>
    </div>

    <!-- Estado -->
    <div>
        <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Estado</label>
        <select name="estado" class="block w-full px-3 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">-- Todos los Estados --</option>
            <?php foreach (arr_estados_embudo() as $key => $est): ?>
                <option value="<?php echo $key; ?>" <?php echo $val('estado') === $key ? 'selected' : ''; ?>><?php echo $est['label']; ?></option>
            <?php endforeach; ?>
        </select>
    </div>

    <!-- Origen -->
    <div>
        <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Origen</label>
        <select name="origen" class="block w-full px-3 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">-- Todos los Orígenes --</option>
            <?php foreach (arr_origenes_lead() as $key => $label): ?>
                <option value="<?php echo $key; ?>" <?php echo $val('origen') === $key ? 'selected' : ''; ?>><?php echo $label; ?></option>
            <?php endforeach; ?>
        </select>
    </div>

    <!-- Acciones (estilo del tablero: Filtrar azul + Limpiar oscuro) -->
    <div class="flex items-end gap-2">
        <button type="submit" class="flex-1 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl text-sm font-semibold transition-colors flex items-center justify-center gap-1.5">
            <i data-lucide="filter" class="w-3.5 h-3.5"></i> Filtrar
        </button>
        <a href="<?php echo $filtrosAction; ?>" class="flex-1 py-2.5 bg-slate-950 hover:bg-slate-800 border border-slate-800 text-slate-400 text-center rounded-xl text-sm font-semibold transition-colors">
            Limpiar
        </a>
    </div>

    <?php if ($acAdmin): ?>
    <!-- Segmentación (solo matriz), con autocompletar y cascada -->
    <?php
    $filtrosAutocompletar = array(
        array('campo' => 'vertical_id',     'label' => 'Vertical',     'ph' => 'Todas las verticales',   'nombre' => $nombreSel($verticales, $val('vertical_id'))),
        array('campo' => 'marca_id',        'label' => 'Marca',        'ph' => 'Todas las marcas',       'nombre' => $nombreSel($marcas, $val('marca_id'))),
        array('campo' => 'producto_id',     'label' => 'Producto',     'ph' => 'Todos los productos',    'nombre' => $nombreSel($productos, $val('producto_id'))),
        array('campo' => 'franquiciado_id', 'label' => 'Franquiciado', 'ph' => 'Todos los franquiciados','nombre' => $nombreSel($franquiciados, $val('franquiciado_id'), 'nombre_fantasia')),
    );
    foreach ($filtrosAutocompletar as $fa): ?>
    <div class="autocompletar-filtro relative" data-campo="<?php echo $fa['campo']; ?>">
        <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2"><?php echo $fa['label']; ?></label>
        <div class="relative">
            <input type="text" autocomplete="off" placeholder="<?php echo htmlspecialchars($fa['ph']); ?>"
                   value="<?php echo htmlspecialchars($fa['nombre']); ?>"
                   class="ac-texto block w-full pl-3 pr-8 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            <input type="hidden" name="<?php echo $fa['campo']; ?>" class="ac-id" value="<?php echo htmlspecialchars($val($fa['campo'])); ?>">
            <button type="button" class="ac-limpiar absolute inset-y-0 right-0 pr-2.5 flex items-center text-slate-500 hover:text-slate-300 <?php echo $fa['nombre'] === '' ? 'hidden' : ''; ?>" tabindex="-1">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
            <div class="ac-dropdown hidden absolute left-0 right-0 top-full mt-1 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl max-h-56 overflow-y-auto" style="z-index: 60;"></div>
        </div>
    </div>
    <?php endforeach; ?>
    <?php endif; ?>
</form>

<?php if ($acAdmin): ?>
<style>
    /* La celda del filtro que está abierta se levanta sobre las demás */
    .autocompletar-filtro.abierto { z-index: 55; }
</style>
<script>
(function() {
    // Catálogo para los autocompletar (con la relación para la cascada)
    var CAT = {
        vertical_id: <?php echo json_encode(array_map(function($v){ return array('id'=>(int)$v['id'],'nombre'=>$v['nombre']); }, $verticales), JSON_UNESCAPED_UNICODE); ?>,
        marca_id: <?php echo json_encode(array_map(function($mk){ return array('id'=>(int)$mk['id'],'nombre'=>$mk['nombre'],'padre'=>(int)$mk['vertical_id']); }, $marcas), JSON_UNESCAPED_UNICODE); ?>,
        producto_id: <?php echo json_encode(array_map(function($p){ return array('id'=>(int)$p['id'],'nombre'=>$p['nombre'],'padre'=>(int)$p['marca_id']); }, $productos), JSON_UNESCAPED_UNICODE); ?>,
        franquiciado_id: <?php echo json_encode(array_map(function($fr){ return array('id'=>(int)$fr['id'],'nombre'=>$fr['nombre_fantasia']); }, $franquiciados), JSON_UNESCAPED_UNICODE); ?>
    };
    // Cascada: quién depende de quién (el hijo se filtra por el id del padre)
    var PADRE = { marca_id: 'vertical_id', producto_id: 'marca_id' };
    var HIJO  = { vertical_id: 'marca_id', marca_id: 'producto_id' };

    function normalizar(t) {
        t = (t || '').toLowerCase();
        var mapa = { 'á':'a','é':'e','í':'i','ó':'o','ú':'u','ñ':'n' };
        return t.replace(/[áéíóúñ]/g, function(c){ return mapa[c]; });
    }
    function esc(t) { return $('<i>').text(t == null ? '' : t).html(); }

    function $celda(campo) { return $('.autocompletar-filtro[data-campo="' + campo + '"]'); }

    // Opciones visibles de un campo, respetando la cascada (padre seleccionado)
    function opcionesDe(campo, filtroTexto) {
        var lista = CAT[campo] || [];
        var padreCampo = PADRE[campo];
        if (padreCampo) {
            var padreId = $celda(padreCampo).find('.ac-id').val();
            if (padreId) lista = lista.filter(function(o){ return String(o.padre) === String(padreId); });
        }
        var q = normalizar(filtroTexto);
        if (q) lista = lista.filter(function(o){ return normalizar(o.nombre).indexOf(q) !== -1; });
        return lista.slice(0, 20);
    }

    function pintarDropdown($celdaEl, campo) {
        var texto = $celdaEl.find('.ac-texto').val();
        var $drop = $celdaEl.find('.ac-dropdown');
        var ops = opcionesDe(campo, texto);
        if (!ops.length) {
            $drop.html('<div class="px-3 py-2.5 text-xs text-slate-500 italic">Sin coincidencias</div>').removeClass('hidden');
        } else {
            var html = '';
            ops.forEach(function(o) {
                html += '<div class="ac-opcion px-3 py-2.5 cursor-pointer hover:bg-slate-800 border-b border-slate-800/60 text-xs text-slate-200" data-id="' + o.id + '" data-nombre="' + esc(o.nombre) + '">' + esc(o.nombre) + '</div>';
            });
            $drop.html(html).removeClass('hidden');
        }
        $celdaEl.addClass('abierto');
    }
    function cerrar($celdaEl) {
        $celdaEl.find('.ac-dropdown').addClass('hidden').empty();
        $celdaEl.removeClass('abierto');
    }

    // Al cambiar un campo, se limpian sus hijos (cascada)
    function limpiarHijos(campo) {
        var hijo = HIJO[campo];
        while (hijo) {
            var $h = $celda(hijo);
            $h.find('.ac-texto').val('');
            $h.find('.ac-id').val('');
            $h.find('.ac-limpiar').addClass('hidden');
            hijo = HIJO[hijo];
        }
    }

    function seleccionar($celdaEl, campo, id, nombre) {
        $celdaEl.find('.ac-texto').val(nombre);
        $celdaEl.find('.ac-id').val(id);
        $celdaEl.find('.ac-limpiar').removeClass('hidden');
        cerrar($celdaEl);
        limpiarHijos(campo);
    }
    function limpiarCampo($celdaEl, campo) {
        $celdaEl.find('.ac-texto').val('');
        $celdaEl.find('.ac-id').val('');
        $celdaEl.find('.ac-limpiar').addClass('hidden');
        cerrar($celdaEl);
        limpiarHijos(campo);
    }

    // Escribir → filtra y muestra; y invalida la selección anterior hasta elegir
    $(document).on('input', '.autocompletar-filtro .ac-texto', function() {
        var $celdaEl = $(this).closest('.autocompletar-filtro');
        var campo = $celdaEl.data('campo');
        if ($celdaEl.find('.ac-id').val()) {
            $celdaEl.find('.ac-id').val('');
            $celdaEl.find('.ac-limpiar').addClass('hidden');
            limpiarHijos(campo);
        }
        pintarDropdown($celdaEl, campo);
    });
    // Enfocar el input vacío también abre el listado completo (acotado por cascada)
    $(document).on('focus', '.autocompletar-filtro .ac-texto', function() {
        var $celdaEl = $(this).closest('.autocompletar-filtro');
        pintarDropdown($celdaEl, $celdaEl.data('campo'));
    });
    // Elegir opción (mousedown antes del blur)
    $(document).on('mousedown', '.ac-opcion', function(e) {
        e.preventDefault();
        var $celdaEl = $(this).closest('.autocompletar-filtro');
        seleccionar($celdaEl, $celdaEl.data('campo'), $(this).data('id'), $(this).attr('data-nombre'));
    });
    // Botón limpiar (x)
    $(document).on('click', '.autocompletar-filtro .ac-limpiar', function() {
        var $celdaEl = $(this).closest('.autocompletar-filtro');
        limpiarCampo($celdaEl, $celdaEl.data('campo'));
    });
    // Cerrar al salir
    $(document).on('blur', '.autocompletar-filtro .ac-texto', function() {
        var $celdaEl = $(this).closest('.autocompletar-filtro');
        setTimeout(function(){ cerrar($celdaEl); }, 150);
    });
})();
</script>
<?php endif; ?>
