@extends('layouts.app')
@section('content')
<style>
   :root {
   --primary: #2A4D8E;
   --primary-light: #3A6FD9;
   --secondary: #1E3A6E;
   --accent: #FF6B6B;
   --success: #4ECDC4;
   --warning: #FFD166;
   --light: #F8F9FC;
   --dark: #2D3748;
   --gray: #A0AEC0;
   --sidebar-width: 260px;
   --header-height: 80px;
   }
   * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   }
   body {
   background: linear-gradient(135deg, #f5f7ff 0%, #eef2ff 100%);
   font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
   color: var(--dark);
   min-height: 100vh;
   overflow-x: hidden;
   }
   .dashboard-container {
   margin-left: var(--sidebar-width);
   width: calc(100% - var(--sidebar-width));
   padding: 30px;
   transition: all 0.3s ease;
   margin-top:-10%;
   }
   /* Sidebar */
   .sidebar {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: var(--sidebar-width);
   background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
   color: white;
   z-index: 1000;
   box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
   }
   .sidebar-header {
   padding: 25px 20px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
   }
   .logo {
   width: 40px;
   height: 40px;
   background: white;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 12px;
   }
   .logo i {
   color: var(--primary);
   font-size: 20px;
   }
   .sidebar-header h3 {
   font-weight: 700;
   font-size: 22px;
   margin: 0;
   }
   .sidebar-menu {
   padding: 20px 0;
   }
   .sidebar-menu a {
   color: rgba(255, 255, 255, 0.85);
   padding: 14px 25px;
   display: flex;
   align-items: center;
   text-decoration: none;
   transition: all 0.3s;
   font-weight: 500;
   border-left: 4px solid transparent;
   }
   .sidebar-menu a:hover, .sidebar-menu a.active {
   color: white;
   background: rgba(255, 255, 255, 0.1);
   border-left: 4px solid white;
   }
   .sidebar-menu i {
   margin-right: 12px;
   width: 20px;
   text-align: center;
   font-size: 18px;
   }
   /* Header */
   .header {
   background: white;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
   padding: 20px 30px;
   margin-bottom: 30px;
   border-radius: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   }
   .header h1 {
   margin: 0;
   color: var(--dark);
   font-weight: 700;
   font-size: 28px;
   }
   .header-actions {
   display: flex;
   align-items: center;
   gap: 20px;
   }
   .search-box {
   position: relative;
   }
   .search-box input {
   background: var(--light);
   border: none;
   padding: 10px 15px 10px 40px;
   border-radius: 10px;
   width: 250px;
   font-size: 14px;
   transition: all 0.3s;
   }
   .search-box input:focus {
   outline: none;
   box-shadow: 0 0 0 2px rgba(42, 77, 142, 0.2);
   }
   .search-box i {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--gray);
   }
   .user-info {
   display: flex;
   align-items: center;
   gap: 15px;
   }
   .user-avatar {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 18px;
   }
   .user-details h4 {
   margin: 0;
   font-weight: 600;
   font-size: 16px;
   }
   .user-details p {
   margin: 0;
   font-size: 13px;
   color: var(--gray);
   }
   /* Stats Cards */
   .stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 24px;
   margin-bottom: 30px;
   }
   .stats-card {
   background: white;
   border-radius: 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
   padding: 24px;
   transition: transform 0.3s, box-shadow 0.3s;
   position: relative;
   overflow: hidden;
   }
   .stats-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   }
   .stats-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 5px;
   height: 100%;
   }
   .stats-card.users::before {
   background: linear-gradient(to bottom, #4ECDC4, #2A9D8F);
   }
   .stats-card.agents::before {
   background: linear-gradient(to bottom, #FF9E7D, #FF6B6B);
   }
   .stats-card.vendors::before {
   background: linear-gradient(to bottom, #7E8CE0, #3A56D9);
   }
   .stats-card.bookings::before {
   background: linear-gradient(to bottom, #FFD166, #FF9E1F);
   }
   .stats-card.revenue::before {
   background: linear-gradient(to bottom, #9CECFB, #4ECDC4);
   }
   .stats-card.commission::before {
   background: linear-gradient(to bottom, #C792EA, #7E4DD2);
   }
   .stats-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 15px;
   }
   .stats-icon {
   width: 50px;
   height: 50px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: white;
   }
   .stats-card.users .stats-icon {
   background: linear-gradient(135deg, #4ECDC4, #2A9D8F);
   }
   .stats-card.agents .stats-icon {
   background: linear-gradient(135deg, #FF9E7D, #FF6B6B);
   }
   .stats-card.vendors .stats-icon {
   background: linear-gradient(135deg, #7E8CE0, #3A56D9);
   }
   .stats-card.bookings .stats-icon {
   background: linear-gradient(135deg, #FFD166, #FF9E1F);
   }
   .stats-card.revenue .stats-icon {
   background: linear-gradient(135deg, #9CECFB, #4ECDC4);
   }
   .stats-card.commission .stats-icon {
   background: linear-gradient(135deg, #C792EA, #7E4DD2);
   }
   .trend {
   font-size: 14px;
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 4px 10px;
   border-radius: 20px;
   font-weight: 500;
   }
   .trend.up {
   background: rgba(76, 175, 80, 0.1);
   color: #4CAF50;
   }
   .trend.down {
   background: rgba(244, 67, 54, 0.1);
   color: #F44336;
   }
   .stats-content h3 {
   font-weight: 700;
   font-size: 28px;
   margin-bottom: 5px;
   color: var(--dark);
   }
   .stats-content p {
   color: var(--gray);
   font-size: 14px;
   margin: 0;
   }
   /* Main Content */
   .content-grid {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 30px;
   }
   .card {
   background: white;
   border: none;
   border-radius: 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
   margin-bottom: 30px;
   overflow: hidden;
   }
   .card-header {
   background: white;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   padding: 20px 25px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   }
   .card-header h3 {
   /* margin: 15px 10px 8px 15px; */
   font-weight: 600;
   font-size: 18px;
   color: var(--dark);
   }
   .card-actions {
   display: flex;
   gap: 10px;
   }
   .btn-filter {
   background: var(--light);
   border: none;
   padding: 6px 12px;
   border-radius: 8px;
   font-size: 13px;
   color: var(--dark);
   transition: all 0.3s;
   }
   .btn-filter.active {
   background: var(--primary);
   color: white;
   }
   .btn-view {
   background: transparent;
   border: 1px solid var(--primary);
   color: var(--primary);
   padding: 6px 15px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 500;
   transition: all 0.3s;
   }
   .btn-view:hover {
   background: var(--primary);
   color: white;
   }
   .card-body {
   padding: 25px;
   }
   /* Charts */
   .chart-container {
   position: relative;
   height: 300px;
   }
   /* Tables */
   .table {
   margin: 0;
   }
   .table th {
   border-top: none;
   font-weight: 600;
   color: var(--gray);
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   padding: 15px 12px;
   }
   .table td {
   padding: 15px 12px;
   vertical-align: middle;
   border-color: rgba(0, 0, 0, 0.05);
   }
   .badge {
   padding: 6px 12px;
   border-radius: 8px;
   font-weight: 500;
   font-size: 12px;
   }
   .badge-hotel {
   background: rgba(76, 201, 240, 0.1);
   color: #17a2b8;
   }
   .badge-flight {
   background: rgba(255, 193, 7, 0.1);
   color: #ffc107;
   }
   .badge-completed {
   background: rgba(76, 175, 80, 0.1);
   color: #4CAF50;
   }
   .badge-pending {
   background: rgba(255, 152, 0, 0.1);
   color: #FF9800;
   }
   .badge-cancelled {
   background: rgba(244, 67, 54, 0.1);
   color: #F44336;
   }
   /* Withdrawal Requests */
   .withdrawal-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   }
   .withdrawal-item:last-child {
   border-bottom: none;
   }
   .user-info-sm {
   display: flex;
   align-items: center;
   gap: 12px;
   }
   .user-avatar-sm {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--light);
   color: var(--dark);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   }
   .user-details-sm h5 {
   margin: 0;
   font-weight: 600;
   font-size: 15px;
   }
   .user-details-sm p {
   margin: 0;
   font-size: 13px;
   color: var(--gray);
   }
   .withdrawal-amount {
   font-weight: 700;
   font-size: 16px;
   color: var(--dark);
   }
   .withdrawal-actions {
   display: flex;
   gap: 8px;
   }
   .btn-action {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   transition: all 0.3s;
   }
   .btn-approve {
   background: rgba(76, 175, 80, 0.1);
   color: #4CAF50;
   }
   .btn-deny {
   background: rgba(244, 67, 54, 0.1);
   color: #F44336;
   }
   .btn-action:hover {
   transform: scale(1.1);
   }
   /* Top Agents */
   .agent-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   }
   .agent-item:last-child {
   border-bottom: none;
   }
   .agent-rank {
   width: 30px;
   height: 30px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 14px;
   margin-right: 12px;
   }
   .rank-1 {
   background: linear-gradient(135deg, #FFD700, #FFA500);
   color: white;
   }
   .rank-2 {
   background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
   color: white;
   }
   .rank-3 {
   background: linear-gradient(135deg, #CD7F32, #A56A2B);
   color: white;
   }
   .agent-performance {
   font-weight: 600;
   font-size: 14px;
   color: var(--success);
   }
   /* Responsive */
   @media (max-width: 1200px) {
   .content-grid {
   grid-template-columns: 1fr;
   }
   .stats-grid {
   grid-template-columns: repeat(2, 1fr);
   }
   }
   @media (max-width: 768px) {
   .dashboard-container {
   margin-left: 0;
   width: 100%;
   padding: 20px;
   }
   .sidebar {
   transform: translateX(-100%);
   }
   .sidebar.active {
   transform: translateX(0);
   }
   .stats-grid {
   grid-template-columns: 1fr;
   }
   .search-box input {
   width: 180px;
   }
   }
   .agent-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #f9f9f9;
   border-radius: 10px;
   padding: 10px 15px;
   transition: 0.3s;
   }
   .agent-item:hover {
   background: #f1f5ff;
   transform: translateY(-2px);
   }
   .agent-rank {
   width: 35px;
   height: 35px;
   border-radius: 50%;
   color: #fff;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   }
   .rank-1 { background-color: #ffd700; } /* Gold */
   .rank-2 { background-color: #c0c0c0; } /* Silver */
   .rank-3 { background-color: #cd7f32; } /* Bronze */
   .rank-4, .rank-5 { background-color: #6c757d; }
</style>
<div class="dashboard-container ">
   <!--<div class="header">
      <h1>Dashboard Overview</h1>
      <div class="header-actions">
          <div class="search-box">
              <i class="fas fa-search"></i>
              <input type="text" placeholder="Search...">
          </div>
          <div class="user-info">
              <div class="user-avatar">AD</div>
              <div class="user-details">
                  <h4>Admin User</h4>
                  <p>Administrator</p>
              </div>
          </div>
      </div>
      </div>-->
   <!-- Stats Cards -->
   <div class="stats-grid">
      <!-- Total Agents -->
      @if(Auth::user()->role_id == 1)
      <div class="stats-card agents">
         <div class="stats-header">
            <div class="stats-icon">
               <i class="fas fa-user-tie"></i>
            </div>
         </div>
         <div class="stats-content">
            <h3>{{count($Agents)}}</h3>
            <p>Total Agents</p>
         </div>
      </div>
      @endif
      <!-- Total Users -->
      <div class="stats-card users">
         <div class="stats-header">
            <div class="stats-icon">
               <i class="fas fa-users"></i>
            </div>
         </div>
         <div class="stats-content">
            <h3>{{count($Employees)}}</h3>
            <p>Total Users</p>
         </div>
      </div>
      <!-- Total Bookings -->
      <div class="stats-card bookings">
         <div class="stats-header">
            <div class="stats-icon">
               <i class="fas fa-calendar-check"></i>
            </div>
         </div>
         <div class="stats-content">
            <h3>{{count($Bookings)}}</h3>
            <p>Total Hotelbookings</p>
         </div>
      </div>
      <!-- Revenue -->
      <div class="stats-card revenue">
         <div class="stats-header">
            <div class="stats-icon">
               <i class="fas fa-dollar-sign"></i>
            </div>
         </div>
         <div class="stats-content">
            <h3>{{ number_format($Dashboardval->total_revenue) }} {{$Currency->c_shortname}}</h3>
            <p>Total Revenue    </p>
         </div>
      </div>
      <!-- Commission -->
      <div class="stats-card commission">
         <div class="stats-header">
            <div class="stats-icon">
               <i class="fas fa-hand-holding-usd"></i>
            </div>
         </div>
         <div class="stats-content">
            <h3>{{ number_format($Dashboardval->total_commission) }} {{$Currency->c_shortname}} </h3>
            <p>Commission Earned</p>
         </div>
      </div>
   </div>
   <!-- Main Content Grid -->
   
</div>
<!-- Include Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

@endsection