@extends('layouts.main')
@section('content')
<style>
   /* ===== HEADER ===== */
   .dashboard-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 30px;
   padding: 18px 22px;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
   }
   .dashboard-header h4 {
   margin: 0;
   font-weight: 600;
   }
   .dashboard-date {
   font-size: 14px;
   color: #94a3b8;
   }
   /* ===== CARDS ===== */
   .glass-card {
   border-radius: 18px;
   padding: 22px;
   color: #fff;
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   transition: 0.3s;
   }
   .glass-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
   }
   .card-title {
   font-size: 13px;
   color: #cbd5f5;
   }
   .card-value {
   font-size: 26px;
   font-weight: bold;
   }
   .card-icon {
   font-size: 28px;
   opacity: 0.8;
   }
   /* ===== GRADIENTS ===== */
   .bg-primary-gradient {
   background: linear-gradient(135deg, #6366f1, #4f46e5);
   }
   .bg-success-gradient {
   background: linear-gradient(135deg, #22c55e, #16a34a);
   }
   .bg-warning-gradient {
   background: linear-gradient(135deg, #f59e0b, #d97706);
   }
   .bg-danger-gradient {
   background: linear-gradient(135deg, #ef4444, #dc2626);
   }
   .earnings-table{
   border-collapse: separate;
   border-spacing: 0 14px;
   }
   /* TABLE HEAD */
   .earnings-table thead th{
   border: none;
   background: #f8fafc;
   color: #64748b;
   font-size: 13px;
   font-weight: 700;
   padding: 16px;
   text-transform: uppercase;
   white-space: nowrap;
   }
   /* TABLE ROW */
   .earnings-table tbody tr{
   background: #fff;
   box-shadow: 0 4px 20px rgba(0,0,0,0.05);
   border-radius: 18px;
   transition: 0.3s ease;
   }
   .earnings-table tbody tr:hover{
   transform: translateY(-3px);
   box-shadow: 0 12px 28px rgba(0,0,0,0.08);
   }
   .earnings-table tbody td{
   padding: 18px 16px;
   vertical-align: middle;
   border-top: none;
   border-bottom: none;
   }
   /* USER AVATAR */
   .earning-avatar{
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: linear-gradient(135deg,#10b981,#059669);
   color: #fff;
   font-size: 20px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 15px rgba(16,185,129,0.3);
   }
   /* AMOUNT BOX */
   .amount-box{
   display: inline-flex;
   align-items: center;
   background: rgba(34,197,94,0.12);
   color: #16a34a;
   padding: 10px 16px;
   border-radius: 14px;
   font-weight: 700;
   font-size: 15px;
   }
   /* DATE */
   .date-box{
   display: inline-flex;
   align-items: center;
   background: rgba(59,130,246,0.10);
   color: #2563eb;
   padding: 10px 14px;
   border-radius: 12px;
   font-weight: 600;
   font-size: 14px;
   }
   /* EMPTY STATE */
   .empty-state{
   padding: 40px;
   text-align: center;
   }
   /* MOBILE */
   @media(max-width:768px){
   .earnings-table thead{
   display: none;
   }
   .earnings-table tbody tr{
   display: block;
   margin-bottom: 20px;
   }
   .earnings-table tbody td{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 16px;
   border-bottom: 1px solid #f1f5f9;
   }
   .earnings-table tbody td:last-child{
   border-bottom: none;
   }
   }
</style>
<div class="container-fluid py-4">
   {{-- ===== HEADER ===== --}}
   <div class="dashboard-header">
      <h4>💰 Earnings Dashboard</h4>
      <div class="dashboard-date">
         {{ now()->format('d M Y') }}
      </div>
   </div>
   {{-- ===== CARDS ===== --}}
   @php
   $cards = [
   ['title' => 'Total', 'value' => $totalEarning ?? 0, 'class' => 'bg-primary-gradient', 'icon' => 'bi-wallet2'],
   ['title' => 'Today', 'value' => $todayEarning ?? 0, 'class' => 'bg-success-gradient', 'icon' => 'bi-graph-up'],
   ['title' => 'Month', 'value' => $monthlyEarning ?? 0, 'class' => 'bg-warning-gradient', 'icon' => 'bi-bar-chart'],
   ['title' => 'Year', 'value' => $yearlyEarning ?? 0, 'class' => 'bg-danger-gradient', 'icon' => 'bi-pie-chart'],
   ];
   @endphp
   <div class="row g-4">
      @foreach($cards as $card)
      <div class="col-xl-3 col-md-6">
         <div class="glass-card {{ $card['class'] }}">
            <div class="d-flex justify-content-between align-items-center">
               <div>
                  <div class="card-title">{{ $card['title'] }}</div>
                  <div class="card-value">
                     ₹ {{ number_format($card['value'], 2) }}
                  </div>
               </div>
               <div class="card-icon">
                  <i class="bi {{ $card['icon'] }}"></i>
               </div>
            </div>
         </div>
      </div>
      @endforeach
   </div>
   {{-- ===== TABLE ===== --}}
   <div class="table-box">
      <div class="table-title">
         📊 Recent Earnings
      </div>
      <div class="table-responsive">
         <div class="table-responsive">
            <table class="table align-middle earnings-table mb-0">
               <thead>
                  <tr>
                     <th width="80">#ID</th>
                     <th>User</th>
                     <th width="180">Amount</th>
                     <th width="180">Date</th>
                  </tr>
               </thead>
               <tbody>
                  @forelse($recentBookings as $key => $booking)
                  <tr>
                     <!-- ID -->
                     <td>
                        <span class="fw-bold text-primary">
                        #{{ $key + 1 }}
                        </span>
                     </td>
                     <!-- USER -->
                     <td>
                        <div class="d-flex align-items-center gap-3">
                           <!-- AVATAR -->
                           <div class="earning-avatar">
                              {{ strtoupper(substr($booking->user->first_name ?? 'U',0,1)) }}
                           </div>
                           <!-- USER INFO -->
                           <div>
                              <h6 class="mb-0 fw-semibold text-dark">
                                 {{ $booking->user->first_name ?? '-' }}
                              </h6>
                              {{-- <small class="text-muted">
                              Customer
                              </small> --}}
                           </div>
                        </div>
                     </td>
                     <!-- AMOUNT -->
                     <td>
                        <div class="amount-box">
                           <i class="bi bi-currency-rupee me-1"></i>
                           {{ number_format($booking->fees, 2) }}
                        </div>
                     </td>
                     <!-- DATE -->
                     <td>
                        <div class="date-box">
                           <i class="bi bi-calendar-event me-2"></i>
                           {{ $booking->created_at->format('d M Y') }}
                        </div>
                     </td>
                  </tr>
                  @empty
                  <tr>
                     <td colspan="4">
                        <div class="empty-state">
                           <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                              width="120"
                              class="mb-3">
                           <h5>No Earnings Found</h5>
                           <p class="text-muted mb-0">
                              No earnings records available right now.
                           </p>
                        </div>
                     </td>
                  </tr>
                  @endforelse
               </tbody>
            </table>
         </div>
      </div>
   </div>
</div>
@endsection