@extends('layouts.main')
@section('content')
    <style>
        .recent-booking-table {
            border-collapse: separate;
            border-spacing: 0 14px;
        }

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

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

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

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

        /* DATE */
        .date-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;
        }

        /* 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: rgb(16 160 225 / 96%);
            color: #0284c7;
        }

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

        .status-cancelled {
            background:#dc3545;
            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;
            color: white;
        }

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

        /* PREMIUM CARDS */
        .info-card {
            background: #fff;
            border-radius: 24px;
            border: none;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
            overflow: hidden;
        }

        .info-card-header {
            background: linear-gradient(135deg, #6366f1, #4f46e5);
            padding: 25px;
            color: #fff;
        }

        .stats-card-premium {
            border-radius: 24px;
            padding: 25px;
            border: none;
            transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .stats-card-premium:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        }

        .stats-card-premium i {
            font-size: 40px;
            opacity: 0.2;
            position: absolute;
            right: 20px;
            bottom: 20px;
        }

        .bg-total { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
        .bg-completed { background: linear-gradient(135deg, #10b981, #059669); }
        .bg-pending { background: linear-gradient(135deg, #f59e0b, #d97706); }
        .bg-cancelled { background: linear-gradient(135deg, #ef4444, #dc2626); }

        .dashboard-title-area {
            margin-bottom: 40px;
        }

        .user-profile-img {
            width: 100px;
            height: 100px;
            border-radius: 30px;
            object-fit: cover;
            border: 4px solid #fff;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

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

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

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

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

            .recent-booking-table tbody td:last-child {
                border-bottom: none;
            }
        }
    </style>
    <div class="container-fluid py-4">
        <!-- Page Title -->
        <div class="dashboard-title-area d-flex justify-content-between align-items-center">
            <div>
                <h1 class="fw-bold text-dark mb-1">User Dashboard</h1>
                <p class="text-muted">Welcome back to your personalized healthcare portal</p>
            </div>
            <div class="d-flex align-items-center gap-3 bg-white p-2 px-3 rounded-pill shadow-sm">
                <i class="bi bi-calendar-check text-primary"></i>
                <span class="fw-bold">{{ now()->format('d M Y') }}</span>
            </div>
        </div>
        <!-- User Information -->
        <div class="info-card mb-5">
            <div class="info-card-header">
                <h5 class="mb-0 fw-bold d-flex align-items-center gap-2">
                    <i class="bi bi-person-badge"></i> Personal Information
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="row align-items-center">
                    <div class="col-lg-auto text-center mb-4 mb-lg-0 pe-lg-4">
                        <img src="{{ asset('user.png') }}" class="user-profile-img">
                    </div>
                    <div class="col-lg">
                        <div class="row g-4">
                            <div class="col-md-4">
                                <label class="text-muted small text-uppercase fw-bold mb-1 d-block">Full Name</label>
                                <p class="fw-bold text-dark fs-5 mb-0">{{ $user->first_name }} {{ $user->last_name }}</p>
                            </div>
                            <div class="col-md-4">
                                <label class="text-muted small text-uppercase fw-bold mb-1 d-block">Email Address</label>
                                <p class="fw-bold text-dark fs-5 mb-0">{{ $user->email }}</p>
                            </div>
                            <div class="col-md-4">
                                <label class="text-muted small text-uppercase fw-bold mb-1 d-block">Phone Number</label>
                                <p class="fw-bold text-dark fs-5 mb-0">{{ $user->phone_number ?? '-' }}</p>
                            </div>
                            <div class="col-md-4">
                                <label class="text-muted small text-uppercase fw-bold mb-1 d-block">Country</label>
                                <p class="fw-bold text-dark fs-5 mb-0">{{ $user->country ?? '-' }}</p>
                            </div>
                            <div class="col-md-4">
                                <label class="text-muted small text-uppercase fw-bold mb-1 d-block">Account Status</label>
                                <span class="badge bg-success-subtle text-success px-3 py-2 rounded-pill fw-bold">
                                    {{ ucfirst($user->status) }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Dashboard Stats -->
        <div class="row g-4 mb-5">
            <div class="col-md-3">
                <div class="stats-card-premium bg-total" data-bs-toggle="modal"
                    data-bs-target="#bookingModal" onclick="filterBookings('all')" style="cursor:pointer;">
                    <small class="text-white-50 text-uppercase fw-bold">Total Bookings</small>
                    <h2 class="fw-bold mb-0">{{ $total_bookings_data }}</h2>
                    <i class="bi bi-grid-fill"></i>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card-premium bg-completed" data-bs-toggle="modal"
                    data-bs-target="#bookingModal" onclick="filterBookings('completed')" style="cursor:pointer;">
                    <small class="text-white-50 text-uppercase fw-bold">Completed</small>
                    <h2 class="fw-bold mb-0">{{ $completed_bookings }}</h2>
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card-premium bg-pending" data-bs-toggle="modal"
                    data-bs-target="#bookingModal" onclick="filterBookings('upcoming')" style="cursor:pointer;">
                    <small class="text-white-50 text-uppercase fw-bold">Upcoming</small>
                    <h2 class="fw-bold mb-0">{{ $upcoming_bookings }}</h2>
                    <i class="bi bi-clock-fill"></i>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card-premium bg-cancelled" data-bs-toggle="modal"
                    data-bs-target="#bookingModal" onclick="filterBookings('cancelled')" style="cursor:pointer;">
                    <small class="text-white-50 text-uppercase fw-bold">Cancelled</small>
                    <h2 class="fw-bold mb-0">{{ $cancelled_bookings }}</h2>
                    <i class="bi bi-x-circle-fill"></i>
                </div>
            </div>
        </div>
        <!-- Upcoming Appointments -->
        <!-- Activity Table -->
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white border-0">
                <h6 class="fw-semibold mb-0">📋 Upcoming Appointments</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <div class="table-responsive">
                        <table class="table align-middle recent-booking-table mb-0">
                            <thead>
                                <tr>
                                    <th>User</th>
                                    <th width="180">Appointment Date</th>
                                    <th width="160" class="text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($bookings_data as $booking)
                                    <tr>
                                        <!-- USER -->
                                        <td>
                                            <div class="d-flex align-items-center gap-3">
                                                <!-- AVATAR -->
                                                <div class="booking-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 ?? 'N/A' }}
                                                    </h6>
                                                    <small class="text-muted">
                                                        Booking User
                                                    </small>
                                                </div>
                                            </div>
                                        </td>
                                        <!-- DATE -->
                                        <td>
                                            <div class="date-box">
                                                <i class="bi bi-calendar-event-fill me-2"></i>
                                                {{ \Carbon\Carbon::parse($booking->appointment_date)->format('d M Y') }}
                                            </div>
                                        </td>
                                        <!-- STATUS -->
                                        <td class="text-center">
                                            <form action="{{ route('counsellor.booking.status', $booking->id) }}"
                                                method="POST" id="status-form-{{ $booking->id }}">
                                                @csrf
                                                @php
                                                    $user = auth()->user();
                                                    $isRestricted = $user->hasRole('user');
                                                @endphp
                                                <select name="status"
                                                    class="status-select status-{{ $booking->status ?? 'default' }}"
                                                    onchange="document.getElementById('status-form-{{ $booking->id }}').submit()">
                                                    @if (!$isRestricted)
                                                        <option value="pending"
                                                            {{ $booking->status == 'pending' ? 'selected' : '' }}>
                                                            Pending</option>
                                                        <option value="upcoming"
                                                            {{ $booking->status == 'upcoming' ? 'selected' : '' }}>
                                                            Upcoming</option>
                                                        <option value="completed"
                                                            {{ $booking->status == 'completed' ? 'selected' : '' }}>
                                                            Completed</option>
                                                    @endif
                                                    <option value="cancelled"
                                                        {{ $booking->status == 'cancelled' ? 'selected' : '' }}>
                                                        Cancelled</option>
                                                    @if ($isRestricted && $booking->status != 'cancelled')
                                                        <option value="{{ $booking->status }}" selected>
                                                            {{ ucfirst($booking->status) }}</option>
                                                    @endif
                                                </select>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3">
                                            <div class="empty-state">
                                                <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                                                    width="120" class="mb-3">
                                                <h5>No Bookings Found</h5>
                                                <p class="text-muted mb-0">
                                                    No recent booking records available.
                                                </p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </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" id="modalTitle">📅 Bookings</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table align-middle booking-history-table mb-0">
                            <thead>
                                <tr>
                                    <th width="70">#ID</th>
                                    <th>User</th>
                                    <th>Consultant</th>
                                    <th>Appointment Date</th>
                                    <th>Time Slot</th>
                                    <th class="text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($bookings_data as $key => $value)
                                    <tr data-status="{{ strtolower($value->status) }}">
                                        <td>
                                            <span class="fw-bold text-primary">#{{ $key + 1 }}</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center gap-3">
                                                <div class="booking-avatar">
                                                    {{ strtoupper(substr($value->user->first_name ?? 'U', 0, 1)) }}</div>
                                                <div>
                                                    <h6 class="mb-0 fw-semibold text-dark">
                                                        {{ $value->user->first_name ?? 'N/A' }}</h6>
                                                    <small class="text-muted">User</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center gap-3">
                                                <div class="doctor-avatar">
                                                    {{ strtoupper(substr($value->counsellor->first_name ?? 'D', 0, 1)) }}
                                                </div>
                                                <div>
                                                    <h6 class="mb-0 fw-semibold text-dark">
                                                        {{ $value->counsellor->first_name ?? 'N/A' }}</h6>
                                                    <small class="text-muted">Consultant</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <h6 class="mb-0 fw-semibold text-dark">
                                                    {{ \Carbon\Carbon::parse($value->appointment_date)->format('d M Y') }}
                                                </h6>
                                                <small
                                                    class="text-muted">{{ \Carbon\Carbon::parse($value->appointment_date)->format('l') }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <h6 class="mb-0 fw-semibold text-dark">
                                                    {{ \Carbon\Carbon::parse($value->start_time)->format('h:i A') }} -
                                                    {{ \Carbon\Carbon::parse($value->end_time)->format('h:i A') }}</h6>
                                                <small class="text-muted">Session Time</small>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <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>
                                @empty
                                    <tr>
                                        <td colspan="6">
                                            <div class="empty-state">
                                                <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                                                    width="120" class="mb-3">
                                                <h5>No Booking Records Found</h5>
                                                <p class="text-muted mb-0">No booking history available right now.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function filterBookings(status) {
            let rows = document.querySelectorAll("#bookingModal tbody tr");
            let title = document.getElementById("modalTitle");

            title.innerText = status === 'all' ?
                "📅 All Bookings" :
                "📅 " + status.charAt(0).toUpperCase() + status.slice(1) + " Bookings";

            rows.forEach(row => {
                let rowStatus = row.dataset.status;
                row.style.display = (status === 'all' || rowStatus === status) ? "" : "none";
            });
        }
    </script>
@endsection