@extends('layouts.app')

@section('sidebar')
    @include('sidebar')
@stop




@section('content')
    <!-- BEGIN: Subheader -->
        <div class="m-subheader ">
            <div class="d-flex align-items-center">
                <div class="mr-auto">
                    <h3 class="m-subheader__title ">All Admin Logs</h3>
                </div>
                <div>
                    <a href="{{ route('admin') }}" class="btn btn-info m-btn m-btn--wide m-btn--air m-btn--custom"><span><i class="la la-arrow-left"></i> <span>Back to Admin list</span></span></a>
                </div>
            </div>
        </div>
        <!-- END: Subheader -->
        <div class="m-content">
            <div class="m-portlet m-portlet--full-height ">
                <div class="m-portlet__body">

                    <!--begin: Search Form -->
                    <form class="m-form m-form--fit m--margin-bottom-20" onsubmit="return false;">
                        <div class="row m--margin-bottom-20">
                            <div class="col-lg-3 m--margin-bottom-10-tablet-and-mobile">
                                <label>Search:</label>
                                <input type="text" class="form-control m-input" placeholder="Search" id="general-search">
                            </div>
                            <div class="col-lg-3 m--margin-bottom-10-tablet-and-mobile">
                                <label>Search In:</label>
                                <select class="form-control m-input" id="column-index">
                                    <option value="-1">All</option>
                                    <option value="1">Name</option>
                                    <option value="2">Client Id</option>
                                    <option value="3">Email</option>
                                    <option value="4">Log</option>
                                    <option value="5">Date</option>
                                </select>
                            </div>

                        </div>

                    </form>
                    <!-- Search End -->

                    <table class="table table-striped- table-bordered table-hover table-checkable" id="all-admin-log">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Admin Name</th>
                                <th>Client ID</th>
                                <th>Email</th>
                                <th>Log</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>



@endsection

@section('script')
{{ Html::script('custom/datatables/datatables.bundle.js') }}
{{ Html::script('custom/eModal/eModal.js') }}
<script type="text/javascript">
    (function($){
        $(document).ready(function () {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var table;
            $('#all-admin-log').each(function() {
                table = $(this).DataTable({
                    'responsive':!0,
                    'searchDelay':500,
                    'processing':!0,
                    "serverSide": true,
                    "ajax": {
                        "url": base_url+"/admin/all-admin-log/{{$id}}",
                        "type": "GET"
                    },
                    "oLanguage": {
                        "sProcessing": '<div class="m-loader m-loader--brand m-loader--left"><span>Please wait...</span></div>',
                    },
                    "order": [[ 0, "desc" ]],
                    "dom":
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'p>>",
                    "aoColumns": [
                        { data: 'id', name: 'id', bSearchable: false, bVisible: false },
                        { data: 'admin_name', name: 'admins.name'},
                        { data: 'client_id', name: 'client_id'},
                        { data: 'email', name: 'users.email'},
                        { data: 'log', name: 'log'},
                        { data: 'created_at', name: 'created_at'},
                    ]
                });
            });

            $('#column-index').on('change', function() {

            var column = $(this).val();
            var data = $("#general-search").val();
                if(data.length == 0){
                    return;
                }else{
                    if(this.value == -1){
                        table.columns().search("").draw();
                        table.search( data ).draw();
                    }
                    else{
                        // Call the API search function
                        table.columns().search("").draw();
                        table.column(column).search( data ).draw();
                    }
                }

            });

            $("#general-search")
            .unbind() // Unbind previous default bindings
            .bind("keyup", function(e) { // Bind our desired behavior
            var data = $(this).val();
            var column = $("#column-index").val();
            // If the length is 3 or more characters, or the user pressed ENTER, search
            if(data.length >= 3 || e.keyCode == 13 || e.keyCode == 8){

                if(column == -1) {
                    table.search(data).draw();
                }else{
                    table.search("").draw();
                    table.column(column).search(data).draw();

                }
            }
            // Ensure we clear the search if they backspace far enough
            if(this.value.length == 0 || column != -1) {
                table.search("").draw();
            }
            });
        });
    })(jQuery);
</script>
@endsection