@extends('admin.layouts.app')

@section('title', 'Edit Event')
@section('page-title', 'Edit Event')
@section('page-subtitle', 'Update event details')

@section('content')
<div class="p-4 lg:p-6">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-2xl border border-slate-100 shadow-sm">
      <div class="p-6 border-b border-slate-100">
        <h3 class="text-xl font-bold text-slate-800">Event Details</h3>
      </div>

      <form method="POST" action="{{ route('admin.events.update', $event) }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <div class="p-6 space-y-4">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Event Title *</label>
            <input type="text" name="title" value="{{ old('title', $event->title) }}" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('title') border-red-500 @enderror">
            @error('title')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Description *</label>
            <textarea name="description" rows="4" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('description') border-red-500 @enderror">{{ old('description', $event->description) }}</textarea>
            @error('description')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Event Type *</label>
              <select name="event_type" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('event_type') border-red-500 @enderror">
                <option value="conference" {{ old('event_type', $event->event_type) == 'conference' ? 'selected' : '' }}>Conference</option>
                <option value="workshop" {{ old('event_type', $event->event_type) == 'workshop' ? 'selected' : '' }}>Workshop</option>
                <option value="webinar" {{ old('event_type', $event->event_type) == 'webinar' ? 'selected' : '' }}>Webinar</option>
                <option value="fundraiser" {{ old('event_type', $event->event_type) == 'fundraiser' ? 'selected' : '' }}>Fundraiser</option>
                <option value="seminar" {{ old('event_type', $event->event_type) == 'seminar' ? 'selected' : '' }}>Seminar</option>
                <option value="other" {{ old('event_type', $event->event_type) == 'other' ? 'selected' : '' }}>Other</option>
              </select>
              @error('event_type')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>

            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Format *</label>
              <select name="format" required onchange="toggleEventFormat(this.value)" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('format') border-red-500 @enderror">
                <option value="in_person" {{ old('format', $event->format) == 'in_person' ? 'selected' : '' }}>In Person</option>
                <option value="online" {{ old('format', $event->format) == 'online' ? 'selected' : '' }}>Online</option>
                <option value="hybrid" {{ old('format', $event->format) == 'hybrid' ? 'selected' : '' }}>Hybrid</option>
              </select>
              @error('format')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <div id="locationField" style="display: {{ in_array(old('format', $event->format), ['in_person', 'hybrid']) ? 'block' : 'none' }}">
            <label class="block text-sm font-medium text-slate-700 mb-2">Location</label>
            <input type="text" name="location" value="{{ old('location', $event->location) }}" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('location') border-red-500 @enderror">
            @error('location')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <div id="meetingLinkField" style="display: {{ in_array(old('format', $event->format), ['online', 'hybrid']) ? 'block' : 'none' }}">
            <label class="block text-sm font-medium text-slate-700 mb-2">Meeting Link</label>
            <input type="url" name="meeting_link" value="{{ old('meeting_link', $event->meeting_link) }}" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('meeting_link') border-red-500 @enderror">
            @error('meeting_link')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Start Date & Time *</label>
              <input type="datetime-local" name="start_datetime" value="{{ old('start_datetime', $event->start_datetime?->format('Y-m-d\TH:i')) }}" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('start_datetime') border-red-500 @enderror">
              @error('start_datetime')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>

            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">End Date & Time *</label>
              <input type="datetime-local" name="end_datetime" value="{{ old('end_datetime', $event->end_datetime?->format('Y-m-d\TH:i')) }}" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('end_datetime') border-red-500 @enderror">
              @error('end_datetime')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Capacity</label>
            <input type="number" name="capacity" value="{{ old('capacity', $event->capacity) }}" min="1" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('capacity') border-red-500 @enderror">
            @error('capacity')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          @if($event->cover_image)
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Current Cover Image</label>
              <img src="{{ asset('storage/' . $event->cover_image) }}" alt="Current cover" class="w-48 h-32 object-cover rounded-lg border border-slate-200">
            </div>
          @endif

          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">{{ $event->cover_image ? 'Change' : 'Upload' }} Cover Image</label>
            <input type="file" name="cover_image" accept="image/*" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('cover_image') border-red-500 @enderror">
            @error('cover_image')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <div class="border-t border-slate-200 pt-4">
            <h4 class="font-semibold text-slate-800 mb-3">Event Stats</h4>
            <div class="grid grid-cols-3 gap-4">
              <div class="bg-slate-50 rounded-lg p-3">
                <p class="text-xs text-slate-500">Registered</p>
                <p class="text-lg font-bold text-slate-800">{{ $event->registered_count }}</p>
              </div>
              <div class="bg-slate-50 rounded-lg p-3">
                <p class="text-xs text-slate-500">Capacity</p>
                <p class="text-lg font-bold text-slate-800">{{ $event->capacity ?? 'Unlimited' }}</p>
              </div>
              <div class="bg-slate-50 rounded-lg p-3">
                <p class="text-xs text-slate-500">Status</p>
                <p class="text-lg font-bold text-slate-800">{{ ucfirst($event->status) }}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="p-6 border-t border-slate-100 flex justify-end gap-3">
          <a href="{{ route('admin.events.show', $event) }}" class="px-6 py-3 text-slate-600 font-medium rounded-xl hover:bg-slate-100">Cancel</a>
          <button type="submit" class="px-6 py-3 bg-primary-500 text-white font-medium rounded-xl hover:bg-primary-600 shadow-lg shadow-primary-500/30">Update Event</button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
function toggleEventFormat(format) {
  const locationField = document.getElementById('locationField');
  const meetingLinkField = document.getElementById('meetingLinkField');
  
  locationField.style.display = (format === 'in_person' || format === 'hybrid') ? 'block' : 'none';
  meetingLinkField.style.display = (format === 'online' || format === 'hybrid') ? 'block' : 'none';
}
</script>
@endpush
@endsection