@page
@model Admin.Pages.Member.ChatVisitorModel
@{
    ViewData["Title"] = "채팅 접속자";
}

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

    <partial name="_StatusMessage" />

    <form name="f_admin_search" id="fAdminSearch" method="get" accept-charset="utf-8" autocomplete="off">
        <input type="hidden" name="Query.PageNum" value="1" />

        <div class="row g-2 mb-2">
            <div class="col col-lg-auto">
                <div class="row g-2">
                    <div class="col-auto col-md-auto">
                        <select name="Query.Search" class="form-select">
                            <option value="1" selected="@(Model.Query.Search == 1)">회원 PK</option>
                            <option value="2" selected="@(Model.Query.Search == 2)">회원 이메일</option>
                            <option value="3" selected="@(Model.Query.Search == 3)">회원 SID</option>
                        </select>
                    </div>
                    <div class="col col-md-auto">
                        <input type="search" name="Query.Keyword" class="form-control" maxlength="100" value="@Model.Query.Keyword" />
                    </div>
                    <div class="col-auto col-md-auto text-center">
                        <button type="submit" class="btn btn-primary w-100">검색</button>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg text-end">
                <select name="Query.PerPage" class="form-select w-auto d-inline-block">
                    <option value="10" selected="@(Model.Query.PerPage == 10)">10</option>
                    <option value="20" selected="@(Model.Query.PerPage == 20)">20</option>
                    <option value="50" selected="@(Model.Query.PerPage == 50)">50</option>
                    <option value="100" selected="@(Model.Query.PerPage == 100)">100</option>
                </select>
                <button type="button" id="btnListExecute" class="btn btn-danger" data-action="/Member/ChatVisitor?handler=Kick" disabled>강제 종료</button>
            </div>
        </div>
    </form>

    <blockquote class="pt-3 pb-1">
        <small>※ 채팅 접속자는 채팅방(메인/종목/레거시 채널)에 입장 중인 연결을 보여줍니다. 사이트 전체는 <a href="/Member/Visitor">현재 접속자</a>에서 확인하세요.</small><br/>
        <small>※ 검색은 Like이 아닌 = 으로 처리됩니다.</small><br/>
        <small>※ 강제 종료는 해당 연결을 채팅방에서 끊습니다.</small>
    </blockquote>

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

    <ul class="nav nav-tabs mt-3">
        <li class="nav-item">
            <a class="nav-link @(Model.Query.Tab == null ? "active" : null)" href="/Member/ChatVisitor">전체(@Model.TotalRows)</a>
        </li>
        <li class="nav-item">
            <a class="nav-link @(Model.Query.Tab == 1 ? "active" : null)" href="/Member/ChatVisitor?tab=1">정회원(@Model.TotalMember)</a>
        </li>
        <li class="nav-item">
            <a class="nav-link @(Model.Query.Tab == 2 ? "active" : null)" href="/Member/ChatVisitor?tab=2">비회원(@Model.TotalGuest)</a>
        </li>
        <li class="nav-item">
            <a class="nav-link @(Model.Query.Tab == 3 ? "active" : null)" href="/Member/ChatVisitor?tab=3">IP 목록(@Model.TotalIps)</a>
        </li>
    </ul>

    <div class="table-responsive">
        <table class="table table-bordered mt-3">

            @if (Model.Query.Tab != 3) {
                <thead>
                    <tr>
                        <th rowspan="2"><input type="checkbox" id="checkedAll" class="form-check-input" value="1" form="fAdminList" /></th>
                        <th rowspan="2">ID</th>
                        <th colspan="2">Connection ID</th>
                        <th rowspan="2">채팅방</th>
                        <th rowspan="2">IP</th>
                        <th rowspan="2">Browser</th>
                        <th rowspan="2">OS</th>
                        <th rowspan="2">접속 기기</th>
                        <th rowspan="2">접속 일시</th>
                        <th rowspan="2">비고</th>
                    </tr>
                    <tr>
                        <th>회원ID</th>
                        <th>이메일</th>
                    </tr>
                </thead>
                @if (Model.List == null || Model.List.Count <= 0)
                {
                    <tbody>
                        <tr>
                            <td colspan="11">No Data.</td>
                        </tr>
                    </tbody>
                }
                else
                {
                    @foreach (var row in Model.List)
                    {
                    <tbody class="striped">
                        <tr>
                            <td rowspan="2">
                                <input type="checkbox" name="ids[]" class="form-check-input list-check-box" value="@row.ConnectionID" form="fAdminList" />
                            </td>
                            <td rowspan="2">@row.Num</td>
                            <td colspan="2">@row.ConnectionID</td>
                            <td rowspan="2"><span title="@row.RoomKey">@row.RoomName</span></td>
                            <td rowspan="2">@row.IpAddress</td>
                            <td rowspan="2">@row.Browser</td>
                            <td rowspan="2">@row.OS</td>
                            <td rowspan="2">@row.Device</td>
                            <td rowspan="2">@row.ConnectedAt</td>
                            <td rowspan="2">
                                <a class="btn btn-sm btn-outline-danger btn-row-execute" href="@row.LogoutURL">강제 종료</a>
                            </td>
                        </tr>
                        @if (row.IsGuest) {
                            <tr>
                                <td colspan="2">비회원</td>
                            </tr>
                        } else {
                            <tr>
                                <td>@row.MemberID</td>
                                <td>@row.Email</td>
                            </tr>
                        }
                    </tbody>
                    }
                }
            } else {
                <thead>
                    <tr>
                        <th rowspan="2">No</th>
                        <th rowspan="2">접속 일시</th>
                        <th rowspan="2">IP</th>
                        <th rowspan="2">Browser</th>
                        <th rowspan="2">OS</th>
                        <th rowspan="2">접속 기기</th>
                        <th rowspan="2">연결 수</th>
                    </tr>
                </thead>
                @if (Model.List == null || Model.List.Count <= 0)
                {
                    <tbody>
                        <tr>
                            <td colspan="7">No Data.</td>
                        </tr>
                    </tbody>
                }
                else
                {
                    @foreach (var row in Model.List)
                    {
                        <tbody class="striped">
                            <tr>
                                <td>@row.Num</td>
                                <td>@row.ConnectedAt</td>
                                <td>@row.IpAddress</td>
                                <td>@row.Browser</td>
                                <td>@row.OS</td>
                                <td>@row.Device</td>
                                <td>@row.Connections</td>
                            </tr>
                        </tbody>
                    }
                }
            }
        </table>

        <partial name="_Pagination" model="Model.Pagination" />
    </div>
</div>

@section Scripts {
    <script>
        $(document).on("change", "[name='Query.PerPage']", function () {
            document.getElementById("fAdminSearch").submit();
        });
    </script>
}