@extends('admin.layouts.app')

@section('title', 'Events')
@section('page-title', 'Events')
@section('page-subtitle', 'Event management')

@section('content')
<div class="p-4 lg:p-6">
  <!-- Filter and Actions -->
  <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
    <div class="flex flex-wrap gap-2">
      <a href="{{ route('admin.events.index') }}" class="px-3 py-2 {{ !request('status') ? 'bg-primary-500 text-white' : 'bg-white text-slate-600 border border-slate-200' }} text-xs font-medium rounded-lg">All</a>
      <a href="{{ route('admin.events.filter.status', 'upcoming') }}" class="px-3 py-2 bg-white text-slate-600 text-xs font-medium rounded-lg border border-slate-200">Upcoming</a>
      <a href="{{ route('admin.events.filter.status', 'ongoing') }}" class="px-3 py-2 bg-white text-slate-600 text-xs font-medium rounded-lg border border-slate-200">Ongoing</a>
      <a href="{{ route('admin.events.filter.status', 'completed') }}" class="px-3 py-2 bg-white text-slate-600 text-xs font-medium rounded-lg border border-slate-200">Completed</a>
    </div>
    <a href="{{ route('admin.events.create') }}" class="px-4 py-2 bg-primary-500 text-white text-xs font-medium rounded-lg shadow-lg shadow-primary-500/30">
      <i class="fas fa-plus mr-2"></i>New Event
    </a>
  </div>

  <!-- Stats Cards -->
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
    <div class="bg-white rounded-xl p-4 border border-slate-100">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
          <i class="fas fa-calendar text-blue-600"></i>
        </div>
        <div>
          <p class="text-lg font-bold text-slate-800">{{ $stats['total'] }}</p>
          <p class="text-xs text-slate-500">Total</p>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-xl p-4 border border-slate-100">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
          <i class="fas fa-clock text-primary-600"></i>
        </div>
        <div>
          <p class="text-lg font-bold text-slate-800">{{ $stats['upcoming'] }}</p>
          <p class="text-xs text-slate-500">Upcoming</p>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-xl p-4 border border-slate-100">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
          <i class="fas fa-circle text-amber-600"></i>
        </div>
        <div>
          <p class="text-lg font-bold text-slate-800">{{ $stats['ongoing'] }}</p>
          <p class="text-xs text-slate-500">Ongoing</p>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-xl p-4 border border-slate-100">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center">
          <i class="fas fa-check text-slate-600"></i>
        </div>
        <div>
          <p class="text-lg font-bold text-slate-800">{{ $stats['completed'] }}</p>
          <p class="text-xs text-slate-500">Completed</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Events Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    @forelse($events as $event)
      <div class="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden hover:shadow-md transition">
        @if($event->cover_image)
          <img src="{{ asset('storage/' . $event->cover_image) }}" class="w-full h-40 object-cover">
        @else
          <div class="w-full h-40 bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
            <i class="fas fa-calendar-alt text-4xl text-white"></i>
          </div>
        @endif
        
        <div class="p-4">
          <div class="flex items-center gap-2 mb-2">
            <span class="px-2 py-0.5 bg-violet-50 text-violet-600 text-[10px] font-medium rounded-full">
              {{ ucfirst($event->event_type) }}
            </span>
            <span class="px-2 py-0.5 bg-{{ $event->format == 'online' ? 'blue' : ($event->format == 'hybrid' ? 'purple' : 'amber') }}-50 text-{{ $event->format == 'online' ? 'blue' : ($event->format == 'hybrid' ? 'purple' : 'amber') }}-600 text-[10px] font-medium rounded-full">
              {{ ucfirst($event->format) }}
            </span>
            <span class="px-2 py-0.5 bg-{{ $event->status == 'upcoming' ? 'primary' : ($event->status == 'ongoing' ? 'amber' : 'slate') }}-50 text-{{ $event->status == 'upcoming' ? 'primary' : ($event->status == 'ongoing' ? 'amber' : 'slate') }}-600 text-[10px] font-medium rounded-full">
              {{ ucfirst($event->status) }}
            </span>
          </div>
          
          <h3 class="font-bold text-slate-800 text-sm mb-1 line-clamp-2">{{ $event->title }}</h3>
          <p class="text-xs text-slate-500 mb-3 line-clamp-2">{{ Str::limit($event->description, 80) }}</p>
          
          <div class="space-y-2 mb-3 text-xs text-slate-600">
            <div class="flex items-center gap-2">
              <i class="fas fa-calendar-day w-4 text-slate-400"></i>
              <span>{{ $event->start_datetime->format('M d, Y • g:i A') }}</span>
            </div>
            @if($event->location)
              <div class="flex items-center gap-2">
                <i class="fas fa-map-marker-alt w-4 text-slate-400"></i>
                <span class="truncate">{{ $event->location }}</span>
              </div>
            @endif
            <div class="flex items-center gap-2">
              <i class="fas fa-users w-4 text-slate-400"></i>
              <span>{{ $event->registered_count }}{{ $event->capacity ? ' / ' . $event->capacity : '' }} registered</span>
            </div>
          </div>
          
          <div class="flex items-center justify-between">
            <span class="text-xs {{ $event->is_full ? 'text-red-600 font-medium' : 'text-slate-500' }}">
              {{ $event->is_full ? 'Fully Booked' : $event->available_slots . ' spots left' }}
            </span>
            <div class="flex gap-1">
              <a href="{{ route('admin.events.show', $event) }}" class="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded">
                <i class="fas fa-eye text-xs"></i>
              </a>
              <a href="{{ route('admin.events.edit', $event) }}" class="p-1.5 text-slate-400 hover:text-primary-600 hover:bg-primary-50 rounded">
                <i class="fas fa-edit text-xs"></i>
              </a>
              <form method="POST" action="{{ route('admin.events.destroy', $event) }}" class="inline" onsubmit="return confirm('Are you sure?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded">
                  <i class="fas fa-trash text-xs"></i>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    @empty
      <div class="col-span-full bg-white rounded-xl border border-slate-100 p-8 text-center">
        <i class="fas fa-calendar-alt text-4xl text-slate-300 mb-3"></i>
        <p class="text-slate-500">No events found</p>
        <a href="{{ route('admin.events.create') }}" class="inline-block mt-3 px-4 py-2 bg-primary-500 text-white text-xs font-medium rounded-lg">
          Create Your First Event
        </a>
      </div>
    @endforelse
  </div>
  
  <!-- Pagination -->
  @if($events->hasPages())
    <div class="mt-6">
      {{ $events->links() }}
    </div>
  @endif
</div>
@endsection