@extends('admin.layouts.app')

@section('title')
    Login History - User {{ $userName }}
@endsection

@section('content')
<div class="container">
    <div class="page-inner">
        <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
            <div>
                <h3 class="fw-bold mb-3">Login History for User {{ $userName }}</h3>
            </div>


        </div>

        <!-- Login History Table Section -->
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <div class="card card-stats card-round">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col col-stats ms-3 ms-sm-0">
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="loginHistoryTable">
                                        <thead>
                                            <tr>
                                                <th>Sr No</th>
                                                <th>Login Time</th>
                                                <th>Logout Time</th>
                                                <th>User Type</th>  <!-- Added User Type -->
                                                <th>Status</th>      <!-- Added Status -->
                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr>
                                                <th></th>
                                                <th>
                                                    <input type="date" id="startDateFilter" class="form-control" placeholder="Start Date">
                                                </th>
                                                <th>
                                                    <input type="date" id="endDateFilter" class="form-control" placeholder="End Date">
                                                </th>
                                                <th></th> <!-- Empty for User Type filter -->
                                                <th></th> <!-- Empty for Status filter -->
                                            </tr>
                                            <tr>
                                                <th colspan="5" class="text-right">
                                                    <button id="resetDateFilters" class="btn btn-secondary">Reset Dates</button>
                                                </th>
                                            </tr>
                                        </tfoot>
                                        <tbody>
                                            <!-- Data will be populated by DataTables via AJAX -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
$(document).ready(function() {
    var table = $('#loginHistoryTable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: {
            url: '{{ route("users.loginHistory", $userId) }}',
            data: function(d) {
                // Only pass dates if both start and end dates are selected
                var startDate = $('#startDateFilter').val();
                var endDate = $('#endDateFilter').val();

                if (startDate && endDate) {
                    d.start_date = startDate;
                    d.end_date = endDate;
                } else {
                    // Clear filters if both dates are not selected
                    d.start_date = '';
                    d.end_date = '';
                }
            }
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'login_time', name: 'login_time' },
            { data: 'logout_time', name: 'logout_time' },
            { data: 'user_type', name: 'user_type' },  // Added User Type column
            { data: 'status', name: 'status' }         // Added Status column
        ],
        initComplete: function() {
            // Add any additional initialization here
        },
        drawCallback: function(settings) {
            var api = this.api();
            api.column(0, { search: 'applied', order: 'applied' }).nodes().each(function(cell, i) {
                cell.innerHTML = i + 1; // Update row number (first column) after any change
            });
        }
    });

    // Event listener for filter change
    $('#startDateFilter, #endDateFilter').on('change', function() {
        // Check if both start and end dates are selected
        if ($('#startDateFilter').val() && $('#endDateFilter').val()) {
            table.draw(); // Redraw the table only if both dates are selected
        }
    });

    // Event listener for the reset button
    $('#resetDateFilters').on('click', function() {
        $('#startDateFilter').val('');
        $('#endDateFilter').val('');
        table.draw(); // Redraw the table with empty filters
    });
});
    </script>
</div>
@endsection