@extends('layouts.main')
@section('title', 'Audit Logs')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
        <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/datedropper/datedropper.min.css') }}">
        <style>
            .card-body table{
                width:100%!Important;
            }
            .table-actions a {
                font-size: 5px!important;
            }

        </style>
    @endpush

    <div id="loaderEl">
        <x-loader/>
    </div>
    <div class="container-fluid">
        <x-breadcrumb :pageTitle="$pageTitle" :desc="$desc" :iconName="$iconName"/>

        <div class="row">
             <div class="col-md-12">
                <div class="card p-3">
                    <div class="card-header d-flex justify-content-between">
                        <h3>Filters: </h3>
                    </div>
                        <div class="card-body">
                            <div  wire:ignore class="form-row">
                                <div class="col-sm-4">
                                    <div class="form-group datepickers d-flex" id="datetimepicker" data-target-input="nearest">
                                        <input type="text" placeholder="Select From Date" class="form-control datetimepicker-input" data-toggle="datetimepicker" data-target="#datetimepicker" name="from_date" id="from-date">
                                        <div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
                                            <div style="margin-left:-3px; border-top-left-radius:0px; border-bottom-left-radius:0px;" class="input-group-text"><i class="fa fa-calendar"></i></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group datepickers d-flex" id="datetimepicker2" data-target-input="nearest">
                                        <input type="text" placeholder="Select To Date" class="form-control datetimepicker-input" data-target="#datetimepicker2" data-toggle="datetimepicker" id="to-date">
                                        <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
                                            <div style="margin-left:-3px; border-top-left-radius:0px; border-bottom-left-radius:0px;"  class="input-group-text"><i class="fa fa-calendar"></i></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <select class="select2 form-control"  id="roles">
                                            @if ($roles)
                                                    <option value="">Select Performer</option>
                                            @endif
                                            @forelse ($roles as $role_id => $role_name)
                                                <option value="{{ $role_id  }}">{{ $role_name }}</option>
                                            @empty
                                            <option value="">Select User Roles</option>
                                            @endforelse
                                        </select>
                                     </div>
                                </div>

                            </div>
                        <div class="form-row">
                            <div class="col-sm-12 d-flex justify-content-end">
                                <button style="width:150px;" type="btn" class="btn btn-primary" id="search-btn"><i class="fa fa-search"></i> Search </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div wire:ignore class="col-md-12">
                <div class="card p-3">
                    <div class="card-header d-flex justify-content-between">
                       <div>
                            <h3 class="mb-2"><strong>Users Audit Trail</strong></h3>
                       </div>
                    </div>
                    <div class="card-body table-responsive">
                        <div class="table-responsive">
                        <table id="auditlog_table" class="table" style="width:100%;">
                            <thead>
                                <tr>
                                    <tr>
                                    <th>S/N</th>
                                    <th>Action</th>
                                    <th>Performed By</th>
                                    <th>Role</th>
                                    <th>IP Address</th>
                                    <th>Date</th>
                                    <th>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

       <!-- Modal -->
    <div class="modal fade" id="auditDetails" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Audit Log Details</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                </div>
                <div class="modal-body" id="details">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>

    <!-- push external js -->
    @push('script')
        <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
        <script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script>
         {{-- <script src="{{ asset('plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js') }}"></script> --}}
        <script src="{{ asset('plugins/datedropper/datedropper.min.js') }}"></script>
        <script src="{{ asset('js/form-picker.js') }}"></script>

        <!--server side users table script-->
        <script src="{{ asset('js/custom.js') }}"></script>
        <script>
            document.body.classList.add("sidebar-mini");
            document.addEventListener('DOMContentLoaded', function () {
                hideLoading();
                // Initialize select2
                initializeSelect2();

                initializeDatepicker();
                // initialize AuditLog Table
                initializeAuditLogsTable()

                onCustomEvent('click', '#search-btn', ()=> {
                    showLoading();
                    const status = redrawTable('auditlog_table');
                    if(status) return hideLoading();
                })

                onCustomEvent('click', '.audit-log-btn', (e)=> {
                    const log = JSON.parse(JSON.stringify($(e.target).data("log"))) || "";
                    if (log) {
                        const rowObject = Object.keys(log).map((key)=> `<p class="mb-3" style="font-size:16px;"><strong>${key}</strong>: ${log[key]}</p>`);
                        $('#details').html(rowObject);
                    }
                });
            });
        </script>
    @endpush
@endsection