@extends('layouts.app')

@section('content')

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

        <!-- Top Bar -->
        <div class="flex items-center justify-between mb-8">

            <!-- Back -->
            <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">
                {{ $contest->title }}
            </h1>

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


        </div>

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

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

            <h2 class="text-xl font-semibold mb-6 text-white">
                Participate Now
            </h2>

            {{-- DATE VALIDATIONS FIRST --}}

            @if($contestNotStarted)

                <div class="bg-yellow-900/30 border border-yellow-700 text-yellow-400 p-4 rounded-xl">
                    Contest has not started yet.
                </div>

            @elseif($contestEnded)

                <div class="bg-red-900/30 border border-red-700 text-red-400 p-4 rounded-xl">
                    Contest has ended.
                </div>

            @elseif($participationNotStarted)

                <div class="bg-blue-900/30 border border-blue-700 text-blue-400 p-4 rounded-xl">
                    Participation has not started yet.
                </div>

            @elseif($participationEnded)

                <div class="bg-red-900/30 border border-red-700 text-red-400 p-4 rounded-xl">
                    Participation is closed.
                </div>

            @elseif($maxReached)

                <div class="bg-red-900/30 border border-red-700 text-red-400 p-4 rounded-xl">
                    Contest is full. No more entries allowed.
                </div>

            @else

                {{-- Multi submission info --}}
                @if($contest->is_allow_multiple_submission)
                    <div class="mb-5 bg-blue-900/30 border border-blue-700 text-blue-400 p-4 rounded-xl">
                        You can submit multiple entries in this contest.
                        @if($contest->max_entries_per_contact)
                            Maximum entries per user: {{ $contest->max_entries_per_contact }}
                        @else
                            Unlimited entries allowed
                        @endif
                    </div>
                @endif

                <!-- FORM -->
                <form method="POST" action="{{ url('/contest/' . $contest->slug . '/submit') }}" novalidate>
                    @csrf

                    {{-- Name --}}
                    <div class="mb-5">
                        <label class="block text-sm text-gray-400 mb-1">
                            Full Name {{ $contest->requires_name ? '*' : '(optional)' }}
                        </label>

                        <input type="text" name="full_name" value="{{ old('full_name') }}"
                            class="w-full bg-black border {{ $errors->has('full_name') ? 'border-red-500' : 'border-gray-800' }} text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-red-600 focus:border-red-600 outline-none transition"
                            placeholder="Enter your name" {{ $contest->requires_name ? 'required' : '' }}>

                        @error('full_name')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Email --}}
                    <div class="mb-5">
                        <label class="block text-sm text-gray-400 mb-1">
                            Email Address {{ $contest->requires_email ? '*' : '(optional)' }}
                        </label>

                        <input type="email" name="email" value="{{ old('email') }}"
                            class="w-full bg-black border {{ $errors->has('email') ? 'border-red-500' : 'border-gray-800' }} text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-red-600 focus:border-red-600 outline-none transition"
                            placeholder="Enter your email" {{ $contest->requires_email ? 'required' : '' }}>

                        @error('email')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Phone --}}
                    <div class="mb-6">
                        <label class="block text-sm text-gray-400 mb-1">
                            Phone Number {{ $contest->requires_phone ? '*' : '(optional)' }}
                        </label>

                        <input type="text" name="phone" value="{{ old('phone') }}"
                            class="w-full bg-black border {{ $errors->has('phone') ? 'border-red-500' : 'border-gray-800' }} text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-red-600 focus:border-red-600 outline-none transition"
                            placeholder="Enter your phone number" {{ $contest->requires_phone ? 'required' : '' }}>

                        @error('phone')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </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">
                        Participate Now
                    </button>

                </form>

            @endif

        </div>

    </div>

@endsection