@extends('superadmin.layouts.app')
@section('content')
<section class="archive-post-page">
    <h2 class="main-heading">Newsfeed</h2>
    <div class="newsfeed-filter-data hstack justify-between items-center">
        <div>
            <a href="{{route('superadmin.posts')}}" class="main-sub-heading">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15 19.92L8.47997 13.4C7.70997 12.63 7.70997 11.37 8.47997 10.6L15 4.07996" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span>Archive Post</span>
            </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="border-box">
        <div class="bg-box h-full">
            <div class="hstack items-center follower-filter position-relative">
                <div class="hstack filter-heading 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="hstack all-filter">
                    <input type="text" name="start_date" id="start_date" onfocus="(this.type='date')" placeholder="Start date" />
                    <input type="text" name="end_date" id="end_date" onfocus="(this.type='date')" placeholder="End date" />
                    <select id="filter_by_rang" class="dark-dropdown">
                        <option value="alltime">All Time</option>
                        <option value="today">Today</option>
                        <option value="last_7">Previous 7 days</option>
                        <option value="last_30">Previous 30 Days</option>
                        <option value="this_year">This Year</option>
                    </select>
                </div>
            </div>
            <div class="table-responsive h-full overflow-y-auto">
                <div class="cc-table-data-main h-full">
                    <table id="myTable" class="table-data" cellspacing='0'>
                        <thead>
                            <tr>
                                <th>Post</th>
                                <th>Username</th>
                                <th class="descripation-heading">Description </th>
                                <th>Likes</th>
                                <th>Comments </th>
                                <th>Shares </th>
                                <th>Action </th>
                            </tr>
                        </thead>
                        <tbody>
                        </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>
</section>
<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 Post</h4>
    <h5 class="news-delete-heading">Are you sure you want to permanently delete this post?</h5>
    <input type="hidden" name="post_id" id="post_id">
    <button class="cancel-delete" type="button">Cancel</button>
    <button class="direct-delete" id="deleteButton">Yes, Delete</button>
</div>
<script>
    $(document).ready(function() {
        // Use event delegation for dynamically added elements
        $(document).on("click", ".trash", function() {
            $("body").addClass("bodyscrolling");
            var post_id = $(this).attr('data-postId');
            $("#post_id").val(post_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('filter-bodyscrolling');
        });
        $(".filter-close , .tab-filter").click(function() {
            $(".follower-filter").removeClass("show");
            $('body').removeClass('filter-bodyscrolling');
        });
    });
    $('#deleteButton').click(function() {
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        var post_id = $('#post_id').val();

        $.ajax({
            url: "{{route('superadmin.permanent.delete')}}",
            type: 'POST',
            // contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': csrfToken // Set the CSRF token in the headers
            },
            data: {
                _token: '{{csrf_token()}}',
                postId: post_id,
                isDelete: 1,
            },
            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();
        });
    });
    $(function() {
        var table = $('#myTable').DataTable({
            processing: true,
            language: {
                searchPlaceholder: "Search here..."
            },
            serverSide: true,
            ajax: {
                url: "{{ route('superadmin.archive.post') }}",
                data: function(d) {
                    if($('#filter_by_rang').val()=='alltime'){
                        d.start_date = $('#start_date').val();
                        d.end_date = $('#end_date').val();
                    }else{
                       $('#start_date').val('');
                        $('#end_date').val('');
                    }
                    d.filter_by_rang = $('#filter_by_rang').val();
                }
            },
            columns: [{
                data: 'name',
                name: 'name'
            }, {
                data: 'username',
                name: 'username'
            }, {
                data: 'description',
                name: 'description'
            }, {
                data: 'likes_total',
                name: 'likes_total'
            }, {
                data: 'comments_total',
                name: 'comments_total'
            }, {
                data: 'share_total',
                name: 'share_total'
            }, {
                data: 'action',
                name: 'action'
            }, 
            ],
            // initComplete: function(settings, json) {
                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.profilePic != null) {
                    gridHtml += '<img class="table-img" src="' + item.profilePic + '" 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>Email:</td>'
                gridHtml += '<td>' + item.email + '</td>'
                gridHtml += '</tr>'
                gridHtml += '<tr>'
                gridHtml += '<td>Username:</td>'
                gridHtml += '<td>' + item.username + '</td>'
                gridHtml += '</tr>'
                gridHtml += '<tr>'
                gridHtml += '<td>Description:</td>'
                gridHtml += '<td>' + item.description + '</td>'
                gridHtml += '</tr>'
                gridHtml += '<tr>'
                gridHtml += '<td>Like:</td>'
                gridHtml += '<td>' + item.likes_total + '</td>'
                gridHtml += '</tr>'
                gridHtml += '<tr>'
                gridHtml += '<td>Comments:</td>'
                gridHtml += '<td>' + item.comments_total + '</td>'
                gridHtml += '</tr>'
                gridHtml += '<tr>'
                gridHtml += '<td>Shares:</td>'
                gridHtml += '<td>' + item.share_total + '</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 = 5; // Assuming 'last_login' column index is 5
            if (sortOrder) {
                table.order([columnIndex, sortOrder]).draw(); // Sort by 'last_login' column
            }
        });
        // Date range filtering
        $.fn.dataTable.ext.search.push(
            function(settings, data, dataIndex) {
                var startDate = $('#start_date').val();
                var endDate = $('#end_date').val();
                var date = new Date(data[5]); // Assuming 'last_login' column index is 5
                if ((startDate === '' || Date.parse(date) >= Date.parse(startDate)) &&
                    (endDate === '' || Date.parse(date) <= Date.parse(endDate))) {
                    return true;
                }
                return false;
            }
        );
        $('#start_date, #end_date, #filter_by_rang').change(function() {
            table.draw();
        });
    });
</script>
@endsection