@extends('layouts.app')

@section('title','Dashboard')

@section('content')

    <div class="row">
        <!-- Page header -->
        <div class="page-header">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h1>Dashboard Overview</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Dashboard</li>
                        </ol>
                    </nav>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn-outline-brand"><i class="bi bi-download me-1"></i>Export</button>
                    <button class="btn-brand"><i class="bi bi-plus-lg me-1"></i>New Report</button>
                </div>
            </div>
        </div>

        <!-- ── Stat cards ── -->
        <div class="row g-3 mb-4">
            <div class="col-6 col-xl-3">
                <div class="stat-card">
                    <div class="sc-header">
                        <div class="sc-icon purple"><i class="bi bi-people-fill"></i></div>
                        <span class="sc-trend up"><i class="bi bi-arrow-up-right"></i>12.5%</span>
                    </div>
                    <div>
                        <div class="sc-value">24,817</div>
                        <div class="sc-label">Total Users</div>
                    </div>
                    <div class="sc-bar"><div class="fill" style="width:74%;background:var(--brand-light)"></div></div>
                </div>
            </div>
            <div class="col-6 col-xl-3">
                <div class="stat-card">
                    <div class="sc-header">
                        <div class="sc-icon green"><i class="bi bi-currency-dollar"></i></div>
                        <span class="sc-trend up"><i class="bi bi-arrow-up-right"></i>8.2%</span>
                    </div>
                    <div>
                        <div class="sc-value">$148.2k</div>
                        <div class="sc-label">Monthly Revenue</div>
                    </div>
                    <div class="sc-bar"><div class="fill" style="width:82%;background:var(--success)"></div></div>
                </div>
            </div>
            <div class="col-6 col-xl-3">
                <div class="stat-card">
                    <div class="sc-header">
                        <div class="sc-icon amber"><i class="bi bi-cart-fill"></i></div>
                        <span class="sc-trend down"><i class="bi bi-arrow-down-right"></i>3.1%</span>
                    </div>
                    <div>
                        <div class="sc-value">1,934</div>
                        <div class="sc-label">Orders Today</div>
                    </div>
                    <div class="sc-bar"><div class="fill" style="width:55%;background:var(--warning)"></div></div>
                </div>
            </div>
            <div class="col-6 col-xl-3">
                <div class="stat-card">
                    <div class="sc-header">
                        <div class="sc-icon blue"><i class="bi bi-graph-up-arrow"></i></div>
                        <span class="sc-trend up"><i class="bi bi-arrow-up-right"></i>5.8%</span>
                    </div>
                    <div>
                        <div class="sc-value">68.4%</div>
                        <div class="sc-label">Conversion Rate</div>
                    </div>
                    <div class="sc-bar"><div class="fill" style="width:68%;background:#3b82f6"></div></div>
                </div>
            </div>
        </div>

        <!-- ── Mini bar chart + quick activity ── -->
        <div class="row g-3 mb-4">
            <div class="col-lg-7">
                <div class="card">
                    <div class="card-header-custom">
                        <div>
                            <div class="ch-title">Weekly Traffic</div>
                            <div class="ch-sub">Sessions by day — last 7 days</div>
                        </div>
                        <select class="form-select" style="width:auto;font-size:12.5px;padding:5px 10px">
                            <option>Last 7 days</option>
                            <option>Last 30 days</option>
                        </select>
                    </div>
                    <div class="card-body-custom">
                        <div class="d-flex gap-4 mb-3">
                            <div><div style="font-size:22px;font-weight:700;font-family:'Space Grotesk',sans-serif">43,290</div><div style="font-size:12px;color:var(--muted)">Total sessions</div></div>
                            <div><div style="font-size:22px;font-weight:700;font-family:'Space Grotesk',sans-serif;color:var(--success)">+18%</div><div style="font-size:12px;color:var(--muted)">vs last week</div></div>
                        </div>
                        <div class="mini-chart" style="height:80px">
                            <div class="bar" style="height:45%"></div>
                            <div class="bar" style="height:60%"></div>
                            <div class="bar" style="height:50%"></div>
                            <div class="bar" style="height:80%"></div>
                            <div class="bar highlight" style="height:100%"></div>
                            <div class="bar" style="height:70%"></div>
                            <div class="bar" style="height:55%"></div>
                        </div>
                        <div class="d-flex justify-content-between mt-1" style="font-size:11.5px;color:var(--muted)">
                            <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="card h-100">
                    <div class="card-header-custom">
                        <div>
                            <div class="ch-title">Recent Activity</div>
                            <div class="ch-sub">Live feed</div>
                        </div>
                        <span style="font-size:11px;background:#dcfce7;color:#15803d;padding:3px 9px;border-radius:20px;font-weight:600"><i class="bi bi-circle-fill me-1" style="font-size:7px"></i>Live</span>
                    </div>
                    <div class="card-body-custom" style="padding-top:10px">
                        <div id="activity-feed"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>



@endsection