@using bitforum.Helpers;
@using bitforum.Constants
@{
    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 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" id="keyword" class="form-control" maxlength="100" value="@parameter.Keyword" />
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-auto">
            <div class="row row-cols-2 g-2">
                <div class="col">
                    <input type="datetime-local" id="startAt" class="form-control" value="@parameter.StartAt" />
                </div>
                <div class="col d-none">
                    ~
                </div>
                <div class="col">
                    <input type="datetime-local" id="endAt" class="form-control" value="@parameter.EndAt" />
                </div>
            </div>
        </div>
    </div>
    <div class="row g-2 mb-2">
        <div class="col-12 col-sm">
            <div class="row g-2">
                <div class="col-12 col-md-auto">
                    <div class="row g-3 align-items-center">
                        <div class="col-auto">
                            <label class="col-form-label">성별</label>
                        </div>
                        <div class="col">
                            <div class="form-check form-check-inline">
                                <input type="checkbox" name="gender" id="male" class="form-check-input" value="@Gender.Male" checked="@(parameter.Gender == @Gender.Male)" />
                                <label for="male" class="form-check-label">남자</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="checkbox" name="gender" id="female" class="form-check-input" value="@Gender.Female" checked="@(parameter.Gender == @Gender.Female)" />
                                <label for="female" class="form-check-label">여자</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-auto align-self-center">
                    <div class="row g-2">
                        <div class="col-auto">
                            <div class="form-check form-check-inline">
                                <input type="checkbox" id="isEmailVerified" class="form-check-input" value="1"  checked="@(parameter.IsEmailVerified == 1)" />
                                <label for="isEmailVerified" class="form-check-label">이메일 인증</label>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-check form-check-inline">
                                <input type="checkbox" id="isAuthCertified" class="form-check-input" value="1"  checked="@(parameter.IsAuthCertified == 1)" />
                                <label for="isAuthCertified" class="form-check-label">본인 인증</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-center mt-3">
        <div class="col col-sm-auto">
            <button type="submit" id="btnSearch" class="btn btn-primary w-100" >검색</button>
        </div>
    </div>

    <hr/>

    <div class="row g-2 align-items-end mb-3">
        <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"  data-action="/Member/List/Delete">삭제</button>
            <a class="btn btn-sm btn-success" href="/Member/List/Write">추가</a>
        </div>
    </div>

    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link @(parameter.Tab == 0 ? "active" : null)" href="/Member/List?tab=0">전체</a>
        </li>
        <li class="nav-item">
            <a class="nav-link @(parameter.Tab == 1 ? "active" : null)" href="/Member/List?tab=1">차단</a>
        </li>
        <li class="nav-item">
            <a class="nav-link @(parameter.Tab == 2 ? "active" : null)" href="/Member/List?tab=2">탈퇴</a>
        </li>
        <li class="nav-item">
            <a class="nav-link @(parameter.Tab == 3 ? "active" : null)" href="/Member/List?tab=3">GM</a>
        </li>
    </ul>

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

    <div class="table-responsive">
        <table class="table table-bordered mt-3">
            <colgroup>
                <col width="5%"/>
                <col width="10%"/>
                <col width="10%"/>
                <col width="7%"/>
                <col width="7%"/>
                <col width="10%"/>
                <col width="10%"/>
                <col width="*"/>
                <col width="8%"/>
                <col width="5%"/>
                <col width="11%"/>
            </colgroup>
            <thead>
                <tr>
                    <th rowspan="2">ID</th>
                    <th colspan="2">
                        <div class="form-check-inline">
                            <input type="checkbox" id="checkedAll" class="form-check-input" value="1" form="fAdminList" />
                            <label for="checkedAll">이메일</label>
                        </div>
                    </th>
                    <th>생년월일</th>
                    <th>Coin</th>
                    <th>구독자</th>
                    <th>연락처</th>
                    <th rowspan="2">인증/본인/차단/탈퇴</th>
                    <th>최종 접속</th>
                    <th>가입 일시</th>
                    <th rowspan="2">비고</th>
                </tr>
                <tr>
                    <th>이름</th>
                    <th>별명</th>
                    <th>성별</th>
                    <th>Exp</th>
                    <th>구독 중</th>
                    <th>등급</th>
                    <th>로그인 IP</th>
                    <th>수정 일시</th>
                </tr>
            </thead>
            @if (data == null || !data.Any())
            {
                <tbody>
                    <tr>
                        <td colspan="11">No Data.</td>
                    </tr>
                </tbody>
            }
            else
            {
                @foreach (var row in data)
                {
                    <tbody class="striped">
                        <tr>
                            <td rowspan="2">@row.ID</td>
                            <td colspan="2">
                                <div class="form-check-inline">
                                    <input type="checkbox" name="ids[]" id="chk_@row.ID" class="form-check-input list-check-box" value="@row.ID" form="fAdminList" />
                                    <label for="chk_@row.ID" class="form-check-inline">@row.Email</label>
                                </div>
                            </td>
                            <td>@row.Gender</td>
                            <td>@row.Coin</td>
                            <td>@row.Followed</td>
                            <td>@row.Phone</td>
                            <td rowspan="2">
                                <input type="checkbox" readonly disabled checked="@row.IsEmailVerified" />
                                <input type="checkbox" readonly disabled checked="@row.IsAuthCertified" />
                                <input type="checkbox" readonly disabled checked="@row.IsDenied" />
                                <input type="checkbox" readonly disabled checked="@row.IsWithdraw" />
                            </td>
                            <td>@(row.LastLoginAt ?? '-')</td>
                            <td>@row.CreatedAt</td>
                            <td rowspan="2">
                                <div class="d-xl-flex gap-2 justify-content-center d-grid">
                                    <a class="btn btn-sm btn-outline-secondary" href="@row.ApproveURL">승인</a>
                                    <a class="btn btn-sm btn-outline-info" href="@row.EditURL">수정</a>
                                    <a class="btn btn-sm btn-outline-danger btn-row-delete" href="@row.DeleteURL">삭제</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>@(row.FullName ?? '-')</td>
                            <td>
                                @if (!string.IsNullOrEmpty(row.Icon))
                                {
                                    <img src="@row.Icon" class="img-thumbnail me-2" alt="@row.Name" />
                                }
                                @(row.Name ?? '-')
                            </td>
                            <td>@row.Birthday</td>
                            <td>@row.Exp</td>
                            <td>@row.Following</td>
                            <td>@(row.GradeName ?? '-')</td>
                            <td>@(row.LastLoginIp ?? '-')</td>
                            <td>@(row.UpdatedAt ?? '-')</td>
                        </tr>
                    </tbody>
                }
            }
        </table>

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

@section Scripts {
    <script>
        function updateQueryString() {
            let queryParams = new URLSearchParams();
            const gender = $("[name='gender']:checked").val();

            queryParams.set("search", document.getElementById("search").value);
            queryParams.set("keyword", document.getElementById("keyword").value);
            queryParams.set("startAt", document.getElementById("startAt").value);
            queryParams.set("endAt", document.getElementById("endAt").value);
            queryParams.set("perPage", document.getElementById("perPage").value);

            if (gender) {
                queryParams.set("gender", $("[name='gender']:checked").val());
            }

            queryParams.set("isEmailVerified", Number(document.getElementById("isEmailVerified").checked));
            queryParams.set("isAuthCertified", Number(document.getElementById("isAuthCertified").checked));
            queryParams.set("tab", @parameter.Tab);

            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("keyup", "#keyword, #startAt, #endAt", function(e) {
            if (e.which === 13 || e.key === "Enter") {
                e.preventDefault();
                updateQueryString();
            }
        });
    </script>
}