@extends('admin.analytics.index')

@section('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">@lang('Tickets by Departments')</p>
                    <div class="flex-align gap-3 cursor-pointer">

                        @include('admin.common.department_dropdown')

                        <p class="fs-14 refreshDepartment">
                            @lang('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">@lang('Tickets Opened by Channels')</p>
                    <p class="fs-14 cursor-pointer refreshChannel"> @lang('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">@lang('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">@lang('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">@lang('All Ratings')</div>
                                </li>
                                <li class="dropdown-item">
                                    <div class="dropdown-link" data-rating="great">@lang('Great')</div>
                                </li>
                                <li class="dropdown-item">
                                    <div class="dropdown-link" data-rating="okay">@lang('Okay')</div>
                                </li>
                                <li class="dropdown-item">
                                    <div class="dropdown-link" data-rating="bad">@lang('Bad')</div>
                                </li>
                            </ul>
                        </div>
                        <p class="fs-14 cursor-pointer refreshRating"> @lang('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">@lang('Rated Great')</span>
                            <h5 class="solved-rated-value ratedGreat">
                            </h5>
                        </div>
                        <div class="solved-rated warning-style">
                            <span class="solved-rated-text">@lang('Rated Okay')</span>
                            <h5 class="solved-rated-value ratedOkay">
                            </h5>
                        </div>
                        <div class="solved-rated danger-style">
                            <span class="solved-rated-text">@lang('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">@lang('Agent First Response Time')</p>
                    <div class="flex-align gap-3">
                        @include('admin.common.agent_dropdown')
                        <p class="fs-14 refreshAgent cursor-pointer">@lang('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">@lang('Channel Wise Agent Response Time')</p>
                    <p class="fs-14 cursor-pointer refreshResponseTime"> @lang('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>
@endsection

@push('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: "{{ route('admin.analytics.ticket.data.department.days.seven') }}",
                ajaxParam: 'department',
                chartElementId: 'ticketsByDepartmentsChart',
                chartCallback: function(response) {
                    showChart('ticketsByDepartmentsChart', response, 'renderBarChart');
                }
            });

            setupFilter({
                optionSelector: '',
                refreshSelector: '.refreshChannel',
                ajaxUrl: "{{ 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: "{{ 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: "{{ route('admin.analytics.agent.first.response.seven.days') }}",
                ajaxParam: 'agent',
                chartElementId: 'agentFirstResponseTimeChart',
                chartCallback: function(response) {
                    showChart('agentFirstResponseTimeChart', response, 'renderDotLineChart');
                }
            });

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

        })(jQuery);
    </script>
@endpush
