{{--
    Componente: mini-stat-chart
    Uso:
        <x-dashboard.mini-stat-chart
            value="570"
            label="Total Orders"
            change="-2.2"
            chart-id="js-chartjs-total-orders"
        />
--}}

@props([
    'value'   => '0',
    'label'   => 'Stat',
    'change'  => '0',
    'chartId' => 'js-chartjs-stat',
])

@php
    $isPositive = (float) $change >= 0;
    $badgeClass = $isPositive ? 'text-success bg-success-light' : 'text-danger bg-danger-light';
    $caretIcon  = $isPositive ? 'fa-caret-up' : 'fa-caret-down';
    $absChange  = abs((float) $change);
@endphp

<div class="block block-rounded d-flex flex-column h-100 mb-0">
    <div class="block-content flex-grow-1 d-flex justify-content-between">
        <dl class="mb-0">
            <dt class="fs-3 fw-bold">{{ $value }}</dt>
            <dd class="fs-sm fw-medium text-muted mb-0">{{ $label }}</dd>
        </dl>
        <div>
            <div class="d-inline-block px-2 py-1 rounded-3 fs-xs fw-semibold {{ $badgeClass }}">
                <i class="fa {{ $caretIcon }} me-1"></i>{{ $absChange }}%
            </div>
        </div>
    </div>
    <div class="block-content p-1 text-center overflow-hidden">
        <canvas id="{{ $chartId }}" style="height: 90px;"></canvas>
    </div>
</div>