@extends('layouts.admin')

@section('header', 'Create Event')

@section('content')
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 md:p-8 max-w-4xl">
    <form action="{{ route('admin.events.store') }}" method="POST" class="space-y-6" enctype="multipart/form-data">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="col-span-2 md:col-span-1">
                <label for="name" class="block text-sm font-medium text-gray-700">Event Name *</label>
                <input type="text" name="name" id="name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('name') }}" required>
                @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="col-span-2 md:col-span-1">
                <label for="category_id" class="block text-sm font-medium text-gray-700">Category</label>
                <select name="category_id" id="category_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm">
                    <option value="">Select a category (optional)</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endforeach
                </select>
                @error('category_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="col-span-2 md:col-span-1">
                <label for="date_time" class="block text-sm font-medium text-gray-700">Date & Time *</label>
                <input type="datetime-local" name="date_time" id="date_time" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('date_time') }}" required>
                @error('date_time') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="col-span-2 md:col-span-1">
                <label for="location" class="block text-sm font-medium text-gray-700">Location (Venue or Online)</label>
                <input type="text" name="location" id="location" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('location') }}">
                @error('location') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="col-span-2 md:col-span-1">
                <label for="pricing" class="block text-sm font-medium text-gray-700">Pricing (e.g. "Free", "$50", "Invite Only")</label>
                <input type="text" name="pricing" id="pricing" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('pricing') }}">
                @error('pricing') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="col-span-2">
                <label for="registration_link" class="block text-sm font-medium text-gray-700">Registration Link (External URL)</label>
                <input type="url" name="registration_link" id="registration_link" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('registration_link') }}" placeholder="https://eventbrite.com/...">
                @error('registration_link') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="col-span-2">
                <label for="poster_image" class="block text-sm font-medium text-gray-700">Poster / Thumbnail Image</label>
                <input type="file" name="poster_image" id="poster_image" accept="image/*" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-theme-50 file:text-theme-700 hover:file:bg-theme-100">
                @error('poster_image') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="col-span-2">
                <label for="purpose" class="block text-sm font-medium text-gray-700">Purpose / Description</label>
                <textarea name="purpose" id="purpose" rows="4" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm">{{ old('purpose') }}</textarea>
                @error('purpose') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="col-span-2">
                <label for="guests" class="block text-sm font-medium text-gray-700">Guests / Speakers</label>
                <textarea name="guests" id="guests" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" placeholder="List of speakers or special guests...">{{ old('guests') }}</textarea>
                @error('guests') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="flex items-center pt-4 border-t border-gray-200">
            <input type="checkbox" name="is_published" id="is_published" value="1" class="h-4 w-4 text-theme-600 focus:ring-theme-900 border-gray-300 rounded" {{ old('is_published', true) ? 'checked' : '' }}>
            <label for="is_published" class="ml-2 block text-sm text-gray-900">Publish Event</label>
        </div>

        <div class="flex justify-end pt-6">
            <a href="{{ route('admin.events.index') }}" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-theme-900 mr-3">Cancel</a>
            <button type="submit" class="bg-theme-900 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-theme-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-theme-900">Create Event</button>
        </div>
    </form>
</div>
@endsection