@extends('layouts.main')

@section('content')
    
<div class="container-fluid">

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

        <div>
            {{-- <h3 class="fw-bold mb-1">
                All Bookings
            </h3> --}}

            {{-- <p class="text-muted mb-0">
                Manage and monitor all booking records.
            </p> --}}
        </div>

        <span class="badge bg-primary px-4 py-2 rounded-pill fs-6">
            {{ $bookings->count() }} Total Bookings
        </span>

    </div>

    <!-- Booking Table Card -->
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">

        <!-- Card Header -->
        <div class="card-header bg-white border-0 p-4">

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

                <div>
                    <h5 class="fw-bold mb-1">
                        Booking List
                    </h5>

                    <p class="text-muted small mb-0">
                        View all counsellor appointment bookings.
                    </p>
                </div>

            </div>

        </div>

        <!-- Table -->
        <div class="table-responsive">

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

                <thead class="table-light">

                    <tr>
                        <th>#ID</th>
                        <th>User</th>
                        <th>Counsellor</th>
                        <th>Date</th>
                        <th>Time</th>
                        <th>Status</th>
                        {{-- <th class="text-end">Action</th> --}}
                    </tr>

                </thead>

                <tbody>

                    @forelse($bookings as $b)

                    <tr>

                        <!-- ID -->
                        <td>
                            <span class="fw-bold text-primary">
                                #{{ $b->id }}
                            </span>
                        </td>

                        <!-- USER -->
                        <td>

                            <div class="d-flex align-items-center gap-3">

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

                                <div>
                                    <h6 class="mb-0 fw-semibold">
                                        {{ $b->user->first_name ?? 'Guest' }}
                                    </h6>

                                    <small class="text-muted">
                                        {{ $b->user->email ?? 'No Email' }}
                                    </small>
                                </div>

                            </div>

                        </td>

                        <!-- COUNSELLOR -->
                        <td>

                            <div class="d-flex align-items-center gap-2">

                                <div class="doctor-avatar">
                                    {{ strtoupper(substr(optional($b->counsellor)->first_name ?? 'C',0,1)) }}
                                </div>

                                <div>
                                    <h6 class="mb-0 fw-semibold">
                                        {{ optional($b->counsellor)->first_name ?? 'N/A' }}
                                    </h6>

                                    <small class="text-muted">
                                        Counsellor
                                    </small>
                                </div>

                            </div>

                        </td>

                        <!-- DATE -->
                        <td>

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

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

                        </td>

                        <!-- TIME -->
                        <td>

                            <span class="time-badge">

                                {{ \Carbon\Carbon::parse($b->start_time)->format('h:i A') }}

                                -

                                {{ \Carbon\Carbon::parse($b->end_time)->format('h:i A') }}

                            </span>

                        </td>

                        <!-- STATUS -->
                        <td>

                            @if($b->status == 'pending')

                                <span class="badge bg-warning text-dark px-3 py-2 rounded-pill">
                                    Pending
                                </span>

                            @elseif($b->status == 'confirmed')

                                <span class="badge bg-success px-3 py-2 rounded-pill">
                                    Confirmed
                                </span>

                            @elseif($b->status == 'cancelled')

                                <span class="badge bg-danger px-3 py-2 rounded-pill">
                                    Cancelled
                                </span>

                            @else

                                <span class="badge bg-info text-dark px-3 py-2 rounded-pill">
                                    {{ ucfirst($b->status) }}
                                </span>

                            @endif

                        </td>

                        <!-- ACTION -->
                        <td class="text-end">

                            <div class="d-flex justify-content-end gap-2">

                                <!-- View -->
                                {{-- <a href="#"
                                   class="btn btn-sm btn-light border rounded-3 px-3">

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

                                </a> --}}

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

                                    @csrf
                                    @method('DELETE')

                                    <button type="submit"
                                            class="btn btn-sm btn-danger rounded-3 px-3">

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

                                    </button>

                                </form> --}}

                            </div>

                        </td>

                    </tr>

                    @empty

                    <tr>

                        <td colspan="7">

                            <div class="text-center py-5">

                                <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                                     width="120"
                                     class="mb-3">

                                <h5 class="fw-bold">
                                    No Bookings Found
                                </h5>

                                <p class="text-muted mb-0">
                                    No booking records available right now.
                                </p>

                            </div>

                        </td>

                    </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>

<style>

.custom-table thead th{
    font-size:14px;
    font-weight:700;
    padding:18px;
    border-bottom:1px solid #eee;
    color:#495057;
}

.custom-table tbody td{
    padding:18px;
    vertical-align:middle;
    border-bottom:1px solid #f1f1f1;
}

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

.user-avatar,
.doctor-avatar{
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:700;
    font-size:16px;
}

.user-avatar{
    background:linear-gradient(135deg,#0d6efd,#5b9cff);
}

.doctor-avatar{
    background:linear-gradient(135deg,#198754,#54d38a);
}

.time-badge{
    background:#f4f6f9;
    padding:8px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    color:#495057;
}

</style>

@endsection