@extends('layouts.admin')
@section('title', 'Create Event')
@section('page-title', 'Create Event')
@section('page-subtitle', 'Schedule a new church event')

@section('content')
<div class="card-royal p-6">
    <form action="{{ route('admin.events.store') }}" method="POST" class="space-y-6">
        @csrf
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Event Title *</label>
                <input type="text" name="title" value="{{ old('title') }}" required
                    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., Sunday Worship Service">
            </div>
        </div>
        
        <div>
            <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Description</label>
            <textarea name="description" rows="4"
                class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                placeholder="Describe the event...">{{ old('description') }}</textarea>
        </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">Event Type *</label>
                <select name="event_type" required 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 Type</option>
                    <option value="service" {{ old('event_type') == 'service' ? 'selected' : '' }}>Sunday Service</option>
                    <option value="bible_study" {{ old('event_type') == 'bible_study' ? 'selected' : '' }}>Bible Study</option>
                    <option value="youth" {{ old('event_type') == 'youth' ? 'selected' : '' }}>Youth</option>
                    <option value="women" {{ old('event_type') == 'women' ? 'selected' : '' }}>Women's Ministry</option>
                    <option value="men" {{ old('event_type') == 'men' ? 'selected' : '' }}>Men's Fellowship</option>
                    <option value="children" {{ old('event_type') == 'children' ? 'selected' : '' }}>Children's Program</option>
                    <option value="outreach" {{ old('event_type') == 'outreach' ? 'selected' : '' }}>Outreach</option>
                    <option value="concert" {{ old('event_type') == 'concert' ? 'selected' : '' }}>Concert/Worship Night</option>
                    <option value="workshop" {{ old('event_type') == 'workshop' ? 'selected' : '' }}>Workshop</option>
                    <option value="conference" {{ old('event_type') == 'conference' ? 'selected' : '' }}>Conference</option>
                    <option value="fellowship" {{ old('event_type') == 'fellowship' ? 'selected' : '' }}>Fellowship</option>
                    <option value="other" {{ old('event_type') == 'other' ? 'selected' : '' }}>Other</option>
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Location</label>
                <input type="text" name="location" value="{{ old('location') }}"
                    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., Main Sanctuary">
            </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">Start Date & Time *</label>
                <input type="datetime-local" name="start_date" value="{{ old('start_date') }}" required
                    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">End Date & Time *</label>
                <input type="datetime-local" name="end_date" value="{{ old('end_date') }}" required
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Max Participants</label>
                <input type="number" name="max_participants" value="{{ old('max_participants') }}" min="1"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                    placeholder="Leave empty for unlimited">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Ticket Price ({{ church_setting('currency_symbol', 'GH₵') }})</label>
                <input type="number" name="ticket_price" value="{{ old('ticket_price', 0) }}" min="0" step="0.01"
                    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">RSVP Deadline</label>
                <input type="datetime-local" name="rsvp_deadline" value="{{ old('rsvp_deadline') }}"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
            </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">Reminder Settings</label>
                <div class="space-y-3">
                    <div class="flex items-center">
                        <input type="checkbox" name="send_reminders" value="1" id="send_reminders" {{ old('send_reminders', '1') ? 'checked' : '' }}
                            class="w-5 h-5 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                        <label for="send_reminders" class="ml-2 text-sm text-[var(--text-primary)]">Send automatic reminders</label>
                    </div>
                    <div class="flex items-center gap-2">
                        <label class="text-sm text-[var(--text-primary)]">Remind</label>
                        <input type="number" name="reminder_hours" value="{{ old('reminder_hours', 24) }}" min="1"
                            class="w-20 px-2 py-1 rounded border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                        <span class="text-sm text-[var(--text-primary)]">hours before event</span>
                    </div>
                </div>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Event Options</label>
                <div class="space-y-3">
                    <div class="flex items-center">
                        <input type="checkbox" name="enable_rsvp" value="1" id="enable_rsvp" {{ old('enable_rsvp', '1') ? 'checked' : '' }}
                            class="w-5 h-5 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                        <label for="enable_rsvp" class="ml-2 text-sm text-[var(--text-primary)]">Enable RSVP</label>
                    </div>
                    <div class="flex items-center">
                        <input type="checkbox" name="is_public" value="1" id="is_public" {{ old('is_public', '1') ? 'checked' : '' }}
                            class="w-5 h-5 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                        <label for="is_public" class="ml-2 text-sm text-[var(--text-primary)]">Public event</label>
                    </div>
                </div>
            </div>
        </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="draft" {{ old('status', 'draft') == 'draft' ? 'selected' : '' }}>Draft</option>
                <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Published</option>
            </select>
        </div>
        
        <div class="flex justify-end gap-4">
            <a href="{{ route('admin.events.index') }}" 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> Create Event
            </button>
        </div>
    </form>
</div>
@endsection