@extends('layouts.admin')

@section('title', 'Campaign Reports')
@section('page-title', 'Campaign Analytics')

@section('content')

<!-- ================= KPI CARDS ================= -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">

    <div class="bg-white p-5 rounded-xl shadow">
        <p class="text-sm text-gray-500">Total Campaigns</p>
        <p class="text-2xl font-bold">{{ $campaigns->count() }}</p>
    </div>

    <div class="bg-white p-5 rounded-xl shadow">
        <p class="text-sm text-gray-500">Total QR Scans</p>
        <p class="text-2xl font-bold">
            {{ $campaigns->sum('qr_scans_count') }}
        </p>
    </div>

    <div class="bg-white p-5 rounded-xl shadow">
        <p class="text-sm text-gray-500">Total Plays</p>
        <p class="text-2xl font-bold">
            {{ $campaigns->sum('total_plays') }}
        </p>
    </div>

    <div class="bg-white p-5 rounded-xl shadow">
        <p class="text-sm text-gray-500">Total Wins</p>
        <p class="text-2xl font-bold text-green-600">
            {{ $campaigns->sum('total_wins') }}
        </p>
    </div>

</div>

<!-- ================= CHARTS ================= -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">

    <!-- Plays vs Wins -->
    <div class="bg-white rounded-xl shadow p-6">
        <h3 class="font-semibold mb-4">Plays vs Wins</h3>
        <canvas id="playsWinsChart"></canvas>
    </div>

    <!-- QR Scan Conversion -->
    <div class="bg-white rounded-xl shadow p-6">
        <h3 class="font-semibold mb-4">QR Scan → Play Conversion</h3>
        <canvas id="conversionChart"></canvas>
    </div>

</div>

<!-- ================= CAMPAIGN TABLE ================= -->
<div class="bg-white rounded-xl shadow overflow-hidden">

    <table class="min-w-full text-sm">
        <thead class="bg-gray-50 border-b">
            <tr class="text-left text-gray-600">
                <th class="px-4 py-3">Campaign</th>
                <th class="px-4 py-3 text-center">QR Scans</th>
                <th class="px-4 py-3 text-center">Players</th>
                <th class="px-4 py-3 text-center">Plays</th>
                <th class="px-4 py-3 text-center">Wins</th>
                <th class="px-4 py-3 text-right">Action</th>
            </tr>
        </thead>

        <tbody class="divide-y">
        @foreach($campaigns as $campaign)
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-3 font-medium">
                    {{ $campaign->name }}
                </td>
                <td class="px-4 py-3 text-center">
                    {{ $campaign->qr_scans_count }}
                </td>
                <td class="px-4 py-3 text-center">
                    {{ $campaign->players_count }}
                </td>
                <td class="px-4 py-3 text-center">
                    {{ $campaign->total_plays }}
                </td>
                <td class="px-4 py-3 text-center text-green-700 font-semibold">
                    {{ $campaign->total_wins }}
                </td>
                <td class="px-4 py-3 text-right">
                    <a href="{{ route('admin.reports.campaign.detail', $campaign->id) }}"
                       class="text-blue-600 hover:underline text-xs">
                        View Detail
                    </a>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>

</div>

<!-- ================= CHART JS ================= -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const campaignNames = @json($campaigns->pluck('name'));
    const plays = @json($campaigns->pluck('total_plays'));
    const wins = @json($campaigns->pluck('total_wins'));
    const scans = @json($campaigns->pluck('qr_scans_count'));

    // Plays vs Wins
    new Chart(document.getElementById('playsWinsChart'), {
        type: 'bar',
        data: {
            labels: campaignNames,
            datasets: [
                { label: 'Plays', data: plays },
                { label: 'Wins', data: wins }
            ]
        }
    });

    // Conversion
    new Chart(document.getElementById('conversionChart'), {
        type: 'line',
        data: {
            labels: campaignNames,
            datasets: [
                { label: 'QR Scans', data: scans },
                { label: 'Plays', data: plays }
            ]
        }
    });
</script>

@endsection