@extends('layouts.admin')

@section('title', 'Campaign Report')
@section('page-title', 'Campaign Report')

@section('content')

<!-- ================= CAMPAIGN HEADER ================= -->
<div class="mb-6">
    <h2 class="text-xl font-semibold text-gray-800">{{ $campaign->name }}</h2>
    <p class="text-sm text-gray-500">
        Code: {{ $campaign->code }} |
        Game: {{ ucfirst($campaign->game_type) }} |
        {{ \Carbon\Carbon::parse($campaign->start_date)->format('d M Y') }}
        →
        {{ \Carbon\Carbon::parse($campaign->end_date)->format('d M Y') }}
    </p>
</div>

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

    <div class="bg-white rounded-xl shadow p-5">
        <p class="text-sm text-gray-500">QR Scans</p>
        <p class="text-2xl font-bold">{{ $stats['scans'] }}</p>
    </div>

    <div class="bg-white rounded-xl shadow p-5">
        <p class="text-sm text-gray-500">Players</p>
        <p class="text-2xl font-bold">{{ $stats['players'] }}</p>
    </div>

    <div class="bg-white rounded-xl shadow p-5">
        <p class="text-sm text-gray-500">Game Plays</p>
        <p class="text-2xl font-bold">{{ $stats['plays'] }}</p>
    </div>

    <div class="bg-white rounded-xl shadow p-5">
        <p class="text-sm text-gray-500">Wins</p>
        <p class="text-2xl font-bold text-green-600">{{ $stats['wins'] }}</p>
    </div>

</div>

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

    <div class="px-6 py-4 border-b">
        <h3 class="font-semibold">Game Attempts</h3>
    </div>

    <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">Player</th>
                <th class="px-4 py-3">Mobile</th>
                <th class="px-4 py-3">Result</th>
                <th class="px-4 py-3">Prize</th>
                <th class="px-4 py-3">Played At</th>
            </tr>
        </thead>

        <tbody class="divide-y">
        @forelse($attempts as $attempt)
            <tr class="hover:bg-gray-50">

                <td class="px-4 py-3 font-medium">
                    {{ $attempt->player->name }}
                </td>

                <td class="px-4 py-3">
                    {{ $attempt->player->mobile }}
                </td>

                <td class="px-4 py-3">
                    @if($attempt->result === 'win')
                        <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700">
                            Win
                        </span>
                    @else
                        <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-600">
                            Lose
                        </span>
                    @endif
                </td>

                <td class="px-4 py-3">
                    {{ $attempt->prize?->title ?? '—' }}
                </td>

                <td class="px-4 py-3 text-xs text-gray-600">
                    {{ $attempt->played_at->format('d M Y, h:i A') }}
                </td>

            </tr>
        @empty
            <tr>
                <td colspan="5" class="px-4 py-6 text-center text-gray-500">
                    No game attempts found
                </td>
            </tr>
        @endforelse
        </tbody>
    </table>

</div>

<!-- ================= PAGINATION ================= -->
<div class="mt-6">
    {{ $attempts->links() }}
</div>

@endsection