@extends('Admin.layout')

@section('title')
    Dashboard
@endsection

@section('content')

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

    /* =========================
       DASHBOARD LAYOUT
    ========================== */

    .dashboard-main-row {
        align-items: stretch;
    }

    .dashboard-kpi-area {
        min-width: 0;
    }

    .dashboard-risk-area {
        display: flex;
    }

    /* =========================
       RISK SIDE CARD
    ========================== */

    .dashboard-risk-card {
        width: 100%;
        height: 100%;
        background: rgba(4, 20, 42, .72) !important;
        border: 1px solid rgba(226, 182, 92, .55) !important;
        border-radius: 14px !important;
        overflow: hidden;
    }

    .dashboard-risk-header {
        padding: 18px 18px 12px;
    }

    .dashboard-risk-title {
        color: var(--ink);
        font-size: 18px;
        font-weight: 700;
    }

    .dashboard-risk-subtitle {
        color: var(--ink-faint);
        font-size: 11px;
        margin-top: 3px;
    }

    .risk-box {
        background: rgba(7, 28, 55, .75);
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 10px;
        padding: 15px 14px !important;
        min-height: 70px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .risk-box-label {
        color: var(--ink);
        font-size: 14px;
        font-weight: 500;
    }

    .risk-box-value {
        color: #ff5757;
        font-size: 25px;
        font-weight: 700;
        line-height: 1;
    }

    /* =========================
       KPI CARDS
    ========================== */

    .dashboard-kpi-card {
        min-height: 150px;
    }

    .dashboard-kpi-card .avatar {
        width: 42px;
        height: 42px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border-radius: 50% !important;

        background: rgba(226, 182, 92, .10);
        border: 1px solid rgba(226, 182, 92, .45);

        color: var(--gold-soft);
    }

    .dashboard-kpi-card .avatar i {
        font-size: 21px;
    }

    .dashboard-kpi-card h6 {
        color: var(--ink);
    }

    /* =========================
       RESPONSIVE
    ========================== */

    @media (max-width: 1199px) {

        .dashboard-risk-area {
            margin-top: 0;
        }

    }

    @media (max-width: 991px) {

        .dashboard-risk-area {
            margin-top: 16px;
        }

    }

    @media (max-width: 767px) {

        .dashboard-risk-card {
            height: auto;
        }

        .dashboard-risk-header {
            padding: 15px;
        }

        .dashboard-risk-title {
            font-size: 16px;
        }

        .risk-box {
            min-height: 62px;
            padding: 12px !important;
        }

        .risk-box-label {
            font-size: 12px;
        }

        .risk-box-value {
            font-size: 21px;
        }

        .dashboard-kpi-card {
            min-height: 135px;
        }

    }
    /* =========================
   COMPACT GA SUMMARY
========================== */

.ga-summary-icon {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(226, 182, 92, .10);
    border: 1px solid rgba(226, 182, 92, .35);

    color: var(--gold-soft);

    flex-shrink: 0;
}

.ga-summary-icon i {
    font-size: 18px;
}

.ga-summary-main-value {
    color: var(--ink);
    font-size: 22px;
    font-weight: 700;
}

.ga-summary-divider {
    border-color: rgba(226, 182, 92, .25);
    opacity: 1;
}

.ga-summary-column {
    border-color: rgba(226, 182, 92, .25) !important;
}

.ga-small-icon {
    width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(226, 182, 92, .10);
    border: 1px solid rgba(226, 182, 92, .25);

    color: var(--gold-soft);
}

.ga-small-icon i {
    font-size: 13px;
}

.ga-summary-value {
    color: var(--ink);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
}
</style>


{{-- =========================
     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>
{{-- =========================
     GA SUMMARY CARD
========================== --}}


{{-- =========================================================
     FIRST SECTION
     LEFT : FIRST 6 KPI
     RIGHT: FOLLOW UP / RISK
========================================================= --}}

<div class="row g-3 dashboard-main-row">


    {{-- =====================================================
         LEFT SIDE - FIRST 6 KPI CARDS
    ====================================================== --}}

    <div class="col-xl-9 col-lg-8 col-12 dashboard-kpi-area">

        <div class="row g-3">

            {{-- =========================
                 ACTIVE GA
            ========================== --}}

            <div class="col-lg-4 col-md-6 col-12">

               <div class="card accent-gold h-100 p-3">

        {{-- TOP --}}
        <div class="d-flex align-items-center justify-content-between">

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

                <span class="ga-summary-icon">
                    <i class="ti ti-users"></i>
                </span>

                <span class="dashboard-kpi-label fw-semibold">
                    Active GA
                </span>

            </div>

            <span class="ga-summary-main-value">
                {{ $activeGA }}
            </span>

        </div>


        {{-- DIVIDER --}}
        <hr class="ga-summary-divider my-3">


        {{-- BOTTOM --}}
        <div class="row g-0 text-center">

            {{-- COMPLETED --}}
            <div class="col-6 border-end ga-summary-column">

                <div class="d-flex justify-content-center align-items-center gap-1 mb-1">

                    <span class="ga-small-icon">
                        <i class="ti ti-circle-check"></i>
                    </span>

                    <span class="dashboard-kpi-label small fw-semibold">
                        Completed
                    </span>

                </div>

                <div class="ga-summary-value">
                    0
                </div>

            </div>


            {{-- HIGH GA --}}
            <div class="col-6">

                <div class="d-flex justify-content-center align-items-center gap-1 mb-1">

                    <span class="ga-small-icon">
                        <i class="ti ti-trending-up"></i>
                    </span>

                    <span class="dashboard-kpi-label small fw-semibold">
                        High GA
                    </span>

                </div>

                <div class="ga-summary-value">
                    0
                </div>

            </div>

        </div>

    </div>

            </div>


           

            {{-- =========================
                 PRINCIPAL OUTSTANDING
            ========================== --}}

            <div class="col-lg-4 col-md-6 col-12">

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

                    <div class="card-body p-2">

                        <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-1 fs-3 fw-semibold text-nowrap">
                            ₹ {{ $totalloanamt }}
                        </h6>

                    </div>

                </div>

            </div>


            {{-- =========================
                 TOTAL GROSS
            ========================== --}}

            <div class="col-lg-4 col-md-6 col-12">

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

                    <div class="card-body p-2">

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

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

                        <h6 class="mb-0 mt-1 fs-3 fw-semibold text-nowrap">
                            {{ $totalgrossweight }} g
                        </h6>

                    </div>

                </div>

            </div>


            {{-- =========================
                 TOTAL NET GOLD
            ========================== --}}

            <div class="col-lg-4 col-md-6 col-12">

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

                    <div class="card-body p-2">

                        <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-1 fs-3 fw-semibold text-nowrap">
                            {{ $totalnetweight }} g
                        </h6>

                    </div>

                </div>

            </div>
             {{-- =========================
         LOCKER GOLD
    ========================== --}}

    <div class="col-lg-4 col-md-6 col-12">

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

            <div class="card-body p-2">

                <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-1 fs-3 fw-semibold text-nowrap">
                    0 g
                </h6>

            </div>

        </div>

    </div>


    {{-- =========================
         BP GOLD
    ========================== --}}

    <div class="col-lg-4 col-md-6 col-12">

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

            <div class="card-body p-2">

                <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-1 fs-3 fw-semibold text-nowrap">
                    0 g
                </h6>

            </div>

        </div>

    </div>


        </div>

    </div>


    {{-- =====================================================
         RIGHT SIDE - FOLLOW UP / RISK
    ====================================================== --}}

    <div class="col-xl-3 col-lg-4 col-12 dashboard-risk-area">

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

            {{-- HEADER --}}

            <div class="dashboard-risk-header">

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

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

                    <div>

                        <div class="dashboard-risk-title">
                            Follow Up / Risk
                        </div>

                        <div class="dashboard-risk-subtitle">
                            Pending follow-ups and risk categories
                        </div>

                    </div>

                </div>

            </div>


            {{-- BODY --}}

            <div class="card-body pt-2">

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


                    {{-- 3 MONTH --}}

                    <div class="risk-box">

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

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

                            <span class="risk-box-label text-nowrap">
                                3 Month
                            </span>

                        </div>

                        <span class="risk-box-value">
                            0
                        </span>

                    </div>


                    {{-- 6 MONTH --}}

                    <div class="risk-box">

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

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

                            <span class="risk-box-label text-nowrap">
                                6 Month
                            </span>

                        </div>

                        <span class="risk-box-value">
                            0
                        </span>

                    </div>



                    <div class="risk-box">

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

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

                            <span class="risk-box-label text-nowrap">
                                11 Months
                            </span>

                        </div>

                        <span class="risk-box-value">
                            0
                        </span>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     SECOND SECTION
     FULL WIDTH - REMAINING KPI CARDS
========================================================= --}}

<div class="row g-3 mt-1">



    {{-- =========================
         CUSTOMER RELEASED
    ========================== --}}

    <div class="col-lg-3 col-md-6 col-12">

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

            <div class="card-body p-2">

                <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-1 fs-3 fw-semibold text-nowrap">
                    0 g
                </h6>

            </div>

        </div>

    </div>


    {{-- =========================
         INTEREST DUE
    ========================== --}}

    <div class="col-lg-3 col-md-6 col-12">

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

            <div class="card-body p-2">

                <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-1 fs-3 fw-semibold text-nowrap">
                    ₹ 0
                </h6>

            </div>

        </div>

    </div>


    {{-- =========================
         OVERDUE
    ========================== --}}

    <div class="col-lg-3 col-md-6 col-12">

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

            <div class="card-body p-2">

                <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-1 fs-3 fw-semibold text-danger text-nowrap">
                    ₹ 0
                </h6>

            </div>

        </div>

    </div>


    {{-- =========================
         TODAY COLLECTION
    ========================== --}}

    <div class="col-lg-3 col-md-6 col-12">

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

            <div class="card-body p-2">

                <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-1 fs-3 fw-semibold text-nowrap">
                    ₹ 0
                </h6>

            </div>

        </div>

    </div>


    {{-- =========================
         OWN FUND EXPOSURE
    ========================== --}}

    <div class="col-lg-3 col-md-6 col-12">

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

            <div class="card-body p-2">

                <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-1 fs-3 fw-semibold text-nowrap">
                    ₹ 0
                </h6>

            </div>

        </div>

    </div>


    {{-- =========================
         DOCUMENT PENDING
    ========================== --}}

    <div class="col-lg-3 col-md-6 col-12">

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

            <div class="card-body p-2">

                <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-1 fs-3 fw-semibold text-warning">
                    0
                </h6>

            </div>

        </div>

    </div>


    {{-- =========================
         WEIGHT / PURITY MISMATCH
    ========================== --}}

    <div class="col-lg-3 col-md-6 col-12">

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

            <div class="card-body p-2">

                <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-1 fs-3 fw-semibold text-danger">
                    0
                </h6>

            </div>

        </div>

    </div>


</div>


@include('Admin.layout.toast')

@endsection