@extends('staff.layout')

@section('title')
    Dashboard
@endsection

@section('content')

    <style>
        .dashboard-kpi-label {
            color: var(--gold-soft) !important;
        }

     
        .dashboard-risk-card {
            height: 100%;
        }

      

      
    </style>


    {{-- =========================
    PAGE HEADER
    ========================== --}}
    <div class="d-flex align-items-center justify-content-between mb-4 gap-2">

        <div>
            <span class="text-nowrap" style="color: var(--ink-dim);">
                Today: {{ $today }}
            </span>
        </div>

    </div>


    {{-- =========================================================
    DASHBOARD MAIN LAYOUT
    ========================================================== --}}
    <div class="row g-3 align-items-stretch">


        {{-- =====================================================
        LEFT SIDE - KPI CARDS
        9 COLUMNS ON DESKTOP
        ====================================================== --}}
        <div class="col-12 col-xl-9">

            <div class="row">


                {{-- =========================
                ACTIVE GA
                ========================== --}}
                <div class="col-12 col-md-6 mb-3 col-lg-4">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-users"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                Active GA
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold">
                                0
                            </h6>

                        </div>

                    </div>

                </div>


                {{-- =========================
                COMPLETED GA
                ========================== --}}
                <div class="col-12 col-md-6 mb-3 col-lg-4">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-circle-check"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                Completed GA
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold">
                                0
                            </h6>

                        </div>

                    </div>

                </div>


                {{-- =========================
                HIGH GA
                ========================== --}}
                <div class="col-12 col-md-6 mb-3 col-lg-4">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-trending-up"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                High GA
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold">
                                0
                            </h6>

                        </div>

                    </div>

                </div>


                {{-- =========================
                PRINCIPAL OUTSTANDING
                ========================== --}}
                <div class="col-12 col-md-6 mb-3 col-lg-4">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-cash"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                Principal Outstanding
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold text-nowrap">
                                ₹ 0
                            </h6>

                        </div>

                    </div>

                </div>


                {{-- =========================
                TOTAL GROSS
                ========================== --}}
                <div class="col-12 col-md-6 mb-3 col-lg-4">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-tag"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                Total Gross
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold text-nowrap">
                                0 g
                            </h6>

                        </div>

                    </div>

                </div>


                {{-- =========================
                TOTAL NET GOLD
                ========================== --}}
                <div class="col-12 col-md-6 mb-3 col-lg-4">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-diamond"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                Total Net Gold
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold text-nowrap">
                                0 g
                            </h6>

                        </div>

                    </div>

                </div>


                
            </div>

        </div>


        {{-- =====================================================
        RIGHT SIDE - FOLLOW UP / RISK
        3 COLUMNS ON DESKTOP
        ====================================================== --}}
        <div class="col-12 col-xl-3 mb-3">

            <div class="card card-glass-panel dashboard-risk-card">

                {{-- HEADER --}}
                <div class="card-header mb-2">

                    <div class="d-flex align-items-center gap-3">

                        <span class="avatar rounded">
                            <i class="ti ti-shield-exclamation"></i>
                        </span>

                        <div>
                            <h5 class="mb-1 fw-semibold">
                                Follow Up / Risk
                            </h5>

                            <small class="text-secondary">
                                Pending follow-ups and risk categories
                            </small>
                        </div>

                    </div>

                </div>


                {{-- BODY --}}
                <div class="card-body">

                    <div class="d-flex flex-column gap-3">


                        {{-- =========================
                        3 MONTH
                        ========================== --}}
                        <div class="risk-box dashboard-risk-box p-3">

                            <div class="d-flex align-items-center justify-content-between gap-3">

                                <div class="d-flex align-items-center gap-3">

                                    <span class="avatar rounded flex-shrink-0">
                                        <i class="ti ti-calendar"></i>
                                    </span>

                                    <span class="text-white fw-semibold text-nowrap">
                                        3 Month
                                    </span>

                                </div>

                                <h4 class="text-danger mb-0">
                                    0
                                </h4>

                            </div>

                        </div>


                        {{-- =========================
                        6 MONTH
                        ========================== --}}
                        <div class="risk-box dashboard-risk-box p-3">

                            <div class="d-flex align-items-center justify-content-between gap-3">

                                <div class="d-flex align-items-center gap-3">

                                    <span class="avatar rounded flex-shrink-0">
                                        <i class="ti ti-calendar"></i>
                                    </span>

                                    <span class="text-white fw-semibold text-nowrap">
                                        6 Month
                                    </span>

                                </div>

                                <h4 class="text-danger mb-0">
                                    0
                                </h4>

                            </div>

                        </div>


                        {{-- =========================
                        1 YEAR
                        ========================== --}}
                        <div class="risk-box dashboard-risk-box p-3">

                            <div class="d-flex align-items-center justify-content-between gap-3">

                                <div class="d-flex align-items-center gap-3">

                                    <span class="avatar rounded flex-shrink-0">
                                        <i class="ti ti-calendar"></i>
                                    </span>

                                    <span class="text-white fw-semibold text-nowrap">
                                        1 Year
                                    </span>

                                </div>

                                <h4 class="text-danger mb-0">
                                    0
                                </h4>

                            </div>

                        </div>


                    </div>

                </div>

            </div>

        </div>


    </div>
<div class="row">
    {{-- =========================
                LOCKER GOLD
                ========================== --}}
                <div class="col-12 col-md-6 col-lg-3 mb-3">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-lock"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                Locker Gold
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold text-nowrap">
                                0 g
                            </h6>

                        </div>

                    </div>

                </div>


                {{-- =========================
                BP GOLD
                ========================== --}}
                <div class="col-12 col-md-6 col-lg-3 mb-3">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-coins"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                BP Gold
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold text-nowrap">
                                0 g
                            </h6>

                        </div>

                    </div>

                </div>


                {{-- =========================
                CUSTOMER RELEASED
                ========================== --}}
                <div class="col-12 col-md-6 col-lg-3 mb-3">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-user-check"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                Customer Released
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold text-nowrap">
                                0 g
                            </h6>

                        </div>

                    </div>

                </div>


                {{-- =========================
                INTEREST DUE
                ========================== --}}
                <div class="col-12 col-md-6 col-lg-3 mb-3">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-percentage"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                Interest Due
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold text-nowrap">
                                ₹ 0
                            </h6>

                        </div>

                    </div>

                </div>


                {{-- =========================
                OVERDUE
                ========================== --}}
                <div class="col-12 col-md-6 col-lg-3 mb-3">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-alert-triangle"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                Overdue
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold text-danger text-nowrap">
                                ₹ 0
                            </h6>

                        </div>

                    </div>

                </div>


                {{-- =========================
                TODAY COLLECTION
                ========================== --}}
                <div class="col-12 col-md-6 col-lg-3 mb-3">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-wallet"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                Today Collection
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold text-nowrap">
                                ₹ 0
                            </h6>

                        </div>

                    </div>

                </div>


                {{-- =========================
                OWN FUND EXPOSURE
                ========================== --}}
                <div class="col-12 col-md-6 col-lg-3 mb-3">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-report-money"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                Own Fund Exposure
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold text-nowrap">
                                ₹ 0
                            </h6>

                        </div>

                    </div>

                </div>


                {{-- =========================
                DOCUMENT PENDING
                ========================== --}}
                <div class="col-12 col-md-6 col-lg-3 mb-3">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-file-alert"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                Document Pending
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold text-warning">
                                0
                            </h6>

                        </div>

                    </div>

                </div>


                {{-- =========================
                WEIGHT / PURITY MISMATCH
                ========================== --}}
                <div class="col-12 col-md-6 col-lg-3 mb-3">

                    <div class="card accent-gold dashboard-kpi-card h-100 text-center p-4">

                        <div class="card-body p-2 d-flex flex-column align-items-center justify-content-center">

                            <span class="avatar rounded mb-2">
                                <i class="ti ti-scale"></i>
                            </span>

                            <span class="dashboard-kpi-label d-block">
                                Weight / Purity Mismatch
                            </span>

                            <h6 class="mb-0 mt-2 fs-3 fw-semibold text-danger">
                                0
                            </h6>

                        </div>

                    </div>

                </div>


</div>

    @include('staff.layout.toast')

@endsection