@extends('admins.layouts.main')
@section('content')
    @include('errors')

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-bordered">
                @can('importLearnLog', App\Models\User::class)
                <div class="panel p-2 form-title-right">
                    <button type="button" class="btn btn-primary waves-effect waves-classic" onclick="$('#importLearnLogModal').modal('show');"><i class="icon md-plus"
                                                                                                                                                aria-hidden="true"></i>
                        更新AED管理員證書效期
                    </button>
                    <a href="{{ url('importTemplate/learnLog.xlsx') }}" class="btn btn-outline-danger" download="更新AED管理員證書效期範例.xlsx">下載更新AED管理員證書效期範例</a>

                </div>
                @endcan
            </div>
        </div>
    </div>
    <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-md-8">
                                <select id="user_role_id" class="form-control" name="user_role_id">
                                    <option value="">全部</option>
                                    @foreach($userRoles as $userRole)
                                        <option value="{{ $userRole->id }}" {{ $request['user_role_id'] == $userRole->id ? 'selected' : null  }}>{{ $userRole->alias }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <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-md-8 ">
                                <input type="text" class="form-control" name="keyword" id="keyword"
                                       placeholder="單位、帳號或姓名" autocomplete="off" value="{{ $request['keyword'] }}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-4 col-form-label"></label>
                            <div class="col-md-8">
                                <button type="button" onclick="resetUrl()" class="btn btn-warning">重設</button>
                                <button type="submit" class="btn btn-primary" value="">搜尋</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="panel">
        <header class="panel-heading">
            <h3 class="panel-title">使用者列表</h3>
        </header>
        <div class="panel-body">
            <div class="fixed-table-toolbar">
                <div class="columns columns-right btn-group float-right">
                    <div class="keep-open btn-group" title="Columns">
                    </div>
                </div>
            </div>
            <table class="table table-hover dataTable table-striped w-full jsgrid">
                <thead>
                <tr>
                    <th>編輯</th>
                    <th>單位</th>
                    <th>角色</th>
                    <th>帳號</th>
                    <th>姓名</th>
                    <th>狀態</th>
                </tr>
                </thead>
                <tbody>
{{--                @foreach($users as $user)--}}
{{--                    <tr>--}}
{{--                        <td>--}}
{{--                            <a href="{{ $user->urls['edit'] }}" class="btn btn-success"><i--}}
{{--                                    class="icon md-edit" aria-hidden="true"></i>編輯</a>--}}
{{--                        </td>--}}
{{--                        <td class="text-middle">{{ $user->department_name }}</td>--}}
{{--                        <td class="text-middle">{{ $user->role_title }}</td>--}}
{{--                        <td class="text-middle">{{ $user->account }}</td>--}}
{{--                        <td class="text-middle">{{ $user->name }}</td>--}}
{{--                        <td class="text-middle">{{ $user->status_chinese }}</td>--}}
{{--                    </tr>--}}
{{--                @endforeach--}}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="importLearnLogModal" tabindex="9" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">匯入學習歷程</h4>
                </div>
                <div class="modal-body">
                    <form id="importLearnLog" action="{{$importLearnLogForms['action']}}" method="{{$importLearnLogForms['method']}}" class="form-horizontal" enctype="multipart/form-data">
                        @csrf
                        <input name="file" type="file">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="importLearnLogBtn" type="button" class="btn btn-primary" data-dismiss="modal">匯入</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {

            $(".dataTable").each(function(){

                $(this).DataTable( {
                    "searching": false, // 顯示搜尋
                    "processing": true,
                    "serverSide": true,
                    "ordering": false,
                    "autoWidth": false,
                    "ajax": {
                        "url": "{{route('admin.user_management.users.getUsersList')}}",
                        "data": {
                            user_role_id: "{{ $_GET['user_role_id'] ?? null }}",
                            keyword: "{{ $_GET['keyword'] ?? null }}",
                        },
                    },
                    "columns": [
                        { "data": "department_name" }, //第一欄使用data中的name
                        { "data": "department_name" },
                        { "data": "role_title" },
                        { "data": "account" },
                        { "data": "name" },
                        { "data": "status_chinese" },
                    ],
                    createdRow:function(row,data,dataIndex,cells){
                        var td = $(row).find('td:first-child');
                        var html = '';
                        html += '<a href="' + data.urls_edit + '" class="btn btn-success m-3"><i class="icon md-edit" aria-hidden="true"></i>編輯</a>';
                        html += '<a href="' + data.urls_show + '" class="btn btn-dark m-3"><i class="icon md-eye" aria-hidden="true"></i>查看</a>';

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

            $('#importLearnLogBtn').click(function(){
                $("#importLearnLog").submit();
            });
        });
    </script>
@endsection