@extends('layouts.main')

@section('content')

   <style>
      .report-card {
         border: none;
         border-radius: 20px;
         overflow: hidden;
         transition: 0.3s ease;
         cursor: pointer;
      }

      .report-card:hover {
         transform: translateY(-4px);
      }

      .report-card .card-body {
         padding: 24px;
      }

      .report-icon {
         width: 60px;
         height: 60px;
         border-radius: 18px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 24px;
         background: rgba(255, 255, 255, 0.2);
      }

      .report-title {
         font-size: 14px;
         opacity: .9;
      }

      .report-count {
         font-size: 30px;
         font-weight: 700;
      }

      .custom-table {
         border-collapse: separate;
         border-spacing: 0 14px;
      }

      .custom-table thead th {
         border: none;
         background: #f8fafc;
         color: #64748b;
         font-size: 13px;
         font-weight: 700;
         padding: 16px;
         text-transform: uppercase;
         white-space: nowrap;
      }

      .custom-table tbody tr {
         background: #fff;
         box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
         transition: 0.3s ease;
      }

      .custom-table tbody tr:hover {
         transform: translateY(-2px);
         box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
      }

      .custom-table tbody td {
         padding: 18px 16px;
         vertical-align: middle;
         border-top: none;
         border-bottom: none;
      }

      .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);
      }

      .status-badge {
         padding: 8px 16px;
         border-radius: 30px;
         font-size: 13px;
         font-weight: 700;
      }

      .status-pending {
         background: rgba(245, 158, 11, 0.12);
         color: #d97706;
      }

      .status-completed {
         background: rgba(34, 197, 94, 0.12);
         color: #16a34a;
      }

      .status-cancelled {
         background: rgba(239, 68, 68, 0.12);
         color: #dc2626;
      }

      .empty-state {
         padding: 50px;
         text-align: center;
      }

      @media(max-width:768px) {

         .custom-table thead {
            display: none;
         }

         .custom-table tbody tr {
            display: block;
            margin-bottom: 20px;
         }

         .custom-table tbody td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f1f5f9;
         }

         .custom-table tbody td:last-child {
            border-bottom: none;
         }
      }
   </style>

   <div class="container-fluid py-4">

      <div class="d-flex justify-content-between align-items-center mb-4">
         <div>
            <h3 class="fw-bold mb-1">Consultant Report</h3>
            <p class="text-muted mb-0">
               Booking statistics overview
            </p>
         </div>
      </div>

      <!-- SUMMARY CARDS -->

      <div class="row g-4 mb-4">

         <!-- TOTAL -->

         <div class="row g-4 mb-4">

            <!-- TOTAL -->

            <div class="col-md-3">
               <div class="card report-card bg-primary text-white shadow-sm" data-bs-toggle="modal"
                  data-bs-target="#totalModal">

                  <div class="card-body d-flex justify-content-between align-items-center">

                     <div>
                        <div class="report-title">
                           Total Bookings
                        </div>

                        <div class="report-count">
                           {{ $totalBookingsCount }}
                        </div>
                     </div>

                     <div class="report-icon">
                        <i class="bi bi-journal-check"></i>
                     </div>

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

            <!-- COMPLETED -->

            <div class="col-md-3">
               <div class="card report-card bg-success text-white shadow-sm" data-bs-toggle="modal"
                  data-bs-target="#completedModal">

                  <div class="card-body d-flex justify-content-between align-items-center">

                     <div>
                        <div class="report-title">
                           Completed Bookings
                        </div>

                        <div class="report-count">
                           {{ $completedBookingsCount }}
                        </div>
                     </div>

                     <div class="report-icon">
                        <i class="bi bi-check-circle-fill"></i>
                     </div>

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

            <!-- PENDING -->

            <div class="col-md-3">
               <div class="card report-card bg-warning text-white shadow-sm" data-bs-toggle="modal"
                  data-bs-target="#pendingModal">

                  <div class="card-body d-flex justify-content-between align-items-center">

                     <div>
                        <div class="report-title">
                           Pending Bookings
                        </div>

                        <div class="report-count">
                           {{ $pendingBookingsCount }}
                        </div>
                     </div>

                     <div class="report-icon">
                        <i class="bi bi-clock-fill"></i>
                     </div>

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

            <!-- CANCELLED -->

            <div class="col-md-3">
               <div class="card report-card bg-danger text-white shadow-sm" data-bs-toggle="modal"
                  data-bs-target="#cancelledModal">

                  <div class="card-body d-flex justify-content-between align-items-center">

                     <div>
                        <div class="report-title">
                           Cancelled Bookings
                        </div>

                        <div class="report-count">
                           {{ $cancelledBookingsCount }}
                        </div>
                     </div>

                     <div class="report-icon">
                        <i class="bi bi-x-circle-fill"></i>
                     </div>

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

         </div>

      </div>

   </div>

   <!-- ================= TOTAL MODAL ================= -->

   <div class="modal fade" id="totalModal" tabindex="-1">

      <div class="modal-dialog modal-xl modal-dialog-centered">

         <div class="modal-content border-0 rounded-4 shadow-lg">

            <div class="modal-header">
               <h5 class="fw-bold text-primary mb-0">
                  Total Bookings
               </h5>

               <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-0">

               <div class="table-responsive">

                  <table class="table custom-table align-middle mb-0">

                     <thead>
                        <tr>
                           <th>User</th>
                           <th>Date</th>
                           <th>Status</th>
                        </tr>
                     </thead>

                     <tbody>

                        @forelse($totalBookings as $b)

                           <tr>

                              <td>
                                 <div class="d-flex align-items-center gap-3">

                                    <img src="{{ asset('user.png') }}" class="user-avatar">

                                    <div>
                                       <h6 class="mb-0 fw-semibold">
                                          {{ $b->user->first_name ?? 'N/A' }}
                                       </h6>

                                       <small class="text-muted">
                                          Booking User
                                       </small>
                                    </div>

                                 </div>
                              </td>

                              <td>
                                 {{ \Carbon\Carbon::parse($b->date)->format('d M Y') }}
                              </td>

                              <td>

                                 @if($b->status == 'pending')

                                    <span class="status-badge status-pending">
                                       <i class="bi bi-clock-fill me-1"></i>
                                       Pending
                                    </span>

                                 @elseif($b->status == 'completed')

                                    <span class="status-badge status-completed">
                                       <i class="bi bi-check-circle-fill me-1"></i>
                                       Completed
                                    </span>

                                 @elseif($b->status == 'cancelled')

                                    <span class="status-badge status-cancelled">
                                       <i class="bi bi-x-circle-fill me-1"></i>
                                       Cancelled
                                    </span>

                                 @else

                                    <span class="status-badge bg-secondary text-white">
                                       {{ ucfirst($b->status) }}
                                    </span>

                                 @endif

                              </td>

                           </tr>

                        @empty

                           <tr>
                              <td colspan="3">

                                 <div class="empty-state">

                                    <h5>No Data Found</h5>

                                 </div>

                              </td>
                           </tr>

                        @endforelse

                     </tbody>

                  </table>

               </div>

            </div>

         </div>

      </div>

   </div>

   <!-- ================= COMPLETED MODAL ================= -->

   <div class="modal fade" id="completedModal" tabindex="-1">

      <div class="modal-dialog modal-xl modal-dialog-centered">

         <div class="modal-content border-0 rounded-4 shadow-lg">

            <div class="modal-header">
               <h5 class="fw-bold text-success mb-0">
                  Completed Bookings
               </h5>

               <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-0">

               <div class="table-responsive">

                  <table class="table custom-table align-middle mb-0">

                     <thead>
                        <tr>
                           <th>User</th>
                           <th>Date</th>
                           <th>Status</th>
                        </tr>
                     </thead>

                     <tbody>

                        @forelse($completedBookings as $b)

                           <tr>

                              <td>

                                 <div class="d-flex align-items-center gap-3">

                                    <img src="{{ asset('user.png') }}" class="user-avatar">

                                    <div>
                                       <h6 class="mb-0 fw-semibold">
                                          {{ $b->user->first_name ?? 'N/A' }}
                                       </h6>
                                    </div>

                                 </div>

                              </td>

                              <td>
                                 {{ \Carbon\Carbon::parse($b->date)->format('d M Y') }}
                              </td>

                              <td>
                                 <span class="status-badge status-completed">
                                    Completed
                                 </span>
                              </td>

                           </tr>

                        @empty

                           <tr>
                              <td colspan="3">

                                 <div class="empty-state">
                                    <h5>No Completed Bookings</h5>
                                 </div>

                              </td>
                           </tr>

                        @endforelse

                     </tbody>

                  </table>

               </div>

            </div>

         </div>

      </div>

   </div>

   <!-- ================= PENDING MODAL ================= -->

   <div class="modal fade" id="pendingModal" tabindex="-1">

      <div class="modal-dialog modal-xl modal-dialog-centered">

         <div class="modal-content border-0 rounded-4 shadow-lg">

            <div class="modal-header">
               <h5 class="fw-bold text-warning mb-0">
                  Pending Bookings
               </h5>

               <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-0">

               <div class="table-responsive">

                  <table class="table custom-table align-middle mb-0">

                     <thead>
                        <tr>
                           <th>User</th>
                           <th>Date</th>
                           <th>Status</th>
                        </tr>
                     </thead>

                     <tbody>

                        @forelse($pendingBookings as $b)

                           <tr>

                              <td>

                                 <div class="d-flex align-items-center gap-3">

                                    <img src="{{ asset('user.png') }}" class="user-avatar">

                                    <div>
                                       <h6 class="mb-0 fw-semibold">
                                          {{ $b->user->first_name ?? 'N/A' }}
                                       </h6>
                                    </div>

                                 </div>

                              </td>

                              <td>
                                 {{ \Carbon\Carbon::parse($b->date)->format('d M Y') }}
                              </td>

                              <td>
                                 <span class="status-badge status-pending">
                                    Pending
                                 </span>
                              </td>

                           </tr>

                        @empty

                           <tr>
                              <td colspan="3">

                                 <div class="empty-state">
                                    <h5>No Pending Bookings</h5>
                                 </div>

                              </td>
                           </tr>

                        @endforelse

                     </tbody>

                  </table>

               </div>

            </div>

         </div>

      </div>

   </div>

   <!-- ================= CANCELLED MODAL ================= -->

   <div class="modal fade" id="cancelledModal" tabindex="-1">

      <div class="modal-dialog modal-xl modal-dialog-centered">

         <div class="modal-content border-0 rounded-4 shadow-lg">

            <div class="modal-header">
               <h5 class="fw-bold text-danger mb-0">
                  Cancelled Bookings
               </h5>

               <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-0">

               <div class="table-responsive">

                  <table class="table custom-table align-middle mb-0">

                     <thead>
                        <tr>
                           <th>User</th>
                           <th>Date</th>
                           <th>Status</th>
                        </tr>
                     </thead>

                     <tbody>

                        @forelse($cancelledBookings as $b)

                           <tr>

                              <td>

                                 <div class="d-flex align-items-center gap-3">

                                    <img src="{{ asset('user.png') }}" class="user-avatar">

                                    <div>
                                       <h6 class="mb-0 fw-semibold">
                                          {{ $b->user->first_name ?? 'N/A' }}
                                       </h6>
                                    </div>

                                 </div>

                              </td>

                              <td>
                                 {{ \Carbon\Carbon::parse($b->date)->format('d M Y') }}
                              </td>

                              <td>
                                 <span class="status-badge status-cancelled">
                                    Cancelled
                                 </span>
                              </td>

                           </tr>

                        @empty

                           <tr>
                              <td colspan="3">

                                 <div class="empty-state">
                                    <h5>No Cancelled Bookings</h5>
                                 </div>

                              </td>
                           </tr>

                        @endforelse

                     </tbody>

                  </table>

               </div>

            </div>

         </div>

      </div>

   </div>

@endsection