@extends('layouts.main')
@section('content')
<style> 
   .booking-table{
   border-collapse: separate;
   border-spacing: 0 14px;
   }
   /* TABLE HEAD */
   .booking-table thead th{
   border: none;
   background: #f8fafc;
   color: #64748b;
   font-size: 13px;
   font-weight: 700;
   padding: 16px;
   text-transform: uppercase;
   white-space: nowrap;
   }
   /* ROW */
   .booking-table tbody tr{
   background: #fff;
   box-shadow: 0 4px 20px rgba(0,0,0,0.05);
   border-radius: 18px;
   transition: 0.3s ease;
   }
   .booking-table tbody tr:hover{
   transform: translateY(-3px);
   box-shadow: 0 12px 28px rgba(0,0,0,0.08);
   }
   .booking-table tbody td{
   padding: 18px 16px;
   vertical-align: middle;
   border-top: none;
   border-bottom: none;
   }
   /* USER AVATAR */
   .user-avatar{
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: linear-gradient(135deg,#3b82f6,#6366f1);
   color: #fff;
   font-size: 20px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 15px rgba(59,130,246,0.3);
   }
   /* DOCTOR ICON */
   .doctor-icon{
   width: 42px;
   height: 42px;
   border-radius: 12px;
   background: rgba(99,102,241,0.12);
   color: #4f46e5;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   }
   /* SESSION */
   .session-badge{
   background: rgba(14,165,233,0.12);
   color: #0284c7;
   padding: 8px 14px;
   border-radius: 30px;
   font-size: 13px;
   font-weight: 600;
   }
   /* STATUS */
   .status-badge{
   padding: 8px 14px;
   border-radius: 30px;
   font-size: 13px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   }
   .completed{
   background: rgba(34,197,94,0.12);
   color: #16a34a;
   }
   .pending{
   background: rgba(245,158,11,0.12);
   color: #d97706;
   }
   .cancelled{
   background: rgba(239,68,68,0.12);
   color: #dc2626;
   }
   .unknown{
   background: rgba(148,163,184,0.15);
   color: #475569;
   }
   /* EMPTY */
   .empty-state{
   padding: 40px;
   text-align: center;
   }
   /* MOBILE */
   @media(max-width:768px){
   .booking-table thead{
   display: none;
   }
   .booking-table tbody tr{
   display: block;
   margin-bottom: 20px;
   }
   .booking-table tbody td{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 16px;
   border-bottom: 1px solid #f1f5f9;
   }
   .booking-table tbody td:last-child{
   border-bottom: none;
   }
   }
</style>
<div class="container-fluid py-4">
   <h4 class="mb-4 fw-bold">Session Booking Report</h4>
   <div class="row g-3">
      <!-- Total Booking -->
      <div class="col-md-3">
         <div class="card border-0 shadow-sm text-center">
            <div class="card-body">
               <i class="bi bi-calendar-check text-primary fs-1"></i>
               <h6 class="mt-2">Total Bookings</h6>
               <h3 class="text-primary fw-bold">{{ $total }}</h3>
            </div>
         </div>
      </div>
      <!-- Completed -->
      <div class="col-md-3">
         <div class="card border-0 shadow-sm text-center">
            <div class="card-body">
               <i class="bi bi-check-circle text-success fs-1"></i>
               <h6 class="mt-2">Completed</h6>
               <h3 class="text-success fw-bold">{{ $completed }}</h3>
            </div>
         </div>
      </div>
      <!-- Cancelled -->
      <div class="col-md-3">
         <div class="card border-0 shadow-sm text-center">
            <div class="card-body">
               <i class="bi bi-x-circle text-danger fs-1"></i>
               <h6 class="mt-2">Cancelled</h6>
               <h3 class="text-danger fw-bold">{{ $cancelled }}</h3>
            </div>
         </div>
      </div>
      <!-- Pending -->
      <div class="col-md-3">
         <div class="card border-0 shadow-sm text-center">
            <div class="card-body">
               <i class="bi bi-hourglass-split text-warning fs-1"></i>
               <h6 class="mt-2">Pending</h6>
               <h3 class="text-warning fw-bold">{{ $pending }}</h3>
            </div>
         </div>
      </div>
   </div>
   <!-- Booking Table -->
   <div class="card mt-4 shadow-sm">
      <div class="card-header bg-primary text-white fw-semibold">
         Booking Details
      </div>
      <div class="card-body">
         <div class="table-responsive">
            <div class="table-responsive">
               <table class="table align-middle booking-table mb-0">
                  <thead>
                     <tr>
                        <th width="80">#ID</th>
                        <th>User</th>
                        <th>Consultant</th>
                        {{-- <th>Session</th> --}}
                        <th>Date</th>
                        <th>Time</th>
                        <th width="150" class="text-center">Status</th>
                     </tr>
                  </thead>
                  <tbody>
                     @forelse($bookings 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">
                              <div class="user-avatar">
                                 {{ strtoupper(substr($booking->user->first_name ?? 'U',0,1)) }}
                              </div>
                              <div>
                                 <h6 class="mb-0 fw-semibold text-dark">
                                    {{ $booking->user->first_name ?? '-' }}
                                 </h6>
                                 {{-- <small class="text-muted">
                                 Patient
                                 </small> --}}
                              </div>
                           </div>
                        </td>
                        <!-- DOCTOR -->
                        <td>
                           <div class="d-flex align-items-center gap-2">
                              <div class="doctor-icon">
                                 <i class="bi bi-person-heart"></i>
                              </div>
                              <div>
                                 <h6 class="mb-0 fw-semibold text-dark">
                                    {{ $booking->counsellor->name ?? '-' }}
                                 </h6>
                                 {{-- <small class="text-muted">
                                 Consultant
                                 </small> --}}
                              </div>
                           </div>
                        </td>
                        <!-- SESSION -->
                        {{-- <td>
                           <span class="session-badge">
                           {{ $booking->sessionType->first_name ?? '-' }}
                           </span>
                        </td> --}}
                        <!-- DATE -->
                        <td>
                           <div class="fw-semibold text-dark">
                              {{ \Carbon\Carbon::parse($booking->date)->format('d M Y') }}
                           </div>
                        </td>
                        <!-- TIME -->
                        <td>
                           <div class="text-muted fw-medium">
                              {{ \Carbon\Carbon::parse($booking->created_at)->format('h:i A') }}
                           </div>
                        </td>
                        <!-- STATUS -->
                        <td class="text-center">
                           @if($booking->status == 'completed')
                           <span class="status-badge completed">
                           <i class="bi bi-check-circle-fill me-1"></i>
                           Completed
                           </span>
                           @elseif($booking->status == 'pending')
                           <span class="status-badge pending">
                           <i class="bi bi-clock-fill me-1"></i>
                           Pending
                           </span>
                           @elseif($booking->status == 'cancelled')
                           <span class="status-badge cancelled">
                           <i class="bi bi-x-circle-fill me-1"></i>
                           Cancelled
                           </span>
                           @else
                           <span class="status-badge unknown">
                           Unknown
                           </span>
                           @endif
                        </td>
                     </tr>
                     @empty
                     <tr>
                        <td colspan="7">
                           <div class="empty-state">
                              <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                                 width="120"
                                 class="mb-3">
                              <h5>No Bookings Found</h5>
                              <p class="text-muted mb-0">
                                 No booking records available right now.
                              </p>
                           </div>
                        </td>
                     </tr>
                     @endforelse
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection