@extends('common.layout')

@section('content')
    <div class="row justify-content-center">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <div class="d-flex">
                            <button id="filterButton" class="btn btn-outline-secondary me-2">
                                미로그인만 보기
                            </button>
                            <select class="form-select" id="location-select" style="max-width : 200px;">
                                @foreach ($dupLocations as $dupData)
                                    <option {{($location->location_idx == $dupData->location_idx) ? "selected" : ""}} value="{{$dupData->location_idx}}">{{$dupData->location_title}}</option>
                                @endforeach
                            </select>
                            <button type="button" onClick="changeLocationIdx();" class="btn btn-primary rounded-0 me-2">
                                검색하기
                            </button>
                            <a href="javascript:void(0);" onClick="getLoginStatusData();" class="btn btn-primary">
                                <i class="mdi mdi-autorenew"></i>
                            </a>
                        </div>
                    </div>
                    <h4 class="page-title-info">[<span>{{$location->location_title}}</span>] 학교담당자 로그인 조회</h4>
                    <span class="load-time"></span>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">

                        <div class="table-responsive">
                            <div class="dataTables_wrapper dt-bootstrap4 no-footer">
                                <!-- S: Table Data -->
                                <div class="row">
                                    <div class="col-sm-12">
                                        <table class="table" id="login-data-table">
                                            <thead>
                                            <th>부스번호. 부스명</th>
                                            <th>학교담당자</th>
                                            <th>로그인 여부</th>
                                            <th>최종로그인시각</th>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!-- E: Table Data -->

                                <!-- S: Pagination -->

                                <!-- E: Pagination -->
                            </div>
                        </div> <!-- end table-responsive-->
                    </div> <!-- end card-body-->
                </div> <!-- end card-->
            </div> <!-- end col-->
        </div>
    </div>
    <!-- end row -->

    </div>
    <style>
        .table-dg {
            --bs-table-active-bg :  #f8d7da !important; /* 배경색 변경 */
            font-weight: bold;
            color: #000000;
        }

        .page-title-info {
            font-size: 18px;
            margin: 0;
            line-height: 75px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: inherit;
        }
    </style>
@endsection

@section('script')

    <script>
        let isRun = false;
        let showOnlyUnlogged = false;
        let location_idx = "{{$location->location_idx}}";

        function getLoginStatusData() {
            if (isRun === false) {
                isRun = true;
                $.ajax({
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    method: 'post',
                    url: '/status/login-status',
                    dataType: 'json',
                    data: {location_idx: `${location_idx}`},
                    success: function (data) {
                        renderLoginStatusTable(data['data']);
                    },
                    error: function (data) {
                        alert(data['responseJSON']['message']);
                    },
                    complete: function () {
                        isRun = false;
                    },
                });
            }
        }

        function renderLoginStatusTable(data) {
            let table = $('#login-data-table tbody');  // 테이블의 tbody 부분 선택
            let location_date = "{{$location->location_date}}";

            table.empty();  // 기존 테이블 내용 비우기

            // JSON 데이터 순회하며 테이블 행 추가
            data.forEach(function (item) {
                let loginDate = new Date(item.fm_last_login_at);
                let loginDataObj = loginDate.toISOString().split('T')[0];
                let rowClass = (location_date === loginDataObj) ? '' : 'table-active table-dg';
                let lastLoginText = item.fm_last_login_at ? item.fm_last_login_at : 'X';
                let statusText = (location_date === loginDataObj) ? '<span>O</span>' : '<span>X</span>';
                if (showOnlyUnlogged && location_date === loginDataObj) {
                    return; // 로그인한 사람은 표시 안 함
                }
                // 행 생성
                let row = $(`<tr class="${rowClass}"></tr>`);
                row.append(`<td>${item.booth_num}. ${item.booth_title}</td>`);
                row.append(`<td>${item.fm_name} (${item.fm_id})</td>`);
                row.append(`<td>${statusText}</td>`);
                row.append(`<td>${lastLoginText}</td>`);

                table.append(row);
            });
            const currentTime = new Date();
            const hours = String(currentTime.getHours()).padStart(2, '0');
            const minutes = String(currentTime.getMinutes()).padStart(2, '0');
            const seconds = String(currentTime.getSeconds()).padStart(2, '0');
            const formattedTime = `${hours}:${minutes}:${seconds}`;

            // 페이지에 새로고침 시간을 표시
            $('.load-time').text(`데이터 갱신 시간: ${formattedTime}`);
        }

        function changeLocationIdx() {
            let selected_val = $("#location-select option:selected").val();
            let selected_text = $('#location-select option:selected').text();

            location_idx = selected_val;
            $(".page-title-info span").text(selected_text);
            getLoginStatusData();
        }

        $(document).ready(function () {
            getLoginStatusData();

            $("#filterButton").click(function () {
                showOnlyUnlogged = !showOnlyUnlogged;  // 필터 토글
                getLoginStatusData();  // 데이터 다시 로드

                // 버튼 텍스트 변경
                $(this).text(showOnlyUnlogged ? "전체 보기" : "미로그인만 보기");
                $(this).toggleClass("btn-outline-secondary btn-danger");
            });
        });
    </script>
@endsection