@page
@model WorkFlowCheck.Web.Pages.CheckListTemplate.CheckListTemplateHeader.CheckListTemplateHeaderEditPageModel
@using WorkFlowCheck.Common.Helper
@using WorkFlowCheck.Common.DTO
@using Microsoft.AspNetCore.Antiforgery
@inject IAntiforgery Antiforgery
@{
    ViewData["Title"] = "Ellenőrzés sablon";
    var CheckListTemplateHeaderId = Model.CheckListTemplateHeaderDTO.Id;
    var url = Url.Page("./CheckListTemplateHeaderEditPage", "LoadCheckListTemplateRows", new { id = CheckListTemplateHeaderId });
    var urlPost = Url.Page("./CheckListTemplateHeaderEditPage", "Save");
}
<h1>@ViewData["Title"]</h1>

<input type="hidden" id="CheckListTemplateHeaderEditUrl" value="@url" />
<input type="hidden" id="CheckListTemplateHeaderEditPostUrl" value="@urlPost" />

<div class="card shadow p-4">
    <form method="post" id="CheckListTemplateHeaderForm">
        <meta name="csrf-token" content="@Antiforgery.GetAndStoreTokens(HttpContext).RequestToken" />
        <input type="hidden" asp-for="CheckListTemplateHeaderDTO.Id" />
        <div class="mb-3">
            <label asp-for="CheckListTemplateHeaderDTO.ShortName"></label>
            <input asp-for="CheckListTemplateHeaderDTO.ShortName" class="form-control" />
            <span asp-validation-for="CheckListTemplateHeaderDTO.ShortName" class="text-danger"></span>
        </div>
        <div class="mb-3">
            <label asp-for="CheckListTemplateHeaderDTO.Description" class="form-label"></label>
            <textarea asp-for="CheckListTemplateHeaderDTO.Description" class="form-control" rows="3"></textarea>
            <span asp-validation-for="CheckListTemplateHeaderDTO.Description" class="text-danger"></span>
        </div>
        <div class="mb-3 row">
            <div class="col-md-6">
                <label asp-for="CheckListTemplateHeaderDTO.NumberGenerator1Id"></label>
                <select asp-for="CheckListTemplateHeaderDTO.NumberGenerator1Id" class="form-control" asp-items="Model.Numbergenerators"></select>
                <span asp-validation-for="CheckListTemplateHeaderDTO.NumberGenerator1Id" class="text-danger"></span>
            </div>
            <div class="col-md-6">
                <label asp-for="CheckListTemplateHeaderDTO.NumberGenerator2Id"></label>
                <select asp-for="CheckListTemplateHeaderDTO.NumberGenerator2Id" class="form-control" asp-items="Model.Numbergenerators"></select>
                <span asp-validation-for="CheckListTemplateHeaderDTO.NumberGenerator2" 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="saveCheckListTemplateHeader" class="btn btn-primary">Mentés</button>
            <button type="button" class="btn btn-secondary" onclick="history.back()">Mégsem</button>
        </div>
    </form>
</div>
<br></br>
<div class="card shadow p-4">
    <div class="d-flex justify-content-end">
        <button id="newCheckListTemplateRowBtn" class="btn btn-primary float-right new-btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Új elem hozzáadása">
            <i class="bi bi-plus-square"></i>
        </button>
    </div>
    <table id="tbCheckListTemplateHeaderPage" class="table table-bordered table-hover table-sm" style="width:100%">
        <thead class="table-primary">
            <tr>
                <th>ID</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListTemplateRowDTO.RowIndex), typeof(CheckListTemplateRowDTO))</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckPointDTO.ShortName), typeof(CheckPointDTO))</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListTemplateRowDTO.OperationDescription), typeof(CheckListTemplateRowDTO))</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListTemplateRowDTO.AnswerType), typeof(CheckListTemplateRowDTO))</th>
                <th class="text-center">Action</th>
            </tr>
        </thead>
        <tfoot class="table-light">
            <tr>
                <th>ID</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListTemplateRowDTO.RowIndex), typeof(CheckListTemplateRowDTO))</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckPointDTO.ShortName), typeof(CheckPointDTO))</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListTemplateRowDTO.OperationDescription), typeof(CheckListTemplateRowDTO))</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListTemplateRowDTO.AnswerType), typeof(CheckListTemplateRowDTO))</th>
                <th class="text-center">Action</th>
            </tr>
        </tfoot>
    </table>
</div>
@section Scripts {
    <script>
        const table = new DataTable('#tbCheckListTemplateHeaderPage', {
                ajax: {
                       url: $('#CheckListTemplateHeaderEditUrl').val(),
                       type: "GET",
                       dataSrc : "data"
                },
                columns: [
                    { data: "id" },
                    { data: "rowIndex" },
                    { data: "checkPointDTO.shortName" },
                    { data: "operationDescription" },
                    {
                        data: "answerType",
                        searchable: false,
                        sortable: false,
                        render: function ( data, type, row ) {
                            return renderAnswerType(data);
                        }
                    },
                    { data: null, render: function (data, type, row) {
                         return renderActionButtons(row.id);
                    }}
                ],
                columnDefs: [
                    {
                        "targets": 0,
                        "visible": false
                    },
                    {
                        "targets": 5,
                        "className": "text-center",
                        "width": "10%"
                    }
                ],

                processing:true,
                language: { url: '//cdn.datatables.net/plug-ins/2.2.2/i18n/hu.json',}
        });


        $('#newCheckListTemplateRowBtn').on('click', function () {
            const parentId = @CheckListTemplateHeaderId;
            window.location.href = '@Url.Page("/CheckListTemplate/CheckListTemplateRows/CheckListTemplateRowEditPage", "New")' + `&parentId=${parentId}`;
        });


        $('#tbCheckListTemplateHeaderPage').on('click', '.edit-btn', function ()
        {
            const row = table.row($(this).closest('tr')).data();
            window.location.href = `@Url.Page("/CheckListTemplate/CheckListTemplateRows/CheckListTemplateRowEditPage")?id=${row.id}`;

        });

        $('#tbCheckListTemplateHeaderPage').on('click', '.delete-btn', function ()
        {
            const row = table.row($(this).closest('tr')).data();
            deleteEntity(table, '/CheckListTemplate/CheckListTemplateHeader/CheckListTemplateHeaderEditPage?handler=DeleteCheckListTemplateRow', row.id);
        });

        $("#saveCheckListTemplateHeader").click(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            var formData = getFormAsNestedObject('#CheckListTemplateHeaderForm');
            const $form = $('#CheckListTemplateHeaderForm');
             
            formData.CheckListTemplateHeaderDTO.CheckListTemplateRowDTO=[];

            if ($form.valid())
            {
                $.ajax({
                    url: $('#CheckListTemplateHeaderEditPostUrl').val(),
                    type: 'POST',
                    headers: {
                          'X-CSRF-TOKEN': csrfToken,
                          'Content-Type': 'application/json'
                    },
                    data: JSON.stringify(formData.CheckListTemplateHeaderDTO),
                    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 = $("#CheckListTemplateHeaderForm");

            $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>
}
