<!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: #fff;
            padding: 5px;
            border-radius: 6px;
            margin-bottom: 5px;
        }
        div.dt-buttons>.dt-button:hover:not(.disabled), div.dt-buttons>div.dt-button-split .dt-button:hover:not(.disabled) {
            background: #3b86d1 !important;
            color: #fff !important;
        }

        div.dt-buttons>.dt-button, div.dt-buttons>div.dt-button-split .dt-button {
            background: rgba(59, 134, 209, 0.2) !important;
            border-radius: 10px !important;
            color: #3b86d1 !important;
            border: none !important;
        }
        table.dataTable tbody th, table.dataTable tbody td {
            padding: 4px 10px !important;
        }

    </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">

                <!-- Card -->
                <div class="card">

                    <div class="card-body">
                        <h4 class="card-title text-bold"><i class="mdi mdi-dots-vertical menu-icon"></i> Audit Logs</h4>
                        <!-- Filters -->
                        <div class="audit-filter">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group mb-1">
                                        <label for="start-invoice-date">{{__('invoice.table_date_filter')}}</label>
                                        <div class="input-group">
                                            <input id="start-invoice-date" value="{{isset($_GET['from_date']) ? $_GET['from_date'] : ''}}" name="date_from" class="form-control rounded-right-0" onfocus="(this.type='date')" onblur="(this.type='text')" placeholder="{{__('general.type_date_placeholder')}}">
                                            <input id="to-invoice-date" value="{{isset($_GET['to_date']) ? $_GET['to_date'] : ''}}" name="date_to" class="form-control rounded-left-0" onfocus="(this.type='date')" onblur="(this.type='text')" placeholder="{{__('general.type_date_placeholder')}}">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group mb-1">
                                        <label for="start-invoice-date">{{__('ព្រឹត្តការណ៍')}}</label>
                                        <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>

                                <div class="col-md-3">
                                    <div class="form-group mb-1">
                                        <label for="lab-name-en">{{__('អ្នកប្រើប្រាស់')}}</label>
                                        <div class="input-group">
                                            <select id="user_id" class="form-control rounded-right-0">
                                                <option value="">All Users</option>
                                                @foreach($users as $user)
                                                    <option value="{{ $user->id }}">
                                                        {{ $user->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <div class="input-group-append">
                                                <button id="filter" class="btn btn-sm btn-inverse-secondary rounded-bottom-right-25 rounded-top-right-25 px-3" title="Search" type="button"><i class="fa fa-search"></i> {{__('general.btn_search')}}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <!-- Audit Table -->
                        <table id="auditTable" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>DATE</th>
                                    <th>EVENT</th>
                                    <th>TABLE</th>
                                    <th>USER</th>
                                    <th>ACTION</th>
                                </tr>
                            </thead>
                        </table>

                    </div>
                </div>

            </div>

            <!-- Modal -->
            <div class="modal fade" id="logModal" tabindex="-1">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Log Preview</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal">x</button>
                        </div>

                        <div class="modal-body">

                            <h5>INFO</h5>

                            <table class="table table-bordered">
                                <tr>
                                    <td width="150"><b>Type</b></td>
                                    <td id="log_type"></td>
                                </tr>

                                <tr>
                                    <td><b>Table</b></td>
                                    <td id="log_table"></td>
                                </tr>

                                <tr>
                                    <td><b>Time</b></td>
                                    <td id="log_time"></td>
                                </tr>

                                <tr>
                                    <td><b>Done by</b></td>
                                    <td id="log_user"></td>
                                </tr>
                            </table>

                            <h5 class="mt-4">FIELD CHANGES</h5>

                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Field</th>
                                        <th>Previous</th>
                                        <th>Current</th>
                                    </tr>
                                </thead>
                                <tbody id="log_fields"></tbody>
                            </table>

                        </div>

                    </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/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></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: 'created_at' },
            { data: 'description' },
            { data: 'module' },
            { data: 'user' },
            { data: 'action', orderable:false, searchable:false }
        ],

        dom: 'Bfrtip',

        buttons: [
            'copy',
            'csv',
            'excel',
            'pdf',
            'print'
        ]
    });

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

});
</script>


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

    let log = $(this).data("log");

    let description = $(this).data("description");
    let user = $(this).data("user");
    let time = $(this).data("time");
    let module = $(this).data("module");

    $("#log_type").text(description);
    $("#log_table").text(module);
    $("#log_time").text(time);
    $("#log_user").text(user);

    let oldData = log.old ?? {};
    let newData = log.attributes ?? {};

    let rows = "";

    Object.keys(newData).forEach(function(field){

        let oldValue = oldData[field] ?? "-";
        let newValue = newData[field] ?? "-";

        let highlight = oldValue != newValue ? "style='background:#fff3cd'" : "";

        rows += `
        <tr ${highlight}>
            <td>${field}</td>
            <td>${oldValue}</td>
            <td>${newValue}</td>
        </tr>`;
    });

    $("#log_fields").html(rows);

    const modal = new bootstrap.Modal(document.getElementById('logModal'));
    modal.show();
});
</script>

</body>
</html>
