@extends('admin.layout')

@section('title', 'Dashboard')

@section('content')
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-800">Dashboard Overview</h1>
    <p class="text-gray-600 mt-1">Welcome back! Here's what's happening with your platform.</p>
</div>

{{-- Main Stats Cards --}}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    {{-- Total Users --}}
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);" class="text-white p-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm" style="opacity: 0.9;">Total Users</p>
                <h3 class="text-4xl font-bold mt-2">{{ number_format($totalUsers) }}</h3>
                <p class="text-xs mt-2" style="opacity: 0.75;">
                    <span class="font-semibold">+{{ $newUsersThisWeek }}</span> this week
                </p>
            </div>
            <div style="background-color: rgba(255, 255, 255, 0.2);" class="p-3 rounded-full">
                <svg class="w-8 h-8" style="fill: #ffffff;" viewBox="0 0 20 20">
                    <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"></path>
                </svg>
            </div>
        </div>
        <a href="{{ route('users.index') }}" style="background-color: rgba(255, 255, 255, 0.2); display: inline-block;" class="mt-4 px-4 py-2 rounded-lg text-sm transition hover:bg-opacity-30">
            View All Users →
        </a>
    </div>

    {{-- Total Vouchers --}}
    <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);" class="text-white p-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm" style="opacity: 0.9;">Total Vouchers</p>
                <h3 class="text-4xl font-bold mt-2">{{ number_format($totalVouchers) }}</h3>
                <p class="text-xs mt-2" style="opacity: 0.75;">
                    <span class="font-semibold">{{ $claimRate }}%</span> claimed
                </p>
            </div>
            <div style="background-color: rgba(255, 255, 255, 0.2);" class="p-3 rounded-full">
                <svg class="w-8 h-8" style="fill: #ffffff;" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 110 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1 1h1zm3 0a1 1 0 10-1-1v1h1z" clip-rule="evenodd"></path>
                    <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z"></path>
                </svg>
            </div>
        </div>
        <a href="{{ route('vouchers.index') }}" style="background-color: rgba(255, 255, 255, 0.2); display: inline-block;" class="mt-4 px-4 py-2 rounded-lg text-sm transition hover:bg-opacity-30">
            Manage Vouchers →
        </a>
    </div>

    {{-- Activities --}}
    <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);" class="text-white p-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm" style="opacity: 0.9;">Activities</p>
                <h3 class="text-4xl font-bold mt-2">{{ number_format($totalActivities) }}</h3>
                <p class="text-xs mt-2" style="opacity: 0.75;">
                    <span class="font-semibold">{{ $activeHolidays }}</span> active holidays
                </p>
            </div>
            <div style="background-color: rgba(255, 255, 255, 0.2);" class="p-3 rounded-full">
                <svg class="w-8 h-8" style="fill: #ffffff;" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
                </svg>
            </div>
        </div>
        <a href="{{ route('activities.index') }}" style="background-color: rgba(255, 255, 255, 0.2); display: inline-block;" class="mt-4 px-4 py-2 rounded-lg text-sm transition hover:bg-opacity-30">
            View Activities →
        </a>
    </div>

    {{-- Blogs --}}
    <div style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);" class="text-white p-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm" style="opacity: 0.9;">Blog Posts</p>
                <h3 class="text-4xl font-bold mt-2">{{ number_format($totalBlogs) }}</h3>
                <p class="text-xs mt-2" style="opacity: 0.75;">
                    Content published
                </p>
            </div>
            <div style="background-color: rgba(255, 255, 255, 0.2);" class="p-3 rounded-full">
                <svg class="w-8 h-8" style="fill: #ffffff;" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z" clip-rule="evenodd"></path>
                    <path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
                </svg>
            </div>
        </div>
        <a href="{{ route('blogs.index') }}" style="background-color: rgba(255, 255, 255, 0.2); display: inline-block;" class="mt-4 px-4 py-2 rounded-lg text-sm transition hover:bg-opacity-30">
            Manage Blogs →
        </a>
    </div>
</div>

{{-- Voucher Breakdown --}}
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-green-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600">Available Vouchers</p>
                <h3 class="text-3xl font-bold text-gray-800 mt-2">{{ number_format($availableVouchers) }}</h3>
            </div>
            <div style="background-color: #10b981;" class="p-3 rounded-full">
                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
            </div>
        </div>
    </div>

    <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500">
        <div class="flex items-center justify-between mb-3">
            <div class="flex-1">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-sm text-gray-600">Claimed Vouchers</p>
                    <select id="claimedVouchersFilter" class="text-xs px-2 py-1 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="all">All Time</option>
                        @foreach($holidays as $holiday)
                            <option value="{{ $holiday->id }}">{{ $holiday->title }} {{ \Carbon\Carbon::parse($holiday->start_date)->format('Y') }}</option>
                        @endforeach
                    </select>
                </div>
                <h3 id="claimedVouchersCount" class="text-3xl font-bold text-gray-800 mt-2">{{ number_format($claimedVouchers) }}</h3>
            </div>
            <div style="background-color: #3b82f6;" class="p-3 rounded-full">
                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path>
                    <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"></path>
                </svg>
            </div>
        </div>
    </div>

    <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-purple-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-600">Claims This Week</p>
                <h3 class="text-3xl font-bold text-gray-800 mt-2">{{ number_format($recentClaims) }}</h3>
            </div>
            <div style="background-color: #a855f7;" class="p-3 rounded-full">
                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
                </svg>
            </div>
        </div>
    </div>
</div>

{{-- Charts Row --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    {{-- Weekly Active Users --}}
    <div class="bg-white p-6 rounded-xl shadow-md">
        <h2 class="text-xl font-bold mb-4 text-gray-800">Weekly Active Users (Past Year)</h2>
        <div style="height: 300px; position: relative;">
            <canvas id="weeklyActiveUsersChart"></canvas>
        </div>
    </div>

    {{-- Vouchers by Type --}}
    <div class="bg-white p-6 rounded-xl shadow-md">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold text-gray-800">Voucher Distribution by Type</h2>
            <div class="flex items-center space-x-2">
                <label for="voucherTypeFilter" class="text-sm font-medium text-gray-700">Holiday:</label>
                <select id="voucherTypeFilter" class="px-3 py-1.5 border-2 border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="all">All Time</option>
                    @foreach($holidays as $holiday)
                        <option value="{{ $holiday->id }}">{{ $holiday->title }} {{ \Carbon\Carbon::parse($holiday->start_date)->format('Y') }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div style="height: 300px; position: relative;">
            <canvas id="voucherTypeChart"></canvas>
        </div>
    </div>
</div>

{{-- Vouchers Claimed by Holiday --}}
<div class="bg-white p-6 rounded-xl shadow-md mb-8">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold text-gray-800">Vouchers Claimed by Holiday</h2>
        <div class="flex items-center space-x-2">
            <label for="holidayYearFilter" class="text-sm font-medium text-gray-700">Year:</label>
            <select id="holidayYearFilter" class="px-3 py-1.5 border-2 border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <option value="all">All Years</option>
                @foreach($holidayYears as $year)
                    <option value="{{ $year }}" {{ $year == date('Y') ? 'selected' : '' }}>{{ $year }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div style="height: 300px; position: relative;">
        <canvas id="weeklyClaimedVouchersChart"></canvas>
    </div>
</div>

{{-- Bottom Section: Top Users & Recent Activity --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    {{-- Top Users --}}
    <div class="bg-white p-6 rounded-xl shadow-md">
        <h2 class="text-xl font-bold mb-4 text-gray-800">Top Users by Claims</h2>
        @if($topUsers->count() > 0)
            <div class="space-y-3">
                @foreach($topUsers as $index => $user)
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition">
                        <div class="flex items-center space-x-3">
                            <div class="flex items-center justify-center w-8 h-8 rounded-full {{ $index === 0 ? 'bg-yellow-400' : ($index === 1 ? 'bg-gray-300' : ($index === 2 ? 'bg-orange-300' : 'bg-gray-200')) }}">
                                <span class="text-sm font-bold {{ $index < 3 ? 'text-white' : 'text-gray-600' }}">{{ $index + 1 }}</span>
                            </div>
                            <div>
                                <p class="font-semibold text-gray-800">{{ $user->name ?? $user->email }}</p>
                                <p class="text-xs text-gray-500">{{ $user->email }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-lg font-bold text-blue-600">{{ $user->vouchers_count }}</p>
                            <p class="text-xs text-gray-500">claims</p>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-gray-500 text-center py-8">No voucher claims yet</p>
        @endif
    </div>

    {{-- Recent Activity --}}
    <div class="bg-white p-6 rounded-xl shadow-md">
        <h2 class="text-xl font-bold mb-4 text-gray-800">Recent Voucher Claims</h2>
        @if($recentActivity->count() > 0)
            <div class="space-y-3 max-h-96 overflow-y-auto">
                @foreach($recentActivity as $claim)
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border-l-4 {{ $claim->type === 'uber' ? 'border-black' : 'border-pink-500' }}">
                        <div class="flex items-center space-x-3 flex-1 min-w-0">
                            <div style="background-color: {{ $claim->type === 'uber' ? '#000000' : '#FF00BF' }};" class="p-2 rounded-full flex-shrink-0">
                                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path>
                                    <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"></path>
                                </svg>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="font-semibold text-gray-800 truncate">{{ $claim->user ? $claim->user->name : 'Unknown User' }}</p>
                                <p class="text-xs text-gray-500">claimed {{ ucfirst($claim->type) }} voucher</p>
                            </div>
                        </div>
                        <div class="text-right flex-shrink-0 ml-2">
                            <p class="text-xs text-gray-500">{{ $claim->claimed_at->diffForHumans() }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-gray-500 text-center py-8">No recent claims</p>
        @endif
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Weekly Active Users Chart
        fetch('{{ route('admin.weekly-active-users') }}')
            .then(response => response.json())
            .then(data => {
                const labels = data.map(item => item.week);
                const activeUsers = data.map(item => item.active_users);

                const ctx = document.getElementById('weeklyActiveUsersChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Active Users',
                            data: activeUsers,
                            borderColor: '#667eea',
                            backgroundColor: 'rgba(102, 126, 234, 0.1)',
                            borderWidth: 3,
                            tension: 0.4,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        aspectRatio: 2,
                        plugins: {
                            legend: {
                                display: true,
                                position: 'bottom'
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.05)'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            });

        // Voucher Type Distribution Chart (Doughnut)
        let voucherTypeChart = null;

        function loadVoucherTypeChart(holiday = 'all') {
            fetch(`{{ route('admin.voucher-distribution') }}?holiday=${holiday}`)
                .then(response => response.json())
                .then(data => {
                    const ctx = document.getElementById('voucherTypeChart').getContext('2d');

                    // Destroy existing chart if it exists
                    if (voucherTypeChart) {
                        voucherTypeChart.destroy();
                    }

                    voucherTypeChart = new Chart(ctx, {
                        type: 'doughnut',
                        data: {
                            labels: ['Uber (Available)', 'Uber (Claimed)', 'Lyft (Available)', 'Lyft (Claimed)'],
                            datasets: [{
                                data: [
                                    data.uber_available,
                                    data.uber_claimed,
                                    data.lyft_available,
                                    data.lyft_claimed
                                ],
                                backgroundColor: [
                                    'rgba(0, 0, 0, 0.5)',
                                    'rgba(0, 0, 0, 0.9)',
                                    'rgba(255, 0, 191, 0.5)',
                                    'rgba(255, 0, 191, 0.9)'
                                ],
                                borderWidth: 2,
                                borderColor: '#fff'
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: true,
                            aspectRatio: 1.5,
                            plugins: {
                                legend: {
                                    position: 'bottom'
                                }
                            }
                        }
                    });
                });
        }

        // Load initial voucher type chart
        loadVoucherTypeChart();

        // Add event listener for voucher type filter
        document.getElementById('voucherTypeFilter').addEventListener('change', function() {
            loadVoucherTypeChart(this.value);
        });

        // Vouchers Claimed by Holiday Chart
        let holidayChart = null;

        function loadHolidayChart(year = '{{ date('Y') }}') {
            fetch(`{{ route('admin.weekly-claimed-vouchers') }}?year=${year}`)
                .then(response => response.json())
                .then(data => {
                    const labels = data.map(item => item.holiday);
                    const claimedVouchers = data.map(item => item.claimed_vouchers);

                    const ctx = document.getElementById('weeklyClaimedVouchersChart').getContext('2d');

                    // Destroy existing chart if it exists
                    if (holidayChart) {
                        holidayChart.destroy();
                    }

                    holidayChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Claimed Vouchers',
                            data: claimedVouchers,
                            backgroundColor: 'rgba(245, 87, 108, 0.8)',
                            borderColor: 'rgba(245, 87, 108, 1)',
                            borderWidth: 2,
                            borderRadius: 8
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        aspectRatio: 3,
                        plugins: {
                            legend: {
                                display: true,
                                position: 'bottom'
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.05)'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            });
        }

        // Load initial chart
        loadHolidayChart();

        // Add event listener for year filter
        document.getElementById('holidayYearFilter').addEventListener('change', function() {
            loadHolidayChart(this.value);
        });

        // Claimed Vouchers Filter
        document.getElementById('claimedVouchersFilter').addEventListener('change', function() {
            const holiday = this.value;
            fetch(`{{ route('admin.claimed-vouchers-count') }}?holiday=${holiday}`)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('claimedVouchersCount').textContent = data.count.toLocaleString();
                });
        });
    });
</script>
@endsection