@using EnVisage.Code
@model EnVisage.Models.FiscalCalendarModel
@using EnVisage.Code.HtmlHelpers
@using Microsoft.AspNet.Identity
@{
    ViewBag.Title = "Fiscal Calendar";
}
@section scripts
{
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script type="text/javascript">
    	var CommonErrorMessage = 'An error occurred while processing your request. Please, try again later.';
    	emulateNavUrl = "/Calendar";

    	init.push(function () {
            $('#holidays').dataTable({
                "bProcessing": true,
                "bServerSide": true,
                "bAutoWidth": false,
                "sAjaxSource": '@Url.Action("GetHolidayItems", "Calendar")', // document.URL,
                "sServerMethod": "POST",
                "aoColumns": [
                    { "mDataProp": "Name" },
                    { "mDataProp": "DateText" },
					{ "mDataProp": "WorkingDay", "mRender": function (data, type, full) { return data == true ? "Yes" : "No" } },
					{ "mDataProp": "NonWorkingWeek", "mRender": function (data, type, full) { return data == true ? "Yes" : "No" } },
					{ "mDataProp": "EffectiveChangeDateAsText" },
					{ "mDataProp": "ValidToAsText" },
					{
						"mData": function (data, type, full) {
							@if (SecurityManager.CheckSecurityObjectPermission(Areas.FiscalCalendar, AccessLevel.Write))
							{
							<text>
							return ('<button onclick="showHolidayHistory(\'_rplcmnt_\')" data-toggle="popover" data-placement="left" class="btn btn-sm btn-primary popover-dark"><i class="fa fa-eye"></i> History</button> ' +
									'<button onclick="showEditHolidayDialog(\'_rplcmnt_\')" data-toggle="popover" data-placement="left" class="btn btn-sm btn-primary popover-warning popover-dark"><i class="fa fa-edit"></i> Edit</button> ' +
									'<button onclick="deleteHoliday(\'_rplcmnt_\')" data-toggle="popover" data-placement="left" class="btn btn-sm btn-danger popover-warning popover-dark"><i class="fa fa-trash-o"></i> Delete</button>')
								.replace(/_rplcmnt_/g, data.HolidayId);
							</text>
							}
							else
							{
							<text>
							return "";
							</text>
							}
						}
					}],
            });
 			@if (SecurityManager.CheckSecurityObjectPermission(Areas.FiscalCalendar, AccessLevel.Write))
			{
			<text>
    		$('#holidays_wrapper .table-caption').html('<button class="btn btn-primary" onclick="showCreateHolidayDialog()"><i class="fa fa-plus"></i> Add Holiday</button>');
			</text>
			}
            $('#holidays_wrapper .dataTables_filter input').attr('placeholder', 'Search...');
            $('#holidays_wrapper .dataTables_processing').addClass("table-caption");
            $('#holidays_wrapper .dataTables_processing').html('<span class="h3"><img class="valign-middle" src="../Content/images/loadFA.gif"/></span>');
        });

    	function deleteHoliday(holidayId) {
    		if (!holidayId || (holidayId.length < 1))
    			return;

    		var url = "?id=" + holidayId;

    		bootbox.confirm({
    			message: "Are you sure you want to delete the holiday?",
    			callback: function (result) {
    				if (result) {
    					StartEdit('Holiday', holidayId, null, null, 'erorMsgPlaceholderIndex');
    					blockUI();

    					$.ajax({
    						url: '@Url.Action("DeleteHoliday", "Calendar")' + url,
    						cache: false,
    						type: "post",
    						error: function (response) {
    							StopEdit();
    							RemoveLock('Holiday', holidayId);
    							unblockUI();
    							showErrorModal('Oops!', CommonErrorMessage);
    						},
    						success: function (response) {
    							StopEdit();
    							RemoveLock('Holiday', holidayId);
    							unblockUI();
    							window.location.reload();
    						}
    					});
					}
    			},
    			className: "bootbox-sm"
    		});
		}

    	function showHolidayHistory(holidayId) {
    		blockUI();
    		var url = "?id=" + holidayId;

    		$('#holidayHistoryReload').html("");
    		$.ajax({
    			url: '@Url.Action("ViewHolidayHistory", "Calendar")' + url,
    			cache: false,
    			dataType: "html",
    			success: function (data) {
    				$('#holidayHistoryReload').html(data);
    				$('#viewHolidayHistory').modal('show');
    				unblockUI();
    			}
    		});
    	}
    	
    	function showEditHolidayDialog(holidayId) {
    		if (!holidayId || (holidayId.length < 1) || (holidayId == '@Guid.Empty')) {
    			showCreateHolidayDialog();
    		}

    		blockUI();
    		var url = "?id=" + holidayId;

    		$('#editHolidayReload').html("");
    		$('#editHolidayItem').off('hide.bs.modal').off('hidden.bs.modal').off('shown.bs.modal');

    		$.ajax({
    			url: '@Url.Action("EditHoliday", "Calendar")' + url,
    			cache: false,
    			dataType: "html",
    			success: function (data) {
    				$('#editHolidayReload').html(data);
    				initEditHolidayForm();

    				$('#editHolidayItem')
						.on('hidden.bs.modal', function () {
								StopEdit();
								RemoveLock('Holiday', holidayId);
						})
    					.on('hide.bs.modal', function (e) {
    						var result = true;

    						if ($(e.target).attr('id') == 'editHolidayItem') {
    							// check that form has been changed
    							if (holidayFormDataChanged) {
    								// ask user for confirmation of form close
    								if (!confirm("Form contains unsaved changes, do you want to close the form?")) {
    									// reset change indicator
    									result = false;
    								};
    							}
    						}

    						return result;
    					})
						.modal('show');

    				unblockUI();
    			}
    		});
		}
    	
    	function showCreateHolidayDialog() {
    		blockUI();

    		$('#editHolidayReload').html("");
    		$('#editHolidayItem').off('hide.bs.modal').off('hidden.bs.modal').off('shown.bs.modal');

    		$.ajax({
    			url: '@Url.Action("CreateHoliday", "Calendar")',
    			cache: false,
    			dataType: "html",
    			success: function (data) {
    				$('#editHolidayReload').html(data);
    				initEditHolidayForm();

    				$('#editHolidayItem')
    					.on('hide.bs.modal', function (e) {
    						var result = true;

    						if ($(e.target).attr('id') == 'editHolidayItem') {
    							// check that form has been changed
    							if (holidayFormDataChanged) {
    								// ask user for confirmation of form close
    								if (!confirm("Form contains unsaved changes, do you want to close the form?")) {
    									// reset change indicator
    									result = false;
    								};
    							}
    						}

    						return result;
    					})
						.modal('show');

    				unblockUI();
    			}
    		});
    	}

    	function showCalendarEditDialog() {
    		var emptyId = '@Guid.Empty';
    		var url = "";
    		var isNewItem = true;

    		var itemIdSelector = '#@Html.ClientIdFor(t => t.Id)';
    		var itemId = $(itemIdSelector).val();

    		blockUI();

    		if (itemId && (itemId.length > 0) && (itemId != emptyId)) {
    			url = "?id=" + itemId;
    			isNewItem = false;
			}

    		$('#editReload').html("");
    		$('#editCalendarItem').off('hide.bs.modal').off('hidden.bs.modal').off('shown.bs.modal');
																					
    		$.ajax({
    			url: '@Url.Action("EditCalendar", "Calendar")' + url,
    			cache: false,
    			dataType: "html",
    			success: function (data) {
    				$('#editReload').html(data);
    				initEditCalendarForm();

    				$('#editCalendarItem')
						.on('hidden.bs.modal', function () {
							if (!isNewItem) {
								StopEdit();
								RemoveLock('FiscalCalendarSettings', itemId);
							}
						})
    					.on('hide.bs.modal', function (e) {
    						var result = true;

    						if ($(e.target).attr('id') == 'editCalendarItem') {
    							// check that form has been changed
    							if (calendarFormDataChanged) {
    								// ask user for confirmation of form close
    								if (!confirm("Form contains unsaved changes, do you want to close the form?")) {
    									// reset change indicator
    									result = false;
    								};
    							}
    						}

							return result;
    					})
    				.modal('show');

    				unblockUI();
    			}
    		});
    	}

    	function showCalendarHistory()
    	{
    		blockUI();

    		$('#calendarTableReload').html("");
    		$.ajax({
    			url: '@Url.Action("ViewCalendarHistory", "Calendar")',
    			cache: false,
    			dataType: "html",
    			success: function (data) {
    				$('#calendarTableReload').html(data);
    				$('#viewCalendarHistory').modal('show');

    				unblockUI();
    			}
    		});
    	}

    </script>
}
<div class="panel form-horizontal">
	<div class="panel-heading">
		<span class="panel-title">Fiscal Calendar Settings</span>
	</div>
    <div class="panel-body">
		<div id="erorMsgPlaceholderIndex"></div>
        <div class="form-group">
			@Html.HiddenFor(t => t.Id)
			@Html.LabelFor(t => t.CalendarType, new {@class="col-sm-2 control-label"})
            <div class="col-sm-4 radio">
                <span class="lbl">@Model.CalendarType.ToDisplayValue()</span>
            </div>
            @Html.LabelFor(t => t.StartingPoint, new {@class="col-sm-2 control-label"})
            <div class="col-sm-4 radio">
                <span class="lbl">@(Model.StartingPoint.HasValue ? Model.StartingPoint.Value.ToShortDateString() : "")</span>
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(t => t.WeekendingDay, new {@class="col-sm-2 control-label"})
            <div class="col-sm-4 radio">
                <span class="lbl">@Model.WeekendingDay.ToDisplayValue()</span>
            </div>
            @Html.LabelFor(t => t.YearType, new {@class="col-sm-2 control-label"})
            <div class="col-sm-4 radio">
                <span class="lbl">@Model.YearTypeAsText</span>
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(t => t.EffectiveChangeDate, new {@class="col-sm-2 control-label"})
            <div class="col-sm-4 radio">
                <span class="lbl">@(Model.EffectiveChangeDate.HasValue ? Model.EffectiveChangeDate.Value.ToShortDateString() : "")</span>
            </div>
			@if (Model.ValidTo.HasValue)
			{
				@Html.LabelFor(t => t.ValidTo, new {@class="col-sm-2 control-label accented"})
				<div class="col-sm-4 radio accented">
					<span class="lbl">@(Model.ValidTo.HasValue ? Model.ValidTo.Value.ToShortDateString() : "")</span>
				</div>
			}
        </div>
        @if (SecurityManager.CheckSecurityObjectPermission(Areas.FiscalCalendar, AccessLevel.Write))
	    {
        <div class="form-group" style="margin-bottom: 0;">
            <div class="col-sm-offset-2 col-sm-10">
                <button id="btnEdit" onclick="showCalendarEditDialog()" data-toggle="popover" data-placement="left" class="btn btn-warning popover-warning popover-dark"><i class="fa fa-edit"></i> Edit</button>
                <button id="btnViewHistory" onclick="showCalendarHistory()" data-toggle="popover" data-placement="left" class="btn btn-primary popover-warning popover-dark"><i class="fa fa-eye"></i> View History</button>
            </div>
        </div>
         }
    </div>
</div>

<div class="table-light table-responsive">
    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="holidays">
        <thead>
            <tr>
                <th>Name</th>
                <th>Date</th>
				<th>Working Day</th>
				<th>Non Working Week</th>
				<th>Effective Date of Change</th>
				<th>Valid To</th>
				<th></th>
            </tr>
        </thead>
    </table>
</div>

<!-- Modal -->
<div id="editCalendarItem" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content" id="editReload">

        </div> <!-- / .modal-content -->
    </div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->

<div id="viewCalendarHistory" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
    <div class="modal-dialog" id="calendarTableDialog">
        <div class="modal-content" id="calendarTableReload">

        </div> <!-- / .modal-content -->
    </div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->

<!-- Modal -->
<div id="editHolidayItem" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content" id="editHolidayReload">

        </div> <!-- / .modal-content -->
    </div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->

<div id="viewHolidayHistory" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
    <div class="modal-dialog" id="holidayHistoryDialog">
        <div class="modal-content" id="holidayHistoryReload">

        </div> <!-- / .modal-content -->
    </div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->