@extends('layouts.app')

@section('content')

@include('admin.adminheader')

        <div class='row d-flex justify-content-center'>
            <div class='col-md-10'>
            <table id="example" class="table table-striped data-table" style="width:100%">
        <thead>
            <tr class='dt-row'>
            <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>IP</th>
                <th>Date</th>
                <th>Time</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
            </div>
        </div>
    </div>

    <script type="text/javascript">
  $(function () {
      
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('login-activity') }}",
        columns: [
            {data: 'loginid'},
            {data: 'fname'},
            {data: 'lname'},
            {data: 'email'},  
            {data: 'ip_address'},
            {
            data: 'login_date',
            render: function (data) {
                try {
                    const timestamp = data;
                    const date = new Date(timestamp);

                    const day = String(date.getDate()).padStart(2, '0');
                    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
                    const year = date.getFullYear();

                    const formattedDate = `${day}-${month}-${year}`;
                    return formattedDate;
                } catch (error) {
                    // Log any errors to the console
                    console.error('Error formatting date:', error);
                   return data; 
                }
            }
        },
        {
            data: 'login_date',
            render: function (data) {
                try {
                    const date = new Date(data);

                    let hours = date.getHours();
                    const minutes = String(date.getMinutes()).padStart(2, '0');
                    const seconds = String(date.getSeconds()).padStart(2, '0');
                    const ampm = hours >= 12 ? 'PM' : 'AM';

                    // Convert hours to 12-hour format
                    hours = hours % 12 || 12;

                    const xd = `${hours}:${minutes}:${seconds} ${ampm}`;
                    return xd;
                } catch (error) {
                    // Log any errors to the console
                    console.error('Error formatting date:', error);
                   return data; 
                }
            }
        }

        ]
    });
      
  });
</script>

@endsection