@extends('layout.admin')
@section('content')


@section('header')
        <!-- DataTables -->
        <link href="{{ url('datatable') }}/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
        <link href="{{ url('datatable') }}/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css"/>
        <link href="{{ url('datatable') }}/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css"/>
@endsection

@section('footer')

        <!-- Required datatable js -->
        <script src="{{ url('datatable') }}/datatables.net/js/jquery.dataTables.min.js"></script>
        <script src="{{ url('datatable') }}/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
        <!-- Buttons examples -->
        <script src="{{ url('datatable') }}/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
        <script src="{{ url('datatable') }}/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
        <script src="{{ url('datatable') }}/jszip/jszip.min.js"></script>
        <script src="{{ url('datatable') }}/pdfmake/build/pdfmake.min.js"></script>
        <script src="{{ url('datatable') }}/pdfmake/build/vfs_fonts.js"></script>
        <script src="{{ url('datatable') }}/datatables.net-buttons/js/buttons.html5.min.js"></script>
        <script src="{{ url('datatable') }}/datatables.net-buttons/js/buttons.print.min.js"></script>
        <script src="{{ url('datatable') }}/datatables.net-buttons/js/buttons.colVis.min.js"></script>

        <!-- Responsive examples -->
        <script src="{{ url('datatable') }}/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
        <script src="{{ url('datatable') }}/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>

        <!-- Datatable init js -->
        {{-- <script src="{{ url('admin') }}/assets/js/pages/datatables.init.js"></script> --}}
        <script>
            $(document).ready(function() {
                // Initialize DataTable
                $("#datatable").DataTable({
                    processing: true, // Show processing indicator
                    serverSide: true, // Enable server-side processing
                    ajax: {
                        url: "{{ route('adminusers') }}", // URL for AJAX data
                        type: "GET", // HTTP method
                        data: function(d) {
        d.type = '{{ $_GET['type'] }}'; // Add the type parameter
    },
                        error: function(xhr, status, error) {
                            console.error("AJAX Error:", error); // Log error to the console
                            console.error("Response:", xhr.responseText); // Log server response
                        }
                    },
                    columns: [
                        { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false }, // Row number
                        { data: 'name', name: 'name' }, // Title column
                        { data: 'userid', name: 'userid' }, // Title column
                        { data: 'email', name: 'email' }, // Title column
                        { data: 'phone', name: 'phone' }, // Title column


                        { data: 'is_block', name: 'is_block', orderable: false, searchable: false, render: function(data) {
                            if (data === 'N') {
            return '<span class="badge bg-success">Active</span>';
        }else if(data === 'Y'){
            return '<span class="badge bg-danger">Inactive</span>';
        }
        return '<span class="badge bg-success">Active</span>';
                        }},
                        { data: 'action', name: 'action', orderable: false, searchable: false }

                        

                        // { data: 'action', name: 'action', orderable: false, searchable: false } // Action buttons
                    ],
                    pageLength: 10, // Number of records per page
                    ordering: false, // Disable ordering
                    drawCallback: function(settings) {
                        console.log("DataTable Draw Event Triggered", settings); // Log each draw event
                    }
                });

                // Add bootstrap styles to dropdown
                $(".dataTables_length select").addClass("form-select form-select-sm");
            });
            </script>



@endsection

  <!--start main wrapper-->
  <main class="main-wrapper">
    <div class="main-content">
      <!--breadcrumb-->
				<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
					<div class="ps-3">
						<nav aria-label="breadcrumb">
							
                                						</nav>
					</div>
					<div class="ms-auto">
						
					</div>
				</div>
				<!--end breadcrumb-->
      
        <h6 class="mb-0 text-uppercase">{{ $msg }} Users</h6>
				<hr>
				<div class="card">
					<div class="card-body">
						<div class="table-responsive">
							<table id="datatable" class="table table-striped table-bordered" style="width:100%">
								<thead>
									<tr>
										<th>S/N</th>
										<th>Name</th>
										<th>UserId</th>
										<th>Email.</th>
										<th>Mobile No</th>
										<th>Block Status</th>
										<th>Action</th>
									</tr>
								</thead>
								<tbody>
									
								</tbody>
							</table>
						</div>
					</div>
				</div>
		


    </div>
  </main>
  <!--end main wrapper-->


@endsection