@using EnVisage.Code.HtmlHelpers
@model EnVisage.Models.VacationModel
@{
    ViewBag.Title = (Model != null && !Guid.Empty.Equals(Model.Id) ? "Edit " : "Add ") + " Vacation";
    var weekEndsStr = string.Empty;
    foreach (var dateTime in Model.Weekends)
    {
        if (!string.IsNullOrEmpty(weekEndsStr))
        {
            weekEndsStr += ",";
        }
        weekEndsStr += "'" + dateTime.ToShortDateString() + "'";
    }
}
@section Scripts
{
	<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script type="text/javascript">
        emulateNavUrl = "/PeopleResource/Details?@Model.PeopleResourceId";
        var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
        var multik;
        init.push(function() {
            @if (!Guid.Empty.Equals(Model.Id))
            {
                @:StartEdit('Vacations', '@Model.Id', "#btnDelete", "#btnsave", "erorMsgPlaceholder");
            }
            $('.datepicker').datepicker();
            $('#@Html.ClientIdFor(model => model.StartDate)').change(onDateChange);
            $('#@Html.ClientIdFor(model => model.EndDate)').change(onDateChange);
            var slider = $('#@Html.ClientIdFor(model => model.HoursOff)_container').slider({
                'range': 'min',
                'min': 0,
                'max': 100,
                'value': $('#@Html.ClientIdFor(model => model.HoursOff)_container .sliderValue').val(),
                change: onDependentChange,
                slide: onDependentSlide
            });
            multik = $("#@Html.ClientIdFor(model => model.Weekends)").select2({
                placeholder: "Select weekends",
                onSelect: function(a, b) {
                }
            }).on('change', updateSliderTitle);
            var weekEnds = [@Html.Raw(weekEndsStr)];
            fillWeekDays(weekEnds);
            updateSliderTitle();

            $('#btnsave').click(function () {
                if ($(this).parents('form').valid())
                    blockUI();
            });
        });
        function onDateChange(ctrl, e) {
            var sd = new Date($('#@Html.ClientIdFor(model => model.StartDate)').val());
            var ed = new Date($('#@Html.ClientIdFor(model => model.EndDate)').val());
            $('#@Html.ClientIdFor(model => model.Duration)').val(Math.round((ed - sd) / (1000 * 60 * 60 * 24)) + 1);
            updateSliderTitle();
            fillWeekDays();
        }
        function onDependentSlide(event, ui) {
            var value = ui.value;
            $(this).children(".sliderValue").val(value);
            $(this).children(".sliderTitle").html(value + '%' + getSliderTitle(value));
        }
        function onDependentChange(event, ui) {
            var value = ui.value;
            $(this).children(".sliderValue").val(value);
            $(this).children(".sliderTitle").html(value + '%' + getSliderTitle(value));
        }
        function updateSliderTitle() {
            var txt = getSliderTitle($('#@Html.ClientIdFor(model => model.HoursOff)_container .sliderValue').val());
            $('#@Html.ClientIdFor(model => model.HoursOff)_container').children('.sliderTitle').html($('#@Html.ClientIdFor(model => model.HoursOff)_container .sliderValue').val() + '%' + txt);
        }
        function getSliderTitle(value) {
            var uomValue = parseInt($('#@Html.ClientIdFor(model => model.UOMValue)').val());
            if (isNaN(uomValue))
                uomValue = 0;
            var sd = new Date($('#@Html.ClientIdFor(model => model.StartDate)').val());
            var ed = new Date($('#@Html.ClientIdFor(model => model.EndDate)').val());
            var selectedWeekends = multik.select2('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));
            }
            var rangeEndDate = new Date(ed);
            if (rangeEndDate.getDay() != weekEndingDay) {
                rangeEndDate = addDays(rangeEndDate, Math.abs(rangeEndDate.getDay() - weekEndingDay));
            }
            var dt = new Date(addDays(weekEndingDate, -6));
            var hours = 0;
            var businessDays = 0;
            var wkEndDts = 0;
            while (dt <= rangeEndDate) {
                if (dt > weekEndingDate) {
                    hours += Math.round(businessDays * uomValue * value / ((7 - wkEndDts) * 100));
                    weekEndingDate = addDays(weekEndingDate, 7);
                    businessDays = 0;
                    wkEndDts = 0;
                }
                if (sd <= dt && dt <= ed)
                    businessDays++;
                for (var i = 0; i < selectedWeekends.length; i++) {
                    if ((dt.getMonth() + 1) + '/' + dt.getDate() + '/' + dt.getFullYear() == selectedWeekends[i]) {
                        wkEndDts++;
                        if (sd <= dt && dt <= ed)
                            businessDays--;
                        break;
                    }
                }
                dt = addDays(dt, 1);
            }
            if (wkEndDts != 7)
                hours += Math.round(businessDays * uomValue * value / ((7 - wkEndDts) * 100));
            if (isNaN(hours))
                hours = 0;
            return ' (' + hours + ' hours)';
        }
        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(); 
                });
            }
            multik.select2('val', '');
            $('#@Html.ClientIdFor(model => model.Weekends) optgroup').remove();
            
            var sd = new Date($('#@Html.ClientIdFor(model => model.StartDate)').val());
            var ed = new Date($('#@Html.ClientIdFor(model => model.EndDate)').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));
            }
            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);
                    multik.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);
            }
            multik.append(optgroup);
            multik.select2('val', selected);
        }
        function addDays(date, days) {
            return new Date(date.getTime() + days*24*60*60*1000);
        }
	</script>
}
<div class="page-header"><h1>@ViewBag.Title</h1></div>
<div id="erorMsgPlaceholder"></div>
@using (Html.BeginForm("EditVacation", "PeopleResource", FormMethod.Post, new { @class = "panel form-horizontal" }))
{
	@Html.AntiForgeryToken()
    @Html.HiddenFor(t => t.Id)
    @Html.HiddenFor(t => t.PeopleResourceId)
    @Html.HiddenFor(t=>t.UOMValue)
    @Html.HiddenFor(t=>t.WeekendingDay)
    <div class="panel-body row">
        <div class="col-sm-4">
            <div class="form-group">
                @Html.LabelFor(model => model.StartDate, new { @class = "col-sm-3 control-label" })
                <div class="col-sm-9">
                    @Html.EditorFor(model => model.StartDate, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.StartDate)
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.EndDate, new { @class = "col-sm-3 control-label" })
                <div class="col-sm-9">
                    @Html.EditorFor(model => model.EndDate, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.EndDate)
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="Duration">Duration</label>
                <div class="col-sm-9">
                    <div class="input-group">
                        <input class="form-control" id="Duration" name="Duration" type="number" disabled="disabled" value="@Model.Duration">
						<span class="input-group-addon">days</span>
					</div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.HoursOff, new { @class = "col-sm-3 control-label" })
                <div class="col-sm-9">
                    @Html.EditorFor(model => model.HoursOff)
                    @Html.ValidationMessageFor(model => model.HoursOff)
                </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 vacation's date range.</p>
                </div>
            </div>
            @Html.ValidationSummary(false, "The client could not be saved due to the following errors:")
            <div class="form-group" style="margin-bottom: 0;">
                <div class="col-sm-offset-2 col-sm-10">
                    <a class="btn btn-primary" href="@Url.Action("Details", "PeopleResource", new {resourceId=Model.PeopleResourceId})"><i class="fa fa-backward"></i> Back to list</a>
                    <button type="submit" class="btn btn-success" id="btnsave"><i class="fa fa-save"></i> Save</button>
                    @if (Model != null && !Guid.Empty.Equals(Model.Id))
                    {
                        <a id="btnDelete" class="btn btn-danger" href="@Url.Action("DeleteVacation", "PeopleResource", new {@ids = Model.Id})"><i class="fa fa-trash-o"></i> Delete</a>
                    }
                </div>
            </div> 
        </div>
    </div>
}