@extends('admin.layouts.masterlayout')

@section('title')
    Security & Audit Logs
@endsection

@section('head_title')
    Security & Audit Logs
@endsection

@section('content')
    <div class="dashboard-body-content">
        <div class="manage-offers-flex">
            <h2> Security & Audit Logs List </h2>
            <div class="admin-tab-container">
                <ul class="nav nav-pills">
                </ul>
            </div>
            <div class="d-flex gap-3 align-items-center manage-search-container manage-search-container-artist">
                <div class="d-flex align-items-center gap-2 w-100  select-down">
                    <label for="Filter" class="mb-0 filter-label">Filter</label>
                    <div class="position-relative w-100  select-down ">
                        <select class="form-control select-menu" id="action_filter" name="action_filter">
                            <option value="all">All</option>
                            <option value="login">Login</option>
                            {{-- <option value="logout">Logout</option> --}}
                            <option value="update_profile">Update Profile</option>
                            {{-- <option value="assign_role">Assign Role</option> --}}
                            <option value="delete_user">Delete User</option>
                            <option value="forgot_password">Forgot Password</option>
                            <option value="reset_password">Reset Password</option>
                            <option value="change_password">Change Password</option>
                        </select>
                        <div class="search-icon">
                            <img src="{{ asset('assets') }}/img/Filter.png" alt="">
                        </div>
                        <div class="down-icon">
                            <img src="{{ asset('assets') }}/img/arrow-down.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="position-relative w-100">
                    <input type="search" class="form-control" placeholder="Search Security & Audit Logs">
                    <div class="search-icon">
                        <img src="{{ asset('assets/img/dashboard/search-icon.png') }}" alt="">
                    </div>
                </div>

            </div>
        </div>
        <div class="tab-content">
            <div class="" id="artist_data">
                <div class="ct-dashboard-table-container">
                    <div class="card p-2">
                        <div class="table-responsive">
                            <table class="table mb-0" id="logTBL">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>User Name</th>
                                        <th>Performed By</th>
                                        <th>Action Type</th>
                                        <th>IP Address</th>
                                        <th>Date & Time</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/js/dataTables.js') }}"></script>
    <script>
        $(document).ready(function() {
            function datTableReload(full_reload = 0) {
                if (full_reload == 0) {
                    logTBL.ajax.reload();
                } else {
                    logTBL.ajax.reload(null, false);
                }
            }

            $('.manage-search-container input[type="search"]').on('input', function() {
                var searchText = $(this).val(); // <-- get the value from input
                logTBL.search(searchText).draw(); // use it for DataTable search
            });

            $('#status_filter').on('change', function() {
                logTBL.ajax.reload();
            });

            // Filter reload
            $('#action_filter').on('change', function() {
                logTBL.ajax.reload();
            });

            // Text search
            $('#log_search').on('input', function() {
                logTBL.search(this.value).draw();
            });

            // === DATA TABLE ===
            var logTBL = $('#logTBL').DataTable({
                dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.security-audit-logs.index') }}',
                    data: function(d) {
                        d.action_filter = $('#action_filter').val();
                    }
                },
                order: [],
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'user_name',
                        name: 'user_name'
                    },
                    {
                        data: 'operator_name',
                        name: 'operator_name'
                    },
                    {
                        data: 'action_type',
                        name: 'action_type'
                    },
                    {
                        data: 'ip_address',
                        name: 'ip_address'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                ]
            });
        });
    </script>
@endsection