@extends('admin.layouts.admin')

@section('title','Dashboard')
@section('page-title','Dashboard')

@section('content')
<style>
    .stat-card .icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.chart-placeholder {
    height: 260px;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 14px;
}

</style>
<!-- STATS ROW -->
<div class="row g-4 mb-4">

    <div class="col-md-3">
        <div class="card border-0 shadow-sm stat-card">
            <div class="card-body d-flex align-items-center">
                <div class="icon bg-primary text-white">
                    <i class="bi bi-people"></i>
                </div>
                <div class="ms-3">
                    <small class="text-muted">Customers</small>
                    <h4 class="mb-0 fw-bold">0</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card border-0 shadow-sm stat-card">
            <div class="card-body d-flex align-items-center">
                <div class="icon bg-success text-white">
                    <i class="bi bi-shop"></i>
                </div>
                <div class="ms-3">
                    <small class="text-muted">Merchants</small>
                    <h4 class="mb-0 fw-bold">0</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card border-0 shadow-sm stat-card">
            <div class="card-body d-flex align-items-center">
                <div class="icon bg-warning text-white">
                    <i class="bi bi-cart-check"></i>
                </div>
                <div class="ms-3">
                    <small class="text-muted">Orders</small>
                    <h4 class="mb-0 fw-bold">0</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card border-0 shadow-sm stat-card">
            <div class="card-body d-flex align-items-center">
                <div class="icon bg-danger text-white">
                    <i class="bi bi-currency-dollar"></i>
                </div>
                <div class="ms-3">
                    <small class="text-muted">Revenue</small>
                    <h4 class="mb-0 fw-bold">LKR 0</h4>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- CHARTS + ACTIVITY -->
<div class="row g-4">

    <!-- ORDERS CHART -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <strong>Orders Overview</strong>
                <span class="badge bg-primary">Last 7 Days</span>
            </div>
            <div class="card-body">
                <div class="chart-placeholder">
                    📊 Orders chart will load here
                </div>
            </div>
        </div>
    </div>

    <!-- RECENT ACTIVITY -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white">
                <strong>Recent Activity</strong>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <i class="bi bi-check-circle text-success"></i>
                    Order #1023 completed
                </li>
                <li class="list-group-item">
                    <i class="bi bi-person-plus text-primary"></i>
                    New merchant registered
                </li>
                <li class="list-group-item">
                    <i class="bi bi-truck text-warning"></i>
                    Driver assigned to order #1021
                </li>
                <li class="list-group-item">
                    <i class="bi bi-shield-exclamation text-danger"></i>
                    AI flagged suspicious activity
                </li>
            </ul>
        </div>
    </div>

</div>

<!-- QUICK ACTIONS -->
<div class="row g-4 mt-1">

    <div class="col-md-12">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <strong class="d-block mb-3">Quick Actions</strong>
                <div class="d-flex flex-wrap gap-2">
                    <a href="" class="btn btn-outline-primary">
                        <i class="bi bi-shop"></i> Add Merchant
                    </a>
                    <a href="" class="btn btn-outline-success">
                        <i class="bi bi-truck"></i> Add Driver
                    </a>
                    <a href="" class="btn btn-outline-warning">
                        <i class="bi bi-cart"></i> View Orders
                    </a>
                    <a href="" class="btn btn-outline-dark">
                        <i class="bi bi-cpu"></i> AI Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection