{% extends "base.html" %}

{% block title %}Crear Evento - {{ empresa.Nombre }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 py-8">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-4xl font-bold text-gray-900 mb-2">
                Crear Nuevo Evento
            </h1>
            <p class="text-gray-600">Completa los datos para crear un evento</p>
        </div>

        <!-- Formulario -->
        <div class="bg-white rounded-xl shadow-lg p-8">
            <form method="POST" action="{{ url_for('empresa.crear_evento') }}">
                
                <!-- Título -->
                <div class="mb-6">
                    <label for="titulo" class="block text-sm font-semibold text-gray-700 mb-2">
                        Título del Evento *
                    </label>
                    <input type="text" 
                           id="titulo" 
                           name="titulo" 
                           required
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all"
                           placeholder="Ej: Exposición de Artesanías">
                </div>

                <!-- Descripción -->
                <div class="mb-6">
                    <label for="descripcion" class="block text-sm font-semibold text-gray-700 mb-2">
                        Descripción
                    </label>
                    <textarea id="descripcion" 
                              name="descripcion" 
                              rows="4"
                              class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all resize-none"
                              placeholder="Describe tu evento..."></textarea>
                </div>

                <!-- Fechas -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="fecha_inicio" class="block text-sm font-semibold text-gray-700 mb-2">
                            Fecha de Inicio *
                        </label>
                        <input type="datetime-local" 
                               id="fecha_inicio" 
                               name="fecha_inicio" 
                               required
                               class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all">
                    </div>
                    <div>
                        <label for="fecha_fin" class="block text-sm font-semibold text-gray-700 mb-2">
                            Fecha de Fin *
                        </label>
                        <input type="datetime-local" 
                               id="fecha_fin" 
                               name="fecha_fin" 
                               required
                               class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all">
                    </div>
                </div>

                <!-- Ubicación -->
                <div class="mb-6">
                    <label for="ubicacion" class="block text-sm font-semibold text-gray-700 mb-2">
                        Ubicación
                    </label>
                    <input type="text" 
                           id="ubicacion" 
                           name="ubicacion" 
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all"
                           placeholder="Ej: Plaza Principal, Calle 123">
                </div>

                <!-- Capacidad y Precio -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div>
                        <label for="capacidad" class="block text-sm font-semibold text-gray-700 mb-2">
                            Capacidad Máxima
                        </label>
                        <input type="number" 
                               id="capacidad" 
                               name="capacidad" 
                               value="50"
                               min="1"
                               class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all">
                    </div>
                    <div>
                        <label for="precio" class="block text-sm font-semibold text-gray-700 mb-2">
                            Precio de Entrada (Bs.)
                        </label>
                        <input type="number" 
                               id="precio" 
                               name="precio" 
                               value="0"
                               min="0"
                               step="0.01"
                               class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all">
                        <p class="text-xs text-gray-500 mt-1">Dejar en 0 para eventos gratuitos</p>
                    </div>
                </div>

                <!-- Botones -->
                <div class="flex gap-4">
                    <button type="submit" 
                            class="flex-1 inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg hover:from-blue-700 hover:to-indigo-700 transition-all shadow-lg hover:shadow-xl font-semibold">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        Crear Evento
                    </button>
                    <a href="{{ url_for('empresa.mis_eventos') }}" 
                       class="flex-1 inline-flex items-center justify-center px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-all font-semibold">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                        Cancelar
                    </a>
                </div>
            </form>
        </div>

    </div>
</div>
{% endblock %}