@extends('admin.customer.index')

@section('sub_content')
    <div class="customer-layout-body">
        <div class="customer-analytic-card-wrapper">
            <div class="customer-analytic-card">
                <p class="title">@lang('All Tickets')</p>
                <h4 class="value">{{ $supportTickets->count() }}</h4>
            </div>
            <div class="customer-analytic-card">
                <p class="title">@lang('Ongoing Tickets')</p>
                <h4 class="value">{{ $supportTickets->count() - $user->closed_support_tickets_count }}</h4>
            </div>
            <div class="customer-analytic-card">
                <p class="title">@lang('Closed Tickets')</p>
                <h4 class="value">{{ $user->closed_support_tickets_count }}</h4>
            </div>
            <div class="customer-analytic-card">
                <p class="title">@lang('Happiness Ratings')</p>
                <h4 class="value"> {{ showAmount($happinessRating) }}%</h4>
            </div>
        </div>

        @if ($pendingTickets->count())
            <div class="card mb-10">
                <div class="card-header">
                    <p class="card-title">@lang('Pending Tickets')</p>
                </div>
                <div class="card-body p-0">
                    <div class="table-scroller">
                        <table class="table">
                            <tbody>
                                @foreach ($pendingTickets as $pendingTicket)
                                    <tr data-ticket="{{ $pendingTicket->ticket_number }}" class="ticketDetails">
                                        <td>
                                            <div class="ticket-board">
                                                <span class="ticket-board-icon">
                                                    <i class="fa-regular fa-envelope"></i>
                                                </span>
                                                <div class="ticket-board-content">
                                                    <p class="ticket-board-title">
                                                        # {{ __($pendingTicket->subject) }}
                                                    </p>
                                                    <div class="ticket-board-list">
                                                        <p class="ticket-board-type">
                                                            {{ __($pendingTicket->department?->name) }}
                                                        </p>
                                                        <p class="ticket-board-id fw-bold">
                                                            #{{ $pendingTicket->ticket_number }}

                                                        </p>
                                                        @if ($pendingTicket->admin)
                                                            <a href="#" class="ticket-board-assign text--base">
                                                                <i class="fa fa-user-check"></i>
                                                                {{ $pendingTicket->admin->name }}
                                                            </a>
                                                        @endif
                                                        @if (count($pendingTicket->tags))
                                                            <div class='ticket-board-tags'>
                                                                @foreach ($pendingTicket->tags as $tag)
                                                                    <span class='tag-style'>{{ __($tag->name) }}</span>
                                                                @endforeach
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="flex-align gap-2">
                                                <span class="thread-icon">
                                                    @include('admin.partials.svg.comment')
                                                </span>
                                                <p class="fs-14 text--dark">{{ $pendingTicket->replies_count }} @lang('Threads')</p>
                                            </div>
                                        </td>
                                        <td>
                                            @php echo $pendingTicket->ticketStatus->statusBadge; @endphp
                                        </td>
                                        <td>
                                            <p class="fs-14 text--dark"> {{ showDateTime($pendingTicket->created_at, 'd M Y') }}</p>
                                            <p class="fs-12">{{ showDateTime($pendingTicket->created_at, 'h:i A') }}</p>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endif

        <div class="row g-2">
            <div class="col-xl-6">
                <div class="card h-100">
                    <div class="card-header">
                        <p class="card-title">@lang('Traffic Analysis')</p>
                    </div>
                    <div class="card-body p-0">
                        <div id="trafficAnalysisChart" class="chart-container pie-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="card h-100">
                    <div class="card-header">
                        <p class="card-title">@lang('Average Handling Time')</p>
                    </div>
                    <div class="card-body">
                        <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">{{ $responseTime['avg_first_response_text'] }}</p>
                            </div>
                            <div class="progress progress-sm mt-1" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg--success progressBar" data-progress_bar="{{ $responseTime['avg_first_response_ratio'] }}"></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">{{ $responseTime['avg_response_text'] }}</p>
                            </div>
                            <div class="progress progress-sm mt-1" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg--warning progressBar" data-progress_bar="{{ $responseTime['avg_response_ratio'] }}"></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">{{ $responseTime['resolution_time_text'] }}</p>
                            </div>
                            <div class="progress progress-sm mt-1" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg--base progressBar" data-progress_bar="{{ $responseTime['resolution_time_ratio'] }}"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('style')
    <style>
        .ticketDetails{
            cursor: pointer;
        }
    </style>
@endpush


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

            let route = `{{ route('admin.ticket.details', '') }}`;

            $('.ticketDetails').on('click', function(e) {
                if ($(e.target).closest('.action-col').length) {
                    return;
                }
                let ticketNumber = $(this).data('ticket');
                window.location.href = route + '/' + ticketNumber;
            });

            $('.progressBar').each(function() {
                let progressBar = $(this).data('progress_bar');
                $(this).css('width', progressBar + '%');
            });

            renderPieChart({
                elementId: 'trafficAnalysisChart',
                data: [{
                        value: `{{ $ticketCount['admin'] }}`,
                        name: 'Admin Tickets',
                        itemStyle: {
                            color: '#CD375A'
                        }
                    },
                    {
                        value: `{{ $ticketCount['web'] }}`,
                        name: 'Web Tickets',
                        itemStyle: {
                            color: '#4FCE3B'
                        }
                    },
                    {
                        value: `{{ $ticketCount['email'] }}`,
                        name: 'Email Tickets',
                        itemStyle: {
                            color: '#3769CD'
                        }
                    }
                ],
            });


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