dpot-backend/Admin/Pages/Faq/Category.cshtml

@page
@model Admin.Pages.Faq.CategoryModel
@{
    ViewData["Title"] = "FAQ 분류";
}

<div class="container-fluid">
    <h3>@ViewData["Title"]</h3>
    <hr />

    <partial name="_StatusMessage" />
    <partial name="_NavTabs" />

    <div class="row g-2 align-items-end mt-2">
        <div class="col">
            Total : @Model.Total
        </div>
        <div class="col text-end">
            <button type="button" id="btnAdd" class="btn btn-primary" form="fAdminWrite">추가</button>
            <button type="submit" id="btnSave" class="btn btn-success" form="fAdminWrite">저장</button>
        </div>
    </div>

    <div class="table-responsive">
        <form id="fAdminWrite" method="post" accept-charset="utf-8" autocomplete="off"></form>

        <table class="table table-striped table-bordered table-hover mt-3">
            <caption>
                FAQ 분류에 등록된 FAQ 가 있다면 삭제가 불가합니다.<br />
                FAQ 분류를 삭제하려면 해당 FAQ 를 먼저 삭제해주세요.
            </caption>
            <colgroup>
                <col style="width: 5%;" />
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
            </colgroup>
            <thead>
                <tr class="text-center">
                    <th>ID</th>
                    <th>Code</th>
                    <th>분류 명</th>
                    <th>FAQ 수</th>
                    <th>순서</th>
                    <th>사용</th>
                    <th>등록일시</th>
                    <th>수정일시</th>
                    <th>비고</th>
                </tr>
            </thead>
            <tbody id="categories">
                @if (Model.List == null || Model.List.Count <= 0)
                {
                    <tr>
                        <td colspan="9">No Data.</td>
                    </tr>
                }
                else
                {
                    @foreach (var row in Model.List)
                    {
                        var index = row.Index;

                        <tr>
                            <td>
                                <input type="text" readonly class="form-control-plaintext text-center @(row.FaqItemRows > 0 ? "text-white bg-danger" : "")" value="@row.Num" />
                                <input type="hidden" name="request[@index].ID" readonly class="form-control-plaintext text-center" required form="fAdminWrite" value="@row.ID" />
                            </td>
                            <td>
                                <input type="text" name="request[@index].Code" class="form-control" maxlength="30" required form="fAdminWrite" value="@row.Code" />
                            </td>
                            <td>
                                <input type="text" name="request[@index].Subject" class="form-control" maxlength="255" required form="fAdminWrite" value="@row.Subject" />
                            </td>
                            <td>@row.FaqItemRows</td>
                            <td>
                                <input type="number" name="request[@index].Order" class="form-control" min="-999" max="999" required form="fAdminWrite" value="@row.Order" />
                            </td>
                            <td>
                                <div class="form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="request_@(index)_IsActive" name="request[@index].IsActive" checked="@Model.Data[index].IsActive" form="fAdminWrite" value="true" />
                                    <label class="form-check-label" for="request_@(index)_IsActive">
                                        사용
                                    </label>
                                </div>
                            </td>
                            <td><input type="text" name="request[@index].CreatedAt" readonly class="form-control-plaintext text-center" form="fAdminWrite" value="@row.CreatedAt" /></td>
                            <td><input type="text" name="request[@index].UpdatedAt" readonly class="form-control-plaintext text-center" form="fAdminWrite" value="@row.UpdatedAt" /></td>
                            <td>
                                <button type="button" class="btn btn-sm btn-danger btn-delete">삭제</button>
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
    </div>
</div>

@section Scripts {
    <script>
        $(function() {
            let $categories = $("#categories");
            let total = Number(@Model.Total);

            // 추가
            $(document).on("click", "#btnAdd", function() {
                if (total <= 0) {
                    $categories.empty();
                }

                let tableRow = `
                    <tr>
                        <td>-</td>
                        <td>
                            <input type="text" name="request[${total}].Code" class="form-control" maxlength="30" required form="fAdminWrite" />
                        </td>
                        <td>
                            <input type="text" name="request[${total}].Subject" class="form-control" maxlength="255" required form="fAdminWrite" />
                        </td>
                        <td>-</td>
                        <td>
                            <input type="number" name="request[${total}].Order" class="form-control" min="-999" max="999" required form="fAdminWrite" />
                        </td>
                        <td>
                            <div class="form-check-inline">
                                <input class="form-check-input" type="checkbox" id="request_${total}_IsActive" name="request[${total}].IsActive" checked form="fAdminWrite" value="true" />
                                <label class="form-check-label" for="request_${total}_IsActive">
                                    사용
                                </label>
                            </div>
                        </td>
                        <td>-</td>
                        <td>-</td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm btn-delete">삭제</button>
                        </td>
                    </tr>
                `;

                $categories.append(tableRow);
                total++;
                recalculateIndices();
            });

            // 삭제
            $(document).on("click", "button.btn-delete", function(e) {
                e.target.closest("tr").remove();
                total--;

                if (total <= 0) {
                    $categories.append(
                        `<tr><td colspan="9">No Data.</td></tr>`
                    );
                    total = 0;
                 } else {
                    recalculateIndices();
                 }
            });

            // 저장
            $(document).on("click", "#btnSave", function() {
                 if (confirm("저장 하시겠습니까?")) {
                    let form = document.getElementById("fAdminWrite");
                      if (form.checkValidity()) { // HTML5 폼 검증 수행
                        form.submit();
                    } else {
                        form.reportValidity();
                    }
                }
                return false;
            });

            // 인덱스 재계산 함수
            function recalculateIndices() {
                $categories.find("tr").each(function(index, tr) {
                    $(tr)
                        .find("input, label")
                        .each(function() {
                            let name = $(this).attr("name");
                            let id = $(this).attr("id");

                            if (name) {
                                $(this).attr("name", name.replace(/\[\d+\]/, `[${index}]`));
                            }

                            if (id) {
                                $(this).attr("id", id.replace(/_\d+_/, `_${index}_`));
                            }
                        });

                    // 인덱스 기반으로 라벨의 `for` 속성도 수정
                    $(tr)
                        .find("label")
                        .each(function() {
                            let labelFor = $(this).attr("for");
                            if (labelFor) {
                                $(this).attr("for", labelFor.replace(/_\d+_/, `_${index}_`));
                            }
                        });
                });
            }
        });
    </script>
}