@extends('layouts.frontend')
@section('title', 'RSVP - ' . $event->title)

@push('styles')
<style>
    .gold-gradient {
        background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
    }
</style>
@endpush

@section('content')

<!-- Hero Section -->
<section class="relative py-16 bg-gradient-to-br from-royal-800 via-royal-900 to-gray-900 overflow-hidden">
    <div class="absolute inset-0">
        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1504052434569-70ad5836ab65?w=1920')] bg-cover bg-center opacity-20"></div>
        <div class="absolute inset-0 bg-gradient-to-r from-royal-900/95 to-royal-800/80"></div>
    </div>
    
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center">
            <a href="{{ route('frontend.events') }}" class="inline-flex items-center gap-2 text-gold-400 hover:text-gold-300 mb-6">
                <i class="fas fa-arrow-left"></i>
                Back to Events
            </a>
            <h1 class="font-cinzel text-4xl md:text-5xl font-bold text-white mb-4">RSVP for {{ $event->title }}</h1>
            <p class="text-xl text-gray-300">Confirm your attendance</p>
        </div>
    </div>
</section>

<!-- RSVP Form -->
<section class="py-16 bg-gray-50">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
        
        @if(session('success'))
        <div class="mb-6 p-4 bg-green-100 border border-green-200 text-green-700 rounded-lg">
            <i class="fas fa-check-circle mr-2"></i>
            {{ session('success') }}
        </div>
        @endif
        
        @if(session('error'))
        <div class="mb-6 p-4 bg-red-100 border border-red-200 text-red-700 rounded-lg">
            <i class="fas fa-exclamation-circle mr-2"></i>
            {{ session('error') }}
        </div>
        @endif
        
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
            <!-- Event Info -->
            <div class="bg-gradient-to-r from-royal-700 to-royal-800 p-6 text-white">
                <div class="flex items-center gap-4">
                    <div class="text-center">
                        <div class="text-4xl font-cinzel font-bold">{{ \Carbon\Carbon::parse($event->start_date)->format('d') }}</div>
                        <div class="text-gold-400 text-sm">{{ \Carbon\Carbon::parse($event->start_date)->format('M Y') }}</div>
                    </div>
                    <div class="flex-1">
                        <h2 class="font-cinzel text-2xl font-bold">{{ $event->title }}</h2>
                        <div class="flex flex-wrap gap-4 mt-2 text-sm text-gray-300">
                            <span class="flex items-center gap-1">
                                <i class="fas fa-clock text-gold-400"></i>
                                {{ \Carbon\Carbon::parse($event->start_date)->format('h:i A') }}
                            </span>
                            @if($event->location)
                            <span class="flex items-center gap-1">
                                <i class="fas fa-map-marker-alt text-gold-400"></i>
                                {{ $event->location }}
                            </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Form -->
            <div class="p-8">
                <form action="{{ route('frontend.events.rsvp.submit', $event) }}" method="POST" class="space-y-6">
                    @csrf
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Your Name *</label>
                        <input type="text" name="guest_name" value="{{ old('guest_name', auth()->user()?->name) }}" required
                            class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent"
                            placeholder="Enter your full name">
                        @error('guest_name')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                            <input type="email" name="guest_email" value="{{ old('guest_email', auth()->user()?->email) }}"
                                class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent"
                                placeholder="your.email@example.com">
                            @error('guest_email')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
                            <input type="tel" name="guest_phone" value="{{ old('guest_phone') }}"
                                class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent"
                                placeholder="+233 XX XXX XXXX">
                            @error('guest_phone')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Number of Guests</label>
                        <select name="guests_count" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent">
                            <option value="0" {{ old('guests_count', 0) == 0 ? 'selected' : '' }}>Just me</option>
                            <option value="1" {{ old('guests_count') == 1 ? 'selected' : '' }}>+1 guest</option>
                            <option value="2" {{ old('guests_count') == 2 ? 'selected' : '' }}>+2 guests</option>
                            <option value="3" {{ old('guests_count') == 3 ? 'selected' : '' }}>+3 guests</option>
                            <option value="4" {{ old('guests_count') == 4 ? 'selected' : '' }}>+4 guests</option>
                            <option value="5" {{ old('guests_count') >= 5 ? 'selected' : '' }}>+5 or more</option>
                        </select>
                        @error('guests_count')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Dietary Requirements</label>
                        <textarea name="dietary_requirements" rows="3"
                            class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent"
                            placeholder="Please let us know if you have any dietary requirements or special needs...">{{ old('dietary_requirements') }}</textarea>
                        @error('dietary_requirements')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="flex items-center justify-between pt-4">
                        <a href="{{ route('frontend.events') }}" class="text-gray-500 hover:text-gray-700">
                            Cancel
                        </a>
                        <button type="submit" class="px-8 py-3 rounded-full gold-gradient text-white font-semibold hover:opacity-90 transition-opacity">
                            <i class="fas fa-check mr-2"></i>
                            Confirm Attendance
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <p class="text-center text-gray-500 text-sm mt-6">
            <i class="fas fa-info-circle mr-1"></i>
            You will receive a confirmation. RSVP deadline: {{ $event->rsvp_deadline ? \Carbon\Carbon::parse($event->rsvp_deadline)->format('M d, Y h:i A') : 'No deadline' }}
        </p>
    </div>
</section>

@endsection