@extends('Admin.layout')

@section('content')
    <style>
        .dashboard-page {
            --dash-maroon: #591321;
            --dash-maroon-dark: #410b16;
            --dash-gold: #c49a4a;
            --dash-gold-light: #e3c47d;

            --dash-cream: #fbf7ef;
            --dash-cream-dark: #f5efe4;

            --dash-heading: #595866;

            --dash-green: #3d9163;
            --dash-green-bg: #e0eadc;

            --dash-red-bg: #f0dddd;

            padding-bottom: 20px;
        }


        /* =========================================================
                                            PAGE HEADER
                    ========================================================= */

        .dashboard-page .dashboard-title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 0;
        }

        .dashboard-page .dashboard-subtitle {
            font-size: 13px;
        }

        .dashboard-date {
            display: inline-flex;
            align-items: center;
            gap: 7px;

            background: var(--dash-maroon);
            color: #fff;

            border-radius: 25px;

            padding: 8px 15px;

            font-size: 13px;
            font-weight: 600;

            box-shadow: 0 5px 14px rgba(89, 19, 33, 0.12);
        }

        .dashboard-date i {
            color: var(--dash-gold-light);
            font-size: 15px;
        }


        /* =========================================================
                                            COMMON CARD
                    ========================================================= */

        .dashboard-card {
            position: relative;

            border: 1px solid rgba(89, 19, 33, 0.035);

            border-radius: 15px;

            box-shadow:
                0 5px 18px rgba(67, 48, 37, 0.06);

            overflow: hidden;

            transition:
                transform .2s ease,
                box-shadow .2s ease;
        }

        .dashboard-card:hover {
            transform: translateY(-2px);

            box-shadow:
                0 10px 25px rgba(67, 48, 37, 0.10);
        }


        /* =========================================================
                                            STAT CARDS
                    ========================================================= */

        .dashboard-stat-card {
            min-height: 155px;
        }

        .dashboard-stat-card .card-body {
            padding: 17px 19px;
        }


        /* =========================================================
                                            ICON BOX
                    ========================================================= */

        .dashboard-icon-box {
            width: 46px;
            height: 46px;

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

            background: var(--dash-maroon);

            border-radius: 12px;

            color: var(--dash-gold-light);

            box-shadow:
                0 5px 12px rgba(89, 19, 33, 0.13);
        }

        .dashboard-icon-box i {
            font-size: 20px;
        }


        /* =========================================================
                                            BADGES
                    ========================================================= */

        .dashboard-badge {
            display: inline-flex;
            align-items: center;

            padding: 5px 10px;

            border-radius: 18px;

            font-size: 12px;
            font-weight: 500;
        }

        .dashboard-badge-success {
            background: var(--dash-green-bg);
            color: var(--dash-green);
        }

        .dashboard-badge-rating {
            background: var(--dash-red-bg);
            color: var(--dash-maroon);
        }

        .dashboard-badge-gold {
            background: #eee1c8;
            color: #8b6726;
        }

        .dashboard-badge-primary {
            background: #e7dce0;
            color: var(--dash-maroon);
        }


        /* =========================================================
                                            STAT CONTENT
                    ========================================================= */

        .dashboard-stat-label {
            display: block;

            margin-top: 11px;

            font-size: 14px;
            font-weight: 500;
        }

        .dashboard-stat-number {
            margin: 2px 0 0;

            font-family: Normal;

            font-size: 28px;
            line-height: 1.15;
            font-weight: 600;
        }

        .dashboard-stat-description {
            display: block;

            margin-top: 2px;

            font-size: 12px;
        }


        /* =========================================================
                                            RATE CARDS
                    ========================================================= */

        .rate-card {
            min-height: 145px;
        }

        .rate-card .card-body {
            padding: 17px 19px;
        }

        .rate-card-icon {
            width: 45px;
            height: 45px;

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

            border-radius: 12px;

            background: var(--dash-maroon);

            color: var(--dash-gold-light);

            font-size: 19px;
        }

        .rate-title {
            font-size: 14px;
            font-weight: 500;
        }

        .rate-value {
            margin-top: 5px;

            font-family: Normal;

            font-size: 27px;
            font-weight: 600;
        }

        .rate-unit {
            font-size: 12px;
        }


        /* =========================================================
                                            OVERVIEW CARDS
                    ========================================================= */

        .overview-card {
            border-radius: 15px;

            overflow: hidden;

            box-shadow:
                0 5px 18px rgba(67, 48, 37, 0.06);
        }

        .overview-header {
            background: var(--dash-maroon);

            padding: 15px 19px;

            color: #fff;
        }

        .overview-header-icon {
            width: 40px;
            height: 40px;

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

            background: rgba(255, 255, 255, 0.10);

            border-radius: 50%;

            color: var(--dash-gold-light);

            font-size: 17px;
        }

        .overview-header h5 {
            color: #fff;

            font-family: Normal;

            font-size: 18px;
        }

        .overview-header small {
            color: rgba(255, 255, 255, .70);

            font-size: 12px;
        }

        .overview-body {
            padding: 18px 20px;
        }


        /* =========================================================
                                            REVIEW
                    ========================================================= */

        .review-score {
            font-family: Normal;

            font-size: 42px;
            line-height: 1;
            font-weight: 600;
        }

        .review-stars {
            color: var(--dash-gold);

            margin-top: 5px;

            letter-spacing: 1px;

            font-size: 14px;
        }


        /* =========================================================
                                            OVERVIEW ROWS
                    ========================================================= */

        .overview-row {
            display: flex;

            align-items: center;
            justify-content: space-between;

            padding: 10px 0;

            border-bottom: 1px dashed #ded8cd;
        }

        .overview-row:last-child {
            border-bottom: none;
        }

        .overview-label {
            color: #74727e;

            font-size: 13px;
        }

        .overview-value {
            color: var(--dash-maroon);

            font-size: 14px;
            font-weight: 700;
        }


        /* =========================================================
                                            PROGRESS
                    ========================================================= */

        .dashboard-progress {
            height: 6px;

            background: #e9e5df;

            border-radius: 20px;

            overflow: hidden;
        }

        .dashboard-progress-bar {
            height: 100%;

            background: var(--dash-green);

            border-radius: 20px;
        }


        /* =========================================================
                                            GOLD PRICE
                    ========================================================= */

        .gold-price-card {
            background: var(--dash-cream);

            border-radius: 15px;

            overflow: hidden;

            box-shadow:
                0 5px 18px rgba(67, 48, 37, 0.06);
        }

        .gold-price-header {
            padding: 18px;

            color: #fff;
        }

        .gold-price-header-icon {
            width: 45px;
            height: 45px;

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

            background: rgba(196, 154, 74, .18);

            color: var(--dash-gold-light);

            border-radius: 50%;

            font-size: 19px;
        }

        .gold-price-header h5 {
            color: #fff;

            font-family: Normal;

            font-size: 19px;
        }

        .gold-price-header small {
            color: rgba(255, 255, 255, .75);

            font-size: 12px;
        }

        .gold-price-body {
            padding: 18px;
        }

        .main-gold-label {
            color: #74727e;

            font-size: 13px;
        }

        .main-gold-price {
            color: #686773;

            font-family: Normal;

            font-size: 34px;

            font-weight: 600;
        }

        .gold-change {
            color: var(--dash-green);

            font-size: 15px;
            font-weight: 700;
        }

        .gold-rate-line {
            display: flex;

            align-items: center;
            justify-content: space-between;

            padding: 10px 0;

            border-bottom: 1px dashed #ded8cd;
        }

        .gold-rate-line:last-child {
            border-bottom: none;
        }

        .gold-rate-name {
            color: #74727e;

            font-size: 13px;
        }

        .gold-rate-value {
            color: var(--dash-maroon);

            font-family: Normal;

            font-size: 14px;

            font-weight: 600;
        }


        /* =========================================================
                                            CARD LINKS
                    ========================================================= */

        .dashboard-card-link {
            display: block;

            text-decoration: none;

            color: inherit;
        }

        .dashboard-card-link:hover {
            color: inherit;
        }

        .dashboard-card-link .dashboard-card {
            cursor: pointer;
        }

        .dashboard-card-link .dashboard-card:hover {
            transform: translateY(-3px);

            box-shadow:
                0 12px 28px rgba(67, 48, 37, 0.11);
        }


        /* =========================================================
                                    BOOTSTRAP ROW SPACING
                    ========================================================= */

        .dashboard-page .row.g-4 {
            --bs-gutter-x: 1rem;
            --bs-gutter-y: 1rem;
        }


        /* =========================================================
                                            LAST UPDATED
                    ========================================================= */

        .dashboard-page .text-end {
            margin-top: 0 !important;
        }

        .dashboard-page .text-end small {
            font-size: 11px;
        }


        /* =========================================================
                                        LIVE GOLD RATE
                    ========================================================= */

        .live-rate-card {
            display: flex;

            align-items: center;
            justify-content: space-between;

            gap: 20px;

            margin-top: 14px;
            margin-bottom: 16px;

            padding: 13px 18px;

            background: var(--dash-cream);

            border: 1px solid rgba(89, 19, 33, 0.08);

            border-radius: 14px;

            box-shadow:
                0 4px 15px rgba(67, 48, 37, 0.05);

            transition:
                background-color .2s ease,
                border-color .2s ease,
                box-shadow .2s ease;
        }

        .live-rate-left {
            display: flex;

            align-items: center;

            gap: 12px;
        }

        .live-rate-icon {
            width: 40px;
            height: 40px;

            display: flex;

            align-items: center;
            justify-content: center;

            background: var(--dash-maroon);

            color: var(--dash-gold-light);

            border-radius: 11px;

            font-size: 17px;
        }

        .live-rate-info {
            display: flex;

            flex-direction: column;

            gap: 2px;
        }

        .live-rate-title {
            color: var(--dash-heading);

            font-size: 13px;

            font-weight: 700;
        }

        .live-rate-time {
            color: #85838d;

            font-size: 11px;
        }


        /* =========================================================
                                            LIVE BADGE
                    ========================================================= */

        .live-rate-badge {
            display: inline-flex;

            align-items: center;

            gap: 6px;

            padding: 6px 10px;

            background: var(--dash-green-bg);

            color: var(--dash-green);

            border-radius: 20px;

            font-size: 11px;

            font-weight: 700;

            letter-spacing: .3px;
        }

        .live-rate-dot {
            width: 7px;
            height: 7px;

            display: inline-block;

            background: var(--dash-green);

            border-radius: 50%;

            animation: liveRatePulse 1.4s ease-in-out infinite;
        }


        /* =========================================================
                                        LIVE PULSE
                    ========================================================= */

        @keyframes liveRatePulse {

            0% {
                transform: scale(1);

                opacity: 1;

                box-shadow:
                    0 0 0 0 rgba(61, 145, 99, .55);
            }

            50% {
                transform: scale(1.25);

                opacity: .75;

                box-shadow:
                    0 0 0 5px rgba(61, 145, 99, .12);
            }

            100% {
                transform: scale(1);

                opacity: 1;

                box-shadow:
                    0 0 0 0 rgba(61, 145, 99, 0);
            }
        }


        /* =========================================================
                                    DARK MODE - LIVE GOLD RATE
                                    Bootstrap 5 data-bs-theme
                    ========================================================= */

        [data-bs-theme="dark"] .live-rate-card {
            background: #2b2022;

            border-color: rgba(227, 196, 125, 0.15);

            box-shadow:
                0 5px 18px rgba(0, 0, 0, 0.20);
        }

        [data-bs-theme="dark"] .live-rate-title {
            color: #f1eeee;
        }

        [data-bs-theme="dark"] .live-rate-time {
            color: #aaa3a5;
        }

        [data-bs-theme="dark"] .live-rate-icon {
            background: #591321;

            color: #e3c47d;
        }

        [data-bs-theme="dark"] .live-rate-badge {
            background: rgba(61, 145, 99, 0.18);

            color: #78ce98;
        }

        [data-bs-theme="dark"] .live-rate-dot {
            background: #65bd87;
        }


        /* =========================================================
                                DARK MODE - GOLD RATE CARDS
                    ========================================================= */

        [data-bs-theme="dark"] .dashboard-page .rate-card {
            border-color: rgba(227, 196, 125, 0.08);
        }

        [data-bs-theme="dark"] .dashboard-page .dashboard-card {
            border-color: rgba(255, 255, 255, 0.06);
        }


        /* =========================================================
                                DARK MODE - OVERVIEW
                    ========================================================= */

        [data-bs-theme="dark"] .overview-card {
            border-color: rgba(255, 255, 255, 0.06);
        }

        [data-bs-theme="dark"] .overview-row {
            border-bottom-color: rgba(255, 255, 255, 0.10);
        }

        [data-bs-theme="dark"] .overview-label {
            color: #aaa5aa;
        }

        [data-bs-theme="dark"] .overview-value {
            color: #e3c47d;
        }

        [data-bs-theme="dark"] .dashboard-progress {
            background: #3a3537;
        }


        /* =========================================================
                                DARK MODE - BADGES
                    ========================================================= */

        [data-bs-theme="dark"] .dashboard-badge-gold {
            background: rgba(196, 154, 74, 0.18);

            color: #e3c47d;
        }

        [data-bs-theme="dark"] .dashboard-badge-primary {
            background: rgba(89, 19, 33, 0.35);

            color: #e3aeb9;
        }

        [data-bs-theme="dark"] .dashboard-badge-rating {
            background: rgba(240, 221, 221, 0.12);

            color: #e3b5bd;
        }

        [data-bs-theme="dark"] .dashboard-badge-success {
            background: rgba(61, 145, 99, 0.18);

            color: #78ce98;
        }


        /* =========================================================
                                            MOBILE
                    ========================================================= */

        @media (max-width: 767.98px) {

            .live-rate-card {
                padding: 12px 14px;

                gap: 10px;
            }

            .live-rate-icon {
                width: 37px;
                height: 37px;

                font-size: 15px;
            }

            .live-rate-title {
                font-size: 12px;
            }

            .live-rate-time {
                font-size: 10px;
            }

            .live-rate-badge {
                padding: 5px 8px;

                font-size: 10px;
            }

            .dashboard-page {
                padding-bottom: 15px;
            }

            .dashboard-page .dashboard-title {
                font-size: 20px;
            }

            .dashboard-date {
                padding: 7px 12px;

                font-size: 12px;
            }

            .dashboard-stat-card {
                min-height: 140px;
            }

            .dashboard-stat-card .card-body,
            .rate-card .card-body {
                padding: 15px 16px;
            }

            .dashboard-icon-box {
                width: 42px;
                height: 42px;
            }

            .dashboard-icon-box i {
                font-size: 18px;
            }

            .rate-card {
                min-height: 135px;
            }

            .rate-card-icon {
                width: 42px;
                height: 42px;
            }

            .dashboard-stat-number {
                font-size: 26px;
            }

            .rate-value {
                font-size: 25px;
            }

            .review-score {
                font-size: 38px;
            }

            .main-gold-price {
                font-size: 30px;
            }

            .overview-header {
                padding: 14px 16px;
            }

            .overview-body {
                padding: 16px;
            }

            .overview-header-icon {
                width: 38px;
                height: 38px;
            }

            .overview-header h5 {
                font-size: 17px;
            }
        }
    </style>


    <div class="container-fluid dashboard-page">


        {{-- =========================================================
                            PAGE HEADER
    ========================================================= --}}

        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">

            <div>

                <h4 class="dashboard-title mb-1">
                    Dashboard
                </h4>

            </div>


            <div class="mt-3 mt-md-0">

                <div class="dashboard-date">

                    <i class="bi bi-calendar3"></i>

                    {{ now()->format('d M Y') }}

                </div>

            </div>

        </div>


        {{-- =========================================================
                        LIVE GOLD RATE
    ========================================================= --}}

        <div class="live-rate-card">

            <div class="live-rate-left">

                <div class="live-rate-icon">

                    <i class="fa-solid fa-chart-line"></i>

                </div>


                <div class="live-rate-info">

                    <span class="live-rate-title">

                        Live Gold Rate

                    </span>


                    <span class="live-rate-time">

                        <i class="bi bi-clock me-1"></i>

                        Last updated:

                        {{ $gold22k?->updated_at?->format('d M Y, h:i A') ?? 'Not available' }}

                    </span>

                </div>

            </div>


            <span class="live-rate-badge">

                <span class="live-rate-dot"></span>

                LIVE

            </span>

        </div>


        {{-- =========================================================
                            GOLD RATES
    ========================================================= --}}

        <div class="row g-4 mb-4">


            {{-- 22K GOLD --}}

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

                <a href="{{ route('gold_rate') }}" class="dashboard-card-link">

                    <div class="dashboard-card card rate-card h-100">

                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-start">

                                <div class="rate-card-icon">

                                    <i class="fa-solid fa-coins"></i>

                                </div>


                                <span class="dashboard-badge dashboard-badge-gold">

                                    Gold

                                </span>

                            </div>


                            <div class="mt-3">

                                <div class="rate-title">

                                    22K Gold / Gram

                                </div>


                                <div class="rate-value">

                                    ₹{{ $gold22k ? number_format($gold22k->rate, 2) : '0.00' }}

                                </div>


                                <div class="rate-unit">

                                    Today's market rate

                                </div>

                            </div>

                        </div>

                    </div>

                </a>

            </div>


            {{-- 24K GOLD --}}

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

                <a href="{{ route('gold_rate') }}" class="dashboard-card-link">

                    <div class="dashboard-card card rate-card h-100">

                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-start">

                                <div class="rate-card-icon">

                                    <i class="fa-solid fa-coins"></i>

                                </div>


                                <span class="dashboard-badge dashboard-badge-gold">

                                    Gold

                                </span>

                            </div>


                            <div class="mt-3">

                                <div class="rate-title">

                                    24K Gold / Gram

                                </div>


                                <div class="rate-value">

                                    ₹{{ $gold24k ? number_format($gold24k->rate, 2) : '0.00' }}

                                </div>


                                <div class="rate-unit">

                                    Today's market rate

                                </div>

                            </div>

                        </div>

                    </div>

                </a>

            </div>


            {{-- SILVER --}}

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

                <a href="{{ route('gold_rate') }}" class="dashboard-card-link">

                    <div class="dashboard-card card rate-card h-100">

                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-start">

                                <div class="rate-card-icon">

                                    <i class="bi bi-circle-half"></i>

                                </div>


                                <span class="dashboard-badge dashboard-badge-primary">

                                    Silver

                                </span>

                            </div>


                            <div class="mt-3">

                                <div class="rate-title">

                                    Silver / Gram

                                </div>


                                <div class="rate-value">

                                    ₹{{ $silver ? number_format($silver->rate, 2) : '0.00' }}

                                </div>


                                <div class="rate-unit">

                                    Today's market rate

                                </div>

                            </div>

                        </div>

                    </div>

                </a>

            </div>

        </div>


        {{-- =========================================================
                            ENQUIRIES
    ========================================================= --}}

        <div class="row g-4 mb-4">


            {{-- ENQUIRIES --}}

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

                <a href="{{ route('enquiries') }}" class="dashboard-card-link">

                    <div class="dashboard-card card dashboard-stat-card h-100">

                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-start">

                                <div class="dashboard-icon-box">

                                    <i class="bi bi-envelope"></i>

                                </div>


                                <span class="dashboard-badge dashboard-badge-primary">

                                    {{ $pendingEnquiries }} Pending

                                </span>

                            </div>


                            <span class="dashboard-stat-label">

                                Enquiries

                            </span>


                            <h3 class="dashboard-stat-number">

                                {{ number_format($totalEnquiries) }}

                            </h3>


                            <small class="dashboard-stat-description">

                                Total enquiries received

                            </small>

                        </div>

                    </div>

                </a>

            </div>


            {{-- COMPLETED ENQUIRIES --}}

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

                <a href="{{ route('completed_enquiries') }}" class="dashboard-card-link">

                    <div class="dashboard-card card dashboard-stat-card h-100">

                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-start">

                                <div class="dashboard-icon-box">

                                    <i class="bi bi-check2-circle"></i>

                                </div>


                                <span class="dashboard-badge dashboard-badge-success">

                                    Completed

                                </span>

                            </div>


                            <span class="dashboard-stat-label">

                                Completed Enquiries

                            </span>


                            <h3 class="dashboard-stat-number">

                                {{ number_format($completedEnquiries) }}

                            </h3>


                            <small class="dashboard-stat-description">

                                Successfully completed enquiries

                            </small>

                        </div>

                    </div>

                </a>

            </div>


            {{-- CUSTOMER REVIEWS --}}

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

                <a href="{{ route('reviews') }}" class="dashboard-card-link">

                    <div class="dashboard-card card dashboard-stat-card h-100">

                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-start">

                                <div class="dashboard-icon-box">

                                    <i class="bi bi-star"></i>

                                </div>


                                <span class="dashboard-badge dashboard-badge-rating">

                                    {{ number_format((float) $averageRating, 1) }}/5

                                </span>

                            </div>


                            <span class="dashboard-stat-label">

                                Customer Reviews

                            </span>


                            <h3 class="dashboard-stat-number">

                                {{ number_format($totalReviews) }}

                            </h3>


                            <small class="dashboard-stat-description">

                                Reviews received

                            </small>

                        </div>

                    </div>

                </a>

            </div>

        </div>


        {{-- =========================================================
                        OVERVIEW SECTION
    ========================================================= --}}

        <div class="row g-4 mb-4">


            {{-- REVIEWS OVERVIEW --}}

            <div class="col-12 col-xl-6">

                <div class="overview-card card h-100">

                    <div class="overview-header">

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

                            <div class="overview-header-icon me-3">

                                <i class="bi bi-star"></i>

                            </div>


                            <div>

                                <h5 class="mb-1">

                                    Reviews Overview

                                </h5>


                                <small>

                                    Customer feedback

                                </small>

                            </div>

                        </div>

                    </div>


                    <div class="overview-body">

                        <div class="d-flex align-items-center mb-4">

                            <div class="me-4">

                                <div class="review-score">

                                    {{ number_format((float) $averageRating, 1) }}

                                </div>


                                <div class="review-stars">

                                    @for ($i = 1; $i <= 5; $i++)
                                        @if ($i <= round((float) $averageRating))
                                            <i class="bi bi-star-fill"></i>
                                        @else
                                            <i class="bi bi-star"></i>
                                        @endif
                                    @endfor

                                </div>

                            </div>


                            <div>

                                <h6 class="mb-1">

                                    {{ number_format($totalReviews) }} Reviews

                                </h6>


                                <small class="text-muted">

                                    Total published reviews

                                </small>

                            </div>

                        </div>


                        <div class="overview-row">

                            <span class="overview-label">

                                Average Rating

                            </span>


                            <span class="overview-value">

                                {{ number_format((float) $averageRating, 1) }}/5

                            </span>

                        </div>


                        <div class="overview-row">

                            <span class="overview-label">

                                Total Reviews

                            </span>


                            <span class="overview-value">

                                {{ number_format($totalReviews) }}

                            </span>

                        </div>

                    </div>

                </div>

            </div>


            {{-- ENQUIRY OVERVIEW --}}

            <div class="col-12 col-xl-6">

                <div class="overview-card card h-100">

                    <div class="overview-header">

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

                            <div class="overview-header-icon me-3">

                                <i class="bi bi-envelope"></i>

                            </div>


                            <div>

                                <h5 class="mb-1">

                                    Enquiry Overview

                                </h5>


                                <small>

                                    Enquiry status summary

                                </small>

                            </div>

                        </div>

                    </div>


                    <div class="overview-body">

                        <div class="overview-row">

                            <span class="overview-label">

                                Total Enquiries

                            </span>


                            <span class="overview-value">

                                {{ number_format($totalEnquiries) }}

                            </span>

                        </div>


                        <div class="overview-row">

                            <span class="overview-label">

                                New / Pending

                            </span>


                            <span class="dashboard-badge dashboard-badge-rating">

                                {{ number_format($pendingEnquiries) }}

                            </span>

                        </div>


                        <div class="overview-row">

                            <span class="overview-label">

                                Completed

                            </span>


                            <span class="dashboard-badge dashboard-badge-success">

                                {{ number_format($completedEnquiries) }}

                            </span>

                        </div>


                        <div class="pt-3">

                            <div class="d-flex justify-content-between mb-2">

                                <span class="overview-label">

                                    Completion Rate

                                </span>


                                <strong class="overview-value">

                                    @if ($totalEnquiries > 0)
                                        {{ number_format(($completedEnquiries / $totalEnquiries) * 100, 1) }}%
                                    @else
                                        0.0%
                                    @endif

                                </strong>

                            </div>


                            <div class="dashboard-progress">

                                <div class="dashboard-progress-bar"
                                    style="width: {{ $totalEnquiries > 0 ? min(($completedEnquiries / $totalEnquiries) * 100, 100) : 0 }}%;">
                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>
@endsection