@if (count($appointmentsGroupedByDoctors) > 0)
    <div>

        <div>
            <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; overflow-x: scroll;">
                    <div class="timeline" style="min-width: {{ $width * $estimate_width . 'px' }};">
                        <ul>
                            @foreach ($intervals as $interval)
                                <li><span style="position: sticky; left: 0;">{{ $interval->format('h:i A') }}</span></li>
                            @endforeach
                        </ul>
                    </div> <!-- .timeline -->

                    <div id="main-scheduler" class="events main-scheduler">

                        <ul class="row" style="height: {{ $height . 'px' }} !important;">

                            @if ($diff_in_days > 1)
                                <ul class="eventsgroup" style="display: inline-flex; width: 100%">
                                    @foreach (array_slice($appointmentsGroupedByDoctors, 0, 3, true) as $doctor_id => $appointmentsByDate)
                                        {{-- <ul class="eventsgroup" style="display: {{ $diff_in_days > 9 ? 'inline-flex' : 'contents'}}; width: 100%"> --}}

                                        @if (request()->view_selector != 'day')
                                            @if (count(request()->doctor_id) > 1)
                                                @forelse (array_slice($appointmentsByDate,0,7,true) as $date => $appointments)
                                                    <li class="events-group col" style="min-width:110px;">
                                                        <div id="calendar-headers" class="ca-fixed top-info bg-info text-light border border-bottom border border-warning rounded-bottom">


                                                            <span class="m-0 p-0">
                                                                <span class="text-sm text-nowrap">{{ Str::limit(\App\Models\User::where('id', $doctor_id)->first(['id', 'name'])->name ?? 'Deleted Therapist', 12) }}</span>
                                                                <br>
                                                                <span class="text-sm font-weight-bold">{{ \Carbon\Carbon::parse($date)->format('d-M-Y') }}</span>
                                                            </span>

                                                        </div>
                                                        <ul ondrop="drop(event)" ondragover="allowDrop(event)" data-doctor-id="{{ $doctor_id }}" data-appointment-date="{{ $date }}">
                                                            @php
                                                                $doc_start_time = $appointments['schedule']->start_time ?? '0:0';
                                                                $doc_end_time = $appointments['schedule']->end_time ?? '0:0';

                                                                $startTime = \Carbon\Carbon::parse('08:00 AM');
                                                                $interval = 1;
                                                            @endphp

                                                            @for ($i = 0; $i < 720; $i += $interval)
                                                                @php
                                                                    $time = $startTime->copy()->addMinutes($i);
                                                                    $topPosition = $i * 1;
                                                                @endphp

                                                                <div class="time-slot-marker" data-tippy-content="{{ $time->format('h:i A') }}" title="" style="top: {{ $topPosition }}px; height: 1px;" data-time="{{ $time->format('H:i') }}"></div>
                                                            @endfor

                                                            <li class="single-event shadow cd-border-left rounded" 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>

                                                            @foreach ($appointments['appointments'] as $appointment)
                                                                @if ($appointment)
                                                                    <li id="{{ 'dragable-event-' . $appointment->id }}" class="single-event cd-border-left rounded show-appointment" draggable="true" ondragstart="drag(event)" data-toggle="modal" data-target="#exampleModal" data-id="{{ $appointment->id }}"
                                                                        style="border-color: {{ $appointment->appointment_status_id ? $appointment->appointment_status->color_code : green }} !important; 
                                                            background: {{ $appointment->appointment_type_id ? $appointment->appointment_type->color_code : black }}; z-index: 9;"
                                                                        data-start="{{ \Carbon\Carbon::parse($appointment->start_time)->format('H:i') }}" data-end="{{ \Carbon\Carbon::parse($appointment->end_time)->format('H:i') }}" data-content="" data-event="event-4">
                                                                        <a href="#0" class="overflow-hidden">
                                                                            <em class="event-name">
                                                                                @if (optional($appointment->user)->memo)
                                                                                    <span class="badge badge-pill badge-danger cd-memo-badge">M</span>
                                                                                @endif {{ optional($appointment->user)->name ? optional($appointment->user)->name : 'Patient Deleted' }}
                                                                            </em>
                                                                        </a>
                                                                        <div class="resizable-handle"></div>
                                                                        {{-- <div class="resizer"></div> --}}
                                                                    </li>
                                                                @endif
                                                            @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
                                            @else
                                                @forelse (array_slice($appointmentsByDate,0,30,true) as $date => $appointments)
                                                    <li class="events-group col" style="min-width:110px;">
                                                        <div id="calendar-headers" class="ca-fixed top-info bg-info text-light border border-bottom border border-warning rounded-bottom">
                                                            <span class="m-0 p-0">
                                                                <span class="text-sm text-nowrap">{{ Str::limit(\App\Models\User::where('id', $doctor_id)->first(['id', 'name'])->name ?? 'Deleted Therapist', 12) }}</span>
                                                                <br>
                                                                <span class="text-sm font-weight-bold">{{ \Carbon\Carbon::parse($date)->format('d-M-Y') }}</span>
                                                            </span>
                                                        </div>
                                                        <ul ondrop="drop(event)" ondragover="allowDrop(event)" data-doctor-id="{{ $doctor_id }}" data-appointment-date="{{ $date }}">
                                                            @php
                                                                $doc_start_time = $appointments['schedule']->start_time ?? '0:0';
                                                                $doc_end_time = $appointments['schedule']->end_time ?? '0:0';

                                                                $startTime = \Carbon\Carbon::parse('08:00 AM');
                                                                $interval = 1;
                                                            @endphp

                                                            @for ($i = 0; $i < 720; $i += $interval)
                                                                @php
                                                                    $time = $startTime->copy()->addMinutes($i);
                                                                    $topPosition = $i * 1;
                                                                @endphp

                                                                

                                                                <div class="time-slot-marker" data-tippy-content="{{ $time->format('h:i A') }}" title="" style="top: {{ $topPosition }}px; height: 1px;" data-time="{{ $time->format('H:i') }}"></div>
                                                            @endfor

                                                            <li class="single-event shadow cd-border-left rounded" 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>

                                                            @foreach ($appointments['appointments'] as $appointment)
                                                                @if ($appointment)
                                                                    <li id="{{ 'dragable-event-' . $appointment->id }}" class="single-event cd-border-left rounded show-appointment" draggable="true" ondragstart="drag(event)" ondragend="mouseMoved(event)" data-toggle="modal" data-target="#exampleModal" data-id="{{ $appointment->id }}"
                                                                        style="border-color: {{ $appointment->appointment_status_id ? $appointment->appointment_status->color_code : green }} !important; 
                                                            background: {{ $appointment->appointment_type_id ? $appointment->appointment_type->color_code : black }}; z-index: 9;"
                                                                        data-start="{{ \Carbon\Carbon::parse($appointment->start_time)->format('H:i') }}" data-end="{{ \Carbon\Carbon::parse($appointment->end_time)->format('H:i') }}" data-content="" data-event="event-4">
                                                                        <a href="#0" class="overflow-hidden">
                                                                            <em class="event-name">
                                                                                @if (optional($appointment->user)->memo)
                                                                                    <span class="badge badge-pill badge-danger cd-memo-badge">M</span>
                                                                                @endif {{ optional($appointment->user)->name ? optional($appointment->user)->name : 'Patient Deleted' }}
                                                                            </em>
                                                                        </a>
                                                                        <div class="resizable-handle"></div>
                                                                        {{-- <div class="resizer"></div> --}}
                                                                    </li>
                                                                @endif
                                                            @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
                                            @endif
                                        @else
                                            @if (count(request()->doctor_id) > 2)
                                                @forelse (array_slice($appointmentsByDate,0,3,true) as $date => $appointments)
                                                    <li class="events-group col" style="min-width:110px;">
                                                        <div id="calendar-headers" class="ca-fixed top-info bg-info text-light border border-bottom border border-warning rounded-bottom">

                                                            <span class="m-0 p-0">
                                                                <span class="text-sm text-nowrap">{{ Str::limit(\App\Models\User::where('id', $doctor_id)->first(['id', 'name'])->name ?? 'Deleted Therapist', 12) }}</span>
                                                                <br>
                                                                <span class="text-sm font-weight-bold">{{ \Carbon\Carbon::parse($date)->format('d-M-Y') }}</span>
                                                            </span>

                                                        </div>
                                                        <ul ondrop="drop(event)" ondragover="allowDrop(event)" data-doctor-id="{{ $doctor_id }}" data-appointment-date="{{ $date }}">
                                                            @php
                                                                $doc_start_time = $appointments['schedule']->start_time ?? '0:0';
                                                                $doc_end_time = $appointments['schedule']->end_time ?? '0:0';

                                                                $startTime = \Carbon\Carbon::parse('08:00 AM');
                                                                $interval = 1;
                                                            @endphp
                                                            @for ($i = 0; $i < 720; $i += $interval)
                                                                @php
                                                                    $time = $startTime->copy()->addMinutes($i);
                                                                    $topPosition = $i * 1;
                                                                @endphp

                                                                <div class="time-slot-marker" data-tippy-content="{{ $time->format('h:i A') }}" title="" style="top: {{ $topPosition }}px; height: 1px;" data-time="{{ $time->format('H:i') }}"></div>
                                                            @endfor

                                                            <li class="single-event shadow cd-border-left rounded" 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>

                                                            @foreach ($appointments['appointments'] as $appointment)
                                                                @if ($appointment)
                                                                    <li id="{{ 'dragable-event-' . $appointment->id }}" class="single-event cd-border-left rounded show-appointment" draggable="true" ondragstart="drag(event)" data-toggle="modal" data-target="#exampleModal" data-id="{{ $appointment->id }}"
                                                                        style="border-color: {{ $appointment->appointment_status_id ? $appointment->appointment_status->color_code : green }} !important; 
                                                    background: {{ $appointment->appointment_type_id ? $appointment->appointment_type->color_code : black }}; z-index: 9;"
                                                                        data-start="{{ \Carbon\Carbon::parse($appointment->start_time)->format('H:i') }}" data-end="{{ \Carbon\Carbon::parse($appointment->end_time)->format('H:i') }}" data-content="" data-event="event-4">
                                                                        <a href="#0" class="overflow-hidden">
                                                                            <em class="event-name">
                                                                                @if (optional($appointment->user)->memo)
                                                                                    <span class="badge badge-pill badge-danger cd-memo-badge">M</span>
                                                                                @endif {{ optional($appointment->user)->name ? optional($appointment->user)->name : 'Patient Deleted' }}
                                                                            </em>
                                                                        </a>
                                                                        <div class="resizable-handle"></div>
                                                                        {{-- <div class="resizer"></div> --}}
                                                                    </li>
                                                                @endif
                                                            @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
                                            @else
                                                @forelse ($appointmentsByDate as $date => $appointments)
                                                    <li class="events-group col" style="min-width:110px;">
                                                        <div id="calendar-headers" class="ca-fixed top-info bg-info text-light border border-bottom border border-warning rounded-bottom">

                                                            <span class="m-0 p-0">
                                                                <span class="text-sm text-nowrap">{{ Str::limit(\App\Models\User::where('id', $doctor_id)->first(['id', 'name'])->name ?? 'Deleted Therapist', 12) }}</span>
                                                                <br>
                                                                <span class="text-sm font-weight-bold">{{ \Carbon\Carbon::parse($date)->format('d-M-Y') }}</span>
                                                            </span>

                                                        </div>
                                                        <ul ondrop="drop(event)" ondragover="allowDrop(event)" data-doctor-id="{{ $doctor_id }}" data-appointment-date="{{ $date }}">
                                                            @php
                                                                $doc_start_time = $appointments['schedule']->start_time ?? '0:0';
                                                                $doc_end_time = $appointments['schedule']->end_time ?? '0:0';

                                                                $startTime = \Carbon\Carbon::parse('08:00 AM');
                                                                $interval = 1;
                                                            @endphp

                                                            @for ($i = 0; $i < 720; $i += $interval)
                                                                @php
                                                                    $time = $startTime->copy()->addMinutes($i);
                                                                    $topPosition = $i * 1;
                                                                @endphp

                                                                <div class="time-slot-marker" data-tippy-content="{{ $time->format('h:i A') }}" title="" style="top: {{ $topPosition }}px; height: 1px;" data-time="{{ $time->format('H:i') }}"></div>
                                                            @endfor

                                                            <li class="single-event shadow cd-border-left rounded" 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>

                                                            @foreach ($appointments['appointments'] as $appointment)
                                                                @if ($appointment)
                                                                    <li id="{{ 'dragable-event-' . $appointment->id }}" class="single-event cd-border-left rounded show-appointment" draggable="true" ondragstart="drag(event)" data-toggle="modal" data-target="#exampleModal" data-id="{{ $appointment->id }}"
                                                                        style="border-color: {{ $appointment->appointment_status_id ? $appointment->appointment_status->color_code : green }} !important; 
                                                                        background: {{ $appointment->appointment_type_id ? $appointment->appointment_type->color_code : black }}; z-index: 9;"
                                                                        data-start="{{ \Carbon\Carbon::parse($appointment->start_time)->format('H:i') }}" data-end="{{ \Carbon\Carbon::parse($appointment->end_time)->format('H:i') }}" data-content="" data-event="event-4">
                                                                        <a href="#0" class="overflow-hidden">
                                                                            <em class="event-name">
                                                                                @if (optional($appointment->user)->memo)
                                                                                    <span class="badge badge-pill badge-danger cd-memo-badge">M</span>
                                                                                @endif {{ optional($appointment->user)->name ? optional($appointment->user)->name : 'Patient Deleted' }}
                                                                            </em>
                                                                        </a>
                                                                        <div class="resizable-handle"></div>
                                                                        {{-- <div class="resizer"></div> --}}
                                                                    </li>
                                                                @endif
                                                            @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
                                            @endif
                                        @endif
                                    @endforeach
                                </ul>
                            @else
                                <ul class="eventsgroup" style="display: inline-flex; width: 100%">
                                    @foreach (array_slice($appointmentsGroupedByDoctors, 0, 30, true) as $doctor_id => $appointmentsByDate)
                                        {{-- <ul class="eventsgroup" style="display: {{ $diff_in_days > 9 ? 'inline-flex' : 'contents'}}; width: 100%"> --}}
                                        @if (request()->view_selector != 'day')
                                            @forelse (array_slice($appointmentsByDate,0,3,true) as $date => $appointments)
                                                <li class="events-group col" style="min-width:110px;">
                                                    <div id="calendar-headers" class="ca-fixed top-info bg-info text-light border border-bottom border border-warning rounded-bottom">


                                                        <span class="m-0 p-0">
                                                            <span class="text-sm text-nowrap">{{ Str::limit(\App\Models\User::where('id', $doctor_id)->first(['id', 'name'])->name ?? 'Deleted Therapist', 12) }}</span>
                                                            <br>
                                                            <span class="text-sm font-weight-bold">{{ \Carbon\Carbon::parse($date)->format('d-M-Y') }}</span>
                                                        </span>

                                                    </div>
                                                    <ul ondrop="drop(event)" ondragover="allowDrop(event)" data-doctor-id="{{ $doctor_id }}" data-appointment-date="{{ $date }}">
                                                        @php
                                                            $doc_start_time = $appointments['schedule']->start_time ?? '0:0';
                                                            $doc_end_time = $appointments['schedule']->end_time ?? '0:0';

                                                            $startTime = \Carbon\Carbon::parse('08:00 AM');
                                                            $interval = 1;
                                                        @endphp

                                                        @for ($i = 0; $i < 720; $i += $interval)
                                                            @php
                                                                $time = $startTime->copy()->addMinutes($i);
                                                                $topPosition = $i * 1;
                                                            @endphp

                                                            <div class="time-slot-marker" data-tippy-content="{{ $time->format('h:i A') }}" title="" style="top: {{ $topPosition }}px; height: 1px;" data-time="{{ $time->format('H:i') }}"></div>
                                                        @endfor

                                                        <li class="single-event shadow cd-border-left rounded" 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>

                                                        @foreach ($appointments['appointments'] as $appointment)
                                                            @if ($appointment)
                                                                <li id="{{ 'dragable-event-' . $appointment->id }}" class="single-event cd-border-left rounded show-appointment" draggable="true" ondragstart="drag(event)" data-toggle="modal" data-target="#exampleModal" data-id="{{ $appointment->id }}"
                                                                    style="border-color: {{ $appointment->appointment_status_id ? $appointment->appointment_status->color_code : green }} !important; 
                                                            background: {{ $appointment->appointment_type_id ? $appointment->appointment_type->color_code : black }}; z-index: 9;"
                                                                    data-start="{{ \Carbon\Carbon::parse($appointment->start_time)->format('H:i') }}" data-end="{{ \Carbon\Carbon::parse($appointment->end_time)->format('H:i') }}" data-content="" data-event="event-4">
                                                                    <a href="#0" class="overflow-hidden">
                                                                        <em class="event-name">
                                                                            @if (optional($appointment->user)->memo)
                                                                                <span class="badge badge-pill badge-danger cd-memo-badge">M</span>
                                                                            @endif {{ optional($appointment->user)->name ? optional($appointment->user)->name : 'Patient Deleted' }}
                                                                        </em>
                                                                    </a>
                                                                    <div class="resizable-handle"></div>
                                                                    {{-- <div class="resizer"></div> --}}
                                                                </li>
                                                            @endif
                                                        @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
                                        @else
                                            @if (count(request()->doctor_id) > 2)
                                                @forelse (array_slice($appointmentsByDate,0,3,true) as $date => $appointments)
                                                    <li class="events-group col" style="min-width:110px;">
                                                        <div id="calendar-headers" class="ca-fixed top-info bg-info text-light border border-bottom border border-warning rounded-bottom">

                                                            <span class="m-0 p-0">
                                                                <span class="text-sm text-nowrap">{{ Str::limit(\App\Models\User::where('id', $doctor_id)->first(['id', 'name'])->name ?? 'Deleted Therapist', 12) }}</span>
                                                                <br>
                                                                <span class="text-sm font-weight-bold">{{ \Carbon\Carbon::parse($date)->format('d-M-Y') }}</span>
                                                            </span>

                                                        </div>
                                                        <ul ondrop="drop(event)" ondragover="allowDrop(event)" data-doctor-id="{{ $doctor_id }}" data-appointment-date="{{ $date }}">
                                                            @php
                                                                $doc_start_time = $appointments['schedule']->start_time ?? '0:0';
                                                                $doc_end_time = $appointments['schedule']->end_time ?? '0:0';

                                                                $startTime = \Carbon\Carbon::parse('08:00 AM');
                                                                $interval = 1;
                                                            @endphp

                                                            @for ($i = 0; $i < 720; $i += $interval)
                                                                @php
                                                                    $time = $startTime->copy()->addMinutes($i);
                                                                    $topPosition = $i * 1;
                                                                @endphp

                                                                <div class="time-slot-marker" data-tippy-content="{{ $time->format('h:i A') }}" title="" style="top: {{ $topPosition }}px; height: 1px;" data-time="{{ $time->format('H:i') }}"></div>
                                                            @endfor

                                                            <li class="single-event shadow cd-border-left rounded" 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>

                                                            @foreach ($appointments['appointments'] as $appointment)
                                                                @if ($appointment)
                                                                    <li id="{{ 'dragable-event-' . $appointment->id }}" class="single-event cd-border-left rounded show-appointment" draggable="true" ondragstart="drag(event)" data-toggle="modal" data-target="#exampleModal" data-id="{{ $appointment->id }}"
                                                                        style="border-color: {{ $appointment->appointment_status_id ? $appointment->appointment_status->color_code : green }} !important; 
                                                    background: {{ $appointment->appointment_type_id ? $appointment->appointment_type->color_code : black }}; z-index: 9;"
                                                                        data-start="{{ \Carbon\Carbon::parse($appointment->start_time)->format('H:i') }}" data-end="{{ \Carbon\Carbon::parse($appointment->end_time)->format('H:i') }}" data-content="" data-event="event-4">
                                                                        <a href="#0" class="overflow-hidden">
                                                                            <em class="event-name">
                                                                                @if (optional($appointment->user)->memo)
                                                                                    <span class="badge badge-pill badge-danger cd-memo-badge">M</span>
                                                                                @endif {{ optional($appointment->user)->name ? optional($appointment->user)->name : 'Patient Deleted' }}
                                                                            </em>
                                                                        </a>
                                                                        <div class="resizable-handle"></div>
                                                                        {{-- <div class="resizer"></div> --}}
                                                                    </li>
                                                                @endif
                                                            @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
                                            @else
                                                @forelse ($appointmentsByDate as $date => $appointments)
                                                    <li class="events-group col" style="min-width:110px;">
                                                        <div id="calendar-headers" class="ca-fixed top-info bg-info text-light border border-bottom border border-warning rounded-bottom">

                                                            <span class="m-0 p-0">
                                                                <span class="text-sm text-nowrap">{{ Str::limit(\App\Models\User::where('id', $doctor_id)->first(['id', 'name'])->name ?? 'Deleted Therapist', 12) }}</span>
                                                                <br>
                                                                <span class="text-sm font-weight-bold">{{ \Carbon\Carbon::parse($date)->format('d-M-Y') }}</span>
                                                            </span>

                                                        </div>
                                                        <ul ondrop="drop(event)" ondragover="allowDrop(event)" data-doctor-id="{{ $doctor_id }}" data-appointment-date="{{ $date }}">
                                                            @php
                                                                $doc_start_time = $appointments['schedule']->start_time ?? '0:0';
                                                                $doc_end_time = $appointments['schedule']->end_time ?? '0:0';

                                                                $startTime = \Carbon\Carbon::parse('08:00 AM');
                                                                $interval = 1;
                                                            @endphp

                                                            @for ($i = 0; $i < 720; $i += $interval)
                                                                @php
                                                                    $time = $startTime->copy()->addMinutes($i);
                                                                    $topPosition = $i * 1;
                                                                @endphp

                                                                <div class="time-slot-marker" data-tippy-content="{{ $time->format('h:i A') }}" title="" style="top: {{ $topPosition }}px; height: 1px;" data-time="{{ $time->format('H:i') }}"></div>
                                                            @endfor

                                                            <li class="single-event shadow cd-border-left rounded" 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>

                                                            @foreach ($appointments['appointments'] as $appointment)
                                                                @if ($appointment)
                                                                    <li id="{{ 'dragable-event-' . $appointment->id }}" class="single-event cd-border-left rounded show-appointment" draggable="true" ondragstart="drag(event)" data-toggle="modal" data-target="#exampleModal" data-id="{{ $appointment->id }}"
                                                                        style="border-color: {{ $appointment->appointment_status_id ? $appointment->appointment_status->color_code : green }} !important; 
                                                    background: {{ $appointment->appointment_type_id ? $appointment->appointment_type->color_code : black }}; z-index: 9;"
                                                                        data-start="{{ \Carbon\Carbon::parse($appointment->start_time)->format('H:i') }}" data-end="{{ \Carbon\Carbon::parse($appointment->end_time)->format('H:i') }}" data-content="" data-event="event-4">
                                                                        <a href="#0">
                                                                            <em class="event-name">
                                                                                @if (optional($appointment->user)->memo)
                                                                                    <span class="badge badge-pill badge-danger cd-memo-badge">M</span>
                                                                                @endif {{ optional($appointment->user)->name ? optional($appointment->user)->name : 'Patient Deleted' }}
                                                                            </em>
                                                                        </a>
                                                                        {{-- <div class="resizer"></div> --}}
                                                                        <div class="resizable-handle"></div>
                                                                    </li>
                                                                @endif
                                                            @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
                                            @endif
                                        @endif
                                    @endforeach
                                </ul>
                            @endif
                        </ul>
                    </div>


                    <div class="event-modal">

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

    </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' }}">
                    <li class="events-group col">
                        <div class="ca-fixed top-info"><span>No appointment found try changing doctor and date</span></div>
                    </li>

                </ul>
            </div>


            <div class="event-modal">

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