@extends('admins.layouts.main')
@section('content')
    <link href="{{ asset('/js/admins/global/jquery-ui-1.12.1/jquery-ui.css') }}" rel="stylesheet" type="text/css"></link>
    <link rel="stylesheet" href="{{ asset('/js/admins/global/jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.css') }}">
    <script src="{{ asset('/js/admins/global/jquery-ui-1.12.1/jquery-ui.js') }}"></script>
    <script src="{{ asset('/js/admins/global/jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.js') }}"></script>
    <div class="panel panel-bordered">
        <form id="From" method="get" class="form-horizontal" enctype="multipart/form-data">
            <div class="alert-light alert-dismissible alert-check">
                <div class="row">
                    <div class="p-4 pl-4 col-md-6 col-xl-6 form-title-right">
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label">日期：</label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control dateTarget" name="start_date" placeholder="開始日期" autocomplete="off" value="{{ $start_date }}">
                            </div>
                            <div class="col-lg-4">
                                <input type="text" class="form-control dateTarget" name="end_date" placeholder="結束日期" autocomplete="off" value="{{ $end_date }}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-4 col-form-label"></label>
                            <div class="col-md-8" style="text-align: right">
                                <button id="submit_button" type="submit" class="btn btn-primary" value="">搜尋</button>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 pl-4 col-md-6 col-xl-6 form-title-right">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel">
                <div class="panel-body">
                    <h3 class="panel-title">系統日誌管理列表</h3>
                    <div class="example table-responsive">
                    <table class="table table-hover dataTable table-striped w-full jsgrid">
                        <thead>
                            <tr>
                                <th>操作</th>
                                <th>使用者id</th>
                                <th>帳號</th>
                                <th>頁面</th>
                                <th>結果</th>
                                <th>ip</th>
                                <th>時間</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var datetimepickerParams = {
            dateFormat: 'yy-mm-dd',
            changeYear: true,
            changeMonth: true,
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
            showTimepicker: false,
        };

        $(document).ready(function () {

            $('#submit_button').click(function(){
                let start_date = $('input[name="start_date"]').val();
                let end_date = $('input[name="end_date"]').val();

                if(start_date > end_date){
                    notie.alert({type: 'error', text: '開始時間請勿大於結束時間', time: 2});
                    return false;
                }

                var day1 = new Date(start_date);
                var day2 = new Date(end_date);

                var difference= Math.abs(day2-day1);
                days = difference / (1000 * 3600 * 24);

                if(days > 6){
                    notie.alert({type: 'error', text: '日期區間請勿超過7天', time: 2});
                    return false;
                }
            });

            $(".table").DataTable( {
                "searching": false, // 顯示搜尋
                "processing": true,
                "serverSide": true,
                "ordering": false,
                "autoWidth": false,
                "ajax": {
                    "url": "{{ route('admin.system_management.getSystemUsageLogList') }}",
                    "data": {
                        "start_date": $('input[name="start_date"]').val(),
                        "end_date": $('input[name="end_date"]').val(),
                    },
                },
                "columns": [
                    { "data": "user_id" },
                    { "data": "user_id" },
                    { "data": "account" },
                    { "data": "action" },
                    { "data": "status" },
                    { "data": "ip" },
                    { "data": "created_at" },
                ],
                createdRow:function(row, data){
                    //刪除按鈕
                    var html = `<button data-url="${data.delete_url}" class="btn btn-danger m-3 delete_button"><i class="icon md-delete" aria-hidden="true"></i>刪除</button>`;

                    $(row).find('td:first-child').html(html)
                },
                language: {
                    "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                    "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                    "search": "搜尋:",
                    "lengthMenu": "每頁顯示 _MENU_ 筆",
                    "zeroRecords": "沒有資料",
                    "processing": "處理中...",
                    "loadingRecords": "載入中...",
                    paginate: {
                        first:    '«',
                        previous: '‹',
                        next:     '›',
                        last:     '»'
                    },
                    aria: {
                        paginate: {
                            first:    'First',
                            previous: 'Previous',
                            next:     'Next',
                            last:     'Last'
                        }
                    }
                }
            } );

            //日期插件
            $('.dateTarget').datetimepicker(datetimepickerParams);

            //移除
            $('body').on('click', '.delete_button', function(){

                if(confirm('確定刪除此筆資料?') === false){
                    return false;
                }

                let parameters = {
                    _method:'delete'
                }

                let thisObjectTr = $(this).closest('tr');

                showLoading();
                $.post($(this).data('url'), parameters, function(response){
                    hideLoading();

                    if(response.status){
                        notie.alert({type: 'success', text: response.message, time: 2});
                        thisObjectTr.remove();
                        return false;
                    }

                    notie.alert({type: 'error', text: response.message, time: 2});

                }, 'json');


                return false;
            });
        });
    </script>
@endsection