@extends('superadmin.layouts.app')
@section('content')

<section class="dashboard-page-main w-full h-full overflow-auto">
    <h2 class="main-heading">Dashboard</h2>
    <div class="row items-stretch dashboard-data-main h-full">
        <div class="col col-12 col-lg-4">
            <a href="{{ route('superadmin.users') }}">
                <div class="dashboard-box">
                    <div class="hstack justify-between">
                        <div class="vstack justify-between">
                            <p>Total Users</p>
                            <h3>{{$totalUser}}</h3>
                        </div>
                        <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M22.5 5C15.95 5 10.625 10.325 10.625 16.875C10.625 23.3 15.65 28.5 22.2 28.725C22.4 28.7 22.6 28.7 22.75 28.725C22.8 28.725 22.825 28.725 22.875 28.725C22.9 28.725 22.9 28.725 22.925 28.725C29.325 28.5 34.35 23.3 34.375 16.875C34.375 10.325 29.05 5 22.5 5Z"
                                fill="white" />
                            <path
                                d="M35.2 35.375C28.225 30.725 16.85 30.725 9.825 35.375C6.65 37.5 4.9 40.375 4.9 43.45C4.9 46.525 6.65 49.375 9.8 51.475C13.3 53.825 17.9 55 22.5 55C27.1 55 31.7 53.825 35.2 51.475C38.35 49.35 40.1 46.5 40.1 43.4C40.075 40.325 38.35 37.475 35.2 35.375Z"
                                fill="white" />
                            <path
                                d="M49.975 18.35C50.375 23.2 46.925 27.45 42.15 28.025C42.125 28.025 42.125 28.025 42.1 28.025H42.025C41.875 28.025 41.725 28.025 41.6 28.075C39.175 28.2 36.95 27.425 35.275 26C37.85 23.7 39.325 20.25 39.025 16.5C38.85 14.475 38.15 12.625 37.1 11.05C38.05 10.575 39.15 10.275 40.275 10.175C45.175 9.75 49.55 13.4 49.975 18.35Z"
                                fill="white" />
                            <path
                                d="M54.975 41.475C54.775 43.9 53.225 46 50.625 47.425C48.125 48.8 44.975 49.45 41.85 49.375C43.65 47.75 44.7 45.725 44.9 43.575C45.15 40.475 43.675 37.5 40.725 35.125C39.05 33.8 37.1 32.75 34.975 31.975C40.5 30.375 47.45 31.45 51.725 34.9C54.025 36.75 55.2 39.075 54.975 41.475Z"
                                fill="white" />
                        </svg>
                    </div>
                </div>
            </a>
        </div>
        <div class="col col-12 col-md-6 col-lg-4">
            <div class="border-box">
                <div class="bg-box">
                    <a href="{{ route('superadmin.user.blocked') }}">
                        <div class="dashboard-box-design">
                            <div class="hstack justify-between">
                                <div class="vstack justify-between">
                                    <p>Block User</p>
                                    <h3>{{$totalBlockUser}}</h3>
                                </div>
                                <svg class="icon-box" width="60" height="60" viewBox="0 0 60 60" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M47.5 20.8333C52.1 20.8333 55.8334 17.1 55.8334 12.5C55.8334 7.9 52.1 4.16667 47.5 4.16667C42.9 4.16667 39.1667 7.9 39.1667 12.5C39.1667 17.1 42.9 20.8333 47.5 20.8333Z"
                                        stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M53.25 6.66667L41.5833 18.3333" stroke="white" stroke-width="3"
                                        stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                    <path
                                        d="M55 30C55 26.725 54.375 23.575 53.2 20.7C52.425 21.25 51.55 21.675 50.625 21.975C50.35 22.075 50.075 22.15 49.775 22.225C50.725 24.625 51.25 27.25 51.25 30C51.25 35.8 48.9 41.075 45.1 44.925C44.375 44 43.45 43.15 42.35 42.425C35.575 37.875 24.475 37.875 17.65 42.425C16.55 43.15 15.65 44 14.9 44.925C11.1 41.075 8.75 35.8 8.75 30C8.75 18.275 18.275 8.75 30 8.75C32.725 8.75 35.35 9.275 37.75 10.225C37.825 9.925 37.9 9.65 38 9.35C38.3 8.425 38.725 7.575 39.3 6.8C36.425 5.625 33.275 5 30 5C16.225 5 5 16.225 5 30C5 37.25 8.125 43.775 13.075 48.35C13.075 48.375 13.075 48.375 13.05 48.4C13.3 48.65 13.6 48.85 13.85 49.075C14 49.2 14.125 49.325 14.275 49.425C14.725 49.8 15.225 50.15 15.7 50.5C15.875 50.625 16.025 50.725 16.2 50.85C16.675 51.175 17.175 51.475 17.7 51.75C17.875 51.85 18.075 51.975 18.25 52.075C18.75 52.35 19.275 52.6 19.825 52.825C20.025 52.925 20.225 53.025 20.425 53.1C20.975 53.325 21.525 53.525 22.075 53.7C22.275 53.775 22.475 53.85 22.675 53.9C23.275 54.075 23.875 54.225 24.475 54.375C24.65 54.425 24.825 54.475 25.025 54.5C25.725 54.65 26.425 54.75 27.15 54.825C27.25 54.825 27.35 54.85 27.45 54.875C28.3 54.95 29.15 55 30 55C30.85 55 31.7 54.95 32.525 54.875C32.625 54.875 32.725 54.85 32.825 54.825C33.55 54.75 34.25 54.65 34.95 54.5C35.125 54.475 35.3 54.4 35.5 54.375C36.1 54.225 36.725 54.1 37.3 53.9C37.5 53.825 37.7 53.75 37.9 53.7C38.45 53.5 39.025 53.325 39.55 53.1C39.75 53.025 39.95 52.925 40.15 52.825C40.675 52.6 41.2 52.35 41.725 52.075C41.925 51.975 42.1 51.85 42.275 51.75C42.775 51.45 43.275 51.175 43.775 50.85C43.95 50.75 44.1 50.625 44.275 50.5C44.775 50.15 45.25 49.8 45.7 49.425C45.85 49.3 45.975 49.175 46.125 49.075C46.4 48.85 46.675 48.625 46.925 48.4C46.925 48.375 46.925 48.375 46.9 48.35C51.875 43.775 55 37.25 55 30Z"
                                        fill="white" />
                                    <path
                                        d="M30 17.325C24.825 17.325 20.625 21.525 20.625 26.7C20.625 31.775 24.6 35.9 29.875 36.05C29.95 36.05 30.05 36.05 30.1 36.05C30.15 36.05 30.225 36.05 30.275 36.05C30.3 36.05 30.325 36.05 30.325 36.05C35.375 35.875 39.35 31.775 39.375 26.7C39.375 21.525 35.175 17.325 30 17.325Z"
                                        fill="white" />
                                </svg>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="col col-12 col-md-6 col-lg-4">
            <div class="border-box">
                <div class="bg-box">
                    <a href="{{ route('superadmin.posts', ['filters=feedall']) }}">
                        <div class="dashboard-box-design">
                            <div class="hstack justify-between">
                                <div class="vstack justify-between">
                                    <p>Total Post Feeds</p>
                                    <h3>{{$postData['totalPost']}}</h3>
                                </div>
                                <svg width="60" class="icon-box" height="60" viewBox="0 0 60 60" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M55 37.5V22.5C55 18.35 51.65 15 47.5 15H12.5C8.35 15 5 18.35 5 22.5V37.5C5 41.65 8.35 45 12.5 45H47.5C51.65 45 55 41.65 55 37.5Z"
                                        fill="white" />
                                    <path
                                        d="M14.825 48.75H45.175C45.975 48.75 46.55 49.475 46.4 50.25C45.725 53.95 43.55 55 38.325 55H21.675C16.425 55 14.275 53.95 13.6 50.25C13.45 49.475 14.025 48.75 14.825 48.75Z"
                                        fill="white" />
                                    <path
                                        d="M21.675 5H38.325C43.575 5 45.725 6.05 46.4 9.75C46.55 10.525 45.95 11.25 45.175 11.25H14.825C14.025 11.25 13.45 10.525 13.6 9.75C14.275 6.05 16.425 5 21.675 5Z"
                                        fill="white" />
                                </svg>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="col col-12 col-lg-8">
            <div class="border-box">
                <div class="bg-box">
                    <div class="hstack justify-between overview-chart items-center">
                        <h4>Users Overview</h4>
                        <select name="user_overview" id="user_overview" class="dark-dropdown">
                            <option value="1">Current Month</option>
                            <option value="2">Last 3 Month</option>
                            <option value="3">Last 6 Month</option>
                            <option value="4" selected>This Year</option>
                            <option value="5">Last Year</option>
                        </select>
                    </div>
                    <div style="height: 350px;">
                        <canvas id="chart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col col-12 col-lg-4">
            <div class="border-box">
                <div class="bg-box h-full">
                    <div class="hstack justify-between overview-chart items-center">
                        <h4>Feeds Average</h4>
                    </div>
                    <div style="height: 280px;">
                        <canvas id="myChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col col-12">
            <div class="border-box">
                <div class="bg-box">
                    <div class="hstack justify-between overview-chart items-center">
                        <h4>User Report</h4>
                    </div>
                    <div class="table-responsive">
                        <div class="cc-table-data-main">
                            <table class="table-data" cellspacing='0' id="user">
                                <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></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>
</section>
<div class="delete-post-modal report-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>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>
@endsection

@section('script')
<script>
    // var data = {
    //     labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    //     , datasets: [{
    //         label: "Users Overview"
    //         , backgroundColor: "#6A58FB"
    //         , hoverBackgroundColor: "#6A58FB"
    //         , data: [110, 175, 160, 260, 125, 275, 180, 175, 175, 320, 210, 140]
    //         ,
    //     }]
    // };

    var options = {
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false,
            },
            tooltip: {
                backgroundColor: '#1E1E1E'
            }
        },
        scales: {
            y: {
                stacked: true
                , grid: {
                    display: true
                    , borderDash: [4]
                    , color: "#6A6E83"
                }
            },
            x: {
                grid: {
                    display: false
                }
            }
        }
    };

    // new Chart('chart', {
    //     type: 'bar', 
    //     options: options,
    //     data: data
    // });



    // Make an API call to retrieve the data
    $(document).ready(function () {
        var myChart; // Define a variable to store the chart instance
        getUserReport(); // Initial call to get user report

        $('#user_overview').change(function () {
            // Destroy the existing chart before making a new AJAX call
            if (myChart) {
                myChart.destroy();
            }
            getUserReport(); // Call to get user report based on dropdown selection
        });
        function getUserReport() {
            var filter_by = $("#user_overview").val();
            $.ajax({
                url: "{{route('superadmin.dashboard.user.graph')}}",
                type: 'GET',
                data: { filter_by: filter_by },
                success: function (response) {
                    
                    var data = {
                        labels: response.data.users_month,//["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                        datasets: [{
                            label: "Users Overview",
                            backgroundColor: "#6A58FB",
                            hoverBackgroundColor: "#6A58FB",
                            data: response.data.user_total,//[110, 175, 160, 260, 125, 275, 180, 175, 175, 320, 210, 140]
                        }]
                    };
                    // Initialize the chart with the retrieved data
                    myChart = new Chart('chart', {
                        type: 'bar',
                        options: options,
                        data: data
                    });
                },
                error: function (xhr, status, error) {
                    // Handle error
                }
            });
        }
    });
    $(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);
            }
        })
    });

    $(function () {
        var table = $('#user').DataTable({
            processing: true,
            language: {
                searchPlaceholder: "Search here..."
            },
            serverSide: true,
            ajax: "{{ route('superadmin.dashboard') }}",
            "order": [[5, "desc" ]],
            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() {
            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 to_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">'+(to_name==null ? 'CC' : to_name.charAt(0)) +'</div>'
                }
                gridHtml += '<h3>'+(to_name==null ? 'NA' : to_name)+'</h3>'
                gridHtml += '</td>'
                gridHtml += '</tr>'
                gridHtml += '<tr><td>Reported by:</td>'
                gridHtml += '<td>'
                let rep_name = item.rep_name;
                // if(item.rep_profilePic!=null){
                //     gridHtml += '<img class="table-img" src="'+item.rep_profilePic+'" alt="">'
                // }else{
                //     gridHtml += '<div class="table-img">'+(rep_name==null ? 'CC' : rep_name.charAt(0)) +'</div>'
                // }
                gridHtml += '<h3>'+(rep_name==null ? 'NA' : rep_name)+'</h3>'
                gridHtml += '</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>Reason of Report:</td>'
                gridHtml += '<td>'+item.reason+'</td>'
                gridHtml += '</tr>'
                gridHtml += '<tr>'
                gridHtml += '<td>Date & Time:</td>'
                gridHtml += '<td>'+item.createdAt+'</td>'
                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 = '';

                // 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="page-item ' + (current === pages - 1 ? 'disabled' : '') + '">' +
                         '<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 === 'DESC' || sortOrder === 'ASC' || sortOrder == 'follower') {
                table.order([columnIndex, sortOrder]).draw(); // Sort by 'last_login' column
            }
        });

    });
    $(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);
    });
    $('#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();
        });
    });
</script>
<script>
    var ctx = document.getElementById("myChart").getContext('2d');

    var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Photos", "Videos"],
            datasets: [{
                data: [{{ $postData['totalPostImage']}}, {{ $postData['totalPostVideo']}}], // Specify the data values arrayAdd custom color border 
        backgroundColor: ['#6A58FB', '#FFFFFF'], // Add custom color background (Points and Fill)
        borderWidth: 0 // Specify bar border width
    }]
        }, options: {
        responsive: true, // Instruct chart js to respond nicely.
            maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
                offset: "10",
                    plugins: {
            legend: {
                labels: {
                    color: "#A6ACBE",
                        font: { size: '16px' }
                },
                align: "start",
                },
            tooltip: {
                // position:{
                xAlign: 'left', yAlign: 'center',
                    // }
                }
        },
    },
    });
</script>
@endsection