@extends('layouts.layout')
@section('one_page_css')
    {{-- <link href="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.css" rel="stylesheet"> --}}

    {{-- <style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        p {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 20px;
        }


        input:hover,
        input:focus {
            outline: none
        }

        section {
            float: left;
            position: relative;
            width: 100%;
        }

        iframe {
            width: 100%;
            border: 0;
        }

        i {
            font-style: italic
        }

        img {
            height: auto
        }

        :-webkit-input-placeholder,
        :-webkit-textarea-placeholder {
            opacity: 1
        }

        :-moz-placeholder {
            opacity: 1
        }

        :-ms-input-placeholder,
        :-ms-textarea-placeholder {
            opacity: 1
        }




        textarea {
            max-width: 100%;
            min-height: 90px;
            padding: 20px;
        }

        strong {
            font-weight: 800
        }

        .ca-button {
            font-size: 16px;
            height: 35px;
            line-height: 35px;
            color: #FFF;
            border: 0;
            padding: 0 20px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

        img {
            max-width: 100%
        }

        ::placeholder {
            /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: #b8b8b8;
            opacity: 1;
            /* Firefox */
        }

        :-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: #b8b8b8;
        }

        ::-ms-input-placeholder {
            /* Microsoft Edge */
            color: #b8b8b8;
        }

        a:focus,
        a:hover {
            color: #2d313d;
        }

        /*=============== Cross Browser Compatibility ===================*/
        a,
        .custom-btn,
        .header-search button,
        .sidemenu,
        .status-box,
        .status-box:before,
        .status-box i,
        .sm-status,
        .sm-status:before,
        .sm-status i {
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
        }


        .console-user img {
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
        }


        .console-schedular {
            width: 100%;
            margin: 0 auto;
            background: #FFF;
            padding: 8px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
            -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
        }

        /*=========== Schedular Filters =============*/
        .schedular-filters {
            display: flex;
            margin: 0 0 15px;
        }

        .vehicle-type {
            display: flex;
        }

        .vehicle-type button {
            margin: 0px 10px;
        }

        .vehicle-type {
            flex-basis: 250px
        }

        .date-changer {
            margin-left: auto;
        }

        .schedular-body {
            display: grid;
            grid-template-areas: 'grid1 grid2 grid2 grid2 grid2 ';
            min-height: calc(100vh - 305px);
        }

        .date-changer input.new-datepicker {
            background: #ffffff;
            border: 0;
            margin: 0;
            font-size: 14px;
            height: 40px;
            color: #8a8a8a;
            flex: auto;
            width: 100%;
            border-radius: 0;
        }

        .date-changer .custom-btn~.custom-btn {
            margin: 0
        }

        .date-changer .custom-btn,
        .date-changer .custom-btn:hover,
        .date-changer .custom-btn:focus,
        .date-changer .custom-btn:active {
            height: 100%;
            border-radius: 0;
            line-height: 28px;
            text-align: center;
            background: #f5f6fa;
            color: #7b7b7b;
        }

        .date-changer .custom-btn i {
            margin: 0
        }

        .vehicle-type .select2-container--default .select2-selection--single {
            height: 40px;
            background: #ecf1f2;
            border-color: #ddd;
        }

        .vehicle-type .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 38px;
            font-size: 15px;
            color: #8a8a97;
        }

        .vehicle-type .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px
        }

        /*=========== Vehicle Information =============*/
        .vehicles-info {
            width: 250px;
            background: #f5f6fa;
            overflow: hidden;
            padding: 0 20px;
            margin-right: 10px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

        .vehicles-info h3 {
            background: #edeef2;
            font-size: 16px;
            color: #6f7480;
            font-weight: 400;
            text-align: center;
            padding: 13px 10px;
            margin: 0 -20px 10px;
            -webkit-border-radius: 5px 5px 0 0;
            -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
        }

        .car {
            margin: 0 0 10px;
            background: #FFF;
            width: 100%;
            padding: 15px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.06);
            -moz-box-shadow: 0 0 13px rgba(0, 0, 0, 0.06);
            box-shadow: 0 0 13px rgba(0, 0, 0, 0.06);
        }

        .car-top {
            display: flex;
            width: 100%;
            align-items: flex-end;
        }

        .car-top span {
            font-size: 12px;
            background: #4786ff;
            padding: 3px 5px;
            color: #FFF;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

        .car i {
            margin-left: auto;
            font-style: normal;
            font-size: 12px;
            color: #6f7480;
        }

        .car-bottom {
            display: flex;
            align-items: center;
            margin-top: 7px;
        }

        .car-bottom h5 {
            font-size: 16px;
            color: #282828;
            margin: 0;
        }

        .main-schedular {
            background: #f5f6fa;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            overflow: auto;
        }

        /*=========== Timeslot Grids =============*/
        .grids-head {
            display: flex;
            margin: 10px;
        }

        .grids {
            overflow: auto;
            height: 100%;
        }

        .timeslot:before {
            display: none;
            content: "";
            position: absolute;
            right: 0;
            width: 1px;
            height: 80%;
            opacity: 0.7;
            top: 10%;
            background: linear-gradient(transparent, #cdcdcd, transparent);
        }

        .timeslot {
            min-width: 100px;
            text-align: center;
            position: relative;
            font-size: 15px;
            padding: 11px 10px;
            margin: 0 1px;
            background: #FFF;
            cursor: pointer;
            color: #000;
            font-weight: bold;
        }

        .grids-row {
            display: flex;
            margin-bottom: 10px;
        }

        .grids-body {
            margin: 0 10px;
            position: relative;
            width: fit-content;
            width: -moz-fit-content;

        }

        .grids-row .timeslot {
            line-height: 61px;
            font-size: 20px;
            padding: 10px;
            color: rgba(0, 0, 0, 0.1);
            margin: 0 1px;
        }

        .grids-row .timeslot:hover {
            color: #999
        }

        .ui-draggable-dragging {
            opacity: 0.8;
            border: 1px solid #FFF;
            z-index: 2;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /*=========== Ride =============*/
        .ride {
            width: 100px;
            height: 77px;
            background: #fcedef;
            color: #c26370;
            z-index: 1;
            position: absolute;
            display: flex;
            align-items: center;
            left: 0;
            top: 2px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-transition: all 0.1s;
            -moz-transition: all 0.1s;
            transition: all 0.1s;
        }

        .ride:hover {
            z-index: 10
        }

        .passenger-info ul {
            list-style: none;
            font-size: 12px;
        }

        .passenger-info ul li {
            margin: 0 0 4px;
            line-height: 1.2;
        }

        .passenger-info ul li {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .passenger-info ul li strong {
            font-size: 14px;
            font-weight: 500;
        }

        .passenger-info ul li:last-child {
            margin: 0
        }

        .passenger-info ul li a {
            color: inherit
        }

        .passenger-info {
            padding: 0px 15px;
            flex-basis: 100%;
            min-width: 100px;
            overflow-x: scroll;
            margin-top: 10px;
        }

        .passenger-info ul li i {
            margin-right: 5px;
            font-size: 14px;
        }


        .assign-driver span {
            display: table;
            font-size: 13px;
            margin-bottom: 10px;
            width: 100%;
        }

        .custom-btn {
            font-size: 12px;
            background: #4786ff;
            color: #FFF;
            display: inline-block;
            padding: 5px 10px;
            font-family: poppins;
            height: auto;
            position: relative;
            white-space: nowrap;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            line-height: 1.4;
        }

        .custom-btn i {
            margin-right: 7px;
            font-size: 13px;
            vertical-align: middle;
            font-weight: 800;
        }

        .custom-btn:hover,
        .custom-btn:focus,
        .custom-btn:active {
            color: #FFF
        }

        .short-ride .assign-driver span {
            display: none
        }

        .short-ride .assign-driver {
            position: absolute;
            top: 50%;
            padding: 0;
            left: 100%;
            z-index: 1;
            white-space: nowrap;
            opacity: 0;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            transform: translateY(-50%);
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            transition: all 0.3s linear;
        }

        .short-ride .passenger-info {
            width: 100%
        }

        .short-ride:hover .assign-driver {
            opacity: 1
        }

        .short-ride .assign-driver .custom-btn:before {
            content: "";
            width: 10px;
            height: 10px;
            background: inherit;
            position: absolute;
            left: -5px;
            top: 9px;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .ride.assigned {
            background: #caefc8;
            color: #158854;
        }

        .ride.return {
            background: #fff2be;
            color: #948133;
        }

        .ride.maintenance {
            background: #f1f3fb;
            color: #8d8f96;
        }

        .ride.preparation {
            background: #FBF2E9;
            color: #94887c;
        }

        .ride.service {
            background: #F5F0F0;
            color: #9a9494;
        }

        .driver-info {
            margin-left: auto;
            background: #FFF;
            margin-right: 5px;
            margin-top: 5px;
            flex-basis: auto;
            margin-bottom: 5px;
            padding: 15px 10px 15px 30px;
            position: relative;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        .driver-info ul {
            list-style: none;
            font-size: 12px;
            white-space: nowrap;
        }

        .driver-info ul li {
            margin: 0 0 4px;
            line-height: 1.2;
        }

        .driver-info ul li strong {
            font-size: 15px;
            font-weight: 500;
        }

        .driver-info ul li:last-child {
            margin: 0
        }

        .driver-info ul li i,
        .driver-info ul li img {
            margin-right: 5px;
            font-size: 14px;
            font-style: normal;
        }

        .driver-info ul li img {
            width: 35px;
            position: absolute;
            left: -14px;
            border: 2px solid #FFF;
            top: 50%;
            margin-top: -18px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .short-ride .driver-info {
            position: absolute;
            left: 100%;
            top: 0;
            opacity: 0;
            visibility: hidden;
            z-index: 2;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            transition: all 0.3s linear;
        }

        .short-ride:hover .driver-info {
            opacity: 1;
            visibility: visible;
        }

        .short-ride .driver-info:before {
            content: "";
            position: absolute;
            left: -5px;
            top: 30px;
            width: 10px;
            height: 10px;
            background: #FFF;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .passenger-info.complete-add {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            display: none;
            height: 100%;
            z-index: 1;
            background: inherit;
            font-weight: 500;
            min-width: 0;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        .passenger-info.complete-add ul li {
            margin: 0;
            max-width: none;
            text-overflow: unset;
            overflow: visible;
            white-space: unset;
        }

        .ride-menu {
            position: absolute;
            left: 0;
            top: 0;
            visibility: hidden;
            opacity: 0;
            z-index: 11;
            background: #FFF;
            width: 234px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .ride-menu.show {
            opacity: 1;
            visibility: visible;
        }

        .menu-title {
            background: linear-gradient(to right, #6ec0fe, #1386de);
            padding: 8px 15px;
            -webkit-border-radius: 5px 5px 0 0;
            -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
        }

        .menu-title h4 {
            color: #FFF;
            margin: 0 0 2px;
            font-family: barlow;
            font-size: 20px;
            font-weight: 500;
            line-height: 1.2;
        }

        .menu-title p {
            margin: 0;
            color: rgba(255, 255, 255, 0.6);
            font-size: 12px;
            display: none;
        }

        .ride-menu ul {
            list-style: none;
            padding: 10px 0 0;
            font-size: 14px;
            color: #9ea4b0;
        }

        .ride-menu ul li {
            font-size: 14px;
        }

        .ride-menu ul li a {
            padding: 5px 20px;
            width: 100%;
            display: inline-block;
        }

        .ride-menu ul li i {
            font-size: 18px;
            vertical-align: middle;
            margin-right: 6px;
        }

        .ride-menu ul li.bordered {
            border-top: 1px solid #e2e8f1
        }

        .ride-menu ul li a:hover {
            background: #e2e8f1
        }

        .ride-options ul {
            padding: 10px 0
        }

        .other-info {
            padding: 5px;
            width: 100%;
            text-align: center;
            line-height: 1;
        }

        .other-info i {
            display: block;
            font-size: 21px;
            line-height: 1;
        }

        .other-info span {
            font-size: 14px;
            line-height: 1.3;
            margin: 5px 0 0;
            display: block;
        }

        .hidden {
            display: none
        }

        .short-ride-info {
            position: absolute;
            margin-top: 0px;
            left: 0;
            color: currentColor;
            top: 100%;
            width: auto;
            display: flex;
            background: #FFF;
            padding: 10px 20px;
            white-space: nowrap;
            opacity: 0;
            z-index: 1;
            visibility: hidden;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            transition: all 0.3s linear;
        }

        .short-ride:hover .short-ride-info {
            opacity: 1;
            visibility: visible;
        }

        .short-ride-info ul {
            list-style: none;
            font-size: 13px;
            max-width: 270px;
            white-space: normal;
            width: max-content;
        }

        .short-ride-info:before {
            content: "";
            position: absolute;
            left: 20px;
            width: 10px;
            height: 10px;
            top: -5px;
            background: inherit;
            margin-left: -5px;
            -webkit-transform: rotateZ(45deg);
            -moz-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
        }

        .short-ride-info ul li strong {
            font-weight: 500;
            font-size: 14px;
        }

        .droppable {
            width: calc(100% - 20%);
            height: calc(100% - 20%);
            position: absolute;
            left: 10%;
            top: 10%;
            z-index: 2;
        }

        /*=========== Custom Modal =============*/
        .custom-modal .modal-header {
            background: linear-gradient(to right, #1386de, #6ec0fe);
            padding: 12px 20px;
            border: 0;
            -webkit-border-radius: 4px 4px 0 0;
            -moz-border-radius: 4px 4px 0 0;
            border-radius: 4px 4px 0 0;
        }

        .custom-modal .modal-title {
            line-height: 1
        }

        .custom-modal .modal-title h4 {
            /*    margin: 0 0 10px;*/
            color: #FFF;
            margin: 0;
            font-size: 25px;
            font-weight: 500;
            font-family: barlow;
        }

        .custom-modal .modal-title span {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.5);
            font-family: barlow;
            display: none;
        }

        .custom-modal .modal-body {
            max-height: calc(100vh - 210px);
            overflow: auto;
        }

        .modal.custom-dialog {
            align-items: center;
            display: flex !important;
        }

        .custom-modal .modal-dialog {
            display: flex;
            align-items: center;
            height: 100%;
            margin: 0 auto;
        }

        .modal-content {
            flex: 1;
            width: 100%;
            border: 0;
        }

        .custom-form .form-group input,
        .custom-form .form-group input:focus,
        .custom-form .form-group textarea,
        .custom-form .form-group textarea:focus {
            margin: 0;
            background: #f5f6fa;
            align-items: center;
            font-family: poppins;
            border: 1px solid #ebecf1;
            font-size: 12px;
            color: #a8a8aa;
            padding: 10px 10px;
        }

        .custom-form .form-group textarea {
            min-height: 100px;
        }

        .custom-form .col-form-label {
            color: #8c8c8c;
            font-size: 15px;
            font-weight: 400;
        }

        .custom-form .form-group textarea {
            min-height: 100px;
            padding: 10px;
        }

        .custom-modal .modal-footer {
            background: #f5f6fa;
            padding: 10px 10px;
            -webkit-border-radius: 0 0 5px 5px;
            -moz-border-radius: 0 0 5px 5px;
            border-radius: 0 0 5px 5px;
        }

        .color2 {
            background-color: #ce5263 !important
        }

        .custom-form .select2-container {
            width: 100% !important
        }

        .custom-modal .select2-container--default .select2-selection--single {
            border-color: #ebecf1;
            background: #f5f6fa;
            border-radius: 2px;
            height: 35px;
        }

        .custom-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 35px;
            color: #a8afb1;
            padding: 0px 10px;
            font-size: 13px;
        }

        .custom-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 33px;
        }

        /*=== Custom Table ===*/
        .table-container {
            width: 100%;
            overflow: auto;
            padding: 2px 1px;
        }

        table.custom-table {
            font-size: 15px;
            width: 100% !important;
            min-width: 500px;
            border: 1px solid #d6d6d6;
        }

        .custom-table thead {
            background: #ebebeb;
            font-size: 15px;
            color: #2d313d;
            font-weight: 500;
        }

        .custom-table thead th {
            padding: 12px;
            white-space: nowrap;
        }

        .custom-table thead tr.bordered th {
            border-right: 1px solid #d6d6d6
        }

        .custom-table thead tr {
            border-bottom: 1px solid #FFF
        }

        table.custom-table td {
            color: #777777;
            padding: 20px 10px;
            border: 1px solid #d6d6d6;
            vertical-align: middle;
            font-size: 12px;
            min-width: 83px;
        }

        table.custom-table td i {
            font-style: normal;
            display: block;
        }

        table.custom-table tr:nth-child(odd) {
            background: #f0f1f0
        }

        td input {
            margin: 0;
        }

        .action {
            display: flex;
            align-items: center;
        }

        /*.custom-table select {
                        margin: 0 2px;
                        height: 23px;
                        border-radius: 20px;
                        color: #777777;
                        border: 1px solid #e0e1e0;
                        padding: 0 6px;
                    }
                    */
        .action .select2 .select2-selection {
            height: 23px;
            border: 1px solid #e0e1e0;
        }

        .action .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 22px;
        }

        .action .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 23px;
        }

        .custom-table td .action input {
            height: 22px;
            font-size: 12px;
            padding: 0 10px;
            margin: 0 2px;
            width: auto;
            min-width: 0;
        }

        .custom-table .action input {
            width: 72px
        }

        .custom-table .action input {
            color: #777777
        }

        a.td-icon {
            margin: 0 6px;
            font-size: 20px;
            color: #cfcfcf;
        }

        .custom-table.style2 thead th {
            padding: 10px;
            font-weight: 500;
            color: #6b8282;
            border: 0;
        }

        table.custom-table.style2 {
            font-size: 12px;
            min-width: 300px;
            margin: 0;
            border: 1px solid #efefef;
        }

        table.custom-table.style2 thead {
            font-size: 13px;
            background: #f8f9f9;
        }

        table.custom-table.style2 thead tr {
            background: none;
        }

        table.custom-table.style2 td {
            padding: 6px 10px;
            font-size: 12px;
            border: 1px solid #efefef;
        }

        table.custom-table.style2 tbody tr:nth-child(odd) {
            background: #f8f9f98c;
        }

        table.custom-table.style2 tbody tr.selected {
            background: #b4defd !important;
        }

        table.custom-table.style2 tbody tr.selected td {
            border-color: #67bdff;
            color: #198ae0;
        }



        @media (max-width:1230px) {
            .custom-table thead {
                font-size: 13px;
            }

            table.custom-table td {
                font-size: 11px;
                min-width: 20px;
                width: 100px;
                word-break: break-all;
            }

            .login-form {
                width: 970px
            }

            .login-left {
                padding: 20px 40px
            }

            a.custom-btn.style2,
            a.custom-btn.style3 {
                min-width: 140px;
                padding: 12px 20px
            }
        }

        @media (max-width:980px) {
            .layout-wrapper {
                padding-left: 60px;
                position: relative;
                float: left;
                width: 100%;
                display: unset;
            }

            .sidemenu {
                position: absolute;
                left: 0;
                z-index: 2;
                height: 100%;
            }

            .login-form {
                margin: 15px 15px;
                display: unset
            }

            p.login-note {
                margin: 40px 0 0
            }

            .login-right {
                width: 100%;
                float: left
            }

            .login-right img {
                width: 100%
            }
        }


        @media (max-width:767px) {
            .content-area {
                padding: 10px;
            }

            .header-dropdown>a {
                width: 100%;
                height: 50px;
                line-height: 50px;
            }

            .layout-wrapper {
                padding-left: 40px
            }

            .sidemenu.active {
                width: 40px;
                min-width: 40px
            }

            .sidemenu.active nav ul li a {
                padding: 7px 13px
            }

            .content-area>.row>div {
                margin: 0 0 10px;
            }

            .sidemenu.active .limo-user {
                padding: 30px 5px 10px;
            }

            .sidemenu.active .limo-user .user-img {
                min-width: 30px;
            }

            header {
                display: unset;
                background: #FFF;
                float: left;
                width: 100%;
            }

            .notifications.has-ddl {
                float: left;
            }

            .notifications .ddl {
                z-index: 100;
                left: 0;
            }

            .header-dropdown.has-ddl {
                width: 100%;
            }

            .bottom {
                display: unset
            }

            .bottom>div {
                float: left !important;
                width: 100%;
                text-align: left !important;
                margin: 0 0 10px
            }

            div#DataTables_Table_0_info {
                text-align: left
            }

            div#DataTables_Table_0_length {
                margin: 0 0 10px
            }

            .dataTables_paginate span {
                width: 100%;
                margin: 10px 0 10px
            }

            .bottom-bar {
                display: unset;
                text-align: center;
                display: inline-block;
                padding: 15px 10px;
                width: 100%;
            }

            .bottom-bar span {
                display: inline-block;
                width: 100%;
            }
        }

        @media (max-width:480px) {
            .login-left {
                padding: 20px
            }

            .login-left h4 {
                font-size: 25px
            }

            .login-left p {
                font-size: 13px
            }

            .field {
                padding: 6px 10px
            }

            .login-credentials {
                margin: 0 0 30px
            }

            .form-help {
                display: table;
                width: 100%
            }

            .remember {
                margin: 0 0 10px
            }
        }

        .grids-head1 .timeslot {
            line-height: 51px;
            /* font-size: 20px; */
            padding: 10px;
            color: rgb(0 0 0);
            margin: 0 1px;
            border: solid 1px #ccc;
            margin-top: 10px;
        }

        .timeslot p {
            color: #000;
            margin: 0px;
        }

        .ride.resize.butNotHere.ui-draggable.ui-draggable-handle.ui-droppable.ui-resizable.selected:hover {
            width: 304px !important;
        }

        .ride.resize.butNotHere.ui-draggable.ui-draggable-handle.ui-droppable.ui-resizable {
            width: 103px !important;
        }
    </style> --}}


    {{-- custom calendar --}}
    <style>
        .codyhouse {
            text-align: center;
            margin: 40px 0;
        }

        /* reset css */
        /* https://meyerweb.com/eric/tools/css/reset/
               v2.0 | 20110126
               License: none (public domain)
            */

        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        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;
        }

        html {
            font-size: 62.5%;
        }

        body {
            font-size: 1.6rem;
            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-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%;
        }

        .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: 2.4rem;
        }

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

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

        .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: 100%;
            width: 100%;
            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: 100%;
            /* 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: 0;
            }

            .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;
        }
    </style>
@endsection

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    @can('doctor-schedule-create')
                        <h3>
                            <a href="{{ route('doctor-schedules.create') }}" class="btn btn-outline btn-info">+ @lang('Add Schedule')</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>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3>@lang('Doctor Schedule')</h3>
                </div>
                <div class="card">
                    <div id="dp">

                    </div>

                    
                    <div class="cd-schedule loading" style="overflow-y: scroll;">
                        <div class="timeline">
                            <ul>
                                <li><span>09:00</span></li>
                                <li><span>09:15</span></li>
                                <li><span>09:30</span></li>
                                <li><span>09:45</span></li>
                                <li><span>10:00</span></li>
                                <li><span>10:15</span></li>
                                <li><span>10:30</span></li>
                                <li><span>09:45</span></li>
                                <li><span>11:00</span></li>
                                <li><span>11:15</span></li>
                                <li><span>11:30</span></li>
                                <li><span>11:45</span></li>
                                <li><span>12:00</span></li>
                                <li><span>12:15</span></li>
                                <li><span>12:30</span></li>
                                <li><span>12:45</span></li>
                                <li><span>13:00</span></li>
                                <li><span>13:15</span></li>
                                <li><span>13:30</span></li>
                                <li><span>13:45</span></li>
                                <li><span>14:00</span></li>
                                <li><span>14:15</span></li>
                                <li><span>14:30</span></li>
                                <li><span>14:45</span></li>
                                <li><span>15:00</span></li>
                                <li><span>15:15</span></li>
                                <li><span>15:30</span></li>
                                <li><span>15:45</span></li>
                                <li><span>16:00</span></li>
                                <li><span>16:15</span></li>
                                <li><span>16:30</span></li>
                                <li><span>16:45</span></li>
                                <li><span>17:00</span></li>
                                <li><span>17:15</span></li>
                                <li><span>17:30</span></li>
                                <li><span>17:45</span></li>
                                <li><span>18:00</span></li>
                                <li><span>18:15</span></li>
                                <li><span>18:30</span></li>
                                <li><span>18:45</span></li>
                                <li><span>19:00</span></li>
                                <li><span>19:15</span></li>
                                <li><span>19:30</span></li>
                                <li><span>19:45</span></li>
                                <li><span>20:00</span></li>
                                <li><span>20:15</span></li>
                                <li><span>20:30</span></li>
                                <li><span>20:45</span></li>
                                <li><span>21:00</span></li>
                            </ul>
                        </div> <!-- .timeline -->

                        <div class="events">
                            <ul class="wrap">

                                @foreach ($doctorSchedules as $doctorSchedule)
                                    <li class="events-group col">
                                        <div class="top-info"><span>{{ optional($doctorSchedule->user)->name ? optional($doctorSchedule->user)->name : 'Deleted Therapist' }}</span></div>
                                        <ul>
                                            <li class="single-event" data-start="{{ \Carbon\Carbon::parse($doctorSchedule->start_time)->format('H:i') }}" data-end="{{ \Carbon\Carbon::parse($doctorSchedule->end_time)->format('H:i') }}" data-content="event-abs-circuit" data-event="event-1">
                                                <a href="#0">
                                                    <em class="event-name">{{ $doctorSchedule->weekday }}</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>
                                @endforeach
  {{-- 
                                <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">
                                    <span class="event-date"></span>
                                    <h3 class="event-name"></h3>
                                </div>

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

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

                            <a href="#0" class="close">Close</a>
                        </div>

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

                </div>
            </div>
        </div>
    </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() {
            /*  $('#datatable').DataTable({
                 scrollY: 200,
                 scrollX: true,
                 stateSave: true,
                 "bDestroy": true,
                 "ordering": false,
                 columnDefs: [{
                     width: 100,
                     targets: 0
                 }],
                 fixedColumns: true,
             }); */
            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(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'));

                    //update event content
                    this.modalBody.find('.event-info').load(event.parent().attr('data-content') + '.html .event-info > *', function(data) {
                        //once the event content has been loaded
                        self.element.addClass('content-loaded');
                    });

                    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>
@endsection