@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 Activite Time Tracking</h5>
        </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_user_active_time_track">
            <thead>
                <tr>
                    <th>User Id</th>
                    <th>User Name</th>
                    <th>Login Time</th>
                    <th>Logout Time</th>
                    <th>Duration</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(){

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


function user_logs_list(){
    $("#kt_user_active_time_track").dataTable().fnDestroy();
    $('#kt_user_active_time_track').dataTable({
        'processing': true,
        'serverSide': true,
        'serverMethod': 'get',
        oLanguage: {sProcessing: "<img src='{{ url('assets/images/loading-icon.gif') }}'>"},
        ajax: {
            url: "{{ url('/getUserActiveTimeLogs') }}",
            'type': 'GET'
        },
        'columns': [
            { 'data': 'user_id' },
            { 'data': 'user_name' },
            { 'data': 'login_time' },
            { 'data': 'logout_time' },
            { 'data': 'duration' },
            { 'data': 'action_date' }
        ],
        'order': [[ 3, 'desc' ]], // Order by login date descending
        'drawCallback': function () {
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();
        }
    });
}
</script>

@endsection