@extends('layouts.agent.app')

@section('content')
<main id="main" class="main">
  <section class="section dashboard">
    <div class="row g-4"> <!-- Bootstrap gutter spacing -->

      <!-- Sales Card -->
      <div class="col-lg-3 col-md-6">
        <a href="{{ url('/agent/assignorder/list') }}" class="text-decoration-none">
          <div class="card info-card sales-card shadow-sm h-100">
            <div class="card-body">
              <h5 class="card-title">Today <span>| Orders</span></h5>
              <div class="d-flex align-items-center">
                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-primary text-white">
                  <i class="bi bi-alarm"></i>
                </div>
                <div class="ps-3">
                  <h6 class="mb-0">{{ $todayOrders }}</h6>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>

      <!-- Pending Orders Card -->
      <div class="col-lg-3 col-md-6">
        <a href="{{ url('agent/assignorder/list') }}" class="text-decoration-none">
          <div class="card info-card revenue-card shadow-sm h-100">
            <div class="card-body">
              <h5 class="card-title">Today <span>| Pending Orders</span></h5>
              <div class="d-flex align-items-center">
                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-warning text-white">
                  <i class="bi bi-alarm-fill"></i>
                </div>
                <div class="ps-3">
                  <h6 class="mb-0">{{ $todayPendingOrders }}</h6>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>

      <!-- Month Orders Card -->
      <div class="col-lg-3 col-md-6">
        <a href="{{ url('agent/assignorder/list') }}" class="text-decoration-none">
          <div class="card info-card customers-card shadow-sm h-100">
            <div class="card-body">
              <h5 class="card-title">Month <span>| Orders</span></h5>
              <div class="d-flex align-items-center">
                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-success text-white">
                  <i class="bi bi-cart-check-fill"></i>
                </div>
                <div class="ps-3">
                  <h6 class="mb-0">{{ $monthOrders }}</h6>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>

      <!-- Total Pending Orders Card -->
      <div class="col-lg-3 col-md-6">
        <a href="{{ url('agent/assignorder/list') }}" class="text-decoration-none">
          <div class="card info-card shadow-sm h-100">
            <div class="card-body">
              <h5 class="card-title">Total <span>| Pending Orders</span></h5>
              <div class="d-flex align-items-center">
                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-danger text-white">
                  <i class="bi bi-bar-chart"></i>
                </div>
                <div class="ps-3">
                  <h6 class="mb-0">{{ $TotalPendingOrders }}</h6>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>

    </div>
  </section>
</main>
@endsection