@extends('layouts.admin')

@section('title', 'Prizes')
@section('page-title', 'Prize Management')

@section('content')

<!-- ================= HEADER ================= -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
    <div>
        <h2 class="text-xl font-semibold text-gray-800">
            Prizes – {{ $campaign->name }}
        </h2>
        <p class="text-sm text-gray-500">
            Configure rewards & probability
        </p>
    </div>

    @if(auth()->user()->role === 'super_admin')
        <a href="{{ route('admin.campaigns.prizes.create', $campaign->id) }}"
           class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Add Prize
        </a>
    @endif
</div>

<!-- ================= 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">Prize</th>
                <th class="px-4 py-3">Type</th>
                <th class="px-4 py-3 text-center">Probability (%)</th>
                <th class="px-4 py-3 text-center">Stock</th>
                <th class="px-4 py-3 text-center">Status</th>
                <th class="px-4 py-3 text-right">Actions</th>
            </tr>
        </thead>

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

                <td class="px-4 py-3">
                    <p class="font-medium text-gray-800">{{ $prize->title }}</p>
                    <p class="text-xs text-gray-500">
                        {{ $prize->reward_value ?? '—' }}
                    </p>
                </td>

                <td class="px-4 py-3 capitalize">
                    {{ $prize->reward_type }}
                </td>

                <td class="px-4 py-3 text-center font-semibold">
                    {{ $prize->probability }}
                </td>

                <td class="px-4 py-3 text-center">
                    {{ $prize->stock ?? '∞' }}
                </td>

                <td class="px-4 py-3 text-center">
                    @if($prize->is_active)
                        <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700">
                            Active
                        </span>
                    @else
                        <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-700">
                            Inactive
                        </span>
                    @endif
                </td>

                <td class="px-4 py-3 text-right">
                    <div class="inline-flex gap-2 text-xs">

                        @if(auth()->user()->role === 'super_admin')
                            <a href="{{ route('admin.campaigns.prizes.edit', [$campaign->id, $prize->id]) }}"
                               class="text-blue-600 hover:underline">
                                Edit
                            </a>

                            <form action="{{ route('admin.campaigns.prizes.destroy', [$campaign->id, $prize->id]) }}"
                                  method="POST"
                                  onsubmit="return confirm('Delete this prize?')"
                                  class="inline">
                                @csrf
                                @method('DELETE')
                                <button class="text-red-600 hover:underline">
                                    Delete
                                </button>
                            </form>
                        @else
                            <span class="text-gray-400">View only</span>
                        @endif

                    </div>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="6" class="px-4 py-6 text-center text-gray-500">
                    No prizes configured
                </td>
            </tr>
        @endforelse
        </tbody>
    </table>

</div>

@endsection