@extends('layouts.superadmin.app')

@section('content')
    <div class="dashboard-grid">
        <section class="dashboard-card stat-card span-3 span-lg-12 span-xl-6">
            <div class="dashboard-card__body">
                <div class="stat-card__row">
                    <div>
                        <p class="eyebrow">Sales</p>
                        <h2 class="metric">2.382</h2>
                        <div class="metric-note">
                            <span class="metric-badge metric-badge--success">3.65%</span>
                            <span>Since last week</span>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--violet">
                        <i class="fa-solid fa-car-side"></i>
                    </div>
                </div>
            </div>
        </section>

        <section class="dashboard-card stat-card span-3 span-lg-12 span-xl-6">
            <div class="dashboard-card__body">
                <div class="stat-card__row">
                    <div>
                        <p class="eyebrow">Earnings</p>
                        <h2 class="metric">$21.300</h2>
                        <div class="metric-note">
                            <span class="metric-badge metric-badge--warning">4.44%</span>
                            <span>Since last week</span>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--gold">
                        <i class="fa-solid fa-dollar-sign"></i>
                    </div>
                </div>
            </div>
        </section>

        <section class="dashboard-card stat-card span-3 span-lg-12 span-xl-6">
            <div class="dashboard-card__body">
                <div class="stat-card__row">
                    <div>
                        <p class="eyebrow">Visitors</p>
                        <h2 class="metric">14.212</h2>
                        <div class="metric-note">
                            <span class="metric-badge metric-badge--danger">5.25%</span>
                            <span>Since last week</span>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--red">
                        <i class="fa-solid fa-user-group"></i>
                    </div>
                </div>
            </div>
        </section>

        <section class="dashboard-card stat-card span-3 span-lg-12 span-xl-6">
            <div class="dashboard-card__body">
                <div class="stat-card__row">
                    <div>
                        <p class="eyebrow">Orders</p>
                        <h2 class="metric">600</h2>
                        <div class="metric-note">
                            <span class="metric-badge metric-badge--success">6.77%</span>
                            <span>Since last week</span>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--green">
                        <i class="fa-solid fa-cart-arrow-down"></i>
                    </div>
                </div>
            </div>
        </section>

        <section class="dashboard-card chart-card span-8 span-lg-12">
            <div class="dashboard-card__body">
                <h3 class="chart-title">Sell History</h3>
                <p class="chart-subtitle">Monthly sales overview</p>

                <div class="chart-plot">
                    <div class="chart-grid">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>

                    <div class="chart-bars">
                        @foreach ([
                            ['Feb', 76, 43],
                            ['Mar', 87, 55],
                            ['Apr', 101, 57],
                            ['May', 98, 56],
                            ['Jun', 88, 60],
                            ['Jul', 105, 57],
                            ['Aug', 91, 62],
                            ['Sep', 114, 59],
                            ['Oct', 95, 64],
                        ] as [$month, $primary, $secondary])
                            <div class="chart-group">
                                <div class="chart-group__bars">
                                    <span class="chart-bar chart-bar--light" style="height: {{ $primary }}%;"></span>
                                    <span class="chart-bar chart-bar--gold" style="height: {{ $secondary }}%;"></span>
                                </div>
                                <span class="chart-group__label">{{ $month }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="chart-legend">
                    <span><i class="legend-dot legend-dot--white"></i> Sell Price</span>
                    <span><i class="legend-dot legend-dot--gold"></i> Total Sell</span>
                </div>
            </div>
        </section>

        <section class="dashboard-card support-card span-4 span-lg-12">
            <div class="support-card__header">
                <h3 class="widget-title">Support Tracker</h3>
            </div>
            <div class="support-card__body">
                <div class="tracker-ring">
                    <div class="tracker-ring__content">
                        <p>Completed Task</p>
                        <h3>70</h3>
                    </div>
                </div>

                <div class="tracker-stats">
                    <div class="tracker-stat">
                        <div class="tracker-stat__icon tracker-stat__icon--violet">
                            <i class="fa-solid fa-ticket"></i>
                        </div>
                        <strong>New Tickets</strong>
                        <span>100</span>
                    </div>
                    <div class="tracker-stat">
                        <div class="tracker-stat__icon tracker-stat__icon--green">
                            <i class="fa-solid fa-check"></i>
                        </div>
                        <strong>Open Tickets</strong>
                        <span>16</span>
                    </div>
                    <div class="tracker-stat">
                        <div class="tracker-stat__icon tracker-stat__icon--gold">
                            <i class="fa-regular fa-clock"></i>
                        </div>
                        <strong>Response Time</strong>
                        <span>1 day</span>
                    </div>
                </div>
            </div>
        </section>

        <section class="dashboard-card span-4 span-lg-12 span-xl-6">
            <div class="dashboard-card__body">
                <h3 class="widget-title">Top Countries</h3>
                <p class="widget-subtitle">Monthly sales overview</p>

                <div class="mini-stat-grid mt-4">
                    <div class="mini-stat">
                        <span>United Kingdom</span>
                        <strong class="mini-stat__value">28k</strong>
                        <div class="progress-line"><span style="width: 84%;"></span></div>
                    </div>
                    <div class="mini-stat">
                        <span>India</span>
                        <strong class="mini-stat__value">18k</strong>
                        <div class="progress-line"><span style="width: 62%;"></span></div>
                    </div>
                    <div class="mini-stat">
                        <span>Canada</span>
                        <strong class="mini-stat__value">12k</strong>
                        <div class="progress-line"><span style="width: 45%;"></span></div>
                    </div>
                </div>
            </div>
        </section>

        <section class="dashboard-card span-4 span-lg-12 span-xl-6">
            <div class="dashboard-card__body">
                <h3 class="widget-title">Source Visits</h3>
                <p class="widget-subtitle">28.2k visitors</p>

                <ul class="info-list">
                    <li>
                        <div class="info-list__meta">
                            <span class="info-list__dot" style="background:#696cff;"></span>
                            <span>Direct Source</span>
                        </div>
                        <strong>1.24k</strong>
                    </li>
                    <li>
                        <div class="info-list__meta">
                            <span class="info-list__dot" style="background:#35c76f;"></span>
                            <span>Campaign</span>
                        </div>
                        <strong>890</strong>
                    </li>
                    <li>
                        <div class="info-list__meta">
                            <span class="info-list__dot" style="background:#f5b71b;"></span>
                            <span>Affiliate</span>
                        </div>
                        <strong>560</strong>
                    </li>
                </ul>
            </div>
        </section>

        <section class="dashboard-card span-4 span-lg-12">
            <div class="dashboard-card__body">
                <h3 class="widget-title">Total Earning</h3>
                <p class="widget-subtitle">Current week performance</p>
                <h2 class="earnings-amount">$87,540</h2>
                <p class="muted-note">12.8% higher than last week</p>
                <div class="progress-line"><span style="width: 81%;"></span></div>

                <ul class="info-list">
                    <li>
                        <div class="info-list__meta">
                            <span class="info-list__dot" style="background:#696cff;"></span>
                            <span>Primary revenue</span>
                        </div>
                        <strong>$40,200</strong>
                    </li>
                    <li>
                        <div class="info-list__meta">
                            <span class="info-list__dot" style="background:#2dbf5a;"></span>
                            <span>Subscription</span>
                        </div>
                        <strong>$26,100</strong>
                    </li>
                    <li>
                        <div class="info-list__meta">
                            <span class="info-list__dot" style="background:#f0a400;"></span>
                            <span>Pending clearance</span>
                        </div>
                        <strong>$21,240</strong>
                    </li>
                </ul>
            </div>
        </section>
    </div>
@endsection