@extends('superadmin.layouts.app')
@section('content')
<section class="diocese-page-main">
	<h2 class="main-heading">Dioceses</h2>
	<div class="border-box h-full">
		<div class="bg-box h-full">
			<div class="table-responsive h-full">
				<div class="cc-table-data-main h-full">
					<table id="diocese_tbl" class="table-data" cellspacing='0'>
						<thead>
							<tr>
								<th>Name</th>
								<th>Location</th>
								<th>Website</th>
								<th>State</th>
								<th>Status</th>
								<th>Action</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
					<!-- <div class="row gridDataShow" id="demo"></div> -->
					<div class="card-table-data-main">
                        <div class="gridDataShow row"></div>
                            <nav aria-label="Page navigation">
                                <ul class="pagination justify-content-center" id="gridPagination">
                                </ul>
                            </nav>
                        </div>
                    </div>
				</div>
			</div>
		</div>
	</div>
</section>

@endsection
@section('script')
<script>
	$(function () {
		var table = $('#diocese_tbl').DataTable({
			processing: true,
			searching: true,
          // language: {
          //     searchPlaceholder: "Search here..."
          // },
			serverSide: true,
			ajax: "{{ route('superadmin.diocese.list') }}",
			"order": [[0, "desc" ]],
			columns: [
				{data: 'd_name', name: 'd_name'},
				{data: 'address', name: 'address'},
				{data: 'website', name: 'website'},
				{data: 'state', name: 'state'},
				{data: 'is_active', name: 'is_active'},
				{data: 'action', name: 'action'},
				],
			drawCallback: function(settings) {
				var api = this.api();
				var pageInfo = api.page.info();
				updateGridView();
				renderPagination(pageInfo);
				renderInfo(pageInfo);
			}
		});
		table.on('draw', function() {
			updateGridView();
		});
		function updateGridView() {
            var data = table.rows({ page: 'current' }).data().toArray(); // Fetch only the filtered/searched data
            // This function will run after the table is drawn
            var data = table.data().toArray();
            var gridHtml = '';
            data.forEach(function (item) {
            	gridHtml += '<div class="col col-12 col-md-6">'
            	gridHtml += '<div class="table-data-card">'
            	gridHtml += '<table>'
            	gridHtml += '<tr>'
            	gridHtml += '<td>'
            	let new_name = item.name;
            	if(item.profile_pic!=null){
            		gridHtml += '<img class="table-img" src="'+item.profile_pic+'" alt="">'
            	}else{
            		gridHtml += '<div class="table-img">'+(new_name==null ? 'CC' : new_name.charAt(0)) +'</div>'
            	}
            	gridHtml += '<h3>'+(new_name==null ? 'NA' : new_name)+'</h3>'
            	gridHtml += '</td>'
            	gridHtml += '</tr>'
            	gridHtml += '<tr>'
            	gridHtml += '<td>Website:</td>'
            	gridHtml += '<td>'+item.website+'</td>'
            	gridHtml += '</tr>'
            	gridHtml += '<tr>'
            	gridHtml += '<td>Address:</td>'
            	gridHtml += '<td>'+item.address+'</td>'
            	gridHtml += '</tr>'
            	gridHtml += '<tr>'
            	gridHtml += '<td>State:</td>'
            	gridHtml += '<td>'+item.state+'</td>'
            	gridHtml += '</tr>'
            	gridHtml += '<tr>'
            	gridHtml += '<td>Status:</td>'
            	gridHtml += '<td>'+item.is_active+'</td>'
            	gridHtml += '</tr>'
            	gridHtml += '<td>'+item.action+'</td>'
            	gridHtml += '</table>'
            	gridHtml += '</div>'
            	gridHtml += '</div>';
            });
                $('.gridDataShow').html(gridHtml); // Use `.html()` to replace existing content instead of `.append()`
              }
              function renderPagination(pageInfo) {
              	var pages = pageInfo.pages, current = pageInfo.page, $pagination = $('#gridPagination');
              	var links = '';

				if (pageInfo.recordsTotal === 0 || pageInfo.recordsTotal <= pageInfo.length) {
					$pagination.html(''); // Clear pagination
					return; // Exit the function
				}

                // Previous button
              	links += '<li class="page-item ' + (current === 0 ? 'disabled' : '') + '">' +
              	'<a class="page-link" href="#" data-page="' + (current - 1) + '">Previous</a></li>';

                // Numbered buttons
              	var start = Math.max(current - 2, 0);
              	var end = Math.min(current + 2, pages - 1);
              	for (var i = start; i <= end; i++) {
              		links += '<li class="page-item ' + (i === current ? 'active' : '') + '">' +
              		'<a class="page-link" href="#" data-page="' + i + '">' + (i + 1) + '</a></li>';
              	}

                // Next button
              	links += '<li class="page-item ' + (current === pages - 1 ? 'disabled' : '') + '">' +
              	'<a class="page-link" href="#" data-page="' + (current + 1) + '">Next</a></li>';

              	$pagination.html(links);
              }

              function renderInfo(pageInfo) {
              	var infoHtml = 'Showing ' + (pageInfo.start + 1) + ' to ' + pageInfo.end + ' of ' + pageInfo.recordsTotal + ' entries';
              	$('#gridInfo').html(infoHtml);
              }

              $('#gridPagination').on('click', 'a.page-link', function(e) {
              	e.preventDefault();
              	console.log($(this).data('page'));
              	var pageNum = $(this).data('page');
              	if (pageNum >= 0 && pageNum < table.page.info().pages) {
                    table.page(pageNum).draw(false); // Move DataTables page to selected page
                  }
                });
    //   $('input[name="sortby"]').on('change', function() {
    //     var sortOrder = $(this).val(); // Get the selected value
    //     var columnIndex = 5; // Assuming 'last_login' column index is 5
    //     if (sortOrder === 'DESC' || sortOrder === 'ASC' || sortOrder =='follower') {
    //         table.order([columnIndex, sortOrder]).draw(); // Sort by 'last_login' column
    //     }
    // });
      // $('#tab5').click(function() {
      //       // Get the ID of the clicked radio button
      //       var radioId = $(this).attr('id');
      //       // If the selected radio button is not 'option3', apply the class to the corresponding label
      //       if (radioId == 'tab5') {
      //           sortOrder = 'desc';
      //           var columnIndex = 5; // Assuming 'last_login' column index is 5
      //           if (sortOrder) {
      //               $('.filter-main-tab input[type=radio]').prop('checked', false);
      //               table.order([columnIndex, 'desc']).draw(); // Sort by 'last_login' column
      //           }
      //       }
      //   });
            });
          </script>
          @endsection