@extends('layouts.main')
@section('content')
    <style>
        .appointment-table thead {
            background: #f8fafc;
        }

        .appointment-table thead th {
            border: 0;
            padding: 18px 22px;
            font-size: 13px;
            font-weight: 700;
            color: #6c757d;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .appointment-table tbody td {
            padding: 20px 22px;
            border-top: 1px solid #f1f5f9;
            vertical-align: middle;
        }

        .appointment-table tbody tr {
            transition: 0.3s ease;
        }

        .appointment-table tbody tr:hover {
            background: #fafcff;
        }

        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #0d6efd, #3b82f6);
            color: #fff;
            font-size: 18px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 5px 15px rgba(13, 110, 253, 0.2);
        }

        .consultant-avatar {
            width: 50px;
            height: 50px;
            border-radius: 14px;
            background: #eef4ff;
            color: #0d6efd;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            flex-shrink: 0;
        }

        .appointment-time {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #f8fafc;
            padding: 10px 16px;
            border-radius: 14px;
            font-weight: 600;
            color: #334155;
        }

        .appointment-time i {
            color: #0d6efd;
        }

        /* =========================
               STATUS SELECT DESIGN
               ========================= */
        .status-select {
            min-width: 140px;
            height: 44px;
            padding: 0 16px;
            border: none;
            border-radius: 14px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            outline: none;
            transition: all 0.3s ease;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            text-align: center;
            background-position: right 14px center;
            background-repeat: no-repeat;
            background-size: 14px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
        }

        /* HOVER */
        .status-select:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
        }

        /* FOCUS */
        .status-select:focus {
            box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
        }

        /* PENDING */
        .status-pending {
            background: linear-gradient(135deg, #fff7ed, #ffedd5);
            color: #ea580c;
            border: 1px solid #fdba74;
        }

        /* UPCOMING */
        .status-upcoming {
            background: linear-gradient(135deg, #eff6ff, #dbeafe);
            color: #2563eb;
            border: 1px solid #93c5fd;
        }

        /* COMPLETED */
        .status-completed {
            background: linear-gradient(135deg, #ecfdf5, #d1fae5);
            color: #059669;
            border: 1px solid #6ee7b7;
        }

        /* CANCELLED */
        .status-cancelled {
            background: linear-gradient(135deg, #fef2f2, #fee2e2);
            color: #dc2626;
            border: 1px solid #fca5a5;
        }

        /* DEFAULT */
        .status-default {
            background: #f8fafc;
            color: #475569;
            border: 1px solid #cbd5e1;
        }

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

        .pagination {
            margin-bottom: 0;
        }

        .page-link {
            border: 0 !important;
            min-width: 40px;
            height: 40px;
            border-radius: 12px !important;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0d6efd;
            font-weight: 600;
            margin: 0 4px;
        }

        .page-item.active .page-link {
            background: #0d6efd;
            color: #fff;
        }

        .page-link:focus {
            box-shadow: none;
        }

        @media(max-width:768px) {
            .appointment-table thead th {
                font-size: 12px;
                padding: 14px;
            }

            .appointment-table tbody td {
                padding: 14px;
            }

            .user-avatar,
            .consultant-avatar {
                width: 42px;
                height: 42px;
                font-size: 16px;
            }
        }

        .dashboard-title {
            font-weight: 700;
            font-size: 22px;
            color: #1e293b;
        }

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

        .stat-card {
            border: none;
            border-radius: 12px;
            transition: 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
        }

        .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .icon-blue {
            background: #eef2ff;
            color: #4f46e5;
        }

        .icon-green {
            background: #ecfdf5;
            color: #059669;
        }

        .icon-orange {
            background: #fff7ed;
            color: #ea580c;
        }

        .icon-red {
            background: #fef2f2;
            color: #dc2626;
        }

        .section-card {
            border: none;
            border-radius: 12px;
        }

        .section-header {
            font-weight: 600;
            font-size: 15px;
        }

        .review-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

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

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

        /* ROW */
        .appointment-table tbody tr {
            background: #fff;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            border-radius: 18px;
            transition: 0.3s ease;
        }

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

        .appointment-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, #2563eb);
            color: #fff;
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
        }

        /* CONSULTANT AVATAR */
        .consultant-avatar {
            width: 50px;
            height: 50px;
            border-radius: 14px;
            background: rgba(99, 102, 241, 0.12);
            color: #4f46e5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }

        /* TIME BOX */
        .time-box {
            display: inline-flex;
            align-items: center;
            background: rgba(14, 165, 233, 0.12);
            color: #0284c7;
            padding: 10px 16px;
            border-radius: 14px;
            font-weight: 600;
            font-size: 14px;
        }

        /* STATUS */
        .status-badge {
            padding: 8px 16px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

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

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

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

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

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

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

            .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);
            }
    </style>
    <div class="container-fluid py-4">
        <!-- HEADER -->
        <div class="mb-4 d-flex align-items-center">
            <img src="{{ asset('img/logo.png') }}" width="45" class="me-2">
            <div>
                <div class="dashboard-title">IM HAPPY Dashboard</div>
                <div class="dashboard-sub">Healthy Life Management System</div>
            </div>
        </div>
        <!-- STATS -->
        <div class="row g-3 mb-4">
            <div class="col-xl-3 col-md-6">
                <a href="{{ route('superadmin.doctor.index', ['user_type' => 'counsellor']) }}" class="text-decoration-none">
                    <div class="card stat-card shadow-sm">
                        <div class="card-body d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted">Consultants</small>
                                <h4>{{ $counsellors ?? 0 }}</h4>
                            </div>
                            <div class="stat-icon icon-blue"><i class="bi bi-person-badge"></i></div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-3 col-md-6">
                <a href="{{ route('superadmin.user.index', ['user_type' => 'user']) }}" class="text-decoration-none">
                    <div class="card stat-card shadow-sm">
                        <div class="card-body d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted">Users</small>
                                <h4>{{ $users ?? 0 }}</h4>
                            </div>
                            <div class="stat-icon icon-green"><i class="bi bi-people"></i></div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card stat-card shadow-sm" data-bs-toggle="modal" data-bs-target="#bookingModal"
                    style="cursor:pointer;">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted">Bookings</small>
                            <h4>{{ $bookings ?? 0 }}</h4>
                        </div>
                        <div class="stat-icon icon-orange"><i class="bi bi-calendar-check"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card stat-card shadow-sm">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted">Reports</small>
                            <h4>{{ $reportsCount ?? 0 }}</h4>
                        </div>
                        <div class="stat-icon icon-red"><i class="bi bi-file-medical"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card stat-card shadow-sm h-100">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1">
                                Corporate Clients
                            </small>
                            <h4 class="fw-bold mb-0">
                                {{ $corporatecilent ?? 0 }}
                            </h4>
                        </div>
                        <div class="stat-icon icon-blue">
                            <i class="bi bi-buildings"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- APPOINTMENTS + REVIEWS -->
        <div class="row g-4 mb-4">
            <!-- TODAY APPOINTMENTS -->
            <div class="col-lg-12">
                <div class="card section-card shadow-sm border-0 rounded-4 overflow-hidden">
                    <!-- HEADER -->
                    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                        <!-- CARD HEADER -->
                        <div class="card-header bg-white border-0 p-4 d-flex justify-content-between align-items-center">
                            <div>
                                <h4 class="mb-1 fw-bold text-dark">
                                    Today's Appointments
                                </h4>
                                <p class="text-muted mb-0 small">
                                    Manage and monitor today's scheduled consultations
                                </p>
                            </div>
                            <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill fw-semibold">
                                {{ $bookings_data->total() }} Appointments
                            </span>
                        </div>
                        <!-- TABLE -->
                        <div class="table-responsive">
                            <table class="table appointment-table align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>User</th>
                                        <th>Consultant</th>
                                        <th width="200">Appointment Time</th>
                                        <th width="180" class="text-center">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($bookings_data as $value)
                                        <tr>
                                            <!-- USER -->
                                            <td>
                                                <div class="d-flex align-items-center gap-3">
                                                    <div class="user-avatar">
                                                        {{ strtoupper(substr($value->user->first_name ?? 'U', 0, 1)) }}
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-1 fw-bold text-dark">
                                                            {{ $value->user->first_name ?? 'N/A' }}
                                                            {{ $value->user->last_name ?? 'N/A' }}
                                                        </h6>
                                                        <small class="text-muted">
                                                            {{ $value->user->email ?? 'No Email' }}
                                                        </small>
                                                    </div>
                                                </div>
                                            </td>
                                            <!-- CONSULTANT -->
                                            <td>
                                                <div class="d-flex align-items-center gap-3">
                                                    <div class="consultant-avatar">
                                                        <i class="bi bi-person-workspace"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-1 fw-bold text-dark">
                                                            {{ $value->counsellor->first_name ?? 'N/A' }}
                                                            {{ $value->counsellor->last_name ?? 'N/A' }}
                                                        </h6>
                                                        <small class="text-muted">
                                                            Consultant
                                                        </small>
                                                    </div>
                                                </div>
                                            </td>
                                            <!-- TIME -->
                                            <td>
                                                <div class="appointment-time">
                                                    <i class="bi bi-clock-history"></i>
                                                    {{ \Carbon\Carbon::parse($value->start_time)->format('h:i A') }}
                                                </div>
                                            </td>
                                            <!-- STATUS -->
                                            <td class="text-center">
                                                <form action="{{ route('counsellor.booking.status', $value->id) }}"
                                                    method="POST" id="status-form-{{ $value->id }}">
                                                    @csrf
                                                    @php
                                                        $user_role = auth()->user();
                                                        $isRestricted = $user_role->hasRole('user');
                                                        $statusClass = match ($value->status) {
                                                            'pending' => 'status-pending',
                                                            'upcoming' => 'status-upcoming',
                                                            'completed' => 'status-completed',
                                                            'cancelled' => 'status-cancelled',
                                                            default => 'status-default',
                                                        };
                                                    @endphp
                                                    <select name="status" class="status-select {{ $statusClass }}"
                                                        onchange="document.getElementById('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>
                                    @empty
                                        <tr>
                                            <td colspan="4">
                                                <div class="empty-state">
                                                    <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                                                        alt="No Appointment" class="img-fluid mb-4" width="130">
                                                    <h5 class="fw-bold text-dark mb-2">
                                                        No Appointments Today
                                                    </h5>
                                                    <p class="text-muted mb-0">
                                                        There are currently no scheduled appointments for today.
                                                    </p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        <!-- PAGINATION -->
                        @if ($bookings_data->hasPages())
                            <div class="card-footer bg-white border-0 py-3">
                                <div class="d-flex justify-content-center">
                                    {{ $bookings_data->links('pagination::bootstrap-5') }}
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <!-- REVIEWS -->
            {{--
   <div class="col-lg-4">
      <div class="card section-card shadow-sm border-0">
         <!-- HEADER -->
         <div class="card-header bg-white section-header fw-semibold">
            <i class="bi bi-chat-dots text-primary me-2"></i>
            Consultant Reviews
         </div>
         <div class="card-body">
            <!-- OVERALL RATING -->
            <div class="text-center mb-3">
               <h3 class="text-primary">4.8</h3>
               <small class="text-muted">326 Reviews</small>
            </div>
            <hr>
            <!-- REVIEW 1 -->
            <div class="d-flex mb-3">
               <img src="https://i.pravatar.cc/100?img=12" class="rounded-circle me-2" width="40" height="40">
               <div>
                  <strong>Rahul Patel</strong>
                  <!-- Stars -->
                  <div class="text-warning small">
                     <i class="bi bi-star-fill"></i>
                     <i class="bi bi-star-fill"></i>
                     <i class="bi bi-star-fill"></i>
                     <i class="bi bi-star-fill"></i>
                     <i class="bi bi-star-half"></i>
                  </div>
                  <p class="mb-0 text-muted small">
                     Excellent consultation and friendly behavior.
                  </p>
               </div>
            </div>
            <!-- REVIEW 2 -->
            <div class="d-flex mb-3">
               <img src="https://i.pravatar.cc/100?img=20" class="rounded-circle me-2" width="40" height="40">
               <div>
                  <strong>Priya Sharma</strong>
                  <div class="text-warning small">
                     <i class="bi bi-star-fill"></i>
                     <i class="bi bi-star-fill"></i>
                     <i class="bi bi-star-fill"></i>
                     <i class="bi bi-star-fill"></i>
                     <i class="bi bi-star"></i>
                  </div>
                  <p class="mb-0 text-muted small">
                     Very helpful staff and smooth experience.
                  </p>
               </div>
            </div>
         </div>
      </div>
   </div>
   --}}
            <!-- TOP CONSULTANT + SUMMARY -->
            <div class="row g-4">
                <!-- TOP CONSULTANT -->
                <div class="col-lg-8">
                    <div class="card section-card shadow-sm">
                        <div class="card-header bg-white section-header">Top Consultant</div>
                        <div class="card-body">
                            <div class="row text-center">
                                @forelse($top_three_consultants as $index => $c)
                                    @php
                                        $img = $c->profile_image
                                            ? asset('clinic/' . $c->profile_image)
                                            : asset('user.png');
                                    @endphp
                                    <div class="col-md-4 mb-3">
                                        {{-- <span class="badge bg-warning mb-1">#{{ $index+1 }}</span> --}}
                                        <img src="{{ $img }}" class="rounded-circle mb-2" width="80"
                                            height="80" style="object-fit:cover;"
                                            alt="{{ $c->first_name }} {{ $c->last_name }}"
                                            onerror="this.onerror=null;this.src='{{ asset('user.png') }}';">
                                        <h6 class="mb-0">{{ $c->first_name }} {{ $c->last_name }}</h6>
                                        <small class="text-muted">{{ $c->specialization ?? 'Consultant' }}</small>
                                    </div>
                                @empty
                                    <div class="col-12 text-muted">No Consultants</div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
                <!-- BOOKING SUMMARY -->
                <div class="col-lg-4">
                    <div class="card section-card shadow-sm h-100">
                        <div class="card-header bg-white section-header">Booking Summary</div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-2">
                                <span>Total</span>
                                <strong>{{ $bookings ?? 0 }}</strong>
                            </div>
                            <div class="d-flex justify-content-between mb-2 text-success">
                                <span>Completed</span>
                                <strong>{{ $completedBookings ?? 0 }}</strong>
                            </div>
                            <div class="d-flex justify-content-between mb-2 text-danger">
                                <span>Cancelled</span>
                                <strong>{{ $cancelledBookings ?? 0 }}</strong>
                            </div>
                            <div class="mt-3">
                                <small>Success Rate</small>
                                <div class="progress mt-1">
                                    <div class="progress-bar bg-success" role="progressbar"
                                        style="width: {{ $successRate ?? 0 }}%;" aria-valuenow="{{ $successRate ?? 0 }}"
                                        aria-valuemin="0" aria-valuemax="100">{{ $successRate ?? 0 }}%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- MODAL -->
        <div class="modal fade" id="bookingModal">
            <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 class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>User</th>
                                    <th>Consultant</th>
                                    <th>Date</th>
                                    <th>Start</th>
                                    <th>End</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($bookings_data as $key => $value)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $value->user?->first_name }} {{ $value->user?->last_name }}</td>
                                        <td>{{ $value->counsellor?->first_name }} {{ $value->counsellor?->last_name }}
                                        </td>
                                        <td>{{ \Carbon\Carbon::parse($value->appointment_date)->format('d M Y') }}</td>
                                        <td>{{ \Carbon\Carbon::parse($value->start_time)->format('h:i A') }}</td>
                                        <td>{{ \Carbon\Carbon::parse($value->end_time)->format('h:i A') }}</td>
                                        <td>
                                            <form action="{{ route('counsellor.booking.status', $value->id) }}"
                                                method="POST" id="modal-status-form-{{ $value->id }}">
                                                @csrf
                                                <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>
    @endsection