@extends('user.layout.user')
@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" />

        <!-- Responsive datatable examples -->
        <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('listdob_user') }}", // 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: 'first_name', name: 'first_name' }, // Title column
                        { data: 'middle_name', name: 'middle_name' }, // Title column
                        { data: 'last_name', name: 'last_name' }, // Title column
                        { data: 'passport_photo', name: 'passport_photo', orderable: false, searchable: false, render: function(data) {
                            return `<a href="${data}"><img src="${data}" class="img-thumbnail" alt="Image" style="width: 50px; height: 50px;" /></a>`;
                        }}, 
                        
                        { data: 'mobile_number', name: 'mobile_number' }, // Title column
                        { data: 'aadhar_number', name: 'aadhar_number' }, // Title column

                        { data: 'status', name: 'status', orderable: false, searchable: false, render: function(data) {
                            if (data === 'pending') {
            return '<span class="badge bg-warning">Pending</span>';
        }else if(data === 'reject'){
            return '<span class="badge bg-danger">Rejected</span>';
        }
        return '<span class="badge bg-success">Accepted</span>';
                        }},

                        // { 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="breadcrumb-title pe-3">Lists</div>
					<div class="ps-3">
						<nav aria-label="breadcrumb">
							<ol class="breadcrumb mb-0 p-0">
								<li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
								</li>
								<li class="breadcrumb-item active" aria-current="page">DOB</li>
							</ol>
						</nav>
					</div>
					<div class="ms-auto">
						
					</div>
				</div>
				<!--end breadcrumb-->
      
        <h6 class="mb-0 text-uppercase">DOB Lists</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>First Name</th>
										<th>Middle Name</th>
										<th>Last Name</th>
										<th>Passport Photo</th>
										<th>Mobile No.</th>
										<th>Aadhar Number</th>
										<th>Status</th>
										{{-- <th>Action</th> --}}
									</tr>
								</thead>
								<tbody>
									
								</tbody>
							</table>
						</div>
					</div>
				</div>
		


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


@endsection