@extends('layouts.main')

@section('title')
    {{ __('dashboard.title') }}
@endsection

@section('page_title')
{{ __('dashboard.title') }}
@endsection

@php
    $breadcrumbs = [
        ['url' => '', 'label' => __('dashboard.title')],
    ];
@endphp

@section('content')
    <div class="w-full space-y-6">
        <!-- Welcome Section -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
                <div>
                    <h1 class="text-2xl font-semibold text-gray-700 mb-2">{{ __('dashboard.welcome', ['name' => Auth::user()->name]) }} 👋</h1>
                    <p class="text-gray-600">{{ __('dashboard.welcome_message') }}</p>
                </div>
                <div class="mt-4 lg:mt-0">
                    <div class="flex items-center space-x-2 text-sm text-gray-600">
                        <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                        <span>{{ __('dashboard.system_online') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistics Cards Row -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <!-- Total Events -->
            <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300">
                <div class="flex items-center space-x-4">
                    <div class="min-w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                        <i class="fas fa-calendar-alt text-primary text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-2xl font-semibold text-gray-700">{{ $eventCount ?? 0 }}</h3>
                        <p class="text-gray-600 font-medium">{{ __('dashboard.total_events') }}</p>
                        {{-- <div class="flex items-center mt-1">
                            <i class="fas fa-arrow-up text-green-500 mr-1 text-sm"></i>
                            <span class="text-sm text-green-600 font-medium">+{{ $eventsThisMonth ?? 0 }} this month</span>
                        </div> --}}
                    </div>
                </div>
            </div>

            <!-- Total Campaigns -->
            <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300">
                <div class="flex items-center space-x-4">
                    <div class="min-w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-paper-plane text-green-600 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-2xl font-semibold text-gray-700">{{ $campaignCount ?? 0 }}</h3>
                        <p class="text-gray-600 font-medium">{{ __('dashboard.total_campaigns') }}</p>
                        {{-- <div class="flex items-center mt-1">
                            <i class="fas fa-arrow-up text-green-500 mr-1 text-sm"></i>
                            <span class="text-sm text-green-600 font-medium">+{{ $campaignsThisMonth ?? 0 }} this month</span>
                        </div> --}}
                    </div>
                </div>
            </div>

            <!-- Total Invitations -->
            <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300">
                <div class="flex items-center space-x-4">
                    <div class="min-w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-envelope text-blue-600 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-2xl font-semibold text-gray-700">{{ $invitationCount ?? 0 }}</h3>
                        <p class="text-gray-600 font-medium">{{ __('dashboard.total_invitations') }}</p>
                        {{-- <div class="flex items-center mt-1">
                            <i class="fas fa-arrow-up text-green-500 mr-1 text-sm"></i>
                            <span class="text-sm text-green-600 font-medium">+{{ $invitationsThisMonth ?? 0 }} this month</span>
                        </div> --}}
                    </div>
                </div>
            </div>

            <!-- Device Status -->
            <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300">
                <div class="flex items-center space-x-4">
                    <div class="min-w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-mobile-alt text-yellow-600 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-2xl font-semibold text-gray-700">{{ $connectedDevices ?? 0 }}</h3>
                        <p class="text-gray-600 font-medium">{{ __('dashboard.connected_devices') }}</p>
                        {{-- <div class="flex items-center mt-1">
                            <span class="text-sm text-gray-500">{{ $disconnectedDevices ?? 0 }} disconnected</span>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts and Analytics Row -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
            <!-- Monthly Analytics Chart -->
            <div class="lg:col-span-2">
                <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-2xl shadow-front-box-shadow-glow">
                    <div class="p-4 border-b border-gray-300">
                        <div class="flex items-center justify-between">
                            <div>
                                <h3 class="text-lg font-semibold text-gray-700">{{ __('dashboard.monthly_analytics') }}</h3>
                                <p class="text-gray-600 mt-1">{{ __('dashboard.track_performance') }}</p>
                            </div>
                            <div class="flex items-center space-x-2">
                                <button class="btn btn-sm btn-outline-secondary whitespace-nowrap">
                                    <i class="fas fa-calendar mr-2"></i>
                                    {{ __('dashboard.last_6_months') }}
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="md:p-6 p-2">
                        <div class="bg-fl-gray-extra-light/30 backdrop-blur-sm rounded-24 md:p-4 p-2">
                            <canvas id="monthlyAnalyticsChart" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Invitation Status -->
            <div class="lg:col-span-1">
                <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-2xl shadow-front-box-shadow-glow">
                    <div class="p-4 border-b border-gray-300">
                        <h3 class="text-lg font-semibold text-gray-700">{{ __('dashboard.invitation_status') }}</h3>
                        <p class="text-gray-600 mt-1">{{ __('dashboard.delivery_statistics') }}</p>
                    </div>
                    <div class="md:p-6 p-4 space-y-4">
                        <!-- Sent -->
                        <div class="space-y-2">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-gray-600">{{ __('dashboard.in_progress') }}</span>
                                <span class="text-lg font-semibold text-gray-700">{{ $sentInvitations ?? 0 }}</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-lg h-2">
                                <div class="bg-primary h-2 rounded-lg" style="width: {{ $invitationCount > 0 ? ($sentInvitations / $invitationCount) * 100 : 0 }}%"></div>
                            </div>
                        </div>

                        <!-- Delivered -->
                        <div class="space-y-2">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-gray-600">{{ __('dashboard.delivered') }}</span>
                                <span class="text-lg font-semibold text-gray-700">{{ $deliveredInvitations ?? 0 }}</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-lg h-2">
                                <div class="bg-green-500 h-2 rounded-lg" style="width: {{ $invitationCount > 0 ? ($deliveredInvitations / $invitationCount) * 100 : 0 }}%"></div>
                            </div>
                        </div>

                        <!-- Failed -->
                        <div class="space-y-2">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-gray-600">{{ __('dashboard.failed') }}</span>
                                <span class="text-lg font-semibold text-gray-700">{{ $failedInvitations ?? 0 }}</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-lg h-2">
                                <div class="bg-red-500 h-2 rounded-lg" style="width: {{ $invitationCount > 0 ? ($failedInvitations / $invitationCount) * 100 : 0 }}%"></div>
                            </div>
                        </div>

                        <!-- Success Rate -->
                        <div class="bg-white/80 backdrop-blur-sm rounded-lg p-4 border border-white/50">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-gray-700">{{ __('dashboard.success_rate') }}</span>
                                <span class="text-2xl font-semibold text-green-600">
                                    {{ $invitationCount > 0 ? round(($deliveredInvitations / $invitationCount) * 100, 1) : 0 }}%
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Activities Row -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <!-- Recent Events -->
            <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-2xl shadow-front-box-shadow-glow">
                <div class="p-4 border-b border-gray-300">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-700">{{ __('dashboard.recent_events') }}</h3>
                            <p class="text-gray-600 mt-1">{{ __('dashboard.recent_activities') }}</p>
                        </div>
                        <a href="{{ route('events.index') }}" class="btn btn-sm btn-outline-primary whitespace-nowrap">
                            <i class="fas fa-arrow-right mr-2"></i>
                            {{ __('dashboard.view_all') }}
                        </a>
                    </div>
                </div>
                <div class="p-4">
                    <div class="space-y-3">
                        @forelse($recentEvents ?? [] as $event)
                            <div class="flex items-center space-x-4 p-3 bg-white/50 backdrop-blur-sm rounded-lg transition-all duration-200 border border-white/30">
                                <div class="min-w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-calendar-alt text-primary"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h4 class="text-sm font-semibold text-gray-700 truncate mb-1">{{ $event->name }}</h4>
                                    <p class="text-xs text-gray-500">{{ $event->formatted_created_date }}</p>
                                </div>
                                <span class="px-2 py-1 text-xs font-medium rounded-lg {{ $event->device_connected ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                    {{ $event->device_connected ? __('dashboard.connected') : __('dashboard.disconnected') }}
                                </span>
                            </div>
                        @empty
                            <div class="text-center py-8">
                                <div class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-calendar-alt text-gray-400 text-2xl"></i>
                                </div>
                                <h3 class="text-lg font-medium text-gray-700 mb-2">{{ __('dashboard.no_events_found') }}</h3>
                                <p class="text-gray-500 mb-4">{{ __('dashboard.no_events_message') }}</p>
                                <a href="{{ route('events.create') }}" class="btn btn-primary">
                                    <i class="fas fa-plus mr-2"></i>
                                    {{ __('dashboard.create_event') }}
                                </a>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Recent Campaigns -->
            <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-2xl shadow-front-box-shadow-glow">
                <div class="p-4 border-b border-gray-300">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-700">{{ __('dashboard.recent_campaigns') }}</h3>
                            <p class="text-gray-600 mt-1">{{ __('dashboard.campaign_activities') }}</p>
                        </div>
                        <a href="{{ route('events.index') }}" class="btn btn-sm btn-outline-primary whitespace-nowrap">
                            <i class="fas fa-arrow-right mr-2"></i>
                            {{ __('dashboard.view_all') }}
                        </a>
                    </div>
                </div>
                <div class="p-4">
                    <div class="space-y-3">
                        @forelse($recentCampaigns ?? [] as $campaign)
                            <div class="flex items-center space-x-4 p-3 bg-white/50 backdrop-blur-sm rounded-lg transition-all duration-200 border border-white/30">
                                <div class="min-w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-paper-plane text-primary"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="mb-1 flex items-center gap-3 justify-between">
                                        <h4 class="text-sm font-semibold text-gray-700 truncate">{{ $campaign->name }}</h4>
                                        <p class="text-xs text-gray-800 whitespace-nowrap">{{ $campaign->formatted_created_date }}</p>
                                    </div>
                                    <div class="flex items-center gap-3 justify-between">
                                        <p class="text-xs text-gray-600 whitespace-nowrap">{{ __('dashboard.event') }}: {{ $campaign->event->name ?? 'N/A' }}</p>
                                        <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-lg">{{ $campaign->invitations_count ?? 0 }} {{ __('dashboard.invitations') }}</span>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-8">
                                <div class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-paper-plane text-gray-400 text-2xl"></i>
                                </div>
                                <h3 class="text-lg font-medium text-gray-700 mb-2">{{ __('dashboard.no_campaigns_found') }}</h3>
                                <p class="text-gray-500 mb-4">{{ __('dashboard.no_campaigns_message') }}</p>
                                <a href="{{ route('events.index') }}" class="btn btn-primary">
                                    <i class="fas fa-plus mr-2"></i>
                                    {{ __('dashboard.create_campaign') }}
                                </a>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions Row -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-2xl shadow-front-box-shadow-glow">
            <div class="p-4 border-b border-gray-300">
                <h3 class="text-lg font-semibold text-gray-700">{{ __('dashboard.quick_actions') }}</h3>
                <p class="text-gray-600 mt-1">{{ __('dashboard.common_tasks') }}</p>
            </div>
            <div class="md:p-6 p-4">
                <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
                    <a href="{{ route('events.create') }}" class="group flex flex-col items-center p-6 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 hover:bg-fl-gray-extra-light/60 transition-all duration-200 border border-white/50 hover:border-white/70 shadow-front-box-shadow-glow">
                        <div class="min-w-12 h-12 bg-primary rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-200">
                            <i class="fas fa-plus text-white text-xl"></i>
                        </div>
                        <h4 class="text-sm font-semibold text-gray-700 mb-1 text-center">{{ __('dashboard.create_event') }}</h4>
                        <p class="text-xs text-gray-600 text-center">{{ __('dashboard.start_new_event') }}</p>
                    </a>
                    
                    <a href="{{ route('events.index') }}" class="group flex flex-col items-center p-6 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 hover:bg-fl-gray-extra-light/60 transition-all duration-200 border border-white/50 hover:border-white/70 shadow-front-box-shadow-glow">
                        <div class="min-w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-200">
                            <i class="fas fa-calendar-alt text-white text-xl"></i>
                        </div>
                        <h4 class="text-sm font-semibold text-gray-700 mb-1 text-center">{{ __('dashboard.manage_events') }}</h4>
                        <p class="text-xs text-gray-600 text-center">{{ __('dashboard.view_all_events') }}</p>
                    </a>
                    
                    <a href="{{ route('settings.view') }}" class="group flex flex-col items-center p-6 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 hover:bg-fl-gray-extra-light/60 transition-all duration-200 border border-white/50 hover:border-white/70 shadow-front-box-shadow-glow">
                        <div class="min-w-12 h-12 bg-gray-500 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-200">
                            <i class="fas fa-cog text-white text-xl"></i>
                        </div>
                        <h4 class="text-sm font-semibold text-gray-700 mb-1 text-center">{{ __('common.settings') }}</h4>
                        <p class="text-xs text-gray-600 text-center">{{ __('dashboard.configure_system') }}</p>
                    </a>
                    
                    <a href="{{ route('profile.view') }}" class="group flex flex-col items-center p-6 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 hover:bg-fl-gray-extra-light/60 transition-all duration-200 border border-white/50 hover:border-white/70 shadow-front-box-shadow-glow">
                        <div class="min-w-12 h-12 bg-secondary rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-200">
                            <i class="fas fa-user text-white text-xl"></i>
                        </div>
                        <h4 class="text-sm font-semibold text-gray-700 mb-1 text-center">{{ __('common.profile') }}</h4>
                        <p class="text-xs text-gray-600 text-center">{{ __('dashboard.manage_account') }}</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('custom_scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Monthly Analytics Chart
    const monthlyData = @json($monthlyData ?? []);
    
    const ctx = document.getElementById('monthlyAnalyticsChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: monthlyData.map(item => item.month),
            datasets: [{
                label: '{{ __('dashboard.total_events') }}',
                data: monthlyData.map(item => item.events),
                borderColor: '#4E7C50',
                backgroundColor: 'rgba(78, 124, 80, 0.1)',
                tension: 0.4,
                fill: true
            }, {
                label: '{{ __('dashboard.total_campaigns') }}',
                data: monthlyData.map(item => item.campaigns),
                borderColor: '#FF9F43',
                backgroundColor: 'rgba(255, 159, 67, 0.1)',
                tension: 0.4,
                fill: true
            }, {
                label: '{{ __('dashboard.total_invitations') }}',
                data: monthlyData.map(item => item.invitations),
                borderColor: '#9CCB8F',
                backgroundColor: 'rgba(156, 203, 143, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                }
            },
            scales: {
                x: {
                    display: true,
                    title: {
                        display: true,
                        text: '{{ __('dashboard.month') }}'
                    }
                },
                y: {
                    display: true,
                    title: {
                        display: true,
                        text: '{{ __('dashboard.count') }}'
                    },
                    beginAtZero: true
                }
            },
            interaction: {
                mode: 'nearest',
                axis: 'x',
                intersect: false
            }
        }
    });
});
</script>
@endpush