@extends('layouts.main')
@section('content')
<style>
   .report-table{
   border-collapse: separate;
   border-spacing: 0 14px;
   }
   /* TABLE HEAD */
   .report-table thead th{
   border: none;
   background: #f8fafc;
   color: #64748b;
   font-size: 13px;
   font-weight: 700;
   padding: 16px;
   text-transform: uppercase;
   white-space: nowrap;
   }
   /* ROW */
   .report-table tbody tr{
   background: #fff;
   box-shadow: 0 4px 20px rgba(0,0,0,0.05);
   border-radius: 18px;
   transition: 0.3s ease;
   }
   .report-table tbody tr:hover{
   transform: translateY(-3px);
   box-shadow: 0 12px 28px rgba(0,0,0,0.08);
   }
   .report-table tbody td{
   padding: 18px 16px;
   vertical-align: middle;
   border-top: none;
   border-bottom: none;
   }
   /* AVATAR */
   .doctor-avatar{
   width: 54px;
   height: 54px;
   border-radius: 50%;
   background: linear-gradient(135deg,#6366f1,#8b5cf6);
   color: #fff;
   font-size: 22px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 15px rgba(99,102,241,0.3);
   }
   /* SESSION BOX */
   .session-box{
   display: inline-flex;
   align-items: center;
   background: rgba(59,130,246,0.10);
   color: #2563eb;
   padding: 10px 16px;
   border-radius: 14px;
   font-weight: 600;
   font-size: 14px;
   }
   /* EARNING BOX */
   .earning-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;
   }
   /* STATUS */
   .status-badge{
   padding: 8px 16px;
   border-radius: 30px;
   font-size: 13px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   }
   .active-status{
   background: rgba(34,197,94,0.12);
   color: #16a34a;
   }
   .inactive-status{
   background: rgba(239,68,68,0.12);
   color: #dc2626;
   }
   /* EMPTY */
   .empty-state{
   padding: 40px;
   text-align: center;
   }
   /* MOBILE */
   @media(max-width:768px){
   .report-table thead{
   display: none;
   }
   .report-table tbody tr{
   display: block;
   margin-bottom: 20px;
   }
   .report-table tbody td{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 16px;
   border-bottom: 1px solid #f1f5f9;
   }
   .report-table tbody td:last-child{
   border-bottom: none;
   }
   }
</style>
<div class="container-fluid py-4">
   <h4 class="mb-4 fw-bold">Consultant Wise Report</h4>
   {{-- ================= SUMMARY CARDS ================= --}}
   <div class="row g-4">
      {{-- COUNSELLORS --}}
      <div class="col-md-3">
         <div class="card shadow text-center hover-card"
            data-bs-toggle="modal" data-bs-target="#counsellorModal">
            <div class="card-body">
               <h6>Total Counsellors</h6>
               <h3 class="text-primary">{{ $totalConsultants ?? 0 }}</h3>
            </div>
         </div>
      </div>
      {{-- SESSIONS --}}
      <div class="col-md-3">
         <div class="card shadow text-center hover-card"
            data-bs-toggle="modal" data-bs-target="#sessionModal">
            <div class="card-body">
               <h6>Total Sessions</h6>
               <h3 class="text-success">{{ $totalSessions ?? 0 }}</h3>
            </div>
         </div>
      </div>
      {{-- EARNINGS --}}
      <div class="col-md-3">
         <div class="card shadow text-center hover-card"
            data-bs-toggle="modal" data-bs-target="#earningModal">
            <div class="card-body">
               <h6>Total Earnings</h6>
               <h3 class="text-warning">
                  ₹{{ number_format($totalEarning ?? 0, 2) }}
               </h3>
            </div>
         </div>
      </div>
      {{-- AVERAGE --}}
      <div class="col-md-3">
         <div class="card shadow text-center hover-card"
            data-bs-toggle="modal" data-bs-target="#avgModal">
            <div class="card-body">
               <h6>Average Per Consultant</h6>
               <h3 class="text-danger">
                  ₹{{ number_format($avg ?? 0, 2) }}
               </h3>
            </div>
         </div>
      </div>
   </div>
   {{-- ================= MAIN TABLE ================= --}}
   <div class="card mt-4 shadow">
      <div class="card-header bg-info text-white fw-semibold">
         Counsellor Wise Session Report
      </div>
      <div class="card-body table-responsive">
         <div class="table-responsive">
            <table class="table align-middle report-table mb-0">
               <thead>
                  <tr>
                     <th width="80">#ID</th>
                     <th>Consultant</th>
                     <th width="180">Sessions</th>
                     <th width="220">Total Earnings</th>
                     <th width="160" class="text-center">Status</th>
                  </tr>
               </thead>
               <tbody>
                  @forelse($report as $row)
                  <tr>
                     <!-- ID -->
                     <td>
                        <span class="fw-bold text-primary">
                        #{{ $loop->iteration }}
                        </span>
                     </td>
                     <!-- DOCTOR -->
                     <td>
                        <div class="d-flex align-items-center gap-3">
                           <!-- AVATAR -->
                           <div class="doctor-avatar">
                              {{ strtoupper(substr($row['name'],0,1)) }}
                           </div>
                           <!-- INFO -->
                           <div>
                              <h6 class="mb-0 fw-semibold text-dark">
                                 {{ $row['name'] }}
                              </h6>
                              {{-- <small class="text-muted">
                              Consultant Report
                              </small> --}}
                           </div>
                        </div>
                     </td>
                     <!-- SESSIONS -->
                     <td>
                        <div class="session-box">
                           <i class="bi bi-calendar2-check me-2"></i>
                           {{ $row['sessions'] }} Sessions
                        </div>
                     </td>
                     <!-- EARNINGS -->
                     <td>
                        <div class="earning-box">
                           <i class="bi bi-currency-rupee me-1"></i>
                           {{ number_format($row['earning'], 2) }}
                        </div>
                     </td>
                     <!-- STATUS -->
                     <td class="text-center">
                        @if($row['status'])
                        <span class="status-badge active-status">
                        <i class="bi bi-check-circle-fill me-1"></i>
                        Active
                        </span>
                        @else
                        <span class="status-badge inactive-status">
                        <i class="bi bi-x-circle-fill me-1"></i>
                        Inactive
                        </span>
                        @endif
                     </td>
                  </tr>
                  @empty
                  <tr>
                     <td colspan="5">
                        <div class="empty-state">
                           <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                              width="120"
                              class="mb-3">
                           <h5>No Report Data Found</h5>
                           <p class="text-muted mb-0">
                              No consultant report records available.
                           </p>
                        </div>
                     </td>
                  </tr>
                  @endforelse
               </tbody>
            </table>
         </div>
      </div>
   </div>
</div>
{{-- ================= MODALS ================= --}}
{{-- COUNSELLOR MODAL --}}
<div class="modal fade" id="counsellorModal">
   <div class="modal-dialog modal-xl">
      <div class="modal-content">
         <div class="modal-header bg-primary text-white">
            <h5 class="modal-title">All Counsellors</h5>
            <button class="btn-close" data-bs-dismiss="modal"></button>
         </div>
         <div class="modal-body table-responsive">
            <table class="table table-bordered table-hover text-center align-middle">
               <thead class="table-dark">
                  <tr>
                     <th>#</th>
                     <th>Name</th>
                     <th>Sessions</th>
                     <th>Earnings</th>
                     <th>Status</th>
                  </tr>
               </thead>
               <tbody>
                  @forelse($report as $row)
                  <tr>
                     <td>{{ $loop->iteration }}</td>
                     <td>{{ $row['name'] }}</td>
                     <td>{{ $row['sessions'] }}</td>
                     <td>₹{{ number_format($row['earning'], 2) }}</td>
                     <td>
                        @if($row['status'])
                        <span class="badge bg-success">Active</span>
                        @else
                        <span class="badge bg-danger">Inactive</span>
                        @endif
                     </td>
                  </tr>
                  @empty
                  <tr>
                     <td colspan="5">No Data Found</td>
                  </tr>
                  @endforelse
               </tbody>
            </table>
         </div>
      </div>
   </div>
</div>
{{-- SESSION MODAL --}}
<div class="modal fade" id="sessionModal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header bg-success text-white">
            <h5 class="modal-title">Session Types</h5>
            <button class="btn-close" data-bs-dismiss="modal"></button>
         </div>
         <div class="modal-body table-responsive">
            <table class="table table-bordered table-hover text-center align-middle">
               <thead class="table-dark">
                  <tr>
                     <th>#</th>
                     <th>Session Name</th>
                     <th>Fees</th>
                  </tr>
               </thead>
               <tbody>
                  @forelse($sessionTypes as $session)
                  <tr>
                     <td>{{ $loop->iteration }}</td>
                     <td>{{ $session->name }}</td>
                     <td>₹{{ number_format($session->fees, 2) }}</td>
                  </tr>
                  @empty
                  <tr>
                     <td colspan="4">No Sessions Found</td>
                  </tr>
                  @endforelse
               </tbody>
            </table>
         </div>
         <div class="modal-footer">
            <strong>Total Sessions: {{ $sessionTypes->count() }}</strong>
         </div>
      </div>
   </div>
</div>
{{-- EARNING MODEL- --}}
<div class="modal fade" id="earningModal">
   <div class="modal-dialog modal-xl">
      <div class="modal-content">
         <div class="modal-header bg-warning text-dark">
            <h5 class="modal-title">Booking Earnings</h5>
            <button class="btn-close" data-bs-dismiss="modal"></button>
         </div>
         <div class="modal-body table-responsive">
            <table class="table table-bordered table-hover text-center align-middle">
               <thead class="table-dark">
                  <tr>
                     <th>#</th>
                     <th>User</th>
                     <th>Counsellor</th>
                     <th>Session</th>
                     <th>Date</th>
                     <th>Amount</th>
                  </tr>
               </thead>
               <tbody>
                  @forelse($bookings as $booking)
                  <tr>
                     <td>{{ $loop->iteration }}</td>
                     <td>{{ $booking->user->first_name ?? '-' }}</td>
                     <td>{{ $booking->counsellor->first_name ?? '-' }}</td>
                     <td>{{ $session->name }}</td>
                     <td>{{ \Carbon\Carbon::parse($booking->appointment_date)->format('d M Y') }}</td>
                     <td>₹{{ number_format($booking->fees, 2) }}</td>
                  </tr>
                  @empty
                  <tr>
                     <td colspan="6">No Bookings Found</td>
                  </tr>
                  @endforelse
               </tbody>
            </table>
         </div>
         <div class="modal-footer">
            <strong>
            Total Earnings:
            ₹{{ number_format($bookings->sum(fn($b) => $b->fees ?? 0), 2) }}
            </strong>
         </div>
      </div>
   </div>
</div>
{{-- AVERAGE MODAL --}}
<div class="modal fade" id="avgModal">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header bg-danger text-white">
            <h5 class="modal-title">Average Per Consultant</h5>
            <button class="btn-close" data-bs-dismiss="modal"></button>
         </div>
         <div class="modal-body text-center">
            <h3 class="text-danger">₹{{ number_format($avg, 2) }}</h3>
            <p>Average Earnings</p>
         </div>
      </div>
   </div>
</div>
{{-- ================= STYLE ================= --}}
<style>
   .hover-card {
   cursor: pointer;
   border-radius: 12px;
   transition: all 0.3s ease;
   }
   .hover-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 15px 35px rgba(0,0,0,0.2);
   }
   .modal-content {
   border-radius: 12px;
   }
</style>
@endsection