@extends('layouts.app')

@section('content')

<div class="min-h-screen bg-black py-10 px-4">

    <div class="max-w-3xl mx-auto">

        <!-- Top Bar -->
        <div class="flex items-center justify-between mb-8">
            <button onclick="window.history.back()"
            class="inline-flex items-center gap-2 bg-gray-800 border border-gray-700 px-4 py-2 rounded-lg shadow-sm hover:bg-gray-700 text-gray-300 transition">
                ← Back
            </button>
            <div></div>
        </div>

        <!-- Contest Card -->
        <div class="bg-[#111827] border border-gray-800 shadow-lg rounded-2xl p-7 mb-8">

            <h1 class="text-3xl font-bold text-white mb-4">
                {{ $entry->contest->title }}
            </h1>

            <div class="text-gray-400 leading-relaxed prose max-w-none prose-invert">
                {!! $entry->contest->description !!}
            </div>

        </div>

        <!-- Prediction Card -->
        <div class="bg-[#111827] border border-gray-800 shadow-lg rounded-2xl p-8">

            <h2 class="text-2xl font-bold text-white mb-2 text-center">
                Match Prediction
            </h2>

            <p class="text-center text-gray-500 mb-8">
                Predict the final score and test your football instincts!
            </p>

            <!-- Errors -->
            @if ($errors->any())
                <div class="mb-5 bg-red-900/30 border border-red-700 text-red-400 p-4 rounded-xl">
                    <ul class="space-y-1 text-sm">
                        @foreach ($errors->all() as $error)
                            <li>• {{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('prediction.submit', $entry->id) }}">
                @csrf

                <!-- Match Selection -->
                <div class="mb-6">
                    <label class="block text-sm text-gray-400 mb-2">
                        Select Match
                    </label>

                    <select name="contest_match_id"
                        class="w-full bg-black border border-gray-800 text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-600 focus:border-red-600 outline-none transition">

                        <option value="">-- Select Match --</option>

                        @foreach ($matches as $match)
                            <option value="{{ $match->id }}">
                                {{ $match->homeTeam->team_name }} VS {{ $match->awayTeam->team_name }}
                            </option>
                        @endforeach

                    </select>
                </div>

                <!-- Score Section -->
                <div class="flex items-center justify-center gap-8 mb-10">

                    <!-- Home -->
                    <div class="text-center">
                        <p class="text-sm text-gray-400 mb-2">Home</p>
                        <input type="number" name="home_score" min="0"
                            class="w-24 h-16 text-xl bg-black border border-gray-800 text-white rounded-xl text-center focus:ring-2 focus:ring-red-600 focus:border-red-600 outline-none">
                    </div>

                    <!-- VS -->
                    <div class="text-xl font-bold text-gray-600 mt-6">
                        VS
                    </div>

                    <!-- Away -->
                    <div class="text-center">
                        <p class="text-sm text-gray-400 mb-2">Away</p>
                        <input type="number" name="away_score" min="0"
                            class="w-24 h-16 text-xl bg-black border border-gray-800 text-white rounded-xl text-center focus:ring-2 focus:ring-red-600 focus:border-red-600 outline-none">
                    </div>

                </div>

                <!-- Submit -->
                <button type="submit"
                    class="w-full bg-red-600 hover:bg-red-700 active:scale-[0.98] text-white font-semibold py-3 rounded-lg transition duration-200 shadow-md hover:shadow-red-900/40">
                     Submit Prediction
                </button>

            </form>

        </div>

    </div>

</div>

@endsection