@extends('superadmin.layouts.app')
@section('content')
<section class="parish-user-list w-full h-full overflow-auto">
    <a href="{{route('superadmin.parish')}}" class="parish-heading hstack items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M15 19.9201L8.47997 13.4001C7.70997 12.6301 7.70997 11.3701 8.47997 10.6001L15 4.08008" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>Parish list
    </a>
    <div class="border-box">
        <div class="bg-box">
            <!-- <div class="only-parish-main">
                <button class="only-parish-button">Only Parish</button>
            </div> -->
        <div class="table-responsive">
            <div class="cc-table-data-main">
                <table id="parishRequestList" class="table-data" cellspacing='0' id="user">
                    <thead>
                        <tr>
                            <th>Full Name</th>
                            <th>Parish Name</th>
                            <th>Email Id</th>
                            <th>Contact</th>
                            <th>Description</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                       {{-- <tr>
                            <td>
                                <div class="hstack items-center">
                                    <div class="table-img">D</div>
                                    <span>Adler Finley</span>
                                </div>
                            </td>
                            <td>  
                               <div class="hstack items-center">
                                <img class="table-img" src="https://catholicconnectv3.s3.amazonaws.com/catholic/users/662297e6c588972d771d1605/profile_pic/user_profile_img_17138925826627ece68f2b8.jpg" alt="">
                                <span>Adler Finley</span>
                            </div>
                        </td>
                        <td>christk20@gmail.com</td>
                        <td>+1234568965</td>
                        <td>Lorem ipsum dolor sit amet, consectetur the</td>
                        <td>
                            cc
                        </td>
                        </tr> --}}
                    </tbody>
                </table>
                    <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>
                        <script>
                            // let text = "";
                            // for ($i = 1; $i <= 10; $i++) {
                            //     text += '<div class="col col-12 col-md-6">'
                            //     text += '<div class="table-data-card">'
                            //     text += '<table table table table >'
                            //     text += '<tr class="hstack">'
                            //     text += '<td>'
                            //     text += '<img class="table-img" src="{{ asset("/cc/superadmin/images/block-2.png")}}" alt="">'
                            //     text += '</td>'
                            //     text += '<td>News from a Catholic Perspective</td>'
                            //     text += '</tr>'
                            //     text += '<tr class="hstack">'
                            //     text += '<td>Description :</td>'
                            //     text += '<td>Lorem ipsum dolor sit amet, consectetur the</td>'
                            //     text += '</tr>'
                            //     text += '<tr class="hstack">'
                            //     text += '<td>Like :</td>'
                            //     text += '<td>3000</td>'
                            //     text += '</tr>'
                            //     text += '<tr class="hstack">'
                            //     text += '<td>Comments :</td>'
                            //     text += '<td>1500</td>'
                            //     text += '</tr>'
                            //     text += '<tr class="hstack">'
                            //     text += '<td>Share :</td>'
                            //     text += '<td>200</td>'
                            //     text += '</tr>'
                            //     text += '</table>'
                            //     text += '</div>'
                            //     text += '</div>';
                            // }
                            // document.getElementById("demo").innerHTML = text;
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
  $(document).ready(function () {
    $(function () {
        var table = $('#parishRequestList').DataTable({
            processing: true,
            searching: true,
                // language: {
                //     searchPlaceholder: "Search here..."
                // },
            serverSide: true,
            ajax: "{{ route('superadmin.parish.claim.request.list') }}",
            columns: [
                    { data: 'name', name: 'name' },
                    { data: 'c_parish_name', name: 'c_parish_name' },
                    { data: 'email', name: 'email' },
                    { data: 'contact_info', name: 'contact_info' },
                    { data: 'description', name: 'description' },
                    { 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><tr>'
                    gridHtml += '<td>'
                    gridHtml += '<img class="table-img" src="'+item.profile_pic+'" alt="">'
                    gridHtml += '<h3>'+item.user_name+'</h3>'
                    gridHtml += '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Parish Name:</td>'
                    gridHtml += '<td>'+item.parish_name+'</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Email:</td>'
                    gridHtml += '<td>'+item.email+'</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Contact Info:</td>'
                    gridHtml += '<td>'+item.contact_info+'</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Description:</td>'
                    gridHtml += '<td>'+item.description+'</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 = '';
                var perPage = 8;

                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 ">' +'<a class="page-link ' + (i === current ? 'active' : '') + '" href="#" data-page="' + i + '">' + (i + 1) + '</a></li>';
                }
                // Next button
                links += '<li class="' + (current === pages - 1 ? 'disabled' : 'page-item') + '">' + '<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 = 6;
            //     if (sortOrder) {
            //         table.order([columnIndex, sortOrder]).draw();
            //     }
            // });

        // $('#tab3').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 == 'tab3') { 
        //         sortOrder = 'desc';
        //         var columnIndex = 6; // 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