@extends('superadmin.layouts.app')
@section('content')
<section class="parish-user-list w-full h-full overflow-auto">
    <a href="{{route('superadmin.parish.claim.request.list')}}" 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>
                </div>
            </div>
            <!-- <div id="demo" class="row"></div> -->
            <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>
</section>
<div class="delete-post-modal">
    <svg class="close-modal" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41L17.59 5Z" fill="white" />
    </svg>
    <h5>Notified User Message</h5>
    <div class="or"></div>
    <input type="hidden" name="delete_parish_id" id="delete_parish_id" />
    <input type="hidden" name="status" id="req_status" />
    <textarea placeholder="Enter reason here..." name="" id="reason" rows="5"></textarea>
    <button class="delete-post update-status" id="actionButton" data-url="{{ route('superadmin.permanent.delete') }}"></button>
</div>
<script>
    $(document).ready(function() {
        $(function() {
            var currentUrl = window.location.href;
            var table = $('#parishRequestList').DataTable({
                processing: true
                , searching: true,
                // language: {
                //     searchPlaceholder: "Search here..."
                // },
                serverSide: true
                , ajax: currentUrl
                , 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
            //         }
            //     }
            // });
    });

$(document).on('click', '.denied-btn, .accept-btn', function() {
    $("body").addClass("bodyscrolling");
    $(".delete-post-modal").fadeIn(300);
    var e_post_id = $(this).data('id');
    var status = $(this).data('status');
    $("#delete_parish_id").val(e_post_id);
    $("#req_status").val(status);
    if (status == '1') {
        $('#actionButton').text('Approve');
    } else {
        $('#actionButton').text('Reject');
    }
})
$(".close-modal").click(function() {
    $("body").removeClass("bodyscrolling");
    $(".delete-post-modal").fadeOut(300);
})

        // Handle approve and reject button clicks
$(document).on('click', '.update-status', function() {
    var dataTable = $('#parishRequestList').DataTable();
    var id = $('#delete_parish_id').val();
    var status =$('#req_status').val();
    var reason =$('#reason').val();
    $.ajax({
                url: '{{ route("superadmin.parishes.updateStatus") }}', // Using the named route
                type: 'POST'
                , data: {
                    _token: '{{ csrf_token() }}', // Add CSRF token
                    id: id, 
                    status: status,
                    reason: reason
                }
                , success: function(response) {
                    $("body").removeClass("bodyscrolling");
                    $(".delete-post-modal").fadeOut(300);
                    if (response.success) {
                        message = response.message;
                        toastr.success(message);
                        dataTable.ajax.reload(); // Reload the DataTable to reflect changes
                    }else{
                        $("body").removeClass("bodyscrolling");
                        $(".delete-post-modal").fadeOut(300);
                        errorMessage = response.message;
                        if(errorMessage == ''){
                            errorMessage = 'Something went wrong please try again!';
                        }
                        toastr.error(errorMessage);
                    }
                }
            });
});
});
</script>
@endsection