@foreach ($barbers as $barber)
    <li>
        <div class="d-flex gap-3 mb-2">
            <img src="{{ asset($barber->image ?? 'assets/boy.png') }}" class="img-fluid rounded-circle" width="28"
                height="20" alt="">
            <h5>{{ $barber->name }}</h5>
        </div>
        @if (@$barber->InProgressBookings)
            <div class=" booking-card">
                <div class="d-flex justify-content-between mb-5">
                    <h5 class="text-white">
                        {{ @$barber->InProgressBookings->getUser->first_name . ' ' . @$barber->InProgressBookings->getUser->last_name }}
                    </h5>
                    <h5 class="text-white">${{ $barber->InProgressBookings->total_amount }}</h5>
                </div>
                {{-- <div class="d-flex justify-content-between">
                    <p class="mb-1 text-white booking-card-text"> --}}
                @php        $services = []; @endphp
                @foreach ($barber->InProgressBookings->services as $service)
                    @if ($service->userServices)
                        @foreach ($service->UserServices as $userService)
                            @php $services[] = $userService->name; @endphp
                        @endforeach
                    @endif
                @endforeach
                {{-- {{ implode(' & ', $services) }} --}}
                {{-- @if (empty($services))
                            {{ __('translations.No associated user services') }}
                        @endif
                    </p>
                </div> --}}
                <div class="">
                    <span class="text-white">
                        {{ __('Slot time') }}: {{-- {{ $barber->InProgressBookings->payment_status == 'pending' ? 'Not Paid' : 'Paid' }} --}}
                        {{ $barber->InProgressBookings->start_time . ' - ' . $barber->InProgressBookings->end_time }}
                    </span><br>
                    <span class="text-white mb-0">
                        @if (empty($services))
                            {{ __('translations.No associated user services') }}
                        @else
                            {{ implode(' & ', $services) }}: {{ $barber->InProgressBookings->total_time }}
                            {{ __('translations.mins') }}
                        @endif
                    </span>
                </div>
            </div>
            <div class="booking--btn">
                <button class="booking-card-btn"
                    onclick="event.preventDefault(); completeBooking({{ $barber->InProgressBookings->id }});">{{ __('translations.Complete') }}</button>
            </div>
        @else
            <div class="d-flex justify-content-between booking-card bg-white border-black">
            </div>
            <div class="booking-card-bt">
                <button class="booking-card-btn"
                    onclick="event.preventDefault(); startPendingBookings({{ $barber->PendingBookings }});">{{ __('translations.Start') }}</button>
            </div>
        @endif

        @foreach ($barber->PendingBookings as $booking)
            <div id="booking-{{ $booking->id }}" class="booking mb-3" draggable="true" ondragstart="drag(event)">
                @if ($booking->ticket)
                    <span class="badge"
                        style="background-color: #343a40; color: #ffffff !important;">{{ $booking->ticket }}</span>
                @else
                    <span class="badge" style="background-color: #343a40; color: #ffffff !important;"> </span>
                @endif
                <div class="timeline-panel">
                    <h5>
                        Patient: {{ @$booking->getUser->first_name . ' ' . @$booking->getUser->last_name }}
                    </h5>
                    <div>
                        <p>{{ __('translations.Doctor') }}: {{ @$booking->Doctor->name }}</p>
                    </div>
                    <div class="d-flex">
                        <p>
                            @php        $services = []; @endphp
                            @foreach ($booking->services as $service)
                                @if ($service->userServices)
                                    @foreach ($service->UserServices as $userService)
                                        @php                    $services[] = $userService->name; @endphp
                                    @endforeach
                                @endif
                            @endforeach
                            {{ implode(' & ', $services) }}
                            @if (empty($services))
                                {{ __('translations.No associated user services') }}
                            @endif
                        </p>
                    </div>
                    <div class="ticket-status">
                        <span
                            class="badge bg-light-blue text-white">{{ $booking->start_time . ' - ' . $booking->end_time }}</span>
                        <span class="badge bg-white">{{ $booking->date }}</span>
                    </div>
                </div>
                <div>
                    <p class="ms-auto text-black">${{ @$booking->total_amount }}</p>
                </div>
            </div>
        @endforeach
    </li>
@endforeach