{% extends "admin/base_admin.html" %}

{% block title %}Create Event - Admin Panel{% endblock %}

{% block page_title %}Create New Event{% endblock %}

{% block content %}
<!-- Create New Event Form -->
<div class="p-8">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="bg-gradient-to-r from-orange-500 to-red-600 rounded-2xl p-8 mb-8 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <div class="flex items-center mb-2">
                        <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-calendar-plus text-2xl"></i>
                        </div>
                        <h2 class="text-3xl font-bold">Create New Event</h2>
                    </div>
                    <p class="text-orange-100 text-lg">Set up a special savings event for your group</p>
                </div>
                <a href="{{ url_for('admin_events') }}" class="bg-white/20 hover:bg-white/30 px-6 py-3 rounded-xl text-white font-medium transition-all duration-200">
                    ← Back to Events
                </a>
            </div>
        </div>
        
        <!-- Form Container -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden">
            <div class="p-8">
                
                <form method="POST" class="space-y-8">
                    <!-- Event Name -->
                    <div class="space-y-3">
                        <label for="name" class="block text-sm font-semibold text-gray-900">
                            <i class="fas fa-star text-purple-500 mr-2"></i>Event Name
                        </label>
                        <input type="text" name="name" id="name" required
                               class="block w-full px-4 py-4 text-sm border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-gray-50 focus:bg-white transition-all duration-200"
                               placeholder="Enter event name">
                    </div>
                    
                    <!-- Description -->
                    <div class="space-y-3">
                        <label for="description" class="block text-sm font-semibold text-gray-900">
                            <i class="fas fa-align-left text-indigo-500 mr-2"></i>Description
                        </label>
                        <textarea name="description" id="description" rows="4"
                                  class="block w-full px-4 py-4 text-sm border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-50 focus:bg-white transition-all duration-200"
                                  placeholder="Describe the purpose and goals of this savings event"></textarea>
                    </div>
                    
                    <!-- Target Amount -->
                    <div class="space-y-3">
                        <label for="target_amount" class="block text-sm font-semibold text-gray-900">
                            <i class="fas fa-bullseye text-green-500 mr-2"></i>Target Amount (৳)
                        </label>
                        <input type="number" name="target_amount" id="target_amount" step="0.01" min="0"
                               class="block w-full px-4 py-4 text-sm border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-gray-50 focus:bg-white transition-all duration-200"
                               placeholder="Optional target amount">
                    </div>
                    
                    <!-- Dates -->
                    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                        <div class="space-y-3">
                            <label for="start_date" class="block text-sm font-semibold text-gray-900">
                                <i class="fas fa-play-circle text-blue-500 mr-2"></i>Start Date
                            </label>
                            <input type="date" name="start_date" id="start_date" required
                                   class="block w-full px-4 py-4 text-sm border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 focus:bg-white transition-all duration-200">
                        </div>
                        
                        <div class="space-y-3">
                            <label for="end_date" class="block text-sm font-semibold text-gray-900">
                                <i class="fas fa-stop-circle text-red-500 mr-2"></i>End Date
                            </label>
                            <input type="date" name="end_date" id="end_date" required
                                   class="block w-full px-4 py-4 text-sm border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-red-500 focus:border-red-500 bg-gray-50 focus:bg-white transition-all duration-200">
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="border-t border-gray-200 pt-6">
                        <div class="flex justify-end space-x-4">
                            <a href="{{ url_for('admin_events') }}" 
                               class="inline-flex items-center px-6 py-3 border border-gray-300 text-sm font-medium rounded-xl text-gray-700 bg-white hover:bg-gray-50 shadow-sm transition-all duration-200">
                                <i class="fas fa-times mr-2"></i>Cancel
                            </a>
                            <button type="submit"
                                    class="inline-flex items-center px-8 py-3 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 shadow-lg shadow-orange-500/25 transition-all duration-200">
                                <i class="fas fa-plus mr-2"></i>Create Event
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Set default start date to today
document.addEventListener('DOMContentLoaded', function() {
    const startDateField = document.getElementById('start_date');
    const endDateField = document.getElementById('end_date');
    const today = new Date().toISOString().split('T')[0];
    
    if (!startDateField.value) {
        startDateField.value = today;
    }
    
    // Auto-set end date to 30 days from start date
    startDateField.addEventListener('change', function() {
        if (this.value && !endDateField.value) {
            const startDate = new Date(this.value);
            const endDate = new Date(startDate);
            endDate.setDate(startDate.getDate() + 30);
            endDateField.value = endDate.toISOString().split('T')[0];
        }
    });
});
</script>
{% endblock %}