@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 hover:bg-gray-700 text-gray-300 transition">
                    ← Back
                </button>
            </div>

            <!-- Contest Card -->
            <div class="bg-[#111827] border border-gray-800 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 prose prose-invert">
                    {!! $entry->contest->description !!}
                </div>
            </div>

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

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

                <p class="text-center text-gray-500 mb-8">
                    Select sport and make your prediction
                </p>

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

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

                    <div class="mb-6">
                        <label class="block text-sm text-gray-400 mb-2">Search Match</label>
<!-- 
                        <input type="text" id="matchSearch" placeholder="Type team name..."
                            class="w-full bg-black border border-gray-800 text-white rounded-lg px-4 py-3 mb-3"> -->

                        <select id="matchSelect" name="contest_match_id"
                            class="w-full bg-black border border-gray-800 text-white rounded-lg px-4 py-3">

                            <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>

                    <div class="mb-6">
                        <label class="block text-sm text-gray-400 mb-2">Sport Type</label>

                        <select id="sportType" name="sport_type"
                            class="w-full bg-black border border-gray-800 text-white rounded-lg px-4 py-3">

                            <option value="">Select Sport</option>
                            <option value="basketball">Basketball</option>
                            <option value="football">Football</option>

                        </select>
                    </div>

                    <div class="mb-10">
                        <label class="block text-sm text-gray-400 mb-2">Prediction</label>

                        <select name="prediction" id="predictionSelect" required
                            class="w-full bg-black border border-gray-800 text-white rounded-lg px-4 py-3">

                            <option value="">Select Prediction</option>

                        </select>
                    </div>

                    <!-- Submit -->
                    <button type="submit"
                        class="w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-3 rounded-lg transition">
                        Submit Prediction
                    </button>

                </form>

            </div>

        </div>

    </div>

@endsection

@section('scripts')

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            /* 🔍 Match Search */
            const searchInput = document.getElementById('matchSearch');
            const matchSelect = document.getElementById('matchSelect');

            if (searchInput && matchSelect) {
                searchInput.addEventListener('keyup', function () {
                    let filter = this.value.toLowerCase();
                    let options = matchSelect.options;

                    for (let i = 0; i < options.length; i++) {
                        let txt = options[i].text.toLowerCase();
                        options[i].style.display = txt.includes(filter) ? '' : 'none';
                    }
                });
            }

            const sportType = document.getElementById('sportType');
            const prediction = document.getElementById('predictionSelect');

            if (sportType && prediction) {

                sportType.addEventListener('change', function () {

                    let value = this.value;

                    // reset
                    prediction.innerHTML = '<option value="">Select Prediction</option>';

                    if (value === 'basketball') {

                        prediction.innerHTML += `<option value="1">Home Win (1)</option>`;
                        prediction.innerHTML += `<option value="2">Away Win (2)</option>`;

                    } else if (value === 'football') {

                        prediction.innerHTML += `<option value="1">Home Win (1)</option>`;
                        prediction.innerHTML += `<option value="X">Draw (X)</option>`;
                        prediction.innerHTML += `<option value="2">Away Win (2)</option>`;
                    }

                });
            }

        });
    </script>

@endsection