@props([
    'label'   => '',
    'value'   => '0',
    'color'   => 'info',
    'icon'    => 'fas fa-chart-bar',
    'filter'  => null,       // valor a pasar como filtro (ej: '1', '0', 'null', '')
    'tableId' => null,       // id del <table> DataTable a filtrar
    'param'   => 'filtro',   // nombre del parámetro custom enviado al servidor
    'id'      => null,
])

@php
    $clickable = ($filter !== null && $filter !== '' && $tableId) || ($filter === '' && $tableId);
    $hasFilter = $tableId !== null;
@endphp

<div
    id="{{ $id }}"
    class="{{ "card shadow-sm border-0 bg-white h-100" }} {{ $hasFilter ? 'kpi-filter-card cursor-pointer' : '' }}"
    style="border-radius: 12px; transition: all 0.3s ease;"
    @if($hasFilter)
        data-table="{{ $tableId }}"
        data-param="{{ $param }}"
        data-filter="{{ $filter }}"
    @endif
    {{ $attributes->except(['id', 'class']) }}
>
    <div class="card-body d-flex align-items-center p-3">
        <div class="icon-shape bg-soft-{{ $color }} p-3 rounded-circle mr-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
            <i class="{{ $icon }} text-{{ $color }}" style="font-size: 1.2rem;"></i>
        </div>
        <div>
            <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.7rem; letter-spacing: 0.5px;">{{ $label }}</small>
            <h4 class="mb-0 font-weight-bold text-dark" id="{{ $id }}-value">{{ $value }}</h4>
        </div>
    </div>
</div>


@pushonce('js')
<script>
    (function () {
        // Delegate: captura clics en cualquier kpi-filter-card del DOM
        document.addEventListener('click', function (e) {
            const card = e.target.closest('.kpi-filter-card');
            if (!card) return;

            const tableId = card.dataset.table;
            const param   = card.dataset.param  ?? 'filtro';
            const filter  = card.dataset.filter ?? '';

            if (!tableId) return;

            // Resaltar activo
            document.querySelectorAll('.kpi-filter-card').forEach(c => c.classList.remove('active-filter'));
            card.classList.add('active-filter');

            const dt = $('#' + tableId).DataTable();

            if (param === 'search') {
                dt.search(filter).draw();
            } else {
                // Reconstruir la URL del ajax añadiendo el parámetro custom
                dt.ajax.url(function () {
                    const settings = dt.settings()[0];
                    let baseUrl = settings.oInit.ajax;
                    
                    // Si ajax es un objeto, extraer la URL
                    if (baseUrl && typeof baseUrl === 'object') {
                        baseUrl = baseUrl.url;
                    }
                    
                    // Fallback a sAjaxSource si es necesario
                    baseUrl = baseUrl || settings.sAjaxSource || window.location.href;

                    const url = new URL(baseUrl, window.location.origin);
                    if (filter === '' || filter === null) {
                        url.searchParams.delete(param);
                    } else {
                        url.searchParams.set(param, filter);
                    }
                    return url.toString();
                }()).load();
            }
        });
    })();
</script>
@endpushonce