@extends('layouts.main')
@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<style>
   .page-title{ font-size:22px; font-weight:600; }
   .dashboard-card{
   border-radius:12px;
   color:white;
   padding:20px;
   box-shadow:0 4px 15px rgba(0,0,0,0.08);
   }
   .card-blue{ background:linear-gradient(45deg,#4e73df,#224abe); }
   .card-green{ background:linear-gradient(45deg,#1cc88a,#169b6b); }
   .card-red{ background:linear-gradient(45deg,#e74a3b,#be2617); }
   .table-card{
   border:none;
   border-radius:12px;
   box-shadow:0 2px 12px rgba(0,0,0,0.06);
   }
   .avatar{
   width:38px;
   height:38px;
   border-radius:50%;
   object-fit:cover;
   margin-right:10px;
   }
   .progress{ height:8px; }
   .user-report-table{
   border-collapse: separate;
   border-spacing: 0 14px;
   }
   /* TABLE HEAD */
   .user-report-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 */
   .user-report-table tbody tr{
   background: #fff;
   box-shadow: 0 4px 20px rgba(0,0,0,0.05);
   border-radius: 18px;
   transition: 0.3s ease;
   }
   .user-report-table tbody tr:hover{
   transform: translateY(-3px);
   box-shadow: 0 12px 28px rgba(0,0,0,0.08);
   }
   .user-report-table tbody td{
   padding: 18px 16px;
   vertical-align: middle;
   border-top: none;
   border-bottom: none;
   }
   /* USER IMAGE */
   .user-avatar-wrapper{
   position: relative;
   }
   .user-avatar{
   width: 52px;
   height: 52px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid #fff;
   box-shadow: 0 4px 15px rgba(0,0,0,0.12);
   }
   .active-dot{
   width: 14px;
   height: 14px;
   background: #22c55e;
   border-radius: 50%;
   border: 2px solid #fff;
   position: absolute;
   bottom: 3px;
   right: 3px;
   }
   /* STATS CARD */
   .stats-card{
   display: inline-flex;
   align-items: center;
   padding: 10px 15px;
   border-radius: 14px;
   font-size: 14px;
   font-weight: 700;
   }
   .total-card{
   background: rgba(59,130,246,0.12);
   color: #2563eb;
   }
   .completed-card{
   background: rgba(34,197,94,0.12);
   color: #16a34a;
   }
   .cancelled-card{
   background: rgba(239,68,68,0.12);
   color: #dc2626;
   }
   /* SUCCESS RATE */
   .success-rate-wrapper{
   display: flex;
   align-items: center;
   gap: 12px;
   }
   .modern-progress{
   height: 10px;
   border-radius: 30px;
   background: #e2e8f0;
   overflow: hidden;
   flex: 1;
   }
   .modern-progress .progress-bar{
   border-radius: 30px;
   background: linear-gradient(90deg,#22c55e,#16a34a);
   }
   .success-text{
   min-width: 48px;
   font-size: 14px;
   font-weight: 700;
   color: #0f172a;
   }
   /* EMPTY */
   .empty-state{
   padding: 40px;
   text-align: center;
   }
   /* MOBILE */
   @media(max-width:768px){
   .user-report-table thead{
   display: none;
   }
   .user-report-table tbody tr{
   display: block;
   margin-bottom: 20px;
   }
   .user-report-table tbody td{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 16px;
   border-bottom: 1px solid #f1f5f9;
   }
   .user-report-table tbody td:last-child{
   border-bottom: none;
   }
   .user-avatar{
   width: 46px;
   height: 46px;
   }
   .success-rate-wrapper{
   width: 100%;
   }
   }
</style>
<div class="container-fluid py-4">
   <!-- HEADER -->
   <div class="d-flex justify-content-between align-items-center mb-4">
      <div>
         <h4 class="page-title">
            <i class="bi bi-people-fill text-primary me-2"></i>
            User Wise Report
         </h4>
         <small class="text-muted">User booking statistics</small>
      </div>
   </div>
   <!-- SUMMARY -->
   @php
   $totalBookings = 0;
   $totalCompleted = 0;
   $totalCancelled = 0;
   foreach($users as $user){
   if(isset($userStats[$user->id])){
   $totalBookings += $userStats[$user->id]['total'];
   $totalCompleted += $userStats[$user->id]['completed'];
   $totalCancelled += $userStats[$user->id]['cancelled'];
   }
   }
   @endphp
   <div class="row mb-4">
      <div class="col-md-4 mb-3">
         <div class="dashboard-card card-blue">
            <div class="d-flex justify-content-between">
               <div>
                  <h5>{{ $totalBookings }}</h5>
                  <p class="mb-0">Total Bookings</p>
               </div>
               <i class="bi bi-calendar-check fs-2"></i>
            </div>
         </div>
      </div>
      <div class="col-md-4 mb-3">
         <div class="dashboard-card card-green">
            <div class="d-flex justify-content-between">
               <div>
                  <h5>{{ $totalCompleted }}</h5>
                  <p class="mb-0">Completed</p>
               </div>
               <i class="bi bi-check-circle fs-2"></i>
            </div>
         </div>
      </div>
      <div class="col-md-4 mb-3">
         <div class="dashboard-card card-red">
            <div class="d-flex justify-content-between">
               <div>
                  <h5>{{ $totalCancelled }}</h5>
                  <p class="mb-0">Cancelled</p>
               </div>
               <i class="bi bi-x-circle fs-2"></i>
            </div>
         </div>
      </div>
   </div>
   <!-- TABLE -->
   <div class="card table-card">
      <div class="card-header bg-white border-bottom">
         <h6 class="mb-0 fw-semibold">User Booking Report</h6>
      </div>
      <div class="card-body p-0">
         <div class="table-responsive">
            <div class="table-responsive">
               <table class="table align-middle user-report-table mb-0">
                  <thead>
                     <tr>
                        <th>User</th>
                        <th>Total Bookings</th>
                        <th>Completed</th>
                        <th>Cancelled</th>
                        <th width="240" class="text-center">Success Rate</th>
                     </tr>
                  </thead>
                  <tbody>
                     @forelse($users as $user)
                     @php
                     $stats = $userStats[$user->id] ?? [
                     'total' => 0,
                     'completed' => 0,
                     'cancelled' => 0
                     ];
                     $successRate = $stats['total'] > 0
                     ? round(($stats['completed'] / $stats['total']) * 100)
                     : 0;
                     @endphp
                     <tr>
                        <!-- USER -->
                        <td>
                           <div class="d-flex align-items-center gap-3">
                              <!-- USER IMAGE -->
                              <div class="user-avatar-wrapper">
                                 <img src="{{ asset('user.png') }}"
                                    class="user-avatar">
                                 <span class="active-dot"></span>
                              </div>
                              <!-- USER INFO -->
                              <div>
                                 <h6 class="mb-0 fw-semibold text-dark">
                                    {{ $user->name ?? $user->first_name ?? 'N/A' }}
                                 </h6>
                                 <small class="text-muted">
                                 Registered User
                                 </small>
                              </div>
                           </div>
                        </td>
                        <!-- TOTAL -->
                        <td>
                           <div class="stats-card total-card">
                              <i class="bi bi-calendar2-check-fill me-2"></i>
                              {{ $stats['total'] }}
                           </div>
                        </td>
                        <!-- COMPLETED -->
                        <td>
                           <div class="stats-card completed-card">
                              <i class="bi bi-check-circle-fill me-2"></i>
                              {{ $stats['completed'] }}
                           </div>
                        </td>
                        <!-- CANCELLED -->
                        <td>
                           <div class="stats-card cancelled-card">
                              <i class="bi bi-x-circle-fill me-2"></i>
                              {{ $stats['cancelled'] }}
                           </div>
                        </td>
                        <!-- SUCCESS RATE -->
                        <td>
                           <div class="success-rate-wrapper">
                              <div class="progress modern-progress">
                                 <div class="progress-bar"
                                    role="progressbar"
                                    style="width: {{ $successRate }}%">
                                 </div>
                              </div>
                              <span class="success-text">
                              {{ $successRate }}%
                              </span>
                           </div>
                        </td>
                     </tr>
                     @empty
                     <tr>
                        <td colspan="5">
                           <div class="empty-state">
                              <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                                 width="110"
                                 class="mb-3">
                              <h5>No User Data Found</h5>
                              <p class="text-muted mb-0">
                                 User analytics are not available right now.
                              </p>
                           </div>
                        </td>
                     </tr>
                     @endforelse
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection