<?php $__env->startSection('sub_content'); ?>
    <div class="customer-layout-body">
        <div class="row gy-3 mb-10">
            <div class="col-xxl-4">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="agent-analytics-card-wrapper">
                            <div class="agent-analytics-card">
                                <h3 class="fw-normal mb-2 openTicket"> </h3>
                                <p class="title"><?php echo app('translator')->get('Open Tickets'); ?></p>
                            </div>
                            <div class="agent-analytics-card">
                                <h3 class="fw-normal mb-2 answeredTicket"></h3>
                                <p class="title"><?php echo app('translator')->get('Answered Tickets'); ?></p>
                            </div>
                            <div class="agent-analytics-card">
                                <h3 class="fw-normal mb-2 closedTicket"></h3>
                                <p class="title"><?php echo app('translator')->get('Closed Tickets'); ?></p>
                            </div>
                        </div>

                        <div class="agent-analytics-chart-wrapper">
                            <div id="agent-analytics-chart" class="chart-container pie-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-4 col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="flex-between gap-3 mb-120">
                            <div class="flex-grow-1 lh-1 text-center">
                                <h3 class="fw-normal mb-2">
                                    <span class="avgResponseTime"></span> <small class="fs-12 text--body"><?php echo app('translator')->get('hrs'); ?></small>
                                </h3>
                                <p class="fs-12">
                                    <?php echo app('translator')->get('Average Response Time'); ?>
                                </p>
                            </div>
                            <div class="flex-grow-1 lh-1 text-center">
                                <h3 class="fw-normal mb-2">
                                    <span class="avgResolutionTime"></span> <small class="fs-12 text--body"><?php echo app('translator')->get('hrs'); ?></small>
                                </h3>
                                <p class="fs-12">
                                    <?php echo app('translator')->get('Average Resolution Time'); ?>
                                </p>
                            </div>
                        </div>

                        <div class="mb-60">
                            <div class="flex-between">
                                <p class="fs-12 text--dark"><?php echo app('translator')->get('First Response Time'); ?></p>
                                <p class="fs-12 text--dark avgFirstResponseTime"></p>
                            </div>
                            <div class="progress progress-sm mt-1" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg--success firstResponseProgress"></div>
                            </div>
                        </div>
                        <div class="mb-60">
                            <div class="flex-between">
                                <p class="fs-12 text--dark"><?php echo app('translator')->get('Average Response Time'); ?></p>
                                <p class="fs-12 text--dark avgResponseTime"></p>
                            </div>
                            <div class="progress progress-sm mt-1" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg--warning responseProgress"></div>
                            </div>
                        </div>
                        <div class="mb-60">
                            <div class="flex-between">
                                <p class="fs-12 text--dark"><?php echo app('translator')->get('Average Resolution Time'); ?></p>
                                <p class="fs-12 text--dark avgResolutionTime"></p>
                            </div>
                            <div class="progress progress-sm mt-1" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg--base resolutionProgress"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-4 col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="mb-120">
                            <div class="text-center">
                                <h3 class="mb-2">😀 <span class="greatPercent"></span></h3>
                                <p class="fs-12"><?php echo app('translator')->get('Happiness Rating'); ?></p>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="flex-between">
                                <p class="fs-12 text--dark"><?php echo app('translator')->get('Rated Great'); ?></p>
                                <p class="fs-12 text--dark greatPercent"></p>
                            </div>
                            <div class="progress progress-sm mt-1" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg--success greatProgress"></div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="flex-between">
                                <p class="fs-12 text--dark"><?php echo app('translator')->get('Rated Okay'); ?></p>
                                <p class="fs-12 text--dark okayPercent"></p>
                            </div>
                            <div class="progress progress-sm mt-1" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg--warning okayProgress"></div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="flex-between">
                                <p class="fs-12 text--dark"><?php echo app('translator')->get('Rated Bad'); ?></p>
                                <p class="fs-12 text--dark badPercent"></p>
                            </div>
                            <div class="progress progress-sm mt-1" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg--base badProgress"></div>
                            </div>
                        </div>

                        <div class="flex-align gap-3">
                            <p class="fs-14 text--dark">😀 <span class="greatCount"></span> <?php echo app('translator')->get('Rated Great'); ?></p>
                            <p class="fs-14 text--dark">😐 <span class="okayCount"></span> <?php echo app('translator')->get('Rated Okay'); ?></p>
                            <p class="fs-14 text--dark">😡 <span class="badCount"></span> <?php echo app('translator')->get('Rated Bad'); ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header flex-between">
                <p class="card-title"><?php echo app('translator')->get('Tickets Volume'); ?></p>
            </div>
            <div class="card-body">
                <div id="tickets-volume-chart" class="chart-container"></div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>

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

            let duration = 'last_30_days';

            $('.changeDuration').on('click', function() {
                duration = $(this).data('duration');
                loadChart();
            });

            loadChart();

            function loadChart() {
                $.ajax({
                    url: `<?php echo e(route('admin.agent.analytics', $admin->id)); ?>`,
                    type: 'GET',
                    data: {
                        duration
                    },
                    success: function(response) {
                        $('.openTicket').text(response.open_ticket_count);
                        $('.answeredTicket').text(response.answered_ticket_count);
                        $('.closedTicket').text(response.closed_ticket_count);

                        $('.avgFirstResponseTime').text(response.avg_first_response_text);
                        $('.avgResponseTime').text(response.avg_response_text);
                        $('.avgResolutionTime').text(response.avg_resolution_text);

                        $('.firstResponseProgress').css('width', response.avg_first_response_ratio + '%');
                        $('.responseProgress').css('width', response.avg_response_ratio + '%');
                        $('.resolutionProgress').css('width', response.avg_resolution_ratio + '%');

                        $('.greatPercent').text(response.great_percent.toFixed(2) + '%');
                        $('.okayPercent').text(response.okay_percent.toFixed(2) + '%');
                        $('.badPercent').text(response.bad_percent.toFixed(2) + '%');

                        $('.greatCount').text(response.great_count);
                        $('.okayCount').text(response.okay_count);
                        $('.badCount').text(response.bad_count);

                        $('.greatProgress').css('width', response.great_percent + '%');
                        $('.okayProgress').css('width', response.okay_percent + '%');
                        $('.badProgress').css('width', response.bad_percent + '%');

                        showCreatedViaChart(response);
                        showVolumeChart(response.volume_keys, response.volume_values)
                    },
                    error: function(xhr) {
                        console.error('Error loading analytics:', xhr);
                    }
                });
            }

            function showCreatedViaChart(response) {
                if ($('#agent-analytics-chart').length > 0) {
                    renderPieCircleBorderChart({
                        elementId: 'agent-analytics-chart',
                        data: [{
                                value: response.created_via_admin,
                                name: 'Created via Admin',
                                itemStyle: {
                                    color: '#CD375A'
                                }
                            },
                            {
                                value: response.created_via_web,
                                name: 'Created via Web',
                                itemStyle: {
                                    color: '#4FCE3B'
                                }
                            },
                            {
                                value: response.created_via_email,
                                name: 'Created via Email',
                                itemStyle: {
                                    color: '#3769CD'
                                }
                            }
                        ]
                    });
                }
            }

            function showVolumeChart(key, value) {
                if ($('#tickets-volume-chart').length > 0) {
                    renderDotLineChart({
                        elementId: 'tickets-volume-chart',
                        data: value,
                        colors: ['#28A745'],
                        xAxisData: key,
                        isTime: false
                    });
                }
            }

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

<?php echo $__env->make('admin.agent.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/agent/overview.blade.php ENDPATH**/ ?>