@extends('layouts.main')

@section('content')
    <style>
        body {
            background: #f4f7fb;
        }

        /* ================= PAGE ================= */

        .page-title {
            font-size: 28px;
            font-weight: 700;
            color: #0f172a;
        }

        .page-subtitle {
            color: #64748b;
            font-size: 14px;
        }

        /* ================= CARD ================= */

        .booking-card {
            border: none;
            border-radius: 24px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
        }

        .booking-header {
            padding: 22px 25px;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .booking-header h5 {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            color: #0f172a;
        }

        /* ================= TABLE ================= */

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

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

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

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

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

        /* ================= USER ================= */

        .booking-user {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .booking-avatar {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 700;
            flex-shrink: 0;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.25);
        }

        .user-name {
            font-size: 15px;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 2px;
        }

        .user-email {
            font-size: 12px;
            color: #94a3b8;
        }

        /* ================= DATE TIME ================= */

        .date-text,
        .time-text {
            font-size: 14px;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 2px;
        }

        .small-muted {
            color: #94a3b8;
            font-size: 12px;
        }

        /* ================= AMOUNT ================= */

        .fees-box {
            background: rgba(16, 185, 129, 0.12);
            color: #059669;
            padding: 10px 14px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            font-weight: 700;
            font-size: 14px;
        }

        /* ================= STATUS ================= */

        .status-badge {
            padding: 8px 16px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

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

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

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

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

        /* ================= DELETE ================= */

        .delete-btn {
            width: 42px;
            height: 42px;
            border: none;
            border-radius: 12px;
            background: #fee2e2;
            color: #dc2626;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
        }

        .delete-btn:hover {
            background: #dc2626;
            color: #fff;
        }

        /* ================= EMPTY ================= */

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

        .empty-state img {
            width: 120px;
            margin-bottom: 15px;
        }

        .empty-state h5 {
            font-weight: 700;
            color: #0f172a;
        }

        .empty-state p {
            color: #94a3b8;
            margin-bottom: 0;
        }

        /* ================= MOBILE ================= */

        @media(max-width:768px) {

            .booking-table thead {
                display: none;
            }

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

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

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

            .booking-user {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>

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

        {{-- PAGE HEADER --}}

        <div class="d-flex justify-content-between align-items-center mb-4">

            <div>
                <h2 class="page-title mb-1">
                    My Bookings
                </h2>

                <p class="page-subtitle mb-0">
                    Logged in user booking history
                </p>
            </div>

        </div>

        {{-- SUCCESS MESSAGE --}}

        @if (session('success'))
            <div class="alert alert-success border-0 rounded-4 shadow-sm">
                {{ session('success') }}
            </div>
        @endif

        {{-- BOOKINGS CARD --}}

        <div class="card booking-card">

            <div class="booking-header">

                <h5>
                    Booking List
                </h5>

            </div>

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

                <div class="table-responsive">

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

                        <thead>

                            <tr>
                                <th>#</th>
                                <th>User</th>
                                <th>Date</th>
                                <th>Time</th>
                                <th>Amount</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Action</th>
                            </tr>

                        </thead>

                        <tbody>

                            @php
                                $myBookings = $bookings;
                            @endphp

                            @forelse($myBookings as $key => $b)
                                <tr>

                                    {{-- ID --}}

                                    <td>
                                        <span class="fw-bold text-primary">
                                            #{{ $key + 1 }}
                                        </span>
                                    </td>

                                    {{-- USER --}}

                                    <td>

                                        <div class="booking-user">

                                            <div class="booking-avatar">
                                                {{ strtoupper(substr($b->user->first_name ?? 'U', 0, 1)) }}
                                            </div>

                                            <div>

                                                <div class="user-name">
                                                    {{ $b->user->first_name ?? 'N/A' }}
                                                    {{ $b->user->last_name ?? '' }}
                                                </div>

                                                <div class="user-email">
                                                    {{ $b->user->email ?? '' }}
                                                </div>

                                            </div>

                                        </div>

                                    </td>

                                    {{-- DATE --}}

                                    <td>

                                        <div class="date-text">
                                            {{ \Carbon\Carbon::parse($b->date)->format('d M Y') }}
                                        </div>

                                        <div class="small-muted">
                                            {{ \Carbon\Carbon::parse($b->date)->format('l') }}
                                        </div>

                                    </td>

                                    {{-- TIME --}}

                                    <td>

                                        <div class="time-text">

                                            @php
                                                [$startTime, $endTime] = array_pad(
                                                    explode(' - ', (string) $b->time),
                                                    2,
                                                    null,
                                                );
                                            @endphp

                                            {{ $startTime ? \Carbon\Carbon::parse($startTime)->format('h:i A') : 'N/A' }}

                                            -

                                            {{ $endTime ? \Carbon\Carbon::parse($endTime)->format('h:i A') : 'N/A' }}

                                        </div>

                                        <div class="small-muted">
                                            Session Time
                                        </div>

                                    </td>

                                    {{-- AMOUNT --}}

                                    <td>

                                        <div class="fees-box">

                                            <i class="bi bi-cash-coin"></i>

                                            <span class="ms-2">
                                                ₹ {{ $b->fees ?? ($b->amount ?? 0) }}
                                            </span>

                                        </div>

                                    </td>

                                    {{-- STATUS --}}

                                    <td class="text-center">
                                        <form action="{{ route('counsellor.booking.status', $b->id) }}" method="POST"
                                            id="status-form-{{ $b->id }}">
                                            @csrf
                                            @php
                                                $user = auth()->user();
                                                $isRestricted = $user->hasRole('user');
                                            @endphp
                                            <select name="status" class="status-select status-{{ $b->status ?? 'default' }}"
                                                onchange="document.getElementById('status-form-{{ $b->id }}').submit()">
                                                @if (!$isRestricted)
                                                    <option value="pending" {{ $b->status == 'pending' ? 'selected' : '' }}>
                                                        Pending</option>
                                                    <option value="upcoming" {{ $b->status == 'upcoming' ? 'selected' : '' }}>
                                                        Upcoming</option>
                                                    <option value="completed" {{ $b->status == 'completed' ? 'selected' : '' }}>
                                                        Completed</option>
                                                @endif
                                                <option value="cancelled" {{ $b->status == 'cancelled' ? 'selected' : '' }}>
                                                    Cancelled</option>
                                                @if ($isRestricted && $b->status != 'cancelled')
                                                    <option value="{{ $b->status }}" selected>
                                                        {{ ucfirst($b->status) }}</option>
                                                @endif
                                            </select>
                                        </form>
                                    </td>

                                    {{-- ACTION --}}

                                    <td class="text-center">

                                        <form action="{{ route('counsellor.booking.destroy', $b->id) }}" method="POST"
                                            onsubmit="return confirm('Delete booking?')">

                                            @csrf
                                            @method('DELETE')

                                            <button type="submit" class="delete-btn">

                                                <i class="bi bi-trash"></i>

                                            </button>

                                        </form>

                                    </td>

                                </tr>

                            @empty

                                <tr>

                                    <td colspan="7">

                                        <div class="empty-state">

                                            <img src="{{ asset('uploads/default/no-data.png') }}"
                                                onerror="this.src='https://cdn-icons-png.flaticon.com/512/7486/7486754.png'">

                                            <h5>
                                                No Bookings Found
                                            </h5>

                                            <p>
                                                Logged in user has no bookings available.
                                            </p>

                                        </div>

                                    </td>

                                </tr>
                            @endforelse

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>
@endsection