<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames(([
    'label',
    'value',
    'icon'  => null,
    'color' => 'brand',
    'trend' => null,        // numeric: +12.5 / -8.2 / null
    'trendLabel' => null,   // texto extra opcional
    'hint'  => null,
    'sparkline' => null,    // array de números opcional
    'sparkColor' => null,
]));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter(([
    'label',
    'value',
    'icon'  => null,
    'color' => 'brand',
    'trend' => null,        // numeric: +12.5 / -8.2 / null
    'trendLabel' => null,   // texto extra opcional
    'hint'  => null,
    'sparkline' => null,    // array de números opcional
    'sparkColor' => null,
]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars); ?>

<?php
    $palette = [
        'brand'   => ['bg' => 'bg-brand-50',    'text' => 'text-brand-600',   'spark' => '#6366f1'],
        'emerald' => ['bg' => 'bg-emerald-50',  'text' => 'text-emerald-600', 'spark' => '#10b981'],
        'amber'   => ['bg' => 'bg-amber-50',    'text' => 'text-amber-600',   'spark' => '#f59e0b'],
        'rose'    => ['bg' => 'bg-rose-50',     'text' => 'text-rose-600',    'spark' => '#f43f5e'],
        'sky'     => ['bg' => 'bg-sky-50',      'text' => 'text-sky-600',     'spark' => '#0ea5e9'],
        'violet'  => ['bg' => 'bg-violet-50',   'text' => 'text-violet-600',  'spark' => '#8b5cf6'],
        'orange'  => ['bg' => 'bg-orange-50',   'text' => 'text-orange-600',  'spark' => '#f97316'],
        'slate'   => ['bg' => 'bg-ink-100',     'text' => 'text-ink-700',     'spark' => '#64748b'],
    ];
    $tones = $palette[$color] ?? $palette['brand'];
    $sparkColor = $sparkColor ?? $tones['spark'];
    $chartId = 'spark-'.uniqid();
?>

<div class="card card-pad relative overflow-hidden hover:shadow-soft-md transition-shadow">
    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0 flex-1">
            <p class="text-xs font-medium text-ink-500 uppercase tracking-wider"><?php echo e($label); ?></p>
            <p class="mt-2 text-[28px] leading-none font-bold text-ink-900 font-display tracking-tight truncate"><?php echo e($value); ?></p>

            <div class="mt-2 flex items-center gap-2 text-xs">
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($trend !== null): ?>
                    <span class="<?php echo \Illuminate\Support\Arr::toCssClasses([
                        'inline-flex items-center gap-0.5 font-semibold px-1.5 py-0.5 rounded-md',
                        'bg-emerald-50 text-emerald-700' => (float) $trend > 0,
                        'bg-rose-50 text-rose-700'        => (float) $trend < 0,
                        'bg-ink-100 text-ink-600'         => (float) $trend == 0,
                    ]); ?>">
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if((float) $trend > 0): ?>
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/></svg>
                        <?php elseif((float) $trend < 0): ?>
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        <?php echo e((float) $trend > 0 ? '+' : ''); ?><?php echo e($trend); ?>%
                    </span>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($trendLabel): ?>
                    <span class="text-ink-400"><?php echo e($trendLabel); ?></span>
                <?php elseif($hint): ?>
                    <span class="text-ink-400"><?php echo e($hint); ?></span>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </div>
        </div>

        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($icon): ?>
            <div class="rounded-xl p-2.5 <?php echo e($tones['bg']); ?> <?php echo e($tones['text']); ?> flex-shrink-0">
                <?php echo $icon; ?>

            </div>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </div>

    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($sparkline): ?>
        <div id="<?php echo e($chartId); ?>" class="mt-3 -mb-1 h-12"></div>
        <?php $__env->startPush('scripts'); ?>
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    const el = document.querySelector('#<?php echo e($chartId); ?>');
                    if (!el || typeof ApexCharts === 'undefined') return;
                    new ApexCharts(el, {
                        chart: { type: 'area', height: 50, sparkline: { enabled: true } },
                        stroke: { curve: 'smooth', width: 2 },
                        fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.3, opacityTo: 0, stops: [0, 100] } },
                        series: [{ data: <?php echo json_encode(array_values((array) $sparkline), 15, 512) ?> }],
                        colors: ['<?php echo e($sparkColor); ?>'],
                        tooltip: { enabled: false },
                    }).render();
                });
            </script>
        <?php $__env->stopPush(); ?>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
</div>
<?php /**PATH /Applications/XAMPP/xamppfiles/htdocs/CitasSoft/resources/views/components/kpi.blade.php ENDPATH**/ ?>