@extends('monitoring/layout.treatment_layout') @section('title',
        'BettrAi | Vendor Device Mapping') @section('content')
<style>
body{
        top:0!important;
        background: none !important;
    }
.tabloadershow {
    display: none;
    position: fixed;
    z-index: 100;
    background-image: url("{{ url('assets/images/loading-icon.gif') }}");
    opacity: 0.4;
    left: 0px;
    bottom: 0px;
    right: 0px;
    top: 50px;
    background-repeat: no-repeat;
    background-position: center center;
}


</style>
<div class="card p-5">
    <div class="row" style="margin-top:10px;">  
        <div class="col-12">
            <h5>User Activity Logs List</h5>
        </div>
        <div class="col-12 row">
            <div class="form-group col-4">
                <label for="start_date">Start Date:</label>
                <input type="date" class="form-control" id="start_date">
            </div>
            <div class="form-group col-4">
                <label for="end_date">End Date:</label>
                <input type="date" class="form-control" id="end_date">
            </div>
            <div class="col-4 d-flex align-items-end mb-4">
                <button class="btn btn-primary me-2" onclick="applyDateFilter()">Search</button>
                <button class="btn btn-secondary ml-2"  onclick="refreshPage()">Refresh</button>
            </div>
        </div>
    </div>

    <div class="row table-responsive p-2" style="overflow-x:hidden;">
        <table class="table table-head-custom table-vertical-center p-5" id="kt_advance_table_widget_7">
            <thead>
                <tr>
                    <th>User Ip</th>
                    <th>User Name</th>
                    <th>Activity</th>
                    <th>Description</th>
                    <th>Action Date</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table rows will be populated dynamically via AJAX -->
            </tbody>
        </table>
    </div>
    <div id="divLoading" class="tabloadershow"></div>
</div>

 

<script type="text/javascript">
$(document).ready(function(){

    var currentDate = new Date();
    var oneWeekBefore = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000);
    var lastWeekDate = oneWeekBefore.getFullYear() + '-' + ('0' + (oneWeekBefore.getMonth() + 1)).slice(-2) + '-' + ('0' + oneWeekBefore.getDate()).slice(-2);
    var todayDate = currentDate.getFullYear() + '-' + ('0' + (currentDate.getMonth() + 1)).slice(-2) + '-' + ('0' + currentDate.getDate()).slice(-2);

    $('#start_date').val(lastWeekDate);
    $('#end_date').val(todayDate);
    $('.tabloadershow').hide(); // Initially hide the loader

     var startDate = $('#start_date').val();
     var endDate = $('#end_date').val();
    user_logs_list(startDate,endDate);

    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="popover"]').popover();

});

  function applyDateFilter() {
        startDate = $('#start_date').val();
        endDate = $('#end_date').val();
         if (new Date(startDate) > new Date(endDate)) {
            alert('End date should be greater than start date.');
            return;
        }
        user_logs_list(startDate,endDate);
    }

 function refreshPage() {
        startDate = $('#start_date').val();
        endDate = $('#end_date').val();
        user_logs_list(startDate,endDate);
 }

function user_logs_list(startDate,endDate){
    $("#kt_advance_table_widget_7").dataTable().fnDestroy();
    $('#kt_advance_table_widget_7').dataTable({
        'processing': true,
        'serverSide': true,
        'serverMethod': 'get',
        oLanguage: {sProcessing: "<img src='{{ url('assets/images/loading-icon.gif') }}'>"},
        ajax: {
            url: "{{ url('/getUserActivityLogs') }}",
            'type': 'GET',
            'data': function(d) {
                d.start_date = $('#start_date').val();
                d.end_date = $('#end_date').val();
            }
        },
        'columns': [
            { 'data': 'user_ip' },
            { 'data': 'user_name' },
            { 'data': 'activity' },
            { 'data': 'audit_type' },
            { 'data': 'action_date' }
        ],
        'order': [[ 3, 'desc' ]], // Order by login date descending
        'drawCallback': function () {
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();
        }
    });
}
</script>

@endsection