@extends('admin.layout')

@section('title', 'Analytics')

@section('content')
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">Vote Analytics</h1>
    <p class="text-gray-600 mt-2">Track voting performance and revenue</p>
</div>

<!-- Date Filter -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
    <form method="GET" class="flex flex-wrap gap-4 items-end">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
            <input type="date" name="start_date" value="{{ $startDate->format('Y-m-d') }}" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">End Date</label>
            <input type="date" name="end_date" value="{{ $endDate->format('Y-m-d') }}" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
        </div>
        <button type="submit" class="bg-primary text-white px-6 py-2 rounded-lg hover:bg-primary/90">Filter</button>
    </form>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
    <!-- Votes by Category Chart -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h2 class="text-xl font-bold text-gray-900 mb-4">Votes by Category</h2>
        <canvas id="votesByCategoryChart"></canvas>
    </div>

    <!-- Revenue by Category Chart -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h2 class="text-xl font-bold text-gray-900 mb-4">Revenue by Category</h2>
        <canvas id="revenueByCategoryChart"></canvas>
    </div>
</div>

<!-- Votes Over Time Chart -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
    <h2 class="text-xl font-bold text-gray-900 mb-4">Votes Over Time</h2>
    <canvas id="votesOverTimeChart"></canvas>
</div>

<!-- Top Nominees Table -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
    <div class="p-6 border-b">
        <h2 class="text-xl font-bold text-gray-900">Top 10 Nominees</h2>
    </div>
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">#</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nominee</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Category</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Votes</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
            @forelse($topNominees as $index => $nominee)
            <tr>
                <td class="px-6 py-4 text-gray-500">{{ $index + 1 }}</td>
                <td class="px-6 py-4">
                    <div class="flex items-center">
                        @if($nominee->photo)
                            <img src="{{ asset($nominee->photo) }}" alt="" class="w-10 h-10 rounded-full object-cover mr-3">
                        @endif
                        <span class="font-medium text-gray-900">{{ $nominee->name }}</span>
                    </div>
                </td>
                <td class="px-6 py-4 text-gray-600">{{ $nominee->category->name ?? 'N/A' }}</td>
                <td class="px-6 py-4">
                    <span class="text-xl font-bold text-primary">{{ $nominee->votes_count ?? 0 }}</span>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="px-6 py-12 text-center text-gray-500">No data available</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Votes by Category Chart
    const votesByCategoryCtx = document.getElementById('votesByCategoryChart').getContext('2d');
    new Chart(votesByCategoryCtx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($votesByCategory->pluck('name')) !!},
            datasets: [{
                label: 'Votes',
                data: {!! json_encode($votesByCategory->pluck('votes_count')) !!},
                backgroundColor: [
                    '#6366F1', '#8B5CF6', '#F59E0B', '#10B981', '#EF4444', '#3B82F6'
                ],
                borderRadius: 8,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true } }
        }
    });

    // Revenue by Category Chart
    const revenueByCategoryCtx = document.getElementById('revenueByCategoryChart').getContext('2d');
    new Chart(revenueByCategoryCtx, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($revenueByCategory->pluck('name')) !!},
            datasets: [{
                data: {!! json_encode($revenueByCategory->map(fn($c) => $c->votes_sum_amount ?? 0)) !!},
                backgroundColor: [
                    '#6366F1', '#8B5CF6', '#F59E0B', '#10B981', '#EF4444', '#3B82F6'
                ],
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { position: 'bottom' } }
        }
    });

    // Votes Over Time Chart
    const votesOverTimeCtx = document.getElementById('votesOverTimeChart').getContext('2d');
    new Chart(votesOverTimeCtx, {
        type: 'line',
        data: {
            labels: {!! json_encode($votesOverTime->pluck('date')) !!},
            datasets: [{
                label: 'Votes',
                data: {!! json_encode($votesOverTime->pluck('count')) !!},
                borderColor: '#6366F1',
                backgroundColor: 'rgba(99, 102, 241, 0.1)',
                fill: true,
                tension: 0.4,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true } }
        }
    });
});
</script>
@endpush