@extends('layouts.layout')
@section('one_page_css')
    <link rel="stylesheet" href="{{ asset('assets/calendar/css/calendar-handcrafted.css') }}">

    <style>
        .dragging {
            opacity: 0;
            cursor: move;
            transform: scale(1.1);
            /* Use grab cursor while dragging */
        }

        li.single-event {
            list-style-type: none;
        }

        .single-event.show-appointment:hover {
            -moz-transform: scale(1.02, 1.02);
            -ms-transform: scale(1.02, 1.02);
            -webkit-transform: scale(1.02, 1.02);
            transform: scale(1.02, 1.02);
            -moz-box-shadow: #3f3f3f 0 1px 1.2px;
            -webkit-box-shadow: #3f3f3f 0 1px 1.2px;
            box-shadow: #3f3f3f 0 1px 1.2px;
        }

        .resizable-handle {
            width: 12px;
            height: 12px;
            background-color: transparent;
            position: absolute;
            bottom: -12px;
            right: -12px;
            cursor: nwse-resize;

            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid grey;
            transform: rotate(-45deg);
        }

        .resizable-handle::before {
            content: '';
            width: 8px;
            height: 8px;
            border: 2px solid transparent;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
@endsection


@section('content')
    {{-- <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a></li>
                        <li class="breadcrumb-item active">@lang('Doctor Schedule')</li>
                    </ol>
                </div>
            </div>
        </div>
    </section> --}}
    @include('patient-appointment.create-modal')
    <ul class="custom-menu">
        {{-- <li data-action="first">New Appointment</li>
        <li data-action="second">New Patient</li>
        <li data-action="third">Therapist Schedule</li> --}}
        <li><a data-toggle="modal" data-target="#createPatientAppointmentModal" href="javascript:void(0)">New Appointment</a></li>
        <li><a target="_blank" href="{{ route('patient-details.create') }}">New Patient</a></li>
        <li><a target="_blank" href="{{ route('doctor-schedules.create') }}">Therapist Schedule</a></li>
    </ul>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <form id="search_form" action="" method="get" role="form" autocomplete="off">
                    <div class="card-header">
                        {{-- <h3>@lang('Doctor Schedule')</h3> --}}

                        <div class="card-tools d-flex w-100"> {{-- mx-auto --}}
                            @can('patient-appointment-create')
                                <div class="mr-auto" style="margin-top: 1.5rem;">
                                    <a href="javascript:void(0)" data-toggle="modal" data-target="#createPatientAppointmentModal" class="btn btn-sm btn-circle btn-info d-grid" data-role="hint" data-hint-position="right" data-hint-text="New appointment" style="align-items: center; display: grid;">
                                        <i class="fas fa-plus"></i>
                                    </a>
                                    <span class="pull-right"></span>
                                </div>
                            @endcan


                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>@lang('Therapists')</label>

                                        <select name="doctor_id[]" class="form-control bs-multiselect" id="doctor_id" multiple>
                                            {{-- <option value="">--@lang('Select')--</option> --}}
                                            @foreach ($doctors as $doctor)
                                                <option value="{{ $doctor->user_id }}" {{ collect(request()->doctor_id)->contains($doctor->user_id) ? 'selected' : '' }}>{{ $doctor->user->name }}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>@lang('Appointment Date')</label>
                                        <input type="text" name="appointment_date" id="appointment_date" class="form-control range-appointment-date" placeholder="@lang('Appointment Date')"
                                            value="
                                            @if (old('appointment_date', request()->appointment_date)) {{ old('appointment_date', request()->appointment_date) }}
                                            @else
                                            {{ \Carbon\Carbon::now()->format('Y-m-d') }} @endif">
                                    </div>
                                </div>

                                <div class="btn-group col-sm-3" style="margin-top: 1.5rem;">
                                    <div class="col-sm-5">
                                        <button type="submit" class="btn btn-info">@lang('Submit')</button>
                                    </div>
                                    <div class="col-sm-5">
                                        @if (request()->isFilterActive)
                                            <a href="{{ route('calendar.clear') }}" class="btn btn-secondary">@lang('Clear')</a>
                                        @endif
                                    </div>
                                </div>

                                <div class="btn-group col-sm-2" role="group" style="margin-top: 1.5rem;">
                                    {{-- <div class="form-group m-0 p-0">
                                                <div class="form-group input-group m-0 p-0">
                                                    <div class="input-group-prepend">
                                                        <label for="view_selector" class="input-group-text">@lang('View')</label>
                                                    </div>
                                                    <select name="view_selector" class="form-control" id="view_selector" onchange="javascript:this.form.submit()">
                                                        <option value="day" {{ request()->view_selector == 'day' ? 'selected' : '' }}>@lang('Day')</option>
                                                        <option value="prev" {{ request()->view_selector == 'prev' ? 'selected' : '' }}>@lang('Last Week')</option>
                                                        <option value="next" {{ request()->view_selector == 'next' ? 'selected' : '' }}>@lang('This Week')</option>
                                                    </select>
                                                </div>
                                            </div> --}}
                                    @php
                                        Session::put('current_data', $appointmentsGroupedByDoctors);
                                    @endphp
                                    {{-- <button id="ca-schedules-button" type="button" data-toggle="modal" data-target="#schedulesModal" class="btn btn-default"><i class="far fa-calendar-alt"></i> @lang('Therapist Availability')</button> --}}
                                    <div class="dropdown btn btn-circle btn-default dropleft" data-toggle="dropdown">
                                        <a href="javascript:void(0)" class="dropleft text-dark" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fas fa-print"></i>
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a id="formattedPrint" class="dropdown-item" href="javascript:void(0)">Scheduler</a>
                                            <a id="schedules-print" type="button" class="dropdown-item" onclick="window.open('{{ route('print.scheduler.pdf') }}','_blank')">Formatted</a>
                                        </div>
                                    </div>
                                    <button id="ca-reload-button" type="button" class="btn btn-default btn-circle" data-role="hint" data-hint-position="top" data-hint-text="Refresh">
                                        <i class="fas fa-sync"></i>
                                    </button>
                                    {{-- <button class="btn btn-default btn-circle" type="button" data-toggle="collapse" href="#filter" data-role="hint" data-hint-position="top" data-hint-text="Search">
                                                <i class="fas fa-filter"></i>
                                            </button> --}}

                                    {{-- <a id="schedules-print" class="btn btn-default btn-circle" type="button" target="_blank" href="{{ route('print.scheduler.pdf') }}" data-role="hint" data-hint-position="top" data-hint-text="Print schedules and appointments">
                                                <i class="fas fa-print"></i>
                                            </a> --}}
                                </div>
                            </div>
                        </div>
                    </div>

            </div>
            <div class="cardbody">
                <div id="filter" class="collapse @if (request()->isFilterActive) shows @endif">
                    <div class="card-body border">

                        <input type="hidden" name="isFilterActive" value="true">
                        {{-- <div class="row">
                                    <div class="col-sm-8">
                                        <div class="form-group">
                                            <label>@lang('Therapists')</label>
                                            <div class="form-group input-group input-group-sm m-0 p-0">
                                                <select name="doctor_id[]" class="form-control select2" id="doctor_id" multiple>
                                                    
                                                    @foreach ($doctors as $doctor)
                                                        <option value="{{ $doctor->id }}" {{ collect(request()->doctor_id)->contains($doctor->id) ? 'selected' : '' }}>{{ $doctor->name }}</option>
                                                    @endforeach
                                                </select>
                                                <div class="input-group-append">
                                                    <a id="check-all" href="javascript:void(0)" class="btn btn-default input-group-btn">Select All</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label>@lang('Appointment Date')</label>
                                            <input type="text" name="appointment_date" id="appointment_date" class="form-control range-appointment-date" placeholder="@lang('Appointment Date')"
                                                value="
                                            @if (old('appointment_date', request()->appointment_date)) {{ old('appointment_date', request()->appointment_date) }}
                                            @else
                                            {{ \Carbon\Carbon::now()->format('Y-m-d') }} @endif
                                            ">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <button type="submit" class="btn btn-info">@lang('Submit')</button>
                                        @if (request()->isFilterActive)
                                            <a href="{{ route('calendar.clear') }}" class="btn btn-secondary">@lang('Clear')</a>
                                        @endif
                                    </div>
                                </div> --}}

                    </div>
                </div>
            </div>
            </form>


            @switch($layout)
                @case('date_tab')
                    @include('patient-appointment.calendar-layouts.date-tab-layout')
                @break

                @case('therapist_tab')
                    @include('patient-appointment.calendar-layouts.therapist-tab-layout')
                @break

                @case('non_tab')
                    @include('patient-appointment.calendar-layouts.non-tab-layout')
                @break

                @default
                    @include('patient-appointment.calendar-layouts.therapist-tab-layout')
            @endswitch


            <div id="custom-tooltip" class="tooltip"></div>
            <div id="scheduler"></div>
            @include('patient-appointment.event-modal')
            @include('patient-appointment.schedules-modal')
        </div>
        @include('layouts.delete_modal')
    @endsection

    @section('one_page_js')
        <script src="{{ asset('assets/js/stopExecutionOnTimeout.js') }}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="{{ asset('assets/js/daypilot/daypilot-all.min.js') }}"></script>
        <script src="{{ asset('assets/calendar/js/calendar-handcrafted.js') }}"></script>


        <script src="{{ asset('assets/tippy/popper.min.js') }}"></script>
        <script src="{{ asset('assets/tippy/tippy-bundle.umd.min.js') }}"></script>



        <script>
            $(document).ready(function() {
                tippy('[data-tippy-content]', {
                    trigger: 'dragover',
                    interactive: true,
                    onShow(instance) {
                        setTimeout(() => {
                            instance.hide();
                        }, 1000);
                    },
                    onTrigger(instance, event) {
                        if (event.type != 'dragover') {
                            instance.hide();
                        }
                    },
                });


                $("#ca-reload-button").click(function() {
                    location.reload();
                });

                $(document).on('click', '.show-appointment', function(e) {
                    e.preventDefault();
                    let id = $(this).attr('data-id');
                    var _url = '{{ route('patient-appointment-scheduler.edit') }}';
                    $.ajax({
                        url: _url,
                        method: 'get',
                        data: {
                            id: id,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            $('#delete_appointment_scheduler').attr('data-id', response.id);
                            $('#patient_name_modal').html("Patient: " + (response.user ? response.user.name : 'Patient Deleted'));
                            var app_url = '{{ route('patient-details.details', ':id') }}'
                            app_url = app_url.replace(':id', response.user_id);
                            $('#modal_profile_button').attr('href', app_url);
                            var img_url = "{{ asset(':url') }}";
                            img_url = img_url.replace(':url', (response.user ? response.user.photo : ''));
                            if (response.user) {
                                if (response.user.photo) {
                                    $('#patient_img_modal').attr('src', img_url);
                                } else {
                                    $('#patient_img_modal').attr('src', "{{ asset('storage/pre-asset/no-img.png') }}");
                                }
                            }

                            //$('#patient_img_modal').attr('src', (response.user.photo ? img_url : {{ asset('storage/pre-asset/no-img.png') }}));
                            $('#appointment_date_modal').html(moment(response.appointment_date, 'YYYY-MM-DD').format('DD-MMM-YYYY'));
                            $('#appointment_time_modal').html(moment(response.start_time, "HH:mm:ss").format("hh:mm A") + " - " + moment(response.end_time, "HH:mm:ss").format("hh:mm A"));
                            var cache1 = $('#appointment_type_modal').children();
                            var cache2 = $('#appointment_status_modal').children();
                            $('#appointment_type_modal').text(response.appointment_type.name).prepend(cache1);
                            $('#appointment_status_modal').text(response.appointment_status.name).prepend(cache2);
                            $('#appointment_type_dot_modal').css('background-color', response.appointment_type.color_code);
                            $('#appointment_status_dot_modal').css('background-color', response.appointment_status.color_code);
                            if (response.user) {
                                $('#patient_memo_modal').html(response.user.memo ? response.user.memo : 'No Memo');
                            }
                            $('#therapist_name_modal').html(response.doctor.name);
                            $('#therapy_name_modal').html(response.hospital_department ? response.hospital_department.name : "Not Available");
                            $('#problem_name_modal').html(response.problem ? response.problem : "Not Available");

                            $("#doctor_id_edit").val(response.doctor_id).change();
                            $("#appointment_date_edit").flatpickr({
                                disabled: true,
                                dateFormat: "Y-m-d",
                            }).setDate(response.appointment_date, true, 'Y-m-d');
                            $("#appointment_type_id_edit").val(response.appointment_type_id).change();
                            $("#appointment_status_id_edit").val(response.appointment_status_id).change();
                            $("#hospital_department_id_edit").val(response.hospital_department_id).change();
                            $("#patient_id_edit").val(response.user_id);
                            $("#appointment_id_edit").val(response.id);
                            var a_time = moment(response.start_time, "HH:mm:ss").format("HH:mm") + "-" + moment(response.end_time, "HH:mm:ss").format("HH:mm")
                            //$("#appointment_slot_edit option[value$='"+ a_time +"']").prop("selected", true);                        

                            $("#appointment_slot_edit").prop('required', false);
                            if (response.prescription) {
                                $('#if_case').html('(This appointment is related to case: ' + response.prescription.hospital_department.name + ' ' + response.prescription.prescription_date + ')');
                            } else {
                                $('#if_case').html('');
                            }

                            $('#start_time_edit').flatpickr({
                                enableTime: true,
                                noCalendar: true,
                                dateFormat: 'H:i',
                            }).setDate(response.start_time);

                            $('#end_time_edit').flatpickr({
                                enableTime: true,
                                noCalendar: true,
                                dateFormat: 'H:i',
                            }).setDate(response.end_time);
                        }
                    });


                });

                $(document).on('click', '#delete_appointment_scheduler', function(e) {
                    e.preventDefault();
                    let app_id = $(this).attr('data-id');
                    let csrf = '{{ csrf_token() }}';
                    var _app_url = '{{ route('scheduler-patient-appointment.delete') }}';

                    swal({
                        title: "Are you sure?",
                        text: "You won't be able to revert this!",
                        icon: "warning",
                        buttons: [
                            'Cancel',
                            'Yes, I am sure!'
                        ],
                        dangerMode: true,
                    }).then(function(isConfirm) {
                        if (isConfirm) {
                            $.ajax({
                                url: _app_url,
                                method: 'delete',
                                data: {
                                    appointment_id: app_id,
                                    _token: csrf
                                },
                                success: function(response_modal) {
                                    Swal.fire(
                                        'Deleted!',
                                        'Data deleted successfully.',
                                        'success'
                                    );
                                }
                            }).done(location.reload());
                        }
                    });
                });

                $('#weekday_name').on('change', function() {
                    var _url = '{{ route('therapist-schedules-get') }}';
                    var keyword = $('#weekday_name').val();
                    $.ajax({
                        url: _url,
                        method: 'get',
                        data: {
                            weekday_name: keyword,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(schedules_response) {

                            table_schedule_row(schedules_response);
                        }
                    });
                });

                $('.range-appointment-date').on('change', function() {
                    $('#view_selector').val('day');
                });

                $('#doctor_id_edit, #appointment_date_edit').on('change', function() {
                    $("#appointment_slot_edit").prop('required', true);
                });


                function table_schedule_row(res) {
                    let htmlView = '';
                    if (res.length <= 0) {
                        htmlView += '<tr><td colspan="3">No data.</td></tr>';
                    }
                    $.each(res, function(k, i) {
                        htmlView += '<tr>';
                        htmlView += '<td> ' + (k + 1) + ' </td>';
                        htmlView += '<td> ' + (i.user ? i.user.name : 'Deleted Therapist') + ' </td>';
                        htmlView += '<td>  ' + (moment(i.start_time, "HH:mm:ss").format("hh:mm A")) + ' - ' + (moment(i.end_time, "HH:mm:ss").format("hh:mm A")) + '</td>';
                        htmlView += '</tr>';
                    });
                    $('#schedules_tbody').html(htmlView);
                }

                /* function fetchSelectedAppointment(id) {
                let s_id = id; //$('.selected-appointment').attr('data-id');
                var _url = '{{ route('patient-appointment-scheduler.edit') }}';
                $.ajax({
                    url: _url,
                    method: 'get',
                    data: {
                        id: s_id,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {                    
                        $('#doctor_name').html("Therapist : " + response.doctor.name);
                        $('#app_date').html("(" + response.appointment_date + ")");
                        $('#appointment_type_label').html("Appointment Type : " + response.appointment_type.name);
                        $('#appointment_status_label').html("Appointment Status : " + response.appointment_status.name);
                        $('#problem_modal').html("Problem/Issue : " + (response.problem ? response.problem : "Not Available"));
                        $("#doctor_id_edit").val(response.doctor_id).change();
                        $("#appointment_date_edit").flatpickr({
                            disabled: true,
                            dateFormat: "Y-m-d",
                        }).setDate(response.appointment_date, true, 'Y-m-d');
                        $("#appointment_type_id_edit").val(response.appointment_type_id).change();
                        $("#appointment_status_id_edit").val(response.appointment_status_id).change();
                        $("#patient_id_edit").val(response.user_id);
                        $("#appointment_id_edit").val(response.id);

                    }

                });                
                } */

                flatpickr(".range-appointment-date", {
                    mode: "range",
                    dateFormat: "Y-m-d",
                });

                $(".select2").select2({
                    closeOnSelect: false,
                    placeholder: 'All Therapists',
                    allowHtml: true,
                    allowClear: true,
                    tags: true,
                    //maximumSelectionLength: 5
                });

                $("#check-all").on('click', function() {
                    $('.select2').val($('.select2 option').map(function() {
                        return this.value
                    }).get()).trigger('change');
                    //let maxSelectable = $('.select2').data("select2").options.options.maximumSelectionLength;

                    /* $('.select2').val($('.select2 option').slice(0, 5).map(function() {
                        return this.value
                    }).get()).trigger('change'); */

                });

                $("#uncheck-all").on('click', function() {
                    $('.select2').val([]).data("maximumSelectionLength").trigger('change');
                });


                $("#createAppointmentForm").submit(function(e) {
                    e.preventDefault();
                    const fd = new FormData(this);
                    var _url = '{{ route('details-patient-appointment.store') }}';

                    if ($("#recurring_period").val() == 'daily') {
                        var checkboxChecked = false;
                        $('input[name="Sunday"], input[name="Monday"], input[name="Tuesday"], input[name="Wednesday"], input[name="Thursday"], input[name="Friday"], input[name="Saturday"]').each(function() {
                            if ($(this).is(':checked')) {
                                checkboxChecked = true;
                                return false; // This line will break the loop when first selected checkbox is found
                            }
                        });

                    } else {
                        checkboxChecked = true;
                    }


                    if (!checkboxChecked) {
                        alert("Please select at least one day from Sunday to Saturday.");
                    } else {
                        $.ajax({
                            url: _url,
                            method: 'post',
                            data: fd,
                            cache: false,
                            processData: false,
                            contentType: false,
                            dataType: 'json',

                            success: function(response) {
                                if (response.status == 200) {
                                    Swal.fire(
                                        'Saved!',
                                        'Data Saved Successfully!',
                                        'success'
                                    )
                                }
                                $("#createAppointmentForm")[0].reset();
                                $("#createPatientAppointmentModal").modal('hide');
                            },
                            error: function(response) {
                                if (response.status == 400) {
                                    Swal.fire(
                                        'Alert!',
                                        response.responseJSON.message,
                                        'info'
                                    )
                                }
                                $("#createAppointmentForm")[0].reset();
                                $("#createPatientAppointmentModal").modal('hide');
                            }
                        }).done(window.location.href = 'https://therapy.kidstherapy.me/');
                    }
                });

                $("#recurring_period").change(function() {
                    if ($(this).val() == 'daily') {
                        $('#daily_day_checkbox_div').show();
                    } else {
                        $('#daily_day_checkbox_div').hide();
                    }
                });


                $('.bs-multiselect').multiselect({
                    enableFiltering: true,
                    filterBehavior: 'text',
                    enableCaseInsensitiveFiltering: true,
                    includeSelectAllOption: true,
                    /* includeResetOption: true,
                    includeResetDivider: true, */
                    maxWidth: 150,
                    maxHeight: 200,
                    dropUp: false,
                    buttonWidth: '280px',
                    /* buttonText: function(options, select) {
                        return 'Therapists';
                    }, */

                });

            });


            document.addEventListener('DOMContentLoaded', function() {
                const resizers = document.querySelectorAll('.resizable-handle');
                let currentResizer;

                resizers.forEach(resizer => {
                    resizer.addEventListener('mousedown', initResize);
                });

                function initResize(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    currentResizer = e.target;                    
                    globalText = currentResizer.parentElement.querySelector('.event-date').textContent;
                    globalEventHeight = currentResizer.parentElement.style.height;
                    console.log(globalText, globalEventHeight);                    
                    document.addEventListener('mousemove', handleResize);
                    document.addEventListener('mouseup', stopResize);
                }

                function handleResize(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    const parent = currentResizer.parentElement;
                    const mouseY = e.clientY;
                    const rect = parent.getBoundingClientRect();
                    const newHeight = mouseY - rect.top;

                    const minHeight = 30;
                    const adjustedHeight = Math.max(newHeight, minHeight);

                    parent.style.height = adjustedHeight + 'px'; // newHeight + 'px';
                }

                function stopResize(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    document.removeEventListener('mousemove', handleResize);
                    document.removeEventListener('mouseup', stopResize);

                    const parent = currentResizer.parentElement;
                    const parentUl = parent.closest('ul');

                    const nearestMarker = findNearestMarker(parent.getBoundingClientRect().top, parentUl);

                    if (nearestMarker) {
                        const startTime = addMinutesToTime(nearestMarker.dataset.time, 1);
                        const endTime = moment(startTime, 'HH:mm').add((parent.offsetHeight / 2), 'minutes').format('HH:mm');

                        const parentTimeSpan = parent.querySelector('.event-date');

                        parentTimeSpan.textContent = formatTimeString(`${startTime} - ${endTime}`);

                        onDropResizeUpdate(parent.dataset.id, parentUl.dataset.appointmentDate, startTime, endTime, parentUl.dataset.doctorId)
                            .then(function(response) {
                                Swal.fire(
                                    'Success!',
                                    'Appointment updated successfully.',
                                    'success'
                                );
                            })
                            .catch(function(error) {
                                Swal.fire(
                                    'Error',
                                    error,
                                    'error'
                                );                                
                                parent.querySelector('.event-date').textContent = globalText;
                                parent.style.height = globalEventHeight;
                            });
                    }
                }

            });


            /* document.addEventListener('DOMContentLoaded', function() {
                const timeMarkers = document.querySelectorAll('.time-slot-marker');
                const tooltip = document.getElementById('custom-tooltip');

                timeMarkers.forEach(marker => {
                    marker.addEventListener('dragover', showTooltip);
                    marker.addEventListener('mouseleave', hideTooltip);
                });

                function showTooltip(e) {
                    const time = e.target.dataset.time;

                    console.log(time);
                    // Update tooltip content and position
                    tooltip.textContent = time;
                    tooltip.style.left = e.clientX + 'px';
                    tooltip.style.top = e.clientY - 20 + 'px'; // Adjust the tooltip position

                    // Display the tooltip
                    tooltip.style.display = 'block';
                }

                function hideTooltip() {
                    // Hide the tooltip when the mouse leaves the time marker
                    //tooltip.style.display = 'none';
                }
            }); */

            function onDropResizeUpdate(appointmentId, appointmentDate, startTime, endTime, doctorId = null) {
                return new Promise(function(resolve, reject) {
                    let _url = "{{ route('update.dragDrop') }}";
                    $.ajax({
                        url: _url,
                        method: 'post',
                        data: {
                            appointment_id: appointmentId,
                            appointment_date: appointmentDate,
                            start_time: startTime,
                            end_time: endTime,
                            doctor_id: doctorId
                        },
                        cache: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(dragResponse) {
                            resolve(true);
                        },
                        error: function(xhr, status, error) {
                            reject(error + ' or ' + xhr?.responseText);
                        }
                    });
                });
            }
        </script>
    @endsection