{{-- Statistics Component --}}
@props([
    'label',
    'value',
    'color' => 'primary',
    'route' => '',
    'col'   => '4',
    'icon'  => 'bx bx-registered'
])

<div class="col-xl-{{ $col ?: '4' }} col-md-6">
    <div class="card card-animate stat-card border-0 overflow-hidden">
        <div class="card-body">
            <div class="d-flex align-items-center justify-content-between">
                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ $label }}</p>

                <!-- أيقونة -->
                <div class="avatar-sm flex-shrink-0">
                    <span class="avatar-title rounded bg-{{ $color }}-subtle text-{{ $color }} fs-3">
                        <i class="{{ $icon }}"></i>
                    </span>
                </div>
            </div>

            <div class="d-flex align-items-end justify-content-between  ">
                <div>
                    <h4 class="fs-22 fw-semibold text-{{ $color }} mb-2">
                        <span class="counter-value" data-target="{{ $value }}">0</span>
                    </h4>
                    @if($route)
                        <a href="{{ $route }}" class="text-decoration-underline text-{{ $color }} hover-link">{{ $label }}</a>
                    @else
                        <span class="text-muted small">{{ $label }}</span>
                    @endif
                </div>
            </div>
        </div>

        <!-- شريط زخرفي سفلي خفيف باللون -->
        <div class="stat-accent bg-{{ $color }}"></div>
    </div>
</div>

<style>
/* Light/Dark aware Statistics Card */
.stat-card {
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.08);
    background: var(--color-white);
    transition: all 0.3s ease;
}

html[data-bs-theme=dark] .stat-card {
    box-shadow: 0 2px 8px rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}

/* Hover effect */
.stat-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transform: translateY(-2px);
}

html[data-bs-theme=dark] .stat-card:hover {
    box-shadow: 0 4px 16px rgba(255,255,255,.15);
}

/* Decorative accent */
.stat-accent {
    height: 3px;
    opacity: 0.8;
}

/* Links */
.hover-link {
    transition: all 0.2s ease;
}

.hover-link:hover {
    color: var(--color-secondary) !important;
    text-decoration-color: var(--color-primary) !important;
}

/* Avatar backgrounds (light mode) */
.bg-primary-subtle   { background-color: rgba(13,110,253,.12) !important; }
.bg-info-subtle      { background-color: rgba(13,202,240,.12) !important; }
.bg-success-subtle   { background-color: rgba(25,135,84,.12) !important; }
.bg-danger-subtle    { background-color: rgba(220,53,69,.12) !important; }
.bg-warning-subtle   { background-color: rgba(253,126,20,.12) !important; }

/* Avatar backgrounds (dark mode tweaks) */
html[data-bs-theme=dark] .bg-primary-subtle   { background-color: rgba(72,196,240,.15) !important; }
html[data-bs-theme=dark] .bg-info-subtle      { background-color: rgba(13,202,240,.15) !important; }
html[data-bs-theme=dark] .bg-success-subtle   { background-color: rgba(25,135,84,.18) !important; }
html[data-bs-theme=dark] .bg-danger-subtle    { background-color: rgba(220,53,69,.18) !important; }
html[data-bs-theme=dark] .bg-warning-subtle   { background-color: rgba(253,126,20,.18) !important; }

/* Charts */
.chart-item h4 {
    color: var(--color-secondary);
    font-weight: 600;
}

.chart-divider {
    background: linear-gradient(to bottom, transparent, var(--color-secondary), transparent);
    opacity: 0.2;
}

/* Card headers */
.card-header {
    background: rgba(248,249,250,.8);
    border-bottom: 1px solid rgba(0,0,0,.08);
}

html[data-bs-theme=dark] .card-header {
    background: rgba(30,30,30,.8);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.card-title {
    color: var(--color-secondary);
    font-weight: 600;
}

.card-title i {
    color: var(--color-secondary-light);
}

</style>