
{{-- Tarjetas de accesos rapidos y metricas del dashboard de inicio. --}}
<div class="col-12 ">
    <div class="row g-3 p-2">
        <div class="col-12 col-sm-6 col-lg-3">
            <a href="{{ route('admin_fit.assistance.takeAssistance') }}" class="text-decoration-none">
                <div class="dashboard-stat-card dashboard-stat-card--highlight  h-100">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <p class="dashboard-stat-title mb-0">Tomar asistencia   </p>
                        <span class="dashboard-stat-icon-wrap">
                            <i class="bi bi-arrow-up-right-circle"></i>
                        </span>
                    </div>
                    <h2 class="dashboard-stat-value mb-2">{{ (int) ($assistancePeriods ?? 0) }}</h2>
                    <p class="dashboard-stat-meta mb-0">
                        <i class="bi bi-graph-up-arrow me-1"></i>Asistencias tomadas del dia 
                    </p>
                </div>
            </a>
        </div>
        @role('Administrador')
        {{-- formato oscuro. --}}
        <div class="col-12 col-sm-6 col-lg-3">
            <a href="{{ route('admin_fit.users.create') }}" class="text-decoration-none">
                <div class="dashboard-stat-card dashboard-stat-card--dark h-100">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <p class="dashboard-stat-title mb-0">Crear usuario</p>
                        <span class="dashboard-stat-icon-wrap">
                            <i class="bi bi-arrow-up-right-circle"></i>
                        </span>
                    </div>
                    <h2 class="dashboard-stat-value mb-2">{{ (int) ($activeUsersCount ?? 0) }}</h2>
                    <p class="dashboard-stat-meta mb-0">
                        <i class="bi bi-graph-up-arrow me-1"></i>Usuarios activos
                    </p>
                </div>
            </a>
        </div>
        @endrole
        <div class="col-12 col-sm-6 col-lg-3">
            <a href="{{ route('admin_fit.pos.index') }}" class="text-decoration-none">
                <div class="dashboard-stat-card dashboard-stat-card--pos h-100">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <p class="dashboard-stat-title mb-0">POS</p>
                        <span class="dashboard-stat-icon-wrap">
                            <i class="bi bi-arrow-up-right-circle"></i>
                        </span>
                    </div>
                    <h2 class="dashboard-stat-value mb-2">{{ number_format((float) (($salesOnlyProducts['aux_debt'] ?? 0)), 2, ',', '.') }}</h2>
                    <p class="dashboard-stat-meta mb-0">
                        <i class="bi bi-currency-dollar me-1"></i>debt: {{ number_format((float) (($salesOnlyProducts['debt'] ?? 0)), 2, ',', '.') }}
                    </p>
                </div>
            </a>
        </div>
        @role('Administrador')
            <div class="col-12 col-sm-6 col-lg-3">
                    <a href="#" class="text-decoration-none">
                        <div class="dashboard-stat-card dashboard-stat-card--highlight  h-100">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <p class="dashboard-stat-title mb-0">Deuda total</p>
                                <span class="dashboard-stat-icon-wrap">
                                    <i class="bi bi-arrow-up-right-circle"></i>
                                </span>
                            </div>
                            <h2 class="dashboard-stat-value mb-2">{{ number_format((float) (($totalDebt['aux_debt'] ?? 0)), 2, ',', '.') }}</h2>
                            <p class="dashboard-stat-meta mb-0">
                                <i class="bi bi-currency-dollar me-1"></i>debt: {{ number_format((float) (($totalDebt['debt'] ?? 0)), 2, ',', '.') }}
                            </p>
                        </div>
                    </a>
            </div>
        @endrole
    </div>
</div>
@push('styles')
<style>

    .dashboard-stat-card {
        border-radius: 14px;
        border: 1px solid #e8ecf0;
        background: #ffffff;
        padding: 1rem;
        box-shadow: 0 2px 6px rgba(17, 24, 39, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    /* Estilo oscuro con fondo degradado negro y letras blancas */
    .dashboard-stat-card--dark {
        background: linear-gradient(135deg, #232526 0%, #000000 100%);
        border: 1px solid #232526;
    }
    .dashboard-stat-card--dark .dashboard-stat-title,
    .dashboard-stat-card--dark .dashboard-stat-value,
    .dashboard-stat-card--dark .dashboard-stat-meta,
    .dashboard-stat-card--dark .dashboard-stat-icon-wrap {
        color: #fff;
    }
    .dashboard-stat-card--dark .dashboard-stat-icon-wrap {
        border-color: rgba(255,255,255,0.55);
        background: rgba(255,255,255,0.10);
    }

    .dashboard-stat-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 22px rgba(17, 24, 39, 0.12);
    }

    .dashboard-stat-card--highlight {
        background: linear-gradient(135deg, #ffcd11, #f4b400);
        border-color: transparent;
    }

    .dashboard-stat-card--pos {
        background: linear-gradient(135deg, #34d399 0%, #16a34a 100%);
        border-color: transparent;
    }

    .dashboard-stat-title {
        font-size: 0.98rem;
        font-weight: 600;
        color: #16191d;
    }

    .dashboard-stat-value {
        font-size: 2.35rem;
        line-height: 1;
        font-weight: 700;
        color: #0f172a;
    }

    .dashboard-stat-meta {
        font-size: 0.85rem;
        color: #4b5563;
        display: flex;
        align-items: center;
    }

    .dashboard-stat-icon-wrap {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        border: 1px solid #1f2937;
        color: #111827;
        font-size: 0.95rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dashboard-stat-card--highlight .dashboard-stat-title,
    .dashboard-stat-card--highlight .dashboard-stat-value,
    .dashboard-stat-card--highlight .dashboard-stat-meta,
    .dashboard-stat-card--highlight .dashboard-stat-icon-wrap {
        color: #1f2937;
    }

    .dashboard-stat-card--pos .dashboard-stat-title,
    .dashboard-stat-card--pos .dashboard-stat-value,
    .dashboard-stat-card--pos .dashboard-stat-meta,
    .dashboard-stat-card--pos .dashboard-stat-icon-wrap {
        color: #062e1a;
    }

    .dashboard-stat-card--highlight .dashboard-stat-icon-wrap {
        border-color: rgba(31, 41, 55, 0.55);
        background: rgba(255, 255, 255, 0.35);
    }

    .dashboard-stat-card--pos .dashboard-stat-icon-wrap {
        border-color: rgba(6, 46, 26, 0.45);
        background: rgba(255, 255, 255, 0.32);
    }

    @media (max-width: 575.98px) {
        .dashboard-stat-card {
            padding: 0.9rem;
        }

        .dashboard-stat-value {
            font-size: 2rem;
        }
    }
</style>
@endpush