@extends('layouts.admin')
@section('title', $event->title)
@section('page-title', $event->title)
@section('page-subtitle', 'Event details and RSVPs')

@section('content')
<div class="space-y-6">
    @if(session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
        {{ session('success') }}
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <div class="card-royal p-6">
                <div class="flex justify-between items-start mb-6">
                    <div>
                        <span class="px-3 py-1 text-sm font-semibold rounded 
                            @if($event->status === 'published') bg-green-100 text-green-700
                            @elseif($event->status === 'completed') bg-blue-100 text-blue-700
                            @elseif($event->status === 'cancelled') bg-red-100 text-red-700
                            @else bg-gray-100 text-gray-700 @endif">
                            {{ ucfirst($event->status) }}
                        </span>
                        <span class="ml-2 px-3 py-1 text-sm font-semibold rounded bg-gray-100 text-gray-700 capitalize">
                            {{ str_replace('_', ' ', $event->event_type) }}
                        </span>
                    </div>
                    <div class="flex gap-2">
                        @if($event->status === 'draft')
                            <form action="{{ route('admin.events.update', $event->id) }}" method="POST">
                                @csrf @method('PUT')
                                <input type="hidden" name="title" value="{{ $event->title }}">
                                <input type="hidden" name="description" value="{{ $event->description }}">
                                <input type="hidden" name="location" value="{{ $event->location }}">
                                <input type="hidden" name="start_date" value="{{ $event->start_date }}">
                                <input type="hidden" name="end_date" value="{{ $event->end_date }}">
                                <input type="hidden" name="event_type" value="{{ $event->event_type }}">
                                <input type="hidden" name="max_participants" value="{{ $event->max_participants }}">
                                <input type="hidden" name="enable_rsvp" value="1">
                                <input type="hidden" name="send_reminders" value="1">
                                <input type="hidden" name="status" value="published">
                                <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">
                                    <i class="fas fa-bullhorn mr-1"></i> Publish
                                </button>
                            </form>
                        @endif
                        <a href="{{ route('admin.events.edit', $event->id) }}" class="px-4 py-2 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)]">
                            <i class="fas fa-edit mr-1"></i> Edit
                        </a>
                    </div>
                </div>
                
                <h2 class="font-cinzel text-2xl font-bold text-[var(--text-primary)] mb-4">{{ $event->title }}</h2>
                
                @if($event->description)
                    <p class="text-[var(--text-secondary)] mb-6">{{ $event->description }}</p>
                @endif
                
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                    <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
                        <p class="text-sm text-[var(--text-secondary)]">Start</p>
                        <p class="font-bold text-[var(--text-primary)]">{{ $event->start_date->format('M j, Y') }}</p>
                        <p class="text-sm text-[var(--text-secondary)]">{{ $event->start_date->format('g:i A') }}</p>
                    </div>
                    <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
                        <p class="text-sm text-[var(--text-secondary)]">End</p>
                        <p class="font-bold text-[var(--text-primary)]">{{ $event->end_date->format('M j, Y') }}</p>
                        <p class="text-sm text-[var(--text-secondary)]">{{ $event->end_date->format('g:i A') }}</p>
                    </div>
                    <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
                        <p class="text-sm text-[var(--text-secondary)]">Location</p>
                        <p class="font-bold text-[var(--text-primary)]">{{ $event->location ?? 'N/A' }}</p>
                    </div>
                    <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
                        <p class="text-sm text-[var(--text-secondary)]">Capacity</p>
                        <p class="font-bold text-[var(--text-primary)]">{{ $event->max_participants ?? 'Unlimited' }}</p>
                    </div>
                </div>
                
                <div class="border-t border-[var(--border-color)] pt-4">
                    <h4 class="font-semibold text-[var(--text-primary)] mb-3">Settings</h4>
                    <div class="flex flex-wrap gap-4 text-sm">
                        <span class="px-3 py-1 rounded {{ $event->enable_rsvp ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                            <i class="fas fa-check mr-1"></i> RSVP {{ $event->enable_rsvp ? 'Enabled' : 'Disabled' }}
                        </span>
                        <span class="px-3 py-1 rounded {{ $event->send_reminders ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                            <i class="fas fa-bell mr-1"></i> Reminders {{ $event->send_reminders ? 'Enabled' : 'Disabled' }}
                        </span>
                        <span class="px-3 py-1 rounded {{ $event->is_public ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700' }}">
                            <i class="fas fa-globe mr-1"></i> {{ $event->is_public ? 'Public' : 'Private' }}
                        </span>
                    </div>
                </div>
            </div>
            
            <div class="card-royal p-6 mt-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">
                        <i class="fas fa-users mr-2 text-gold-500"></i> RSVPs ({{ $event->rsvps->count() }})
                    </h3>
                    <div class="flex gap-2">
                        <a href="{{ route('admin.events.rsvps', $event->id) }}" class="text-sm text-gold-500 hover:text-gold-600">
                            View All <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                        <a href="{{ route('admin.events.rsvp.create', $event->id) }}" class="btn-royal px-4 py-2 rounded-lg text-white text-sm">
                            <i class="fas fa-plus mr-1"></i> Add RSVP
                        </a>
                    </div>
                </div>
                
                <div class="space-y-3">
                    @forelse($event->rsvps->take(5) as $rsvp)
                        <div class="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded-lg">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-gold-500 to-royal-600 flex items-center justify-center text-white font-bold">
                                    {{ substr($rsvp->guest_name, 0, 1) }}
                                </div>
                                <div>
                                    <p class="font-medium text-[var(--text-primary)]">{{ $rsvp->guest_name }}</p>
                                    <p class="text-xs text-[var(--text-secondary)]">{{ $rsvp->guest_email ?? '' }}</p>
                                </div>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="text-sm text-[var(--text-secondary)]">{{ $rsvp->guests_count }} guest{{ $rsvp->guests_count > 1 ? 's' : '' }}</span>
                                <span class="px-2 py-1 text-xs font-semibold rounded 
                                    @if($rsvp->status === 'confirmed') bg-green-100 text-green-700
                                    @elseif($rsvp->status === 'declined') bg-red-100 text-red-700
                                    @else bg-gray-100 text-gray-700 @endif">
                                    {{ ucfirst($rsvp->status) }}
                                </span>
                            </div>
                        </div>
                    @empty
                        <p class="text-center text-[var(--text-secondary)] py-4">No RSVPs yet.</p>
                    @endforelse
                </div>
            </div>
        </div>
        
        <div class="space-y-6">
            <div class="card-royal p-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Quick Stats</h3>
                <div class="space-y-4">
                    <div class="flex justify-between items-center">
                        <span class="text-[var(--text-secondary)]">Total RSVPs</span>
                        <span class="font-bold text-[var(--text-primary)]">{{ $event->confirmed_rsvps_count }}</span>
                    </div>
                    @if($event->max_participants)
                    <div class="flex justify-between items-center">
                        <span class="text-[var(--text-secondary)]">Available Spots</span>
                        <span class="font-bold {{ $event->is_full ? 'text-red-500' : 'text-green-500' }}">{{ $event->available_spots }}</span>
                    </div>
                    @endif
                    <div class="flex justify-between items-center">
                        <span class="text-[var(--text-secondary)]">Pending</span>
                        <span class="font-bold text-yellow-500">{{ $event->pending_rsvps_count }}</span>
                    </div>
                </div>
                
                @if($event->enable_rsvp && $event->rsvps->count() > 0)
                <div class="mt-6 pt-4 border-t border-[var(--border-color)]">
                    <form action="{{ route('admin.events.send-reminder', $event->id) }}" method="POST">
                        @csrf
                        <button type="submit" class="w-full btn-royal px-4 py-3 rounded-lg text-white">
                            <i class="fas fa-bell mr-2"></i> Send Reminders
                        </button>
                    </form>
                </div>
                @endif
            </div>
            
            <div class="card-royal p-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Actions</h3>
                <div class="space-y-3">
                    <a href="{{ route('admin.events.rsvps', $event->id) }}" class="w-full px-4 py-3 border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] text-center block hover:bg-[var(--bg-secondary)]">
                        <i class="fas fa-list mr-2"></i> Manage RSVPs
                    </a>
                    <form action="{{ route('admin.events.destroy', $event->id) }}" method="POST" onsubmit="return confirm('Delete this event?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="w-full px-4 py-3 border border-red-500 text-red-500 rounded-lg hover:bg-red-50">
                            <i class="fas fa-trash mr-2"></i> Delete Event
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection