@extends('laravelticket::layouts.master')

@section('page', trans('laravelticket::admin.index-title'))

@section('laravelticket_extra_content')
    @if($tickets_count)

        {{-- Stat Cards --}}
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">

            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5 flex justify-between items-center">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ trans('laravelticket::admin.index-total-tickets') }}</p>
                    <p class="text-3xl font-bold text-gray-800 dark:text-gray-100">{{ $tickets_count }}</p>
                </div>
            </div>

            <div class="bg-red-600 rounded-lg shadow p-5 flex justify-between items-center">
                <div>
                    <p class="text-sm text-red-100">{{ trans('laravelticket::admin.index-open-tickets') }}</p>
                    <p class="text-3xl font-bold text-white">{{ $open_tickets_count }}</p>
                </div>
            </div>

            <div class="bg-green-600 rounded-lg shadow p-5 flex justify-between items-center">
                <div>
                    <p class="text-sm text-green-100">{{ trans('laravelticket::admin.index-closed-tickets') }}</p>
                    <p class="text-3xl font-bold text-white">{{ $closed_tickets_count }}</p>
                </div>
            </div>

        </div>

        {{-- Charts + Side Panel --}}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

            {{-- Left: Charts --}}
            <div class="lg:col-span-2 space-y-4">

                {{-- Performance line chart card --}}
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center flex-wrap gap-2">
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
                            {{ trans('laravelticket::admin.index-performance-indicator') }}
                        </span>
                        {{-- Period dropdown --}}
                        <div class="relative" x-data="{ open: false }">
                            <button type="button"
                                    @click="open = !open"
                                    @click.outside="open = false"
                                    class="inline-flex items-center gap-1 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 text-sm rounded-md transition-colors">
                                {{ trans('laravelticket::admin.index-periods') }}
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                            </button>
                            <div x-show="open"
                                 x-transition
                                 class="absolute right-0 mt-1 w-40 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-10">
                                <a href="{{ action('\Binshops\LaravelTicket\Controllers\DashboardController@index', 2) }}"
                                   class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                    {{ trans('laravelticket::admin.index-3-months') }}
                                </a>
                                <a href="{{ action('\Binshops\LaravelTicket\Controllers\DashboardController@index', 5) }}"
                                   class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                    {{ trans('laravelticket::admin.index-6-months') }}
                                </a>
                                <a href="{{ action('\Binshops\LaravelTicket\Controllers\DashboardController@index', 11) }}"
                                   class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                    {{ trans('laravelticket::admin.index-12-months') }}
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <div id="curve_chart" style="width: 100%; height: 350px"></div>
                    </div>
                </div>

                {{-- Pie charts row --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300">
                            {{ trans('laravelticket::admin.index-tickets-share-per-category') }}
                        </div>
                        <div class="p-4">
                            <div id="catpiechart" style="width: auto; height: 350px;"></div>
                        </div>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300">
                            {{ trans('laravelticket::admin.index-tickets-share-per-agent') }}
                        </div>
                        <div class="p-4">
                            <div id="agentspiechart" style="width: auto; height: 350px;"></div>
                        </div>
                    </div>
                </div>

            </div>

            {{-- Right: Tabbed lists --}}
            <div class="lg:col-span-1" x-data="{ tab: '{{ $active_tab }}' }">

                {{-- Tab buttons --}}
                <div class="flex border-b border-gray-200 dark:border-gray-700 mb-4">
                    <button @click="tab = 'cat'"
                            :class="tab === 'cat' ? 'border-b-2 border-indigo-600 text-indigo-600 dark:text-indigo-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                            class="flex-1 py-2 text-xs font-medium text-center transition-colors">
                        {{ trans('laravelticket::admin.index-categories') }}
                    </button>
                    <button @click="tab = 'agents'"
                            :class="tab === 'agents' ? 'border-b-2 border-indigo-600 text-indigo-600 dark:text-indigo-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                            class="flex-1 py-2 text-xs font-medium text-center transition-colors">
                        {{ trans('laravelticket::admin.index-agents') }}
                    </button>
                    <button @click="tab = 'users'"
                            :class="tab === 'users' ? 'border-b-2 border-indigo-600 text-indigo-600 dark:text-indigo-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                            class="flex-1 py-2 text-xs font-medium text-center transition-colors">
                        {{ trans('laravelticket::admin.index-users') }}
                    </button>
                </div>

                {{-- Categories tab --}}
                <div x-show="tab === 'cat'">
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                        {{-- Header row --}}
                        <div class="flex justify-between items-center px-4 py-2 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400 font-medium border-b border-gray-200 dark:border-gray-600">
                            <span>{{ trans('laravelticket::admin.index-category') }}
                                <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300">
                                    {{ trans('laravelticket::admin.index-total') }}
                                </span>
                            </span>
                            <span class="italic">{{ trans('laravelticket::admin.index-open') }} / {{ trans('laravelticket::admin.index-closed') }}</span>
                        </div>
                        <div class="divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach($categories as $category)
                                <div class="flex justify-between items-center px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-700/50 text-sm">
                                    <span style="color: {{ $category->color }}">
                                        {{ $category->name }}
                                        <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300">
                                            {{ $category->tickets()->count() }}
                                        </span>
                                    </span>
                                    <span class="text-xs text-gray-400 dark:text-gray-500 italic">
                                        {{ $category->tickets()->whereNull('completed_at')->count() }} /
                                        {{ $category->tickets()->whereNotNull('completed_at')->count() }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                        <div class="px-4 py-2">
                            {!! $categories->render("pagination::tailwind") !!}
                        </div>
                    </div>
                </div>

                {{-- Agents tab --}}
                <div x-show="tab === 'agents'" style="display:none">
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                        <div class="flex justify-between items-center px-4 py-2 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400 font-medium border-b border-gray-200 dark:border-gray-600">
                            <span>{{ trans('laravelticket::admin.index-agent') }}
                                <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300">
                                    {{ trans('laravelticket::admin.index-total') }}
                                </span>
                            </span>
                            <span class="italic">{{ trans('laravelticket::admin.index-open') }} / {{ trans('laravelticket::admin.index-closed') }}</span>
                        </div>
                        <div class="divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach($agents as $agent)
                                <div class="flex justify-between items-center px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-700/50 text-sm">
                                    <span>
                                        {{ $agent->name }}
                                        <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300">
                                            {{ $agent->agentTickets(false)->count() + $agent->agentTickets(true)->count() }}
                                        </span>
                                    </span>
                                    <span class="text-xs text-gray-400 dark:text-gray-500 italic">
                                        {{ $agent->agentTickets(false)->count() }} /
                                        {{ $agent->agentTickets(true)->count() }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                        <div class="px-4 py-2">
                            {!! $agents->render("pagination::tailwind") !!}
                        </div>
                    </div>
                </div>

                {{-- Users tab --}}
                <div x-show="tab === 'users'" style="display:none">
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                        <div class="flex justify-between items-center px-4 py-2 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400 font-medium border-b border-gray-200 dark:border-gray-600">
                            <span>{{ trans('laravelticket::admin.index-user') }}
                                <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300">
                                    {{ trans('laravelticket::admin.index-total') }}
                                </span>
                            </span>
                            <span class="italic">{{ trans('laravelticket::admin.index-open') }} / {{ trans('laravelticket::admin.index-closed') }}</span>
                        </div>
                        <div class="divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach($users as $user)
                                <div class="flex justify-between items-center px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-700/50 text-sm">
                                    <span>
                                        {{ $user->name }}
                                        <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300">
                                            {{ $user->userTickets(false)->count() + $user->userTickets(true)->count() }}
                                        </span>
                                    </span>
                                    <span class="text-xs text-gray-400 dark:text-gray-500 italic">
                                        {{ $user->userTickets(false)->count() }} /
                                        {{ $user->userTickets(true)->count() }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                        <div class="px-4 py-2">
                            {!! $users->render("pagination::tailwind") !!}
                        </div>
                    </div>
                </div>

            </div>{{-- end right panel --}}

        </div>{{-- end charts + side panel grid --}}

    @else
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-8 text-center text-gray-500 dark:text-gray-400">
            {{ trans('laravelticket::admin.index-empty-records') }}
        </div>
    @endif
@stop

@section('footer')
    @if($tickets_count)
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            google.charts.load('current', {'packages': ['corechart']});
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ["{{ trans('laravelticket::admin.index-month') }}", "{!! implode('", "', $monthly_performance['categories']) !!}"],
                    @foreach($monthly_performance['interval'] as $month => $records)
                    ["{{ $month }}", {!! implode(',', $records) !!}],
                    @endforeach
                ]);

                var options = {
                    title: '{!! addslashes(trans('laravelticket::admin.index-performance-chart')) !!}',
                    curveType: 'function',
                    legend: {position: 'right'},
                    vAxis: {
                        viewWindowMode: 'explicit',
                        format: '#',
                        viewWindow: {min: 0}
                    }
                };

                var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
                chart.draw(data, options);

                // Categories Pie Chart
                var cat_data = google.visualization.arrayToDataTable([
                    ['{{ trans('laravelticket::admin.index-category') }}', '{!! addslashes(trans('laravelticket::admin.index-tickets')) !!}'],
                    @foreach($categories_share as $cat_name => $cat_tickets)
                    ['{!! addslashes($cat_name) !!}', {{ $cat_tickets }}],
                    @endforeach
                ]);
                var cat_options = {
                    title: '{!! addslashes(trans('laravelticket::admin.index-categories-chart')) !!}',
                    legend: {position: 'bottom'}
                };
                var cat_chart = new google.visualization.PieChart(document.getElementById('catpiechart'));
                cat_chart.draw(cat_data, cat_options);

                // Agents Pie Chart
                var agent_data = google.visualization.arrayToDataTable([
                    ['{{ trans('laravelticket::admin.index-agent') }}', '{!! addslashes(trans('laravelticket::admin.index-tickets')) !!}'],
                    @foreach($agents_share as $agent_name => $agent_tickets)
                    ['{!! addslashes($agent_name) !!}', {{ $agent_tickets }}],
                    @endforeach
                ]);
                var agent_options = {
                    title: '{!! addslashes(trans('laravelticket::admin.index-agents-chart')) !!}',
                    legend: {position: 'bottom'}
                };
                var agent_chart = new google.visualization.PieChart(document.getElementById('agentspiechart'));
                agent_chart.draw(agent_data, agent_options);
            }
        </script>
    @endif
@append