@extends('examples.modern-layout-v2')
@section('title', __('messages.manager_analytics.dashboard'))
@section('manager-analytics', 'bg-blue-50 text-blue-700')

@section('content')
<div x-data="analyticsData()" x-cloak>
    <!-- Loading Skeleton -->
    <div x-show="loading" class="space-y-6">
        <!-- Header Skeleton -->
        <div class="animate-pulse">
            <div class="h-8 bg-gray-200 rounded-lg w-64 mb-2"></div>
            <div class="h-4 bg-gray-200 rounded-lg w-96"></div>
        </div>
        
        <!-- Filter Skeleton -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 animate-pulse">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-3">
                    <div class="h-4 bg-gray-200 rounded w-24"></div>
                    <div class="h-12 bg-gray-200 rounded-xl"></div>
                </div>
                <div class="space-y-3">
                    <div class="h-4 bg-gray-200 rounded w-32"></div>
                    <div class="flex space-x-2">
                        <div class="h-10 bg-gray-200 rounded-xl flex-1"></div>
                        <div class="h-10 bg-gray-200 rounded-xl flex-1"></div>
                        <div class="h-10 bg-gray-200 rounded-xl flex-1"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Stats Cards Skeleton -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <template x-for="i in 4" :key="i">
                <div class="bg-white rounded-2xl p-6 animate-pulse">
                    <div class="h-12 w-12 bg-gray-200 rounded-xl mb-4"></div>
                    <div class="h-4 bg-gray-200 rounded w-24 mb-2"></div>
                    <div class="h-8 bg-gray-200 rounded w-16 mb-2"></div>
                    <div class="h-3 bg-gray-200 rounded w-20"></div>
                </div>
            </template>
        </div>
        
        <!-- Charts Skeleton -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <template x-for="i in 2" :key="i">
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 animate-pulse">
                    <div class="h-6 bg-gray-200 rounded w-48 mb-4"></div>
                    <div class="h-64 bg-gray-200 rounded-lg"></div>
                </div>
            </template>
        </div>
    </div>
    
    <!-- Actual Content -->
    <div x-show="!loading" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
        <!-- Page Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-3xl font-bold text-gray-900 mb-2">{{__('messages.manager_analytics.dashboard')}}</h2>
                    <p class="text-gray-600">{{__('messages.manager_analytics.dashboard_description')}}</p>
                </div>
            </div>
        </div>

        <!-- Modern Filter Bar -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6 hover:shadow-md transition-shadow duration-200">
            <div class="flex items-center justify-center">
                @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku')
                    <div class="text-right">
                        <label class="block text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2 flex-row-reverse justify-end">
                            <span class="text-right">{{__('messages.manager_analytics.date_range')}}</span>
                            <span class="material-icons text-lg text-blue-600">date_range</span>
                        </label>
                        <div class="flex items-center gap-2 flex-row-reverse justify-end">
                            <button 
                                class="group relative px-5 py-2.5 rounded-full border-2 transition-all duration-200 font-medium text-sm flex items-center gap-2 flex-row-reverse {{ $dateRange == 'today' ? 'bg-gradient-to-r from-blue-600 to-blue-500 text-white border-blue-600 shadow-lg shadow-blue-500/30' : 'bg-white text-gray-700 border-gray-300 hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700' }}" 
                                data-range="today"
                            >
                                <span class="text-right">{{__('messages.manager_analytics.today')}}</span>
                                <span class="material-icons text-base">today</span>
                            </button>
                            <button 
                                class="group relative px-5 py-2.5 rounded-full border-2 transition-all duration-200 font-medium text-sm flex items-center gap-2 flex-row-reverse {{ $dateRange == 'week' ? 'bg-gradient-to-r from-blue-600 to-blue-500 text-white border-blue-600 shadow-lg shadow-blue-500/30' : 'bg-white text-gray-700 border-gray-300 hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700' }}" 
                                data-range="week"
                            >
                                <span class="text-right">{{__('messages.manager_analytics.this_week')}}</span>
                                <span class="material-icons text-base">view_week</span>
                            </button>
                            <button 
                                class="group relative px-5 py-2.5 rounded-full border-2 transition-all duration-200 font-medium text-sm flex items-center gap-2 flex-row-reverse {{ $dateRange == 'month' ? 'bg-gradient-to-r from-blue-600 to-blue-500 text-white border-blue-600 shadow-lg shadow-blue-500/30' : 'bg-white text-gray-700 border-gray-300 hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700' }}" 
                                data-range="month"
                            >
                                <span class="text-right">{{__('messages.manager_analytics.this_month')}}</span>
                                <span class="material-icons text-base">calendar_month</span>
                            </button>
                        </div>
                    </div>
                @else
                    <!-- LTR: Date range only -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                            <span class="material-icons text-lg text-blue-600">date_range</span>
                            {{__('messages.manager_analytics.date_range')}}
                        </label>
                        <div class="flex items-center gap-2">
                            <button 
                                class="group relative px-5 py-2.5 rounded-full border-2 transition-all duration-200 font-medium text-sm flex items-center gap-2 {{ $dateRange == 'today' ? 'bg-gradient-to-r from-blue-600 to-blue-500 text-white border-blue-600 shadow-lg shadow-blue-500/30' : 'bg-white text-gray-700 border-gray-300 hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700' }}" 
                                data-range="today"
                            >
                                <span class="material-icons text-base">today</span>
                                {{__('messages.manager_analytics.today')}}
                            </button>
                            <button 
                                class="group relative px-5 py-2.5 rounded-full border-2 transition-all duration-200 font-medium text-sm flex items-center gap-2 {{ $dateRange == 'week' ? 'bg-gradient-to-r from-blue-600 to-blue-500 text-white border-blue-600 shadow-lg shadow-blue-500/30' : 'bg-white text-gray-700 border-gray-300 hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700' }}" 
                                data-range="week"
                            >
                                <span class="material-icons text-base">view_week</span>
                                {{__('messages.manager_analytics.this_week')}}
                            </button>
                            <button 
                                class="group relative px-5 py-2.5 rounded-full border-2 transition-all duration-200 font-medium text-sm flex items-center gap-2 {{ $dateRange == 'month' ? 'bg-gradient-to-r from-blue-600 to-blue-500 text-white border-blue-600 shadow-lg shadow-blue-500/30' : 'bg-white text-gray-700 border-gray-300 hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700' }}" 
                                data-range="month"
                            >
                                <span class="material-icons text-base">calendar_month</span>
                                {{__('messages.manager_analytics.this_month')}}
                            </button>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <!-- Key Statistics -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <div class="bg-gradient-to-br from-blue-600 to-blue-500 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                        <span class="material-icons text-2xl">receipt</span>
                    </div>
                </div>
                <div class="text-sm font-semibold opacity-90 mb-2 uppercase tracking-wide">{{__('messages.manager_analytics.total_tokens')}}</div>
                <div class="text-4xl font-bold mb-2" id="stat-total-tokens">{{ $analytics['stats']['total_tokens'] }}</div>
                <div class="text-sm opacity-75" id="change-total-tokens">--</div>
            </div>
            <div class="bg-gradient-to-br from-green-600 to-green-500 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                        <span class="material-icons text-2xl">check_circle</span>
                    </div>
                </div>
                <div class="text-sm font-semibold opacity-90 mb-2 uppercase tracking-wide">{{__('messages.manager_analytics.served')}}</div>
                <div class="text-4xl font-bold mb-2" id="stat-served">{{ $analytics['stats']['total_served'] }}</div>
                <div class="text-sm opacity-75" id="change-served">--</div>
            </div>
            <div class="bg-gradient-to-br from-orange-600 to-orange-500 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                        <span class="material-icons text-2xl">schedule</span>
                    </div>
                </div>
                <div class="text-sm font-semibold opacity-90 mb-2 uppercase tracking-wide">{{__('messages.manager_analytics.in_queue')}}</div>
                <div class="text-4xl font-bold mb-2" id="stat-queue">{{ $analytics['stats']['total_queue'] }}</div>
                <div class="text-sm opacity-75" id="change-queue">--</div>
            </div>
            <div class="bg-gradient-to-br from-red-600 to-red-500 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                        <span class="material-icons text-2xl">cancel</span>
                    </div>
                </div>
                <div class="text-sm font-semibold opacity-90 mb-2 uppercase tracking-wide">{{__('messages.manager_analytics.no_show')}}</div>
                <div class="text-4xl font-bold mb-2" id="stat-noshow">{{ $analytics['stats']['total_noshow'] }}</div>
                <div class="text-sm opacity-75" id="change-noshow">--</div>
            </div>
        </div>

        <!-- Performance Metrics -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6" dir="ltr">
            <div class="bg-gradient-to-br from-purple-600 to-purple-500 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
                <div class="flex items-center gap-4 mb-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                    <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                        <span class="material-icons text-2xl">timer</span>
                    </div>
                    <div class="text-sm font-semibold opacity-90 uppercase tracking-wide">{{__('messages.manager_analytics.avg_waiting_time')}}</div>
                </div>
                <div class="text-3xl font-bold mb-2" dir="rtl">{{ $analytics['stats']['avg_waiting_time'] }}{{__('messages.manager_analytics.seconds')}}</div>
                <div class="text-base opacity-90" dir="rtl">
                    @php
                        $waitingMinutes = round($analytics['stats']['avg_waiting_time'] / 60, 1);
                    @endphp
                    ({{ $waitingMinutes }} {{__('messages.manager_analytics.minutes')}})
                </div>
            </div>
            <div class="bg-gradient-to-br from-teal-600 to-teal-500 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
                <div class="flex items-center gap-4 mb-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                    <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                        <span class="material-icons text-2xl">access_time</span>
                    </div>
                    <div class="text-sm font-semibold opacity-90 uppercase tracking-wide">{{__('messages.manager_analytics.avg_service_time')}}</div>
                </div>
                <div class="text-3xl font-bold mb-2" dir="rtl">{{ $analytics['stats']['avg_served_time'] }}{{__('messages.manager_analytics.seconds')}}</div>
                <div class="text-base opacity-90" dir="rtl">
                    @php
                        $serviceMinutes = round($analytics['stats']['avg_served_time'] / 60, 1);
                    @endphp
                    ({{ $serviceMinutes }} {{__('messages.manager_analytics.minutes')}})
                </div>
            </div>
            <div class="bg-gradient-to-br from-indigo-600 to-indigo-500 rounded-2xl p-6 text-white shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
                <div class="flex items-center gap-4 mb-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                    <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                        <span class="material-icons text-2xl">update</span>
                    </div>
                    <div class="text-sm font-semibold opacity-90 uppercase tracking-wide">{{__('messages.manager_analytics.avg_turnaround_time')}}</div>
                </div>
                <div class="text-3xl font-bold mb-2" dir="rtl">{{ $analytics['stats']['avg_turnaround_time'] }}{{__('messages.manager_analytics.seconds')}}</div>
                <div class="text-base opacity-90" dir="rtl">
                    @php
                        $turnaroundMinutes = round($analytics['stats']['avg_turnaround_time'] / 60, 1);
                    @endphp
                    ({{ $turnaroundMinutes }} {{__('messages.manager_analytics.minutes')}})
                </div>
            </div>
        </div>

        <!-- Modern Charts Row -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            @if($dateRange == 'today' && count($analytics['hourly_data']) > 0)
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow">
                <h5 class="text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse justify-end @endif">
                    <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.manager_analytics.hourly_token_distribution')}}</span>
                    <span class="material-icons text-blue-600">bar_chart</span>
                </h5>
                <div class="relative h-80">
                    <canvas id="hourlyChart"></canvas>
                </div>
            </div>
            @endif
            
            @if($dateRange == 'week' && count($analytics['daily_trends']) > 0)
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow">
                <h5 class="text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse justify-end @endif">
                    <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.manager_analytics.weekly_trends')}}</span>
                    <span class="material-icons text-green-600">trending_up</span>
                </h5>
                <div class="relative h-80">
                    <canvas id="weeklyChart"></canvas>
                </div>
            </div>
            @endif

            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow">
                <h5 class="text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse justify-end @endif">
                    <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.manager_analytics.status_distribution')}}</span>
                    <span class="material-icons text-purple-600">pie_chart</span>
                </h5>
                <div class="relative h-80">
                    <canvas id="statusChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Service Performance -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow mb-6">
            <h5 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse justify-end @endif">
                <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.manager_analytics.service_performance')}}</span>
                <span class="material-icons text-blue-600">business</span>
            </h5>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                        <tr>
                            <th scope="col" class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.service')}}</th>
                            <th scope="col" class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.total_tokens')}}</th>
                            <th scope="col" class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.served')}}</th>
                            <th scope="col" class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.no_show')}}</th>
                            <th scope="col" class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.avg_waiting')}}</th>
                            <th scope="col" class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.avg_service')}}</th>
                            <th scope="col" class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.success_rate')}}</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($analytics['service_stats'] as $service)
                        <tr class="hover:bg-blue-50/50 transition-all duration-200 group">
                            <td class="px-6 py-4 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                <div class="text-sm font-medium text-gray-900 group-hover:text-blue-700 transition-colors"><strong>{{ $service->letter }}-{{ $service->name }}</strong></div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                <div class="text-sm text-gray-700">{{ $service->total_tokens ?? 0 }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                <span class="inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1 text-xs font-semibold bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20">{{ $service->served ?? 0 }}</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                <span class="inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1 text-xs font-semibold bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-600/20">{{ $service->noshow ?? 0 }}</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                <div class="text-sm text-gray-700">
                                    {{ round($service->avg_waiting ?? 0, 1) }}{{__('messages.manager_analytics.seconds')}}
                                    <br><small class="text-gray-500">({{ round(($service->avg_waiting ?? 0) / 60, 1) }} {{__('messages.manager_analytics.minutes')}})</small>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                <div class="text-sm text-gray-700">
                                    {{ round($service->avg_served ?? 0, 1) }}{{__('messages.manager_analytics.seconds')}}
                                    <br><small class="text-gray-500">({{ round(($service->avg_served ?? 0) / 60, 1) }} {{__('messages.manager_analytics.minutes')}})</small>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                @php
                                    $total = ($service->served ?? 0) + ($service->noshow ?? 0);
                                    $rate = $total > 0 ? round((($service->served ?? 0) / $total) * 100, 1) : 0;
                                @endphp
                                <span class="inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1 text-xs font-semibold {{ $rate >= 80 ? 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20' : ($rate >= 60 ? 'bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-600/20' : 'bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/20') }}">
                                    {{ $rate }}%
                                </span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                                {{__('messages.manager_analytics.no_service_data')}}
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Counter and Staff Performance -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <!-- Counter Performance -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow">
                <h5 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse justify-end @endif">
                    <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.manager_analytics.counter_performance')}}</span>
                    <span class="material-icons text-blue-600">desktop_windows</span>
                </h5>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                            <tr>
                                <th scope="col" class="px-4 py-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.counter')}}</th>
                                <th scope="col" class="px-4 py-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.total_calls')}}</th>
                                <th scope="col" class="px-4 py-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.served')}}</th>
                                <th scope="col" class="px-4 py-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.no_show')}}</th>
                                <th scope="col" class="px-4 py-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.unique_users')}}</th>
                                <th scope="col" class="px-4 py-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.avg_time')}}</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($analytics['counter_stats'] as $counter)
                            <tr class="hover:bg-blue-50/50 transition-all duration-200 group">
                                <td class="px-4 py-3 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    <div class="text-sm font-medium text-gray-900 group-hover:text-blue-700 transition-colors">
                                        <strong>{{ $counter->name }}</strong>
                                        @if(isset($counter->location_name))
                                            <br><small class="text-gray-500 text-xs">{{ $counter->location_name }}</small>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    <div class="text-sm font-semibold text-gray-900">{{ $counter->total_calls ?? 0 }}</div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    <span class="inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1 text-xs font-semibold bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20">{{ $counter->served ?? 0 }}</span>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    <span class="inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1 text-xs font-semibold bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-600/20">{{ $counter->noshow ?? 0 }}</span>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    <div class="text-sm text-gray-700 font-medium">{{ $counter->unique_users ?? 0 }}</div>
                                    <small class="text-gray-500 text-xs">{{__('messages.manager_analytics.users')}}</small>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    <div class="text-sm text-gray-700">
                                        {{ round($counter->avg_served_time ?? 0, 1) }}{{__('messages.manager_analytics.seconds')}}
                                        <br><small class="text-gray-500">({{ round(($counter->avg_served_time ?? 0) / 60, 1) }} {{__('messages.manager_analytics.minutes')}})</small>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="px-4 py-8 text-center text-gray-500">
                                    {{__('messages.manager_analytics.no_counter_data')}}
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Staff Performance -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow">
                <h5 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse justify-end @endif">
                    <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.manager_analytics.staff_performance')}}</span>
                    <span class="material-icons text-green-600">people</span>
                </h5>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                            <tr>
                                <th scope="col" class="px-4 py-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.staff')}}</th>
                                <th scope="col" class="px-4 py-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.total_calls')}}</th>
                                <th scope="col" class="px-4 py-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.served')}}</th>
                                <th scope="col" class="px-4 py-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.no_show')}}</th>
                                <th scope="col" class="px-4 py-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.counters_worked')}}</th>
                                <th scope="col" class="px-4 py-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">{{__('messages.manager_analytics.avg_time')}}</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($analytics['user_stats'] as $user)
                            <tr class="hover:bg-blue-50/50 transition-all duration-200 group">
                                <td class="px-4 py-3 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    <div class="text-sm font-medium text-gray-900 group-hover:text-blue-700 transition-colors">
                                        <strong>{{ $user->name }}</strong>
                                        @if(isset($user->location_name))
                                            <br><small class="text-gray-500 text-xs">{{ $user->location_name }}</small>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    <div class="text-sm font-semibold text-gray-900">{{ $user->total_calls ?? 0 }}</div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    <span class="inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1 text-xs font-semibold bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20">{{ $user->served ?? 0 }}</span>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    <span class="inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1 text-xs font-semibold bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-600/20">{{ $user->noshow ?? 0 }}</span>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    <div class="text-sm text-gray-700 font-medium">{{ $user->counters_worked ?? 0 }}</div>
                                    <small class="text-gray-500 text-xs">{{__('messages.manager_analytics.counters')}}</small>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    <div class="text-sm text-gray-700">
                                        {{ round($user->avg_served_time ?? 0, 1) }}{{__('messages.manager_analytics.seconds')}}
                                        <br><small class="text-gray-500">({{ round(($user->avg_served_time ?? 0) / 60, 1) }} {{__('messages.manager_analytics.minutes')}})</small>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="px-4 py-8 text-center text-gray-500">
                                    {{__('messages.manager_analytics.no_staff_data')}}
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Comparison Section -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow">
            <h5 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse justify-end @endif">
                <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.manager_analytics.performance_comparison')}}</span>
                <span class="material-icons text-purple-600">compare_arrows</span>
            </h5>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200 hover:shadow-md transition-shadow">
                    <h6 class="font-semibold text-gray-900 mb-3 flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse justify-end @endif">
                        <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.manager_analytics.today_vs_yesterday')}}</span>
                        <span class="material-icons text-blue-600">today</span>
                    </h6>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between gap-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right flex-1 @else text-left @endif">{{__('messages.manager_analytics.served')}}:</span>
                            <span class="text-sm font-bold {{ $comparisons['today_vs_yesterday']['change']['served'] >= 0 ? 'text-green-600' : 'text-red-600' }} @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-left @else text-right @endif" dir="ltr">
                                {{ $comparisons['today_vs_yesterday']['change']['served'] >= 0 ? '+' : '' }}{{ $comparisons['today_vs_yesterday']['change']['served'] }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between gap-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right flex-1 @else text-left @endif">{{__('messages.manager_analytics.no_show')}}:</span>
                            <span class="text-sm font-bold {{ $comparisons['today_vs_yesterday']['change']['noshow'] >= 0 ? 'text-red-600' : 'text-green-600' }} @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-left @else text-right @endif" dir="ltr">
                                {{ $comparisons['today_vs_yesterday']['change']['noshow'] >= 0 ? '+' : '' }}{{ $comparisons['today_vs_yesterday']['change']['noshow'] }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 border border-green-200 hover:shadow-md transition-shadow">
                    <h6 class="font-semibold text-gray-900 mb-3 flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse justify-end @endif">
                        <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.manager_analytics.this_week_vs_last_week')}}</span>
                        <span class="material-icons text-green-600">date_range</span>
                    </h6>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between gap-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right flex-1 @else text-left @endif">{{__('messages.manager_analytics.served')}}:</span>
                            <span class="text-sm font-bold {{ $comparisons['this_week_vs_last_week']['change']['served'] >= 0 ? 'text-green-600' : 'text-red-600' }} @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-left @else text-right @endif" dir="ltr">
                                {{ $comparisons['this_week_vs_last_week']['change']['served'] >= 0 ? '+' : '' }}{{ $comparisons['this_week_vs_last_week']['change']['served'] }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between gap-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right flex-1 @else text-left @endif">{{__('messages.manager_analytics.no_show')}}:</span>
                            <span class="text-sm font-bold {{ $comparisons['this_week_vs_last_week']['change']['noshow'] >= 0 ? 'text-red-600' : 'text-green-600' }} @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-left @else text-right @endif" dir="ltr">
                                {{ $comparisons['this_week_vs_last_week']['change']['noshow'] >= 0 ? '+' : '' }}{{ $comparisons['this_week_vs_last_week']['change']['noshow'] }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 border border-purple-200 hover:shadow-md transition-shadow">
                    <h6 class="font-semibold text-gray-900 mb-3 flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse justify-end @endif">
                        <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.manager_analytics.this_month_vs_last_month')}}</span>
                        <span class="material-icons text-purple-600">calendar_month</span>
                    </h6>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between gap-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right flex-1 @else text-left @endif">{{__('messages.manager_analytics.served')}}:</span>
                            <span class="text-sm font-bold {{ $comparisons['this_month_vs_last_month']['change']['served'] >= 0 ? 'text-green-600' : 'text-red-600' }} @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-left @else text-right @endif" dir="ltr">
                                {{ $comparisons['this_month_vs_last_month']['change']['served'] >= 0 ? '+' : '' }}{{ $comparisons['this_month_vs_last_month']['change']['served'] }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between gap-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right flex-1 @else text-left @endif">{{__('messages.manager_analytics.no_show')}}:</span>
                            <span class="text-sm font-bold {{ $comparisons['this_month_vs_last_month']['change']['noshow'] >= 0 ? 'text-red-600' : 'text-green-600' }} @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-left @else text-right @endif" dir="ltr">
                                {{ $comparisons['this_month_vs_last_month']['change']['noshow'] >= 0 ? '+' : '' }}{{ $comparisons['this_month_vs_last_month']['change']['noshow'] }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="{{asset('app-assets/chart.js')}}"></script>
<script>
function analyticsData() {
    return {
        loading: false,
        init() {
            // Date range buttons
            const self = this;
            document.querySelectorAll('[data-range]').forEach(btn => {
                btn.addEventListener('click', function() {
                    self.loading = true;
                    const range = this.getAttribute('data-range');
                    const baseUrl = '{{ \App\Helpers\UrlHelper::routeWithCityBuilding("manager-analytics.index") }}';
                    // Use & if URL already has query params, otherwise use ?
                    const separator = baseUrl.includes('?') ? '&' : '?';
                    window.location.href = baseUrl + separator + 'range=' + range;
                });
            });

            // Status Distribution Chart with modern styling
            const statusCtx = document.getElementById('statusChart');
            if (statusCtx) {
                const statusChart = new Chart(statusCtx.getContext('2d'), {
                    type: 'doughnut',
                    data: {
                        labels: ['{{__('messages.manager_analytics.served')}}', '{{__('messages.manager_analytics.no_show')}}', '{{__('messages.manager_analytics.in_queue')}}', '{{__('messages.common.serving')}}'],
                        datasets: [{
                            data: [
                                {{ $analytics['stats']['total_served'] }},
                                {{ $analytics['stats']['total_noshow'] }},
                                {{ $analytics['stats']['total_queue'] }},
                                {{ $analytics['stats']['total_serving'] }}
                            ],
                            backgroundColor: [
                                'rgba(34, 197, 94, 0.8)',
                                'rgba(239, 68, 68, 0.8)',
                                'rgba(59, 130, 246, 0.8)',
                                'rgba(249, 115, 22, 0.8)'
                            ],
                            borderColor: [
                                'rgb(34, 197, 94)',
                                'rgb(239, 68, 68)',
                                'rgb(59, 130, 246)',
                                'rgb(249, 115, 22)'
                            ],
                            borderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom',
                                labels: {
                                    padding: 15,
                                    font: {
                                        size: 12,
                                        weight: '500'
                                    },
                                    usePointStyle: true
                                }
                            },
                            tooltip: {
                                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                                padding: 12,
                                titleFont: {
                                    size: 14,
                                    weight: '600'
                                },
                                bodyFont: {
                                    size: 13
                                },
                                cornerRadius: 8
                            }
                        }
                    }
                });
            }

            @if($dateRange == 'today' && count($analytics['hourly_data']) > 0)
            // Hourly Chart with modern styling
            const hourlyCtx = document.getElementById('hourlyChart');
            if (hourlyCtx) {
                const hourlyChart = new Chart(hourlyCtx.getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: [@foreach($analytics['hourly_data'] as $hour) '{{ $hour['hour'] }}', @endforeach],
                        datasets: [{
                            label: '{{__('messages.manager_analytics.tokens')}}',
                            data: [@foreach($analytics['hourly_data'] as $hour) {{ $hour['count'] }}, @endforeach],
                            backgroundColor: 'rgba(59, 130, 246, 0.8)',
                            borderColor: 'rgb(59, 130, 246)',
                            borderWidth: 2,
                            borderRadius: 8,
                            borderSkipped: false
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                                padding: 12,
                                cornerRadius: 8
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    stepSize: 1
                                },
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.05)'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            }
            @endif

            @if($dateRange == 'week' && count($analytics['daily_trends']) > 0)
            // Weekly Chart with modern styling
            const weeklyCtx = document.getElementById('weeklyChart');
            if (weeklyCtx) {
                const weeklyChart = new Chart(weeklyCtx.getContext('2d'), {
                    type: 'line',
                    data: {
                        labels: [@foreach($analytics['daily_trends'] as $day) '{{ $day['day_name'] }}', @endforeach],
                        datasets: [{
                            label: '{{__('messages.manager_analytics.total_tokens')}}',
                            data: [@foreach($analytics['daily_trends'] as $day) {{ $day['total_tokens'] }}, @endforeach],
                            borderColor: 'rgb(59, 130, 246)',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            borderWidth: 3,
                            tension: 0.4,
                            fill: true,
                            pointRadius: 5,
                            pointHoverRadius: 7,
                            pointBackgroundColor: 'rgb(59, 130, 246)',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2
                        }, {
                            label: '{{__('messages.manager_analytics.served')}}',
                            data: [@foreach($analytics['daily_trends'] as $day) {{ $day['served'] }}, @endforeach],
                            borderColor: 'rgb(34, 197, 94)',
                            backgroundColor: 'rgba(34, 197, 94, 0.1)',
                            borderWidth: 3,
                            tension: 0.4,
                            fill: true,
                            pointRadius: 5,
                            pointHoverRadius: 7,
                            pointBackgroundColor: 'rgb(34, 197, 94)',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom',
                                labels: {
                                    padding: 15,
                                    font: {
                                        size: 12,
                                        weight: '500'
                                    },
                                    usePointStyle: true
                                }
                            },
                            tooltip: {
                                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                                padding: 12,
                                cornerRadius: 8
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.05)'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            }
            @endif

            // Update comparison indicators
            @if(isset($comparisons['today_vs_yesterday']['change']['served']))
            updateChangeIndicator('change-served', {{ $comparisons['today_vs_yesterday']['change']['served'] }});
            updateChangeIndicator('change-noshow', {{ $comparisons['today_vs_yesterday']['change']['noshow'] }});
            updateChangeIndicator('change-queue', {{ $comparisons['today_vs_yesterday']['change']['queue'] }});
            @endif

            function updateChangeIndicator(elementId, change) {
                const el = document.getElementById(elementId);
                if (el) {
                    if (change > 0) {
                        el.textContent = '+' + change;
                        el.classList.add('text-green-200');
                        el.classList.remove('text-red-200');
                    } else if (change < 0) {
                        el.textContent = change;
                        el.classList.add('text-red-200');
                        el.classList.remove('text-green-200');
                    } else {
                        el.textContent = '0';
                        el.classList.remove('text-green-200', 'text-red-200');
                    }
                }
            }

            // Location selection is now handled by appbar dropdown (city/building)
            // No need for separate location selector on this page
        }
    }
}
</script>
@endpush
@endsection