@extends('admin.layout')

@section('content')
<div class="page-header">
    <div>
        <h1 class="text-3xl font-bold text-gray-800 page-title">Create Activity</h1>
        <p class="text-gray-600 mt-1">Add a new community activity or event</p>
    </div>
    <a href="{{ route('activities.index') }}" style="background-color: #6b7280;" class="inline-flex items-center text-white px-4 py-2 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
        <svg class="w-5 h-5 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
        </svg>
        Back to Activities
    </a>
</div>

<div class="bg-white rounded-xl shadow-lg overflow-hidden">
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);" class="px-6 py-4">
        <h2 class="text-xl font-bold text-white flex items-center">
            <svg class="w-6 h-6 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
                <path d="M2 6a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 100 4v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2a2 2 0 100-4V6z"></path>
            </svg>
            Activity Details
        </h2>
    </div>

    <form action="{{ route('activities.store') }}" method="POST" enctype="multipart/form-data" class="p-6">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Activity Name *</label>
                <input type="text" name="name" id="name" value="{{ old('name') }}" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="Enter activity name" required>
                @error('name')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="category_id" class="block text-sm font-medium text-gray-700 mb-2">Category *</label>
                <select name="category_id" id="category_id" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" required>
                    <option value="">Select a category</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-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="mb-6">
            <label for="location" class="block text-sm font-medium text-gray-700 mb-2">Location</label>
            <input type="text" name="location" id="location" value="{{ old('location') }}" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="Enter location or address">
            @error('location')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label for="date" class="block text-sm font-medium text-gray-700 mb-2">Date</label>
                <input type="text" name="date" id="date" value="{{ old('date') }}" placeholder="YYYY-MM-DD" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" autocomplete="off">
                @error('date')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="time" class="block text-sm font-medium text-gray-700 mb-2">Time</label>
                <input type="text" name="time" id="time" value="{{ old('time') }}" placeholder="e.g. 1PM - 4PM" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                @error('time')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="mb-6">
            <label for="featured_image" class="block text-sm font-medium text-gray-700 mb-2">Featured Image</label>
            <div class="p-6 bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg text-center">
                <svg class="w-12 h-12 mx-auto mb-3" style="width: 48px; height: 48px; fill: #9ca3af; margin: 0 auto 0.75rem auto;" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path>
                </svg>
                <input type="file" name="featured_image" id="featured_image" class="block w-full text-sm text-gray-900 cursor-pointer focus:outline-none">
                <p class="text-sm text-gray-500 mt-2">PNG, JPG, WEBP up to 10MB</p>
            </div>
            @error('featured_image')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-6">
            <label for="external_link" class="block text-sm font-medium text-gray-700 mb-2">External Link</label>
            <input type="url" name="external_link" id="external_link" value="{{ old('external_link') }}" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="https://example.com/event">
            @error('external_link')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
            <p class="text-sm text-gray-500 mt-2">Link to event registration or more information</p>
        </div>

        <div class="form-actions">
            <button type="submit" style="background-color: #2563eb;" class="inline-flex items-center px-6 py-3 rounded-lg text-white font-semibold shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
                <svg class="w-5 h-5 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path>
                </svg>
                Create Activity
            </button>
            <a href="{{ route('activities.index') }}" style="background-color: #e5e7eb;" class="inline-flex items-center text-gray-700 px-6 py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200">
                Cancel
            </a>
        </div>
    </form>
</div>
@endsection