@extends('system.layouts.app')

@section('title', '操作紀錄')
@section('name', 'user.log')

@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">
            <h2 class="title">操作紀錄</h2>
        </div>
        <div>
            <!-- Date Filter -->
            <div class="row justify-content-center">
                <div class="col-10">
                    <table>
                        <tr>
                            <td>日期：</td>
                            <td style="position: relative;">
                                <input type='text' id='search_fromdate' class="form-control date searchColumns"
                                    placeholder='起' value="">
                            </td>
                            <td style="position: relative;">
                                <input type='text' id='search_todate' class="form-control date searchColumns"
                                    placeholder='訖' value="">
                            </td>
                            <td>使用者：</td>
                            <td>
                                <select id="username" class="form-control selectpicker searchColumns" title="選擇使用者"
                                    data-style="btn-dark border" data-container="body" data-dropdown-align-right="auto"
                                    multiple>
                                    @foreach ($users as $item)
                                        <option value="{{ $item->user_name }}">{{ $item->user_name }}
                                        </option>
                                    @endforeach
                                </select>
                                {{-- <input type='text' id='location' class="form-control searchColumns" placeholder='地點'> --}}
                            </td>

                            <td>操作：</td>
                            <td>
                                <select id="action_detail" class="form-control selectpicker searchColumns" title="選擇操作"
                                    data-style="btn-dark border" data-container="body" data-dropdown-align-right="auto"
                                    multiple>
                                    @foreach ($actionDetails as $item)
                                        <option value="{{ $item->action_detail }}">{{ $item->action_detail }}
                                        </option>
                                    @endforeach
                                </select>
                                {{-- <input type='text' id='location' class="form-control searchColumns" placeholder='地點'> --}}
                            </td>
                            <td class="ps-2">
                                <input type='button' id="btn_search" class="form-control " value="搜尋">
                            </td>
                            <td class="ps-2">
                                <input type='button' id="btn_clear" class="form-control " value="清除">
                            </td>
                            <td class="ps-2">
                                <input type='button' id="btn_export" class="form-control " value="匯出">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-12">
                    <table id="logTable" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th width='50'>編號</th>
                                <th width='80'>操作時間</th>
                                <th width='90'>使用者名稱</th>
                                <th width='90'>IP</th>
                                <th width='120'>動作</th>
                                <th width='100'>操作說明</th>
                            </tr>
                        </thead>
                        <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>
        let logTable = $('#logTable')


        function changeUnreport(element) {
            // $('.slide-link[data-slide="0"]').addClass('active'); 範例 取data-value
            let id = element.getAttribute("data-vioId");
            let unreportreason = $('#handleunreport_' + id).val();
            let btn_report = $('.btn-update-photo[data-vioId="' + id + '"]');
            let btn_unreport = $('.btn-delete-photo[data-vioId="' + id + '"]');
            // console.log(btn_report,btn_unreport);
            if (unreportreason === "") {
                btn_report.removeClass("disabled");
                btn_unreport.addClass("disabled");
            } else {
                btn_report.addClass("disabled");
                btn_unreport.removeClass("disabled");
            }
        }

        // 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'
            });


            logTable = $('#logTable').DataTable({
                "dom": "<'row'<'col-sm-12 col-md-6'li><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-12'p>>",
                // 語系設定 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: true,
                //
                serverSide: true,
                // Ajax 取資料
                ajax: {
                    //processcheckStatus =0 未審
                    'url': "{{ route('api.setting.log') }}",
                    'data': function(data) {
                        // 讀取搜尋值
                        let from_date = $('#search_fromdate').val();
                        let to_date = $('#search_todate').val();
                        let action_detail = $('#action_detail').val();
                        let username = $('#username').val();
                        let processcheckStatus = 0;
                        // 放入data 讓ajax送出
                        data.searchByFromdate = from_date;
                        data.searchByTodate = to_date;
                        data.action_detail = action_detail;
                        data.username = username;
                        // console.log(data);
                    },
                    'error': function() {
                        // logTable.draw();
                    },
                },
                // 設定不提供排序條件的欄位(例如圖片)
                columnDefs: [{
                        orderable: false,
                        targets: [0,4]
                    }, {
                        visible: false,
                        targets: []
                    },
                    {
                        className: "dt-center",
                        targets: [0, 1, 2, 3, 4]
                    }
                ],
                order: [
                    [1, "desc"]
                ],
                // 設定 顯示在Table上的欄位
                columns: [
                    // 格式 data: 後端傳遞過來的 欄位名稱
                    {
                        data: 'id',
                    },
                    {
                        data: 'created_at',
                    },
                    {
                        data: 'user_name'
                    },
                    {
                        data: 'ip'
                    },
                    {
                        data: 'action_detail'
                    },
                    {
                        data: 'remark'
                    }
                ],
                initComplete: function() {
                    $('.selectpicker').selectpicker();

                },
                drawCallback: function(settings) {
                    $('.selectpicker').selectpicker();
                }
                // stripeClasses:['striped-odd','striped-even']
            });

            // Search button
            $('#btn_search').click(function() {
                logTable.draw();
            });
            $('#btn_clear').click(function() {
                $('input.searchColumns').val("");
                $('select.searchColumns').val("");
                logTable.draw();
            });

            $('#btn_export').click(function() {
                $.ajax({
                    url: "{{ route('api.system.log.export') }}",
                    method: 'post',
                    data: {
                        searchByFromdate: $('#search_fromdate').val(),
                        searchByTodate: $('#search_todate').val(),
                        action_detail: $('#action_detail').val(),
                        username: $('#username').val(),
                        export: 1
                    },
                    success: function(res) {
                        // console.log(res)
                        if (res.status == 0) {
                            alert(res.msg)
                        } else {
                            window.location.href = res.url
                        }
                    },
                    error: function(res) {
                        console.log(res)
                    }
                })
            });

        });
    </script>
@stop