@extends('layouts.site')
@section('headScript')
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ asset('assets/owl/assets/owl.carousel.css') }}">
    <link rel="stylesheet" href="{{ asset('css/Date-Time-Picker-Bootstrap-4/build/css/bootstrap-datetimepicker.min.css') }}">
    <style>
        .fa-star
    {
        color: #ffca08;
    }
    .fa-star-half
    {
        transform: rotate(180deg);
        color: #ffca08;
    }
.fa-star-o
{
    display: none;
}
        .error{
            color:red;
        }
        div.dataTables_wrapper div.dataTables_paginate ul.pagination{
            justify-content: center!important;

        }
        .owl-nav {
            display: block;
        }
        .owl-nav .owl-prev i,.owl-nav .owl-next i{
            font-size: 25px;
            font-weight: 900;
        }
        .owl-nav .owl-prev{
            right: -20px;
        }
        .owl-nav .owl-next{
            left: -20px;
        }
        .owl-nav .owl-prev,.owl-nav .owl-next{
            position: absolute;
            top: 0;
            bottom: 0;
        }
        .owl-carousel .item{
            height: 78px;
        }
        .owl-carousel .item a{
            display: block;
            padding-top: 10px;
        }
        .session-item-block{
            min-height: 190px;
        }
        #timeZone li{
            list-style: none;
        }
        #timeZone li a{
            color:black;
        }

        @media (min-width: 576px){
            .modal-dialog {
                max-width: 550px;
            }
        }
        .bg-dark1{
            background: #666669;
        }

        .add-session-block{
            box-shadow: 0 0 10px rgb(0 0 0 / 26%);
            border-radius: 10px 10px 10px 10px;
        }
        .add-session-block .calender-btn:hover,.add-session-block .add-time-slot-btn:hover,.add-session-block .calender-btn,.add-session-block .add-time-slot-btn{
            color: white;
            height: 78px;
            line-height: 70px;
            font-size: 16px;
        }
        .add-session-block .calender-btn{
            border-radius: 0 10px 10px 0;
            background-color: #3da8c0;
            border-color: #3da8c0;
        }
        .add-session-block .add-time-slot-btn{
            background: #f076fb;
            border-color:#f076fb;
            border-radius: 10px 0 0 10px;
        }
        .session-day-blocks .s-block{
            position: relative;
            box-shadow: 0 0 10px rgb(0 0 0 / 26%);
            border-radius: 5px;
            height: 25px;
            margin-top: 35px;
            padding-right: 7px;
            padding-left: 0px;
        }
        .bg-red {
            background: #f44e4c;
        }
        .bg-blue {
            background: #3da8c0;
        }
        .session-day-blocks .slot-status{
            position: absolute;
            border-radius: 2px;
            padding: 0px 5px;
            top: -25px;
            right: 10px;
            color: white;
        }
       /* .session-day-blocks{
            padding-top: 30px;
            padding-bottom: 30px;
        }*/
        .loading {
            position: relative;
        }
        .loading::after {
            position: absolute;
            background: center 1.7857142857rem no-repeat rgba(255, 255, 255, .5);
            background-image: url(https://cf2.s3.souqcdn.com/public/style/img/loading.gif);
            background-repeat: no-repeat;
            background-position: center center;
            background-color: rgba(250, 250, 250, .8);
            background-size: 1.7857142857rem auto;
        }
        .loading::after {
            display: block!important;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 148;
            content: ' '!important;
            line-height: 0;
        }
        .day,.date,.show-all-times{
            color: #666669;
            font-size: 14px!important;
        }
        .date,.show-all-times{
            font-family: SourceSansPro-bold;
        }
        .show-all-times{
            margin-top: 15px;
            margin-bottom: 15px;
        }
        /**/

        .bootstrap-datetimepicker-widget.dropdown-menu{
            font-size: 1.3rem!important;
        }
        .bootstrap-datetimepicker-widget ul.list-unstyled{
            padding-right: 0;
        }
        table.table-condensed tr td button.btn.btn-primary[data-action="togglePeriod"]{
            position: relative;
            left: -28px;
        }
        .timepicker .timepicker-picker table.table-condensed{
            direction: ltr;
            position: relative;
            left: 35px;
        }
        .table-condensed .fa.fa-clock-o,.table-condensed .fa.fa-calendar{
            font-size: 20px;
        }
        .ui-dialog.ui-corner-all.ui-widget{
            padding: 0;
        }
        .ui-widget-header {
            border: 1px solid #dfb3ff;
            background: #73bffe;
            color: #ffffff;
            font-weight: bold;
        }
        .ui-button-icon-only.ui-dialog-titlebar-close{
            border-color: #b4b4b4;
            background: #ffffff;
            border-radius: 50%;
        }
        .nav-tabs .nav-link, .nav-tabs .nav-link:hover{
            border: none;
            border-bottom: 1px solid transparent;
            font-size: 15px;
            font-weight: bold;
        }
        .nav-tabs .nav-link.active{
            border-color:#b959fe;
        }
        .save-data,.save-data-continuo, .save-schedule-data{
            border-radius: 18px;
            padding: 8px 30px 8px 30px;
            font-size: 15px!important;
        }
        .ui-dialog-title{
            font-size: 20px;
        }
        input[type='text']{
            height: 38px!important;
        }
        .hours-minutes .bootstrap-datetimepicker-widget table td i{
            width: 20px!important;
            height: 20px!important;
            line-height: 20px!important;
        }

        .hours-minutes table td {
            height: 30px;
            line-height: 30px;
            width: 30px;
        }
        .hours-minutes .bootstrap-datetimepicker-widget table td{
            padding:0px;
        }
        .hours-minutes .bootstrap-datetimepicker-widget table td span{
            height: 40px;
            line-height: 40px;
        }
        .hours-minutes div.bootstrap-datetimepicker-widget.bottom ul.list-unstyled li div.timepicker div.timepicker-picker,
        .start-time .bootstrap-datetimepicker-widget.bottom

        {
            /*box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);*/
            box-shadow: 0 0 4px #0000001a;
        }
        .daterange-filter {
            background: none repeat scroll 0 0 #FFFFFF;
            border: 1px solid #CCCCCC;
            cursor: pointer;
            padding: 5px 10px;
        }
        #show-calender{
            width: 100%;
        }
        .modal.left,.modal.right{
            top: 50%;
            border-radius: 0px;
        }
        .modal.left .modal-content,.modal.right .modal-content{
            border-top-left-radius: 10px;
        }
        .modal.left .modal-dialog,
        .modal.right .modal-dialog {
            position: fixed;
            margin: auto;
            width: 435px;
            height: 100%;
            -webkit-transform: translate3d(0%, 0, 0);
            -ms-transform: translate3d(0%, 0, 0);
            -o-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0);
        }

        .modal.left .modal-content,
        .modal.right .modal-content {
            height: 100%;
            overflow-y: auto;
        }

        .modal.left .modal-body,
        .modal.right .modal-body {
            padding: 15px 15px 80px;
        }

        /*Left*/
        .modal.left.fade .modal-dialog{
            left: 0px;
            -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
            -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
            -o-transition: opacity 0.3s linear, left 0.3s ease-out;
            transition: opacity 0.3s linear, left 0.3s ease-out;
        }

        .modal.left.fade.in .modal-dialog{
            left: 0;
        }

        /*Right*/
        .modal.right.fade .modal-dialog {
            right: 0px;
            -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
            -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
            -o-transition: opacity 0.3s linear, right 0.3s ease-out;
            transition: opacity 0.3s linear, right 0.3s ease-out;
        }

        .modal.right.fade.in .modal-dialog {
            right: 0;
        }

        /* ----- MODAL STYLE ----- */
        .modal-content {
            border-radius: 0;
            border: none;
        }

        .modal.right .modal-header {
            border-bottom-color: #388394;
            background-color: #3da8c0;
            color: white;
        }
        .modal.right .modal-header button{
            opacity: 1;
            font-size: 23px;
            color: white;
        }
        .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-right: 3px;
            display: inline-block;
        }
        .bg-orange {
            background: #f4794c;
        }
        .bg-green {
            background: #3bb54a;
        }
        .bg-red {
            background: #f44e4c;
        }
        .bg-dark {
            background: #666669;
        }
        .bg-blue {
            background: #3da8c0;
        }
        .text-orange{
            color:#f4794c;
        }
        .text-green{
            color:#3bb54a;
        }
        .text-red{
            color:#f44e4c;
        }
        .text-dark{
            color:#666669;
        }
        .text-blue{
            color:#3da8c0;
        }
        .session-reserved,.session-available{
            width: 5px;
            height: 5px;
            border-radius: 50%;
        }
        .calender-event-count{
            position: relative;
            top: -6px;
            padding: 0 6px 3px 3px;
            border-radius: 0px 0px 16px 0;
            color: #666669;
            font-size: 11px;
            background: #ccc;
        }
        #calendar{
            padding: 0!important;
        }
        .fc-view.fc-month-view.fc-basic-view thead.fc-head tr td.fc-head-container.fc-widget-header{
            border: none;
            background: #3da8c0;
            color: #fff;
            font-size: 15px;
            font-weight: 400
        }
        .fc-view.fc-month-view.fc-basic-view thead.fc-head tr td.fc-head-container.fc-widget-header .fc-day-header.fc-widget-header{
            border: none;
        }
        .p5 {
            padding: 5px!important;
        }
        .border-offwhite {
            border-color: #ccc!important;
        }
        .border {
            border: 1px solid transparent!important;
        }
        .pointer {
            cursor: pointer;
        }
        .fz18 {
            font-size: 18px!important;
        }
        .fw600 {
            font-weight: 600;
        }
        .fz12 {
            font-size: 12px!important;
        }
        .fz14 {
            font-size: 14px!important;
        }
        .fbold{
            font-weight: bold;
        }
        #sessions-calendar-blocks{
            min-height: 100px;
        }
        .bg-blue1 {
            background: rgba(61,168,192,.1);
        }

        /**/
        @media (max-width: 1200px) {

        }
        @media (max-width: 992px) {

        }
        @media (max-width: 768px) {

        }
        @media (max-width: 576px) {
            /* Styles */
            .calender-btn,.add-time-slot-btn{
                height: 40px!important;
                font-size: 14px!important;
                line-height: 30px!important;

            }
            .calender-btn{
                border-bottom-right-radius: 0px!important;
                border-top-left-radius: 10px!important;
            }
            .add-time-slot-btn{
                border-top-left-radius: 0!important;
                border-bottom-right-radius: 10px!important;
            }
        }


        /**/







        .sec-title {
            color: #3cabbe;
            text-align: right;
            font-weight: bold;
            font-size: 18px;
            margin: 30px 0 15px;
        }

        .sec-tabs,
        .sec-tabs .sec-tab,
        .sec-tabs .sec-tab a {
            border: none;
            outline: none;
            padding: 0
        }

        .sec-tabs .sec-tab a {
            background-color: #ddd;
            border-radius: 50px;
            padding: 2px 15px;
            margin-left: 15px;
            color: #333;
            text-align: center;
        }

        .sec-tabs .sec-tab a.active {
            background-color: #3ba9c0;
            color: #fff
        }

        .next-ses-cont {
            height: auto !important;

        }

        .next-ses {
            text-align: center;
            border: 1px solid #ddd;
            margin-bottom: 30px
        }
        .bg-available{
            background-color: #339c40;
        }
        .bg-reserved{
            background-color: #339c40;
        }
        .bg-cancelled{
            background-color: #f37673;
        }
        .next-ses .ses-title {

            color: #fff;
            text-align: right;
            padding: 5px 20px;
            margin: 0;
            font-size: 14px
        }

        .next-ses .ses-title span {
            float: left
        }

        .next-ses .ses-name {
            background-color: #f5f5f5;
            padding: 10px 20px;
            color: #f0855b;
            font-weight: bold;
            border-bottom: 1px solid #ddd;
            margin: 0
        }

        .time-cont {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: space-between;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px
        }

        .time-cont .date {
            display: inline-block;
            width: 50%;
            border-left: 1px solid #ddd;
            height: 100%;
            margin: 0;
            padding: 20px;
            font-weight: bold;
            font-size: 14px;
            color: #4d4d4f
        }

        .time-cont .date i {
            font-size: 18px;
            margin-bottom: 10px
        }

        .time-cont .time {
            display: inline-block;
            width: 50%;
        }

        .time-cont .time i {
            font-size: 18px;
            color: #4d4d4f
        }

        .time-cont .time p {
            display: inline-block;
            width: 48%;
            margin: 0;
            color: #4d4d4f
        }

        .time-cont .time p:first-of-type {
            color: #67bfd5;
            font-size: 13px;
            width: 30%;
        }

        .time-cont .time p:last-of-type {
            text-align: right;
            font-size: 12px;
            vertical-align: top;
            width: 62%;
        }

       /* .time-cont .time p span {
            margin-right: 9px;
        }*/

        .com-btns {
            display: flex
        }

        .com-btns button {
            width: 100%;
            margin: 0;
            border: none;
            outline: none;
            padding: 5px;
            font-size: 14px;
            color: #fff;
            transition: .1s ease-in-out
        }

        .com-btns button:first-of-type {
            background-color: #cdccc8;
        }

        .com-btns button:last-of-type {
            background-color: #f44f4b;
        }

        .com-btns button:hover {
            opacity: .9
        }

        .select-check {
            margin-bottom: 35px;
            margin-top: 15px
        }

        .select-check label {
            margin-right: 10px
        }

        .select-check input[type=checkbox] {
            width: 15px;
            height: 15px;
        }

        .select-check input[type=checkbox]:checked {
            filter: hue-rotate(328deg);
        }

        .table-sec {
            background-color: #f5f5f5;
            text-align: center;
            border: 1px solid #d2d6d7
        }

        .table-sec thead {
            background-color: #ecf6f8;
            color: #f87757;
            border: none
        }

        .table-sec tr,
        .table-sec td,
        .table-sec thead th {
            border: none;
            font-size: 14px
        }

        .table-sec tr .done {
            color: #54a272
        }

        .table-sec tr .none {
            color: #f87757
        }
        @media screen and (max-width:765px) {
            div.dataTables_wrapper div.dataTables_filter{
                text-align: right!important;
            }
            .calender-event-count{
                top: 0px!important;
            }
            .sec-tabs .sec-tab {
                width: 100%;
                margin: 7px 0;
                text-align: center
            }

            .sec-tabs .sec-tab a {
                margin: 0;
                padding: 15px 0px;
            }

            .select-check {
                margin: 7px 0
            }

            .time-cont .time p:last-of-type {
                width: 66%;
            }

            .next-ses-cont {
                margin-top: 30px;
            }
            #calendar,#sessions-calendar-blocks{
                padding-left: 3rem!important;
            }

        }
        .bg-offwhite1 {
            background: #f5f5f5;
        }
        .text-orange1{
            color: #f44e4c;
        }
        .ui-dialog {
            z-index: 99999999!important;
        }
    </style>
@endsection
@section('content')
    <section>
        <div class="lgx-banner lgx-banner-inner">
            <div class="lgx-inner-bg">
                <div class="lgx-inner">
                    <div class="container bartopline">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="lgx-heading-area mt-3">
                                    <ul class="breadcrumb">

                                        @if(config('app.locale') == "ar")
                                            <li><a href="{{ route('index') }}"><i class="icon-home6"></i>{{trans('home.home')}}</a></li>
                                            <li class="active">@lang('home.sessions')</li>
                                        @else
                                            <li class="active">@lang('home.sessions')</li>
                                            <li><a href="{{ route('index') }}"><i class="icon-home6"></i>{{trans('home.home')}}</a></li>
                                        @endif
                                    </ul>
                                </div>
                            </div>
                        </div><!--//.ROW-->
                    </div><!-- //.CONTAINER -->
                </div><!-- //.INNER -->
            </div>
        </div>
    </section>
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    @if (session('status'))
        <div class="alert alert-success" role="alert">
            {{ session('status') }}
        </div>
    @endif
    <div class="mt-5 mb-5">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="boxing bg-white border row ml-2  mx-2">
                        <div class="col-md-12 float-right pt-5 text-center">
                            <img src="{{asset('avatars/therapists/'.$data->picture)}}" class="rounded-circle card-img-top shadow" style="width: 125px; height: 125px;" />
                            <h4 class="mt-5 colorsite">{{ config('app.locale') == "en" ? $data->name_e : $data->name_a }}</h4>
                            <p class="text-sm-center my-4">
                                {{ $data->main_specialty }}
                            </p>
                            <div>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>

                        <br>
                        <label>(@lang('home.Evaluation') {{ round($avg_rating,1) }} )</label>

                            </div>
                            <div class="mb-4">
                                <label>@lang('home.sessions-count'): {{$data->sessions->whereIn('session_status',['reserved','closed'])->count() + 25}}</label>
                            </div>
                        </div>
                    </div>
                    <div class="mt-5 row clearfix text-center ml-2">
                        <div class="col-6 mb-4">
                            <a href="{{route('therapists_sessions')}}">
                                <i class="fas fa-play"></i><br />
                                {{trans('auth.therapists.sessions')}}
                            </a>
                        </div>
                        <div class="col-6 mb-4">
                            <a href="{{route('clients-files')}}">
                                <i class="fas fa-users"></i><br />
                                {{trans('auth.therapists.clients_files')}}
                            </a>
                        </div>
                        <div class="col-6 mb-4">
                            <a href="{{route('therapists_clients')}}">
                                <i class="fas fa-archive"></i><br />
                                {{trans('auth.therapists.clients')}}
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{route('therapists_invoice')}}">
                                <i class="fas fa-file-invoice"></i><br />
                                {{trans('auth.therapists.invoices')}}
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{route('therapists_profile_basic')}}">
                                <i class="fas fa-user-md"></i><br />
                                {{trans('auth.therapists.profile')}}
                            </a>
                        </div>
                        @if (auth()->check()&&auth()->user()->type != 'visitors')
                           <div class="col-6">
                                <a href="{{route('page_view',getStaticPageValue(10,'url')) }}"><i class="fas fa-archive"></i> <br>{{ getStaticPageValue(10) }}</a>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-md-9">
                    <div class=" pt-5 pr-5 pl-5 boxing bg-white">
                        {{--<div class="float-left">
                            <svg-icon _ngcontent-clu-c53="" src="assets/icons/timeslots/times.svg" class="mr5"><svg xmlns="http://www.w3.org/2000/svg" width="14.998" height="15" viewBox="0 0 14.998 15" _ngcontent-clu-c53="" style="width: 18px;"><defs _ngcontent-clu-c53=""><style _ngcontent-clu-c53="">.a{fill:#4d4d4f;}</style></defs><g transform="translate(-0.004)" _ngcontent-clu-c53=""><g transform="translate(0.004)" _ngcontent-clu-c53=""><path class="a" d="M21.111,4.982l-.224.071-1.2.106-.338.539-.245-.078-.951-.858-.138-.446-.185-.476-.6-.536-.705-.138-.016.323.691.674.338.4-.38.2-.309-.091-.464-.193.016-.374-.608-.25-.2.879-.613.139.061.49.8.154.138-.784.659.1.307.18h.492l.337.674.892.905L18.6,6.94l-.72-.092-1.243.628-.9,1.074-.117.476h-.321l-.6-.276-.582.276.145.614.253-.292.445-.014-.031.551.369.108.368.413.6-.169.687.108.8.214.4.047.675.766,1.3.766-.843,1.61-.89.413-.338.92-1.287.859-.137.5A7.49,7.49,0,0,0,21.111,4.982Z" transform="translate(-7.384 -1.655)" _ngcontent-clu-c53=""></path><path class="a" d="M8.365,15.355l-.546-1.013.5-1.045-.5-.15-.563-.565L6.009,12.3l-.414-.866v.514H5.412L4.337,10.494V9.3L3.55,8.016,2.3,8.239H1.456l-.424-.278.541-.429-.54.125A7.49,7.49,0,0,0,7.5,18.936a7.851,7.851,0,0,0,.941-.065l-.078-.909s.344-1.349.344-1.4S8.365,15.355,8.365,15.355Z" transform="translate(-0.004 -3.936)" _ngcontent-clu-c53=""></path><path class="a" d="M4.667,2.418,6,2.233,6.614,1.9l.691.2,1.1-.061.378-.594.551.091L10.677,1.4,11.046,1l.52-.348L12.3.761,12.571.72A7.475,7.475,0,0,0,3.6,2.727h0ZM9.7.746l.766-.422.492.284-.712.542-.68.068-.306-.2ZM7.428.807l.338.141L8.208.807l.241.418-1.022.268-.491-.287S7.417.9,7.428.807Z" transform="translate(-1.881)" _ngcontent-clu-c53=""></path></g></g></svg></svg-icon>
                            @lang('home.allTimes')
                            ({{ (Auth::user()->timezone)?Auth::user()->timezone:'Africa/Cairo' }})

                            <a data-toggle="modal" href="#changeTimezone">@lang('home.change')</a>
                            <div class="modal fade" id="changeTimezone">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                &times;
                                            </button>
                                            <h4 class="modal-title text-center" style="width: 100%">@lang('home.Change Time Zone')</h4>
                                        </div>
                                        <div class="modal-body">
                                         <div class="form-group">
                                             <input type="text" name="searchTimeZone" id="searchTimeZone" class="form-control" placeholder="@lang('home.Enter your timezone')">
                                         </div>

                                            <div id="timeZone" class="row">
                                                @foreach(DateTimeZone::listIdentifiers(DateTimeZone::ALL) as $key=>$timeZone)
                                                    <li class="col-4"><a href="{{ route('changeTimeZone').'?timeZone='.$timeZone }}">{{ $timeZone }} @if((Auth::user()->timezone&&Auth::user()->timezone==$timeZone)||(!Auth::user()->timezone&&'Africa/Cairo'==$timeZone))<i class="fa fa-check"></i>@endif</a></li>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->
                        </div>--}}
                        <h3 class="colorsite font-weight-bold" >{{ trans('home.sessions') }}</h3>
                        <div class="container">
                            <div class="row">
                                <div class="col-6 float-right">
                                    <div class="day">@lang('home.Today')</div>
                                    <div class="date mb-2" dir="ltr">{{ date('d , F , Y') }} </div>
                                </div>
                                <div class="col-6 float-left text-left">
                                    <div class="float-left">
                                        {{--{{ date('Y-m-d h:i:s a') }}--}}
                                        <svg-icon _ngcontent-clu-c53="" src="assets/icons/timeslots/times.svg" class="mr5"><svg xmlns="http://www.w3.org/2000/svg" width="14.998" height="15" viewBox="0 0 14.998 15" _ngcontent-clu-c53="" style="width: 18px;"><defs _ngcontent-clu-c53=""><style _ngcontent-clu-c53="">.a{fill:#4d4d4f;}</style></defs><g transform="translate(-0.004)" _ngcontent-clu-c53=""><g transform="translate(0.004)" _ngcontent-clu-c53=""><path class="a" d="M21.111,4.982l-.224.071-1.2.106-.338.539-.245-.078-.951-.858-.138-.446-.185-.476-.6-.536-.705-.138-.016.323.691.674.338.4-.38.2-.309-.091-.464-.193.016-.374-.608-.25-.2.879-.613.139.061.49.8.154.138-.784.659.1.307.18h.492l.337.674.892.905L18.6,6.94l-.72-.092-1.243.628-.9,1.074-.117.476h-.321l-.6-.276-.582.276.145.614.253-.292.445-.014-.031.551.369.108.368.413.6-.169.687.108.8.214.4.047.675.766,1.3.766-.843,1.61-.89.413-.338.92-1.287.859-.137.5A7.49,7.49,0,0,0,21.111,4.982Z" transform="translate(-7.384 -1.655)" _ngcontent-clu-c53=""></path><path class="a" d="M8.365,15.355l-.546-1.013.5-1.045-.5-.15-.563-.565L6.009,12.3l-.414-.866v.514H5.412L4.337,10.494V9.3L3.55,8.016,2.3,8.239H1.456l-.424-.278.541-.429-.54.125A7.49,7.49,0,0,0,7.5,18.936a7.851,7.851,0,0,0,.941-.065l-.078-.909s.344-1.349.344-1.4S8.365,15.355,8.365,15.355Z" transform="translate(-0.004 -3.936)" _ngcontent-clu-c53=""></path><path class="a" d="M4.667,2.418,6,2.233,6.614,1.9l.691.2,1.1-.061.378-.594.551.091L10.677,1.4,11.046,1l.52-.348L12.3.761,12.571.72A7.475,7.475,0,0,0,3.6,2.727h0ZM9.7.746l.766-.422.492.284-.712.542-.68.068-.306-.2ZM7.428.807l.338.141L8.208.807l.241.418-1.022.268-.491-.287S7.417.9,7.428.807Z" transform="translate(-1.881)" _ngcontent-clu-c53=""></path></g></g></svg></svg-icon>
                                        @lang('home.allTimes')
                                        ({{ (Auth::user()->timezone)?Auth::user()->timezone:'Africa/Cairo' }})

                                        <a data-toggle="modal" href="#changeTimezone">@lang('home.change')</a>
                                        <div class="modal fade" id="changeTimezone">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                            &times;
                                                        </button>
                                                        <h4 class="modal-title text-center" style="width: 100%">@lang('home.Change Time Zone')</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="form-group">
                                                            <input type="text" name="searchTimeZone" id="searchTimeZone" class="form-control" placeholder="@lang('home.Enter your timezone')">
                                                        </div>

                                                        <div id="timeZone" class="row">
                                                            @foreach(DateTimeZone::listIdentifiers(DateTimeZone::ALL) as $key=>$timeZone)
                                                                <li class="col-6 col-lg-4 col-md-4"><a href="{{ route('changeTimeZone').'?timeZone='.$timeZone }}">{{ $timeZone }} @if((Auth::user()->timezone&&Auth::user()->timezone==$timeZone)||(!Auth::user()->timezone&&'Africa/Cairo'==$timeZone))<i class="fa fa-check"></i>@endif</a></li>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal-dialog -->
                                        </div><!-- /.modal -->


                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container add-session-block p-0" >
                            <div class="row">
                                <div class="modal right fade" id="show-calender" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">

                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title text-center" style="width: 100%;" id="myModalLabel2">
                                                    @lang('home.Calendar')
                                                    <img src="{{ asset('assets/icons/calendar/calendar.svg') }}" style="width:25px" class="mr10">
                                                </h4>
                                            </div>

                                            <div class="modal-body">
                                                <nav class="nav nav-tabs nav-stacked mb-4">
                                                    <a class="nav-link text-center col-6 active" href="#month" role="tab" data-toggle="tab" aria-selected="false">شهر</a>
                                                    {{--<a class="nav-link text-center col-6 " href="#week" role="tab" data-toggle="tab" aria-selected="true">أسبوع</a>--}}
                                                </nav>
                                                <div class="tab-content">
                                                    <div class="tab-pane fade in active show" id="month">

                                                        <div id="calendar" class="p-5"></div>
                                                        <div>
                                                            <p>
                                                            <span class="calendar-status text-blue">
                                                                 <span class="dot bg-blue mr5"></span>
                                                                محجوز
                                                            </span>
                                                                <span class="calendar-status text-dark">
                                                                 <span class="dot bg-dark mr5"></span>
                                                                متاح
                                                            </span>
                                                                <span class="calendar-status text-red">
                                                                      <span class="dot bg-red mr5"></span>
                                                                     تم الالغاء
                                                                 </span>
                                                                 <span class="calendar-status text-green">
                                                                      <span class="dot bg-green mr5"></span>
                                                                     مطلوبة
                                                                 </span>
                                                                 <span class="calendar-status text-orange">
                                                                      <span class="dot bg-orange mr5"></span>
                                                                     مقترحة
                                                                 </span>
                                                            </p>
                                                        </div>
                                                        <div id="removeDialog" style="display: none;height: 540px">
                                                            <div id="dialog-body" class="remove-session-dialog">
                                                                <div class="text-center ng-star-inserted">
                                                                    هل أنت متأكد أنك تريد حذف هذه الفترة الزمنية؟
                                                                </div>
                                                                <div>
                                                                    <button  class="deleteSession btn btn-danger pull-right">نعم</button>
                                                                    <button onclick="$('#removeDialog').dialog('close')" class="btn btn-info pull-left">لا</button>
                                                                </div>
                                                            </div>

                                                        </div>
                                                        <div id="canceledDialog" style="display: none;height: 540px">
                                                            <div id="dialog-body" class="remove-session-dialog">
                                                                <div class="text-center ng-star-inserted">
                                                                    <p class="error" style="font-size: 14px;">@lang('home.Are you sure you want to cancel this time period?')</p>
                                                                    @if (auth()->check()&&auth()->user()->type != 'visitors')
                                                                        <a target="_blank" href="{{route('page_view',getStaticPageValue(10,'url')) }}">@lang('home.Conditions for canceling the session')</a>
                                                                    @endif
                                                                    @if ((auth()->check()&&auth()->user()->type == 'visitors')||!auth()->check())
                                                                        <a target="_blank" href="{{route('page_view',getStaticPageValue(11,'url')) }}">@lang('home.Conditions for canceling the session')</a>
                                                                    @endif
                                                                </div>
                                                                <div class="form-group">
                                                                    <lable>@lang('home.Cancel Reason')</lable>
                                                                    <textarea name="cancel-reason" id="cancel-reason" class="form-control"></textarea>
                                                                    <div id="cancel-reason-error" class="error"></div>
                                                                </div>
                                                                <div>
                                                                    <button  class="cancel-btn-session btn btn-danger pull-right pr-5 pl-5" style="font-weight: bold;">نعم</button>
                                                                    <button onclick="$('#canceledDialog').dialog('close')" class="btn btn-info pull-left pr-5 pl-5" style="font-weight: bold;">لا</button>
                                                                </div>
                                                            </div>

                                                        </div>
                                                        <div id="sessions-calendar-blocks">

                                                        </div>
                                                    </div>
                                                    {{--<div class="tab-pane fade" id="week">
                                                        <style>
                                                            .week-control .fa-angle-right,.week-control .fa-angle-left{
                                                                color: #939598;
                                                                font-size: 20px;
                                                                font-weight: bold;
                                                                margin-left: 10px;
                                                            }
                                                            .week-control .month-year-name{
                                                                color: #666669;
                                                                font-size: 15px;
                                                            }
                                                        </style>
                                                        <div class="week-control">
                                                            <input type="hidden" id="start_date" name="start_date" value="">
                                                            <input type="hidden" id="end_date" name="end_date" value="">
                                                            <a href="#" class="goNextWeek">
                                                                <i class="fa fa-angle-right"></i>
                                                            </a>
                                                            <a href="#" class="goPreviousWeek">
                                                                <i class="fa fa-angle-left"></i>
                                                            </a>
                                                            <span class="month-year-name">
                                                                مايو
                                                                2021
                                                            </span>
                                                        </div>

                                                        <div class="table-responsive">
                                                            <table class="table table-hover">
                                                                <thead>
                                                                <tr>
                                                                    <th class="text-center">
                                                                        اليوم
                                                                        <div>02/05</div>
                                                                    </th>
                                                                    <th>
                                                                        الثلاثاء
                                                                        <div>02/06</div>
                                                                    </th>
                                                                    <th>
                                                                        الاربعاء
                                                                        <div>02/07</div>
                                                                    </th>
                                                                    <th>
                                                                        الخميس
                                                                        <div>02/08</div>
                                                                    </th>
                                                                    <th>
                                                                        الجمعة
                                                                        <div>02/09</div>
                                                                    </th>
                                                                    <th>
                                                                        السبت
                                                                        <div>02/10</div>
                                                                    </th>
                                                                    <th>
                                                                        الاحد
                                                                        <div>02/11</div>
                                                                    </th>
                                                                </tr>
                                                                </thead>
                                                                <tbody>
                                                                <tr>
                                                                    <td class="text-center bg-blue1">
                                                                        <div class="text-orange fbold fz14 fw600">
                                                                            60
                                                                            <span>دقيقة</span>
                                                                        </div>
                                                                        <div class="d-flex justify-content-between align-items-center">
                                                                            <span>
                                                                                <div>9:00 PM</div>
                                                                                <div>10:00 PM</div>
                                                                            </span>
                                                                            <span>@lang('home.to')</span>
                                                                        </div>

                                                                    </td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>--}}
                                                </div>
                                            </div>

                                        </div><!-- modal-content -->
                                    </div><!-- modal-dialog -->
                                </div><!-- modal -->
                                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                                    <a class="btn btn-success btn-block calender-btn" data-toggle="modal" href="#show-calender">
                                        @lang('home.Calendar')
                                        <img src="{{ asset('assets/icons/calendar/calendar.svg') }}" style="width:25px" class="mr10">
                                    </a>
                                    <!-- Modal -->

                                </div>

                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                    <div class="owl-carousel owl-theme">
                                        @for($x=1;$x<=cal_days_in_month(CAL_GREGORIAN,date('m'),date('Y'));$x++)
                                            <div class="item text-center">
                                                <a class="filter-day" data-date="{{  date('Y-m-d',strtotime(date('Y-m-').(strlen($x)==2?$x:'0'.$x))) }}" href="#">
                                                    <h4>{{ trans('home.'.date('D',strtotime(date('Y-m-').(strlen($x)==2?$x:'0'.$x))).' Day') }}</h4>
                                                    <h4>{{ $x }}</h4>
                                                </a>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                                    <a class="btn btn-success btn-block add-time-slot-btn">

                                        @lang('home.Add New Time Slot')
                                        <i class="fa fa-plus"></i>
                                    </a>
                                    <div id="dialog" style="display: none;height: 0">
                                        <div id="dialog-body" class="add-session-dialog">
                                            <!-- TAB NAVIGATION -->
                                            <nav class="nav nav-tabs nav-stacked mb-4">
                                                <a class="nav-link active col-6" href="#individually" role="tab" data-toggle="tab">@lang('home.Individually')</a>
                                                <a class="nav-link col-6" href="#group" role="tab" data-toggle="tab">@lang('home.Group')</a>
                                            </nav>
                                            <!-- TAB CONTENT -->
                                            <div class="tab-content">
                                                <div class="tab-pane fade in active show" id="individually">
                                                    <form id="individuallyForm" method="post" action="" id="ajaxform">
                                                        @csrf
                                                        <input type="hidden" name="event_id" id="event_id">
                                                        <input type="hidden" name="fun_type" id="fun_type">
                                                        <div class="form-group">
                                                            <label> {{ trans('home.period') }} : </label>
                                                            <label class="mx-5">
                                                                <input type="radio" name="type" value="{{ config('app.NEWHAYAH_SESSION_30') }}"  id="price30"
                                                                       data-parsley-required="true"
                                                                       data-parsley-required-message="{{trans('home.choose-one')}}"
                                                                       required
                                                                >
                                                                {{ trans('home.30minutes') }}
                                                            </label>
                                                            <label class="mx-5">
                                                                <input type="radio"  name="type" value="{{ config('app.NEWHAYAH_SESSION_60') }}"  id="price60"
                                                                >
                                                                {{ trans('home.60minutes') }}
                                                            </label>

                                                            @error('type')
                                                            <p class="alert alert-danger alert-dismissible fade show" role="alert">
                                                                {{ $message }}
                                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </p>
                                                            @enderror
                                                        </div>

                                                        <div class="col-12 start-time">
                                                            <label> {{ trans('home.scdule') }} : </label>
                                                            <input type="hidden" id="start_time" class="form-control"  value="{{ old('start_time') }}" name="start_time"
                                                                   data-parsley-required="true"
                                                                   data-parsley-required-message="{{trans('home.input-required')}}"
                                                                   required data-date-format="YYYY/MM/DD hh:mm A"
                                                            >
                                                            @error('start_time')
                                                            <p class="alert alert-danger alert-dismissible fade show" role="alert">
                                                                {{ $message }}
                                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>inline: true,
                                                            </p>
                                                            @enderror
                                                        </div>

                                                        <div class="form-group text-center">
                                                            <button type="submit" class="lgx-btn mt-5 save-data">
                                                                {{ trans('home.resgister_session') }}
                                                            </button>
                                                            <button type="submit" class="lgx-btn mt-5 save-data-continuo">
                                                                {{ trans('home.save session & continuo') }}
                                                            </button>
                                                        </div>
                                                        <span class="message"></span>

                                                    </form>
                                                </div>
                                                <div class="tab-pane fade" id="group">
                                                    <form id="scheduleForm" method="post" action="" id="ajaxform">
                                                        @csrf
                                                        <div class="form-row">
                                                            <div class="form-group col-lg-6">
                                                                <label> {{ trans('home.Date') }} : </label>
                                                                <input type="text" id="start_date" class="form-control datetimepicker-right"  value="{{ old('start_date') }}" name="start_date" placeholder="@lang('home.Choose a start date')" data-date-format="YYYY/MM/DD">
                                                                @error('start_date')
                                                                <p class="alert alert-danger alert-dismissible fade show" role="alert">
                                                                    {{ $message }}
                                                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                </p>
                                                                @enderror
                                                            </div>
                                                            <div class="form-group col-lg-6">
                                                                <label style="height: 17px;width: 100%;display: inline-block;"></label>
                                                                <input type="text" id="end_date" class="form-control datetimepicker-left"  value="{{ old('end_date') }}" name="end_date" placeholder="@lang('home.Choose an end date')" data-date-format="YYYY/MM/DD">
                                                                @error('end_date')
                                                                <p class="alert alert-danger alert-dismissible fade show" role="alert">
                                                                    {{ $message }}
                                                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                </p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-12 hours-minutes">
                                                            <label>@lang('home.Hours: minutes')</label>
                                                            <input type="hidden" id="timeSlotTime" class="form-control timepickerinline"  value="{{ old('timeSlotTime') }}" name="timeSlotTime"  data-date-format="hh:mm A">
                                                            @error('timeSlotTime')
                                                            <p class="alert alert-danger alert-dismissible fade show" role="alert">
                                                                {{ $message }}
                                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </p>
                                                            @enderror
                                                        </div>


                                                        <div class="form-group mt-4">
                                                            <label> {{ trans('home.period') }} : </label>
                                                            <label class="mx-5">
                                                                <input type="radio" name="type" value="{{ config('app.NEWHAYAH_SESSION_30') }}"  id="price30"
                                                                       data-parsley-required="true"
                                                                       data-parsley-required-message="{{trans('home.choose-one')}}"
                                                                       required
                                                                >
                                                                {{ trans('home.30minutes') }}
                                                            </label>
                                                            <label class="mx-5">
                                                                <input type="radio"  name="type" value="{{ config('app.NEWHAYAH_SESSION_60') }}"  id="price60"
                                                                >
                                                                {{ trans('home.60minutes') }}
                                                            </label>
                                                            <div id="type"></div>
                                                            @error('type')
                                                            <p class="alert alert-danger alert-dismissible fade show" role="alert">
                                                                {{ $message }}
                                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </p>
                                                            @enderror
                                                        </div>
                                                        <div class="form-group mt-4">
                                                            <label for="days">@lang('home.Days')</label>
                                                            <label class="mx-5">
                                                                <input type="checkbox" id="all-days"
                                                                >
                                                                @lang('home.All Days')
                                                            </label>

                                                            <div class="clearfix"></div>
                                                            <div class="row">
                                                                @php $timestamp = strtotime('next Sunday');@endphp
                                                                @for ($i = 0; $i < 7; $i++)
                                                                    <label class="col-4">
                                                                        <input type="checkbox" class="session-days" name="days[]" value="{{ $i }}"  id="days-{{ $i }}"
                                                                        >
                                                                        {{ strftime('%A', $timestamp) }}
                                                                    </label>

                                                                    @php $timestamp = strtotime('+1 day', $timestamp);@endphp
                                                                @endfor
                                                            </div>

                                                            <div id="days"></div>
                                                        </div>
                                                        <div class="form-group text-center">
                                                            <button type="submit" class="lgx-btn mt-5 save-schedule-data">
                                                                {{ trans('home.resgister_session') }}
                                                            </button>
                                                        </div>
                                                        <span class="message"></span>

                                                    </form>
                                                </div>

                                            </div>


                                        </div>

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

                        </div>
                        <div class="clearfix"></div>
                        <div class="container">
                            <h4 class="show-all-times">@lang('home.All Time slots')</h4>
                            <div class="row session-day-blocks">
                                @include('therapists.include.all_time_slots')

                            </div>
                        </div>


                        <div class="clearfix"></div>
                        <div class="clearfix" style="height: 20px;"></div>

                        {{-- <a href="{{route('sessions_get')}}" class="btn btn-success"> {{trans('home.add-session')}}  </a>--}}
                    </div>
                {{--<div class="p-5 mt-4 boxing bg-white">
                    <h4>جلسة</h4>

                    <a href="">
                        الجلسات القادمة
                    </a>
                    <a href="">
                        الجلسات السابقة
                    </a>
                    <div class="clearfix"></div>
                    <div class="pull-left">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="" id="">
                                Show confirmed sessions only
                            </label>
                        </div>
                    </div>
                    <div class="sessions-blocks">
                        <div class="col-md-4 mt25">
                            <style>
                                .pl15 {
                                    padding-right: 15px!important;
                                }
                                .pr10 {
                                    padding-left: 10px!important;
                                }
                                .pb5 {
                                    padding-bottom: 5px !important;
                                }
                                .pt5 {
                                    padding-top: 5px!important;
                                }
                                .fz14 {
                                    font-size: 14px!important;
                                }
                                .pb10 {
                                    padding-bottom: 10px!important;
                                }
                                .pt10 {
                                    padding-top: 10px!important;
                                }
                                .border-offwhite {
                                    border-color: #ccc!important;
                                }
                                .border-right {
                                    border-right: 1px solid;
                                }
                                .border-right {
                                    border-left: 1px solid #dee2e6!important;
                                }
                                .p5 {
                                    padding: 5px!important;
                                }
                                .text-white {
                                    color: #fff!important;
                                }
                            </style>
                            <div  class="border border-offwhite">
                                <div  class="fz14 pt5 pb5 text-white pl15 pr10 d-flex justify-content-between" style="background-color: rgb(51, 156, 64);">
                                    <div >تم الدفع وجاهزة</div>
                                    <div>23:59:53</div>
                                    <!---->
                                </div>
                                <div  class="fz16 bg-offwhite1 pt10 pb10 text-orange text-center fsemi-bold border-bottom border-offwhite"> Mammmarnabil </div>
                                <div  class="bg-white d-flex row no-m">
                                    <div  class="col-6 border-right border-offwhite text-dark3 fz16 text-center pt10 pb10">
                                        <i  class="fa fa-calendar fz20"></i>
                                        <div  class="mt10"> 2021-05-03 </div>
                                    </div>
                                    <div  class="col-6 d-flex justify-content-around align-items-center p5">
                                        <div  class="text-center"><i  class="fa fa-clock"></i><div  class="text-blue fz12"> ٦٠ دقيقة </div>
                                        </div>
                                        <div  class="text-grey2 fz12">
                                            <div >من:</div>
                                            <div >الى:</div></div><div  class="text-dark3 fz14"><div >9:00 PM</div>
                                            <div>10:00 PM</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>--}}
                <!--SCHEDULE-->
                    <section>
                        <div id="lgx-schedule" class="lgx-schedule">
                            <div class="lgx-inner pt-0">
                                <div class="container">
                                    <div class="row">
                                        {{--
                                            <div class="col-xl-12">
                                                <div class="lgx-tab" >
                                                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                                        <li class="nav-item" role="presentation">
                                                            <a class="nav-link" id="pills-previuos-sessions-tab" data-toggle="pill" href="#pills-previuos-sessions" role="tab" aria-controls="pills-previuos-sessions" aria-selected="true">{{trans('home.previuos-sessions')}}</a>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                            <a class="nav-link active" id="pills-today-sessions-tab" data-toggle="pill" href="#pills-today-sessions" role="tab" aria-controls="pills-today-sessions" aria-selected="false">{{trans('home.today-sessions')}}</a>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                            <a class="nav-link" id="pills-next-sessions-tab" data-toggle="pill" href="#pills-next-sessions" role="tab" aria-controls="pills-next-sessions" aria-selected="false">{{trans('home.next-sessions')}}</a>
                                                        </li>
                                                    </ul>
                                                    <div class="tab-content lgx-tab-content" id="pills-tabContent" >
                                                        <!-- Previuos Session -->
                                                        <div class="tab-pane fade dir-rtl" id="pills-previuos-sessions" role="tabpanel" aria-labelledby="pills-previuos-sessions-tab">
                                                            <div class="row px-5 py-5 my-2">
                                                                @if(count($previousSessions))
                                                                    @include('therapists.include.sessions_blocks',['sessionsBlocks'=>$previousSessions])
                                                                @else
                                                                    <div class="text-center col-sm-12">@lang('home.There are no sessions')</div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <!-- Today Sessions -->
                                                        <div class="tab-pane fade show active dir-rtl" id="pills-today-sessions" role="tabpanel" aria-labelledby="pills-today-sessions-tab">
                                                            <div class="row px-5 py-5 my-2">
                                                                @if(count($todaySessions))
                                                                    @include('therapists.include.sessions_blocks',['sessionsBlocks'=>$todaySessions])
                                                                @else
                                                                    <div class="text-center col-sm-12">@lang('home.There are no sessions')</div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <!-- Next Sessions -->
                                                        <div class="tab-pane fade dir-rtl" id="pills-next-sessions" role="tabpanel" aria-labelledby="pills-next-sessions-tab">
                                                            <div class="row px-5 py-5 my-2 session-item-block">
                                                                @if(count($nextSessions))
                                                                    @include('therapists.include.sessions_blocks',['sessionsBlocks'=>$nextSessions])
                                                                @else
                                                                    <div class="text-center col-sm-12">@lang('home.There are no sessions')</div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div> <!-- pills-tabContent -->
                                                </div> <!-- lgx-tab -->
                                            </div>
                                            --}}

                                        <div class="col-xl-12">

                                            <section class="payment-val">
                                                <div class="container">
                                                    <p class="sec-title">

                                                    </p>
                                                    <ul class="nav sec-tabs nav-tabs" id="myTab" role="tablist">
                                                        <li class="nav-item sec-tab col-6 col-lg-3">
                                                            <a class="nav-link active" id="next-session-tab" data-toggle="tab" href="#next-session" role="tab" aria-controls="next-session" aria-selected="true">{{ Lang::get('home.next-sessions') }}</a>
                                                        </li>
                                                        <li class="nav-item sec-tab  col-6 col-lg-3">
                                                            <a class="nav-link" id="prev-session-tab" data-toggle="tab" href="#prev-session" role="tab" aria-controls="prev-session" aria-selected="false">{{ Lang::get('home.previous-sessions') }}</a>
                                                        </li>
                                                        <li class="nav-item sec-tab  col-6 col-lg-3">
                                                            <a class="nav-link" id="all-session-tab" data-toggle="tab" href="#all-session" role="tab" aria-controls="all-session" aria-selected="false">@lang('home.All Sessions')</a>
                                                        </li>
                                                        <li class="nav-item sec-tab  col-6 col-lg-3">
                                                            <a class="nav-link" id="available-session-tab" data-toggle="tab" href="#available-session" role="tab" aria-controls="available-session" aria-selected="false"> @lang('home.Available Sessions')</a>
                                                        </li>
                                                    </ul>


                                                    <div class="tab-content" id="myTabContent">
                                                        <!--Next sessions-->

                                                        <div class="tab-pane fade show active" id="next-session" role="tabpanel" aria-labelledby="next-session-tab">

                                                            {{--<div class="form-check select-check form-check-inline float-left">
                                                                <input class="form-check-input" type="radio" name="next_status" id="next-cancelled-ses" value="cancelled">
                                                                <label class="form-check-label" for="next-cancelled-ses">@lang('home.Show cancelled sessions only')</label>
                                                            </div>
                                                            <div class="form-check select-check  form-check-inline float-left">
                                                                <input class="form-check-input" type="radio"  name="next_status" id="next-reserved-ses" value="reserved">
                                                                <label class="form-check-label" for="next-reserved-ses">@lang('home.Show reserved sessions only')</label>
                                                            </div>
                                                            <div class="form-check select-check form-check-inline float-left">
                                                                <input class="form-check-input" checked="checked" type="radio" name="next_status" id="next-all-ses" value="">
                                                                <label class="form-check-label" for="next-all-ses">@lang('home.Show all')</label>
                                                            </div>--}}
                                                            <div class="form-group  col-12 col-lg-4 col-md-4 mt-5 mb-5 float-left">
                                                                <select name="next_status" class="form-control" id="next_status">
                                                                    <option value="">@lang('home.Show all')</option>
                                                                    <option value="reserved">@lang('home.Show reserved sessions only')</option>
                                                                    <option value="cancelled">@lang('home.Show cancelled sessions only')</option>
                                                                </select>
                                                            </div>

                                                            <div class="clearfix"></div>
                                                            <div class="next-ses-cont container">
                                                                <div class="row" id="sessions-filter-blocks" style="min-height: 300px">
                                                                   {{-- @include('therapists.include.session_filter_blocks')--}}
                                                                </div>
                                                                <div class="row" id="sessions-filter-blocks-paginate"></div>
                                                            </div>
                                                        </div>


                                                        <!--Previous sessions-->
                                                        <div class="tab-pane fade" id="prev-session" role="tabpanel" aria-labelledby="prev-session-tab">

                                                            {{--<div class="form-check select-check form-check-inline float-left">
                                                                <input class="form-check-input" type="radio" name="status" id="cancelled-ses" value="cancelled">
                                                                <label class="form-check-label" for="cancelled-ses">@lang('home.Show cancelled sessions only')</label>
                                                            </div>
                                                            <div class="form-check select-check  form-check-inline float-left">
                                                                <input class="form-check-input" type="radio"  name="status" id="available-ses" value="available">
                                                                <label class="form-check-label" for="available-ses">@lang('home.Show available sessions only')</label>
                                                            </div>
                                                            <div class="form-check select-check  form-check-inline float-left">
                                                                <input class="form-check-input" type="radio"  name="status" id="reserved-ses" value="reserved">
                                                                <label class="form-check-label" for="reserved-ses">@lang('home.Show reserved sessions only')</label>
                                                            </div>
                                                            <div class="form-check select-check form-check-inline float-left">
                                                                <input class="form-check-input" checked="checked" type="radio" name="status" id="all-ses" value="">
                                                                <label class="form-check-label" for="all-ses">@lang('home.Show all')</label>
                                                            </div>--}}
                                                            <div class="form-group col-12 col-lg-4 col-md-4  mt-5 mb-5 float-left">
                                                                <select name="status" class="form-control" id="status">
                                                                    <option value="">@lang('home.Show all')</option>
                                                                    {{--<option value="available">@lang('home.Show available sessions only')</option>--}}
                                                                    <option value="reserved">@lang('home.Show reserved sessions only')</option>
                                                                    <option value="cancelled">@lang('home.Show cancelled sessions only')</option>
                                                                </select>
                                                            </div>
                                                            <div class="clearfix"></div>

                                                            <!--Reservation Table -->
                                                            <div class="table-responsive">
                                                                <button class="btn btn-danger pull-left removeSelected"><i class="fa fa-trash-o"></i> @lang('home.Remove Selected')</button>
                                                                <button class="btn btn-danger pull-left cancelSelected ml-2 mb-4"> @lang('home.Cancel Selected')</button>
                                                                <table class="table table-sec" id="datatable-table" style="width:100%;">
                                                                    <thead>
                                                                    <tr>
                                                                        <th scope="col">
                                                                            <div class="checkbox-nice checkbox-inline" style="position:relative;">
                                                                                <input  type="checkbox" data-element="datatable-table" class="checkAll">
                                                                            </div>
                                                                        </th>
                                                                        <th scope="col">اسم العميل</th>
                                                                        <th scope="col">تاريخ الجلسة</th>
                                                                        <th scope="col">المدة</th>
                                                                        <th scope="col">الحالة</th>
                                                                        <th scope="col">اجراء</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody id="previous-session">
                                                                    {{--@include('therapists.include.session_table_body')--}}

                                                                    </tbody>
                                                                </table>
                                                            </div>




                                                        </div>
                                                        <div class="tab-pane fade" id="all-session" role="tabpanel" aria-labelledby="all-session-tab">

                                                            {{--<div class="form-check select-check form-check-inline float-left">
                                                                <input class="form-check-input" type="radio" name="status" id="cancelled-ses" value="cancelled">
                                                                <label class="form-check-label" for="cancelled-ses">@lang('home.Show cancelled sessions only')</label>
                                                            </div>
                                                            <div class="form-check select-check  form-check-inline float-left">
                                                                <input class="form-check-input" type="radio"  name="status" id="available-ses" value="available">
                                                                <label class="form-check-label" for="available-ses">@lang('home.Show available sessions only')</label>
                                                            </div>
                                                            <div class="form-check select-check  form-check-inline float-left">
                                                                <input class="form-check-input" type="radio"  name="status" id="reserved-ses" value="reserved">
                                                                <label class="form-check-label" for="reserved-ses">@lang('home.Show reserved sessions only')</label>
                                                            </div>
                                                            <div class="form-check select-check form-check-inline float-left">
                                                                <input class="form-check-input" checked="checked" type="radio" name="status" id="all-ses" value="">
                                                                <label class="form-check-label" for="all-ses">@lang('home.Show all')</label>
                                                            </div>--}}
                                                            <div class="form-group col-12 col-lg-4 col-md-4  mt-5 mb-5 float-left">
                                                                <select name="status" class="form-control" id="status">
                                                                    <option value="">@lang('home.Show all')</option>
                                                                    {{--<option value="available">@lang('home.Show available sessions only')</option>--}}
                                                                    <option value="reserved">@lang('home.Show reserved sessions only')</option>
                                                                    <option value="cancelled">@lang('home.Show cancelled sessions only')</option>
                                                                </select>
                                                            </div>
                                                            <div class="clearfix"></div>

                                                            <!--Reservation Table -->
                                                            <div class="table-responsive">
                                                                <button class="btn btn-danger pull-left removeSelected"><i class="fa fa-trash-o"></i> @lang('home.Remove Selected')</button>
                                                                <button class="btn btn-danger pull-left cancelSelected ml-2 mb-4"> @lang('home.Cancel Selected')</button>
                                                                <table class="table table-sec" id="all-session-datatable-table" style="width:100%;">
                                                                    <thead>
                                                                    <tr>
                                                                        <th scope="col">
                                                                            <div class="checkbox-nice checkbox-inline" style="position:relative;">
                                                                                <input  type="checkbox" data-element="all-session-datatable-table" class="checkAll">
                                                                            </div>
                                                                        </th>
                                                                        <th scope="col">اسم العميل</th>
                                                                        <th scope="col">تاريخ الجلسة</th>
                                                                        <th scope="col">المدة</th>
                                                                        <th scope="col">الحالة</th>
                                                                        <th scope="col">اجراء</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody id="all-session">
                                                                    {{--@include('therapists.include.session_table_body')--}}

                                                                    </tbody>
                                                                </table>
                                                            </div>




                                                        </div>
                                                        <div class="tab-pane fade" id="available-session" role="tabpanel" aria-labelledby="available-session-tab">

                                                            <!--Reservation Table -->
                                                            <div class="table-responsive mt-5">
                                                                <button class="btn btn-danger pull-left removeSelected"><i class="fa fa-trash-o"></i> @lang('home.Remove Selected')</button>
                                                                <table class="table table-sec" id="available-session-datatable-table" style="width:100%;">
                                                                    <thead>
                                                                    <tr>
                                                                        <th scope="col">
                                                                            <div class="checkbox-nice checkbox-inline" style="position:relative;">
                                                                                <input  type="checkbox" data-element="available-session-datatable-table" class="checkAll">
                                                                            </div>
                                                                        </th>
                                                                        <th scope="col">اسم العميل</th>
                                                                        <th scope="col">تاريخ الجلسة</th>
                                                                        <th scope="col">المدة</th>
                                                                        <th scope="col">الحالة</th>
                                                                        <th scope="col">اجراء</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody id="available-session">
                                                                    {{--@include('therapists.include.session_table_body')--}}

                                                                    </tbody>
                                                                </table>
                                                            </div>




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

                                            </section>
                                        </div>
                                    </div>
                                </div>
                                <!-- //.CONTAINER -->
                            </div>
                            <!-- //.INNER -->
                        </div>
                    </section>
                    <!--SCHEDULE END-->

                </div>
            </div>
        </div>
    </div>
@endsection
@section('scriptSection')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.0.3/jquery.countdown.min.js"></script>
    <script src="{{ asset('js/Date-Time-Picker-Bootstrap-4/build/js/bootstrap-datetimepicker.min.js') }}"></script>
    <script src="{{ asset('assets/owl/owl.carousel.min.js') }}"></script>
    <script>
        $(document).on('change','#all-days',function(){
            $(".session-days").prop('checked',$(this).is(':checked'))
        })
        $(document).on('click','.removeDialogBtn',function(){
            $("#removeDialog .deleteSession").attr('data-id',$(this).attr('data-id'));
            $('#removeDialog').dialog({
                title:'حذف جلسة',
                width: ($(window).width()<400)?$(window).width()-20:400, // overcomes width:'auto' and maxWidth bug
                maxWidth: 700,
                height: 130,

                modal: true,
                fluid: true, //new option
                resizable: false,
                show:{effect:'clip',duration:350},
                hide:{effect:'clip',duration:250},
            });
        })
        token= '{{ csrf_token() }}';
        $(document).on('click','.deleteSession',function(e){
            e.preventDefault();
            el=$(this)
            id=el.attr('data-id');
            $.ajax({
                type: "DELETE",
                url: "{{ route('therapists_delete_sessions') }}",
                data: {id,_token:token},
                success: function (msg) {
                    $("#sessionsTimes-"+id).remove();
                    $('#removeDialog').dialog('close')
                }
            });
        })
        $(document).on('click','#prev-session .removeSelected',function(e){
            e.preventDefault();
            el=$(this)
            ids=[];
            $("#datatable-table .sessionCheckbox:checked").each(function(){
                ids.push($(this).val())
            });
            console.log(ids);
            el.attr('disabled','disabled');
            if(ids.length){
                $.ajax({
                    type: "DELETE",
                    url: "{{ route('therapists_delete_sessions') }}",
                    data: {ids,_token:token},
                    success: function (msg) {
                        datatableTable.draw();
                        $(".checkAll").prop('checked',false);
                        el.removeAttr('disabled');
                    }
                });
            }
        })
        $(document).on('click','#all-session .removeSelected',function(e){
            e.preventDefault();
            el=$(this)
            ids=[];
            $("#all-session-datatable-table .sessionCheckbox:checked").each(function(){
                ids.push($(this).val())
            });
            console.log(ids);
            el.attr('disabled','disabled');
            if(ids.length){
                $.ajax({
                    type: "DELETE",
                    url: "{{ route('therapists_delete_sessions') }}",
                    data: {ids,_token:token},
                    success: function (msg) {
                        allSessionDatatableTable.draw();
                        $(".checkAll").prop('checked',false);
                        el.removeAttr('disabled');
                    }
                });
            }
        })
        $(document).on('click','#available-session .removeSelected',function(e){
            e.preventDefault();
            el=$(this)
            ids=[];
            $("#available-session-datatable-table .sessionCheckbox:checked").each(function(){
                ids.push($(this).val())
            });
            console.log(ids);
            el.attr('disabled','disabled');
            if(ids.length){
                $.ajax({
                    type: "DELETE",
                    url: "{{ route('therapists_delete_sessions') }}",
                    data: {ids,_token:token},
                    success: function (msg) {
                        availableSessionDatatableTable.draw();
                        $(".checkAll").prop('checked',false);
                        el.removeAttr('disabled');
                    }
                });
            }
        })
        $(document).on('click','#datatable-table .delete-session,#all-session-datatable-table .delete-session,#available-session-datatable-table .delete-session',function(e){
            e.preventDefault();
            id=$(this).attr('data-id');
            el=$(this);
            el.attr('disabled','disabled');
            if(id){
                $.ajax({
                    type: "DELETE",
                    url: "{{ route('therapists_delete_sessions') }}",
                    data: {id,_token:token},
                    success: function (msg) {
                        datatableTable.draw();
                        allSessionDatatableTable.draw();
                        availableSessionDatatableTable.draw();
                        $(".checkAll").prop('checked',false);
                        el.removeAttr('disabled');
                    }
                });
            }

        })
        $(document).on('keyup','#cancel-reason',function(){
            if($.trim($(this).val())){
                $("#cancel-reason-error").html('');
            }else{
                $("#cancel-reason-error").html('ادخل سبب الإلغاء');
            }
        })
        $(document).on('click','.cancelAllSessionPrev',function(){
            ids=[];
            el=$(this);
            $("#datatable-table .sessionCheckbox:checked").each(function(){
                ids.push($(this).val())
            });
            cancel_reason=$.trim($("#cancel-reason").val());
            if(!cancel_reason){
               $("#cancel-reason-error").html('ادخل سبب الإلغاء');
               return false
            }
            console.log(ids);
            el.attr('disabled','disabled');
            if(ids.length){
                $.ajax({
                    type: "POST",
                    url: "{{ route('therapists_cancel_sessions') }}",
                    data: {ids,cancel_reason,_token:token},
                    success: function (msg) {
                        if(msg.success){
                            $('#canceledDialog').dialog('close')
                            $("#cancel-reason").val('')
                        }else{
                            $("#cancel-reason-error").html(msg.message);
                        }
                        if(type=='table'){
                            datatableTable.draw();
                        }else{
                            searchNextSession();
                        }
                        el.removeAttr('disabled')
                    }
                });
            }
        });
        $(document).on('click','#prev-session .cancelSelected',function(e){
            e.preventDefault();
            $("#canceledDialog").dialog({
                title: '@lang('home.Cancel Sessions')',
                width: ($(window).width() < 500) ? $(window).width() - 20 : 500, // overcomes width:'auto' and maxWidth bug
                maxWidth: 700,
                height: 270,
                modal: true,
                fluid: true, //new option
                resizable: false,
                show: {effect: 'clip', duration: 350},
                hide: {effect: 'clip', duration: 250},
                open: function () {
                    $("#canceledDialog .cancel-btn-session").addClass('cancelAllSessionPrev');
                },
                close:function(){
                    $("#canceledDialog .cancel-btn-session").removeClass('cancelAllSessionPrev');
                },
            });

        })
        $(document).on('click','.cancelAllSessionAll',function(){
            ids=[];
            el=$(this);
            $("#all-session-datatable-table .sessionCheckbox:checked").each(function(){
                ids.push($(this).val())
            });
            cancel_reason=$.trim($("#cancel-reason").val());
            if(!cancel_reason){
                $("#cancel-reason-error").html('ادخل سبب الإلغاء');
                return false
            }
            console.log(ids);
            el.attr('disabled','disabled');
            if(ids.length){
                $.ajax({
                    type: "POST",
                    url: "{{ route('therapists_cancel_sessions') }}",
                    data: {ids,cancel_reason,_token:token},
                    success: function (msg) {
                        if(msg.success){
                            $('#canceledDialog').dialog('close')
                            $("#cancel-reason").val('')
                        }
                        if(msg.success){
                            allSessionDatatableTable.draw();
                        }else{
                            $("#cancel-reason-error").html(msg.message);
                        }
                        el.removeAttr('disabled')
                    }
                });
            }
        });
        $(document).on('click','.cancelAvailableSessionAll',function(){
            ids=[];
            el=$(this);
            $("#available-session-datatable-table .sessionCheckbox:checked").each(function(){
                ids.push($(this).val())
            });
            cancel_reason=$.trim($("#cancel-reason").val());
            if(!cancel_reason){
                $("#cancel-reason-error").html('ادخل سبب الإلغاء');
                return false
            }
            console.log(ids);
            el.attr('disabled','disabled');
            if(ids.length){
                $.ajax({
                    type: "POST",
                    url: "{{ route('therapists_cancel_sessions') }}",
                    data: {ids,cancel_reason,_token:token},
                    success: function (msg) {
                        if(msg.success){
                            $('#canceledDialog').dialog('close')
                            $("#cancel-reason").val('')
                        }
                        if(msg.success){
                            allSessionDatatableTable.draw();
                        }else{
                            $("#cancel-reason-error").html(msg.message);
                        }
                        el.removeAttr('disabled')
                    }
                });
            }
        });
        $(document).on('click','#all-session .cancelSelected',function(e){
            e.preventDefault();
            el=$(this)
            $("#canceledDialog").dialog({
                title: '@lang('home.Cancel Sessions')',
                width: ($(window).width() < 500) ? $(window).width() - 20 : 500, // overcomes width:'auto' and maxWidth bug
                maxWidth: 700,
                height: 270,
                modal: true,
                fluid: true, //new option
                resizable: false,
                show: {effect: 'clip', duration: 350},
                hide: {effect: 'clip', duration: 250},
                open: function () {
                    $("#canceledDialog .cancel-btn-session").addClass('cancelAllSessionAll');
                },
                close:function(){
                    $("#canceledDialog .cancel-btn-session").removeClass('cancelAllSessionAll');
                },
            });
        })
        $(document).on('click','#available-session .cancelSelected',function(e){
            e.preventDefault();
            el=$(this)
            $("#canceledDialog").dialog({
                title: '@lang('home.Cancel Sessions')',
                width: ($(window).width() < 500) ? $(window).width() - 20 : 500, // overcomes width:'auto' and maxWidth bug
                maxWidth: 700,
                height: 270,
                modal: true,
                fluid: true, //new option
                resizable: false,
                show: {effect: 'clip', duration: 350},
                hide: {effect: 'clip', duration: 250},
                open: function () {
                    $("#canceledDialog .cancel-btn-session").addClass('cancelAvailableSessionAll');
                },
                close:function(){
                    $("#canceledDialog .cancel-btn-session").removeClass('cancelAvailableSessionAll');
                },
            });
        })
        $(document).on('click','.cancelSession',function(){
            el=$(this);
            cancel_reason=$.trim($("#cancel-reason").val());
            if(!cancel_reason){
                $("#cancel-reason-error").html('ادخل سبب الإلغاء');
                return false
            }
            id=el.attr('data-id');
            type=el.attr('data-type');
            el.attr('disabled','disabled')
            $.ajax({
                type: "POST",
                url: "{{ route('therapists_cancel_sessions') }}",
                data: {id,cancel_reason,_token:token},
                success: function (msg) {
                    if(msg.success){
                        $('#canceledDialog').dialog('close')
                        $("#cancel-reason").val('')
                    }
                    if(type=='table'){
                        if(msg.success){
                            datatableTable.draw();
                            allSessionDatatableTable.draw();
                        }else{
                            $("#cancel-reason-error").html(msg.message);
                        }
                    }else{
                        if(msg.success) {
                            searchNextSession();
                        }else{
                            swal(msg.message);
                        }
                    }
                    el.removeAttr('disabled');
                }
            });
        });
        $(document).on('click','.cancelBtn',function(e){
            e.preventDefault();
            el=$(this)
            id=el.attr('data-id');
            type=el.attr('data-type');
            $("#canceledDialog").dialog({
                title: '@lang('home.Cancel Session')',
                width: ($(window).width() < 500) ? $(window).width() - 20 : 500, // overcomes width:'auto' and maxWidth bug
                maxWidth: 700,
                height: 270,
                modal: true,
                fluid: true, //new option
                resizable: false,
                show: {effect: 'clip', duration: 350},
                hide: {effect: 'clip', duration: 250},
                open: function () {
                    $("#canceledDialog .cancel-btn-session").addClass('cancelSession').attr('data-type',type).attr('data-id',id);
                },
                close:function(){
                    $("#canceledDialog .cancel-btn-session").removeClass('cancelSession').removeAttr('data-type').removeAttr('data-id');
                },
            });

        });
        $(document).on('change',"#prev-session [name='status']",function(){
            datatableTable.draw();
        })
        $(document).on('change','.checkAll',function(){

            $("#"+$(this).attr('data-element')+" .sessionCheckbox").prop('checked',$(this).is(':checked'));
        })
        var datatableTable=$("#datatable-table").DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url:"{{ route('therapists_sessions') }}",
                data:function(data){
                    data.getPrevSessions=true;
                    data.status = $("#prev-session [name='status']").val();
                },
            },
            order: [[ 2, "desc" ]],
            columns: [
                {data: 'checkbox', name: 'checkbox',orderable: false, searchable: false},
                {data: 'user_name', name: 'users.name'},
                {data: 'start_time', name: 'start_time'},
                {data: 'type', name: 'type'},
                {data: 'session_status', name: 'session_status'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ],
            dom: 'Bfrtip',
            buttons: [
                { extend: 'print', className: 'btn dark btn-outline' },
                { extend: 'pdf', className: 'btn green btn-outline' },
                { extend: 'csv', className: 'btn purple btn-outline ' }
            ],
        });
        $(document).on('change',"#all-session [name='status']",function(){
            allSessionDatatableTable.draw();
        })
        var allSessionDatatableTable=$("#all-session-datatable-table").DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url:"{{ route('therapists_sessions') }}",
                data:function(data){
                    data.getAllSessions=true;
                    data.status = $("#all-session [name='status']").val();
                },
            },
            order: [[ 2, "desc" ]],
            columns: [
                {data: 'checkbox', name: 'checkbox',orderable: false, searchable: false},
                {data: 'user_name', name: 'users.name'},
                {data: 'start_time', name: 'start_time'},
                {data: 'type', name: 'type'},
                {data: 'session_status', name: 'session_status'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ],
            dom: 'Bfrtip',
            buttons: [
                { extend: 'print', className: 'btn dark btn-outline' },
                { extend: 'pdf', className: 'btn green btn-outline' },
                { extend: 'csv', className: 'btn purple btn-outline ' }
            ],
        });
        $.fn.dataTable.ext.errMode = 'none';
        var availableSessionDatatableTable=$("#available-session-datatable-table").DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url:"{{ route('therapists_sessions') }}",
                data:function(data){
                    data.getAvailableSessions=true;
                    data.status = $("#available-session [name='status']").val();
                },
            },
            order: [[ 2, "desc" ]],
            columns: [
                {data: 'checkbox', name: 'checkbox',orderable: false, searchable: false},
                {data: 'user_name', name: 'users.name'},
                {data: 'start_time', name: 'start_time'},
                {data: 'type', name: 'type'},
                {data: 'session_status', name: 'session_status'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ],
            dom: 'Bfrtip',
            buttons: [
                { extend: 'print', className: 'btn dark btn-outline' },
                { extend: 'pdf', className: 'btn green btn-outline' },
                { extend: 'csv', className: 'btn purple btn-outline ' }
            ],
        });
        searchNextSession();
        $(document).on('click','.openClientAnswer',function(e){
            e.preventDefault();
            session_id=$(this).attr('data-id')
            $('#show-client-answer').dialog({
                title:'@lang('home.Visitor Profile')',
                width: ($(window).width()<500)?$(window).width()-20:500, // overcomes width:'auto' and maxWidth bug
                maxWidth: 700,
                height: 400,
                modal: true,
                fluid: true, //new option
                resizable: false,
                show:{effect:'clip',duration:350},
                hide:{effect:'clip',duration:250},
                close:function(){
                    $("#show-client-answer .show-client-answer-dialog").html('<img src="{{ asset('img/loading.gif') }}" alt="">');
                },
                open:function(){
                    $.ajax({
                        type: "GET",
                        url: "{{ route('therapists_sessions') }}",
                        data: {"getSessionsClientAnswer":true,session_id},
                        success: function (msg) {
                            $("#show-client-answer .show-client-answer-dialog").html(msg.html);
                        },
                        error:function(xhr){
                            $("#show-client-answer .show-client-answer-dialog").html('<h4 style="    text-align: center;margin-top: 10%;"> يجب إضافة الخطه العلاجية أولاً </h4>');
                        },
                    });
                }
            });

        });
        function searchNextSession(page=1){
            status=$('#next-session [name="next_status"]').val();
            $("#sessions-filter-blocks").addClass('loading');
            $.ajax({
                type: "GET",
                url: "{{ route('therapists_sessions') }}",
                data: {"getSessions":true,status,page},
                success: function (msg) {
                    $("#sessions-filter-blocks").html(msg.html);
                    $("#sessions-filter-blocks-paginate").html(msg.paginate);
                    $("#sessions-filter-blocks").removeClass('loading');
                    $('.count-down').each(function(){
                        $(this).countdown( $(this).attr('data-date'), function(event) {
                            session_id=$(this).attr('data-id');
                            secounds=(parseInt(event.strftime('%D'))*24*60*60)+(parseInt(event.strftime('%H'))*60*60)+(parseInt(event.strftime('%M'))*60)+(parseInt(event.strftime('%S')));
                            // if(session_id==6237){
                            //     console.log((event.strftime('%D')*24*60*60),(event.strftime('%H')*60*60),(event.strftime('%M')*60),(event.strftime('%S')))
                            //     console.log('15 minits check',secounds,(15*60),secounds<=(15*60),"#start-btn-"+session_id)
                            // }

                            if(secounds<=(15*60)){
                                $("#start-btn-"+session_id).removeClass('d-none');
                            }
                            // if(session_id==6237) {
                            //     console.log('8 hours check',secounds,(8*60*60),secounds<(8*60*60),"#start-btn-"+session_id)
                            // }
                            /*if(secounds<(8*60*60)){
                                $("#cancel-btn-"+session_id).addClass('d-none');
                            }*/
                            $(this).text(
                                event.strftime('%D:%H:%M:%S')

                            );
                        });
                    });
                }
            });
        }
        $(document).on('click','#next-session li.page-item a.page-link',function(e){
            e.preventDefault()
            currentPage=parseInt($("#next-session li.page-item.active a.page-link").text());
            page=$(this).text();
            if($(this).text()=='‹'){
                searchNextSession(currentPage+1)
            }else if($(this).text()=='›'){
                searchNextSession(currentPage-1)
            }else{
                searchNextSession(page)
            }

        })
        $(document).on('change','#next-session [name="next_status"]',function(){
            searchNextSession()
        })

        function traverseEn(str) {
            return str.replace(/۰/g,'0').replace(/۱/g,'1').replace(/۲/g,'2').replace(/۳/g,'3').replace(/۴/g,'4')
                .replace(/۵/g,'5').replace(/۶/g,'6').replace(/۷/g,'7').replace(/۸/g,'8').replace(/۹/g,'9')
                .replace(/٠/g,'0').replace(/١/g,'1').replace(/٢/g,'2').replace(/٣/g,'3').replace(/٤/g,'4')
                .replace(/٥/g,'5').replace(/٦/g,'6').replace(/٧/g,'7').replace(/٨/g,'8').replace(/٩/g,'9');
        }


        var calenderAjax=null;
        $('#show-calender').on('shown.bs.modal', function (e) {

            $('#calendar').fullCalendar({
                height:'auto',
                timeFormat: 'h(:mm) A',
                locale:'ar',
                events:'{{ route('therapists_sessions') }}',//{{--{!! json_encode($sessionCalender) !!}--}},
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                },
                initialDate: '2021-01-01',
                navLinks: false, // can click day/week names to navigate views
                editable: false,
                dayMaxEvents: true, // allow "more" link when too many event
                dayClick: function(date, jsEvent, view){
                    console.log(date);
                    console.log(jsEvent);
                    console.log(view);
                    date=date.format('YYYY-MM-DD');
                    date=traverseEn(date);
                    if(calenderAjax){
                        calenderAjax.abort();
                    }
                    $("#sessions-calendar-blocks").addClass('loading');
                    calenderAjax=$.ajax({
                        type: "POST",
                        url: "{{ route('therapist_sessions_in_day') }}",
                        data: {date,_token:token},
                        success: function (msg) {
                            $("#sessions-calendar-blocks").html(msg.html);
                            $("#sessions-calendar-blocks").removeClass('loading');
                        }
                    });
                }, //dayClick

                //Update Full Calender Ajax Request
                eventClick: function(event){
                    console.log(event.start)
                    console.log(new Date(event.start._i))
                },//eventClick
                eventRender: function( event, element, view )
                {
                    console.log(event);
                    console.log(element);
                    console.log(view);
                    //redo the title to include the description
                    element.find(".fc-content").parent().attr('data-date',event.date).addClass(event.class).html('');//.html('<span class="session-count">'+event.count+'</span>');
                },
                eventAfterAllRender: function(view){
                    for( cDay = view.start.clone(); cDay.isBefore(view.end) ; cDay.add(1, 'day') ){

                        var dateNum = cDay.format('YYYY-MM-DD');
                        dateNum=traverseEn(dateNum);
                        var dayEl = $('.fc-day-top[data-date="' + dateNum + '"]');

                        var eventCount = $('.fc-event-container .fc-day-grid-event[data-date="'+dateNum+'"]').length;
                        console.log(dateNum);
                        console.log(dateNum);
                        console.log(eventCount);

                        if(eventCount){

                            var html = '<span class="calender-event-count">' +
                                '<i>' +
                                eventCount +
                                '</i>'+
                                '</span>';

                            dayEl.append(html);

                       }
                    }
                }
            });
        });

        $(document).on('click','.save-data,.save-data-continuo',function(event){
            event.preventDefault();
            el=$(this);
            let type = $("#individuallyForm input[name=type]:checked").val();
            let start_time = $("#individuallyForm input[name=start_time]").val();
            let color = $("#individuallyForm input[name=color]").val();
            let text_color = $("#individuallyForm input[name=text_color]").val();
            let event_id = $("#individuallyForm input[name=event_id]").val();
            let _token = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                url: "{{ route("calenderSession") }} ",
                type: "POST",
                data: {
                    type: type,
                    start_time: start_time,
                    color: color,
                    text_color: text_color,
                    _token: _token,
                    event_id: $("#event_id").val(),
                    fun_type: $("#fun_type").val(),
                },
                success: function (response) {
                    console.log(response);
                    if(response.success){
                        /*swal(response.message);

                        //location.reload();
                        $('.message').html('<div class="alert dark alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> </button><b>' + response.message + '</b></div>');
                        $('#calendar').fullCalendar('refetchEvents');
                        if(el.hasClass('save-data')){
                            $('#dialog').dialog("close");
                        }

                        $('.message').html('')*/
                        $('.message').html('<div class="alert dark alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> </button><b>' + response.message + '</b></div>');
                        $("#dialog").animate({
                            scrollTop: $('#dialog .message').offset().top
                        }, 2000);

                        setTimeout(function(){
                            $('#dialog').dialog('close')
                        },500);
                        setTimeout(function(){
                           location.reload();
                        },1000);


                    }else{
                        $('.message').html('<div class="alert dark alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> </button><b>' + response.message + '</b></div>');
                        $("#dialog").animate({
                            scrollTop: $('#dialog .message').offset().top
                        }, 2000);
                    }
                },
                error: function (xhr) {
                    $('.message').html('');
                    $.each(xhr.responseJSON.errors, function (key, value) {
                        $('.message').append('<div class="alert dark alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> </button><b>' + value + '</b></div>');
                    });
                },
            });
        });
        $(document).on('click','.save-schedule-data',function(event){
            event.preventDefault();
            let days =  $("input[name='days[]']:checkbox:checked").map(function(){
                return $(this).val();
            }).get();
            let type = $("#scheduleForm input[name=type]:checked").val();
            let start_date = $("input[name=start_date]").val();
            let end_date = $("input[name=end_date]").val();
            let timeSlotTime = $("input[name=timeSlotTime]").val();

            let color = $("input[name=color]").val();
            let text_color = $("input[name=text_color]").val();
            let event_id = $("input[name=event_id]").val();
            let _token = $('meta[name="csrf-token"]').attr('content');
            el=$(this);
            el.attr('disabled','disabled');
            $.ajax({
                url: "{{ route("scheduleCalenderSession") }} ",
                type: "POST",
                data: {
                    type: type,
                    start_date: start_date,
                    end_date: end_date,
                    timeSlotTime: timeSlotTime,
                    days: days,
                    color: color,
                    text_color: text_color,
                    _token: _token,
                },
                success: function (response) {

                    if(response.success){
                        //location.reload();
                        $('.message').html('<div class="alert dark alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> </button><b>' + response.message + '</b></div>');
                        $('#calendar').fullCalendar('refetchEvents');
                        setTimeout(function(){
                            $('#dialog').dialog('close')
                        },500);
                        setTimeout(function(){
                           //location.reload();
                        },1000);
                        $('.message').html('')

                    }else{
                        $('.message').html('<div class="alert dark alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> </button><b>' + response.message + '</b></div>');
                    }
                    el.removeAttr('disabled');
                },
                error: function (xhr) {
                    $('.message').html('');
                    $("#scheduleForm .alert.dark.alert-danger.alert-dismissible").remove();
                    $.each(xhr.responseJSON.errors, function (key, value) {
                        //$('.message').append('<div class="alert dark alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> </button><b>' + value + '</b></div>');
                    $('<div class="alert dark alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> </button><b>' + value + '</b></div>').insertAfter("#scheduleForm #"+key);
                    });
                    el.removeAttr('disabled');
                },
            });
        });
        var dateToday = new Date();
        $(".timepickerinline").datetimepicker({
            //debug:true,
            inline: true,
        });
        $('.datetimepicker-right').datetimepicker({
            //debug:true,
            minDate:dateToday,
            widgetPositioning:{
                horizontal: 'right',
                vertical: 'bottom'
            }
        });
        $('.datetimepicker-left').datetimepicker({
            //debug:true,
            minDate:dateToday,
            widgetPositioning:{
                horizontal: 'left',
                vertical: 'bottom'
            }
        });
        $('#start_time').datetimepicker({
            //debug:true,
            inline: true,
            minDate:dateToday,
            widgetPositioning:{
                horizontal: 'left',
                vertical: 'bottom'
            }
        });
        $(document).on('click','.add-time-slot-btn',function(){
            $('#dialog').dialog({
                title:'@lang("home.add-session")',
                width: ($(window).width()<400)?$(window).width()-20:400, // overcomes width:'auto' and maxWidth bug
                maxWidth: 900,
                height: 650,
                modal: true,
                fluid: true, //new option
                resizable: false,
                show:{effect:'clip',duration:350},
                hide:{effect:'clip',duration:250},
            });
        })
        var ajaxRequest=null;

        $(document).on('click',".owl-carousel .filter-day",function(e){
            if(ajaxRequest){
                ajaxRequest.abort()
            }
            e.preventDefault();
            el=$(this);
            $(".owl-carousel .filter-day").removeClass('active');
            el.addClass('active');
            $(".session-day-blocks").addClass('loading');
            date=el.attr('data-date');
            ajaxRequest=$.ajax({
                type: "POST",
                url: "{{route('get_sessions_by_date')}}",
                data: {"date": date,_token:token},
                success: function (msg) {
                    $(".session-day-blocks").html(msg.html).removeClass('loading');
                }
            });
        })
        carousel=$('.owl-carousel')
        owl=carousel.owlCarousel({
            rtl:true,
            loop:true,
            margin:10,
            nav:true,
            dots: false,
            singleItem:true,
            responsive:{
                0:{
                    items:5
                },
                600:{
                    items:5
                },
                1000:{
                    items:5
                }
            }
        })
        $( ".owl-prev").html('<i class="fa fa-chevron-right"></i>');
        $( ".owl-next").html('<i class="fa fa-chevron-left"></i>');

        //owl.trigger('next.owl.carousel');
        $(".owl-carousel .item a.filter-day[data-date='{{ date('Y-m-d') }}']").trigger('click').addClass('active')
        carousel.trigger('to.owl.carousel', "{{ date('d')-4 }}");
        owl.trigger('next.owl.carousel');
    </script>
    <script>
        $(document).on('keyup','#searchTimeZone',function(){
            var value = $(this).val();
            $("#timeZone > li > a").each(function() {
                if ($(this).text().toLowerCase().search(value.toLowerCase()) > -1) {
                    $(this).parent().show();
                }
                else {
                    $(this).parent().hide();
                }
            })
        })




    </script>
@endsection