@page
@model Admin.Pages.Store.GameCategoryModel
@{
    ViewData["Title"] = "게임 카테고리";
}

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

    <partial name="_StatusMessage" />

    <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-bordered table-hover mt-3">
            <caption>
                게임에 연결된 카테고리는 삭제할 수 없습니다.<br />
                삭제하려면 해당 게임의 카테고리 선택을 먼저 해제해주세요.
            </caption>
            <colgroup>
                <col style="width: 5%;" />
                <col />
                <col />
                <col style="width: 8%;" />
                <col style="width: 8%;" />
                <col style="width: 6%;" />
                <col />
                <col />
                <col style="width: 8%;" />
            </colgroup>
            <thead>
                <tr class="text-center">
                    <th>ID</th>
                    <th>한글명</th>
                    <th>영문명</th>
                    <th>게임 수</th>
                    <th>순서</th>
                    <th>사용</th>
                    <th>등록일시</th>
                    <th>수정일시</th>
                    <th>비고</th>
                </tr>
            </thead>
            <tbody id="rows">
                @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.GameCount > 0 ? "text-white bg-danger" : "")" value="@row.Num" />
                                <input type="hidden" name="request[@index].ID" readonly required form="fAdminWrite" value="@row.ID" />
                            </td>
                            <td>
                                <input type="text" name="request[@index].KorName" class="form-control" maxlength="100" required form="fAdminWrite" value="@row.KorName" />
                            </td>
                            <td>
                                <input type="text" name="request[@index].EngName" class="form-control" maxlength="100" form="fAdminWrite" value="@row.EngName" />
                            </td>
                            <td class="text-center align-middle">@row.GameCount</td>
                            <td>
                                <input type="number" name="request[@index].Order" class="form-control" min="-9999" max="9999" 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" readonly class="form-control-plaintext text-center" form="fAdminWrite" value="@row.CreatedAt" /></td>
                            <td><input type="text" 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 $rows = $("#rows");
            let total = Number(@Model.Total);

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

                let tableRow = `
                    <tr>
                        <td>-</td>
                        <td>
                            <input type="text" name="request[${total}].KorName" class="form-control" maxlength="100" required form="fAdminWrite" />
                        </td>
                        <td>
                            <input type="text" name="request[${total}].EngName" class="form-control" maxlength="100" form="fAdminWrite" />
                        </td>
                        <td class="text-center align-middle">-</td>
                        <td>
                            <input type="number" name="request[${total}].Order" class="form-control" min="-9999" max="9999" required form="fAdminWrite" value="0" />
                        </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>
                `;

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

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

                if (total <= 0) {
                    $rows.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()) {
                        form.submit();
                    } else {
                        form.reportValidity();
                    }
                }
                return false;
            });

            function recalculateIndices() {
                $rows.find("tr").each(function(index, tr) {
                    $(tr).find("input, label").each(function() {
                        let name = $(this).attr("name");
                        let id = $(this).attr("id");
                        let labelFor = $(this).attr("for");

                        if (name) {
                            $(this).attr("name", name.replace(/\[\d+\]/, `[${index}]`));
                        }
                        if (id) {
                            $(this).attr("id", id.replace(/_\d+_/, `_${index}_`));
                        }
                        if (labelFor) {
                            $(this).attr("for", labelFor.replace(/_\d+_/, `_${index}_`));
                        }
                    });
                });
            }
        });
    </script>
}