@extends('layouts.app')

@section('title', 'Check Registration Status')

@section('content')
<!-- Page Header -->
<section class="bg-gradient-to-r from-primary-600 to-primary-700 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl md:text-4xl font-bold text-white">Check Registration Status</h1>
        <p class="text-primary-100 mt-2">Track your registration and payment status</p>
    </div>
</section>

<section class="py-12">
    <div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-xl shadow-sm p-6 lg:p-8">
            @if(session('error'))
            <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
                {{ session('error') }}
            </div>
            @endif

            <form action="{{ route('registration.check.status') }}" method="POST" class="space-y-4">
                @csrf
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Registration Code *</label>
                    <input type="text" name="registration_code" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="REG-XXXXXXXX">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
                    <input type="email" name="email" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="your@email.com">
                </div>

                <button type="submit" class="w-full py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 transition">
                    Check Status
                </button>
            </form>
        </div>
    </div>
</section>
@endsection
