@extends('admin.analytics.index')

@section('sub_content')
    <div class="card mb-3">
        <div class="card-header flex-between gap-3">
            <p class="card-title fw-medium">@lang('New Tickets')</p>
            <div class="flex-align gap-3">
                <div class="datepicker-inner d-none d-sm-flex">
                    <input type="text" class="date-picker-input dateFilter" value="{{ defaultDateValue() }}" name="ticket_data_date">
                </div>

                @include('admin.common.department_dropdown')

                @include('admin.common.priority_dropdown')

                <p class="fs-14 cursor-pointer refreshTicketData"> @lang('Refresh') <i class="las la-redo-alt"></i></p>
            </div>
        </div>
        <div class="card-body p-0 ticketDataBody">
            <div id="newTicketsChart" class="chart-container lg-style"></div>
        </div>
    </div>
    <div class="card mb-3">
        <div class="card-header flex-between gap-3">
            <p class="card-title fw-medium">@lang('Ticket sources')</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="source_date" value="{{ defaultDateValue() }}">
                </div>
                <p class="fs-14 cursor-pointer refreshSourceData"> @lang('Refresh') <i class="las la-redo-alt"></i></p>
            </div>
        </div>
        <div class="card-body p-0 sourceBody">
            <div class="solved-rated-wrapper">
                <div class="solved-rated admin">
                    <span class="solved-rated-text">@lang('Admin')</span>
                    <h5 class="solved-rated-value adminData">
                    </h5>
                </div>
                <div class="solved-rated web">
                    <span class="solved-rated-text">@lang('Web')</span>
                    <h5 class="solved-rated-value webData">
                    </h5>
                </div>
                <div class="solved-rated email">
                    <span class="solved-rated-text">@lang('Email')</span>
                    <h5 class="solved-rated-value emailData">
                    </h5>
                </div>
            </div>
            <div id="ticketResourcesChart" class="chart-container lg-style"></div>
        </div>
    </div>
@endsection

@php
    $hex = hexToHsl('CD375A');
@endphp

@push('style')
    <style>
        .solved-rated.admin {
            --this-color: #CD375A;
        }

        .solved-rated.web {
            --this-color: #4FCE3B;
        }

        .solved-rated.email {
            --this-color: #3769CD;
        }

        .solved-rated .solved-rated-text::before {
            background-color: var(--this-color) !important;
        }
    </style>
@endpush


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

            let department = '';
            let priority = '';

            $('.departmentOption').on('click', function() {
                department = $(this).data('department');
                loadTicketData();
            });

            $('.priorityOption').on('click', function() {
                priority = $(this).data('priority');
                loadTicketData();
            });

            $('.refreshTicketData').on('click', function() {
                $('.ticketDataBody').css('opacity', 0);
                loadTicketData();
            });


            loadTicketData();

            function loadTicketData() {
                let date = $('[name=ticket_data_date]').val();
                let url = "{{ route('admin.analytics.ticket.data') }}";

                $.ajax({
                    url: url,
                    type: 'GET',
                    data: {
                        department_id: department,
                        priority_id: priority,
                        date
                    },
                    success: function(response) {
                        $('.ticketDataBody').css('opacity', 1);
                        showTicketChart(response);
                    },
                    error: function(xhr) {
                        console.error('Error loading ticket analytics:', xhr);
                    }
                });
            }

            function showTicketChart(response) {
                if ($('#newTicketsChart').length > 0) {
                    renderBarChart({
                        elementId: 'newTicketsChart',
                        data: response.values,
                        colors: ['#28A745'],
                        xAxisData: response.keys
                    });
                }
            }


            $(".dateFilter").flatpickr({
                mode: "range",
                dateFormat: "M j, Y",
                disableMobile: true,
                locale: {
                    rangeSeparator: "-"
                },
                onClose: function() {
                    let input = this.input;

                    if (input.name === 'ticket_data_date') {
                        loadTicketData();
                    } else {
                        loadSourceData();
                    }
                }
            });


            $('.refreshSourceData').on('click', function() {
                loadSourceData();
                $('.sourceBody').css('opacity', 0);
            }).click();

            function loadSourceData() {
                let date = $('[name=source_date]').val();

                let url = "{{ route('admin.analytics.ticket.source.data') }}";
                $.ajax({
                    url: url,
                    type: 'GET',
                    data: {
                        date
                    },
                    success: function(response) {
                        $('.sourceBody').css('opacity', 1);
                        $('.adminData').html(`${response.statistics.admin} <small>(${response.statistics.admin_percent}%)</small>`)
                        $('.webData').html(`${response.statistics.web} <small>(${response.statistics.web_percent}%)</small>`)
                        $('.emailData').html(`${response.statistics.email} <small>(${response.statistics.email_percent}%)</small>`)
                        showTicketSourceChart(response);
                    },
                    error: function(xhr) {
                        console.error('Error loading ticket analytics:', xhr);
                    }
                });
            }

            function showTicketSourceChart(response) {
                if ($('#ticketResourcesChart').length > 0) {
                    renderMultiBarChart({
                        elementId: 'ticketResourcesChart',
                        data: [{
                                name: 'Admin',
                                values: response.admin
                            },
                            {
                                name: 'Web',
                                values: response.web
                            },
                            {
                                name: 'Email',
                                values: response.email
                            }
                        ],
                        colors: ['#CD375A', '#4FCE3B', '#3769CD'],
                        xAxisData: response.keys
                    });
                }
            }
        })(jQuery);
    </script>
@endpush
