@extends('admin.analytics.index')

@section('sub_content')
    <div class="card customerCard mb-3">
        <div class="card-header flex-between gap-3">
            <p class="card-title fw-medium">@lang('Ticket satisfaction by customer')</p>
            <div class="flex-align gap-3">
                <div class="datepicker-inner d-none d-sm-flex">
                    <input type="text" class="date-picker-input dateFilter" name="customer_date" value="{{ defaultDateValue() }}">
                </div>
                <p class="fs-14 cursor-pointer customerRefresh"> @lang('Refresh') <i class="las la-redo-alt"></i></p>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="solved-rated-wrapper">
                <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="customerSatisfactionChart" class="chart-container lg-style"></div>
        </div>
    </div>
    <div class="card agentCard">
        <div class="card-header flex-between gap-3">
            <p class="card-title fw-medium">@lang('Ticket satisfaction Rate by Agents')</p>
            <div class="flex-align gap-3">
                <div class="datepicker-inner d-none d-sm-flex">
                    <input type="text" class="date-picker-input dateFilter" name="agent_date" value="{{ defaultDateValue() }}">
                </div>
                <div class="flex-align gap-3">
                    @include('admin.common.agent_dropdown')
                    <p class="fs-14 cursor-pointer agentRefresh"> @lang('Refresh') <i class="las la-redo-alt"></i></p>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="solved-rated-wrapper">
                <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="agentSatisfactionChart" class="chart-container lg-style"></div>
        </div>
    </div>
@endsection


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

            let agent = '';

            $(document).on('click', '.agentOption', function() {
                agent = $(this).data('agent');
                loadData('agent');
            });

            $('.customerRefresh').on('click', function() {
                $('.customerCard').find('.card-body').css('opacity', 0);
                loadData('customer');
            }).click();

            $('.agentRefresh').on('click', function() {
                $('.agentCard').find('.card-body').css('opacity', 0);
                loadData('agent');
            }).click();

            function loadData(user) {
                let url, data, chartElement;
                if (user == 'customer') {
                    url = `{{ route('admin.analytics.satisfaction.data', 'customer') }}`;
                    data = {
                        date: $('[name=customer_date]').val()
                    };
                    chartElement = 'customerSatisfactionChart';
                } else {
                    url = `{{ route('admin.analytics.satisfaction.data', 'agent') }}`;
                    data = {
                        date: $('[name=agent_date]').val(),
                        admin: agent
                    };
                    chartElement = 'agentSatisfactionChart';
                }

                $.ajax({
                    url: url,
                    type: 'GET',
                    data: data,
                    success: function(response) {
                        let cardClass = user === 'customer' ? '.customerCard' : '.agentCard';
                        $(cardClass).find('.card-body').css('opacity', 1);
                        $(cardClass).find('.ratedGreat').html(`${response.statistics.great} <small>(${response.statistics.great_percent}%)</small>`);
                        $(cardClass).find('.ratedOkay').html(`${response.statistics.okay} <small>(${response.statistics.okay_percent}%)</small>`);
                        $(cardClass).find('.ratedBad').html(`${response.statistics.bad} <small>(${response.statistics.bad_percent}%)</small>`);

                        showChart(chartElement, response);
                    },
                    error: function(xhr) {
                        console.error('Error loading ticket analytics:', xhr);
                    }
                });
            }

            function showChart(elementId, response) {
                if ($('#' + elementId).length > 0) {
                    renderMultiBarChart({
                        elementId: elementId,
                        data: [{
                                name: 'Great',
                                values: response.great
                            },
                            {
                                name: 'Okay',
                                values: response.okay
                            },
                            {
                                name: 'Bad',
                                values: response.bad
                            },
                        ],

                        colors: ['#4FCE3B', '#F6DF11', '#DC3848'],
                        xAxisData: response.keys
                    });
                }
            }

            $(".dateFilter").flatpickr({
                mode: "range",
                dateFormat: "M j, Y",
                disableMobile: true,
                locale: {
                    rangeSeparator: "-"
                },
                onClose: function() {
                    loadData(this.input.name === 'customer_date' ? 'customer' : 'agent');
                }
            });

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