@extends('admin.agent.index')

@section('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">@lang('Open Tickets')</p>
                            </div>
                            <div class="agent-analytics-card">
                                <h3 class="fw-normal mb-2 answeredTicket"></h3>
                                <p class="title">@lang('Answered Tickets')</p>
                            </div>
                            <div class="agent-analytics-card">
                                <h3 class="fw-normal mb-2 closedTicket"></h3>
                                <p class="title">@lang('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">@lang('hrs')</small>
                                </h3>
                                <p class="fs-12">
                                    @lang('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">@lang('hrs')</small>
                                </h3>
                                <p class="fs-12">
                                    @lang('Average Resolution Time')
                                </p>
                            </div>
                        </div>

                        <div class="mb-60">
                            <div class="flex-between">
                                <p class="fs-12 text--dark">@lang('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">@lang('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">@lang('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">@lang('Happiness Rating')</p>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="flex-between">
                                <p class="fs-12 text--dark">@lang('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">@lang('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">@lang('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> @lang('Rated Great')</p>
                            <p class="fs-14 text--dark">😐 <span class="okayCount"></span> @lang('Rated Okay')</p>
                            <p class="fs-14 text--dark">😡 <span class="badCount"></span> @lang('Rated Bad')</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header flex-between">
                <p class="card-title">@lang('Tickets Volume')</p>
            </div>
            <div class="card-body">
                <div id="tickets-volume-chart" class="chart-container"></div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        (function($) {
            "use strict";

            let duration = 'last_30_days';

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

            loadChart();

            function loadChart() {
                $.ajax({
                    url: `{{ 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>
@endpush
