@extends('layouts.admin')
@section('title', 'Add RSVP')
@section('page-title', 'Add RSVP')
@section('page-subtitle', $event->title)

@section('content')
<div class="card-royal p-6">
    <div class="mb-6 p-4 bg-[var(--bg-secondary)] rounded-lg">
        <h3 class="font-semibold text-[var(--text-primary)]">{{ $event->title }}</h3>
        <p class="text-sm text-[var(--text-secondary)]">
            {{ $event->start_date->format('M j, Y g:i A') }} - {{ $event->end_date->format('g:i A') }}
            @if($event->location) | {{ $event->location }} @endif
        </p>
    </div>
    
    <form action="{{ route('admin.events.rsvp.store', $event->id) }}" method="POST" class="space-y-6">
        @csrf
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Link to Member</label>
                <select name="member_id" id="member_select" class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="">-- Select Member --</option>
                    @foreach($members as $member)
                        <option value="{{ $member->id }}" {{ old('member_id') == $member->id ? 'selected' : '' }}>
                            {{ $member->full_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Guest Name *</label>
                <input type="text" name="guest_name" id="guest_name" value="{{ old('guest_name') }}" required
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                    placeholder="Enter guest name">
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Email</label>
                <input type="email" name="guest_email" value="{{ old('guest_email') }}"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                    placeholder="guest@email.com">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Phone</label>
                <input type="text" name="guest_phone" value="{{ old('guest_phone') }}"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                    placeholder="Phone number">
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Number of Guests</label>
                <input type="number" name="guests_count" value="{{ old('guests_count', 1) }}" min="1"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Status</label>
                <select name="status" class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="confirmed" {{ old('status', 'confirmed') == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                    <option value="pending" {{ old('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="declined" {{ old('status') == 'declined' ? 'selected' : '' }}>Declined</option>
                </select>
            </div>
        </div>
        
        <div>
            <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Dietary Requirements</label>
            <input type="text" name="dietary_requirements" value="{{ old('dietary_requirements') }}"
                class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                placeholder="e.g., Vegetarian, Gluten-free, etc.">
        </div>
        
        <div>
            <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Notes</label>
            <textarea name="notes" rows="3"
                class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                placeholder="Additional notes...">{{ old('notes') }}</textarea>
        </div>
        
        <div class="flex justify-end gap-4">
            <a href="{{ route('admin.events.show', $event->id) }}" class="px-6 py-3 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                Cancel
            </a>
            <button type="submit" class="btn-royal px-8 py-3 rounded-lg text-white font-semibold">
                <i class="fas fa-save mr-2"></i> Add RSVP
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    document.getElementById('member_select').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (this.value && selectedOption.text !== '-- Select Member --') {
            document.getElementById('guest_name').value = selectedOption.text;
        }
    });
</script>
@endpush