@extends('backend.admin.layouts.app')

@section('content')
<style>

</style>
<div class="row">

    <div class="col-md-12 col-sm-12 p-4">
        <section class="content">
            <!-- Default box -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">User List</h3>
                    <a href="" class="float-right btn btn-primary btn-sm" data-toggle="modal"
                        data-target="#noteAddModal"> <i class="fas fa-plus-circle"></i> Add User</a>
                </div>
                <!-- /.card-header -->
                <div style="overflow-y:auto" class="card-body">
                    <table class="table table-bordered table-striped user_table">
                        <thead>
                            <tr>
                                <th>SL</th>
                                <th>User Name</th>
                                <th>User Email</th>
                                <th>Course Name</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Payment</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card-body -->
            <!-- /.card -->
        </section>
    </div>
</div>
@endsection

@push('js')
<script>
    $(document).ready(function() {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            $(function() {

                var table = $('.user_table').DataTable({

                    dom: "lBfrtip",
                    buttons: ["copy", "csv", "excel", "pdf", "print"],

                    pageLength: 25,
                    processing: true,
                    serverSide: true,
                    searchable: true,
                    "ajax": {
                        "url": "{{ route('admin.user.show') }}",
                        "datatype": "json",
                        "dataSrc": "data",
                        "data": function(data) {

                        }
                    },

                    drawCallback: function(settings) {

                        $('#is_check_all').prop('checked', false);

                    },

                    columns: [{
                            name: 'DT_RowIndex',
                            data: 'DT_RowIndex',
                            sWidth: '5%'
                        },

                        {
                            data: 'name',
                            name: 'name',
                           
                        },
                        {
                            data: 'email',
                            name: 'email',
                           
                        },
                        {
                            data: 'course_name',
                            name: 'course_name',
                           
                        },
                        {
                            data: 'start date',
                            name: 'start date',
                            
                        },
                        {
                            data: 'end date',
                            name: 'end date',
                           
                        },
                        {
                            data: 'payment',
                            name: 'payment',
                            
                        },

                        {
                            data: 'status',
                            name: 'status',
                            
                        },

                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        },

                    ],
                    lengthMenu: [
                        [10, 25, 50, 100, 500, 1000, -1],
                        [10, 25, 50, 100, 500, 1000, "All"]
                    ],
                });
                table.buttons().container().appendTo('#exportButtonsContainer');

                $(document.body).on('click', '#is_check_all', function(event) {
                    alert('Checkbox clicked!');
                    var checked = event.target.checked;
                    if (true == checked) {
                        $('.check1').prop('checked', true);
                    }
                    if (false == checked) {
                        $('.check1').prop('checked', false);
                    }
                });

                $('#is_check_all').parent().addClass('text-center');

                $(document.body).on('click', '.check1', function(event) {

                    var allItem = $('.check1');

                    var array = $.map(allItem, function(el, index) {
                        return [el]
                    })

                    var allChecked = array.every(isSameAnswer);

                    function isSameAnswer(el, index, arr) {
                        if (index === 0) {
                            return true;
                        } else {
                            return (el.checked === arr[index - 1].checked);
                        }
                    }

                    if (allChecked && array[0].checked) {
                        $('#is_check_all').prop('checked', true);
                    } else {
                        $('#is_check_all').prop('checked', false);
                    }
                });

                //Submit filter form by select input changing
                $(document).on('change', '.submitable', function() {

                    table.ajax.reload();

                });


            });

            $(document).on('change', '.action-select', function(e) {
    e.preventDefault();

    // Get the selected value from the data-id attribute
    let id = $(this).data('id'); 
    

    // Send AJAX request
    $.ajax({
        url: "{{ route('admin.user.status') }}", // Ensure the correct route
        type: "POST",
        data: {
            id: id, // Send the value with the request
            _token: "{{ csrf_token() }}" // Add CSRF token for Laravel protection
        },
        success: function(res) {
            console.log(res); 
            if(res.status == 'success'){
                toastr.success(res.message);
                $('.user_table').DataTable().draw(false);
            }
        },
        error: function(err) {
            console.error(err); // Log any errors that occur
        }
    });
});

});
</script>
@endpush