@using bitforum.Helpers;
@{
    ViewData["Title"] = "별명 변경 내역";

    var data = ViewBag.Data as IEnumerable<dynamic>;
    var total = ViewBag.Total.ToString("N0");
    var pagination = ViewBag.Pagination as Pagination;
    var parameter = ViewBag.Parameter;
}

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

    <partial name="_StatusMessage" />

    <div class="row g-2 mb-2">
        <div class="col-12 col-lg-auto">
            <div class="row g-2">
                <div class="col-auto col-md-auto">
                    <select name="search" id="search" class="form-select">
                        <option value="1" selected="@(parameter.Search == 1)">회원ID</option>
                        <option value="2" selected="@(parameter.Search == 2)">회원 이메일</option>
                        <option value="3" selected="@(parameter.Search == 3)">회원 별명</option>
                        <option value="4" selected="@(parameter.Search == 4)">회원 이전 별명</option>
                        <option value="5" selected="@(parameter.Search == 5)">회원 변경 별명</option>
                    </select>
                </div>
                <div class="col col-md-auto">
                    <input type="search" name="keyword" id="keyword" class="form-control" maxlength="100" value="@parameter.Keyword" />
                </div>
            </div>
        </div>
        <div class="col-12 col-sm">
            <div class="row g-2">
                <div class="col-12 col-md-auto">
                    <div class="row row-cols-2 g-2">
                        <div class="col">
                            <input type="datetime-local" name="start_at" id="startAt" class="form-control" value="@parameter.StartAt" />
                        </div>
                        <div class="col d-none">
                            ~
                        </div>
                        <div class="col">
                            <input type="datetime-local" name="end_at" id="endAt" class="form-control" value="@parameter.EndAt" />
                        </div>
                    </div>
                </div>
                <div class="col col-md-auto text-center">
                    <button type="submit" id="btnSearch" class="btn btn-primary w-100">검색</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-2 align-items-end">
        <div class="col">
            Total : @total
        </div>
        <div class="col text-end">
            <select name="per_page" id="perPage" class="form-select w-auto d-inline-block form-select-sm" form="fAdminList">
                <option value="10" selected="@(parameter.PerPage == 10)">10</option>
                <option value="20" selected="@(parameter.PerPage == 20)">20</option>
                <option value="50" selected="@(parameter.PerPage == 50)">50</option>
                <option value="100" selected="@(parameter.PerPage == 100)">100</option>
            </select>
            <button type="button" id="btnListDelete" class="btn btn-sm btn-danger" form="fAdminList" data-action="/Member/Log/Name/Delete">삭제</button>
        </div>
    </div>

    <form name="f_admin_list" id="fAdminList" method="post" accept-charset="utf-8" autocomplete="off"></form>

    <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover mt-3">
            <colgroup>
                <col width="2%" />
                <col width="2%" />
                <col width="20%" />
                <col width="20%" />
                <col width="*" />
                <col width="13%" />
                <col width="5%" />
            </colgroup>
            <thead>
                <tr>
                    <th><input type="checkbox" id="checkedAll" class="form-check-input" value="1" form="fAdminList" /></th>
                    <th>ID</th>
                    <th>이전 별명</th>
                    <th>변경 별명</th>
                    <th>계정</th>
                    <th>등록일시</th>
                    <th>비고</th>
                </tr>
            </thead>
            <tbody>
                @if (data == null || !data.Any())
                {
                    <tr>
                        <td colspan="7">No Data.</td>
                    </tr>
                }
                else
                {
                    @foreach (var row in data)
                    {
                        <tr>
                            <td>
                                <input type="checkbox" name="ids[]" class="form-check-input list-check-box" value="@row.ID" form="fAdminList" />
                            </td>
                            <td>@row.ID</td>
                            <td>@row.BeforeName</td>
                            <td>@row.AfterName</td>
                            <td>
                                @row.MemberID / @row.Email / @row.Name
                            </td>
                            <td>@row.CreatedAt</td>
                            <td>
                                <a class="btn btn-sm btn-outline-danger btn-row-delete" href="@row.DeleteURL">삭제</a>
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>

        <partial name="_Pagination" model="pagination" />
    </div>
</div>

<script type="module">
    function updateQueryString() {
        let search = $("#search").val();
        let keyword = $("#keyword").val().trim();
        let startAt = $("#startAt").val();
        let endAt = $("#endAt").val();
        let perPage = $("#perPage").val();
        let queryParams = new URLSearchParams();
        queryParams.set("search", search);
        queryParams.set("keyword", keyword);
        queryParams.set("startAt", startAt);
        queryParams.set("endAt", endAt);
        queryParams.set("perPage", perPage);

        window.location.href = window.location.pathname + "?" + queryParams.toString();
     }

    $(document).on("change", "#perPage", function () {
        updateQueryString();
    });

    $(document).on("click", "#btnSearch", function(e) {
        e.preventDefault();
        updateQueryString();
    });

    $(document).on("keydown", "#keyword, #startAt, #endAt", function(e) {
        if (e.which === 13) {
            e.preventDefault();
            updateQueryString();
        }
    });
</script>