<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    @include('layout.header')

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">

    <style>
        .audit-filter {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>

<div class="container-scroller">

    @include('layout.navbar')
    @include('layout.breadscrum')

    <div class="container-fluid page-body-wrapper">

        @include('layout.sidebar')

        <div class="main-panel">
            <div class="content-wrapper">

                <div class="card">

                    <div class="card-header">
                        <h4>Audit Log List</h4>
                    </div>

                    <div class="card-body">

                        <!-- FILTER SECTION -->
                        <div class="audit-filter">
                            <div class="row">

                                <div class="col-md-2">
                                    <input type="date" id="date_from" class="form-control">
                                </div>

                                <div class="col-md-2">
                                    <input type="date" id="date_to" class="form-control">
                                </div>

                                <div class="col-md-2">
                                    <select id="event" class="form-control">
                                        <option value="">All Events</option>
                                        <option value="created">Created</option>
                                        <option value="updated">Updated</option>
                                        <option value="deleted">Deleted</option>
                                        <option value="User Login">Login</option>
                                        <option value="User Logout">Logout</option>
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <select id="user_id" class="form-control">
                                        <option value="">All Users</option>

                                        @foreach($users as $user)
                                            <option value="{{ $user->id }}">
                                                {{ $user->name }}
                                            </option>
                                        @endforeach

                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <button id="filter" class="btn btn-primary">
                                        Filter
                                    </button>
                                </div>

                            </div>
                        </div>

                        <!-- AUDIT TABLE -->
                        <table id="auditTable" class="table table-bordered table-striped">

                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Event</th>
                                    <th>Module</th>
                                    <th>Record ID</th>
                                    <th>User</th>
                                    <th>IP</th>
                                    <th>Date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>

                        </table>

                    </div>
                </div>

            </div>

            @include('layout.footer')

        </div>
    </div>
</div>

@include('layout.common_script')

<!-- JS Libraries -->
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>


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

    const table = $('#auditTable').DataTable({

        processing: true,
        serverSide: true,

        ajax: {
            url: "{{ route('audit.logs.data') }}",
            data: function (d) {
                d.date_from = $('#date_from').val();
                d.date_to = $('#date_to').val();
                d.event = $('#event').val();
                d.user_id = $('#user_id').val();
            }
        },

        columns: [
            { data: 'id' },
            { data: 'description' },
            { data: 'module' },
            { data: 'subject_id' },
            { data: 'user' },
            { data: 'ip' },
            { data: 'created_at' },
            { data: 'action', orderable: false, searchable: false }
        ],

        dom: 'Bfrtip',

        buttons: [
            'copy',
            'csv',
            'excel',
            'pdf',
            'print'
        ]

    });


    // Filter button
    $('#filter').click(function () {
        table.draw();
    });

});
</script>


<script>
$(document).on('click', '.view-log', function () {

    const data = $(this).data('log');

    const oldData = JSON.stringify(data.old, null, 2);
    const newData = JSON.stringify(data.attributes, null, 2);

    Swal.fire({
        title: "Audit Detail",
        html:
            "<h5>Before</h5><pre>" + oldData + "</pre>" +
            "<h5>After</h5><pre>" + newData + "</pre>",
        width: 900
    });

});
</script>

</body>
</html>