@using EnVisage.Code
@model EnVisage.Models.HolidayModel
@{
    ViewBag.Title = Model.HolidayGroupId.Equals(Guid.Empty) ? "Add Holiday" : "Change Holiday";
}

<style type="text/css">
    .select2-container-multi .select2-choices .select2-search-choice {
        background: #3690e6 !important;
    }

    .input-group-btn .btn-info.active {
        border-left-color: #555555 !important;
        border-right-color: #555555 !important;
    }

    .btn-info.active {
        background: #aaa !important; /*#4ab9db*/
        border-color: #555555 !important; /*#28a4c9;*/
        border-bottom-color: #555555 !important; /*#28a4c9*/
    }
</style>

<script type="text/javascript">
    emulateNavUrl = "/Calendar";
    var holidayFormDataChanged = false;
    var isNewItem = @(Model.HolidayGroupId.Equals(Guid.Empty) ? "true" : "false");

    var resources = {};

    var datePickerOptions = {
        format: 'm/d/yyyy',
        autoclose: true,
        startDate: '@(Constants.MIN_SELECTABLE_DATE)',
        endDate: '@(Constants.MAX_SELECTABLE_DATE)'
    };

    function initEditHolidayForm(holidayGroupId) {
        if (holidayGroupId && (holidayGroupId != '@Guid.Empty')) {
            StartEdit('Holiday', holidayGroupId, null, '#btnsave', 'erorMsgPlaceholder');
        }

        @if (Model.ExpenditureCategories.Count > 0)
        {
            <text>
        $("#@Html.IdFor(model=>model.IncludexpenditureCategories)").attr("checked", "checked");
        </text>
        }

        @if (Model.IsInclude)
        {
            <text>
        $("#IsInclude").attr("checked", "checked");
        </text>
        }

        $.validator.unobtrusive.adapters.add('recurrenddate', ['hasactuals', 'projectdeadline', 'actualsenddate'],
        function (options) {
            options.rules['recurrenddate'] = options.params;
        }
        );

        $.validator.addMethod('recurrenddate', function (value, element, params) {
            var startDate = new Date($("#@Html.IdFor(model=>model.StartDate)").val());
            var endDate = new Date(value);

            if(startDate > endDate)
            {
                $.validator.messages.recurrenddate = "The End by field should be greater or equal to Start date.";
                return false;
            }else{
                return true;
            }
        });

        $.validator.methods.range = function (value, element, param) {
            return this.optional(element) || (value % 1 === 0) && (Number(value) >= Number(param[0]) && Number(value) <= Number(param[1]));
        }

        initRecurrence();
        initSwitchers();
        initDatePickers();

        $.ajax({
            url: '@Url.Action("GetResources", "Calendar")',
            cache: false,
            type: "post",
            error: function (response) {

            },
            success: function (response) {
                resources = JSON.parse(response);
                initSelects();
            }
        });

        if (isNewItem) {
            // Effective date of change set automatically for new item
            $('#effectiveChangeDateBlock').hide();
        }

        $.validator.unobtrusive.parseDynamicContent('form#holidayEditForm');

        var pickerRangeSettings = {
            datePickerOptions: datePickerOptions,
            multiple: $('#@Html.IdFor(x=> x.MultipleDaysHoliday)').is(':checked')
        };
        $("#bs-datepicker-holiday-range").datePickerRange(pickerRangeSettings).on("change", function(e) {
            $("#range_start_picker").val($("#@Html.IdFor(model=>model.StartDate)").val());
        });
        toggleAssignments();
        toggleAssignmentEntities();

        $('#holidayEditForm').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
            onHolidayFormDataChanged();
        });
    };

    function initSwitchers()
    {
        $('#showRecurrence').switcher({
            on_state_content: 'On',
            off_state_content: 'Off'
        });

        $('#@Html.IdFor(x=> x.MultipleDaysHoliday)').switcher({
            on_state_content: 'Multiple Days',
            off_state_content: 'Single Day'
        }).parent().css("width", "120px");

        $('#@Html.IdFor(x => x.CompanyImpactAllResources)').switcher({
            on_state_content: 'All Resources',
            off_state_content: 'Some Resources'
        }).parent().css("width", "120px");

        $('#IsInclude').switcher({
            on_state_content: 'Includes',
            off_state_content: 'Excludes'
        }).parent().css("width", "120px");

        $('#@Html.IdFor(model => model.IncludexpenditureCategories)').switcher({
            on_state_content: 'Expenditure Category',
            off_state_content: 'Resources'
        }).parent().css("width", "150px");
    }

    function initDatePickers() {
        // Limits for date value fields
        var todayDate = new Date();
        todayDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate());
        
        $('#@Html.IdFor(model => model.EffectiveChangeDate)').parents('.datepicker').datepicker({
            startDate: todayDate,
            @(Model.HolidayGroupId.Equals(Guid.Empty) ? "endDate: todayDate" : "")
        });
    }

    function initSelects() {
        $("#holidayEditForm").find("select.pm-teams").select2({
            placeholder: "Select teams",
        }).on('change', function (e) {
            refreshResources(false);
        });

        $("#holidayEditForm").find("select.pm-resources").select2({
            placeholder: "Select resources",
        }).on('change', function (e) {
            var sel = $(this).val();

            if(sel.length > 0 && sel[0] == "-1")
            {
                selectAllResources();
                selectAllTeams();
            }else{
                refreshTeams();
            }
        });

        refreshResources(true);

        $("#holidayEditForm").find("select.pm-expcats").select2({
            placeholder: "Select Expenditures Categories",
        });
    }

    function selectAllResources()
    {
        var res = $("#holidayEditForm").find("select.pm-resources");
        var resourceIds = [];
        $.each(res.find("option"), function(item, resource)
        {
            if($(resource).val() != "-1")
                resourceIds.push($(resource).val());
        });
        res.select2('val', resourceIds);
    }
    function selectAllTeams()
    {
        var teams = $("#holidayEditForm").find("select.pm-teams");
        var teamIds = [];
        $.each(teams.find("option"), function(item, team)
        {
            teamIds.push($(team).val());
        });
        teams.select2('val', teamIds);
    }

    function refreshTeams()
    {
        var res = $("#holidayEditForm").find("select.pm-resources");
        var teams =$("#holidayEditForm").find("select.pm-teams");
        var resourceIds = res.val();
        var newTeamIds = [];
        if(resourceIds == null)
            resourceIds =[];

        for(var item in resources)
        {
            var groupId = item.substr(1, item.indexOf(",") - 1);
            var found = false;
            for(var option in resources[item])
            {
                var found1=false;
                var opt = resources[item][option];
                for(var i=0; i<resourceIds.length; i++)
                {
                    if(resourceIds[i] == opt.Value)
                    {
                        found1 = true;
                    }
                }

                found = found1;
                if(!found)
                    break;
            }
            if(!found)
                continue;

            newTeamIds.push(groupId);
        }
        teams.select2('val', newTeamIds);
    }

    function refreshResources(init)
    {
        var res = $("#holidayEditForm").find("select.pm-resources");
        var options = '<option value="-1" class="select2-result-with-children">Select All</option>';
        var resourceIds = res.val();
        var teamIds = $("#holidayEditForm").find("select.pm-teams").val();

        for(var item in resources)
        {
            if(!init)
            {

                if(resourceIds == null)
                    resourceIds =[];
                for(var Id in teamIds)
                {
                    if(item.indexOf(teamIds[Id]) > 0)
                    {
                        //if(resourceIds != null)
                        {
                            for(var option in resources[item])
                            {
                                var for_continue = false;
                                var opt = resources[item][option];
                                for(var i=0; i<resourceIds.length; i++)
                                {
                                    if(resourceIds[i] == opt.Value)
                                    {
                                        for_continue = true;
                                        break;
                                    }
                                }
                                if(for_continue)
                                    continue;
                                resourceIds.push(opt.Value);
                            }
                        }
                    }
                }

            }else{

                var group = item;
                //var skipTeam = false;
                //for(var Id in teamIds)
                //{

                //    if(item.indexOf(teamIds[Id]) > 0){
                //        skipTeam = true;
                //        break;
                //    }
                //}
                //if(skipTeam)
                //    continue;

                var pos = item.indexOf(",");
                if(item.length > 0 && pos > 0){
                    group=item.substr(pos+2, item.length - pos - 3);
                }
                options += '<optgroup label="' + group + '">';
                for(var option in resources[item])
                {
                    var opt = resources[item][option];
                    options += '<option value="' + opt.Value + '" class="select2-result-with-children">' + opt.Text + '</option>';
                }
                options += "</optgroup>";
            }
        }

        if(init)
            res.html(options);
        //else
        res.select2('val', resourceIds);
    }

    function initRecurrence() {
        $("#range_picker").parent().datepicker(datePickerOptions);
        $("#range_start_picker").parent().datepicker(datePickerOptions);

        $("[name='periodOption']").change(function () {
            refreshPeriod();
            clearError();
        });

        $("[name='dailyOption']").change(function () {
            refreshDaily();
            clearError();
        });

        $("[name='monthlyOption']").change(function () {
            refreshMonthly();
            clearError();
        });

        $("[name='yearlyOption']").change(function () {
            refreshYearly();
            clearError();
        });

        $("[name='rangeOption']").change(function () {
            var sel = $("[name='rangeOption']:checked").val();
            switch (Number(sel)) {
                case 1:
                    $("#Occurrences").attr("disabled", "disabled");
                    $("#range_picker").attr("disabled", "disabled");
                    break;
                case 2:
                    $("#Occurrences").removeAttr("disabled");
                    $("#range_picker").attr("disabled", "disabled");
                    break;
                case 3:
                    $("#Occurrences").attr("disabled", "disabled");
                    $("#range_picker").removeAttr("disabled");
                    break;
            }
            clearError();
        });

        deserializeRecurrence($("#@Html.IdFor(model=>model.Options)").val());
        $("#range_start_picker").attr("disabled", "disabled");
        $("#range_start_picker").val($("#@Html.IdFor(model=>model.StartDate)").val());
    }

    function refreshDaily()
    {
        var sel = $("[name='dailyOption']:checked").val();
        switch (Number(sel)) {
            case 1:
                $("#dailyDay").removeAttr("disabled");
                break;
            case 2:
                $("#dailyDay").attr("disabled", "disabled");
                break;
        }
    }

    function refreshMonthly()
    {
        var sel = $("[name='monthlyOption']:checked").val();
        switch (Number(sel)) {
            case 1:
                $("#monthlyDate").removeAttr("disabled");
                $("#monthlyMonths").removeAttr("disabled");

                $("#monthlyOccurrence").attr("disabled", "disabled");
                $("#monthlyWeek").attr("disabled", "disabled");
                $("#monthlyMonth").attr("disabled", "disabled");
                break;
            case 2:
                $("#monthlyDate").attr("disabled", "disabled");
                $("#monthlyMonths").attr("disabled", "disabled");

                $("#monthlyOccurrence").removeAttr("disabled");
                $("#monthlyWeek").removeAttr("disabled");
                $("#monthlyMonth").removeAttr("disabled");
                break;
        }
    }

    function refreshYearly()
    {
        var sel = $("[name='yearlyOption']:checked").val();
        switch (Number(sel)) {
            case 1:
                $("#yearlyMonth").removeAttr("disabled");
                $("#yearlyMonthNumber").removeAttr("disabled");

                $("#yearlyOccurrence").attr("disabled", "disabled");
                $("#yearlyWeek").attr("disabled", "disabled");
                $("#yearlyMonth2").attr("disabled", "disabled");
                break;
            case 2:
                $("#yearlyMonth").attr("disabled", "disabled");
                $("#yearlyMonthNumber").attr("disabled", "disabled");

                $("#yearlyOccurrence").removeAttr("disabled");
                $("#yearlyWeek").removeAttr("disabled");
                $("#yearlyMonth2").removeAttr("disabled");
                break;
        }
    }

    function refreshPeriod()
    {
        var sel = $("[name='periodOption']:checked").val();
        switch (Number(sel)) {
            case 1:
                $("#daily_settings").css({ "display": "" });
                $("#weekly_settings").css({ "display": "none" });
                $("#monthly_settings").css({ "display": "none" });
                $("#yearly_settings").css({ "display": "none" });
                break;
            case 2:
                $("#daily_settings").css({ "display": "none" });
                $("#weekly_settings").css({ "display": "" });
                $("#monthly_settings").css({ "display": "none" });
                $("#yearly_settings").css({ "display": "none" });
                break;
            case 3:
                $("#daily_settings").css({ "display": "none" });
                $("#weekly_settings").css({ "display": "none" });
                $("#monthly_settings").css({ "display": "" });
                $("#yearly_settings").css({ "display": "none" });
                break;
            case 4:
                $("#daily_settings").css({ "display": "none" });
                $("#weekly_settings").css({ "display": "none" });
                $("#monthly_settings").css({ "display": "none" });
                $("#yearly_settings").css({ "display": "" });
                break;
        }
    }

    function saveRecurrence()
    {
        var elem = $("#@Html.IdFor(model=>model.Options)");
        if ($("#showRecurrence").prop("checked")) {

            elem.val(JSON.stringify(serializeRecurrence()));
        } else {
            elem.val("");
        }
        return true;
    }

    function serializeRecurrence()
    {
        var res = {
            "periodOption": $("[name='periodOption']:checked").val(),
            "range_start_picker": $("#range_start_picker").val(),
            "rangeOption" : $("[name='rangeOption']:checked").val(),
        }

        switch (Number(res["periodOption"]))
        {
            case 1: // Daily recurrence
                res["dailyOption"] = $("[name='dailyOption']:checked").val();
                res["dailyDay"] = $("#dailyDay").val();
                break;
            case 2: // Monthly recurrence
                res["weeklyWeeks"] = $("#weeklyWeeks").val();
                res["Sunday"] = $("#Sunday").prop("checked");
                res["Monday"] = $("#Monday").prop("checked");
                res["Tuesday"] = $("#Tuesday").prop("checked");
                res["Wednesday"] = $("#Wednesday").prop("checked");
                res["Thursday"] = $("#Thursday").prop("checked");
                res["Friday"] = $("#Friday").prop("checked");
                res["Saturday"] = $("#Saturday").prop("checked");
                break;
            case 3: // Monthly recurrence
                res["monthlyOption"] = $("[name='monthlyOption']:checked").val();

                switch(Number(res["monthlyOption"]))
                {
                    case 1:
                        res["monthlyDate"] = $("#monthlyDate").val();
                        res["monthlyMonths"] = $("#monthlyMonths").val();
                        break;
                    case 2:
                        res["monthlyOccurrence"] = $("#monthlyOccurrence").val();
                        res["monthlyWeek"] = $("#monthlyWeek").val();
                        res["monthlyMonth"] = $("#monthlyMonth").val();
                        break;
                }
                break;
            case 4: // Yearly recurrence
                res["yearlyOption"] = $("[name='yearlyOption']:checked").val();
                res["yearlyYear"] = $("#yearlyYear").val();

                switch (Number(res["yearlyOption"]))
                {
                    case 1:
                        res["yearlyMonth"] = $("#yearlyMonth").val();
                        res["yearlyMonthNumber"] = $("#yearlyMonthNumber").val();
                        break;
                    case 2:
                        res["yearlyOccurrence"] = $("#yearlyOccurrence").val();
                        res["yearlyWeek"] = $("#yearlyWeek").val();
                        res["yearlyMonth2"] = $("#yearlyMonth2").val();
                        break;
                }
                break;
        }

        switch (Number(res["rangeOption"]))
        {
            case 2:
                res["Occurrences"] = $("#Occurrences").val();
                break;
            case 3:
                res["range_picker"] = $("#range_picker").val();
        }

        // Added by SA
        if (res["range_start_picker"] && (res["range_start_picker"].length > 0)) {
            var startRepeatingDate = new Date(res["range_start_picker"]);
            var UTCmilliseconds = startRepeatingDate.getTime() - startRepeatingDate.getTimezoneOffset() * 60 * 1000;
            res["StartDate"] = UTCmilliseconds;
        }

        if (res["range_picker"] && (res["range_picker"].length > 0)) {
            var endRepeatingDate = new Date(res["range_picker"]);
            var UTCmilliseconds = endRepeatingDate.getTime() - endRepeatingDate.getTimezoneOffset() * 60 * 1000;
            res["EndDate"] = UTCmilliseconds;
        }

        return res;
    }

    function deserializeRecurrence(data) {
        if (data.length > 0) {
            $("#showRecurrence").prop("checked", true);
            toggleRecurrence();

            var rec = JSON.parse(data);
            $.each($("[name='periodOption']"), function (i, o) {
                if ($(o).val() == rec.periodOption) {
                    o.checked = true;
                    refreshPeriod();
                    return false;
                }
            });

            $.each($("[name='dailyOption']"), function (i, o) {
                if ($(o).val() == rec.dailyOption) {
                    o.checked = true;
                    refreshDaily();
                    return false;
                }
            });
            $("#dailyDay").val(rec.dailyDay);
            $("#weeklyWeeks").val(rec.weeklyWeeks);
            if (rec.Sunday) {
                $("#Sunday").parent().addClass("active");
                $("#Sunday").prop("checked", true);
            }
            if (rec.Monday) {
                $("#Monday").parent().addClass("active");
                $("#Monday").prop("checked", true);
            }
            if (rec.Tuesday) {
                $("#Tuesday").parent().addClass("active");
                $("#Tuesday").prop("checked", true);
            }
            if (rec.Wednesday) {
                $("#Wednesday").parent().addClass("active");
                $("#Wednesday").prop("checked", true);
            }
            if (rec.Thursday) {
                $("#Thursday").parent().addClass("active");
                $("#Thursday").prop("checked", true);
            }
            if (rec.Friday) {
                $("#Friday").parent().addClass("active");
                $("#Friday").prop("checked", true);
            }
            if (rec.Saturday) {
                $("#Saturday").parent().addClass("active");
                $("#Saturday").prop("checked", true);
            }

            $.each($("[name='monthlyOption']"), function (i, o) {
                if ($(o).val() == rec.monthlyOption) {
                    o.checked = true;
                    refreshMonthly();
                    return false;
                }
            });
            $("#monthlyDate").val(rec.monthlyDate);
            $("#monthlyMonths").val(rec.monthlyMonths);
            $("#monthlyOccurrence").val(rec.monthlyOccurrence);
            $("#monthlyWeek").val(rec.monthlyWeek);
            $("#monthlyMonth").val(rec.monthlyMonth);

            $.each($("[name='yearlyOption']"), function (i, o) {
                if ($(o).val() == rec.yearlyOption) {
                    o.checked = true;
                    refreshYearly();
                    return false;
                }
            });
            $("#yearlyYear").val(rec.yearlyYear);
            $("#yearlyMonth").val(rec.yearlyMonth);
            $("#yearlyMonthNumber").val(rec.yearlyMonthNumber);
            $("#yearlyOccurrence").val(rec.yearlyOccurrence);
            $("#yearlyWeek").val(rec.yearlyWeek);
            $("#yearlyMonth2").val(rec.yearlyMonth2);


            $.each($("[name='rangeOption']"), function (i, o) {
                if ($(o).val() == rec.rangeOption) {
                    o.checked = true;
                    switch (rec.rangeOption) {
                        case "2":
                            $("#range_picker").attr("disabled", "disabled");
                            $("#Occurrences").removeAttr("disabled");
                            break;
                        case "3":
                            $("#Occurrences").attr("disabled", "disabled");
                            $("#range_picker").removeAttr("disabled");
                            break;
                        default:
                            $("#range_picker").attr("disabled", "disabled");
                            $("#Occurrences").attr("disabled", "disabled");
                            break;
                    }
                    return false;
                }
            });
            //$("#range_start_picker").val(rec.range_start_picker);
            $("#Occurrences").val(rec.Occurrences);
            $("#range_picker").val(rec.range_picker);

            refreshDaily();
            refreshMonthly();
            refreshYearly();
        } else {
            $("#range_picker").attr("disabled", "disabled");
            $("#Occurrences").attr("disabled", "disabled");

            $("#monthlyOccurrence").attr("disabled", "disabled");
            $("#monthlyWeek").attr("disabled", "disabled");
            $("#monthlyMonth").attr("disabled", "disabled");

            $("#yearlyOccurrence").attr("disabled", "disabled");
            $("#yearlyWeek").attr("disabled", "disabled");
            $("#yearlyMonth2").attr("disabled", "disabled");
        }
    }
    function clearError() {
        var $form = $('#holidayEditForm');
        $form.data("validator").resetForm();
        $form.find(".validation-summary-errors")
        .addClass("validation-summary-valid")
        .removeClass("validation-summary-errors");
        $form.find(".field-validation-error")
        .addClass("field-validation-valid")
        .removeClass("field-validation-error")
        .removeData("unobtrusiveContainer")
        .find(">*")  // If we were using valmsg-replace, get the underlying error
        .removeData("unobtrusiveContainer");
        $form.find(".input-validation-error")
        .addClass("input-validation-valid")
        .removeClass("input-validation-error")
        .removeData("unobtrusiveContainer")
        .find(">*")  // If we were using valmsg-replace, get the underlying error
        .removeData("unobtrusiveContainer");
        $form.find(".field-validation-valid").html("");
    }

    function toggleMultipleDays() {
        var multiple = $('#@Html.IdFor(x=> x.MultipleDaysHoliday)').is(':checked');

        $("#bs-datepicker-holiday-range").datePickerRange('setState', multiple);
        $('#WorkingDayLabel').text('Working Day' + (multiple ? 's' : ''));
    }

    function onHolidayMonthChange() {
        var value = $("#yearlyMonth").val();
        var curDayValue = $("#yearlyMonthNumber").val();
        var numDays = 31;

        if (value == '2') {
            numDays = 29;
        }

        if (value == '4' || value == '6' || value == '9' || value == '11') {
            numDays = 30;
        }

        var items = "";
        for (var i = 1; i <= numDays; i++) {
            items += "<option value=\"" + i + "\" " + ((i == parseInt(curDayValue)) ? "selected" : "") + ">" + i + "</option>";
        };

        $("#yearlyMonthNumber").html(items);
    }

    function onEditHolidaySuccess(result) {
        handleAjaxResponse(result, function () {
            document.location.reload();
        }, null, null, $('#holidayEditForm'));
    };

    function onEditHolidayFailure(xhr) {
        showErrorModal();
        holidayFormDataChanged = true;
    };

    function onHolidayFormDataChanged() {
        holidayFormDataChanged = true;
    }

    function toggleRecurrence()
    {
        if ($("#showRecurrence").prop("checked")) {
            $("#fsRecurr").css({ "display": "" });
            $("#fsRecurrRange").css({ "display": "" });
        } else {
            $("#fsRecurr").css({ "display": "none" });
            $("#fsRecurrRange").css({ "display": "none" });
        }
    }

    function toggleAssignmentEntities() {
        if ($("#@Html.IdFor(model => model.IncludexpenditureCategories)").prop("checked")) {

            $("#assignExpCats").css({ "display": "" });
            $("#assignResources").css({ "display": "none" });
        } else {
            $("#assignResources").css({ "display": "" });
            $("#assignExpCats").css({ "display": "none" });
        }
    }

    function toggleAssignments()
    {
        if ($('#@Html.IdFor(x => x.CompanyImpactAllResources)').prop("checked")) {
            $("#fsResources").css({ "display": "none" });
        } else {
            $("#fsResources").css({ "display": "" });
        }
    }

</script>
<div id="erorMsgPlaceholder"></div>

@using (Ajax.BeginForm("EditHoliday", "Calendar", new AjaxOptions
{
    HttpMethod = "Post",
    OnSuccess = "onEditHolidaySuccess",
    OnFailure = "onEditHolidayFailure(xhr)",
    OnBegin = "blockUI",
    OnComplete = "unblockUI",
},
new
{
    id = "holidayEditForm",
    onsubmit = "return saveRecurrence()"
}))
{
    @Html.HiddenFor(t => t.Id)
    @Html.HiddenFor(t => t.HolidayGroupId)
    @Html.HiddenFor(t => t.Options)
    @Html.AntiForgeryToken()
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 class="modal-title">@ViewBag.Title</h4>
    </div>
    <div class="modal-body" style="padding-bottom: 0px;">
        <fieldset id="fsGeneral" class="form-group-margin">
            <legend class="text-bold small-bottom-margin">General Holiday Information</legend>
            <div class="row" id="effectiveChangeDateBlock">
                <div class="col-sm-12">
                    <div class="form-group no-margin-hr">
                        @Html.LabelFor(model => model.EffectiveChangeDate, new { @class = "control-label" })
                        @Html.EditorFor(model => model.EffectiveChangeDate, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.EffectiveChangeDate)
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-8 col-lg-8">
                    <div class="form-group no-margin-hr">
                        @Html.LabelFor(model => model.Name, new { @class = "control-label" })
                        @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.Name)
                    </div>
                </div>
                <div class="clearfix hidden-xs hidden-lg visible-sm-block visible-md-block"></div>
                <div class="col-sm-4 col-lg-4">
                    <div class="form-group no-margin-hr switcher-block">
                        <label class="control-label" for="showRecurrence">Recurrence</label>
                        <input class="switcher form-control" id="showRecurrence" name="showRecurrence" type="checkbox" value="true" onchange="toggleRecurrence()" /><input name="showRecurrence" type="hidden" value="false" />

                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-sm-8 col-lg-8">
                    <div class="form-group no-margin-hr">
                        <div class="col-sm-6 col-lg-4 no-padding-hr">
                            <label class="control-label">Start/End Date</label>
                        </div>
                        <div class="col-sm-6 col-lg-8 no-padding-hr" style="text-align: right;">
                            @Html.CheckBoxFor(x => x.MultipleDaysHoliday, new { @class = "switcher form-control", name = "multipleDays", onchange = "toggleMultipleDays()" })
                        </div>
                        <div class="col-sm-12 col-lg-12 no-padding-hr">
                            <div class="input-daterange input-group" id="bs-datepicker-holiday-range">
                                @Html.EditorFor(x => x.StartDate)
                                <div class="input-group-addon">to</div>
                                @Html.EditorFor(x => x.EndDate)
                            </div>
                            @Html.ValidationMessageFor(model => model.StartDate)
                            @Html.ValidationMessageFor(model => model.EndDate)
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-lg-4">
                    <div class="form-group no-margin-hr switcher-block">
                        <label class="control-label" for="companyImpact">Company Impact</label>
                        @Html.CheckBoxFor(x => x.CompanyImpactAllResources, new { @name = "companyImpact", @class = "switcher form-control", @onchange = "toggleAssignments()" })
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group no-margin-hr">
                    <div class="col-sm-3">
                        @Html.LabelFor(model => model.WorkingDays, new { id = "WorkingDayLabel", @class = "control-label" })
                    </div>
                    <div class="col-sm-9">
                        @Html.EditorFor(model => model.WorkingDays, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.WorkingDays)
                    </div>
                </div>
            </div>
        </fieldset>

        <fieldset id="fsRecurr" class="form-group-margin" style="display:none;">
            <legend class="text-bold small-bottom-margin">Recurrence pattern</legend>

            <div class="row">
                <div class="col-sm-12 col-md-12">
                    <div class="form-group" style="margin-bottom:20px;">
                        <div class="radio col-sm-2 col-md-2" style="float:left;">
                            <label>
                                <input type="radio" name="periodOption" checked value="1" class="px">
                                <span class="lbl">Daily</span>
                            </label>
                        </div>
                        <div class="radio col-sm-2 col-md-2" style="margin-top:0px;float:left;">
                            <label>
                                <input type="radio" name="periodOption" value="2" class="px">
                                <span class="lbl">Weekly</span>
                            </label>
                        </div>
                        <div class="radio col-sm-2 col-md-2" style="margin-top:0px;float:left;">
                            <label>
                                <input type="radio" name="periodOption" value="3" class="px">
                                <span class="lbl">Monthly</span>
                            </label>
                        </div>
                        <div class="radio col-sm-2 col-md-2" style="margin-top:0px;float:left;">
                            <label>
                                <input type="radio" name="periodOption" value="4" class="px">
                                <span class="lbl">Yearly</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" id="daily_settings">
                <div class="col-sm-12 col-md-12">
                    <div class="form-group">
                        <div @*@class="radio"*@>
                            @*<label>*@
                            <input type="radio" name="dailyOption" class="px" checked value="1" style="display:none;">
                            <span @*@class="lbl"*@>Every</span>
                            <input id="dailyDay" name="dailyDay" type="text" class="form-control" style="width:60px;display:inline;" data-val="true"
                                   data-val-range="The Day(s) field should be integer and greater than zero." data-val-range-min="1" data-val-range-max="1000"
                                   data-val-number="The Day(s) field should be nuneric." data-val-required="The Day(s) field is required.">
                            <span class="lbl">day(s)</span>
                            @*</label>*@
                            <span class="field-validation-valid" data-valmsg-for="dailyDay" data-valmsg-replace="true"></span>
                        </div>
                        <div class="radio" style="display: none;">
                            <label>
                                <input type="radio" name="dailyOption" class="px" value="2">
                                <span class="lbl">Every weekday</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="weekly_settings" style="display:none;">
                <div class="col-sm-12 col-md-12">
                    <div class="form-group">
                        <div class="radio">
                            <label style="margin-left:-20px;">
                                <span class="lbl">Recur every</span>
                                <input id="weeklyWeeks" name="weeklyWeeks" type="text" class="form-control" style="width:60px;display:inline;" data-val="true"
                                       data-val-number="The Recur field should be numeric."
                                       data-val-range="The Recur field should be integer and greater than zero." data-val-range-min="1" data-val-range-max="1000"
                                       data-val-required="The Recur field is required.">
                                <span class="lbl">weeks on:</span>
                            </label>
                            <span class="field-validation-valid" data-valmsg-for="weeklyWeeks" data-valmsg-replace="true"></span>
                        </div>
                        <div class="btn-group" data-toggle="buttons" style="margin-top:10px;">
                            <label class="btn btn-info" style="width:50px;">
                                <input type="checkbox" id="Sunday">Sun
                            </label>
                            <label class="btn btn-info" style="width:50px;">
                                <input type="checkbox" id="Monday">Mon
                            </label>
                            <label class="btn btn-info" style="width:50px;">
                                <input type="checkbox" id="Tuesday">Tue
                            </label>
                            <label class="btn btn-info" style="width:50px;">
                                <input type="checkbox" id="Wednesday">Wed
                            </label>
                            <label class="btn btn-info" style="width:50px;">
                                <input type="checkbox" id="Thursday">Thu
                            </label>
                            <label class="btn btn-info" style="width:50px;">
                                <input type="checkbox" id="Friday">Fri
                            </label>
                            <label class="btn btn-info" style="width:50px;">
                                <input type="checkbox" id="Saturday">Sat
                            </label>
                        </div> <!-- / .btn-group -->
                    </div>
                </div>
            </div>
            <div class="row" id="monthly_settings" style="display:none;">
                <div class="col-sm-12 col-md-12">
                    <div class="form-group">
                        <div class="radio">
                            <label>
                                <input type="radio" name="monthlyOption" class="px" value="1" checked>
                                <span class="lbl">Date</span>
                                <input id="monthlyDate" name="monthlyDate" type="text" class="form-control" style="width:60px;display:inline;" data-val="true"
                                       data-val-number="The Date field should be numeric."
                                       data-val-range="The Date field should be integer and greater than zero." data-val-range-min="1" data-val-range-max="31"
                                       data-val-required="The Date field is required.">
                                <span class="lbl">of every</span>
                                <input id="monthlyMonths" name="monthlyMonths" type="text" class="form-control" style="width:60px;display:inline;" data-val="true"
                                       data-val-number="The Month(s) field should be numeric."
                                       data-val-range="The Month(s) field should be integer and greater than zero." data-val-range-min="1" data-val-range-max="1000"
                                       data-val-required="The Month(s) field is required.">
                                <span class="lbl">month(s)</span>
                            </label>
                            <span class="field-validation-valid" data-valmsg-for="monthlyDate" data-valmsg-replace="true" />
                            <span class="field-validation-valid" data-valmsg-for="monthlyMonths" data-valmsg-replace="true" />
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="monthlyOption" class="px" value="2">
                                <span class="lbl">The</span>
                                <select id="monthlyOccurrence" name="monthlyOccurrence" class="form-control" style="width:130px;display:inline;" data-val="true"
                                        data-val-required="The Month field is required.">
                                    @foreach (var item in Utils.GetOccurrenceTypes())
                                    {
                                        <text>
                                            <option value="@item.Value">@item.Text</option>
                                        </text>
                                    }
                                </select>
                                <select id="monthlyWeek" name="monthlyWeek" class="form-control" style="width:120px;display:inline;" data-val="true"
                                        data-val-required="The Month field is required.">
                                    @foreach (var item in Utils.GetWeekDays())
                                    {
                                        <text>
                                            <option value="@item.Value">@item.Text</option>
                                        </text>
                                    }
                                </select>
                                <span class="lbl">of every</span>
                                <input id="monthlyMonth" name="monthlyMonth" type="text" class="form-control" style="width:50px;display:inline;" data-val="true"
                                       data-val-number="The Month field should be numeric."
                                       data-val-range="The Month field should be integer and greater than zero." data-val-range-min="1" data-val-range-max="1000"
                                       data-val-required="The Month field is required.">
                                <span class="lbl" style="width:100px;">month(s)</span>
                            </label>
                            <span class="field-validation-valid" data-valmsg-for="monthlyMonth" data-valmsg-replace="true"></span>
                            <span class="field-validation-valid" data-valmsg-for="monthlyOccurrence" data-valmsg-replace="true"></span>
                            <span class="field-validation-valid" data-valmsg-for="monthlyWeek" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="yearly_settings" style="display:none;">
                <div class="col-sm-10 col-md-10">
                    <div class="form-group">
                        <div class="radio">
                            <label style="margin-left:-20px;">
                                <span class="lbl">Recur every</span>
                                <input id="yearlyYear" name="yearlyYear" type="text" class="form-control" style="width:60px;display:inline;" data-val="true"
                                       data-val-number="The Year(s) field should be numeric."
                                       data-val-range="The Year(s) field should be integer and greater than zero." data-val-range-min="1" data-val-range-max="1000"
                                       data-val-required="The Year(s) field is required.">
                                <span class="lbl">year(s)</span>
                            </label>
                            <span class="field-validation-valid" data-valmsg-for="yearlyYear" data-valmsg-replace="true"></span>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="yearlyOption" class="px" value="1" checked>
                                <span class="lbl">On:</span>
                                <select id="yearlyMonth" name="yearlyMonth" class="form-control" style="width:120px;display:inline;" data-val="true"
                                        data-val-required="The Year(s) field is required." onchange="onHolidayMonthChange()">
                                    @foreach (var item in Utils.GetMonths())
                                    {
                                        <text>
                                            <option value="@item.Value">@item.Text</option>
                                        </text>
                                    }
                                </select>
                                <select id="yearlyMonthNumber" name="yearlyMonthNumber" class="form-control" style="width:80px;display:inline;" data-val="true"
                                        data-val-number="The Month number field should be numeric." data-val-required="The Month number field is required.">
                                    @foreach (var item in Utils.GetMonthDays(1))
                                    {
                                        <text>
                                            <option value="@item.Value">@item.Text</option>
                                        </text>
                                    }
                                </select>
                            </label>
                            <span class="field-validation-valid" data-valmsg-for="yearlyMonth" data-valmsg-replace="true"></span>
                            <span class="field-validation-valid" data-valmsg-for="yearlyMonthNumber" data-valmsg-replace="true"></span>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="yearlyOption" class="px" value="2">
                                <span class="lbl">On the:</span>
                                <select id="yearlyOccurrence" name="yearlyOccurrence" class="form-control" style="width:130px;display:inline;" data-val="true"
                                        data-val-required="The Year(s) field is required.">
                                    @foreach (var item in Utils.GetOccurrenceTypes())
                                    {
                                        <text>
                                            <option value="@item.Value">@item.Text</option>
                                        </text>
                                    }
                                </select>
                                <select id="yearlyWeek" name="yearlyWeek" class="form-control" style="width:120px;display:inline;" data-val="true"
                                        data-val-required="The Year(s) field is required.">
                                    @foreach (var item in Utils.GetWeekDays())
                                    {
                                        <text>
                                            <option value="@item.Value">@item.Text</option>
                                        </text>
                                    }
                                </select>
                                <span class="lbl">of</span>
                                <select id="yearlyMonth2" name="yearlyMonth2" class="form-control" style="width:120px;display:inline;" data-val="true"
                                        data-val-required="The Year(s) field is required.">
                                    @foreach (var item in Utils.GetMonths())
                                    {
                                        <text>
                                            <option value="@item.Value">@item.Text</option>
                                        </text>
                                    }
                                </select>
                            </label>
                            <span class="field-validation-valid" data-valmsg-for="yearlyOccurrence" data-valmsg-replace="true"></span>
                            <span class="field-validation-valid" data-valmsg-for="yearlyWeek" data-valmsg-replace="true"></span>
                            <span class="field-validation-valid" data-valmsg-for="yearlyMonth2" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset id="fsRecurrRange" class="form-group-margin" style="display:none;">
            <legend class="text-bold small-bottom-margin">Range of Recurrence</legend>

            <div class="row" id="range">
                <div class="col-sm-4 col-md-4">
                    <div class="form-group no-margin-hr">
                        <label class="control-label">Start</label>
                        <div style="float:left;width:150px;">
                            <div class="input-group date datepicker">
                                <input id="range_start_picker" name="range_start_picker" type="text" class="form-control date" data-val="true"
                                       data-val-date="The field Start by must be a date." data-val-required="The Start field is required."><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                            <span class="help-block field-validation-valid" data-valmsg-for="range_start_picker" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8 col-md-8">
                    <div class="form-group">
                        <div class="radio">
                            <label>
                                <input type="radio" name="rangeOption" class="px" value="1" checked>
                                <span class="lbl">No end date</span>
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="rangeOption" class="px" value="2">
                                <span class="lbl">End after</span>
                                <input id="Occurrences" name="Occurrences" type="text" class="form-control" style="width:60px;display:inline;" data-val="true" data-val-length="The field Occurrences must be a numeric."
                                       data-val-number="The Occurrences field should be numeric."
                                       data-val-range="The Occurrences field should be integer and greater than zero."
                                       data-val-required="The Occurrences field is required.">
                                <span class="lbl">occurrences</span>
                            </label>
                            <span class="field-validation-valid" data-valmsg-for="Occurrences" data-valmsg-replace="true"></span>
                        </div>
                        <div class="radio" style="float:left;margin-top:10px;">
                            <label>
                                <input type="radio" name="rangeOption" class="px" value="3">
                                <span class="lbl">End by</span>
                            </label>
                        </div>
                        <div style="float:left;width:150px;margin-left:5px;">
                            <div class="input-group date datepicker">
                                <input id="range_picker" name="range_picker" class="form-control" data-val="true"
                                       data-val-recurrenddate="The End by field should be greater or equal to Start date."
                                       data-val-date="The field End by must be a date." data-val-required="The End field is required." type="text" value="" /><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                            <span class="help-block field-validation-valid" data-valmsg-for="range_picker" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>

        <fieldset id="fsResources" class="form-group-margin" style="display:none">
            <legend class="text-bold small-bottom-margin">Assignments</legend>
            <div class="row">
                <div class="col-sm-12 col-lg-12">
                    <div class="form-group" style="float:left;width:90px;margin-top:5px;">
                        <label class="control-label" for="includeHoliday">This Holiday</label>
                    </div>

                    <div class="form-group switcher-block" style="float:left;width: 140px;">
                        @Html.CheckBoxFor(x => x.IsInclude, new { name = "IsInclude", @class = "switcher form-control" })
                    </div>
                    @*<div class="form-group switcher-block" style="float:left;width:140px;">
                            <input class="switcher form-control" id="IsInclude" name="IsInclude" type="checkbox" value="true" onchange="toggleRecurrence()" /><input name="showRecurrence" type="hidden" value="false" />
                        </div>*@

                    <div class="form-group" style="float:left;width:100px;margin-top:5px;">
                        <label class="control-label" for="@Html.IdFor(model=>model.IncludexpenditureCategories)">the following</label>
                    </div>

                    <div class="form-group switcher-block" style="float:left;width: 140px;">
                        @Html.CheckBoxFor(x => x.IncludexpenditureCategories, new { name = "IncludexpenditureCategories", @class = "switcher form-control", onchange = "toggleAssignmentEntities()" })
                    </div>
                    @*<div class="form-group switcher-block" style="float:left;width:140px;">
                            <input class="switcher form-control" id="@Html.IdFor(model=>model.IncludexpenditureCategories)" name="@Html.IdFor(model=>model.IncludexpenditureCategories)" type="checkbox" value="true" onchange="toggleAssignmentEntities()" /><input name="showRecurrence" type="hidden" value="false" />
                        </div>*@
                </div>
            </div>
            <div class="row" id="assignResources">
                <div class="col-sm-8 col-lg-6">
                    <div class="form-group no-margin-hr">
                        @Html.LabelFor(model => model.Teams, new { @class = "col-sm-6 control-label" })
                        @Html.ListBoxFor(model => model.Teams, Utils.GetTeamsAvailableForUser(Guid.Parse(User.Identity.GetID())), new { @class = "pm-teams form-control" })
                        @Html.ValidationMessageFor(model => model.Teams)
                    </div>
                </div>
                <div class="col-sm-8 col-lg-6">
                    <div class="form-group no-margin-hr">
                        @Html.LabelFor(model => model.Resources, new { @class = "col-sm-6 control-label" })
                        @Html.ListBoxFor(model => model.Resources, Utils.GetResources(User.Identity.GetID(), DateTime.UtcNow), new { @class = "pm-resources form-control" })
                        @Html.ValidationMessageFor(model => model.Resources)
                    </div>
                </div>
            </div>
            <div class="row" id="assignExpCats" style="display:none;">
                <div class="col-sm-8 col-lg-8">
                    <div class="form-group no-margin-hr">
                        @Html.LabelFor(model => model.ExpenditureCategories, new { @class = "col-sm-6 control-label" })
                        @Html.ListBoxFor(model => model.ExpenditureCategories, Utils.GetExpenditureAllCategories(true), new { @class = "pm-expcats form-control" })
                        @Html.ValidationMessageFor(model => model.ExpenditureCategories)
                    </div>
                </div>
                <div class="col-sm-8 col-lg-4">

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

        @Html.ValidationSummary(false, "The record could not be saved due to the following errors:")
    </div> <!-- / .modal-body -->
    <div class="modal-footer">
        <button type="submit" class="btn btn-success"><i class="fa fa-save"></i>&nbsp;Save</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
}