@extends('superadmin.layouts.app')
@section('content')
@php
$page_type = app('request')->input('type');
if($page_type==''){
$page_type = 'user';
}
@endphp
<style>
    /* .to_status {
        border: 1px solid #5F5F5F;
        color: #FFFFFF;
        padding: 9px 12px;
        border-radius: 10px;
        font-size: 16px;
        padding-right: 30px;
        margin-right: 10px;
        background: url(../images/down.svg) no-repeat 90% #1E1E1E;
        -webkit-appearance: none;
    }*/

</style>
<section class="report-page-main">
    <h2 class="main-heading">Report</h2>
    @if($page_type=='user')

    <div id="reported-user" class="show h-full">
        <div class="border-box user-details">
            <div class="bg-box h-full">
                <div class="report-details">
                    @include('superadmin.reports.tabs')
                    <div class="table-responsive">
                        <div class="cc-table-data-main h-full">
                            <div class="hstack items-center table-filter position-relative">
                                <h2>
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M4.05002 1.5752H13.95C14.775 1.5752 15.45 2.2502 15.45 3.0752V4.7252C15.45 5.3252 15.075 6.0752 14.7 6.4502L11.475 9.3002C11.025 9.6752 10.725 10.4252 10.725 11.0252V14.2502C10.725 14.7002 10.425 15.3002 10.05 15.5252L9.00002 16.2002C8.02502 16.8002 6.67502 16.1252 6.67502 14.9252V10.9502C6.67502 10.4252 6.37502 9.7502 6.07502 9.3752L3.22502 6.3752C2.85002 6.0002 2.55002 5.3252 2.55002 4.8752V3.1502C2.55002 2.2502 3.22502 1.5752 4.05002 1.5752Z" stroke="white" stroke-width="1.89123" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M8.1975 1.5752L4.5 7.5002" stroke="white" stroke-width="1.89123" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <span>Filters</span>
                                    <svg class="down" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12.4557 15.7131L18.5474 9.70309L17.1152 8.28809L12.4557 12.8881L7.79713 8.28809L6.36389 9.70209L12.4557 15.7131Z" fill="#F4F5F7" />
                                    </svg>
                                </h2>
                                <div class="hstack all-filter">
                                    <select name="" id="sortFilter">
                                        <option value="all">All</option>
                                        <option value="today">Today</option>
                                        <option value="yesterday">Yesterday</option>
                                        <option value="1week">1 Week </option>
                                        <option value="2week">2 Week </option>
                                        <option value="1month">1 Month </option>
                                        <option value="6month">6 Month </option>
                                        <option value="1year">1 Year </option>
                                        <option value="custom">Custom </option>
                                    </select>
                                    <input type="date" id="startDate" placeholder="Start date" onfocus="(this.type='date')" style="display: none;">
                                    <input type="date" id="endDate" placeholder="End date" onfocus="(this.type='date')" style="display: none;">
                                </div>
                            </div>
                            <div class="user-list-report">
                                <h2 class="main-heading">User Report List</h2>
                            </div>
                            <table id="user" class="table-data" cellspacing='0'>
                                <thead>
                                    <tr>
                                        <th>Full Name</th>
                                        <th>Reported by</th>
                                        <th>Username </th>
                                        <th>Email Id</th>
                                        <th>Reason of report</th>
                                        <th>Date & Time</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="userReportData">

                                </tbody>
                            </table>
                        <!-- <div id="cardsContainer"></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>
        </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>Report</h4>
        <h5 class="news-delete-heading">Are you sure want delete is this Report?</h5>
        <input type="hidden" name="reportId" id="reportId">
        <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>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#sortFilter').change(function() {
                var selectedOption = $(this).val();
                if (selectedOption === 'custom') {
                    $('#startDate, #endDate').show();
                } else {
                    $('#startDate, #endDate').val('');
                    $('#startDate, #endDate').hide();
                }
            });
        });
        $(function () {
            var table = $('#user').DataTable({
                processing: true,
                // language: {
                //     searchPlaceholder: "Search here..."
                // }, 
                serverSide: true,
                ajax: {
                    url: "{{ route('superadmin.reports') }}",
                    data: function(d) {
                        
                        var selectedValue = $('#sortFilter').val();
                        var startDate = $('#startDate').val();
                        var endDate = $('#endDate').val() ;
                        if (startDate || endDate) {
                            selectedValue = 'custom';
                        }

                        d.type = "user";
                        d.filter = selectedValue; // Assuming you have an element with id 'filter' for your filters
                        d.startDate = startDate; // Assuming you have elements with id 'startDate' and 'endDate' for custom date range
                        d.endDate = endDate;
                    }
                },
                columns: [{
                    data: 'to_u_name'
                    , name: 'to_u_name'
                }
                    , {
                    data: 'reported_by'
                    , name: 'reported_by'
                }
                    , {
                    data: 'to_username'
                    , name: 'to_username'
                }
                    , {
                    data: 'to_email'
                    , name: 'to_email'
                }
                    , {
                    data: 'to_reason'
                    , name: 'to_reason'
                }
                    , {
                    data: 'to_create_at'
                    , name: 'to_create_at'
                }
                    , {
                    data: 'to_status'
                    , name: 'to_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() {
                // console.log(table);
                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.to_name;
                    if (item.to_profilePic != null) {
                        gridHtml += '<img class="table-img" src="' + item.to_profilePic + '" alt="">'
                    } else {
                        gridHtml += '<div class="table-img">' + (new_name == null ? 'CC' : new_name.charAt(0)) + '</div>'
                    }   
                    gridHtml += '<h3>' + (item.to_name == null ? 'NA' : item.to_name) + '</h3>'
                    gridHtml += '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Reported By:</td>'
                    gridHtml += '<td>' + item.rep_name + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>UserName:</td>'
                    gridHtml += '<td>' + item.to_username + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Email:</td>'
                    gridHtml += '<td>' + item.to_email + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Username:</td>'
                    gridHtml += '<td>' + item.to_reason + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Created Date:</td>'
                    gridHtml += '<td>' + item.to_create_at + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Status:</td>'
                    gridHtml += '<td>' + item.to_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 ">' +
                        '<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();
                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
                }
            });

            $(document).on("change", "#sortFilter, #startDate, #endDate", userFilter);
            function userFilter(){
                table.ajax.reload();
            }

            // Event delegation for '.record' elements
            // $(document).on('click', '.record .active-menu', function() {
            //     console.log('hi')
            //     var menuStatus = $(this).closest('.record').find('.menu-status-content');
            //     if (menuStatus) {
            //         menuStatus.toggleClass('active');
            //     } else {
            //         console.error('.menu-status-content element not found');
            //     }
            // });

            // $(document).on('click', '.record .active-menu', function() {
            //     $(this).closest('.menu-status').toggleClass('active');
            // });

            // if (event.target.matches('.active-menu')) {
            //     var menuStatus = document.querySelector('.menu-status');
            //     if (menuStatus) {
            //         menuStatus.classList.toggle('active');
            //     } else {
            //         console.error('.menu-status element not found');
            //     }
            // }
        });
        $(document).ready(function() {

            // Use event delegation for dynamically added elements
            $(document).on("click", ".trash", function() {
                $("body").addClass("bodyscrolling");
                var reportId = $(this).attr('data-reportId');
                $("#reportId").val(reportId);
                $(".delete-post-modal").fadeIn(300);
            });
            $(document).on("click", ".close-modal, .cancel-delete", function() {
                $("body").removeClass("bodyscrolling");
                $(".delete-post-modal").fadeOut(300);
            })

            // function updateActiveMenuLabel(status) {
            //     var activeMenu = document.querySelector('.active-menu');
            //     activeMenu.textContent = (status === 'solved') ? 'Solved' : 'Unsolved';
            //     var svg = '<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.1633 7.71406L12.2551 1.70406L10.8228 0.289062L6.1633 4.88906L1.50477 0.289062L0.0715332 1.70306L6.1633 7.71406Z" fill="#F4F5F7"/></svg>';
            //     activeMenu.insertAdjacentHTML('beforeend', svg);
            //     activeMenu.classList.remove(status === 'solved' ? 'unsolved' : 'solved');
            //     activeMenu.classList.add(status === 'solved' ? 'solved' : 'unsolved');
            //     document.querySelector('.menu-status').classList.remove('active');
            // }

        });
        // $(document).on("change", "#sortFilter", function() {
        //     var selectedValue = $(this).val();
        //     var csrfToken = $('meta[name="csrf-token"]').attr('content');

        // });
    
        $(document).on("change", "#to_status", function() {
            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            var report_id = $(this).attr('data-user_reportId');
            $.ajax({
                url: "{{route('superadmin.user.report.status')}}"
                , type: 'POST'
                , headers: {
                    'X-CSRF-TOKEN': csrfToken // Set the CSRF token in the headers
                }
                , data: {
                    _token: '{{csrf_token()}}'
                    , uuid: report_id
                }
                , success: function(response) {
                    if (response.status == true) {
                        var flag = response.flag;
                        var element = $('.rep_cls[data-user_reportId="' + report_id + '"]');
                        if (flag === 1) {
                            element.removeClass('dark-dropdown'); // Add the 'highlight' class if flag is 1
                            element.addClass('success-dropdown'); // Add the 'highlight' class if flag is 1
                        } else {
                            element.removeClass('success-dropdown'); // Add the 'highlight' class if flag is 1
                            element.addClass('dark-dropdown'); // Remove the 'highlight' class if flag is 0
                        }
                        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('Something went wrong please try again!');
                    // $("body").removeClass("bodyscrolling");
                    // $(".delete-post-modal").fadeOut(300);
                }
            })
        });

        $('#deleteButton').click(function() {
            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            var uuid = $('#reportId').val();
            $.ajax({
                url: "{{route('superadmin.user.report.delete')}}"
                , type: 'POST'
                , headers: {
                    'X-CSRF-TOKEN': csrfToken // Set the CSRF token in the headers
                }
                , data: {
                    _token: '{{csrf_token()}}'
                    , uuid: uuid
                }
                , success: function(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('Something 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.querySelector('.active-menu').addEventListener('click', function() {
        //     document.querySelector('.menu-status').classList.toggle('active');
        // });

    </script>

    @elseif($page_type=='feed')

    <div id="reported-feed" class="show h-full">
        <div class="border-box h-full">
            <div class="bg-box h-full">
                <div class="report-details">
                    @include('superadmin.reports.tabs')
                    <div class="table-responsive">
                        <div class="cc-table-data-main h-full">
                            <div class="hstack items-center table-filter position-relative">
                                <h2>
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M4.05002 1.5752H13.95C14.775 1.5752 15.45 2.2502 15.45 3.0752V4.7252C15.45 5.3252 15.075 6.0752 14.7 6.4502L11.475 9.3002C11.025 9.6752 10.725 10.4252 10.725 11.0252V14.2502C10.725 14.7002 10.425 15.3002 10.05 15.5252L9.00002 16.2002C8.02502 16.8002 6.67502 16.1252 6.67502 14.9252V10.9502C6.67502 10.4252 6.37502 9.7502 6.07502 9.3752L3.22502 6.3752C2.85002 6.0002 2.55002 5.3252 2.55002 4.8752V3.1502C2.55002 2.2502 3.22502 1.5752 4.05002 1.5752Z" stroke="white" stroke-width="1.89123" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M8.1975 1.5752L4.5 7.5002" stroke="white" stroke-width="1.89123" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <span>Filters</span>
                                    <svg class="down" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12.4557 15.7131L18.5474 9.70309L17.1152 8.28809L12.4557 12.8881L7.79713 8.28809L6.36389 9.70209L12.4557 15.7131Z" fill="#F4F5F7" />
                                    </svg>
                                </h2>
                                <div class="hstack all-filter">
                                    <select name="" id="sortFilter">
                                        <option value="all">All</option>
                                        <option value="today">Today</option>
                                        <option value="yesterday">Yesterday</option>
                                        <option value="1week">1 Week </option>
                                        <option value="2week">2 Week </option>
                                        <option value="1month">1 Month </option>
                                        <option value="6month">6 Month </option>
                                        <option value="1year">1 Year </option>
                                        <option value="custom">Custom </option>
                                    </select>
                                    <input type="date" id="startDate" placeholder="Start date" onfocus="(this.type='date')" style="display: none;">
                                    <input type="date" id="endDate" placeholder="End date" onfocus="(this.type='date')" style="display: none;">
                                </div>
                            </div>
                            <div class="user-list-report">
                                <h2 class="main-heading">Feed Report List</h2>
                            </div>
                            <table id="feed_report" class="table-data" cellspacing='0'>
                                <thead>
                                    <tr>
                                        <th>Full Name</th>
                                        <th>Reported by</th>
                                        <th>Username </th>
                                        <th>Email Id </th>
                                        <th>Feeds</th>
                                        <th>Reason of report</th>
                                        <th>Created Date & Time</th>
                                        <th>Status </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>
            </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>Report</h4>
        <h5 class="news-delete-heading">Are you sure want delete is this Report?</h5>
        <input type="hidden" name="reportId" id="reportId">
        <button class="cancel-delete" type="button">Cancel</button>
        <button class="direct-delete" id="deleteButton">Yes, Delete</button>
    </div>

    <script>
        $(document).ready(function() {
            $('#sortFilter').change(function() {
                var selectedOption = $(this).val();
                if (selectedOption === 'custom') {
                    $('#startDate, #endDate').show();
                } else {
                    $('#startDate, #endDate').val('');
                    $('#startDate, #endDate').hide();
                }
            });
        });
        $(function() {
          
            var table = $('#feed_report').DataTable({
                processing: true,
                language: {
                    searchPlaceholder: "Search here..."
                },
                serverSide: true,
                ajax: {
                    url: "{{ route('superadmin.reports') }}",
                    data: function(d) {
                        
                        var selectedValue = $('#sortFilter').val();
                        var startDate = $('#startDate').val();
                        var endDate = $('#endDate').val() ;
                        if (startDate || endDate) {
                            selectedValue = 'custom';
                        }

                        d.type = "{{ $page_type }}";
                        d.filter = selectedValue; // Assuming you have an element with id 'filter' for your filters
                        d.startDate = startDate; // Assuming you have elements with id 'startDate' and 'endDate' for custom date range
                        d.endDate = endDate;
                    }
                },
                columns: [{
                        data: 'to_u_name'
                        , name: 'to_u_name'
                    }, {
                        data: 'reported_by'
                        , name: 'reported_by'
                    }, {
                        data: 'to_username'
                        , name: 'to_username'
                    }, {
                        data: 'to_email'
                        , name: 'to_email'
                    }, {
                        data: 'to_feed_post'
                        , name: 'to_feed_post'
                    }
                    , {
                        data: 'to_reason'
                        , name: 'to_reason'
                    }
                    , {
                        data: 'to_create_at'
                        , name: 'to_create_at'
                    }
                    , {
                        data: 'to_status'
                        , name: 'to_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() {
                // console.log(table);
                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.to_name;
                    // console.log(item.to_profilePic != null);
                    if (item.to_profilePic != null) {
                        gridHtml += '<img class="table-img" src="' + item.to_profilePic + '" alt="">'
                    } else {
                        gridHtml += '<div class="table-img">' + (new_name == null ? 'CC' : new_name.charAt(0)) + '</div>'
                    }
                    console.log(new_name);
                    gridHtml += '<h3>' + (new_name == null ? 'NA' : new_name) + '</h3>'
                    gridHtml += '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Reported By:</td>'
                    gridHtml += '<td>' + item.rep_name + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>UserName:</td>'
                    gridHtml += '<td>' + item.to_username + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Email:</td>'
                    gridHtml += '<td>' + item.to_email + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Feeds:</td>'
                    gridHtml += '<td>' + item.to_feed_post + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Username:</td>'
                    gridHtml += '<td>' + item.to_reason + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Created Date:</td>'
                    gridHtml += '<td>' + item.to_create_at + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Status:</td>'
                    gridHtml += '<td>' + item.to_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 ">' +
                        '<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);
            }

            // Event delegation for '.record' elements
            // $(document).on('click', '.record .active-menu', function() {
            //     console.log('hi')
            //     var menuStatus = $(this).closest('.record').find('.menu-status-content');
            //     if (menuStatus) {
            //         menuStatus.toggleClass('active');
            //     } else {
            //         console.error('.menu-status-content element not found');
            //     }
            // });

            // $(document).on('click', '.record .active-menu', function() {
            //     $(this).closest('.menu-status').toggleClass('active');
            // });

            // if (event.target.matches('.active-menu')) {
            //     var menuStatus = document.querySelector('.menu-status');
            //     if (menuStatus) {
            //         menuStatus.classList.toggle('active');
            //     } else {
            //         console.error('.menu-status element not found');
            //     }
            // }

            $('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
                }
            });
            $(document).on("change", "#sortFilter, #startDate, #endDate", filters);
            function filters(){
                table.ajax.reload();
            }
        });

        $(document).on("change", "#to_status", function() {
            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            var report_id = $(this).attr('data-user_reportId');
            $.ajax({
                url: "{{route('superadmin.feed.report.status')}}"
                , type: 'POST'
                , headers: {
                    'X-CSRF-TOKEN': csrfToken // Set the CSRF token in the headers
                }
                , data: {
                    _token: '{{csrf_token()}}'
                    , uuid: report_id
                }
                , success: function(response) {
                    if (response.status == true) {
                        var flag = response.flag;
                        var element = $('.rep_cls[data-user_reportId="' + report_id + '"]');
                        if (flag === 1) {
                            element.removeClass('dark-dropdown'); // Add the 'highlight' class if flag is 1
                            element.addClass('success-dropdown'); // Add the 'highlight' class if flag is 1
                        } else {
                            element.removeClass('success-dropdown'); // Add the 'highlight' class if flag is 1
                            element.addClass('dark-dropdown'); // Remove the 'highlight' class if flag is 0
                        }
                        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('Something went wrong please try again!');
                    // $("body").removeClass("bodyscrolling");
                    // $(".delete-post-modal").fadeOut(300);
                }
            })
        });

        $(document).ready(function() {
            // Use event delegation for dynamically added elements
            $(document).on("click", ".trash", function() {
                $("body").addClass("bodyscrolling");
                var reportId = $(this).attr('data-reportId');
                $("#reportId").val(reportId);
                $(".delete-post-modal").fadeIn(300);
            });
            $(document).on("click", ".close-modal, .cancel-delete", function() {
                $("body").removeClass("bodyscrolling");
                $(".delete-post-modal").fadeOut(300);
            })

            function updateActiveMenuLabel(status) {
                var activeMenu = document.querySelector('.active-menu');
                activeMenu.textContent = (status === 'solved') ? 'Solved' : 'Unsolved';
                var svg = '<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.1633 7.71406L12.2551 1.70406L10.8228 0.289062L6.1633 4.88906L1.50477 0.289062L0.0715332 1.70306L6.1633 7.71406Z" fill="#F4F5F7"/></svg>';
                activeMenu.insertAdjacentHTML('beforeend', svg);
                activeMenu.classList.remove(status === 'solved' ? 'unsolved' : 'solved');
                activeMenu.classList.add(status === 'solved' ? 'solved' : 'unsolved');
                document.querySelector('.menu-status').classList.remove('active');
            }

        });

        $('#deleteButton').click(function() {
            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            var uuid = $('#reportId').val();
            $.ajax({
                url: "{{route('superadmin.feed.report.delete')}}"
                , type: 'POST'
                , headers: {
                    'X-CSRF-TOKEN': csrfToken // Set the CSRF token in the headers
                }
                , data: {
                    _token: '{{csrf_token()}}'
                    , uuid: uuid
                }
                , success: function(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('Something went wrong please try again!');
                    $("body").removeClass("bodyscrolling");
                    $(".delete-post-modal").fadeOut(300);
                }
            }).done(function(result) {
                $($.fn.dataTable.tables(true)).DataTable().columns.adjust().draw();
            });
        });

    </script>

    @elseif($page_type=='chat')

    <div id="reported-chat" class="chat show h-full">
        <div class="border-box h-full">
            <div class="bg-box h-full">
                <div class="report-details">
                    @include('superadmin.reports.tabs')
                    <div class="table-responsive">
                        <div class="cc-table-data-main h-full">
                            <div class="hstack items-center table-filter position-relative">
                                <h2>
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M4.05002 1.5752H13.95C14.775 1.5752 15.45 2.2502 15.45 3.0752V4.7252C15.45 5.3252 15.075 6.0752 14.7 6.4502L11.475 9.3002C11.025 9.6752 10.725 10.4252 10.725 11.0252V14.2502C10.725 14.7002 10.425 15.3002 10.05 15.5252L9.00002 16.2002C8.02502 16.8002 6.67502 16.1252 6.67502 14.9252V10.9502C6.67502 10.4252 6.37502 9.7502 6.07502 9.3752L3.22502 6.3752C2.85002 6.0002 2.55002 5.3252 2.55002 4.8752V3.1502C2.55002 2.2502 3.22502 1.5752 4.05002 1.5752Z" stroke="white" stroke-width="1.89123" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M8.1975 1.5752L4.5 7.5002" stroke="white" stroke-width="1.89123" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <span>Filters</span>
                                    <svg class="down" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12.4557 15.7131L18.5474 9.70309L17.1152 8.28809L12.4557 12.8881L7.79713 8.28809L6.36389 9.70209L12.4557 15.7131Z" fill="#F4F5F7" />
                                    </svg>
                                </h2>
                                <div class="hstack all-filter">
                                    <select name="" id="sortFilter">
                                        <option value="all">All</option>
                                        <option value="today">Today</option>
                                        <option value="yesterday">Yesterday</option>
                                        <option value="1week">1 Week </option>
                                        <option value="2week">2 Week </option>
                                        <option value="1month">1 Month </option>
                                        <option value="6month">6 Month </option>
                                        <option value="1year">1 Year </option>
                                        <option value="custom">Custom </option>
                                    </select>
                                    <input type="date" id="startDate" placeholder="Start date" onfocus="(this.type='date')" style="display: none;">
                                    <input type="date" id="endDate" placeholder="End date" onfocus="(this.type='date')" style="display: none;">
                            </div>
                        </div>
                        <div class="user-list-report">
                            <h2 class="main-heading">Chat Report List</h2>
                        </div>
                        <table id="chatsreports" class="table-data" cellspacing='0'>
                            <thead>
                                <tr>
                                    <th>Full Name</th>
                                    <th>Reported by </th>
                                    <th>Username </th>
                                    <th>Email </th>
                                    <th>Created Date & Time</th>
                                    <th class="description-heading">Top Chats </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>
            </div>
        </div>
    </div>
    <div class="chat-report-post-modal catholic-modal" style="display: none;"></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>Report</h4>
        <h5 class="news-delete-heading">Are you sure want delete is this Report?</h5>
        <input type="hidden" name="reportId" id="reportId">
        <button class="cancel-delete" type="button">Cancel</button>
        <button class="direct-delete" id="chatDeleteButton">Yes, Delete</button>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#sortFilter').change(function() {
                var selectedOption = $(this).val();
                if (selectedOption === 'custom') {
                    $('#startDate, #endDate').show();
                } else {
                    $('#startDate, #endDate').val('');
                    $('#startDate, #endDate').hide();
                }
            });
        });
        $(function() {
            var table = $('#chatsreports').DataTable({
                processing: true,
                language: {
                    searchPlaceholder: "Search here..."
                },
                serverSide: true,
                ajax: {
                    url: "{{ route('superadmin.reports') }}",
                    data: function(d) {
                        
                        var selectedValue = $('#sortFilter').val();
                        var startDate = $('#startDate').val();
                        var endDate = $('#endDate').val() ;
                        if (startDate || endDate) {
                            selectedValue = 'custom';
                        }

                        d.type = "{{ $page_type }}";
                        d.filter = selectedValue; // Assuming you have an element with id 'filter' for your filters
                        d.startDate = startDate; // Assuming you have elements with id 'startDate' and 'endDate' for custom date range
                        d.endDate = endDate;
                    }
                },
                columns: [{
                        data: 'to_u_name'
                        , name: 'to_u_name'
                    }
                    , {
                        data: 'reported_by'
                        , name: 'reported_by'
                    }
                    , {
                        data: 'to_username'
                        , name: 'to_username'
                    }
                    , {
                        data: 'to_email'
                        , name: 'to_email'
                    }
                    , {
                        data: 'to_create_at'
                        , name: 'to_create_at'
                    }
                    , {
                        data: 'to_chat'
                        , name: 'to_chat'
                    }
                    , {
                        data: 'action'
                        , name: 'action'
                    }
                , ],
                drawCallback: function (settings) {
                    var api = this.api();
                    var pageInfo = api.page.info();
                    updateGridView();
                    renderPagination(pageInfo);
                    renderInfo(pageInfo);
                }
            });
            $('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
                }
            });

            table.on('draw', function () {
                updateGridView();
            });

            function updateGridView() {
                // console.log(table);
                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.to_name;
                    // console.log(item.to_profilePic != null);
                    if (item.to_profilePic != null) {
                        gridHtml += '<img class="table-img" src="' + item.to_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>Reported By:</td>'
                    gridHtml += '<td>' + item.rep_name + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>UserName:</td>'
                    gridHtml += '<td>' + item.to_username + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Email:</td>'
                    gridHtml += '<td>' + item.to_email + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Top Chats:</td>'
                    gridHtml += '<td>' + item.to_chat + '</td>'
                    gridHtml += '</tr>'
                    gridHtml += '<tr>'
                    gridHtml += '<td>Created Date:</td>'
                    gridHtml += '<td>' + item.to_create_at + '</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 ">' +
                        '<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);
            }
            $(document).on("change", "#sortFilter, #startDate, #endDate", filterChatReport);
            function filterChatReport(){
                table.ajax.reload();
            }
        
        });


        $(document).ready(function() {

            // $(document).on("click", ".chat-report-btn", function() {
            //     $(".chat-report-post-modal").fadeIn(300);
            //     $("body").addClass("bodyscrolling");
            // })
            $(document).on("click", ".chat-report-btn", function() {
                var messages = $(this).data('messages');
                var modalContent = '';
                messages.forEach(function(message) {
                    modalContent += '<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"></path></svg>';
                    modalContent += '<p>' + message['chat_message'] + '</p>';
                });
                $(".chat-report-post-modal").html(modalContent).fadeIn(300);
                $("body").addClass("bodyscrolling");
            });

            // Use event delegation for dynamically added elements
            $(document).on("click", ".trash", function() {
                $("body").addClass("bodyscrolling");
                var reportId = $(this).attr('data-reportId');
                $("#reportId").val(reportId);
                $(".delete-post-modal").fadeIn(300);
            });

            $(document).on("click", ".close-modal, .cancel-delete", function() {
                $("body").removeClass("bodyscrolling");
                $(".delete-post-modal").fadeOut(300);
                $(".chat-report-post-modal").fadeOut(300);
            })
        });

        $('#chatDeleteButton').click(function() {
            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            var uuid = $('#reportId').val();
            $.ajax({
                url: "{{route('superadmin.chat.report.delete')}}"
                , type: 'POST'
                , headers: {
                    'X-CSRF-TOKEN': csrfToken // Set the CSRF token in the headers
                }
                , data: {
                    _token: '{{csrf_token()}}'
                    , uuid: uuid
                }
                , success: function(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('Something went wrong please try again!');
                    $("body").removeClass("bodyscrolling");
                    $(".delete-post-modal").fadeOut(300);
                }
            }).done(function(result) {
                $($.fn.dataTable.tables(true)).DataTable().columns.adjust().draw();
            });
        });
    </script>
    @endif
</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>
    <h4>Delete User</h4>
    <button class="direct-delete">Direct Delete</button>
    <div class="or"></div>
    <h5>Get Notified User</h5>
    <p>Are you sure delete User profile and prevent them from creating a new profile with their specific device, email or phone number.</p>
    <ul class="hstack">
        <li>
            <input type="checkbox" name="" id="sendmail">
            <span class="checkmark"></span>
            <label for="sendmail">Send via email</label>
        </li>
        <li>
            <input type="checkbox" name="" id="sendmessage">
            <span class="checkmark"></span>
            <label for="sendmessage">Send via message</label>
        </li>
    </ul>
    <button class="delete-post">Delete User</button>
</div> -->
@endsection
@section('script')
<script>
    $(document).ready(function() {
        $('#user').DataTable();
        $('#chatsreports').DataTable();
        $('#feed_report').DataTable();
    });

</script>
@endsection