@extends('layouts.app')

@section('title', 'Add Guest - WedBooker')
@section('page-title', 'Add New Guest')
@section('page-description', 'Add a guest to your wedding list')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="glass-card rounded-2xl p-8 border border-white/10" data-aos="fade-up">
        <form class="space-y-6">
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-white mb-2">First Name *</label>
                    <input type="text" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" placeholder="Enter first name">
                </div>
                <div>
                    <label class="block text-white mb-2">Last Name *</label>
                    <input type="text" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" placeholder="Enter last name">
                </div>
            </div>

            <div>
                <label class="block text-white mb-2">Email Address *</label>
                <input type="email" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" placeholder="guest@example.com">
            </div>

            <div>
                <label class="block text-white mb-2">Phone Number</label>
                <input type="tel" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" placeholder="+44 123 456 789">
            </div>

            <div>
                <label class="block text-white mb-2">RSVP Status</label>
                <select class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition">
                    <option>Pending</option>
                    <option>Confirmed</option>
                    <option>Not Attending</option>
                </select>
            </div>

            <div>
                <label class="block text-white mb-2">Plus One</label>
                <div class="flex items-center gap-3">
                    <label class="flex items-center gap-2">
                        <input type="radio" name="plus_one" value="yes" class="w-4 h-4"> 
                        <span class="text-white">Yes</span>
                    </label>
                    <label class="flex items-center gap-2">
                        <input type="radio" name="plus_one" value="no" class="w-4 h-4" checked> 
                        <span class="text-white">No</span>
                    </label>
                </div>
            </div>

            <div id="plusOneDetails" style="display: none;">
                <label class="block text-white mb-2">Plus One Name</label>
                <input type="text" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" placeholder="Enter plus one name">
            </div>

            <div>
                <label class="block text-white mb-2">Dietary Requirements</label>
                <textarea rows="2" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" placeholder="Any dietary restrictions or allergies?"></textarea>
            </div>

            <div>
                <label class="block text-white mb-2">Notes</label>
                <textarea rows="2" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" placeholder="Additional notes about this guest..."></textarea>
            </div>

            <div class="flex gap-4">
                <button type="submit" class="flex-1 px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-white font-semibold hover:shadow-2xl transition hover:scale-105">
                    <i class="fas fa-save mr-2"></i>Save Guest
                </button>
                <a href="{{ route('guests.index') }}" class="px-6 py-3 bg-white/10 rounded-lg text-gray-300 hover:bg-white/20 transition text-center">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    document.querySelectorAll('input[name="plus_one"]').forEach(radio => {
        radio.addEventListener('change', function() {
            const plusOneDiv = document.getElementById('plusOneDetails');
            if (this.value === 'yes' && this.checked) {
                plusOneDiv.style.display = 'block';
            } else {
                plusOneDiv.style.display = 'none';
            }
        });
    });
</script>
@endpush
@endsection