@extends('layouts.main')
@section('content')
   <style>
      .dashboard-title {
         font-weight: 700;
         font-size: 24px;
         color: #1e293b;
      }

      .dashboard-sub {
         font-size: 14px;
         color: #64748b;
      }

      .profile-label {
         font-size: 12px;
         color: #94a3b8;
      }

      .profile-value {
         font-weight: 600;
         font-size: 14px;
         color: #1e293b;
      }

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

      /* TABLE HEAD */
      .dashboard-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 */
      .dashboard-booking-table tbody tr {
         background: #fff;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
         border-radius: 18px;
         transition: 0.3s ease;
      }

      .dashboard-booking-table tbody tr:hover {
         transform: translateY(-3px);
         box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
      }

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

      /* AVATAR */
      .patient-avatar {
         width: 50px;
         height: 50px;
         border-radius: 50%;
         background: linear-gradient(135deg, #6366f1, #8b5cf6);
         color: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 18px;
         font-weight: 700;
         box-shadow: 0 5px 16px rgba(99, 102, 241, 0.3);
      }

      /* STATUS */
      .booking-status {
         padding: 8px 15px;
         border-radius: 30px;
         font-size: 13px;
         font-weight: 600;
      }

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

      .status-upcoming {
         background: rgba(14, 165, 233, 0.12);
         color: #0284c7;
      }

      .status-completed {
         background: rgba(139, 92, 246, 0.12);
         color: #7c3aed;
      }

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

      .status-default {
         background: rgba(100, 116, 139, 0.12);
         color: #475569;
      }

      .status-select {
         border: none;
         padding: 8px 12px;
         border-radius: 12px;
         font-size: 13px;
         font-weight: 700;
         cursor: pointer;
         outline: none;
         transition: 0.3s;
         appearance: none;
         -webkit-appearance: none;
         text-align: center;
         width: 130px;
      }

      .status-select:hover {
         opacity: 0.85;
         transform: scale(1.02);
      }

      /* EMPTY */
      .empty-state {
         padding: 40px;
         text-align: center;
      }

      /* MOBILE */
      @media(max-width:768px) {
         .dashboard-booking-table thead {
            display: none;
         }

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

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

         .dashboard-booking-table tbody td:last-child {
            border-bottom: none;
         }

         .patient-avatar {
            width: 44px;
            height: 44px;
         }
      }
   </style>
   <div class="container-fluid py-4">
      <!-- Header -->
      <div class="mb-4">
         <div class="dashboard-title">{{ $user->trade_name }} Dashboard</div>
         <div class="dashboard-sub">Welcome back, {{ $user->trade_name }}</div>
      </div>
      <!-- Profile Info -->
      <div class="card shadow-sm border-0 mb-4">
         <div class="card-header bg-white border-0">
            <h6 class="fw-semibold mb-0">👤 Profile Information</h6>
         </div>
         <div class="card-body">
            <div class="row align-items-center">
               <div class="col-md-2 text-center">
                  <img
                     src="{{ !empty($user->profile_image) ? asset('uploads/profile/' . $user->profile_image) : asset('user.png') }}"
                     onerror="this.onerror=null;this.src='{{ asset('user.png') }}';" class="rounded-circle shadow-sm"
                     width="90">
               </div>
               <div class="col-md-10">
                  <div class="row">
                     <div class="col-md-4 mb-3">
                        <div class="profile-label">Name</div>
                        <div class="profile-value">{{ $user->first_name ?? '' }}</div>
                     </div>
                     <div class="col-md-4 mb-3">
                        <div class="profile-label">Email</div>
                        <div class="profile-value">{{ $user->email ?? '' }}</div>
                     </div>
                     <div class="col-md-4 mb-3">
                        <div class="profile-label">Phone</div>
                        <div class="profile-value">+91 {{ $user->phone_number ?? '' }}</div>
                     </div>
                     <div class="col-md-4 mb-3">
                        <div class="profile-label">City</div>
                        <div class="profile-value">{{ $user->country ?? '' }}</div>
                     </div>
                     <div class="col-md-4 mb-3">
                        <div class="profile-label">Joined</div>
                        <div class="profile-value">{{ \Carbon\Carbon::parse($user->created_at)->format('d-m-Y H:i:s') }}
                        </div>
                     </div>
                     <div class="col-md-4 mb-3">
                        <div class="profile-label">Status</div>
                        <div class="profile-value text-success">Active</div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- Stats -->
      {{--  <div class="row g-3 mb-4">
         <div class="col-md-3">
            <div class="card card-box shadow-sm border-0 text-center p-3" data-bs-toggle="modal"
               data-bs-target="#bookingModal" onclick="filterBookings('all')" style="cursor:pointer;">
               <div class="icon-box text-primary">
                  <i class="bi bi-grid"></i>
               </div>
               <h5 class="mt-2 mb-0">{{ $total_bookings_data }}</h5>
               <small class="text-muted">Total Bookings</small>
            </div>
         </div>
         <div class="col-md-3">
            <div class="card card-box shadow-sm border-0 text-center p-3" data-bs-toggle="modal"
               data-bs-target="#bookingModal" onclick="filterBookings('completed')" style="cursor:pointer;">
               <div class="icon-box text-success">
                  <i class="bi bi-check-circle"></i>
               </div>
               <h5 class="mt-2 mb-0">{{ $completed_bookings }}</h5>
               <small class="text-muted">Completed</small>
            </div>
         </div>
         <div class="col-md-3">
            <div class="card card-box shadow-sm border-0 text-center p-3" data-bs-toggle="modal"
               data-bs-target="#bookingModal" onclick="filterBookings('upcoming')" style="cursor:pointer;">
               <div class="icon-box text-warning">
                  <i class="bi bi-clock"></i>
               </div>
               <h5 class="mt-2 mb-0">{{ $upcoming_bookings }}</h5>
               <small class="text-muted">Pending</small>
            </div>
         </div>
         <div class="col-md-3">
            <div class="card card-box shadow-sm border-0 text-center p-3" data-bs-toggle="modal"
               data-bs-target="#bookingModal" onclick="filterBookings('cancelled')" style="cursor:pointer;">
               <div class="icon-box text-danger">
                  <i class="bi bi-x-circle"></i>
               </div>
               <h5 class="mt-2 mb-0">{{ $cancelled_bookings }}</h5>
               <small class="text-muted">Cancelled</small>
            </div>
         </div>
      </div>  --}}
      <!-- Activity Table -->
      {{--  <div class="card shadow-sm border-0">
         <div class="card-header bg-white border-0">
            <h6 class="fw-semibold mb-0">📋 Recent Booking Activity</h6>
         </div>
         <div class="card-body p-0">
            <div class="table-responsive">
               <table class="table dashboard-booking-table align-middle mb-0">
                  <thead>
                     <tr>
                        <th>Patient</th>
                        <th>Date</th>
                        <th class="text-center">Status</th>
                     </tr>
                  </thead>
                  <tbody>
                     @forelse($bookings_data->take(3) as $booking)
                        <tr>
                           <!-- PATIENT -->
                           <td>
                              <div class="d-flex align-items-center gap-3">
                                 <!-- AVATAR -->
                                 <div class="patient-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 ?? '') . ' ' . ($booking->user->last_name ?? '') }}
                                    </h6>
                                    <small class="text-muted">
                                       Booking Patient
                                    </small>
                                 </div>
                              </div>
                           </td>
                           <!-- DATE -->
                           <td>
                              <div>
                                 <h6 class="mb-0 fw-semibold text-dark">
                                    {{ \Carbon\Carbon::parse($booking->appointment_date)->format('d M Y') }}
                                 </h6>
                                 <small class="text-muted">
                                    {{ \Carbon\Carbon::parse($booking->appointment_date)->format('l') }}
                                 </small>
                              </div>
                           </td>
                           <!-- STATUS -->
                           <td class="text-center">
                              @php
                                 $status = strtolower($booking->status);
                              @endphp
                              @if($status == 'confirmed')
                                 <span class="badge booking-status confirmed-status">
                                    <i class="bi bi-check-circle-fill me-1"></i>
                                    Confirmed
                                 </span>
                              @elseif($status == 'pending')
                                 <span class="badge booking-status pending-status">
                                    <i class="bi bi-clock-fill me-1"></i>
                                    Pending
                                 </span>
                              @elseif($status == 'completed')
                                 <span class="badge booking-status completed-status">
                                    <i class="bi bi-award-fill me-1"></i>
                                    Completed
                                 </span>
                              @elseif($status == 'cancelled')
                                 <span class="badge booking-status cancelled-status">
                                    <i class="bi bi-x-circle-fill me-1"></i>
                                    Cancelled
                                 </span>
                              @else
                                 <span class="badge booking-status default-status">
                                    {{ ucfirst($booking->status) }}
                                 </span>
                              @endif
                           </td>
                        </tr>
                     @empty
                        <tr>
                           <td colspan="3">
                              <div class="empty-state">
                                 <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png" width="110" class="mb-3">
                                 <h5>No Bookings Found</h5>
                                 <p class="text-muted mb-0">
                                    Booking records are currently unavailable.
                                 </p>
                              </div>
                           </td>
                        </tr>
                     @endforelse
                  </tbody>
               </table>
            </div>
         </div>
      </div>  --}}
   </div>
   <!-- MODEL CODE -->
   <div class="modal fade" id="bookingModal" tabindex="-1">
      <div class="modal-dialog modal-xl modal-dialog-centered">
         <div class="modal-content">
            <div class="modal-header">
               <h5 class="modal-title">📅 Bookings Details</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
               <!-- STATIC DATA (you can replace with dynamic later) -->
               <table class="table table-bordered">
                  <thead>
                     <tr>
                        <th>#</th>
                        <th>Patient</th>
                        <th>Doctor</th>
                        <th>Clinic</th>
                        <th>Appointment Date</th>
                        <th>Start Time</th>
                        <th>End Time</th>
                        <th>Status</th>
                     </tr>
                  </thead>
                  <tbody>
                     @foreach($bookings_data as $key => $value)
                        <tr data-status="{{ strtolower($value->status) }}">
                           <td>{{ $key + 1 }}</td>
                           <td>{{ $value->user->first_name }} {{ $value->user->last_name }}</td>
                           <td>{{ $value->consultant->first_name }} {{ $value->consultant->last_name }}</td>
                           <td>{{ $value->clinic->trade_name }}</td>
                           <td>{{ \Carbon\Carbon::parse($value->appointment_date)->format('d-m-Y') }}</td>
                           <td>{{ $value->start_time }}</td>
                           <td>{{ $value->end_time }}</td>
                           <td>
                               <form action="{{ route('counsellor.booking.status', $value->id) }}" method="POST"
                                   id="modal-status-form-{{ $value->id }}">
                                   @csrf
                                   @php
                                       $user_role = auth()->user();
                                       $isRestricted = $user_role->hasRole('user') || $user_role->hasRole('corporate_client');
                                   @endphp
                                   <select name="status" class="status-select status-{{ $value->status ?? 'default' }}"
                                       onchange="document.getElementById('modal-status-form-{{ $value->id }}').submit()">
                                       @if (!$isRestricted)
                                           <option value="pending" {{ $value->status == 'pending' ? 'selected' : '' }}>
                                               Pending</option>
                                           <option value="upcoming" {{ $value->status == 'upcoming' ? 'selected' : '' }}>
                                               Upcoming</option>
                                           <option value="completed" {{ $value->status == 'completed' ? 'selected' : '' }}>
                                               Completed</option>
                                       @endif
                                       <option value="cancelled" {{ $value->status == 'cancelled' ? 'selected' : '' }}>
                                           Cancelled</option>
                                       @if ($isRestricted && $value->status != 'cancelled')
                                           <option value="{{ $value->status }}" selected>
                                               {{ ucfirst($value->status) }}</option>
                                       @endif
                                   </select>
                               </form>
                           </td>
                        </tr>
                     @endforeach
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
   <script>
      function filterBookings(status) {
         let rows = document.querySelectorAll("#bookingModal tbody tr");
         let title = document.getElementById("modalTitle");

         // Change modal title
         if (title) {
            if (status === 'all') {
               title.innerText = "📅 All Bookings";
            } else {
               title.innerText = "📅 " + status.charAt(0).toUpperCase() + status.slice(1) + " Bookings";
            }
         }

         rows.forEach(row => {
            let rowStatus = row.getAttribute("data-status");

            if (status === 'all' || rowStatus === status) {
               row.style.display = "";
            } else {
               row.style.display = "none";
            }
         });
      }
   </script>
@endsection