@extends('superadmin.layouts.app')
@section('content')
<section class="parish-page">
    <div class="newsfeed-filter-data hstack justify-between items-center">
        <h2 class="main-heading">Parish</h2>
        <button class="filter-main-heading filter-button hstack justify-between items-center">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.05002 1.57495H13.95C14.775 1.57495 15.45 2.24995 15.45 3.07495V4.72495C15.45 5.32495 15.075 6.07495 14.7 6.44995L11.475 9.29995C11.025 9.67495 10.725 10.425 10.725 11.025V14.25C10.725 14.7 10.425 15.3 10.05 15.525L9.00002 16.2C8.02502 16.8 6.67502 16.125 6.67502 14.925V10.95C6.67502 10.425 6.37502 9.74995 6.07502 9.37495L3.22502 6.37495C2.85002 5.99995 2.55002 5.32495 2.55002 4.87495V3.14995C2.55002 2.24995 3.22502 1.57495 4.05002 1.57495Z" stroke="white" stroke-width="1.89123" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8.1975 1.57495L4.5 7.49995" stroke="white" stroke-width="1.89123" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span>Filters</span>
        </button>
    </div>
    <div class="border-box h-full">
        <div class="bg-box h-full">
            <div class="hstack items-center justify-between parish-filter">
                <div class="hstack items-center follower-filter parish-data-filter position-relative">
                    <div class="filter-top-heading hstack justify-between items-center flex-row">
                        <div class="hstack gap-2">
                            <button class="filter-close">
                                <svg class="close" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: inline;">
                                    <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"></path>
                                </svg>
                            </button>
                            <h2><span>Filters</span></h2>
                        </div>
                        <div class="filter-tab clear-all-btn">
                            <label for="tab3" class="br-bg-none tab-filter">Clear All</label>
                        </div>
                    </div>
                    <ul class="hstack items-center filter-main-tab w-full">
                        <li class="filter-tab ">
                            <input type="radio" id="tab1" name="sortby" value="followers">
                            <label for="tab1" class="tab-filter">Most Followed Parish</label>
                        </li>
                        <li class="filter-tab ">
                            <input type="radio" id="tab2" name="sortby" value="most_view">
                            <label for="tab2" class="tab-filter">Most Viewed Parish</label>
                        </li>
                        <div class="filter-tab clear-all-btn">
                            <input type="radio" id="tab3" name="sortby" value="most_view">
                            <label for="tab3" class="br-bg-none tab-filter">Clear All</label>
                        </div>
                    </ul>
                </div>
                <div class="hstack items-center filter-button-main">
                    <a class="parish-user-button" href="{{route('superadmin.parish.claim.list')}}">Requested by Parish User</a>
                    <a href="{{route('superadmin.parish.add')}}" class="parish-btn">Add Parish</a>
                </div>
                <button class="filter-main-heading filter-button hstack justify-between items-center">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.05002 1.57495H13.95C14.775 1.57495 15.45 2.24995 15.45 3.07495V4.72495C15.45 5.32495 15.075 6.07495 14.7 6.44995L11.475 9.29995C11.025 9.67495 10.725 10.425 10.725 11.025V14.25C10.725 14.7 10.425 15.3 10.05 15.525L9.00002 16.2C8.02502 16.8 6.67502 16.125 6.67502 14.925V10.95C6.67502 10.425 6.37502 9.74995 6.07502 9.37495L3.22502 6.37495C2.85002 5.99995 2.55002 5.32495 2.55002 4.87495V3.14995C2.55002 2.24995 3.22502 1.57495 4.05002 1.57495Z" stroke="white" stroke-width="1.89123" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M8.1975 1.57495L4.5 7.49995" stroke="white" stroke-width="1.89123" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span>Filters</span>
                </button>
            </div>
            <div class="table-responsive h-full">
                <div class="cc-table-data-main">
                    <table id="parishTable" class="table-data" cellspacing='0'>
                        <thead>
                            <tr>
                                <th>Full Name</th>
                                <th>Followers</th>
                                <th>Location</th>
                                <th>Email Id</th>
                                <th>Contact</th>
                                <th>Status</th>
                                <th>Action </th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- <tr>
                                <td>
                                    <a href="user-personal-deatails.html" class="hstack items-center">
                                        <img class="table-img" src="images/users-2.png" alt="">
                                        <span>Maverick Jasper</span>
                                    </a>
                                </td>
                                <td>3000</td>
                                <td>12 Eagle Drive Forth Worth, TX 76111</td>
                                <td>maverickjasper@gmail.com</td>
                                <td>+1234568965</td>
                                <td>+1234568965</td>
                                <td>
                                    <div class="hstack justify-center">
                                        <i class="hide action-btn">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M9.68668 6.31328L6.31334 9.68661C5.88001 9.25328 5.61334 8.65995 5.61334 7.99995C5.61334 6.67995 6.68001 5.61328 8.00001 5.61328C8.66001 5.61328 9.25334 5.87995 9.68668 6.31328Z"
                                                    stroke="white" stroke-width="1.3" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                                <path
                                                    d="M11.88 3.84657C10.7134 2.96657 9.38002 2.48657 8.00002 2.48657C5.64668 2.48657 3.45335 3.87324 1.92668 6.27324C1.32668 7.21324 1.32668 8.79324 1.92668 9.73324C2.45335 10.5599 3.06668 11.2732 3.73335 11.8466"
                                                    stroke="white" stroke-width="1.3" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                                <path
                                                    d="M5.61334 13.02C6.37334 13.34 7.18001 13.5133 8.00001 13.5133C10.3533 13.5133 12.5467 12.1266 14.0733 9.72662C14.6733 8.78662 14.6733 7.20662 14.0733 6.26662C13.8533 5.91995 13.6133 5.59329 13.3667 5.28662"
                                                    stroke="white" stroke-width="1.3" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                                <path
                                                    d="M10.34 8.46655C10.1667 9.40655 9.40002 10.1732 8.46002 10.3466"
                                                    stroke="white" stroke-width="1.3" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                                <path d="M6.31331 9.68677L1.33331 14.6668" stroke="white"
                                                    stroke-width="1.3" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                                <path d="M14.6666 1.33325L9.68665 6.31325" stroke="white"
                                                    stroke-width="1.3" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                            </svg>
                                        </i>
                                        <i class="unhide action-btn">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M10.3867 7.99995C10.3867 9.31995 9.32001 10.3866 8.00001 10.3866C6.68001 10.3866 5.61334 9.31995 5.61334 7.99995C5.61334 6.67995 6.68001 5.61328 8.00001 5.61328C9.32001 5.61328 10.3867 6.67995 10.3867 7.99995Z"
                                                    stroke="white" stroke-width="1.5" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                                <path
                                                    d="M8.00002 13.5133C10.3534 13.5133 12.5467 12.1266 14.0734 9.72665C14.6734 8.78665 14.6734 7.20665 14.0734 6.26665C12.5467 3.86665 10.3534 2.47998 8.00002 2.47998C5.64668 2.47998 3.45335 3.86665 1.92668 6.26665C1.32668 7.20665 1.32668 8.78665 1.92668 9.72665C3.45335 12.1266 5.64668 13.5133 8.00002 13.5133Z"
                                                    stroke="white" stroke-width="1.5" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                            </svg>
                                        </i>
                                        <i class="promote action-btn">
                                            <svg width="17" height="16" viewBox="0 0 17 16" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M12.3491 6.91876C12.7548 6.64683 13.0458 6.24117 13.174 5.76245C13.3143 5.23917 13.2431 4.69407 12.9738 4.22755C12.7044 3.76102 12.2679 3.42688 11.7447 3.28664C11.2659 3.15838 10.7691 3.20751 10.3308 3.42295L9.20127 1.4666C8.96083 1.05012 8.52896 0.807379 8.04948 0.815556C7.5687 0.82436 7.14735 1.08329 6.92221 1.50821C6.76414 1.80674 6.61567 2.11685 6.45849 2.44519C5.81787 3.78337 5.09178 5.30011 3.52206 6.20639L1.50504 7.37091C0.810737 7.77176 0.313413 8.42158 0.104631 9.20068C-0.104117 9.97979 0.00165841 10.7912 0.402505 11.4855C0.959772 12.4507 1.97433 12.991 3.01617 12.991C3.39614 12.991 3.77971 12.919 4.1461 12.7697L5.55617 15.212C5.84791 15.7173 6.37889 16 6.92426 16C7.19153 16 7.4623 15.932 7.70996 15.7891C8.07355 15.5791 8.33396 15.239 8.4432 14.8314C8.55241 14.4237 8.49698 13.9989 8.28704 13.6353L6.89956 11.2321C8.36034 10.5377 9.89366 10.6555 11.2588 10.761C11.6221 10.7891 11.9652 10.8156 12.303 10.828C12.7829 10.8452 13.2185 10.6101 13.4665 10.1981C13.7144 9.78608 13.719 9.29152 13.4785 8.87505L12.349 6.91866L12.3491 6.91876ZM11.5313 4.08286C11.8419 4.16609 12.1007 4.36382 12.2599 4.6397C12.5674 5.17224 12.4184 5.84488 11.9355 6.20237L10.7444 4.13938C10.9909 4.03232 11.2656 4.01164 11.5313 4.08286H11.5313ZM3.01481 12.1669C2.25816 12.1668 1.52116 11.7744 1.11642 11.0734C0.825673 10.5698 0.749111 9.98048 0.900916 9.41405C1.05269 8.84761 1.41364 8.37555 1.91723 8.0848L3.57749 7.12625L5.76732 10.9145L4.10505 11.8742C3.76134 12.0726 3.38579 12.1669 3.01481 12.1669ZM7.64701 14.6181C7.59479 14.8131 7.47074 14.9754 7.29784 15.0753C6.93857 15.2827 6.47751 15.1592 6.27005 14.7999L4.8741 12.382L6.17723 11.6296L7.57319 14.0475C7.67303 14.2204 7.69924 14.4231 7.64698 14.6181H7.64701ZM12.7603 9.77302C12.6665 9.92878 12.5154 10.0113 12.3332 10.0043C12.012 9.99252 11.6771 9.9666 11.3224 9.9392C9.83263 9.82409 8.15756 9.69501 6.4883 10.5146L4.28429 6.70183C5.83056 5.66492 6.55662 4.1493 7.20202 2.80116C7.35547 2.48057 7.50045 2.17775 7.65067 1.89405C7.73578 1.73338 7.88277 1.64307 8.06454 1.63977C8.06797 1.6397 8.0714 1.63967 8.07483 1.63967C8.25196 1.63967 8.39823 1.72431 8.48742 1.87879L12.7647 9.28733C12.8556 9.44478 12.8541 9.61729 12.7603 9.77305L12.7603 9.77302ZM11.6896 1.68042L12.5408 0.206159C12.6546 0.00901688 12.9066 -0.0585437 13.1038 0.0553102C13.3009 0.169131 13.3684 0.421206 13.2546 0.618315L12.4035 2.09258C12.3271 2.2248 12.1886 2.29872 12.0461 2.29872C11.9762 2.29872 11.9053 2.28092 11.8405 2.24343C11.6433 2.12961 11.5758 1.87753 11.6896 1.68042ZM15.5162 3.2356L14.0062 4.10739C13.9413 4.14485 13.8704 4.16269 13.8005 4.16269C13.6581 4.16269 13.5196 4.08877 13.4432 3.95655C13.3294 3.7594 13.3969 3.50733 13.5941 3.39354L15.104 2.52175C15.3011 2.40789 15.5532 2.47549 15.667 2.6726C15.7808 2.86971 15.7133 3.12181 15.5162 3.2356ZM16.6521 6.20108C16.6521 6.42869 16.4675 6.61324 16.2399 6.61324H14.5375C14.3099 6.61324 14.1254 6.42872 14.1254 6.20108C14.1254 5.97344 14.3099 5.78892 14.5375 5.78892H16.2399C16.4675 5.78892 16.6521 5.97344 16.6521 6.20108Z"
                                                    fill="white" />
                                            </svg>
                                        </i>

                                        <a class="link" href="message.html">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M8.84 2.39982L3.36667 8.19315C3.16 8.41315 2.96 8.84649 2.92 9.14649L2.67334 11.3065C2.58667 12.0865 3.14667 12.6198 3.92 12.4865L6.06667 12.1198C6.36667 12.0665 6.78667 11.8465 6.99334 11.6198L12.4667 5.82649C13.4133 4.82649 13.84 3.68649 12.3667 2.29315C10.9 0.913152 9.78667 1.39982 8.84 2.39982Z"
                                                    stroke="white" stroke-width="1.5" stroke-miterlimit="10"
                                                    stroke-linecap="round" stroke-linejoin="round" />
                                                <path
                                                    d="M7.9267 3.3667C8.21336 5.2067 9.7067 6.61337 11.56 6.80003"
                                                    stroke="white" stroke-width="1.5" stroke-miterlimit="10"
                                                    stroke-linecap="round" stroke-linejoin="round" />
                                                <path d="M2 14.6665H14" stroke="white" stroke-width="1.5"
                                                    stroke-miterlimit="10" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                            </svg>
                                        </a><i class="trash">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M14 3.98665C11.78 3.76665 9.54667 3.65332 7.32 3.65332C6 3.65332 4.68 3.71999 3.36 3.85332L2 3.98665"
                                                    stroke="white" stroke-width="1.5" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                                <path
                                                    d="M5.66669 3.31331L5.81335 2.43998C5.92002 1.80665 6.00002 1.33331 7.12669 1.33331H8.87335C10 1.33331 10.0867 1.83331 10.1867 2.44665L10.3334 3.31331"
                                                    stroke="white" stroke-width="1.5" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                                <path
                                                    d="M12.5667 6.09332L12.1334 12.8067C12.06 13.8533 12 14.6667 10.14 14.6667H5.86002C4.00002 14.6667 3.94002 13.8533 3.86668 12.8067L3.43335 6.09332"
                                                    stroke="white" stroke-width="1.5" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                                <path d="M6.88666 11H9.10666" stroke="white" stroke-width="1.5"
                                                    stroke-linecap="round" stroke-linejoin="round" />
                                                <path d="M6.33331 8.33331H9.66665" stroke="white"
                                                    stroke-width="1.5" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                            </svg>
                                        </i>
                                    </div>
                                </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>
        </div>
    </div>
    </div>
    <div class="delete-post-modal news-modal-delete">
        <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>
        <h4>Delete Parish</h4>
        <h5 class="news-delete-heading">Are you sure want delete is this Parish?</h5>
        <input type="hidden" name="parish_id" id="parish_id">
        <div class="report-modal-button hstack justify-center items-center">
            <button class="cancel-delete" type="button">Cancel</button>
            <button class="direct-delete" id="deleteButton">Yes, Delete</button>
        </div>
    </div>

</section>
<script>
    $(document).ready(function() {
        // function toggleBodyScrolling() {
        //     if (window.matchMedia('(max-width: 575px)').matches) {
        //         $('body').addClass('bodyscrolling');
        //     } else {
        //         $('body').removeClass('bodyscrolling');
        //     }
        // }
        // toggleBodyScrolling();
        // $(window).resize(function () {
        //     toggleBodyScrolling();
        // });
        $(document).on("click", ".trash", function() {
            $("body").addClass("bodyscrolling");
            var parish_id = $(this).attr('data-parishId');
            $("#parish_id").val(parish_id);
            $(".delete-post-modal").fadeIn(300);
        });
        $(document).on("click", ".close-modal, .cancel-delete", function() {
            $("body").removeClass("bodyscrolling");
            $(".delete-post-modal").fadeOut(300);
        })
        $(".filter-main-heading").click(function() {
            $(".follower-filter").addClass("show");
            $('body').addClass('parish-bodyscrolling');
        });
        $(".filter-close , .tab-filter").click(function() {
            $(".follower-filter").removeClass("show");
            $('body').removeClass('parish-bodyscrolling');
        });
    });
    $('#deleteButton').click(function() {
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        var parish_id = $('#parish_id').val();

        $.ajax({
            url: "{{route('superadmin.parish.delete')}}",
            type: 'POST',
            // contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': csrfToken // Set the CSRF token in the headers
            },
            data: {
                _token: '{{csrf_token()}}',
                uuid: parish_id
            },
            success: function(response) {
                // Handle success response
                if (response.status == true) {
                    toastr.success(response.message);
                } else if (response.status == false) {
                    toastr.error(response.message);
                }
                $("body").removeClass("bodyscrolling");
                $(".delete-post-modal").fadeOut(300);
            },
            error: function(xhr, status, error) {
                toastr.error('Somethign went wrong please try again!');
                $("body").removeClass("bodyscrolling");
                $(".delete-post-modal").fadeOut(300);
            }
        }).done(function(result) {
            $($.fn.dataTable.tables(true)).DataTable().columns.adjust().draw();
        });
    });
    $(document).ready(function() {
        $(function() {
            var table = $('#parishTable').DataTable({
                processing: true,
                searching: true,
                // language: {
                //     searchPlaceholder: "Search here..."
                // },
                serverSide: true,
                ajax: "{{ route('superadmin.parish') }}",
                columns: [{
                        data: 'p_name',
                        name: 'p_name'
                    },
                    {
                        data: 'followers',
                        name: 'followers'
                    },
                    {
                        data: 'location',
                        name: 'location'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'contact_info',
                        name: 'contact_info'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        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>Follower:</td>'
                    gridHtml += '<td>' + item.total_follower + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Location:</td>'
                    gridHtml += '<td>' + item.display_parish_address + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Contact Info:</td>'
                    gridHtml += '<td>' + item.contact_info + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Status:</td>'
                    gridHtml += '<td>' + item.status + '</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="' + (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