@extends('layouts.usermain')
@section('main-container')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="page-header d-print-none">
	<div class="container-xl">
		<div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Page pre-title -->
                    
                    <h2 class="page-title">
                        Dashboard
                    </h2>
                </div>
				<!-- Page title actions -->
			
            </div>
	    </div>
    </div>
</div>

<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="row row-cards">
  <div class="col-12 col-md-6 col-lg-3">
    <div class="card text-white bg-primary">
      <div class="card-body d-flex align-items-center">
        <span class="stamp stamp-md bg-white text-primary me-3">
          <i class="ti ti-users"></i>
        </span>
        <div>
          <h3 class="m-0 text-white">{{ $totalApplications }}</h3>
          <div class="text-white-75">WHS Applications</div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-md-6 col-lg-3">
    <div class="card text-white bg-success">
      <div class="card-body d-flex align-items-center">
        <span class="stamp stamp-md bg-white text-success me-3">
          <i class="ti ti-check"></i>
        </span>
        <div>
          <h3 class="m-0 text-white">{{ $statusCounts['approved'] ?? 0 }}</h3>
          <div class="text-white-75">Approved</div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-md-6 col-lg-3">
    <div class="card text-white bg-warning">
      <div class="card-body d-flex align-items-center">
        <span class="stamp stamp-md bg-white text-warning me-3">
          <i class="ti ti-x"></i>
        </span>
        <div>
          <h3 class="m-0 text-white">{{ $statusCounts['rejected'] ?? 0 }}</h3>
          <div class="text-white-75">Rejected</div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-md-6 col-lg-3">
    <div class="card text-white bg-danger">
      <div class="card-body d-flex align-items-center">
        <span class="stamp stamp-md bg-white text-danger me-3">
          <i class="ti ti-clock"></i>
        </span>
        <div>
          <h3 class="m-0 text-white">{{ $statusCounts['pending'] ?? 0 }}</h3>
          <div class="text-white-75">Pending</div>
        </div>
      </div>
    </div>
  </div>
</div>
  </div>
</div>
<div class="page-body">
  <div class="container-xl">
    <div class="row row-deck row-cards">

      <!-- Card 1: Visitors -->
      <div class="col-sm-4 col-12">
        <div class="card">
          <div class="card-body d-flex align-items-center">
            <span class="stamp stamp-md bg-blue-lt me-3">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-users" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#1971c2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <circle cx="9" cy="7" r="4" />
                <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                <circle cx="17" cy="7" r="4" />
              </svg>
            </span>
            <div>
              <div class="h3 mb-1">2</div>
              <div class="text-muted">Unit</div>
            </div>
          </div>
          <div class="progress progress-sm">
            <div class="progress-bar bg-blue" style="width: 75%"></div>
          </div>
        </div>
      </div>

      <!-- Card 2: Page Views -->
      <div class="col-sm-4 col-12">
        <div class="card">
          <div class="card-body d-flex align-items-center">
            <span class="stamp stamp-md bg-green-lt me-3">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#2dce89" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <circle cx="12" cy="12" r="2" />
                <path d="M22 12c-2.5 4 -7.5 6 -10 6s-7.5 -2 -10 -6c2.5 -4 7.5 -6 10 -6s7.5 2 10 6" />
              </svg>
            </span>
            <div>
              <div class="h3 mb-1">2</div>
              <div class="text-muted">State</div>
            </div>
          </div>
          <div class="progress progress-sm">
            <div class="progress-bar bg-green" style="width: 60%"></div>
          </div>
        </div>
      </div>

      <!-- Card 3: Bounce Rate -->
      <div class="col-sm-4 col-12">
        <div class="card">
          <div class="card-body d-flex align-items-center">
            <span class="stamp stamp-md bg-yellow-lt me-3">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#f59f00" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <line x1="12" y1="5" x2="12" y2="19" />
                <line x1="18" y1="13" x2="12" y2="19" />
                <line x1="6" y1="13" x2="12" y2="19" />
              </svg>
            </span>
            <div>
              <div class="h3 mb-1">4</div>
              <div class="text-muted">User</div>
            </div>
          </div>
          <div class="progress progress-sm">
            <div class="progress-bar bg-yellow" style="width: 37%"></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

                    
@endsection