<div data-options="dxView : { name: 'Scheduler', title: 'Scheduler' } ">

    <div data-options="dxContent : { targetPlaceholder: 'content' } " class="dx-content-background">

        <div data-options="dxViewPlaceholder: { viewName: 'ActivitiesAddEdit' }" data-bind="with: activityAddEditVM"></div>

        <div style="background: #f79239" class="sh-fluent-shadow-bottom" data-bind="dxToolbar: { items: [
                    { location: 'before', options: { icon: 'fal fa-calendar'}, widget: 'dxButton' },
                    { location: 'before', text: '@scheduler'},
                    { location: 'before', text: ' '},
                    { location: 'before', options: { icon: 'fal fa-plus', text: '@new', onClick: addAppointmentClick }, widget: 'dxButton' },
                    { location: 'before', options: { text: '@edit', onClick: function() { appointmentEdit() }}, widget: 'dxButton', visible: selectedAppointment },
                    { location: 'before', options: { text: '@delete', onClick: function (e) { sh.Utils().shDeletePopover.show(e.event.target, appointmentDelete, Globalize.formatMessage('appointmentDeleteWarning') ) } }, widget: 'dxButton', visible: selectedAppointment() && !selectedAppointment().isCompleted() },
                    { location: 'before', disabled: selectedAppointment() && selectedAppointment().isFuture() || (selectedAppointment() && !selectedAppointment().patient().episodeOfCareId && selectedAppointment() && selectedAppointment().type() === 1),
                        options: { text: 'Complete', icon: 'check', onClick: appointmentComplete }, widget: 'dxButton', visible: selectedAppointment() && !selectedAppointment().isCompleted() },
                    { location: 'before', options: { text: 'Revert', icon: 'revert', onClick: appointmentRevertCheck }, widget: 'dxButton', visible: selectedAppointment() && selectedAppointment().isCompleted() },
                    { location: 'before', options: { text: 'Appointment Letter', icon: 'fal fa-print', onClick: printAppointmentLetter }, widget: 'dxButton', visible: selectedAppointment() && selectedAppointment().type() === 1 },
                    { location: 'before', options: { text: 'Clinic List', icon: 'fal fa-print', onClick: printClinicList }, widget: 'dxButton' },
                    { location: 'after', options: { text: MyPen.app.user.siteName, icon: 'fa fa-h-square', onClick: function() { MyPen.utils.changeSiteClick() } }, widget: 'dxButton' }
         ] }"></div>

        <section class="left-scheduler-layout-box left-scheduler-layout-box-visible sh-animation">
            <div class="left-scheduler-content left-scheduler-content-hidden" style="margin-top: 10px;">
                <h4 class="rotateText">Filters</h4>
                <div style="float: right; background-color: #fff; color: #333;" data-bind="dxButton: { icon: 'ms-Icon ms-Icon--chevronThinRight', onClick: ShowLeftLayoutBox }"></div>
            </div>
            <div style="padding: 15px 15px" class="left-scheduler-content left-scheduler-content-visible">
                <div style="margin-bottom: 20px;">
                    <h4 style="display: inline;">Filters</h4>
                    <div style="float: right; background-color: #fff; color: #333; margin-top: 0; display: inline;" data-bind="dxButton: { icon: 'ms-Icon ms-Icon--chevronThinLeft', onClick: ShowLeftLayoutBox }"></div>
                </div>
                <div data-bind="dxCalendar: {
                    firstDayOfWeek: 0,
                    showTodayButton: true,
                    currentDate: currentDate
                      }">
                </div>
                <div class="scheduler-filters">
                    <div class="sh-form-section" style="margin-top: 30px; margin-bottom: 5px;">@calendars</div>
                    <div data-bind="dxRadioGroup:{
                        items: diaries,
                        onValueChanged: onDiaryValueChanged,
                        valueExpr: 'value',
                        value: showTeamDiary
                    }"></div>
                </div>
            </div>
        </section>

        <section class="center-scheduler-layout-box">
            <div id="scheduler" data-bind="dxScheduler: {
                dataSource: schedulerDS,
                startDayHour: 7,
                endDayHour: 18,
                currentView: currentView,
                currentDate: currentDate,
                showAllDayPanel: true,
                height: '100%',
                width: '100%',
                views: ['day', 'workWeek', 'month', 'timelineDay'],
                groups: schedulerGroups,
                resources: [{
                    field: 'type',
                    allowMultiple: false,
                    dataSource: resourcesData,
                    label: 'Type',
                    useColorAsDefault: true,
                }, {
                    field: 'clinicianId',
                    label: 'clinicianName',
                    dataSource:  MyPen.db.clinicianScheduler
                }],
                useDropDownViewSwitcher: isMobileSize,
                crossScrollingEnabled: isMobileSize,
                appointmentTemplate: appointmentTemplate,
                appointmentTooltipTemplate: 'tooltip-template',
                dropDownAppointmentTemplate: 'dropdown-tooltip-template',
                onAppointmentClick: appointmentClick,
                onAppointmentDblClick: appointmentDblClick,
                onCellClick: cellClick,
                onOptionChanged: schedulerOptionChanged,
                onInitialized: schedulerInitialized
            }">
                <div data-options="dxTemplate: {name: 'shortAppointment'}" style="padding: 0;">

                    <div style="position: absolute; top: 0; bottom: 0; left: 0; width: 4px;"
                         data-bind="style: { backgroundColor: MyPen.db.scheduler.getAppointmentTypeColor($data.type) }"></div>

                    <div class="scheduler-appointment">
                        <div class="details">
                            <div class="ellipsis" data-bind="text: text"></div>
                            <!--<span> - </span>
                            <span data-bind="text: moment(startDate).format('HH:mm')"></span> - <span data-bind="text: moment(endDate).format('HH:mm')"></span>-->
                        </div>
                        <div class="icons">
                            <div class="fa fa-check" style="font-size: 10px;" data-bind="visible: isCompleted"></div>
                        </div>
                    </div>

                </div>
                <div data-options="dxTemplate: {name: 'largeAppointment'}" style="padding: 0;">
                    <div style="position: absolute; top: 0; bottom: 0; left: 0; width: 4px;"
                         data-bind="style: { backgroundColor: MyPen.db.scheduler.getAppointmentTypeColor($data.type) }"></div>

                    <div class="scheduler-appointment">
                        <div class="details">
                            <h6 class="appointment-header" data-bind="text: text"></h6>
                            <!--<div class="appointment-time dx-scheduler-appointment-content-details"><span data-bind="text: moment(startDate).format('HH:mm')"></span> - <span data-bind="text: moment(endDate).format('HH:mm')"></span></div>-->

                            <div data-bind="visible: clinicianName" style="display: block; margin-top: 5px;">
                                <h6 style="display: inline;" class="fa fa-user-md"></h6>
                                <h6 style="display: inline;" data-bind="text: clinicianName"></h6>
                            </div>
                        </div>
                        <div class="icons">
                            <div class="fa fa-check" style="font-size: 10px;" data-bind="visible: isCompleted"></div>
                        </div>
                    </div>

                </div>

                <div data-options="dxTemplate: {name: 'weekAppointment'}" style="padding: 0;">
                    <div style="position: absolute; top: 0; bottom: 0; left: 0; width: 4px;"
                         data-bind="style: { backgroundColor: MyPen.db.scheduler.getAppointmentTypeColor($data.type) }"></div>

                    <div class="scheduler-appointment">
                        <div class="details">
                            <div class="ellipsis" data-bind="text: text"></div>
                        </div>
                        <div class="icons">
                            <div class="fa fa-check" style="font-size: 10px;" data-bind="visible: isCompleted"></div>
                        </div>
                    </div>
                </div>

                <div data-options="dxTemplate: {name: 'monthAppointment'}" style="padding: 0;">
                    <div style="font-size: 13px;">
                        <div style="position: absolute; top: 0; bottom: 0; left: 0; width: 4px;"
                             data-bind="style: { backgroundColor:  MyPen.db.scheduler.getAppointmentTypeColor($data.type) }"></div>

                        <div class="scheduler-appointment">
                            <div class="details">
                                <div class="ellipsis" data-bind="text: allDay? text : moment(startDate).format('HH:mm') + ' ' + text"></div>
                                <!--<div class="appointment-time">
                                    <span data-bind="text: moment(startDate).format('HH:mm')"></span> - <span data-bind="text: moment(endDate).format('HH:mm')"></span>
                                </div>-->
                            </div>
                            <div class="icons">
                                <div class="fa fa-check" style="font-size: 10px;" data-bind="visible: isCompleted"></div>
                            </div>
                        </div>

                    </div>
                </div>

                <div data-options="dxTemplate: {name: 'tooltip-template'}">
                    <div class="tooltipContainer">
                        <div style="position: absolute; top: 0; bottom: 0; left: 0; width: 4px;"
                             data-bind="style: { backgroundColor: isCompleted? $root.statusColours[0].color : $root.statusColours[1].color }"></div>
                        <div style="text-align: left;">
                            <h4 class="ellipsis" data-bind="text: text"></h4>
                            <div class="appointment-time dx-scheduler-appointment-content-details"><span data-bind="text: moment(startDate).format('HH:mm')"></span> - <span data-bind="text: moment(endDate).format('HH:mm')"></span></div>
                            <div style="margin: 10px 0 0 0"></div>
                            <div title="Edit Appointment" class="sh-color-button sh-colour-patientEdit-font"
                                 data-bind="dxButton: { onClick: $root.appointmentEdit, icon: 'fal fa-pencil', hint: 'Edit Appointment' }"></div>
                            <div title="Complete Appointment" class="sh-color-button sh-colour-complete-font"
                                 data-bind="dxButton: { onClick: $root.appointmentComplete, visible: !isCompleted, icon: 'fal fa-check', hint: 'Complete Appointment',
                                    disabled: $root.selectedAppointment() && $root.selectedAppointment().isFuture() || ($root.selectedAppointment() && !$root.selectedAppointment().patient().episodeOfCareId && $root.selectedAppointment() && $root.selectedAppointment().type() === 1) }"></div>
                            <div title="Delete Appointment" class="sh-color-button sh-colour-alerts-font"
                                 data-bind="dxButton: { onClick: function (e) { sh.Utils().shDeletePopover.show(e.event.currentTarget, $root.appointmentDelete, Globalize.formatMessage('appointmentDeleteWarning')) }, visible: !isCompleted, icon: 'fal fa-times', hint: 'Delete Appointment' } "></div>
                            <div title="Revert Appointment" class="sh-color-button sh-colour-patientEdit-font"
                                 data-bind="dxButton: { onClick: $root.appointmentRevertCheck, visible: isCompleted, icon: 'revert', hint: 'Revert Appointment' }"></div>
                            <div title="Print Appointment Letter" class="sh-color-button sh-colour-print-font"
                                 data-bind="dxButton: { onClick: $root.printAppointmentLetter, visible: type === 1, icon: 'fal fa-print', hint: 'Print Appointment Letter' }"></div>
                        </div>
                    </div>
                </div>
                <div data-options="dxTemplate: {name: 'dropdown-tooltip-template'}" style="padding: 0">
                    <div class="tooltipContainer">
                        <div style="width: 4px; height: auto" data-bind="style: { backgroundColor: $data.isCompleted? '#56ca85' : '#60BEFF' }">
                            <div style="padding: 10px 10px 10px 5px;">
                                <h5 class="appointment-text" data-bind="text: text"></h5>
                                <div class="appointment-dates"><span data-bind="text: moment(startDate).format('HH:mm')"></span> - <span data-bind="text: moment(endDate).format('HH:mm')"></span></div>
                                <div class="appointment-button-Container">
                                    <div title="Edit Appointment" class="sh-color-button sh-colour-patientEdit-font"
                                         data-bind="dxButton: { onClick: $root.appointmentEdit, icon: 'fal fa-pencil' }"></div>
                                    <div title="Complete Appointment" class="sh-color-button sh-colour-complete-font"
                                         data-bind="dxButton: { onClick: $root.appointmentComplete, visible: !isCompleted, icon: 'fal fa-check'}"></div>
                                    <div title="Delete Appointment" class="sh-color-button sh-colour-alerts-font"
                                         data-bind="dxButton: { onClick: function (e) { sh.Utils().shDeletePopover.show(e.event.currentTarget, $root.appointmentDelete, Globalize.formatMessage('appointmentDeleteWarning')) }, icon: 'fal fa-times' } "></div>
                                    <div class="sh-color-button sh-colour-print-font"
                                         data-bind="dxButton: { onClick: $root.printAppointmentLetter, visible: type === 1, icon: 'fal fa-print' }"></div>
                                </div>
                            </div>
                        </div>
                        <div style="border-bottom: solid 1px #eaeaea;"></div>
                    </div>
                </div>
            </div>
        </section>

        <section class="right-scheduler-layout-box">
            <div style="padding: 10px 20px;">
                <!-- ko ifnot: selectedAppointment -->
                <!--<div class="centerText" style="color: grey">
                    <h3>@noAppointmentSelected</h3>
                </div>-->
                <div class="sh-noDataPlaceholder-absolute" style="padding: 0;">
                    <div class="fad fa-calendar"></div>
                    <h4>@noAppointmentSelected</h4>
                </div>
                <!-- /ko -->
                <div data-bind="with: selectedAppointment">
                    <div class="detailTableScroll" style="top: 10px; left: 20px; right: 20px; margin-bottom: 15px;" data-bind="dxScrollView: {  }">
                        <div style="margin-top: 5px;" class="sh-form-section-top">@appointmentDetails</div>
                        <!-- ko if: type() == 1 -->
                        <div style="margin-top: 20px; margin-left: 4px;" data-options="dxViewPlaceholder: { viewName: 'PatientBannerMiniLinks' }" data-bind="with: patient"></div>
                        <!-- /ko -->
                        <div data-bind="visible: isCompleted" style="background-color: #eaeaea; border-left: solid 4px #B7B7B7; width: 100%; padding: 7px 7px 7px 10px; margin-top: 20px;">
                            <div style="font-size: 11px; color: #767676; display: inline-block; margin-right: 5px;" class="fa fa-check"></div>
                            <div style="font-size: 11px; color: #767676; display: inline-block">Completed</div>
                        </div>
                        <table class="detailsTable" style="margin: 10px 0 15px 0;">
                            <tr>
                                <td style="width: 130px;">@appointmentType:</td>
                                <td><h5 data-bind="text: MyPen.db.scheduler.getAppointmentType($data.type()).desc"></h5></td>
                            </tr>
                            <tr>
                                <td style="width: 90px;">@activityType:</td>
                                <td><h5 data-bind="text: activityTypeName"></h5></td>
                            </tr>
                            <tr data-bind="visible: type() !== 1 ">
                                <td style="width: 90px;">@title:</td>
                                <td><h5 data-bind="text: text"></h5></td>
                            </tr>
                            <tr>
                                <td style="width: 90px;">@start:</td>
                                <td><h5 data-bind="text: startDateDesc"></h5></td>
                            </tr>
                            <tr>
                                <td style="width: 90px;">@end:</td>
                                <td><h5 data-bind="text: endDateDesc"></h5></td>
                            </tr>
                            <tr>
                                <td style="width: 90px;">@clinician:</td>
                                <td><h5 data-bind="text: clinicianName"></h5></td>
                            </tr>
                            <tr>
                                <td style="width: 90px;">@note:</td>
                                <td><h5 class="notes-text" data-bind="text: note"></h5></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </section>

        <div data-bind="shPopup:{
            visible: appointmentAddEditPopup.visible, title: appointmentAddEditPopup.isEdit()? 'Edit Appointment' : 'Add Appointment', maxWidth: '600px',
             closeOnOutsideClick: false, onShown: appointmentAddEditPopup.onShown,
            toolbarItems: [
                { toolbar: 'bottom', location: 'after', widget: 'dxButton', options:
                 {
                    text: '@save',
                    onClick: appointmentAddEditPopup.save
                 }
                },
                { toolbar: 'bottom', location: 'after', widget: 'dxButton', options:
                 {
                    text: '@cancel',
                    onClick: appointmentAddEditPopup.cancel
                 }
                }
            ]
            }">

            <div id="schedulerValidation" data-bind="dxScrollView: {}, dxValidationGroup : {}">
                <div data-options="dxViewPlaceholder: { viewName: 'shValidationSummary' }"></div>
                <div class="scrollViewMargin" data-bind="with: appointmentAddEditPopup.appointmentData">
                    <label class="sh-field-label">@type</label>
                    <div id="appointmentType" class="sh-field-value" data-bind="dxSelectBox: { value: type, items: $root.resourcesData, valueExpr: 'id', displayExpr: 'desc',
                             onValueChanged: $root.appointmentAddEditPopup.onTypeValueChanged, disabled: $root.appointmentAddEditPopup.isEdit() }"></div>
                    <!-- ko if: type() == 1 -->
                    <span class="sh-field-label">@patient</span>
                    <span class="isMandatory"></span>
                    <!-- ko if: patient -->
                    <div class="table-container sh-field-value">
                        <div class="table-row">
                            <div class="table-cell">
                                <div style="margin-bottom: 15px; display: inline;" data-options="dxViewPlaceholder: { viewName: 'PatientBannerMini' }" data-bind="with: patient"></div>
                            </div>
                            <div class="table-cell" style="vertical-align: middle;" data-bind="visible: !$root.appointmentAddEditPopup.isEdit()">
                                <div class="patientBannerButton fal fa-times" style="color: black;" data-bind="dxclick: $root.appointmentAddEditPopup.clearPatientClick"></div>
                            </div>
                        </div>
                    </div>
                    <!-- /ko -->
                    <!-- ko ifnot: patient -->
                    <div class="dx-widget dx-feedback dx-lookup dx-lookup-empty sh-field-value" data-bind="dxclick: $root.appointmentAddEditPopup.patientClick">
                        <div class="dx-lookup-field-wrapper">
                            <div class="dx-lookup-field" style="position: absolute;">@findPatient</div>
                            <div class="dx-lookup-arrow"></div>
                        </div>
                    </div>
                    <!-- /ko -->
                    <div data-bind="dxValidator: {
                        adapter: {
                            getValue: $root.appointmentAddEditPopup.getPatientValue,
                            reset: function() { }
                        }, validationRules: [{ type: 'required', message: '@schedulerPatientValidation' }]}">
                    </div>

                    <label class="sh-field-label">Activity Type</label><span class="isMandatory"></span>
                    <div class="sh-field-value" data-bind="shLookup: { dataSource: MyPen.db.activity.ActivityType,
                                                    valueExpr: 'Id', searchExpr: 'Name', displayExpr: 'Name', value: activityTypeId }, dxValidator: $root.activityTypeValidation">
                    </div>
                    <!-- /ko -->
                    <!-- ko ifnot: type() == 1 -->
                    <label class="sh-field-label">@title</label><span class="isMandatory"></span>
                    <div class="sh-field-value" data-bind="dxTextBox: { value: text, showClearButton: true }, dxValidator: MyPen.Validation.AppointmentValidation.Title"></div>
                    <!-- /ko -->
                    <div class="flex" style="justify-content:space-between">
                        <div style="display: block;">
                            <label class="sh-field-label">@start</label><span class="isMandatory"></span>
                            <div id="schedulerStartDate" class="sh-field-value" data-bind="dxDateBox: { value: startDate, type: allDay()? 'date' : 'datetime', isValid: $root.isStartDateValid,
                                     displayFormat: 'dd/MM/yyyy HH:mm',
                                      onOpened: function(e) {
                                     if (e.component._strategy._timeView) {
                                        e.component._strategy._timeView._hourBox.option('min', 7);
                                        e.component._strategy._timeView._hourBox.option('max', 18);
                                     }
                                     } },
                                     dxValidator: $root.startDateValidation"></div>
                        </div>
                        <div style="display: block;">
                            <label class="sh-field-label">@allDay</label>
                            <div style="display: block;">
                                <div class="sh-field-value" data-bind="dxSwitch: { value: allDay, switchedOnText: 'Yes', switchedOffText: 'No', onValueChanged: $root.appointmentAddEditPopup.onAllDayValueChanged }"></div>
                                <div class="dx-switch-label" data-bind="text: allDay()? 'Yes' : 'No'"></div>
                            </div>
                        </div>
                    </div>
                    <label class="sh-field-label">@end</label><span class="isMandatory"></span>
                    <div id="schedulerEndDate" class="sh-field-value" data-bind="dxDateBox: { value: endDate, type: allDay()? 'date' : 'datetime', isValid: $root.isEndDateValid,
                             displayFormat: 'dd/MM/yyyy HH:mm',
                             onOpened: function(e) {
                             if (e.component._strategy._timeView) {
                                        e.component._strategy._timeView._hourBox.option('min', 7);
                                        e.component._strategy._timeView._hourBox.option('max', 18);
                             }
                                     } },
                              dxValidator: $root.endDateValidation"></div>
                    <label class="sh-field-label">@clinician</label><span class="isMandatory"></span>
                    <div class="sh-field-value" data-bind="shLookup: { dataSource: MyPen.db.clinician,
                                                    valueExpr: 'Id', searchExpr: 'Name', displayExpr: 'Name', value: clinicianId,
                                                    usePopover: true, searchEnabled: true, showPopupTitle: false }, dxValidator: MyPen.Validation.AppointmentValidation.Clinician">
                    </div>
                    <label class="sh-field-label">@reminder</label>
                    <div class="sh-field-value" data-bind="dxSelectBox: { value: reminderMinutes, items: MyPen.db.scheduler.reminderMinutesList, valueExpr: 'id', displayExpr: 'desc' }"></div>

                    <!-- ko if: $root.appointmentAddEditPopup.isNotificationAccepted && type() == 1 -->
                    <div style="display: block;">
                        <label class="sh-field-label">@smsNotifcation</label>
                        <div style="display: block;">
                            <div class="sh-field-value" data-bind="dxSwitch: { value: hasNotification, switchedOnText: 'Yes', switchedOffText: 'No' }"></div>
                            <div class="dx-switch-label" data-bind="text: hasNotification()? 'Yes' : 'No'"></div>
                        </div>
                    </div>

                    <!-- ko if: hasNotification -->
                    <label class="sh-field-label">SMS Template</label><span class="isMandatory"></span>
                    <div class="sh-field-value" data-bind="shLookup: { dataSource: MyPen.db.patient.NotificationTemplate,
                                                            valueExpr: 'Id', searchExpr: 'Name', displayExpr: 'Name', value: notificationTemplateId,
                                                            usePopover: true, searchEnabled: true, showPopupTitle: false }, dxValidator: $root.smsTemplateValidation">

                    </div>
                    <!-- /ko -->
                    <!-- /ko -->
                    <label style="display: block;" class="sh-field-label">@note</label>
                    <div class="sh-field-value" data-bind="dxTextArea: { value: note, height: 130 }"></div>
                </div>
            </div>

        </div>

    </div>
</div>