@extends('layouts.app')

@section('title', 'Delegate Registration - ' . $programme->title)

@section('content')
<div class="max-w-md mx-auto my-8 p-6 bg-white rounded-2xl border border-slate-200 shadow-lg space-y-6">

    <!-- Header / Event Info -->
    <div class="text-center space-y-2 border-b border-slate-100 pb-4">
        <span class="bg-purple-100 text-purple-800 text-[10px] font-bold uppercase px-3 py-1 rounded-full">
            International Delegate Entry
        </span>
        <h2 class="text-xl font-black text-brand-navy">{{ $programme->title }}</h2>
        @if($programme->theme)
        <p class="text-xs text-slate-500 italic">"{{ $programme->theme }}"</p>
        @endif
        <p class="text-[11px] font-mono text-brand-gold font-bold">
            {{ $programme->start_date->format('M d') }} — {{ $programme->end_date->format('M d, Y') }}
        </p>
    </div>

    <!-- Registration Form -->
    <form action="{{ route('programmes.register.store', $programme->id) }}" method="POST" class="space-y-4">
        @csrf

        <div>
            <label class="block text-xs font-bold uppercase text-slate-600 mb-1">Full Name</label>
            <input type="text" name="full_name" required placeholder="e.g. Dr. John Doe"
                   class="w-full border border-slate-300 rounded-xl p-3 text-xs font-semibold focus:ring-2 focus:ring-brand-navy focus:outline-none">
        </div>

        <div>
            <label class="block text-xs font-bold uppercase text-slate-600 mb-1">Email Address</label>
            <input type="email" name="email" required placeholder="john@example.com"
                   class="w-full border border-slate-300 rounded-xl p-3 text-xs font-semibold focus:ring-2 focus:ring-brand-navy focus:outline-none">
        </div>

        <div>
            <label class="block text-xs font-bold uppercase text-slate-600 mb-1">Phone / WhatsApp Number</label>
            <input type="tel" name="phone" required placeholder="+1 234 567 8900"
                   class="w-full border border-slate-300 rounded-xl p-3 text-xs font-semibold focus:ring-2 focus:ring-brand-navy focus:outline-none">
        </div>

        <div>
            <label class="block text-xs font-bold uppercase text-slate-600 mb-1">Country of Residence</label>
            <input type="text" name="country" required placeholder="e.g. United Kingdom"
                   class="w-full border border-slate-300 rounded-xl p-3 text-xs font-semibold focus:ring-2 focus:ring-brand-navy focus:outline-none">
        </div>

        <button type="submit" class="w-full bg-brand-navy hover:bg-slate-800 text-white font-black py-3.5 rounded-xl text-xs uppercase tracking-wider transition shadow-md">
            Complete Registration
        </button>
    </form>

</div>
@endsection