@extends('layouts.agent.app')

@section('content')
<main id="main" class="main">
  <section class="section dashboard">
    <div class="row">

      <!-- All Cards in a Single Row -->
      <div class="col-12">
        <div class="row">

          <!-- Sales Card -->
          <div class="col-lg-3 col-md-6 mb-4">
            <div class="card info-card sales-card">
              <div class="filter">
                <a class="icon" href="#" data-bs-toggle="dropdown"></a>
              </div>
              <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">
                    <i class="bi bi-alarm"></i>
                  </div>
                  <div class="ps-3">
                    <h6>{{$todayOrders}}</h6>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Revenue Card -->
          <div class="col-lg-3 col-md-6 mb-4">
            <div class="card info-card revenue-card">
              <div class="filter">
                <a class="icon" href="#" data-bs-toggle="dropdown"></a>
              </div>
              <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">
                    <i class="bi bi-alarm-fill"></i>
                  </div>
                  <div class="ps-3">
                    <h6>{{$todayPendingOrders}}</h6>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Customers Card -->
          <div class="col-lg-3 col-md-6 mb-4">
            <div class="card info-card customers-card">
              <div class="filter">
                <a class="icon" href="#" data-bs-toggle="dropdown"></a>
              </div>
              <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">
                    <i class="bi bi-cart-check-fill"></i>
                  </div>
                  <div class="ps-3">
                    <h6>{{$monthOrders}}</h6>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Additional Card (Optional 4th) -->
          <div class="col-lg-3 col-md-6 mb-4">
            <div class="card info-card">
              <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">
                    <i class="bi bi-bar-chart"></i>
                  </div>
                  <div class="ps-3">
                    <h6>{{$TotalPendingOrders}}</h6>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div><!-- End .col-12 -->

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