@extends('examples.modern-layout-v2')
@section('title', 'Dashboard')
@section('dashboard', 'bg-blue-50 text-blue-700')

@section('content')
<div x-data="dashboardData()" x-init="init()">
    <!-- 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">Dashboard</h2>
                <p class="text-gray-600">Welcome back! Here's what's happening with your queue system today.</p>
            </div>
            <div class="hidden md:flex items-center space-x-2 text-sm text-gray-500">
                <span class="material-icons text-base">schedule</span>
                <span id="current-time"></span>
            </div>
        </div>
    </div>
    
    <!-- License Alerts -->
    @if($isTrialLicense || !$isLicenseValid || (isset($hasNoLicense) && $hasNoLicense))
    <div class="mb-6">
        @if(!$isLicenseValid && isset($licenseStatus['status']) && $licenseStatus['status'] === 'expired')
        <div class="bg-red-50 border-l-4 border-red-500 rounded-xl p-5 shadow-sm">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <span class="material-icons text-red-600 text-2xl">error_outline</span>
                </div>
                <div class="ml-4 flex-1">
                    <h5 class="text-red-800 font-semibold text-base mb-1">{{__('messages.errors.license_expired')}}</h5>
                    <p class="text-red-700 text-sm">{{__('messages.errors.license_expired_description')}}</p>
                </div>
            </div>
        </div>
        @elseif($isTrialLicense)
        <div class="bg-amber-50 border-l-4 border-amber-500 rounded-xl p-5 shadow-sm">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <span class="material-icons text-amber-600 text-2xl">warning_amber</span>
                </div>
                <div class="ml-4 flex-1">
                    <h5 class="text-amber-800 font-semibold text-base mb-1">{{__('messages.errors.trial_license_active')}}</h5>
                    <p class="text-amber-700 text-sm">
                        @if($daysRemaining > 0)
                            {{__('messages.errors.trial_license_days_remaining', ['days' => $daysRemaining])}}
                        @else
                            {{__('messages.errors.trial_license_expired')}}
                        @endif
                        {{__('messages.errors.trial_license_description')}}
                    </p>
                </div>
            </div>
        </div>
        @elseif(isset($hasNoLicense) && $hasNoLicense)
        <div class="bg-amber-50 border-l-4 border-amber-500 rounded-xl p-5 shadow-sm">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <span class="material-icons text-amber-600 text-2xl">warning_amber</span>
                </div>
                <div class="ml-4 flex-1">
                    <h5 class="text-amber-800 font-semibold text-base mb-1">{{__('messages.errors.trial_license_active')}}</h5>
                    <p class="text-amber-700 text-sm">{{__('messages.errors.trial_license_description')}}</p>
                </div>
            </div>
        </div>
        @endif
    </div>
    @endif
    
    @if($isAdmin)
    <!-- Stats Cards - Modern Design -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Today Queue -->
        <div class="group bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-full -mr-16 -mt-16 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300">
                        <span class="material-icons text-white text-2xl">queue</span>
                    </div>
                    <span class="text-xs font-semibold text-blue-600 bg-blue-50 px-3 py-1.5 rounded-full border border-blue-100">Queue</span>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 mb-1">{{__('messages.dashboard.today queue')}}</p>
                    <h3 class="text-3xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors duration-300">{{$today_queue}}</h3>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100">
                    <div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
                        <div class="bg-gradient-to-r from-blue-500 to-blue-600 h-2.5 rounded-full transition-all duration-500 ease-out" style="width: {{ min(($today_queue / max($today_queue + $today_serving + $today_served + $today_noshow, 1)) * 100, 100) }}%"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Today Serving -->
        <div class="group bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-emerald-50 rounded-full -mr-16 -mt-16 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300">
                        <span class="material-icons text-white text-2xl">phone_in_talk</span>
                    </div>
                    <span class="text-xs font-semibold text-emerald-600 bg-emerald-50 px-3 py-1.5 rounded-full border border-emerald-100">Active</span>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 mb-1">{{__('messages.dashboard.today serving')}}</p>
                    <h3 class="text-3xl font-bold text-gray-900 group-hover:text-emerald-600 transition-colors duration-300">{{$today_serving}}</h3>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100">
                    <div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
                        <div class="bg-gradient-to-r from-emerald-500 to-emerald-600 h-2.5 rounded-full transition-all duration-500 ease-out" style="width: {{ min(($today_serving / max($today_queue + $today_serving + $today_served + $today_noshow, 1)) * 100, 100) }}%"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Today Served -->
        <div class="group bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-green-50 rounded-full -mr-16 -mt-16 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300">
                        <span class="material-icons text-white text-2xl">check_circle</span>
                    </div>
                    <span class="text-xs font-semibold text-green-600 bg-green-50 px-3 py-1.5 rounded-full border border-green-100">Completed</span>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 mb-1">{{__('messages.dashboard.today served')}}</p>
                    <h3 class="text-3xl font-bold text-gray-900 group-hover:text-green-600 transition-colors duration-300">{{$today_served}}</h3>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100">
                    <div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
                        <div class="bg-gradient-to-r from-green-500 to-green-600 h-2.5 rounded-full transition-all duration-500 ease-out" style="width: {{ min(($today_served / max($today_queue + $today_serving + $today_served + $today_noshow, 1)) * 100, 100) }}%"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Today No Show -->
        <div class="group bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-red-50 rounded-full -mr-16 -mt-16 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300">
                        <span class="material-icons text-white text-2xl">cancel</span>
                    </div>
                    <span class="text-xs font-semibold text-red-600 bg-red-50 px-3 py-1.5 rounded-full border border-red-100">No Show</span>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 mb-1">{{__('messages.dashboard.today noshow')}}</p>
                    <h3 class="text-3xl font-bold text-gray-900 group-hover:text-red-600 transition-colors duration-300">{{$today_noshow}}</h3>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100">
                    <div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
                        <div class="bg-gradient-to-r from-red-500 to-red-600 h-2.5 rounded-full transition-all duration-500 ease-out" style="width: {{ min(($today_noshow / max($today_queue + $today_serving + $today_served + $today_noshow, 1)) * 100, 100) }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Pie Chart Card -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-1">{{__('messages.dashboard.today')}}</h3>
                    <p class="text-sm text-gray-500">Token distribution overview</p>
                </div>
                <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-400 rounded-xl flex items-center justify-center shadow-md">
                    <span class="material-icons text-white">pie_chart</span>
                </div>
            </div>
            <div class="relative" style="height: 320px; min-height: 320px;">
                <canvas id="pieChart" style="max-height: 100%;"></canvas>
            </div>
        </div>
        
        <!-- Line Chart Card -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-1">{{__('messages.dashboard.today vs yesterday')}}</h3>
                    <p class="text-sm text-gray-500">Hourly comparison</p>
                </div>
                <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-500 rounded-xl flex items-center justify-center shadow-md">
                    <span class="material-icons text-white">show_chart</span>
                </div>
            </div>
            <div class="relative" style="height: 320px; min-height: 320px;">
                <canvas id="lineChart" style="max-height: 100%;"></canvas>
            </div>
        </div>
    </div>
    @else
    <!-- Non-Admin Welcome Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center">
        <div class="max-w-md mx-auto">
            <div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-400 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                <span class="material-icons text-white text-4xl">dashboard</span>
            </div>
            <h4 class="text-2xl font-bold text-gray-900 mb-3">{{__('messages.dashboard.welcome')}}</h4>
            <p class="text-gray-600 mb-8">{{__('messages.dashboard.call_page_redirect')}}</p>
            <a href="{{ route('show_call_page') }}" class="inline-flex items-center px-8 py-3.5 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95 border border-blue-400/20">
                {{__('messages.dashboard.go_to_call_page')}}
                <span class="material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-2 @else ml-2 @endif">arrow_forward</span>
            </a>
        </div>
    </div>
    @endif
</div>

@if($isAdmin)
@push('scripts')
<script>
    function dashboardData() {
        return {
            init() {
                this.initCharts();
                this.updateTime();
                setInterval(() => this.updateTime(), 1000);
            },
            updateTime() {
                const now = new Date();
                const timeString = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
                const timeElement = document.getElementById('current-time');
                if (timeElement) {
                    timeElement.textContent = timeString;
                }
            },
            initCharts() {
                // Modern Doughnut Chart with gradients and animations
                const pieCtx = document.getElementById('pieChart');
                if (pieCtx) {
                    const ctx = pieCtx.getContext('2d');
                    
                    // Create gradient fills
                    const blueGradient = ctx.createLinearGradient(0, 0, 0, 400);
                    blueGradient.addColorStop(0, 'rgba(59, 130, 246, 1)');
                    blueGradient.addColorStop(1, 'rgba(37, 99, 235, 1)');
                    
                    const emeraldGradient = ctx.createLinearGradient(0, 0, 0, 400);
                    emeraldGradient.addColorStop(0, 'rgba(16, 185, 129, 1)');
                    emeraldGradient.addColorStop(1, 'rgba(5, 150, 105, 1)');
                    
                    const greenGradient = ctx.createLinearGradient(0, 0, 0, 400);
                    greenGradient.addColorStop(0, 'rgba(34, 197, 94, 1)');
                    greenGradient.addColorStop(1, 'rgba(22, 163, 74, 1)');
                    
                    const redGradient = ctx.createLinearGradient(0, 0, 0, 400);
                    redGradient.addColorStop(0, 'rgba(239, 68, 68, 1)');
                    redGradient.addColorStop(1, 'rgba(220, 38, 38, 1)');
                    
                    new Chart(pieCtx, {
                        type: 'doughnut',
                        data: {
                            labels: [
                                "{{__('messages.common.queue')}}",
                                "{{__('messages.common.serving')}}",
                                "{{__('messages.common.served')}}",
                                "{{__('messages.common.noshow')}}",
                            ],
                            datasets: [{
                                data: [{{$today_queue}}, {{$today_serving}}, {{$today_served}}, {{$today_noshow}}],
                                backgroundColor: [
                                    blueGradient,
                                    emeraldGradient,
                                    greenGradient,
                                    redGradient,
                                ],
                                borderWidth: 0,
                                hoverOffset: 12,
                                hoverBorderWidth: 3,
                                hoverBorderColor: '#fff',
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: true,
                            aspectRatio: 1.2,
                            layout: {
                                padding: {
                                    top: 10,
                                    bottom: 20,
                                    left: 10,
                                    right: 10
                                }
                            },
                            animation: {
                                animateRotate: true,
                                animateScale: true,
                                duration: 2000,
                                easing: 'easeOutQuart'
                            },
                            plugins: {
                                legend: {
                                    position: 'bottom',
                                    align: 'center',
                                    labels: {
                                        padding: 15,
                                        font: {
                                            size: 12,
                                            weight: '500',
                                            family: "'Inter', sans-serif"
                                        },
                                        usePointStyle: true,
                                        pointStyle: 'circle',
                                        boxWidth: 8,
                                        boxHeight: 8,
                                        color: '#374151',
                                        generateLabels: function(chart) {
                                            const data = chart.data;
                                            if (data.labels.length && data.datasets.length) {
                                                return data.labels.map((label, i) => {
                                                    const dataset = data.datasets[0];
                                                    const value = dataset.data[i];
                                                    const total = dataset.data.reduce((a, b) => a + b, 0);
                                                    const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                                    return {
                                                        text: label + ' (' + percentage + '%)',
                                                        fillStyle: dataset.backgroundColor[i],
                                                        hidden: false,
                                                        index: i
                                                    };
                                                });
                                            }
                                            return [];
                                        }
                                    }
                                },
                                tooltip: {
                                    backgroundColor: 'rgba(17, 24, 39, 0.95)',
                                    padding: 16,
                                    titleFont: {
                                        size: 14,
                                        weight: '600',
                                        family: "'Inter', sans-serif"
                                    },
                                    bodyFont: {
                                        size: 13,
                                        weight: '500',
                                        family: "'Inter', sans-serif"
                                    },
                                    cornerRadius: 12,
                                    displayColors: true,
                                    callbacks: {
                                        label: function(context) {
                                            let label = context.label || '';
                                            if (label) {
                                                label += ': ';
                                            }
                                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                            const percentage = ((context.parsed / total) * 100).toFixed(1);
                                            label += context.parsed + ' (' + percentage + '%)';
                                            return label;
                                        }
                                    }
                                }
                            },
                            cutout: '70%',
                            spacing: 3,
                            radius: '85%'
                        }
                    });
                }
                
                // Modern Line Chart with gradients and enhanced styling
                const lineCtx = document.getElementById('lineChart');
                if (lineCtx) {
                    const ctx = lineCtx.getContext('2d');
                    
                    // Create gradient fills for area charts
                    const todayGradient = ctx.createLinearGradient(0, 0, 0, 400);
                    todayGradient.addColorStop(0, 'rgba(99, 102, 241, 0.3)');
                    todayGradient.addColorStop(0.5, 'rgba(99, 102, 241, 0.15)');
                    todayGradient.addColorStop(1, 'rgba(99, 102, 241, 0.05)');
                    
                    const yesterdayGradient = ctx.createLinearGradient(0, 0, 0, 400);
                    yesterdayGradient.addColorStop(0, 'rgba(96, 165, 250, 0.3)');
                    yesterdayGradient.addColorStop(0.5, 'rgba(96, 165, 250, 0.15)');
                    yesterdayGradient.addColorStop(1, 'rgba(96, 165, 250, 0.05)');
                    
                    new Chart(lineCtx, {
                        type: 'line',
                        data: {
                            labels: ['00:00', '6:00', '12:00', '18:00', '24:00'],
                            datasets: [{
                                label: "{{__('messages.dashboard.today')}}",
                                data: [@foreach($chart_data['today'] as $indx => $data)
                                    @if($indx == 0) {{$data}}
                                    @else , {{$data}}
                                    @endif
                                @endforeach],
                                borderColor: 'rgb(99, 102, 241)',
                                backgroundColor: todayGradient,
                                tension: 0.5,
                                pointRadius: 6,
                                pointHoverRadius: 9,
                                pointBackgroundColor: '#fff',
                                pointBorderColor: 'rgb(99, 102, 241)',
                                pointBorderWidth: 3,
                                pointHoverBackgroundColor: 'rgb(99, 102, 241)',
                                pointHoverBorderColor: '#fff',
                                pointHoverBorderWidth: 3,
                                fill: true,
                                borderWidth: 3,
                                shadowOffsetX: 0,
                                shadowOffsetY: 4,
                                shadowBlur: 10,
                                shadowColor: 'rgba(99, 102, 241, 0.3)'
                            }, {
                                label: "{{__('messages.dashboard.yesterday')}}",
                                data: [@foreach($chart_data['yesterday'] as $indx => $data)
                                    @if($indx == 0) {{$data}}
                                    @else , {{$data}}
                                    @endif
                                @endforeach],
                                borderColor: 'rgb(96, 165, 250)',
                                backgroundColor: yesterdayGradient,
                                tension: 0.5,
                                pointRadius: 6,
                                pointHoverRadius: 9,
                                pointBackgroundColor: '#fff',
                                pointBorderColor: 'rgb(96, 165, 250)',
                                pointBorderWidth: 3,
                                pointHoverBackgroundColor: 'rgb(96, 165, 250)',
                                pointHoverBorderColor: '#fff',
                                pointHoverBorderWidth: 3,
                                fill: true,
                                borderWidth: 3,
                                shadowOffsetX: 0,
                                shadowOffsetY: 4,
                                shadowBlur: 10,
                                shadowColor: 'rgba(96, 165, 250, 0.3)'
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            animation: {
                                duration: 2000,
                                easing: 'easeOutQuart'
                            },
                            interaction: {
                                intersect: false,
                                mode: 'index'
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    ticks: {
                                        stepSize: 1,
                                        font: {
                                            size: 12,
                                            weight: '500',
                                            family: "'Inter', sans-serif"
                                        },
                                        color: '#6b7280',
                                        padding: 10
                                    },
                                    grid: {
                                        color: 'rgba(0, 0, 0, 0.05)',
                                        drawBorder: false,
                                        lineWidth: 1
                                    },
                                    title: {
                                        display: true,
                                        text: "{{__('messages.dashboard.number of tokens')}}",
                                        font: {
                                            size: 13,
                                            weight: '600',
                                            family: "'Inter', sans-serif"
                                        },
                                        color: '#374151',
                                        padding: {
                                            top: 10,
                                            bottom: 20
                                        }
                                    }
                                },
                                x: {
                                    ticks: {
                                        font: {
                                            size: 12,
                                            weight: '500',
                                            family: "'Inter', sans-serif"
                                        },
                                        color: '#6b7280',
                                        padding: 10
                                    },
                                    grid: {
                                        display: false,
                                        drawBorder: false
                                    },
                                    title: {
                                        display: true,
                                        text: "{{__('messages.dashboard.time')}}",
                                        font: {
                                            size: 13,
                                            weight: '600',
                                            family: "'Inter', sans-serif"
                                        },
                                        color: '#374151',
                                        padding: {
                                            top: 10,
                                            bottom: 10
                                        }
                                    }
                                }
                            },
                            plugins: {
                                legend: {
                                    position: 'top',
                                    align: 'end',
                                    labels: {
                                        padding: 20,
                                        font: {
                                            size: 13,
                                            weight: '500',
                                            family: "'Inter', sans-serif"
                                        },
                                        usePointStyle: true,
                                        pointStyle: 'circle',
                                        pointStyleWidth: 8,
                                        color: '#374151'
                                    }
                                },
                                tooltip: {
                                    backgroundColor: 'rgba(17, 24, 39, 0.95)',
                                    padding: 16,
                                    titleFont: {
                                        size: 14,
                                        weight: '600',
                                        family: "'Inter', sans-serif"
                                    },
                                    bodyFont: {
                                        size: 13,
                                        weight: '500',
                                        family: "'Inter', sans-serif"
                                    },
                                    cornerRadius: 12,
                                    displayColors: true,
                                    borderColor: 'rgba(255, 255, 255, 0.1)',
                                    borderWidth: 1,
                                    callbacks: {
                                        label: function(context) {
                                            return context.dataset.label + ': ' + context.parsed.y + ' tokens';
                                        }
                                    }
                                }
                            }
                        }
                    });
                }
            }
        }
    }
</script>
@endpush
@endif
@endsection