@extends('admin.templates.layout')
@section('head')
    <link rel="stylesheet" href="{{ asset("admin_assets/assets/css/jquery.dataTables.min.css") }}">
@endsection
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card" id="orderList">
                <div class="card-header border-0">
                    <div class="row align-items-center gy-3">
                        <div class="col-sm">
                            <h5 class="card-title mb-0">Login Tracks</h5>
                        </div>
                        <div class="col-sm-auto">
                            
                        </div>
                    </div>
                </div>
                <div class="card-body border border-dashed border-end-0 border-start-0">
                    <form>
                        <div class="row g-3">
                            <div class="col-xxl-5 col-sm-6">
                                <div class="search-box">
                                    <input type="text" class="form-control search" placeholder="Search for Name or Email" id="search_table">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                            </div>
                            <!--end col-->
                        </div>
                        <!--end row-->
                    </form>
                </div>
                <div class="card-body pt-0 mt-4">
                    <div>

                        <div class="table-responsive table-card mb-1" >
                            <table class="table table-nowrap align-middle" id="CustomersTable">
                                <thead class="text-muted table-light">
                                <tr class="text-uppercase">
                                    <th>Sl No</th>
                                    <th>User</th>
                                    <th>Ip Address</th>
                                    <th>Type</th>
                                    <th>Created Date</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>

                </div>
            </div>

        </div>
        <!--end col-->
    </div>
@stop

@section('script')
    <script src="{{ asset("admin_assets/assets/js/jquery.dataTables.min.js") }}"></script>

    <script>
        jQuery(document).ready(function(){
            var table = $('#CustomersTable').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                searching: false, // Disable the default search box
                ajax: {
                    url: "{{ route('admin.logs.list') }}",
                    type:'GET',
                    data: function(d) {
                        d.search.value = $('#search_table').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', className: 'text-center' },
                    { data: 'name', name: 'name', orderable: false, searchable: true, className: 'text-center', searchable: false },
                    { data: 'ip_address', name:'ip_address', className: 'text-center', orderable: false, searchable: false },
                    { data: 'action', name:'action', className: 'text-center', searchable: false },
                    { data: 'format_created_at', name: 'created_at', searchable: false, className: 'text-center'},
                ],
                columnDefs: [{
                    targets: 0,
                    searchable: false,
                    orderable: false,
                }],
                order: [[4, 'desc']],
                pageLength: 10
            });
            $('#search_table').on('keyup', function() {
                // Trigger the search for DataTable using the external input value
                table.draw();
            });

            

            
        });
    </script>
@stop