@page
@model WorkFlowCheck.Web.Pages.UserAndRole.RoleCheckListTemplateHeaderEditPageModel
@using Microsoft.AspNetCore.Antiforgery
@inject IAntiforgery Antiforgery
@{
    ViewData["Title"] = "Szabály - ellenőrzési sablon";
    var RoleCheckListTemplateHeaderId = Model.RoleCheckListTemplateHeaderDTO.Id;
    var urlPost = Url.Page("./RoleCheckListTemplateHeaderEditPage", "Save");
}
<h1>@ViewData["Title"]</h1>

<input type="hidden" id="RoleCheckListTemplateHeaderEditPostUrl" value="@urlPost" />

<div class="card shadow p-4">
    <form method="post" id="RoleCheckListTemplateHeaderForm">
        <meta name="csrf-token" content="@Antiforgery.GetAndStoreTokens(HttpContext).RequestToken" />
        <input type="hidden" asp-for="RoleCheckListTemplateHeaderDTO.Id" />
        
       
        <div class="mb-3">
            <div class="col-md-3">
                <label asp-for="RoleCheckListTemplateHeaderDTO.RoleId"></label>
                <select asp-for="RoleCheckListTemplateHeaderDTO.RoleId" class="form-control" asp-items="Model.Roles"></select>
                <span asp-validation-for="RoleCheckListTemplateHeaderDTO.RoleId" class="text-danger"></span>
            </div>
            <div class="col-md-3">
                <label asp-for="RoleCheckListTemplateHeaderDTO.CheckListTemplateHeaderId"></label>
                <select asp-for="RoleCheckListTemplateHeaderDTO.CheckListTemplateHeaderId" class="form-control" asp-items="Model.RoleCheckListTemplateHeaders"></select>
                <span asp-validation-for="RoleCheckListTemplateHeaderDTO.CheckListTemplateHeaderId" class="text-danger"></span>
            </div>
            <div class="col-md-3">
                <label asp-for="RoleCheckListTemplateHeaderDTO.Enabled"></label>
                <input type="checkbox" asp-for="RoleCheckListTemplateHeaderDTO.Enabled" class="form-check-input" />
                <span asp-validation-for="RoleCheckListTemplateHeaderDTO.Enabled" class="text-danger"></span>
            </div>
        </div>
        <hr class="mt-4 mb-3 border-secondary">
        <div class="mb-3 d-flex justify-content-between">
            <button type="button" id="saveRoleCheckListTemplateHeader" class="btn btn-primary">Mentés</button>
            <button type="button" class="btn btn-secondary" onclick="history.back()">Mégsem</button>
        </div>
    </form>
</div>

@section Scripts {
    <script>

        $("#saveRoleCheckListTemplateHeader").click(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            var formData = getFormAsNestedObject('#RoleCheckListTemplateHeaderForm');
            const $form = $('#RoleCheckListTemplateHeaderForm');
            formData.RoleCheckListTemplateHeaderDTO.Enabled = $('#RoleCheckListTemplateHeaderForm input[name="RoleCheckListTemplateHeaderDTO.Enabled"]').is(':checked');

            // console.log(formData);
            console.log(formData.RoleCheckListTemplateHeaderDTO);

            if ($form.valid())
            {
                $.ajax({
                    url: $('#RoleCheckListTemplateHeaderEditPostUrl').val(),
                    type: 'POST',
                    headers: {
                          'X-CSRF-TOKEN': csrfToken,
                          'Content-Type': 'application/json'
                    },
                    data: JSON.stringify(formData.RoleCheckListTemplateHeaderDTO),
                    success: function (response) {
                        
                        if (response.success)
                        {
                            showMessageModal({
                                title: 'Figyelmem!',
                                message: 'Sikeres mentés.',
                                okText: 'Értettem'
                            });
                        }
                        else
                        {
                            showMessageModal({
                                title: 'Figyelmem, HIBA!',
                                message: 'Sikertelen mentés.',
                                okText: 'Értettem'
                            });
                        }
                    },
                    error: function (xhr, status, error) {
                        // Hiba esetén
                        console.error("Hiba: ", error);
                        showMessageModal({
                            title: 'Hiba!',
                            message: 'A mentés NEM sikerült!',
                            okText: 'Értettem'
                        });
                    }
                });
            } else
            {
                $form[0].reportValidity();
            }

        });

        $(document).ready(function () {
            const $form = $("#RoleCheckListTemplateHeaderForm");

            $form.validate({
                errorClass: "text-danger small",
                errorPlacement: function (error, element) {
                    error.appendTo(element.parent());
                }
            });

            // $form.on("submit", function (e) {
            //     if (!$form.valid()) {
            //         e.preventDefault(); // Ne küldje be, ha van hiba
            //     }
            // });
        });
    </script>
}