@extends('layouts.layout')
@section('one_page_css')
    {{-- custom calendar --}}
    <style>
        .codyhouse {
            text-align: center;
            margin: 40px 0;
        }

        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,

        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        embed,
        figure,
        figcaption,
        footer,
        header,
        hgroup,
        menu,
        nav,
        output,
        ruby,
        section,
        summary,
        time,
        mark,
        audio,
        video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }

        /* HTML5 display-role reset for older browsers */
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section,
        main {
            display: block;
        }

        body {
            line-height: 1;
        }

        ol,
        ul {
            list-style: none;
        }

        blockquote,
        q {
            quotes: none;
        }

        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: '';
            content: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        /* style css */
        /* --------------------------------

                                                                                            Primary style

                                                                                        -------------------------------- */
        *,
        *::after,
        *::before {
            box-sizing: border-box;
        }

        body {

            font-family: "Source Sans Pro", sans-serif;
            color: #222222;
            background-color: white;
        }

        a {
            color: #A2B9B2;
            text-decoration: none;
        }

        /* --------------------------------

                                                                                            Main Components

                                                                                        -------------------------------- */
        .cd-schedule {
            position: relative;
            margin: 2em 0;
        }

        .cd-border-left {
            border-left: 8px solid transparent !important;
            /*  border-color: green !important; */
        }

        .cd-schedule::before {
            /* never visible - this is used in js to check the current MQ */
            content: 'mobile';
            display: none;
        }

        @media only screen and (min-width: 800px) {
            .cd-schedule {
                width: 90%;
                max-width: 1400px;
                margin: 2em auto;
            }

            .cd-schedule::after {
                clear: both;
                content: "";
                display: block;
            }

            .cd-schedule::before {
                content: 'desktop';
            }
        }

        .cd-schedule .timeline {
            display: none;
        }

        @media only screen and (min-width: 800px) {
            .cd-schedule .timeline {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                padding-top: 50px;
            }

            .cd-schedule .timeline li {
                position: relative;
                height: 50px;
            }

            .cd-schedule .timeline li::after {
                /* this is used to create the table horizontal lines */
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background: #EAEAEA;
            }

            .cd-schedule .timeline li:last-of-type::after {
                display: none;
            }

            .cd-schedule .timeline li span {
                display: none;
            }
        }

        @media only screen and (min-width: 1000px) {
            .cd-schedule .timeline li::after {
                width: calc(100% - 60px);
                left: 60px;
            }

            .cd-schedule .timeline li span {
                display: inline-block;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
            }

            .cd-schedule .timeline li:nth-of-type(2n) span {
                display: none;
            }
        }

        .cd-schedule .events {
            position: relative;
            z-index: 1;
        }

        .cd-schedule .events .events-group {
            margin-bottom: 30px;
        }

        .cd-schedule .events .top-info {
            width: 100%;
            padding: 0 5%;
            background: white;
            position: sticky;
            top: 0;
            z-index: 999;
        }


        .cd-schedule .events .top-info>span {
            display: inline-block;
            line-height: 1.2;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .cd-schedule .events .events-group>ul {
            position: relative;
            padding: 0 5%;
            /* force its children to stay on one line */
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
        }

        .cd-schedule .events .events-group>ul::after {
            /* never visible - used to add a right padding to .events-group > ul */
            display: inline-block;
            content: '-';
            width: 1px;
            height: 100%;
            opacity: 0;
            color: transparent;
        }

        .cd-schedule .events .single-event {
            /* force them to stay on one line */
            -ms-flex-negative: 0;
            flex-shrink: 0;
            float: left;
            height: 150px;
            width: 70%;
            max-width: 300px;
            box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
            margin-right: 20px;
            -webkit-transition: opacity .2s, background .2s;
            transition: opacity .2s, background .2s;
        }

        .cd-schedule .events .single-event:last-of-type {
            margin-right: 5%;
        }

        .cd-schedule .events .single-event a {
            display: block;
            height: 100%;
            padding: .8em;
        }

        @media only screen and (min-width: 550px) {
            .cd-schedule .events .single-event {
                width: 40%;
            }
        }

        @media only screen and (min-width: 800px) {
            .cd-schedule .events {
                float: left;
                width: 100%;
            }

            .cd-schedule .events .events-group {
                width: 14%;
                float: left;
                border: 1px solid #EAEAEA;
                /* reset style */
                margin-bottom: 0;
            }

            .cd-schedule .events .events-group:not(:first-of-type) {
                border-left-width: 0;
            }

            .cd-schedule .events .top-info {
                /* vertically center its content */
                display: table;
                height: 50px;
                border-bottom: 1px solid #EAEAEA;
                /* reset style */
                padding: 0;
            }

            .cd-schedule .events .top-info>span {
                /* vertically center inside its parent */
                display: table-cell;
                vertical-align: middle;
                padding: 0 .5em;
                text-align: center;
                /* reset style */
                font-weight: normal;
                margin-bottom: 0;
            }

            .cd-schedule .events .events-group>ul {
                height: 950px;
                /* reset style */
                display: block;
                overflow: visible;
                padding: 0;
            }

            .cd-schedule .events .events-group>ul::after {
                clear: both;
                content: "";
                display: block;
            }

            .cd-schedule .events .events-group>ul::after {
                /* reset style */
                display: none;
            }

            .cd-schedule .events .single-event {
                position: absolute;
                z-index: 3;
                /* top position and height will be set using js */
                width: calc(100% + 2px);
                left: -1px;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
                /* reset style */
                -ms-flex-negative: 1;
                flex-shrink: 1;
                height: auto;
                max-width: none;
                margin-right: 0;
            }

            .cd-schedule .events .single-event a {
                padding: 1.2em;
            }

            .cd-schedule .events .single-event:last-of-type {
                /* reset style */
                margin-right: 0;
            }

            .cd-schedule .events .single-event.selected-event {
                /* the .selected-event class is added when an user select the event */
                visibility: hidden;
            }
        }

        @media only screen and (min-width: 1000px) {
            .cd-schedule .events {
                /* 60px is the .timeline element width */
                width: calc(100% - 60px);
                margin-left: 60px;
            }
        }

        .cd-schedule.loading .events .single-event {
            /* the class .loading is added by default to the .cd-schedule element
                                                                                            it is removed as soon as the single events are placed in the schedule plan (using javascript) */
            opacity: 0;
        }

        .cd-schedule .event-name,
        .cd-schedule .event-date {
            display: block;
            color: white;
            font-weight: bold;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .cd-schedule .event-name {
            font-size: 1.0rem;
        }

        @media only screen and (min-width: 800px) {
            .cd-schedule .event-name {
                font-size: 1.0rem;
            }
        }

        .cd-schedule .event-date {
            /* they are not included in the the HTML but added using JavScript */
            font-size: 0.8em;
            opacity: .7;
            line-height: 1.0;
            margin-bottom: .2em;
            margin-top: -10px
        }

        .app_date {
            font-size: 0.8em;
            opacity: .7;
            line-height: 1.0;
            margin-bottom: .2em;
            margin-top: -10px;
            color: white;
        }

        .ca-titles {
            display: block;
            color: white;
            font-weight: bold;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 1.0rem;
        }

        .cd-schedule .single-event[data-event="event-1"],
        .cd-schedule [data-event="event-1"] .header-bg {
            /* this is used to set a background color for the event and the modal window */
            background: #577F92;
        }

        .cd-schedule .single-event[data-event="event-1"]:hover {
            background: #618da1;
        }

        .cd-schedule .single-event[data-event="event-2"],
        .cd-schedule [data-event="event-2"] .header-bg {
            background: #443453;
        }

        .cd-schedule .single-event[data-event="event-2"]:hover {
            background: #513e63;
        }

        .cd-schedule .single-event[data-event="event-3"],
        .cd-schedule [data-event="event-3"] .header-bg {
            background: #A2B9B2;
        }

        .cd-schedule .single-event[data-event="event-3"]:hover {
            background: #b1c4be;
        }

        .cd-schedule .single-event[data-event="event-4"],
        .cd-schedule [data-event="event-4"] .header-bg {
            background: #f6b067;
        }

        .cd-schedule .single-event[data-event="event-4"]:hover {
            background: #f7bd7f;
        }

        .cd-schedule .event-modal {
            position: fixed;
            z-index: 3;
            top: 0;
            right: 0;
            height: 80%;

            width: 80%;
            visibility: hidden;
            /* Force Hardware acceleration */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
            transform: translateX(100%);
            -webkit-transition: visibility .4s, -webkit-transform .4s;
            transition: visibility .4s, -webkit-transform .4s;
            transition: transform .4s, visibility .4s;
            transition: transform .4s, visibility .4s, -webkit-transform .4s;
            -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
            transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
        }

        .cd-schedule .event-modal .header {
            position: relative;
            height: 70px;
            /* vertically center its content */
            display: table;
            width: 100%;
        }

        .cd-schedule .event-modal .header .content {
            position: relative;
            z-index: 3;
            /* vertically center inside its parent */
            display: table-cell;
            vertical-align: middle;
            padding: .6em 5%;
        }

        .cd-schedule .event-modal .body {
            position: relative;
            width: 80%;
            /* 70px is the .header height */
            height: calc(100% - 70px);
        }

        .cd-schedule .event-modal .event-info {
            position: relative;
            z-index: 2;
            line-height: 1.4;
            height: 100%;
            overflow: hidden;
        }

        .cd-schedule .event-modal .event-info>div {
            overflow: auto;
            height: 100%;
            padding: 1.4em 5%;
        }

        .cd-schedule .event-modal .header-bg,
        .cd-schedule .event-modal .body-bg {
            /* these are the morphing backgrounds - visible on desktop only */
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }

        .cd-schedule .event-modal .body-bg {
            z-index: 1;
            background: white;
            -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
            transform-origin: top left;
        }

        .cd-schedule .event-modal .header-bg {
            z-index: 2;
            -webkit-transform-origin: top center;
            -ms-transform-origin: top center;
            transform-origin: top center;
        }

        .cd-schedule .event-modal .close {
            /* this is the 'X' icon */
            position: absolute;
            top: 0;
            right: 0;
            z-index: 3;
            background: rgba(0, 0, 0, 0.1);
            /* replace text with icon */
            color: transparent;
            white-space: nowrap;
            text-indent: 100%;
            height: 70px;
            width: 70px;
        }

        .cd-schedule .event-modal .close::before,
        .cd-schedule .event-modal .close::after {
            /* these are the two lines of the 'X' icon */
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2px;
            height: 22px;
            background: white;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .cd-schedule .event-modal .close::before {
            -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
            -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
            transform: translateX(-50%) translateY(-50%) rotate(45deg);
        }

        .cd-schedule .event-modal .close::after {
            -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
            -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
            transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        }

        .cd-schedule .event-modal .event-date {
            display: none;
        }

        .cd-schedule .event-modal.no-transition {
            -webkit-transition: none;
            transition: none;
        }

        .cd-schedule .event-modal.no-transition .header-bg,
        .cd-schedule .event-modal.no-transition .body-bg {
            -webkit-transition: none;
            transition: none;
        }

        @media only screen and (min-width: 800px) {
            .cd-schedule .event-modal {
                /* reset style */
                right: auto;
                width: auto;
                height: auto;
                -webkit-transform: translateX(0);
                -ms-transform: translateX(0);
                transform: translateX(0);
                will-change: transform, width, height;
                -webkit-transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
                transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
                transition: height .4s, width .4s, transform .4s, visibility .4s;
                transition: height .4s, width .4s, transform .4s, visibility .4s, -webkit-transform .4s;
                -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
                transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
            }

            .cd-schedule .event-modal .header {
                position: absolute;
                display: block;
                top: 0;
                left: 0;
                height: 100%;
            }

            .cd-schedule .event-modal .header .content {
                /* reset style */
                display: block;
                padding: .8em;
            }

            .cd-schedule .event-modal .event-info>div {
                padding: 2em 3em 2em 2em;
            }

            .cd-schedule .event-modal .body {
                height: 100%;
                width: auto;
            }

            .cd-schedule .event-modal .header-bg,
            .cd-schedule .event-modal .body-bg {
                /* Force Hardware acceleration */
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                will-change: transform;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }

            .cd-schedule .event-modal .header-bg {
                -webkit-transition: -webkit-transform .4s;
                transition: -webkit-transform .4s;
                transition: transform .4s;
                transition: transform .4s, -webkit-transform .4s;
                -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
                transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
            }

            .cd-schedule .event-modal .body-bg {
                opacity: 0;
                -webkit-transform: none;
                -ms-transform: none;
                transform: none;
            }

            .cd-schedule .event-modal .event-date {
                display: block;
            }

            .cd-schedule .event-modal .close,
            .cd-schedule .event-modal .event-info {
                opacity: 1;
            }

            .cd-schedule .event-modal .close {
                width: 40px;
                height: 40px;
                background: transparent;
            }

            .cd-schedule .event-modal .close::after,
            .cd-schedule .event-modal .close::before {
                background: #222222;
                height: 16px;
            }
        }

        @media only screen and (min-width: 1000px) {
            .cd-schedule .event-modal .header .content {
                padding: 1.2em;
            }
        }

        .cd-schedule.modal-is-open .event-modal {
            /* .modal-is-open class is added as soon as an event is selected */
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
            visibility: visible;
        }

        .cd-schedule.modal-is-open .event-modal .event-info>div {
            /* smooth scroll on iOS touch devices */
            -webkit-overflow-scrolling: touch;
        }

        @media only screen and (min-width: 800px) {

            .cd-schedule.animation-completed .event-modal .close,
            .cd-schedule.content-loaded.animation-completed .event-modal .event-info {
                /* 	the .animation-completed class is added when the modal animation is completed
                                                                                                the .content-loaded class is added when the modal content has been loaded (using ajax) */
                opacity: 1;
                -webkit-transition: opacity .2s;
                transition: opacity .2s;
            }

            .cd-schedule.modal-is-open .body-bg {
                opacity: 1;
                -webkit-transition: -webkit-transform .4s;
                transition: -webkit-transform .4s;
                transition: transform .4s;
                transition: transform .4s, -webkit-transform .4s;
                -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
                transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
            }
        }

        .cd-schedule .cover-layer {
            /* layer between the content and the modal window */
            position: fixed;
            z-index: 2;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: rgba(0, 0, 0, 0.8);
            opacity: 0;
            visibility: hidden;
            -webkit-transition: opacity .4s, visibility .4s;
            transition: opacity .4s, visibility .4s;
        }

        .cd-schedule.modal-is-open .cover-layer {
            opacity: 1;
            visibility: visible;
        }

        .cd-modal-label {
            font-weight: bold;
            font-size: 14px;
        }
    </style>

    {{-- right click option --}}
    <style>
        .custom-menu {
            display: none;
            z-index: 1000;
            position: absolute;
            overflow: hidden;
            border: 1px solid #CCC;
            white-space: nowrap;
            font-family: sans-serif;
            background: #FFF;
            color: #333;
            border-radius: 5px;
        }

        .custom-menu li {
            padding: 8px 12px;
            cursor: pointer;
        }

        .custom-menu li:hover {
            background-color: #DEF;
        }
    </style>

    <style>
        .close:focus {

            outline: 1px dotted #fff !important;
        }

        .modal-body {

            /* padding: 0rem !important; */
        }

        .modal-title {

            color: #fff;
        }

        .modal-title .modal-title-bar {

            opacity: 0.5;
        }

        .modal-header {

            background: #17a2b8;
            /* background: #9C27B0; */
            color: #fff !important;
        }

        .fa-close {
            color: #fff;
        }

        .ca-close {
            float: right;
            font-size: 1.0rem;
            font-weight: 700;
            line-height: 1.5;

            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: .5;
        }

        .heading {

            font-weight: 500 !important;
        }

        .subheadings {
            font-size: 12px;
            /* color: #9c27b0; */
            color: #17a2b8;
        }


        .dots {
            height: 10px;
            width: 10px;
            background-color: green;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }

        .gallery img {

            margin-right: 10px;
        }

        .fs-9 {
            font-size: 9px;
        }

        .ca-rounded-circle {
            border-radius: 50% !important;
            max-width: fit-content;
            margin: auto;
            max-height: 120px;
            max-width: 120px;

        }

        .ca-modal-content {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            width: 100%;
            pointer-events: auto;
            background-color: #fff;
            background-clip: padding-box;
            /* border: 1px solid rgb(156, 39, 176); */
            border: 1px solid #17a2b8;
            border-radius: .4rem;
            box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .5);
            outline: 5px;
        }

        .ca-select-sm {
            height: 25px;
            width: 130px;
            font-size: 12px;
            padding: 0;
            border-color: #17a2b8;
            border-radius: 3px;
        }

        .ca-input-sm {
            height: 25px;
            width: 130px;
            font-size: 12px;            
            border-color: #17a2b8;
            border-radius: 3px;
        }
    </style>
@endsection


@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    @can('patient-appointment-create')
                        <h3>
                            <a href="{{ route('patient-appointments.create') }}" class="btn btn-outline btn-info">+ @lang('Patient Appointment')</a>
                            <span class="pull-right"></span>
                        </h3>
                    @endcan
                </div>
                <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>

    <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 target="_blank" href="{{ route('patient-appointments.create') }}">New Appointment</a></li>
        <li><a target="_blank" href="{{ route('patient-details.create') }}">New Patient</a></li>
        <li><a target="_blank" href="{{ route('patient-appointments.index') }}">Therapist Schedule</a></li>
    </ul>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3>@lang('Doctor Schedule')</h3>
                    <div class="card-tools row">
                        <div class="btn-group" role="group">
                            <button id="ca-reload-button" class="btn btn-default"><i class="fas fa-sync"></i> @lang('Refresh')</button>
                            <button class="btn btn-default" data-toggle="collapse" href="#filter"><i class="fas fa-filter"></i> @lang('Filter')</button>
                        </div>
                    </div>
                </div>
                <div class="cardbody">
                    <div id="filter" class="collapse @if (request()->isFilterActive) show @endif">
                        <div class="card-body border">
                            <form action="" method="get" role="form" autocomplete="off">
                                <input type="hidden" name="isFilterActive" value="true">
                                <div class="row">
                                    <div class="col-sm-8">
                                        <div class="form-group">
                                            <label>@lang('Therapists')</label>
                                            <select name="doctor_id[]" class="form-control select2" id="doctor_id" multiple>
                                                <option value="">--@lang('Select')--</option>
                                                @foreach ($doctors as $doctor)
                                                    <option value="{{ $doctor->id }}" {{ collect(request()->doctor_id)->contains($doctor->id) ? 'selected' : '' }}>{{ $doctor->name }}</option>
                                                @endforeach
                                            </select>
                                        </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 flatpickr" 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('patient-schedule.calendar') }}" class="btn btn-secondary">@lang('Clear')</a>
                                        @endif
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div id="dp">

                    </div>


                    <div class="cd-schedule loading" style="overflow-y: scroll;">
                        <div class="timeline">
                            <ul>
                                @foreach ($intervals as $interval)
                                    <li><span>{{ $interval->format('H:i') }}</span></li>
                                @endforeach
                            </ul>
                        </div> <!-- .timeline -->



                        <div id="main-scheduler" class="events">
                            <ul class="row"> {{-- wrap --}}

                                @forelse ($appointmentsGroupedByDoctors as $appointmentsGroupedByDoctor)
                                    <li class="events-group col">
                                        <div id="calendar-header" class="ca-fixed top-info"><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">
                                                        <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
                                {{-- 
                                <li class="events-group">
                                    <div class="top-info"><span>Tuesday</span></div>
                                    <ul>
                                        <li class="single-event" data-start="09:45" data-end="10:45" data-content="event-abs-circuit" data-event="event-1">
                                            <a href="#0">
                                                <em class="event-name">Abs Circuit</em>
                                            </a>
                                        </li>

                                        <li class="single-event" data-start="11:00" data-end="12:30" data-content="event-rowing-workout" data-event="event-2">
                                            <a href="#0">
                                                <em class="event-name">Rowing Workout</em>
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                                <li class="events-group">
                                    <div class="top-info"><span>Tuesday</span></div>

                                    <ul>
                                        <li class="single-event" data-start="10:00" data-end="11:00" data-content="event-rowing-workout" data-event="event-2">
                                            <a href="#0">
                                                <em class="event-name">Rowing Workout</em>
                                            </a>
                                        </li>

                                        <li class="single-event" data-start="11:30" data-end="13:00" data-content="event-restorative-yoga" data-event="event-4">
                                            <a href="#0">
                                                <em class="event-name">Restorative Yoga</em>
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                                <li class="events-group">
                                    <div class="top-info"><span>Wednesday</span></div>

                                    <ul>
                                        <li class="single-event" data-start="09:00" data-end="10:15" data-content="event-restorative-yoga" data-event="event-4">
                                            <a href="#0">
                                                <em class="event-name">Restorative Yoga</em>
                                            </a>
                                        </li>

                                        <li class="single-event" data-start="10:45" data-end="11:45" data-content="event-yoga-1" data-event="event-3">
                                            <a href="#0">
                                                <em class="event-name">Yoga Level 1</em>
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                                <li class="events-group">
                                    <div class="top-info"><span>Thursday</span></div>

                                    <ul>
                                        <li class="single-event" data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1">
                                            <a href="#0">
                                                <em class="event-name">Abs Circuit</em>
                                            </a>
                                        </li>

                                        <li class="single-event" data-start="12:00" data-end="13:45" data-content="event-restorative-yoga" data-event="event-4">
                                            <a href="#0">
                                                <em class="event-name">Restorative Yoga</em>
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                                <li class="events-group">
                                    <div class="top-info"><span>Friday</span></div>

                                    <ul>
                                        <li class="single-event" data-start="10:00" data-end="11:00" data-content="event-rowing-workout" data-event="event-2">
                                            <a href="#0">
                                                <em class="event-name">Rowing Workout</em>
                                            </a>
                                        </li>

                                        <li class="single-event" data-start="12:30" data-end="14:00" data-content="event-abs-circuit" data-event="event-1">
                                            <a href="#0">
                                                <em class="event-name">Abs Circuit</em>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <!--        -->
                                <li class="events-group">
                                    <div class="top-info"><span>Saturday</span></div>
                                    <ul>
                                        <li class="single-event" data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1">
                                            <a href="#0">
                                                <em class="event-name">Abs Circuit</em>
                                            </a>
                                        </li>


                                    </ul>
                                </li>

                                <li class="events-group">
                                    <div class="top-info"><span>Sunday</span></div>
                                    <ul>
                                        <li class="single-event" data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1">
                                            <a href="#0">
                                                <em class="event-name">Abs Circuit</em>
                                            </a>
                                        </li>

                                        <li class="single-event" data-start="11:00" data-end="12:30" data-content="event-rowing-workout" data-event="event-2">
                                            <a href="#0">
                                                <em class="event-name">Rowing Workout</em>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                               --}}
                            </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>
        </div>
        @include('patient-appointment.event-modal')
    </div>
    @include('layouts.delete_modal')

@endsection

@section('one_page_js')
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
    {{-- <script src="https://code.jquery.com/jquery-2.1.4.min.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 type="text/javascript">
        var dp = new DayPilot.Calendar("dp", {
            locale: "en-us",
            columnWidthSpec: "Auto",
            viewType: "Resources",
            headerLevels: 1,
            headerHeight: 30,
            cellDuration: 15,
            cellHeight: 20,
            crosshairType: "Header",
            businessBeginsHour: 0,
            businessEndsHour: 24,
            dayBeginsHour: 0,
            dayEndsHour: 24,
            showCurrentTime: false,
            eventArrangement: "Cascade",
            allowEventOverlap: true,
            timeRangeSelectedHandling: "Enabled",
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
                const dp = args.control;
                dp.clearSelection();
                if (modal.canceled) {
                    return;
                }
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    text: modal.result,
                    resource: args.resource
                });
            },
            
            eventDeleteHandling: "Update",
            onEventDeleted: (args) => {
                args.control.message("Event deleted: " + args.e.text());
            },
            eventMoveHandling: "Update",
            onEventMoved: (args) => {
                args.control.message("Event moved: " + args.e.text());
            },
            eventResizeHandling: "Update",
            onEventResized: (args) => {
                args.control.message("Event resized: " + args.e.text());
            },
            eventClickHandling: "Edit",
            eventEditHandling: "Update",
            onEventEdited: (args) => {
                args.control.message("Event edited: " + args.e.text());
            },
            eventHoverHandling: "Bubble",
            contextMenu: new DayPilot.Menu({
                items: [{
                    text: "Delete",
                    onClick: (args) => {
                        const dp = args.source.calendar;
                        dp.events.remove(args.source);
                    }
                }]
            }),
            bubble: new DayPilot.Bubble({
                onLoad: (args) => {
                    // if event object doesn't specify "bubbleHtml" property 
                    // this onLoad handler will be called to provide the bubble HTML
                    args.html = "Event details";
                }
            }),
        });

        dp.columns = [{
                "name": "Resource 1",
                "id": "R1"
            },
            {
                "name": "Resource 2",
                "id": "R2"
            },
            {
                "name": "Resource 3",
                "id": "R3"
            }
        ];

        dp.init();
    </script> --}}

    <script>
        $(document).ready(function() {
            jQuery(document).ready(function($) {
                var transitionEnd = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
                var transitionsSupported = ($('.csstransitions').length > 0);
                //if browser does not support transitions - use a different event to trigger them
                if (!transitionsSupported) transitionEnd = 'noTransition';

                //should add a loding while the events are organized 

                function SchedulePlan(element) {
                    this.element = element;
                    this.timeline = this.element.find('.timeline');
                    this.timelineItems = this.timeline.find('li');
                    this.timelineItemsNumber = this.timelineItems.length;
                    this.timelineStart = getScheduleTimestamp(this.timelineItems.eq(0).text());
                    //need to store delta (in our case half hour) timestamp
                    this.timelineUnitDuration = getScheduleTimestamp(this.timelineItems.eq(1).text()) - getScheduleTimestamp(this.timelineItems.eq(0).text());

                    this.eventsWrapper = this.element.find('.events');
                    this.eventsGroup = this.eventsWrapper.find('.events-group');
                    this.singleEvents = this.eventsGroup.find('.single-event');
                    this.eventSlotHeight = this.eventsGroup.eq(0).children('.top-info').outerHeight();

                    this.modal = this.element.find('.event-modal');
                    this.modalHeader = this.modal.find('.header');
                    this.modalHeaderBg = this.modal.find('.header-bg');
                    this.modalBody = this.modal.find('.body');
                    this.modalBodyBg = this.modal.find('.body-bg');
                    this.modalMaxWidth = 800;
                    this.modalMaxHeight = 480;

                    this.animating = false;

                    this.initSchedule();
                }

                SchedulePlan.prototype.initSchedule = function() {
                    this.scheduleReset();
                    this.initEvents();
                };

                SchedulePlan.prototype.scheduleReset = function() {
                    var mq = this.mq();
                    if (mq == 'desktop' && !this.element.hasClass('js-full')) {
                        //in this case you are on a desktop version (first load or resize from mobile)
                        this.eventSlotHeight = this.eventsGroup.eq(0).children('.top-info').outerHeight();
                        this.element.addClass('js-full');
                        this.placeEvents();
                        this.element.hasClass('modal-is-open') && this.checkEventModal();
                    } else if (mq == 'mobile' && this.element.hasClass('js-full')) {
                        //in this case you are on a mobile version (first load or resize from desktop)
                        this.element.removeClass('js-full loading');
                        this.eventsGroup.children('ul').add(this.singleEvents).removeAttr('style');
                        this.eventsWrapper.children('.grid-line').remove();
                        this.element.hasClass('modal-is-open') && this.checkEventModal();
                    } else if (mq == 'desktop' && this.element.hasClass('modal-is-open')) {
                        //on a mobile version with modal open - need to resize/move modal window
                        this.checkEventModal('desktop');
                        this.element.removeClass('loading');
                    } else {
                        this.element.removeClass('loading');
                    }
                };

                SchedulePlan.prototype.initEvents = function() {
                    var self = this;

                    this.singleEvents.each(function() {
                        //create the .event-date element for each event
                        var durationLabel = '<span class="event-date">' + $(this).data('start') + ' - ' + $(this).data('end') + '</span>';
                        $(this).children('a').prepend($(durationLabel));

                        //detect click on the event and open the modal
                        /* $(this).on('click', 'a', function(event) {
                            event.preventDefault();
                            if (!self.animating) self.openModal($(this));
                        }); */
                    });

                    //close modal window
                    this.modal.on('click', '.close', function(event) {
                        event.preventDefault();
                        if (!self.animating) self.closeModal(self.eventsGroup.find('.selected-event'));
                    });
                    this.element.on('click', '.cover-layer', function(event) {
                        if (!self.animating && self.element.hasClass('modal-is-open')) self.closeModal(self.eventsGroup.find('.selected-event'));
                    });
                };

                SchedulePlan.prototype.placeEvents = function() {
                    var self = this;
                    this.singleEvents.each(function() {
                        //place each event in the grid -> need to set top position and height
                        var start = getScheduleTimestamp($(this).attr('data-start')),
                            duration = getScheduleTimestamp($(this).attr('data-end')) - start;

                        var eventTop = self.eventSlotHeight * (start - self.timelineStart) / self.timelineUnitDuration,
                            eventHeight = self.eventSlotHeight * duration / self.timelineUnitDuration;

                        $(this).css({
                            top: (eventTop - 1) + 'px',
                            height: (eventHeight + 1) + 'px'
                        });
                    });

                    this.element.removeClass('loading');
                };

                SchedulePlan.prototype.openModal = function(event) {
                    var self = this;
                    var mq = self.mq();
                    this.animating = true;

                    //update event name and time
                    this.modalHeader.find('.event-name').text("Patient : " + event.find('.event-name').text());
                    this.modalHeader.find('.event-date').text(event.find('.event-date').text());
                    this.modal.attr('data-event', event.parent().attr('data-event'));

                    console.log(event.parent().attr('data-id'));

                    //fetchSelectedAppointment(event.parent().attr('data-id'));



                    this.element.addClass('modal-is-open');

                    setTimeout(function() {
                        //fixes a flash when an event is selected - desktop version only
                        event.parent('li').addClass('selected-event');
                    }, 10);

                    if (mq == 'mobile') {
                        self.modal.one(transitionEnd, function() {
                            self.modal.off(transitionEnd);
                            self.animating = false;
                        });
                    } else {
                        var eventTop = event.offset().top - $(window).scrollTop(),
                            eventLeft = event.offset().left,
                            eventHeight = event.innerHeight(),
                            eventWidth = event.innerWidth();

                        var windowWidth = $(window).width(),
                            windowHeight = $(window).height();

                        var modalWidth = (windowWidth * .8 > self.modalMaxWidth) ? self.modalMaxWidth : windowWidth * .8,
                            modalHeight = (windowHeight * .8 > self.modalMaxHeight) ? self.modalMaxHeight : windowHeight * .8;

                        var modalTranslateX = parseInt((windowWidth - modalWidth) / 2 - eventLeft),
                            modalTranslateY = parseInt((windowHeight - modalHeight) / 2 - eventTop);

                        var HeaderBgScaleY = modalHeight / eventHeight,
                            BodyBgScaleX = (modalWidth - eventWidth);

                        //change modal height/width and translate it
                        self.modal.css({
                            top: eventTop + 'px',
                            left: eventLeft + 'px',
                            height: modalHeight + 'px',
                            width: modalWidth + 'px',
                        });
                        transformElement(self.modal, 'translateY(' + modalTranslateY + 'px) translateX(' + modalTranslateX + 'px)');

                        //set modalHeader width
                        self.modalHeader.css({
                            width: eventWidth + 'px',
                        });
                        //set modalBody left margin
                        self.modalBody.css({
                            marginLeft: eventWidth + 'px',
                        });

                        //change modalBodyBg height/width ans scale it
                        self.modalBodyBg.css({
                            height: eventHeight + 'px',
                            width: '1px',
                        });
                        transformElement(self.modalBodyBg, 'scaleY(' + HeaderBgScaleY + ') scaleX(' + BodyBgScaleX + ')');

                        //change modal modalHeaderBg height/width and scale it
                        self.modalHeaderBg.css({
                            height: eventHeight + 'px',
                            width: eventWidth + 'px',
                        });
                        transformElement(self.modalHeaderBg, 'scaleY(' + HeaderBgScaleY + ')');

                        self.modalHeaderBg.one(transitionEnd, function() {
                            //wait for the  end of the modalHeaderBg transformation and show the modal content
                            self.modalHeaderBg.off(transitionEnd);
                            self.animating = false;
                            self.element.addClass('animation-completed');
                        });
                    }

                    //if browser do not support transitions -> no need to wait for the end of it
                    if (!transitionsSupported) self.modal.add(self.modalHeaderBg).trigger(transitionEnd);
                };

                SchedulePlan.prototype.closeModal = function(event) {
                    var self = this;
                    var mq = self.mq();

                    this.animating = true;

                    if (mq == 'mobile') {
                        this.element.removeClass('modal-is-open');
                        this.modal.one(transitionEnd, function() {
                            self.modal.off(transitionEnd);
                            self.animating = false;
                            self.element.removeClass('content-loaded');
                            event.removeClass('selected-event');
                        });
                    } else {
                        var eventTop = event.offset().top - $(window).scrollTop(),
                            eventLeft = event.offset().left,
                            eventHeight = event.innerHeight(),
                            eventWidth = event.innerWidth();

                        var modalTop = Number(self.modal.css('top').replace('px', '')),
                            modalLeft = Number(self.modal.css('left').replace('px', ''));

                        var modalTranslateX = eventLeft - modalLeft,
                            modalTranslateY = eventTop - modalTop;

                        self.element.removeClass('animation-completed modal-is-open');

                        //change modal width/height and translate it
                        this.modal.css({
                            width: eventWidth + 'px',
                            height: eventHeight + 'px'
                        });
                        transformElement(self.modal, 'translateX(' + modalTranslateX + 'px) translateY(' + modalTranslateY + 'px)');

                        //scale down modalBodyBg element
                        transformElement(self.modalBodyBg, 'scaleX(0) scaleY(1)');
                        //scale down modalHeaderBg element
                        transformElement(self.modalHeaderBg, 'scaleY(1)');

                        this.modalHeaderBg.one(transitionEnd, function() {
                            //wait for the  end of the modalHeaderBg transformation and reset modal style
                            self.modalHeaderBg.off(transitionEnd);
                            self.modal.addClass('no-transition');
                            setTimeout(function() {
                                self.modal.add(self.modalHeader).add(self.modalBody).add(self.modalHeaderBg).add(self.modalBodyBg).attr('style', '');
                            }, 10);
                            setTimeout(function() {
                                self.modal.removeClass('no-transition');
                            }, 20);

                            self.animating = false;
                            self.element.removeClass('content-loaded');
                            event.removeClass('selected-event');
                        });
                    }

                    //browser do not support transitions -> no need to wait for the end of it
                    if (!transitionsSupported) self.modal.add(self.modalHeaderBg).trigger(transitionEnd);
                }

                SchedulePlan.prototype.mq = function() {
                    //get MQ value ('desktop' or 'mobile') 
                    var self = this;
                    return window.getComputedStyle(this.element.get(0), '::before').getPropertyValue('content').replace(/["']/g, '');
                };

                SchedulePlan.prototype.checkEventModal = function(device) {
                    this.animating = true;
                    var self = this;
                    var mq = this.mq();

                    if (mq == 'mobile') {
                        //reset modal style on mobile
                        self.modal.add(self.modalHeader).add(self.modalHeaderBg).add(self.modalBody).add(self.modalBodyBg).attr('style', '');
                        self.modal.removeClass('no-transition');
                        self.animating = false;
                    } else if (mq == 'desktop' && self.element.hasClass('modal-is-open')) {
                        self.modal.addClass('no-transition');
                        self.element.addClass('animation-completed');
                        var event = self.eventsGroup.find('.selected-event');

                        var eventTop = event.offset().top - $(window).scrollTop(),
                            eventLeft = event.offset().left,
                            eventHeight = event.innerHeight(),
                            eventWidth = event.innerWidth();

                        var windowWidth = $(window).width(),
                            windowHeight = $(window).height();

                        var modalWidth = (windowWidth * .8 > self.modalMaxWidth) ? self.modalMaxWidth : windowWidth * .8,
                            modalHeight = (windowHeight * .8 > self.modalMaxHeight) ? self.modalMaxHeight : windowHeight * .8;

                        var HeaderBgScaleY = modalHeight / eventHeight,
                            BodyBgScaleX = (modalWidth - eventWidth);

                        setTimeout(function() {
                            self.modal.css({
                                width: modalWidth + 'px',
                                height: modalHeight + 'px',
                                top: (windowHeight / 2 - modalHeight / 2) + 'px',
                                left: (windowWidth / 2 - modalWidth / 2) + 'px',
                            });
                            transformElement(self.modal, 'translateY(0) translateX(0)');
                            //change modal modalBodyBg height/width
                            self.modalBodyBg.css({
                                height: modalHeight + 'px',
                                width: '1px',
                            });
                            transformElement(self.modalBodyBg, 'scaleX(' + BodyBgScaleX + ')');
                            //set modalHeader width
                            self.modalHeader.css({
                                width: eventWidth + 'px',
                            });
                            //set modalBody left margin
                            self.modalBody.css({
                                marginLeft: eventWidth + 'px',
                            });
                            //change modal modalHeaderBg height/width and scale it
                            self.modalHeaderBg.css({
                                height: eventHeight + 'px',
                                width: eventWidth + 'px',
                            });
                            transformElement(self.modalHeaderBg, 'scaleY(' + HeaderBgScaleY + ')');
                        }, 10);

                        setTimeout(function() {
                            self.modal.removeClass('no-transition');
                            self.animating = false;
                        }, 20);
                    }
                };

                var schedules = $('.cd-schedule');
                var objSchedulesPlan = [],
                    windowResize = false;

                if (schedules.length > 0) {
                    schedules.each(function() {
                        //create SchedulePlan objects
                        objSchedulesPlan.push(new SchedulePlan($(this)));
                    });
                }

                $(window).on('resize', function() {
                    if (!windowResize) {
                        windowResize = true;
                        (!window.requestAnimationFrame) ? setTimeout(checkResize): window.requestAnimationFrame(checkResize);
                    }
                });

                $(window).keyup(function(event) {
                    if (event.keyCode == 27) {
                        objSchedulesPlan.forEach(function(element) {
                            element.closeModal(element.eventsGroup.find('.selected-event'));
                        });
                    }
                });

                function checkResize() {
                    objSchedulesPlan.forEach(function(element) {
                        element.scheduleReset();
                    });
                    windowResize = false;
                }

                function getScheduleTimestamp(time) {
                    //accepts hh:mm format - convert hh:mm to timestamp
                    time = time.replace(/ /g, '');
                    var timeArray = time.split(':');
                    var timeStamp = parseInt(timeArray[0]) * 60 + parseInt(timeArray[1]);
                    return timeStamp;
                }

                function transformElement(element, value) {
                    element.css({
                        '-moz-transform': value,
                        '-webkit-transform': value,
                        '-ms-transform': value,
                        '-o-transform': value,
                        'transform': value
                    });
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            /* Right Click Options */
            // Trigger action when the contexmenu is about to be shown
            $("#main-scheduler").bind("contextmenu", function(event) {
                // Avoid the real one
                event.preventDefault();
                // Show contextmenu
                $(".custom-menu").finish().toggle(100).
                // In the right position (the mouse)
                css({
                    top: event.pageY - 120 + "px",
                    left: event.pageX - 116 + "px"
                });
            });


            // If the document is clicked somewhere
            $("#main-scheduler").bind("mousedown", function(e) {
                // If the clicked element is not the menu
                if (!$(e.target).parents(".custom-menu").length > 0) {
                    // Hide it
                    $(".custom-menu").hide(100);
                }
            });


            // If the menu element is clicked
            $(".custom-menu li").click(function() {
                // This is the triggered action name
                switch ($(this).attr("data-action")) {
                    // A case for each action. Your actions here
                    case "first":
                        alert("first");
                        break;
                    case "second":
                        alert("second");
                        break;
                    case "third":
                        alert("third");
                        break;
                }
                // Hide it AFTER the action was triggered
                $(".custom-menu").hide(100);
            });

            $("#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) {                        
                        $('#patient_name_modal').html("Patient: " + response.user.name);
                        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.photo);
                        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);
                        $('#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);
                        //console.log(a_time);

                    }
                });
            });

            /* 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) {
                    console.log(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);

                }

            });                
            } */


            $(document).ready(function() {
                "use strict";
                $(document).on('change', '#doctor_id_edit, #appointment_date_edit', function() {
                    let userId = $('#doctor_id_edit').val();
                    let appointmentDate = $('#appointment_date_edit').val();
                    let siteUrl = $('meta[name="site-url"]').attr('content');
                    let url = siteUrl + '/patient-appointments/get-schedule/doctorwise';
                    if (userId && appointmentDate) {
                        $.get(url, {
                                userId,
                                appointmentDate
                            },
                            function(data, status) {
                                $('#appointment_slot_edit').html(data);
                            });
                    }
                });
            });

        });
    </script>
@endsection