@if (count($appointmentsGroupedByDoctors) > 0)
    <ul class="nav nav-tabs" role="tablist">
        @foreach ($appointmentsGroupedByDoctors as $d => $tab)
            <li class="nav-item"><a class="nav-link @if ($loop->index == 0) active @endif" role="tab" data-toggle="tab" href="#page-{{ $loop->index }}">{{ $d }}</a></li>
        @endforeach
    </ul>
    <div class="tab-content">
        @foreach ($appointmentsGroupedByDoctors as $date => $doc)
            <div id="page-{{ $loop->index }}" class="tab-pane fade @if ($loop->index == 0) active show @endif" role="tabpanel">
                <div class="col col-md-12 bg-info text-center">
                    {{-- <span class="col-md-12 text-light pt-2">{{ \Carbon\Carbon::parse($doc)->format('d-M-Y') }}</span>
                                <span class="col-md-12 text-light pb-2">({{ \Carbon\Carbon::parse($doc)->format('l') }})</span> --}}
                </div>
                <div class="card" style="height: 80vh;">
                    <div id="capture" class="cd-schedule loading custom-scrollbar-css" style="overflow-y: scroll;">
                        <div class="timeline" style="min-width: {{ $doc->count() * 100 . 'px' }}">
                            <ul>
                                @foreach ($intervals as $interval)
                                    <li><span style="position: sticky; left: 0;">{{ $interval->format('H:i') }}</span></li>
                                @endforeach
                            </ul>
                        </div> <!-- .timeline -->

                        <div id="main-scheduler" class="events main-scheduler">
                            <ul class="row" style="height: {{ $height . 'px' }} !important; min-width: {{ $doc->count() * 100 . 'px' }}">

                                @forelse ($doc as $key_date => $appointmentsGroupedByDoctor)
                                    <li class="events-group col" style="min-width:100px;">
                                        <div id="calendar-header" class="ca-fixed top-info bg-info text-light border border-bottom border border-warning rounded-bottom">

                                            @php
                                                $doc_start_time = $appointmentsGroupedByDoctor->first()->get_doctor_schedule($appointmentsGroupedByDoctor->first()->doctor->id, \Carbon\Carbon::parse($key_date)->format('l'))['start_time'] ?? '00:00';
                                                $doc_end_time = $appointmentsGroupedByDoctor->first()->get_doctor_schedule($appointmentsGroupedByDoctor->first()->doctor->id, \Carbon\Carbon::parse($key_date)->format('l'))['end_time'] ?? '00:00';
                                            @endphp
                                            <span class="m-0 p-0">
                                                <span>{{ \Carbon\Carbon::parse($key_date)->format('d-M-Y') }}{{-- {{ optional($appointmentsGroupedByDoctor->first()->doctor)->name }} --}}</span>
                                                <br>
                                                {{-- <span class="text-sm">({{ \Carbon\Carbon::parse($doc_start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($doc_end_time)->format('H:i') }})</span> --}}
                                            </span>

                                        </div>
                                        <ul>
                                            @foreach ($appointmentsGroupedByDoctor as $item)
                                                <li class="single-event shadow cd-border-left rounded show-appointment" data-start="{{ \Carbon\Carbon::parse($doc_start_time)->format('H:i') }}" data-end="{{ \Carbon\Carbon::parse($doc_end_time)->format('H:i') }}" data-content="" data-event="event-4"
                                                    style="opacity: 0.2; background-color: #5f75af; border: 2px solid black; pointer-events: none;">

                                                </li>
                                                <li class="single-event cd-border-left rounded show-appointment" data-toggle="modal" data-target="#exampleModal" data-id="{{ $item->id }}"
                                                    style="border-color: {{ $item->appointment_status_id ? $item->appointment_status->color_code : green }} !important; 
                                                                background: {{ $item->appointment_type_id ? $item->appointment_type->color_code : black }}; z-index: 9;"
                                                    data-start="{{ \Carbon\Carbon::parse($item->start_time)->format('H:i') }}" data-end="{{ \Carbon\Carbon::parse($item->end_time)->format('H:i') }}" data-content="" data-event="event-4">
                                                    <a href="#0" class="overflow-hidden">
                                                        <em class="event-name">
                                                            @if (optional($item->user)->memo)
                                                                <span class="badge badge-pill badge-danger cd-memo-badge">M</span>
                                                            @endif {{ optional($item->user)->name ? optional($item->user)->name : 'Patient Deleted' }}
                                                        </em>
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </li>
                                @empty
                                    <li class="events-group col">
                                        <div class="ca-fixed top-info"><span>No appointment found try changing doctor and date</span></div>
                                    </li>
                                @endforelse

                            </ul>
                        </div>


                        <div class="event-modal">

                            <!--
                                <header class="header">
                                   
                                    <div class="content">
                                        
                                    </div>

                                    <div class="header-bg"></div>
                                </header>

                                <div class="body">
                                    <div class="event-info col"></div>


                                    
                                    <div class="body-bg"></div>
                                </div>
                                <a href="#0" class="close"></a>
                                -->
                        </div>
                        <div class="cover-layer"></div>
                    </div> <!-- .cd-schedule -->
                </div>
            </div>
        @endforeach
    </div>
@else
    <div class="card" style="height: 600px;">
        <div class="cd-schedule loading" style="overflow-y: scroll;">
            <div class="timeline" style="min-width: {{ $width . 'px' }}">
                <ul>
                    @foreach ($intervals as $interval)
                        <li><span>{{ $interval->format('H:i') }}</span></li>
                    @endforeach
                </ul>
            </div> <!-- .timeline -->

            <div id="main-scheduler" class="events main-scheduler">
                <ul class="row" style="height: {{ $height . 'px' }} !important; min-width: {{ $width . 'px' }}">

                    @forelse ($appointmentsGroupedByDoctors as $appointmentsGroupedByDoctor)
                        <li class="events-group col" style=" min-width: 150px">
                            <div id="calendar-header" class="ca-fixed top-info bg-info text-light"><span>{{ $appointmentsGroupedByDoctor->first()->doctor->name }}</span></div>
                            <ul>
                                @foreach ($appointmentsGroupedByDoctor as $item)
                                    <li class="single-event cd-border-left rounded show-appointment" data-toggle="modal" data-target="#exampleModal" data-id="{{ $item->id }}"
                                        style="border-color: {{ $item->appointment_status_id ? $item->appointment_status->color_code : green }} !important; 
                                                           background: {{ $item->appointment_type_id ? $item->appointment_type->color_code : black }};"
                                        data-start="{{ \Carbon\Carbon::parse($item->start_time)->format('H:i') }}" data-end="{{ \Carbon\Carbon::parse($item->end_time)->format('H:i') }}" data-content="" data-event="event-4">
                                        <a href="#0" class="overflow-hidden">
                                            <em class="event-name">{{ $item->user->name }}</em>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </li>
                    @empty
                        <li class="events-group col">
                            <div class="ca-fixed top-info"><span>No appointment found try changing doctor and date</span></div>
                        </li>
                    @endforelse

                </ul>
            </div>


            <div class="event-modal">

            </div>
            <div class="cover-layer"></div>
        </div> <!-- .cd-schedule -->
    </div>
@endif