@extends('crudbooster::admin_template')
@push('head')
    <link rel="stylesheet" href="{{ asset('/vendor/libs/datatables/datatables.css') }}">
@endpush
@push('bottom')
    @include('JSBlade.MJsblade')

    <script src="{{ asset('/vendor/libs/datatables/datatables.js') }}"></script>
    <script src="{{ asset('/js/tables_datatables.js') }}"></script>
<script>
    $(document).ready(function() {
        var table = $('#todaycron_table').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            ajax: {
                url: '{{ CRUDBooster::mainpath("table-data") }}',
                dataType: "json",
                type: "GET",
            },
            columns: [
                {
                    data: null,
                    render: function(data, type, row) {
                        return `${data.first_name} ${data.last_name}`;
                    }
                },
                { data: 'email' },
                {
                    data: null,
                    render: function(data, type, row) {
                        return data.managelimitation ? data.managelimitation.login_limit : '<span class="text-warning">Not Set</span>';
                    }
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        return data.sessions.length > 0 ? data.sessions.length : '<span class="text-warning">No login</span>';
                    }
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        return data.managelimitation ? data.managelimitation.max_staff : '<span class="text-warning">Not Set</span>';
                    }
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        const userStatusBtnClass = data.user_status ? "btn-danger" : "btn-success";
                        const userStatusIcon = data.user_status ? "fa-lock" : "fa-unlock";
                        const userStatusText = data.user_status ? "Lock" : "Unlock";
                        
                        return `
                            <div class='pull-right'>
                                <a class='btn btn-warning' href='managelimitations/edit/${data.id}'><i class='fa fa-cogs'>&nbsp;</i>Edit</a>
                                <button class='btn btn-primary' onclick='resetLogin(${data.id})' data-key='${data.id}'><i class='fa fa-power-off'>&nbsp;</i>Reset</button>
                                <button class='btn ${userStatusBtnClass}' onclick='change_status(${data.id})'><i class='fa ${userStatusIcon}'>&nbsp;</i>${userStatusText}</button>
                            </div>`;
                    },
                    orderable: false, // To prevent sorting on this column
                }
            ],
            // Hide the table head
            // dom: 'rtip' // This configuration shows only the table body (rows) and pagination
        });
    });
    
    function resetLogin(id){
        const action = `{{url('Majax/login-reset')}}/${id}`;
        const $resetButton = $(`[data-key="${id}"]`); // Cache the reset button jQuery object
        $.ajax({
            type: "GET",
            url: action,
            dataType: "json",
            success: (data) => {
                if (data.success) {
                    $resetButton
                        .toggleClass('btn-primary btn-success') // Toggle class for styling
                        .removeAttr('id') // Remove id attribute
                        .find('i').html("")
                        .text('Done'); // Update the inner HTML of the <i> element
                }
            },
            error: (data) => {
                console.log(data);
            }
        });
    };
</script>
@endpush
@section('content')
    <!-- Your html goes here -->
    <div class='panel panel-default'>
        <div class='panel-heading eap-box'>
            <div class="dark-color">
                <h4 style="display: inline-block;"><b><i class='fa fa-cogs'>&nbsp;</i>{{ $data['page_title'] }}</b></h4>
            </div>
        </div>
        @if (Session::has('message'))
            <div class="alert alert-success">
                <p> {{ Session::get('message') }}</p>
            </div>
        @endif
        <div class='panel-body box'>
            <div class="card-datatable table-responsive">
                <table class="table box-body table-responsive no-padding" id="todaycron_table">
                    <thead>
                        <tr class="active">
                            <th scope="col">Full Name</th>
                            <th scope="col">User Email</th>
                            <th scope="col">Login Limit</th>
                            <th scope="col">Recent Login</th>
                            <th scope="col">Max Staff</th>

                            <th scope="col text-center">Action</th>
                        </tr>
                    </thead>

                </table>
            </div>
        </div>

    </div>
@endsection