@model PantheonRA.BackOffice.Models.SetCalendarEntryTypeGroupsViewModel

<div class="wrapper wrapper-content">
    <div class="tabs-container">
        @Html.Partial("~/Views/Company/_CompanySettingsTabNavigation.cshtml")

        @Html.Hidden("UrlSave", Url.Action("Save", "SetCalendarEntryTypeGroups"))
        @Html.Hidden("UrlSaveParams", Url.Action("SaveParams", "SetCalendarEntryTypeGroups"))
        @Html.Hidden("UrlSaveSetTimeRecord", Url.Action("SaveSetItem", "SetCalendarEntryTypeGroups"))
        @Html.Hidden("UrlDelete", Url.Action("Delete", "SetCalendarEntryTypeGroups"))
        @Html.Hidden("UrlDeleteSetTimeRecord", Url.Action("DeleteSetItem", "SetCalendarEntryTypeGroups"))
        @Html.Hidden("TxtConfirm", Loc.Confirm)
        @Html.Hidden("TxtDeleteQuestion", Loc.DeleteEntryTypeQuestion)
        @Html.Hidden("ConfirmDeleteMessage", Loc.ConfirmDeleteMessage)
        @Html.Hidden("TxtCancel", Loc.Cancel)
        @Html.Hidden("TxtConfirmation", Loc.Confirmation)
        @Html.Hidden("TxtDelNotPossible", Loc.DeleteEntryTypeNotPossible)
        @Html.Hidden("TxtInputFields", Loc.FieldIsRequired)
        @Html.Hidden("TxtAlreadyExists", Loc.AlreadyExists)
        @Html.Hidden("PrimaryKeyExists", Loc.PrimaryKeyExists)
        @Html.Hidden("GetSetWhTypesUrl", "/SetCalendarEntryTypeGroups/GetSetWhTypes")

        <div class="tab-content set-wh-content">
            <div class="divided-content">
                <div class="divided-content-main">
                    <div class="row padding-top-10">
                        <div class="col-md-6 padding-top-10">
                            <div class="row">
                                <!-- Set Wh Type -->
                                <div class="col-md-7">
                                    <div class="form-inline">
                                        <label>@Loc.SetWhTitle</label>
                                        <select id="WorkPlan"
                                                name="WorkPlan"
                                                data-placeholder="@Loc.SetWhTitle"
                                                class="form-control select2withAPI"
                                                data-url=@Url.Action("GetSetWhTypes", "SetCalendarEntryTypeGroups")
                                                data-column-names="@Loc.Code,@Loc.Name"
                                                data-bootstrap-columns="col-md-4,col-md-8"
                                                data-splitter=","
                                                data-search-width="450"
                                                onchange="onWorkPlanChange()">
                                            <option selected="selected">@Model.WorkPlan</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="form-inline">
                                        <label>@Loc.Date</label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                                            <input class="form-control datepicker"
                                                   id="DateBegin"
                                                   name="DateBegin"
                                                   type="text"
                                                   value="@Model.DateBegin.Value.ToString(Loc.DateFormat)">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-content">
                        <div class="row vertical-scroll">
                            <div class="col-md-6 padding-top-10">
                                <div class="row">
                                    <!-- Upoštevanje delovnega časa -->
                                    <div class="col-md-12 padding-top-10">
                                        <h4 class="padding-top-10">@Loc.WhSetWorkingTime</h4>
                                        <table id="tblSetCalEntryTypes" class="table table-bordered setwh-table" role="grid">
                                            <thead>
                                                <tr>
                                                    <th>@Loc.DayInWeek</th>
                                                    <th>@Loc.SetWhTimeFromT</th>
                                                    <th>@Loc.SetWhTimeToT</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr id="set-et-first-row">
                                                    <!-- Weekday -->
                                                    <td>
                                                        <div>
                                                            <select id="input-wtime-weekday"
                                                                    data-placeholder="@Loc.DayInWeek"
                                                                    class="form-control select2withAPI"
                                                                    data-search-width="450"
                                                                    data-url=@Url.Action("GetWeekdays", "SetCalendarEntryTypeGroups")
                                                                    data-allow-clear="true">
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <!-- Time From -->
                                                    <td>
                                                        <input id="input-wtime-time-from" type="time" class="form-control" autocomplete="off" value="00:00" />
                                                    </td>
                                                    <!-- Time To -->
                                                    <td>
                                                        <input id="input-wtime-time-to" type="time" class="form-control" autocomplete="off" value="00:00" />
                                                    </td>
                                                    <!-- Action -->
                                                    <td class="td-action">
                                                        <p class="btn btn btn-success" onclick="saveWtime(0)">
                                                            <span class="far fa-plus cursor-pointer" aria-hidden="true"></span>
                                                        </p>
                                                    </td>
                                                </tr>
                                                @foreach (var item in Model.TimeRecords)
                                                {
                                                    <tr id="tr-wt-@item.AnQid">
                                                        <!-- Weekday -->
                                                        <td style="width: 45%">
                                                            <div>
                                                                <select id="input-wtime-weekday-@item.AnQid"
                                                                        data-placeholder="@Loc.DayInWeek"
                                                                        class="form-control select2withAPI"
                                                                        data-search-width="450"
                                                                        onchange="saveWtime(@item.AnQid)"
                                                                        data-url=@Url.Action("GetWeekdays", "SetCalendarEntryTypeGroups")
                                                                        data-allow-clear="true">
                                                                    <option value="@item.Day" selected>@DateTimeHelper.TranslateDay(item.Day)</option>
                                                                </select>
                                                            </div>
                                                        </td>
                                                        <!-- Time From -->
                                                        <td style="width: 25%">
                                                            <input id="input-wtime-time-from-@item.AnQid"
                                                                   type="time"
                                                                   class="form-control"
                                                                   autocomplete="off"
                                                                   value="@item.IncBeforeStart"
                                                                   onblur="saveWtime(@item.AnQid)" />
                                                        </td>
                                                        <!-- Time To -->
                                                        <td style="width: 25%">
                                                            <input id="input-wtime-time-to-@item.AnQid"
                                                                   type="time"
                                                                   class="form-control"
                                                                   autocomplete="off"
                                                                   value="@item.IncAfterEnd"
                                                                   onblur="saveWtime(@item.AnQid)" />
                                                        </td>
                                                        <!-- Action -->
                                                        <td style="width: 5%" class="td-action">
                                                            <p class="text-center" style="margin-top: 8px !important">
                                                                <span onclick="deleteWtime(@item.AnQid)" class="far fa-trash-alt cursor-pointer" aria-hidden="true"></span>
                                                            </p>
                                                        </td>
                                                    </tr>
                                                }
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- Obvezna prisotnost -->
                                    <div class="col-md-12">
                                        <h4 class="padding-top-10">@Loc.WhSetMandatoryAttendance</h4>
                                        <table id="tblSetCalEntryTypes" class="table table-bordered setwh-table" role="grid">
                                            <thead>
                                                <tr>
                                                    <th>@Loc.DayInWeek</th>
                                                    <th>@Loc.SetWhTimeFrom</th>
                                                    <th>@Loc.SetWhTimeTo</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr id="set-et-first-row">
                                                    <!-- Weekday -->
                                                    <td>
                                                        <div>
                                                            <select id="input-matime-weekday"
                                                                    data-placeholder="@Loc.DayInWeek"
                                                                    class="form-control select2withAPI"
                                                                    data-search-width="450"
                                                                    data-url=@Url.Action("GetWeekdays", "SetCalendarEntryTypeGroups")
                                                                    data-allow-clear="true">
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <!-- Time From -->
                                                    <td>
                                                        <input id="input-matime-time-from" type="time" class="form-control" autocomplete="off" value="00:00" />
                                                    </td>
                                                    <!-- Time To -->
                                                    <td>
                                                        <input id="input-matime-time-to" type="time" class="form-control" autocomplete="off" value="00:00" />
                                                    </td>
                                                    <!-- Action -->
                                                    <td class="td-action">
                                                        <p class="btn btn btn-success" onclick="saveMatime(0)">
                                                            <span class="far fa-plus cursor-pointer" aria-hidden="true"></span>
                                                        </p>
                                                    </td>
                                                </tr>
                                                @foreach (var item in Model.TimeRecords)
                                                {
                                                    <tr id="tr-ma-@item.AnQid">
                                                        <!-- Weekday -->
                                                        <td style="width: 45%">
                                                            <div>
                                                                <select id="input-matime-weekday-@item.AnQid"
                                                                        data-placeholder="@Loc.DayInWeek"
                                                                        class="form-control select2withAPI"
                                                                        data-search-width="450"
                                                                        onchange="saveMatime(@item.AnQid)"
                                                                        data-url=@Url.Action("GetWeekdays", "SetCalendarEntryTypeGroups")
                                                                        data-allow-clear="true">
                                                                    <option value="@item.Day" selected>@DateTimeHelper.TranslateDay(item.Day)</option>
                                                                </select>
                                                            </div>
                                                        </td>
                                                        <!-- Time From -->
                                                        <td style="width: 25%">
                                                            <input id="input-matime-time-from-@item.AnQid"
                                                                   type="time"
                                                                   class="form-control"
                                                                   autocomplete="off"
                                                                   value="@item.MandatoryAttenBegin"
                                                                   onblur="saveMatime(@item.AnQid)" />
                                                        </td>
                                                        <!-- Time To -->
                                                        <td style="width: 25%">
                                                            <input id="input-matime-time-to-@item.AnQid"
                                                                   type="time"
                                                                   class="form-control"
                                                                   autocomplete="off"
                                                                   value="@item.MandatoryAttenEnd"
                                                                   onblur="saveMatime(@item.AnQid)" />
                                                        </td>
                                                        <!-- Action -->
                                                        <td style="width: 5%" class="td-action">
                                                            <p class="text-center" style="margin-top: 8px !important">
                                                                <span onclick="deleteWtime(@item.AnQid)" class="far fa-trash-alt cursor-pointer" aria-hidden="true"></span>
                                                            </p>
                                                        </td>
                                                    </tr>
                                                }
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 padding-top-10">
                                <div class="row">
                                    <!-- Malica -->
                                    <div class="col-md-12">
                                        <h4 class="padding-top-10">@Loc.SetWhTitleSnacksOthers</h4>
                                        <table id="tblSetCalEntryTypes" class="table table-bordered setwh-table" role="grid">
                                            <thead>
                                                <tr>
                                                    <th>@Loc.Name</th>
                                                    <th>@Loc.SetWhTimeFrom</th>
                                                    <th>@Loc.SetWhTimeTo</th>
                                                    <th>@Loc.SetWhTime1</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody id="sortable-body">
                                                <tr id="set-et-first-row">
                                                    <!-- Name -->
                                                    <td style="width: 35%">
                                                        <div class="">
                                                            <select id="input-snacks-name"
                                                                    data-placeholder="@Loc.Name"
                                                                    class="form-control select2withAPI"
                                                                    data-search-width="450"
                                                                    data-column-names="@Loc.Code,@Loc.Name"
                                                                    data-url=@Url.Action("GetCalendarEntryTypes", "SetWorkHours")
                                                                    data-allow-clear="true"
                                                                    onchange="setSnackNameVal()"
                                                                    data-bootstrap-columns="col-md-3,col-md-9">
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <!-- Time From -->
                                                    <td style="width: 20%">
                                                        <input id="input-snacks-time-from" type="time" class="form-control" autocomplete="off" value="00:00" />
                                                    </td>
                                                    <!-- Time To -->
                                                    <td style="width: 20%">
                                                        <input id="input-snacks-time-to" type="time" class="form-control" autocomplete="off" value="00:00" />
                                                    </td>
                                                    <!-- Time 1 -->
                                                    <td style="width: 20%">
                                                        <input id="input-snacks-time1" type="time" class="form-control" autocomplete="off" value="00:00" />
                                                    </td>
                                                    <!-- Action -->
                                                    <td style="width: 5%" class="td-action">
                                                        <p class="btn btn btn-success" onclick="saveSnack(0)">
                                                            <span class="far fa-plus cursor-pointer" aria-hidden="true"></span>
                                                        </p>
                                                    </td>
                                                </tr>
                                                @foreach (var item in Model.Snacks)
                                                {
                                                    @Html.Hidden("AnQid-" + item.AnQid)

                                                    <tr id="tr-@item.AnQid" class="sortable-row" data-id="@item.AnQid">
                                                        <!-- Name -->
                                                        <td style="width: 35%">
                                                            <div class="">
                                                                <select id="input-snacks-name-@item.AnQid"
                                                                        data-placeholder="@Loc.Name"
                                                                        class="form-control select2withAPI"
                                                                        data-search-width="450"
                                                                        data-column-names="@Loc.Code,@Loc.Name"
                                                                        data-url=@Url.Action("GetCalendarEntryTypes", "SetWorkHours")
                                                                        onchange="setSnackNameVal(@item.AnQid)"
                                                                        data-bootstrap-columns="col-md-3,col-md-9">
                                                                    <option selected>@item.EntryType</option>
                                                                </select>
                                                            </div>
                                                        </td>
                                                        <!-- Time From -->
                                                        <td style="width: 20%">
                                                            <input id="input-snacks-time-from-@item.AnQid"
                                                                   type="time" class="form-control"
                                                                   autocomplete="off"
                                                                   value="@item.LunchAfterStart"
                                                                   onblur="saveSnack(@item.AnQid)" />
                                                        </td>
                                                        <!-- Time To -->
                                                        <td style="width: 20%">
                                                            <input id="input-snacks-time-to-@item.AnQid"
                                                                   type="time"
                                                                   class="form-control"
                                                                   autocomplete="off"
                                                                   value="@item.LunchBefore"
                                                                   onblur="saveSnack(@item.AnQid)" />
                                                        </td>
                                                        <!-- Time 1 -->
                                                        <td style="width: 20%">
                                                            <input id="input-snacks-time1-@item.AnQid"
                                                                   type="time"
                                                                   class="form-control"
                                                                   autocomplete="off"
                                                                   value="@item.MaxTimeAccount"
                                                                   onblur="saveSnack(@item.AnQid)" />
                                                        </td>
                                                        <!-- Action -->
                                                        <td class="td-action">
                                                            <p class="text-center" style="margin-top: 8px !important">
                                                                <span onclick="deleteItem(@item.AnQid)" class="far fa-trash-alt cursor-pointer" aria-hidden="true"></span>
                                                            </p>
                                                        </td>
                                                    </tr>
                                                }
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- Odmori -->
                                    <div class="col-md-12">
                                        <h4 class="padding-top-10">@Loc.SetWhTitleBreakOuts</h4>
                                        <table id="tblSetCalEntryTypes" class="table table-bordered setwh-table" role="grid">
                                            <thead>
                                                <tr>
                                                    <th>@Loc.Name</th>
                                                    <th>@Loc.SetWhDovoljeno</th>
                                                    <th>@Loc.SetWhBreakOutDuration</th>
                                                    <th>@Loc.SetWhDailyDuration</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody id="sortable-body">
                                                <tr id="set-et-first-row">
                                                    <!-- Name -->
                                                    <td style="width: 32%">
                                                        <div class="">
                                                            <select id="input-breakouts-name"
                                                                    data-placeholder="@Loc.Name"
                                                                    class="form-control select2withAPI"
                                                                    data-search-width="450"
                                                                    data-column-names="@Loc.Code,@Loc.Name"
                                                                    data-url=@Url.Action("GetCalendarEntryTypes", "SetWorkHours")
                                                                    data-allow-clear="true"
                                                                    onchange="setBreakOutsNameVal()"
                                                                    data-bootstrap-columns="col-md-3,col-md-9">
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <!-- Max Pauses -->
                                                    <td style="width: 23%">
                                                        <input id="input-breakouts-max-pauses" onchange="refreshMaxPauseDays()" type="number" min="0" max="5" class="form-control" autocomplete="off" value="0" />
                                                    </td>
                                                    <!-- Pause Duration -->
                                                    <td style="width: 20%">
                                                        <input id="input-breakouts-pause-duration" onchange="refreshMaxPauseDays()" type="time" class="form-control" autocomplete="off" value="00:00" />
                                                    </td>
                                                    <!-- Pause Max Day -->
                                                    <td style="width: 20%">
                                                        <input id="input-breakouts-pause-max-day" type="time" class="form-control" autocomplete="off" value="00:00" />
                                                    </td>
                                                    <!-- Action -->
                                                    <td style="width: 5%" class="td-action">
                                                        <p class="btn btn btn-success" onclick="saveBreakOut(0)">
                                                            <span class="far fa-plus cursor-pointer" aria-hidden="true"></span>
                                                        </p>
                                                    </td>
                                                </tr>
                                                @foreach (var item in Model.BreakOuts)
                                                {
                                                    @Html.Hidden("AnQid-" + item.AnQid)

                                                    <tr id="tr-@item.AnQid" class="sortable-row" data-id="@item.AnQid">
                                                        <!-- Name -->
                                                        <td style="width: 35%">
                                                            <div class="">
                                                                <select id="input-breakouts-name-@item.AnQid"
                                                                        data-placeholder="@Loc.Name"
                                                                        class="form-control select2withAPI"
                                                                        data-search-width="450"
                                                                        data-column-names="@Loc.Code,@Loc.Name"
                                                                        data-url=@Url.Action("GetCalendarEntryTypes", "SetWorkHours")
                                                                        onchange="setBreakOutsNameVal(@item.AnQid)"
                                                                        data-bootstrap-columns="col-md-3,col-md-9">
                                                                    <option selected>@item.EntryType</option>
                                                                </select>
                                                            </div>
                                                        </td>
                                                        <!-- Max Pauses -->
                                                        <td style="width: 20%">
                                                            <input id="input-breakouts-max-pauses-@item.AnQid"
                                                                   type="number"
                                                                   min="0"
                                                                   max="5"
                                                                   class="form-control"
                                                                   autocomplete="off"
                                                                   value="@item.MaxPauses"
                                                                   onblur="saveBreakOut(@item.AnQid)" />
                                                        </td>
                                                        <!-- Time To -->
                                                        <td style="width: 20%">
                                                            <input id="input-breakouts-pause-duration-@item.AnQid"
                                                                   type="time"
                                                                   class="form-control"
                                                                   autocomplete="off"
                                                                   value="@item.PauseDuration"
                                                                   onblur="saveBreakOut(@item.AnQid)" />
                                                        </td>
                                                        <!-- Time 1 -->
                                                        <td style="width: 20%">
                                                            <input id="input-breakouts-pause-max-day-@item.AnQid"
                                                                   type="time"
                                                                   class="form-control"
                                                                   autocomplete="off"
                                                                   value="@item.PauseMaxDurationDay"
                                                                   onblur="saveBreakOut(@item.AnQid)" />
                                                        </td>
                                                        <!-- Action -->
                                                        <td class="td-action">
                                                            <p class="text-center" style="margin-top: 8px !important">
                                                                <span onclick="deleteItem(@item.AnQid)" class="far fa-trash-alt cursor-pointer" aria-hidden="true"></span>
                                                            </p>
                                                        </td>
                                                    </tr>
                                                }
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="divided-content-side" style="min-height: 88vh">
                    @{Html.RenderAction("SideMenu", "SetWorkHours", new { activeTitle = Model.Title }); }
                </div>
            </div>
        </div>
    </div>
</div>

@section pageScripts{
    @* TODO: remove after refactor *@
    @Scripts.Render("~/bundles/validation")
    <script src="~/Scripts/global-script.js"></script>
}

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- This will be moved into js on the task finish -->
<script>
    function refreshMaxPauseDays() {
        let maxPauses = $("#input-breakouts-max-pauses").val();
        let pauseDurarion = $("#input-breakouts-pause-duration").val();

        let durationArr = pauseDurarion.split(":");

        let minutes = durationArr[0] * 60 + durationArr[1];

        let breakOutsInDayMinutes = maxPauses * minutes;

        let bOhours = Math.floor((breakOutsInDayMinutes / 60) % 24);
        let bOminutes = Math.floor(breakOutsInDayMinutes % 60);

        let breakOutsInDayStr = String(bOhours).padStart(2, '0') + ":" + String(bOminutes).padStart(2, '0');

        $("#input-breakouts-pause-max-day").val(breakOutsInDayStr);
    }

    function onWorkPlanChange() {
        let data = {
            WorkPlan: $("#WorkPlan").val(),
            DateBegin: null,
        };

        saveParams(data);
    }

    function onDateBeginChange() {
        let data = {
            WorkPlan: null,
            DateBegin: $("#DateBegin").val(),
        };

        saveParams(data);
    }

    $('#DateBegin').on('dp.hide', function (e) {
        onDateBeginChange();
    });

    $(document).ajaxError(function (event, jqxhr, settings, thrownError) {
        let url = $("#GetSetWhTypesUrl").val();
        if (settings.url.startsWith(url)) {
            return;
        }
        location.reload();
    });

    function saveParams(params) {
        $.ajax({
            url: $("#UrlSaveParams").val(),
            type: 'POST',
            data: params,
            success: function (savedParams) {
                location.reload();
            }
        });
    }

    function setSnackNameVal(anQid) {
        let id = "input-snacks-name";

        if (anQid) {
            id += ("-" + anQid);
        }

        let typeVal = $("#" + id).val();

        let closeContent = anQid ? '' : ' <span onclick="clearSnackName()">×</span> ';

        setTimeout(function () { $("#select2-" + id + "-container").html(closeContent + typeVal); }, 30);

        if (anQid) {
            saveSnack(anQid);
        }
    }

    function clearSnackName() {
        setTimeout(function () { $("#select2-input-snacks-name-container").html(""); }, 100);

        var data = new Option(null, null, false, false);
        $('#input-snacks-name').append(data).trigger('change');
    }

    function setBreakOutsNameVal(anQid) {
        let id = "input-breakouts-name";

        if (anQid) {
            id += ("-" + anQid);
        }

        let typeVal = $("#" + id).val();

        let closeContent = anQid ? '' : ' <span onclick="clearBreakOutName()">×</span> ';

        setTimeout(function () { $("#select2-" + id + "-container").html(closeContent + typeVal); }, 30);

        if (anQid) {
            saveBreakOut(anQid);
        }
    }

    function clearBreakOutName() {
        setTimeout(function () { $("#select2-input-breakouts-name-container").html(""); }, 100);

        var data = new Option(null, null, false, false);
        $('#input-breakouts-name').append(data).trigger('change');
    }

    function deleteItem(anQid) {
        var deleteText = $("#TxtDeleteQuestion").val();
        var deleteTitle = $("#TxtConfirmation").val();
        var confirmText = $("#TxtConfirm").val();
        var cancelText = $("#TxtCancel").val();

        $(document).ready(function () {
            $().customModal({
                destroyOnClose: true,
                title: deleteTitle,
                showCloseButton: true,
                id: "modalDeleteEntryTypeGroup",
                type: "question",
                text: deleteText,
                buttons: [{
                    icon: 'fa fa-times',
                    text: cancelText,
                    action: function () {

                    },
                    closeOnAction: true,
                    type: 'ghost'
                },
                {
                    icon: 'fa fa-check',
                    text: confirmText,
                    closeOnAction: true,
                    action: async function () {
                        await new Promise((resolve, reject) => setTimeout(function () {
                            removeItem(anQid);
                            resolve();
                        }, 1500));
                    },
                    closeOnAction: true,
                    type: 'primary'
                }]
            });
        });
    }

    function removeItem(anQid) {
        $.ajax({
            url: $("#UrlDelete").val() + '?anQId=' + anQid,
            type: 'GET',
            success: function (data) {
                if (data && data.Status) {
                    $("#tr-" + anQid).remove();
                }
                else {
                    $(document).ready(function () {
                        $().customModal({
                            destroyOnClose: true,
                            title: '',
                            showCloseButton: true,
                            id: "modalDeleteEntryTypeGroupNotPossible",
                            type: "alert",
                            text: $("#TxtDelNotPossible").val(),
                            buttons: [
                                {
                                    icon: 'fa fa-check',
                                    text: $("#TxtConfirm").val(),
                                    closeOnAction: true,
                                    type: 'primary'
                                }]
                        });
                    });
                }
            }
        });
    }

    function deleteWtime(anQid) {
        var deleteText = $("#ConfirmDeleteMessage").val();
        var deleteTitle = $("#TxtConfirmation").val();
        var confirmText = $("#TxtConfirm").val();
        var cancelText = $("#TxtCancel").val();

        $(document).ready(function () {
            $().customModal({
                destroyOnClose: true,
                title: deleteTitle,
                showCloseButton: true,
                id: "modalWtime",
                type: "question",
                text: deleteText,
                buttons: [{
                    icon: 'fa fa-times',
                    text: cancelText,
                    action: function () {

                    },
                    closeOnAction: true,
                    type: 'ghost'
                },
                {
                    icon: 'fa fa-check',
                    text: confirmText,
                    closeOnAction: true,
                    action: async function () {
                        await new Promise((resolve, reject) => setTimeout(function () {
                            removeWtime(anQid);
                            resolve();
                        }, 1500));
                    },
                    closeOnAction: true,
                    type: 'primary'
                }]
            });
        });
    }

    function removeWtime(anQid) {
        $.ajax({
            url: $("#UrlDeleteSetTimeRecord").val() + '?anQId=' + anQid,
            type: 'GET',
            success: function (data) {
                $("#tr-wt-" + anQid).remove();
                $("#tr-ma-" + anQid).remove();
            }
        });
    }

    function saveSnack(anQid) {
        let sufix = anQid > 0 ? "-" + anQid : "";

        let data = {
            AnQid: anQid ? anQid : 0,
            EntryType: $("#input-snacks-name" + sufix).val(),
            Group: 'M',
            LunchAfterStart: $("#input-snacks-time-from" + sufix).val(),
            LunchBefore: $("#input-snacks-time-to" + sufix).val(),
            MaxTimeAccount: $("#input-snacks-time1" + sufix).val(),
        };

        if (!data.EntryType) {
            $(document).ready(function () {
                $().customModal({
                    destroyOnClose: true,
                    title: '',
                    showCloseButton: true,
                    id: "modalSaveEntryTypeGroupInfo",
                    type: "alert",
                    text: $("#TxtInputFields").val(),
                    buttons: [
                        {
                            icon: 'fa fa-check',
                            text: $("#TxtConfirm").val(),
                            closeOnAction: true,
                            type: 'primary'
                        }]
                });
            });
        }
        else {
            postItem(data);
        }
    }

    function saveBreakOut(anQid) {
        let sufix = anQid > 0 ? "-" + anQid : "";

        let data = {
            AnQid: anQid ? anQid : 0,
            EntryType: $("#input-breakouts-name" + sufix).val(),
            Group: 'O',
            MaxPauses: $("#input-breakouts-max-pauses" + sufix).val(),
            PauseDuration: $("#input-breakouts-pause-duration" + sufix).val(),
            PauseMaxDurationDay: $("#input-breakouts-pause-max-day" + sufix).val(),
        };

        if (!data.EntryType) {
            $(document).ready(function () {
                $().customModal({
                    destroyOnClose: true,
                    title: '',
                    showCloseButton: true,
                    id: "modalBrakeOutInfo",
                    type: "alert",
                    text: $("#TxtInputFields").val(),
                    buttons: [
                        {
                            icon: 'fa fa-check',
                            text: $("#TxtConfirm").val(),
                            closeOnAction: true,
                            type: 'primary'
                        }]
                });
            });
        }
        else {
            postItem(data);
        }
    }

    function postItem(data) {
        $.ajax({
            url: $("#UrlSave").val(),
            type: 'POST',
            data: data,
            success: function (data) {
                if (data.Message == "Code") {
                    $(document).ready(function () {
                        $().customModal({
                            destroyOnClose: true,
                            title: '',
                            showCloseButton: true,
                            id: "modalAlreadyExists",
                            type: "alert",
                            text: $("#PrimaryKeyExists").val(),
                            buttons: [
                                {
                                    icon: 'fa fa-check',
                                    text: $("#TxtConfirm").val(),
                                    closeOnAction: true,
                                    type: 'primary'
                                }]
                        });
                    });
                }
                else if (!data.AnQid) {
                    location.reload();
                }
            }
        });
    }

    function saveWtime(anQid) {
        let sufix = anQid > 0 ? "-" + anQid : "";

        let data = {
            AnQid: anQid ? anQid : 0,
            Day: $("#input-wtime-weekday" + sufix).val(),
            IncBeforeStart: $("#input-wtime-time-from" + sufix).val(),
            IncAfterEnd: $("#input-wtime-time-to" + sufix).val(),
            MandatoryAttenBegin: null,
            MandatoryAttenEnd: null,
        };

        saveSetTimeRecord(data);
    }

    function saveMatime(anQid) {
        let sufix = anQid > 0 ? "-" + anQid : "";

        let data = {
            AnQid: anQid ? anQid : 0,
            Day: $("#input-matime-weekday" + sufix).val(),
            IncBeforeStart: null,
            IncAfterEnd: null,
            MandatoryAttenBegin: $("#input-matime-time-from" + sufix).val(),
            MandatoryAttenEnd: $("#input-matime-time-to" + sufix).val(),
        };

        saveSetTimeRecord(data);
    }

    function saveSetTimeRecord(data) {
        if (data.Day < 0) {
            $(document).ready(function () {
                $().customModal({
                    destroyOnClose: true,
                    title: '',
                    showCloseButton: true,
                    id: "modalSetTimeRecordtInfo",
                    type: "alert",
                    text: $("#TxtInputFields").val(),
                    buttons: [
                        {
                            icon: 'fa fa-check',
                            text: $("#TxtConfirm").val(),
                            closeOnAction: true,
                            type: 'primary'
                        }]
                });
            });
        }
        else {
            postSetTimeRecord(data);
        }
    }

    function postSetTimeRecord(data) {
        $.ajax({
            url: $("#UrlSaveSetTimeRecord").val(),
            type: 'POST',
            data: data,
            success: function (data) {
                location.reload();
            }
        });
    }
</script>