<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="dateUtil" uri="http://egovframework.go.kr/functions/date-util" %>


<!-- Main body -->
<div class="main_body">
    <section id="section8" class="main_bars">
        <div class="bgs-main">
            <section id="section5">
                <div class="sub_title"></div>
                <%--
                일단 주석, 추후 적용 예정
                <button type="button" id="registerBtn" onclick="location.href='<c:url value='/system/loginLog/stats.do'/>'" class="newbtn bg1">통계 보기</button>
                --%>
            </section>
        </div>
    </section>
    <div class="contants_body">
        <div class="gs_b_top">
            <ul class="lef">
                <li class="th">사용자 계정</li>
                <li><input type="text" id="searchUserAcnt" name="userAcnt" class="input"/></li>
                <li class="th">성공 여부</li>
                <li>
                    <select id="searchSuccessYn" name="successYn" class="input">
                        <option value="">전체</option>
                        <option value="Y">성공</option>
                        <option value="N">실패</option>
                    </select>
                </li>
                <li class="th">로그인 일시</li>
                <li>
                    <input type="text" id="searchStartDt" name="searchStartDt" class="input calender datepicker" value="${dateUtil:getCurrentDateAddDays('yyyy-MM-dd',-6)}"/> ~
                    <input type="text" id="searchEndDt" name="searchEndDt" class="input calender datepicker" value="${dateUtil:getCurrentDateTime('yyyy-MM-dd')}" />
                </li>
                <li class="th">접속 디바이스</li>
                <li>
                    <select id="searchDeviceInfo" name="deviceInfo" class="input">
                        <option value="">전체</option>
                        <optgroup label="브라우저">
                            <option value="Chrome Browser">Chrome</option>
                            <option value="Edge Browser">Edge</option>
                            <option value="Safari Browser">Safari</option>
                            <option value="Firefox Browser">Firefox</option>
                            <option value="Opera Browser">Opera</option>
                            <option value="Internet Explorer">Internet Explorer</option>
                        </optgroup>
                        <optgroup label="데스크톱 OS">
                            <option value="Windows 10">Windows 10</option>
                            <option value="Windows 8.1">Windows 8.1</option>
                            <option value="Windows 8">Windows 8</option>
                            <option value="Windows 7">Windows 7</option>
                            <option value="Windows Vista">Windows Vista</option>
                            <option value="Windows XP">Windows XP</option>
                            <option value="Windows">기타 Windows</option>
                            <option value="macOS Catalina">macOS Catalina</option>
                            <option value="macOS Mojave">macOS Mojave</option>
                            <option value="macOS High Sierra">macOS High Sierra</option>
                            <option value="macOS Sierra">macOS Sierra</option>
                            <option value="Mac OS">기타 Mac OS</option>
                            <option value="Linux">Linux</option>
                            <option value="Unix">Unix</option>
                        </optgroup>
                        <optgroup label="모바일 디바이스">
                            <option value="iPhone">iPhone</option>
                            <option value="Samsung Mobile">삼성 모바일</option>
                            <option value="LG Mobile">LG 모바일</option>
                            <option value="Huawei Mobile">화웨이 모바일</option>
                            <option value="Xiaomi Mobile">샤오미 모바일</option>
                            <option value="OPPO Mobile">OPPO 모바일</option>
                            <option value="Vivo Mobile">Vivo 모바일</option>
                            <option value="OnePlus Mobile">OnePlus 모바일</option>
                            <option value="Motorola Mobile">모토로라 모바일</option>
                            <option value="Nokia Mobile">노키아 모바일</option>
                            <option value="Android Mobile">기타 안드로이드 모바일</option>
                            <option value="Windows Phone">윈도우 폰</option>
                            <option value="Mobile Device">기타 모바일</option>
                        </optgroup>
                        <optgroup label="태블릿">
                            <option value="iPad">iPad</option>
                            <option value="Samsung Tablet">삼성 태블릿</option>
                            <option value="Huawei Tablet">화웨이 태블릿</option>
                            <option value="Lenovo Tablet">레노버 태블릿</option>
                            <option value="Asus Tablet">아수스 태블릿</option>
                            <option value="Amazon Tablet">아마존 태블릿</option>
                            <option value="Android Tablet">기타 안드로이드 태블릿</option>
                            <option value="Tablet">기타 태블릿</option>
                        </optgroup>
                    </select>
                </li>
                <li>
                    <button type="button" id="search_btn" class="newbtnss bg1">검색</button>
                </li>
            </ul>
            <ul class="rig2">
                <li>
                    <select id="perPageSelect" class="input">
                        <option value="10">페이지당 10</option>
                        <option value="20">페이지당 20</option>
                        <option value="30">페이지당 30</option>
                    </select>
                    <span class="page_number"><span id="currentPage"></span><span class="bar">/</span><span id="totalPages"></span> Pages</span>
                </li>
            </ul>
        </div>
        <div class="gs_booking">
            <div class="row">
                <div class="col-sm-12">
                    <div class="box_column">
                        <ul class="box_title">
                            <li class="tit">로그인 로그 목록</li>
                        </ul>
                        <div class="containers">
                            <div id="grid"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Main body -->


<!-- 상세 정보 모달 -->
<div id="detailModal" class="modalz">
    <div class="modalz_body">
        <div class="modalz_tit">
            로그인 로그 상세 정보
            <a class="pop-x-btn"></a>
        </div>
        <div class="modalz_con">
            <div class="forms_table_non">
                <table class="detail-table">
                    <tr>
                        <th>로그 ID</th>
                        <td id="detail-logId"></td>
                    </tr>
                    <tr>
                        <th>사용자 ID</th>
                        <td id="detail-userId"></td>
                    </tr>
                    <tr>
                        <th>사용자 계정</th>
                        <td id="detail-userAcnt"></td>
                    </tr>
                    <tr>
                        <th>로그인 시간</th>
                        <td id="detail-loginDttm"></td>
                    </tr>
                    <tr>
                        <th>IP 주소</th>
                        <td id="detail-ipAddr"></td>
                    </tr>
                    <tr>
                        <th>성공 여부</th>
                        <td id="detail-successYn"></td>
                    </tr>
                    <tr>
                        <th>실패 사유</th>
                        <td id="detail-failReason"></td>
                    </tr>
                    <tr>
                        <th>로그인 유형</th>
                        <td id="detail-loginType"></td>
                    </tr>
                    <tr>
                        <th>세션 ID</th>
                        <td id="detail-sessionId"></td>
                    </tr>
                    <tr>
                        <th>사용자 에이전트</th>
                        <td id="detail-userAgent"></td>
                    </tr>
                    <tr>
                        <th>접속 디바이스</th>
                        <td id="detail-deviceInfo"></td>
                    </tr>
                    <tr>
                        <th>등록 일시</th>
                        <td id="detail-regDttm"></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="modalz_foot">
            <a href="#" class="newbtns modalclose">닫기</a>
        </div>
        <div class="dim"></div>
    </div>
</div>

<script type="text/javascript">
/**
 * 로그인 로그 목록 관리 모듈
 * 로그인 로그 목록을 조회하고 관리하는 기능을 제공합니다.
 */
(function(window, $) {
    'use strict';

    var SEARCH_COND = {};

    // 검색정보 셋팅
    var setSearchCond = function() {
        var searchUserAcnt = $.trim(nvl($("#searchUserAcnt").val(), ""));
        var searchSuccessYn = $.trim(nvl($("#searchSuccessYn").val(), ""));
        var searchStartDt = $.trim(nvl($("#searchStartDt").val(), ""));
        var searchEndDt = $.trim(nvl($("#searchEndDt").val(), ""));
        var searchDeviceInfo = $.trim(nvl($("#searchDeviceInfo").val(), ""));

        SEARCH_COND.searchUserAcnt = searchUserAcnt;
        SEARCH_COND.searchSuccessYn = searchSuccessYn;
        SEARCH_COND.searchStartDt = searchStartDt;
        SEARCH_COND.searchEndDt = searchEndDt;
        SEARCH_COND.searchDeviceInfo = searchDeviceInfo;
    };

    /**
     * 로그인 로그 목록 관리 네임스페이스
     */
    var LoginLogList = {
        /**
         * 그리드 관련 객체
         */
        grid: {
            /**
             * 그리드 인스턴스
             */
            instance: null,

            /**
             * 그리드 설정 초기화
             * @returns {Object} 그리드 설정 객체
             */
            initConfig: function() {
                // 데이터 소스 설정
                var dataSource = this.createDataSource();

                // 현재 선택된 perPage 값 가져오기
                var perPage = parseInt($('#perPageSelect').val() || 10, 10);

                // 그리드 설정 객체 생성
                var gridConfig = new XitTuiGridConfig();

                // 기본 설정
                gridConfig.setOptDataSource(dataSource);            // 데이터소스 연결
                gridConfig.setOptGridId('grid');                    // 그리드를 출력할 Element ID
                gridConfig.setOptGridHeight(390);                   // 그리드 높이(단위: px)
                gridConfig.setOptRowHeight(30);                     // 그리드 행 높이(단위: px)
                gridConfig.setOptRowHeaderType('rowNum');           // 행 첫번째 셀 타입(rowNum: 순번, checkbox: 체크박스, '': 출력 안함)
                gridConfig.setOptUseClientSort(false);              // 서버사이드 정렬 false

                // 페이징 옵션 설정
                gridConfig.setOptPageOptions({
                    useClient: false,                               // 클라이언트 페이징 여부(false: 서버 페이징)
                    perPage: perPage                                // 페이지당 표시 건수
                });

                gridConfig.setOptColumns(this.getGridColumns());

                return gridConfig;
            },

            /**
             * 그리드 컬럼 정의
             * @returns {Array} 그리드 컬럼 배열
             */
            getGridColumns: function() {
                return [
                    {
                        header: '로그 ID',
                        name: 'logId',
                        width: 150,
                        align: 'center'
                    },
                    {
                        header: '사용자 계정',
                        name: 'userAcnt',
                        width: 120,
                        align: 'center'
                    },
                    {
                        header: '로그인 시간',
                        name: 'loginDttm',
                        width: 150,
                        align: 'center'
                    },
                    {
                        header: 'IP 주소',
                        name: 'ipAddr',
                        width: 120,
                        align: 'center'
                    },
                    {
                        header: '성공 여부',
                        name: 'successYn',
                        width: 80,
                        align: 'center',
                        formatter: function(props) {
                            if (props.value === 'Y') {
                                return '<span class="badge success">성공</span>';
                            } else if (props.value === 'N') {
                                return '<span class="badge danger">실패</span>';
                            }
                            return props.value;
                        }
                    },
                    {
                        header: '실패 사유',
                        name: 'failReason',
                        align: 'left'
                    },
                    {
                        header: '로그인 유형',
                        name: 'loginType',
                        width: 120,
                        align: 'center'
                    },
                    {
                        header: '접속 디바이스',
                        name: 'deviceInfo',
                        width: 250,
                        align: 'center'
                    }
                ];
            },

            /**
             * 데이터 소스 생성
             * @returns {Object} 데이터 소스 객체
             */
            createDataSource: function() {
                return {
                    api: {
                        readData: {
                            url: '<c:url value="/system/loginLog/list.ajax"/>',
                            method: 'POST',
                            contentType: 'application/x-www-form-urlencoded',
                            processData: true
                        }
                    },
                    initialRequest: true,                           // 초기 데이터 요청 여부
                    serializer: function(params) {
                        // 기본 파라미터 (페이지 정보 등)
                        var defaultParams = $.param(params);
                        // 검색 폼 데이터
                        setSearchCond();
                        var searchParams = $.param(SEARCH_COND);
                        // 모든 파라미터 조합
                        console.log(defaultParams + '&' + searchParams);
                        return defaultParams + '&' + searchParams;
                    }
                };
            },

            /**
             * 그리드 인스턴스 생성
             */
            create: function() {
                var gridConfig = this.initConfig();
                var Grid = tui.Grid;
                this.instance = gridConfig.instance(Grid);

                // 그리드 테마 설정
                Grid.applyTheme('striped');

                // 그리드 이벤트 설정
                this.gridBindEvents();
            },

            /**
             * 그리드 이벤트 바인딩
             */
            gridBindEvents: function() {
                var self = this;

                // 요청 성공 시 총 건수 표시
                this.instance.on('successResponse', function(ev) {
                    var responseObj = JSON.parse(ev.xhr.response);
                    $("#currentPage").text(responseObj.data.pagination.page);
                    $("#totalPages").text(responseObj.data.pagination.totalPages);
                });

                // 행 더블클릭 이벤트
                this.instance.on('dblclick', function(ev) {
                    var rowData = self.instance.getRow(ev.rowKey);
                    if (rowData) {
                        LoginLogList.showDetailModal(rowData.logId);
                    }
                });
            }
        },

        /**
         * 상세 정보 모달 표시
         * @param {number} logId 로그 ID
         */
        showDetailModal: function(logId) {
            $.ajax({
                url: '<c:url value="/system/loginLog/"/>' + logId + '/detail.ajax',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.result) {
                        var data = response.data;
                        $('#detail-logId').text(data.logId);
                        $('#detail-userId').text(data.userId || '-');
                        $('#detail-userAcnt').text(data.userAcnt || '-');
                        $('#detail-loginDttm').text(data.loginDttm || '-');
                        $('#detail-ipAddr').text(data.ipAddr || '-');
                        $('#detail-successYn').text(data.successYn === 'Y' ? '성공' : '실패');
                        $('#detail-failReason').text(data.failReason || '-');
                        $('#detail-loginType').text(data.loginType || '-');
                        $('#detail-sessionId').text(data.sessionId || '-');
                        $('#detail-userAgent').text(data.userAgent || '-');
                        $('#detail-deviceInfo').text(data.deviceInfo || '-');
                        $('#detail-regDttm').text(data.regDttm || '-');

                        $('#detailModal').addClass('act');
                    } else {
                        alert(response.message || '로그 상세 정보를 불러오는데 실패했습니다.');
                    }
                },
                error: function() {
                    alert('로그 상세 정보를 불러오는데 실패했습니다.');
                }
            });
        },

        /**
         * 이벤트 핸들러 설정
         */
        eventBindEvents: function() {
            var self = this;

            // 검색 버튼 클릭 이벤트
            $('#search_btn').on('click', function() {
                // 페이지를 1로 리셋
                $("#page").val(1);
                // 그리드 데이터 리로드
                self.grid.instance.readData(1);
            });

            // 검색어 입력 필드에서 엔터키 이벤트 처리
            $('#schForm input').on('keypress', function(e) {
                if (e.which === 13) { // 엔터키 코드는 13
                    e.preventDefault(); // 기본 이벤트 방지
                    $('#search_btn').trigger('click'); // 검색 버튼 클릭 이벤트 트리거
                }
            });

            // perPage 변경 이벤트 추가
            $('#perPageSelect').on('change', function() {
                var perPage = parseInt($(this).val(), 10);
                // Grid의 perPage 설정 변경 및 데이터 리로드
                self.grid.instance.setPerPage(perPage);
            });

            // 모달 닫기 이벤트 초기화
            initModalClose('detailModal');
        },

        /**
         * 모듈 초기화
         */
        init: function() {
            // 그리드 생성
            this.grid.create();

            // 이벤트 핸들러 설정
            this.eventBindEvents();
        }
    };

    // 페이지 로드 시 초기화
    $(function() {
        LoginLogList.init();
    });

    // 전역 네임스페이스에 모듈 노출
    window.LoginLogList = LoginLogList;

})(window, jQuery);
</script>
