<?php $__env->startSection('sub_content'); ?>
    <div class="row g-3">
        <div class="col-xl-12">
            <div class="card h-100">
                <div class="card-header flex-between gap-3">
                    <p class="card-title fw-medium"><?php echo app('translator')->get('Tickets by Departments'); ?></p>
                    <div class="flex-align gap-3 cursor-pointer">

                        <?php echo $__env->make('admin.common.department_dropdown', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

                        <p class="fs-14 refreshDepartment">
                            <?php echo app('translator')->get('Refresh'); ?>
                            <i class="las la-redo-alt"></i>
                        </p>
                    </div>

                </div>
                <div class="card-body p-0">
                    <div id="ticketsByDepartmentsChart" class="chart-container"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header flex-between gap-3">
                    <p class="card-title fw-medium"><?php echo app('translator')->get('Tickets Opened by Channels'); ?></p>
                    <p class="fs-14 cursor-pointer refreshChannel"> <?php echo app('translator')->get('Refresh'); ?> <i class="las la-redo-alt"></i>
                    </p>
                </div>
                <div class="card-body p-0 ">
                    <div id="ticketsSolvedByChannelsChart" class="chart-container pie-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header flex-between gap-3">
                    <p class="card-title fw-medium"><?php echo app('translator')->get('Solved Tickets by Ratings'); ?></p>
                    <div class="flex-align gap-3">
                        <div class="dropdown">
                            <button class="dropdown-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="dropdownText"><?php echo app('translator')->get('All Ratings'); ?></span>
                                <span class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        viewBox="0 0 16 16" fill="none">
                                        <path d="M7.9987 11.3333L12.6654 6H3.33203L7.9987 11.3333Z" fill="currentColor"
                                            fill-opacity="0.4" />
                                    </svg>
                                </span>
                            </button>
                            <ul class="dropdown-menu">
                                <li class="dropdown-item">
                                    <div class="dropdown-link ratingOption"><?php echo app('translator')->get('All Ratings'); ?></div>
                                </li>
                                <li class="dropdown-item">
                                    <div class="dropdown-link" data-rating="great"><?php echo app('translator')->get('Great'); ?></div>
                                </li>
                                <li class="dropdown-item">
                                    <div class="dropdown-link" data-rating="okay"><?php echo app('translator')->get('Okay'); ?></div>
                                </li>
                                <li class="dropdown-item">
                                    <div class="dropdown-link" data-rating="bad"><?php echo app('translator')->get('Bad'); ?></div>
                                </li>
                            </ul>
                        </div>
                        <p class="fs-14 cursor-pointer refreshRating"> <?php echo app('translator')->get('Refresh'); ?> <i
                                class="las la-redo-alt"></i></p>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="solved-rated-wrapper ratedStatistics">
                        <div class="solved-rated">
                            <span class="solved-rated-text"><?php echo app('translator')->get('Rated Great'); ?></span>
                            <h5 class="solved-rated-value ratedGreat">
                            </h5>
                        </div>
                        <div class="solved-rated warning-style">
                            <span class="solved-rated-text"><?php echo app('translator')->get('Rated Okay'); ?></span>
                            <h5 class="solved-rated-value ratedOkay">
                            </h5>
                        </div>
                        <div class="solved-rated danger-style">
                            <span class="solved-rated-text"><?php echo app('translator')->get('Rated Bad'); ?></span>
                            <h5 class="solved-rated-value ratedBad">
                            </h5>
                        </div>
                    </div>
                    <div id="SolvedTicketsByRatingsChart" class="chart-container"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header flex-between gap-3">
                    <p class="card-title fw-medium"><?php echo app('translator')->get('Agent First Response Time'); ?></p>
                    <div class="flex-align gap-3">
                        <?php echo $__env->make('admin.common.agent_dropdown', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                        <p class="fs-14 refreshAgent cursor-pointer"><?php echo app('translator')->get('Refresh'); ?> <i class="las la-redo-alt"></i>
                        </p>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div id="agentFirstResponseTimeChart" class="chart-container"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header flex-between gap-3">
                    <p class="card-title fw-medium"><?php echo app('translator')->get('Channel Wise Agent Response Time'); ?></p>
                    <p class="fs-14 cursor-pointer refreshResponseTime"> <?php echo app('translator')->get('Refresh'); ?> <i
                            class="las la-redo-alt"></i></p>
                </div>
                <div class="card-body p-0">
                    <div id="channelWiseAgentResponseTimeChart" class="pie-chart chart-container"></div>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('script'); ?>
    <script>
        (function($) {
            "use strict";

            function setupFilter(options) {
                let filterId = '';
                const {
                    optionSelector,
                    refreshSelector,
                    ajaxUrl,
                    ajaxParam,
                    chartElementId,
                    chartCallback
                } = options;

                $(optionSelector).on('click', function() {
                    filterId = $(this).data(ajaxParam);
                    loadData();
                });

                $(refreshSelector).on('click', function() {
                    $('#' + chartElementId).parent().css('opacity', 0);
                    loadData();
                }).click();

                function loadData() {
                    $.ajax({
                        url: ajaxUrl,
                        type: 'GET',
                        data: {
                            [ajaxParam]: filterId
                        },
                        success: function(response) {
                            $('#' + chartElementId).parent().css('opacity', 1);
                            chartCallback(response, filterId);
                        },
                        error: function(xhr) {
                            console.error('Error loading analytics:', xhr);
                        }
                    });
                }
            }

            function showChart(elementId, response, chartName, showOnly = null) {
                if ($('#' + elementId).length > 0) {

                    if (chartName == 'renderMultiBarChart') {
                        let data = [];
                        if (response.great) {
                            data.push({
                                name: 'Great',
                                values: response.great
                            });
                        }
                        if (response.okay) {
                            data.push({
                                name: 'Okay',
                                values: response.okay
                            });
                        }
                        if (response.bad) {
                            data.push({
                                name: 'Bad',
                                values: response.bad
                            });
                        }

                        if (response.statistics) {
                            $('.ratedStatistics').show();
                            $('.ratedGreat').html(
                                `${response.statistics.great} <small>(${response.statistics.great_percent}%)</small>`
                            );
                            $('.ratedOkay').html(
                                `${response.statistics.okay} <small>(${response.statistics.okay_percent}%)</small>`);
                            $('.ratedBad').html(
                                `${response.statistics.bad} <small>(${response.statistics.bad_percent}%)</small>`);
                        } else {
                            $('.ratedStatistics').hide();
                        }

                        renderMultiBarChart({
                            elementId: elementId,
                            data: data,
                            colors: ['#4FCE3B', '#F6DF11', '#DC3848'],
                            xAxisData: response.keys
                        });
                    } else if (chartName == 'renderPieChart') {
                        renderPieChart({
                            elementId: elementId,
                            data: [{
                                    value: response.admin_percent,
                                    name: `Admin (${response.admin})`,
                                    itemStyle: {
                                        color: '#CD375A'
                                    }
                                },
                                {
                                    value: response.web_percent,
                                    name: `Web (${response.web})`,
                                    itemStyle: {
                                        color: '#4FCE3B'
                                    }
                                },
                                {
                                    value: response.email_percent,
                                    name: `Email (${response.email})`,
                                    itemStyle: {
                                        color: '#3769CD'
                                    }
                                }
                            ],
                        });
                    } else {
                        window[chartName]({
                            elementId: elementId,
                            data: response.values,
                            colors: ['#3769CD', '#4FCE3B', '#00A8E5', '#4FCE3B', '#00A8E5', '#4FCE3B',
                                '#00A8E5', '#4FCE3B'
                            ],
                            xAxisData: response.keys
                        });
                    }

                }
            }

            setupFilter({
                optionSelector: '.departmentOption',
                refreshSelector: '.refreshDepartment',
                ajaxUrl: "<?php echo e(route('admin.analytics.ticket.data.department.days.seven')); ?>",
                ajaxParam: 'department',
                chartElementId: 'ticketsByDepartmentsChart',
                chartCallback: function(response) {
                    showChart('ticketsByDepartmentsChart', response, 'renderBarChart');
                }
            });

            setupFilter({
                optionSelector: '',
                refreshSelector: '.refreshChannel',
                ajaxUrl: "<?php echo e(route('admin.analytics.ticket.data.channel.days.seven')); ?>",
                ajaxParam: '',
                chartElementId: 'ticketsSolvedByChannelsChart',
                chartCallback: function(response) {
                    showChart('ticketsSolvedByChannelsChart', response, 'renderPieChart');
                }
            });

            setupFilter({
                optionSelector: '.ratingOption, .dropdown-link[data-rating]',
                refreshSelector: '.refreshRating',
                ajaxUrl: "<?php echo e(route('admin.analytics.ticket.data.rating.days.seven')); ?>",
                ajaxParam: 'rating',
                chartElementId: 'SolvedTicketsByRatingsChart',
                chartCallback: function(response, filterId) {
                    showChart('SolvedTicketsByRatingsChart', response, 'renderMultiBarChart', filterId);
                }
            });

            setupFilter({
                optionSelector: '.agentOption',
                refreshSelector: '.refreshAgent',
                ajaxUrl: "<?php echo e(route('admin.analytics.agent.first.response.seven.days')); ?>",
                ajaxParam: 'agent',
                chartElementId: 'agentFirstResponseTimeChart',
                chartCallback: function(response) {
                    showChart('agentFirstResponseTimeChart', response, 'renderDotLineChart');
                }
            });

            setupFilter({
                optionSelector: '',
                refreshSelector: '.refreshResponseTime',
                ajaxUrl: "<?php echo e(route('admin.analytics.ticket.data.response.time.seven.days')); ?>",
                ajaxParam: '',
                chartElementId: 'channelWiseAgentResponseTimeChart',
                chartCallback: function(response) {
                    showChart('channelWiseAgentResponseTimeChart', response, 'renderPieChart');
                }
            });

        })(jQuery);
    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('admin.analytics.index', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\projects\custom_viserdesk\Files\core\resources\views/admin/analytics/seven_days_ticket.blade.php ENDPATH**/ ?>