@extends('system.layouts.app')

@section('title', '計時系統')
@section('name', 'timelog')

@section('css')
    @parent
    <link rel="stylesheet" href="{{ asset('css/v2/datatables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/bootstrap-select.min.css') }}">

    <style>
        .searchTable {
            text-align: right;
        }

        .table>tbody>tr>td {
            vertical-align: middle;
            text-align: -moz-center;
        }

        .btn.disabled,
        .btn:disabled {
            cursor: not-allowed;
        }

        .selectpicker {
            background-color: #212529;
            color: #dee2e6;
        }

        .table {
            --bs-table-bg: none;
        }

        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(255, 255, 255, .05);
        }
    </style>
@stop

@section('content')
    <div class="container-fluid mt-2" style="min-height:calc(100vh-60px) !important">
        <div class="w-100 text-center">
            <h2 class="title">計時系統 </h2>
        </div>
        <div>
            <!-- Date Filter -->
            <div class="d-flex justify-content-start">
                <div>
                    <h2>最新資料</h2>
                </div>
                <!-- 強制校時按鈕 -->
                <div class="ms-3">
                    <button type="button" class="btn btn-sm btn-danger" id="forceTime">強制校時</button>
                </div>

            </div>
            <div class="row justify-content-center">
                <div class="col-12">
                    <table id="nowTable" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="mt-3">
            <!-- Date Filter -->
            <div class="row justify-content-start">
                <div class="col-10">
                    <h2>伺服器端</h2>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-12">
                    <table id="serverlog" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="mt-3">
            <!-- Date Filter -->
            <div class="row justify-content-start">
                <div class="col-10">
                    <h2>設備端</h2>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-12">
                    <table id="clientlog" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

@endsection


@section('js')
    @parent
    <script src="{{ asset('js/v2/datatables.min.js') }}"></script>
    <!-- Latest compiled and minified JavaScript -->
    {{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script> --}}
    <script src="{{ asset('js/bootstrap-select.min.js') }}"></script>
    <script>

        // 強制校時按鈕 post api
        $('#forceTime').on('click', function() {
            Swal.fire({
                title: '強制校時',
                text: '確定要強制校時嗎?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: '確定',
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.post("{{ route('api.itl.forceTime') }}", {
                        type: 'client'
                    }, function(response) {
                        if (response.message == 'success') {
                            Swal.fire({
                                title: '強制校時成功',
                                text: '請稍後重新整理',
                                icon: 'success',
                                showConfirmButton: false,
                                timer: 1500
                            });
                        } else {
                            Swal.fire({
                                title: '強制校時失敗',
                                text: '請稍後再試',
                                icon: 'error',
                                showConfirmButton: false,
                                timer: 1500
                            });
                        }
                    });
                }
            });
        });

        // DataTable 初始化
        $(document).ready(function() {
            $.fn.dataTableExt.sErrMode = 'throw';
            // input 加入時間選擇
            $('input#search_fromdate').datetimepicker({
                format: 'YYYY-MM-DD'
            });
            $('input#search_todate').datetimepicker({
                format: 'YYYY-MM-DD'
            });


            nowTable = $('#nowTable').DataTable({
                "dom": `<'row'<'col-sm-12't>>`,
                // 語系設定 UI介面中文化
                "language": {
                    "processing": "處理中...",
                    "loadingRecords": "載入中...",
                    "lengthMenu": "顯示 _MENU_ 項結果",
                    "zeroRecords": "沒有符合的結果",
                    "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                    "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                    "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                    "infoPostFix": "",
                    "search": "搜尋:",
                    "paginate": {
                        "first": "第一頁",
                        "previous": "上一頁",
                        "next": "下一頁",
                        "last": "最後一頁"
                    },
                    "aria": {
                        "sortAscending": ": 升冪排列",
                        "sortDescending": ": 降冪排列"
                    }
                },
                // 搜尋欄位 是否顯示
                searching: false,
                // searching: true,
                // 處理中 是否顯示
                processing: false,
                //
                serverSide: true,
                // Ajax 取資料
                ajax: {
                    //processcheckStatus =0 未審
                    'url': "{{ route('api.itl.getNow') }}",
                    'data': function(data) {
                        data.type = 'clientsecond';
                    },
                    'error': function() {
                        // violationparkingTable.draw();
                    },
                },
                // 設定不提供排序條件的欄位(例如圖片)
                columnDefs: [{
                        orderable: false,
                        targets: [0, 1, 2, 3, 4, 5, 6]
                    }, {
                        visible: false,
                        targets: []
                    },
                    {
                        className: "dt-center",
                        targets: [0, 1, 2, 3, 4, 5, 6]
                    }
                ],
                order: [

                ],
                // 設定 顯示在Table上的欄位
                columns: [
                    // 格式 data: 後端傳遞過來的 欄位名稱
                    {
                        data: 'to_time',
                        title: '校時對象時間'
                    },
                    {
                        data: 'to_ip',
                        title: '校時對象IP'
                    },
                    {
                        data: 'before_time',
                        title: '本機校時前'
                    },
                    {
                        data: 'this_time',
                        title: '本機校時後'
                    },
                    {
                        data: 'diffsecond',
                        title: '時間誤差(ms)'
                    },
                    {
                        data: 'this_ip',
                        title: '本機IP'
                    },
                    {
                        data: 'name',
                        title: '本機名稱'
                    }

                ],
                initComplete: function() {
                    $('.selectpicker').selectpicker();

                },
                drawCallback: function(settings) {
                    $('.selectpicker').selectpicker();
                    let api = this.api();
                    api.rows().every(function(rowIdx, tableLoop, rowLoop) {
                        let data = this.data();
                        if (data.force_time == 1) { // 获取隐藏列的数据
                            $(this.node()).find('td').css('color', 'yellow');
                        }
                        if (Math.abs(data.diffsecond) > 200) {
                            $(this.node()).find('td').css('color', 'red');
                        }
                        if (data.timeout == 1) {
                            $(this.node()).find('td').css('color', 'red');
                        }

                    });
                }
                // stripeClasses:['striped-odd','striped-even']
            });

            serverlog = $('#serverlog').DataTable({
                "dom": `<'row'<'d-flex justify-content-between mt-2 mb-2' lf<'serverSearch'>>>
                    <'row'<'col-sm-12'tr>>
                    <'row'<'col-sm-12 col-md-12'<'d-flex justify-content-between' ip>>>`,
                "lengthMenu": [
                    [5, 10, 25, 50, 100],
                    [5, 10, 25, 50, 100]
                ], // 設定顯示選項
                // 語系設定 UI介面中文化
                "language": {
                    "processing": "處理中...",
                    "loadingRecords": "載入中...",
                    "lengthMenu": "顯示 _MENU_ 項結果",
                    "zeroRecords": "沒有符合的結果",
                    "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                    "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                    "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                    "infoPostFix": "",
                    "search": "搜尋:",
                    "paginate": {
                        "first": "第一頁",
                        "previous": "上一頁",
                        "next": "下一頁",
                        "last": "最後一頁"
                    },
                    "aria": {
                        "sortAscending": ": 升冪排列",
                        "sortDescending": ": 降冪排列"
                    }
                },
                // 搜尋欄位 是否顯示
                searching: false,
                // searching: true,
                // 處理中 是否顯示
                processing: false,
                //
                serverSide: true,
                // Ajax 取資料
                ajax: {
                    //processcheckStatus =0 未審
                    'url': "{{ route('api.itl.getHistory') }}",
                    'data': function(data) {
                        data.type = 'server';
                        data.searchByFromdate = $('#serverlog_fromdate').val();
                        data.searchByTodate = $('#serverlog_todate').val();
                    },
                    'error': function() {
                        // violationparkingTable.draw();
                    },
                },
                // 設定不提供排序條件的欄位(例如圖片)
                columnDefs: [{
                        orderable: false,
                        targets: [0, 1, 2, 3, 4, 5, 6]
                    }, {
                        visible: false,
                        targets: []
                    },
                    {
                        className: "dt-center",
                        targets: [0, 1, 2, 3, 4, 5, 6]
                    }
                ],
                order: [
                    [3, 'desc']
                ],
                // 設定 顯示在Table上的欄位
                columns: [
                    // 格式 data: 後端傳遞過來的 欄位名稱
                    {
                        data: 'to_time',
                        title: '校時對象時間'
                    },
                    {
                        data: 'to_ip',
                        title: '校時對象IP'
                    },
                    {
                        data: 'before_time',
                        title: '本機校時前'
                    },
                    {
                        data: 'this_time',
                        title: '本機校時後'
                    },
                    {
                        data: 'diffsecond',
                        title: '時間誤差(ms)'
                    },
                    {
                        data: 'this_ip',
                        title: '本機IP'
                    },
                    {
                        data: 'name',
                        title: '本機名稱'
                    }

                ],
                initComplete: function() {
                    $('.selectpicker').selectpicker();
                    // 初始化 serverSearch 該div中包含 一個input日期起 一個input日期訖 一個搜尋按鈕 一個匯出報表按鈕 根據bootstrap5 排版
                    $('.serverSearch').html(`
                        <div class="input-group">
                            <input type="text" class="form-control" id="serverlog_fromdate" placeholder="日期起" aria-label="日期起" aria-describedby="button-addon2">
                            <input type="text" class="form-control" id="serverlog_todate" placeholder="日期訖" aria-label="日期訖" aria-describedby="button-addon2">
                            <button class="btn btn-primary" type="button" id="serverlog-search">搜尋</button>
                            <button class="btn btn-success" type="button" id="serverlog-export">匯出報表</button>
                        </div>
                    `);
                    $('input#serverlog_fromdate').datetimepicker({
                        format: 'YYYY-MM-DD'
                    });
                    $('input#serverlog_todate').datetimepicker({
                        format: 'YYYY-MM-DD'
                    });
                    // 按下搜尋 帶入日期條件
                    $('#serverlog-search').on('click', function() {
                        serverlog.draw();
                    });
                    // 按下匯出報表
                    $('#serverlog-export').on('click', function() {
                        let fromdate = $('#serverlog_fromdate').val();
                        let todate = $('#serverlog_todate').val();
                        let url = "{{ route('api.itl.getHistory') }}";
                        let data = {
                            type: 'server',
                            searchByFromdate: fromdate,
                            searchByTodate: todate,
                            export: 1
                        };
                        // form 回傳的 response.url 是下載連結 請直接下載
                        $.get(url, data, function(response) {
                            // Swal 提示 下載中請稍後
                            Swal.fire({
                                title: '下載中',
                                text: '請稍後',
                                icon: 'info',
                                showConfirmButton: false,
                                timer: 2500
                            });
                            if (response.url) {
                                window.location.href = response.url;
                            }
                        });
                    });

                },
                drawCallback: function(settings) {
                    $('.selectpicker').selectpicker();
                    // 如果 diffsecond > |200| 時 顯示紅色
                    let api = this.api();
                    api.rows().every(function(rowIdx, tableLoop, rowLoop) {
                        let data = this.data();
                        if (data.force_time == 1) { // 获取隐藏列的数据
                            $(this.node()).find('td').css('color', 'yellow');
                        }
                        if (Math.abs(data.diffsecond) > 200) {
                            $(this.node()).find('td').css('color', 'red');
                        }

                    });
                }
                // stripeClasses:['striped-odd','striped-even']
            });

            clientlog = $('#clientlog').DataTable({
                "dom": `<'row'<'d-flex justify-content-between mt-2 mb-2' lf<'clientSearch'>>>
                    <'row'<'col-sm-12'tr>>
                    <'row'<'col-sm-12 col-md-12'<'d-flex justify-content-between' ip>>>`,
                "lengthMenu": [
                    [5, 10, 25, 50, 100],
                    [5, 10, 25, 50, 100]
                ], // 設定顯示選項
                // 語系設定 UI介面中文化
                "language": {
                    "processing": "處理中...",
                    "loadingRecords": "載入中...",
                    "lengthMenu": "顯示 _MENU_ 項結果",
                    "zeroRecords": "沒有符合的結果",
                    "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                    "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                    "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                    "infoPostFix": "",
                    "search": "搜尋:",
                    "paginate": {
                        "first": "第一頁",
                        "previous": "上一頁",
                        "next": "下一頁",
                        "last": "最後一頁"
                    },
                    "aria": {
                        "sortAscending": ": 升冪排列",
                        "sortDescending": ": 降冪排列"
                    }
                },
                // 搜尋欄位 是否顯示
                searching: false,
                // searching: true,
                // 處理中 是否顯示
                processing: false,
                //
                serverSide: true,
                // Ajax 取資料
                ajax: {
                    //processcheckStatus =0 未審
                    'url': "{{ route('api.itl.getHistory') }}",
                    'data': function(data) {
                        data.type = 'clientsecond';
                        data.searchByFromdate = $('#clientlog_fromdate').val();
                        data.searchByTodate = $('#clientlog_todate').val();
                        data.name = $('#clientlog_serialnumber').val();
                    },
                    'error': function() {
                        // violationparkingTable.draw();
                    },
                },
                // 設定不提供排序條件的欄位(例如圖片)
                columnDefs: [{
                        orderable: false,
                        targets: [0, 1, 2, 3, 4, 5, 6]
                    }, {
                        visible: false,
                        targets: []
                    },
                    {
                        className: "dt-center",
                        targets: [0, 1, 2, 3, 4, 5, 6]
                    }
                ],
                order: [
                    [3, 'desc']
                ],
                // 設定 顯示在Table上的欄位
                columns: [
                    // 格式 data: 後端傳遞過來的 欄位名稱
                    {
                        data: 'to_time',
                        title: '校時對象時間'
                    },
                    {
                        data: 'to_ip',
                        title: '校時對象IP'
                    },
                    {
                        data: 'before_time',
                        title: '本機校時前'
                    },
                    {
                        data: 'this_time',
                        title: '本機校時後'
                    },
                    {
                        data: 'diffsecond',
                        title: '時間誤差(ms)'
                    },
                    {
                        data: 'this_ip',
                        title: '本機IP'
                    },
                    {
                        data: 'name',
                        title: '本機名稱'
                    },
                    {
                        data: 'force_time',
                        title: '強制校時',
                        visible: false
                    }

                ],
                initComplete: function() {
                    $('.clientSearch').html(`
                        <div class="input-group">
                            <select class="selectpicker form-control" id="clientlog_serialnumber" data-style="btn-dark border" data-live-search="true" title="請選擇設備" data-width="auto">
                                @if (isset($equipment))
                                    @foreach ($equipment as $item)
                                        <option value="{{ $item->name }}">{{ $item->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                            <input type="text" class="form-control" id="clientlog_fromdate" placeholder="日期起" aria-label="日期起" aria-describedby="button-addon2">
                            <input type="text" class="form-control" id="clientlog_todate" placeholder="日期訖" aria-label="日期訖" aria-describedby="button-addon2">
                            <button class="btn btn-primary" type="button" id="clientlog-search">搜尋</button>
                            <button class="btn btn-success" type="button" id="clientlog-export">匯出報表</button>
                        </div>
                    `);
                    $('.selectpicker').selectpicker();
                    $('input#clientlog_fromdate').datetimepicker({
                        format: 'YYYY-MM-DD'
                    });
                    $('input#clientlog_todate').datetimepicker({
                        format: 'YYYY-MM-DD'
                    });
                    // 按下搜尋 帶入日期條件
                    $('#clientlog-search').on('click', function() {
                        clientlog.draw();
                    });
                    // 按下匯出報表
                    $('#clientlog-export').on('click', function() {
                        let fromdate = $('#clientlog_fromdate').val();
                        let todate = $('#clientlog_todate').val();
                        let url = "{{ route('api.itl.getHistory') }}";
                        let data = {
                            type: 'clientsecond',
                            searchByFromdate: fromdate,
                            searchByTodate: todate,
                            export: 1,
                            name: $('#clientlog_serialnumber').val()
                        };
                        // form 回傳的 response.url 是下載連結 請直接下載
                        $.get(url, data, function(response) {
                            // Swal 提示 下載中請稍後
                            Swal.fire({
                                title: '下載中',
                                text: '請稍後',
                                icon: 'info',
                                showConfirmButton: false,
                                timer: 2500
                            });
                            if (response.url) {
                                window.location.href = response.url;
                            }
                        });
                    });
                },
                drawCallback: function(settings) {
                    $('.selectpicker').selectpicker();
                    // 如果 response aaData 的 force_time = 1 時 顯示黃色，表示強制校時
                    let api = this.api();
                    api.rows().every(function(rowIdx, tableLoop, rowLoop) {
                        let data = this.data();
                        if (data.force_time == 1) { // 获取隐藏列的数据
                            $(this.node()).find('td').css('color', 'yellow');
                        }
                        if (Math.abs(data.diffsecond) > 200) {
                            $(this.node()).find('td').css('color', 'red');
                        }

                    });
                }
                // stripeClasses:['striped-odd','striped-even']
            });
        });
        setInterval(function() {
            nowTable.ajax.reload(null, false);
            serverlog.ajax.reload(null, false);
            clientlog.ajax.reload(null, false);
        }, 5000); // 5000毫秒 = 5秒
    </script>
@stop