@using PantheonRA.BackOffice.Enums
@using PantheonRA.BackOffice.Models
@model BaseGridFilterModel

@{
    ViewBag.Title = Loc.Certificate;
}

<div class="wrapper wrapper-content">
    <div class="tabs-container">
        @Html.Partial("~/Views/Company/_CompanySettingsTabNavigation.cshtml")
        <div class="tab-content">
            <div class="row buttons-tabbed">
                <a href="@Url.Action("Index", "Company")" class="btn btn-transparent pull-right"><i class="fal fa-times"></i></a>

                @Html.Partial("_GridButtons", new GridButtonsViewModel {
                    AddButton = new PantheonRA.BackOffice.Models.FormButton{
                        Url = Url.Action("Upload", "Certificate"),
                        Icon = "fa fa-plus",
                        Text = Loc.New
                    }
                })
            </div>

            <div class="row document-head">
                <div class="col-md-3 col-xs-6">
                    <div class="form-group">
                        <label class="control-label">@Loc.SearchFilter</label>
                        @Html.TextBoxFor(model => model.Keywords, new { @id = "Keywords", @class = "form-control search-input", @placeholder = Loc.Search, autocomplete = "off" })
                    </div>
                </div>
            </div>

            <div class="project-list">
                <div class="document-list">
                    <table id="mainGrid" data-grid-id="certificates" data-url="@Url.Action("CertificateList", "Certificate")" data-height="calc(100vh - 330px)" class="list-table">
                        <thead>
                            <tr>
                                <th>@Loc.ValidTo</th>
                                <th>@Loc.Issuer</th>
                                <th>@Loc.SerialNumber</th>
                                <th>PAC</th>
                                <th>@Loc.Note</th>
                                <th>@Loc.Default</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@section pageScripts{
    @Scripts.Render("~/bundles/bills")
    <script>
        $dataTable = $('#mainGrid');
        $dataTable.DataTable({
            ajax: {
                url: $dataTable.attr('data-url'),
                data: function (d) {
                    d.Keywords = $("#Keywords").val();
                }
            },
            columns: [
                { data: "DateValidTo", name: "AdDateValidTo", filtertype: "text" },
                { data: "IssuerName", name: "AcIssuerName", filtertype: "text" },
                { data: "SerialNumber", name: "AcSerialNumber", filtertype: "text" },
                { data: "PAC", name: "AcPAC", filtertype: "text" },
                { data: "Note", name: "AcNote", filtertype: "text" },
                { data: "IsDefault", name: "AcIsDefault", filtertype: "text", render: $.fn.dataTable.render.checkbox("changeDefaultCertificate", "certificate_", "AnQid") }
            ]
        });

        var typingTimer;
        var doneTypingInterval = 600;
        $('#Keywords').off('keyup');
        $('#Keywords').on('keyup', function () {
            clearTimeout(typingTimer);
            typingTimer = setTimeout(function () { $.fn.dataTable.reload($dataTable); }, doneTypingInterval);
        });

        function changeDefaultCertificate(element) {
            $(element).attr("disabled", true);
            $.ajax({
                method: "POST",
                url: '@Url.Action("SetDefaultCertificate", "Certificate")',
                data: {
                    id: element.checked ? $(element).attr("id").replace("certificate_", "") : 0,
                },
                success: function (result) {
                    if (result === true || result === "True") {
                        $.fn.dataTable.reload($dataTable);
                    }
                    else {
                        $.fn.dataTable.reload($dataTable);
                         $().customModal({
                        destroyOnClose: true,
                        showCloseButton: true,
                        type: "alert",
                        text: "@Loc.GeneralError",
                        buttons: [
                            {
                                icon: 'fa fa-check',
                                text: "@Loc.Confirm",
                                closeOnAction: true,
                                type: 'primary'
                            }
                        ]
                    });
                    }
                },
                error: function () {
                    $.fn.dataTable.reload($dataTable);
                     $().customModal({
                        destroyOnClose: true,
                        showCloseButton: true,
                        type: "alert",
                        text: "@Loc.GeneralError",
                        buttons: [
                            {
                                icon: 'fa fa-check',
                                text: "@Loc.Confirm",
                                closeOnAction: true,
                                type: 'primary'
                            }
                        ]
                    });
                }
            });
        }
    </script>
}
