@using EnVisage.Code
@using EnVisage.Code.HtmlHelpers
@model EnVisage.Models.TrainingModel
@{
    var resources = string.Join("','", Model.Resources);
    resources = "'" + resources + "'";
    var weekEndsStr = string.Empty;
    foreach (var dateTime in Model.Weekends)
    {
        if (!string.IsNullOrEmpty(weekEndsStr))
        {
            weekEndsStr += ",";
        }
        weekEndsStr += "'" + dateTime.ToShortDateString() + "'";
    }
}

    <script type="text/javascript">
    	var datePickerOptions = {
    		format: 'm/d/yyyy',
    		autoclose: true,
    		startDate: '@(Constants.MIN_SELECTABLE_DATE)', // SA. ENV-1235
			endDate: '@(Constants.MAX_SELECTABLE_DATE)'    // SA. ENV-1235
		};

    	var _stDataChanged = false;
        function onSTDataChanged() {
            _stDataChanged = true;
        }
        function resetSTDataChanged() {
            _stDataChanged = false;
        }
        function isSTDataChanged() {
            return _stDataChanged;
        }

        function initTrainings() {
            multik = $("#@Html.ClientIdFor(model=>model.Resources)").select2({
            placeholder: "Select resources",
                onSelect: function(a, b) {
            }
                }).on('change', updateSliderTitle);
            var resources = [@Html.Raw(resources)];
            fillResources(resources);

            multik1 = $("#@Html.ClientIdFor(model=>model.Weekends)").select2({
                placeholder: "Select weekends",
                onSelect: function (a, b) {
                }
            }).on('change', updateSliderTitle);
            var resources = [@Html.Raw(resources)];
            var weekEnds = [@Html.Raw(weekEndsStr)];
            fillWeekDays(weekEnds);
         
            var slider = $('#@Html.ClientIdFor(model => model.TrainingTimeAllocated)_container').slider({
                'range': 'min',
                'min': 0,
                'max': 100,
                'value': $('#@Html.ClientIdFor(model => model.TrainingTimeAllocated)_container .sliderValue').val(),
                change: function (event, ui) {
                    onPercentageChange(event, ui, $(this));
                    //$("#@Html.ClientIdFor(model=>model.TrainingTimeAllocated)").val(ui.value);
                },
                slide: function (event, ui) {
                    onPercentageSlide(event, ui, $(this));
                    //$("#@Html.ClientIdFor(model=>model.TrainingTimeAllocated)").val(ui.value);
                }
            });


        	$('#trainingForm .datepicker').datepicker(datePickerOptions).on('changeDate', function (date) {
                calcDiff();
            });

            $('#@Html.ClientIdFor(model => model.TrainingStartDate)').change(onDateChange);
            $('#@Html.ClientIdFor(model => model.TrainingEndDate)').change(onDateChange);

            $('#btnSaveTraining').click(function () {
                if ($('#trainingForm').valid())
                    blockUI();
            });

            $('#trainingForm').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
                if (typeof onSTDataChanged === 'function')
                    onSTDataChanged();
            });
            $.validator.unobtrusive.parseDynamicContent('form#trainingForm');
        }

        function onDateChange(ctrl, e) {
            var sd = new Date($('#@Html.ClientIdFor(model => model.TrainingStartDate)').val());
            var ed = new Date($('#@Html.ClientIdFor(model => model.TrainingEndDate)').val());
            $('#@Html.ClientIdFor(model => model.TrainingDuration)').val(Math.round((ed - sd) / (1000 * 60 * 60 * 24)) + 1);
            
            fillWeekDays();
        }

        function fillWeekDays(preselected) {
            var selected = [];
            if (preselected != null)
                selected = preselected;
            else {
                $('#@Html.ClientIdFor(model => model.Weekends) :selected').each(function (ind, s) {
                    selected[ind] = $(s).val();
                });
            }
            multik1.select2('val', '');
            $('#@Html.ClientIdFor(model => model.Weekends) optgroup').remove();
            var sd = new Date($('#@Html.ClientIdFor(model => model.TrainingStartDate)').val());
            var ed = new Date($('#@Html.ClientIdFor(model => model.TrainingEndDate)').val());
            var weekEndingDay = parseInt($('#@Html.ClientIdFor(model => model.WeekendingDay)').val());
            if (isNaN(sd))
                return;
            if (isNaN(ed))
                return;

            var weekEndingDate = new Date(sd);
            //if (weekEndingDate.getDay() != weekEndingDay) {
            //    weekEndingDate = addDays(weekEndingDate, Math.abs(weekEndingDate.getDay() - weekEndingDay));
            //}
            //if (ed.getDay() != weekEndingDay) {
            //    ed = addDays(ed, Math.abs(ed.getDay() - weekEndingDay));
            //}
            if (weekEndingDate.getDay() != weekEndingDay) {
                if (weekEndingDate.getDay() > weekEndingDay) {
                    weekEndingDate = addDays(weekEndingDate, weekEndingDay - weekEndingDate.getDay());
                } else {
                    weekEndingDate = addDays(weekEndingDate, -weekEndingDate.getDay() - (7 - weekEndingDay));
                }
                weekEndingDate = addDays(weekEndingDate, 7);
            }
            var dt = new Date(addDays(weekEndingDate, -6));
            var optgroup = $('<optgroup>');
            optgroup.attr('label', 'Week ' + (weekEndingDate.getMonth() + 1) + '/' + weekEndingDate.getDate() + '/' + weekEndingDate.getFullYear());
            while (dt <= ed) {
                if (dt > weekEndingDate) {
                    weekEndingDate = addDays(weekEndingDate, 7);
                    multik1.append(optgroup);
                    optgroup = $('<optgroup>');
                    optgroup.attr('label', 'Week ' + (weekEndingDate.getMonth() + 1) + '/' + weekEndingDate.getDate() + '/' + weekEndingDate.getFullYear());
                }
                var option = $("<option></option>");
                option.val((dt.getMonth() + 1) + '/' + dt.getDate() + '/' + dt.getFullYear());
                option.text(days[dt.getDay()] + ', ' + (dt.getMonth() + 1) + '/' + dt.getDate() + '/' + dt.getFullYear());
                optgroup.append(option);
                dt = addDays(dt, 1);
            }
            multik1.append(optgroup);
            multik1.select2('val', selected);
        }

        function addDays(date, days) {
            return new Date(date.getTime() + days * 24 * 60 * 60 * 1000);
        }

        function calcDiff() {
            var d1 = $($('#trainingForm .datepicker')[0]).datepicker().data().datepicker.dates;
            var d2 = $($('#trainingForm .datepicker')[1]).datepicker().data().datepicker.dates;
            var diff = 0;
            if (d1 && d2) {
                diff = Math.floor((d2[0].getTime() - d1[0].getTime()) / 86400000) + 1; // ms per day
            }
            $('[name="@Html.ClientIdFor(model=>model.TrainingDuration)"]').val(diff);
        }

        function updateSliderTitle() {

        }

        function fillResources(preselected) {
            var selected = [];
            if (preselected != null)
                selected = preselected;
            else {

            }
            multik.select2('val', selected);
        }

        function onFailure(xhr) {
            unblockUI();
            $('#trainingReload').html(xhr.responseText);
            initTrainings();
        }
        function onSuccess(data) {
            unblockUI();
            var href = document.location.href;
            if (href.substr(href.length - 1) == '#')
                href = href.substr(0, href.length - 1);
            document.location.href = href;
        }

        function onPercentageSlide(event, ui, obj) {
            var value = ui.value;
            obj.children(".sliderValue").val(value);
            obj.children(".sliderTitle").html(value + '%');
        }

        function onPercentageChange(event, ui, obj) {
            var value = ui.value;
            obj.children(".sliderValue").val(value);
            obj.children(".sliderTitle").html(value + '%');
        }
    </script>
@using (Ajax.BeginForm("ScheduleTraining", "PeopleResource", new AjaxOptions { HttpMethod = "Post", OnSuccess = "onSuccess", OnFailure = "onFailure(xhr)", UpdateTargetId = "trainingReload" }, new { @id = "trainingForm" }))
{
    @Html.AntiForgeryToken()        
    @Html.HiddenFor(model => model.Id)     
    @Html.HiddenFor(t=>t.WeekendingDay)
  
        
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                    <h4 class="modal-title" >Schedule Training</h4>
                </div>
                <div class="modal-body">
                    
                    
                    <div class="form-group">
                        @Html.LabelFor(model => model.TrainingName, new { @class = "col-sm-3 control-label" })
                        <div class="col-sm-9">
                            @Html.TextBoxFor(model => model.TrainingName, new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.TrainingName)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.TrainingStartDate, new { @class = "col-sm-3 control-label" })
                        <div class="col-sm-9">
                            @Html.EditorFor(model => model.TrainingStartDate, new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.TrainingStartDate)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.TrainingEndDate, new { @class = "col-sm-3 control-label" })
                        <div class="col-sm-9">
                            @Html.EditorFor(model => model.TrainingEndDate, new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.TrainingEndDate)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.TrainingDuration, new { @class = "col-sm-3 control-label" })
                        <div class="col-sm-9">
                            @Html.TextBoxFor(model => model.TrainingDuration, new { @class = "form-control", @Readonly = "true" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Weekends, new { @class = "col-sm-3 control-label" })
                        <div class="col-sm-9 select2-primary">
                            @Html.EditorFor(model => model.Weekends)
                            @Html.ValidationMessageFor(model => model.Weekends)
							<p class="help-block text-sm">Make sure you select weekend days for the whole weeks but not only within training's date range.</p>
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.TrainingTypeId, new { @class = "col-sm-3 control-label" })
                        <div class="col-sm-9">
                            @Html.DropDownListFor(model => model.TrainingTypeId, Utils.GetTrainingType(), new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.TrainingTypeId)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.TrainingCost, new { @class = "col-sm-3 control-label" })
                        <div class="col-sm-9">
                            <div class="input-group">
                                <span class="input-group-addon">$</span>
                                @Html.TextBoxFor(model => model.TrainingCost, new { @class = "form-control", @style = "width:138px;" })
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.Resources, new { @class = "col-sm-3 control-label" })
                        <div class="col-sm-9 select2-primary">
                            @Html.EditorFor(model => model.Resources)
                            @Html.ValidationMessageFor(model => model.Resources)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.TrainingTimeAllocated, new { @class = "col-sm-3 control-label" })
                        <div class="col-sm-9">
                            @Html.EditorFor(model => model.TrainingTimeAllocated)
                            @Html.ValidationMessageFor(model => model.TrainingTimeAllocated)
                        </div>
                    </div>
                    @Html.ValidationSummary(false, "The training schedule could not be saved due to the following errors:")
                    
                </div> <!-- / .modal-body -->
                <div class="modal-footer">
                    <button id="btnSaveTraining" type="submit" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            
}