@props([
    'label' => 'KPI',
    'value' => 0,
    'icon' => 'ni ni-chart-bar-32',
    'color' => 'primary',
    'subtitle' => null,
    'subtitleValue' => null,
])

<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
    <div class="card">
        <div class="card-body p-3">
            <div class="row">
                <div class="col-8">
                    <div class="numbers">
                        <p class="text-sm mb-0 text-uppercase font-weight-bold">{{ $label }}</p>
                        <h5 class="font-weight-bolder">
                            {{ is_numeric($value) ? number_format($value) : $value }}
                        </h5>
                        @if($subtitle)
                            <p class="mb-0">
                                <span class="text-sm font-weight-bolder text-{{ $color }}">{{ $subtitleValue }}</span>
                                <span class="text-xs">{{ $subtitle }}</span>
                            </p>
                        @endif
                    </div>
                </div>
                <div class="col-4 text-end">
                    <div class="icon icon-shape bg-gradient-{{ $color }} shadow-{{ $color }} text-center rounded-circle">
                        <i class="{{ $icon }} text-lg opacity-10" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>