@{
    ViewBag.Title = "Doctor Appointments";
}

<style>
    .k-scheduler {
        font-family: "DejaVu Sans", "Arial", sans-serif;
    }

    /* Hide toolbar, navigation and footer during export */
    .k-pdf-export .k-scheduler-toolbar,
    .k-pdf-export .k-scheduler-navigation .k-nav-today,
    .k-pdf-export .k-scheduler-navigation .k-nav-prev,
    .k-pdf-export .k-scheduler-navigation .k-nav-next,
    .k-pdf-export .k-scheduler-footer {
        display: none;
    }

    .k-scheduler-workweekview .k-scheduler-table td  {
        height: 100px !important;
    }
    .k-scheduler-table tr {
        height: 30px;
    }

    .k-scheduler-table .k-today, .k-today>.k-scheduler-datecolumn, .k-today > .k-scheduler  {
        background-color:#FFF8DC;
    }

    .k-event-template {
    padding: .3em 1.4em .3em .6em;
    font-size: 11px;
    }
</style>

<div class="row">
    <div class="col-lg-12">
        @(Html.Kendo().Scheduler<HMS.Web.Areas.Doctor.Models.DoctorAppointmentViewModel>()
              .Name("appointments")
              .Date(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day))
              .StartTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 7, 00, 00))
              .Views(views =>
              {
                  views.DayView(dayView => dayView.WorkDayCommand(false).ShowWorkHours(true));
                  views.WorkWeekView(weekView => weekView.Selected(true).WorkDayCommand(false).ShowWorkHours(true));
                  views.MonthView();
                  views.AgendaView();
              })
                                                      .WorkWeekStart(0)
                                      .WorkWeekEnd(4)
              .WorkDayStart(8, 0, 0)
              .WorkDayEnd(20, 0, 0)
              .MinorTickCount(4)
              .Toolbar(t =>
              {
                  t.Pdf();
              })
              .Editable(editable =>
              {
                  editable.TemplateName("Appointment");
              })
              .DataSource(d => d
                  .Model(m =>
                  {
                      m.Id(f => f.Id);
                      m.Field(f => f.Title).DefaultValue("Title");
                      m.RecurrenceId(f => f.RecurrenceId);
                  })
                  .Events(e => e.Error("error_handler"))
                  .Create("CreateAppointment", "Appointments")
                  .Read("ReadAppointments", "Appointments")
                  .Update("UpdateAppointment", "Appointments")
                  .Destroy("DestroyAppointment", "Appointments")
                  .ServerOperation(true)
                  .Events(e => e.Error("error_handler"))
              )
              .EventTemplate(
                                            "<div data-id='#=PatientId#' class='text-center k-event-content' style='font-size: 11px'>" + "#=PatientNo#" + " - " + "#=Patient#</div>" +
                                                    "#if (description != null)  { #<p class='text-center k-event-content' style='font-size: 11px'>Description: #=description# </p> # } # " 
              )
                              .AllDayEventTemplate("<div data-id='#=PatientId#' class='text-center k-event-content' class='text-center k-event-content' style='font-size: 11px'>" + "#=PatientNo#" + " - " + "#=Patient#</div>" +
                                      "#if (description != null)  { #<p style='font-size: 11px'>Description: #=description# </p> # } # " 
                      )
              
              .Pdf(pdf => pdf
                  .FileName("Appointments.pdf")
                  .ProxyURL(Url.Action("PdfExportSave", "Appointments"))
              )
              )
    </div>
</div>

<div id="errors" class="modal fade ">
    <div class="modal-dialog modal-sm">
        <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">Warning</h4>
            </div>
            <div id="er" class="modal-body">
                <p></p>
            </div>
            <div class="modal-footer">
                <button class="btn" type="submit" data-dismiss="modal" id="ok">OK</button>
            </div>
        </div>
    </div>
</div>


@section scripts {
    <script>
        $("div").on("dblclick", '.k-event-content', function (e) {
            e.stopImmediatePropagation();
            var patientId = $(e.target).data('id');
            window.location.href = "@Url.Action("assessment", "assessments")?patientId=" + patientId;
        });

        $("#ok").click(function () {
            var scheduler = $('#appointments').data('kendoScheduler');
            scheduler.view(scheduler.view().name);
        });

        function error_handler(e) {
            if (e.errors) {
                var message = "\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                $("#errors").modal('show');
                $("#er p").html(message);
                $("#yes").click(function () {
                    $("#errors").modal('hide');
                });
            }
        }
        
    </script>
}
<style>
.k-event-content{
    cursor: pointer;
    z-index: 1000;
}
</style>
