{% extends "base.html" %}

{% block title %}Crear Producto - {{ empresa.Nombre }} - TallArt{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-3xl mx-auto">
        
        <!-- Header -->
        <div class="mb-8">
            <a href="{{ url_for('empresa.productos') }}" 
               class="inline-flex items-center text-green-600 hover:text-green-700 mb-4 transition-colors duration-300">
                <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                </svg>
                Volver a Mis Productos
            </a>
            
            <h1 class="text-4xl font-bold bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent mb-2">
                Crear Nuevo Producto
            </h1>
            <p class="text-gray-600">Agrega un producto al catálogo de {{ empresa.Nombre }}</p>
        </div>

        <!-- Formulario -->
        <form method="POST" enctype="multipart/form-data" class="bg-white rounded-2xl shadow-xl p-8">
            
            <!-- Nombre -->
            <div class="mb-6">
                <label class="block text-gray-700 font-bold mb-2" for="nombre">
                    Nombre del Producto <span class="text-red-500">*</span>
                </label>
                <input type="text" 
                       id="nombre" 
                       name="nombre" 
                       required
                       class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:outline-none transition-colors duration-300"
                       placeholder="Ej: Artesanía en Cerámica">
            </div>

            <!-- Descripción -->
            <div class="mb-6">
                <label class="block text-gray-700 font-bold mb-2" for="descripcion">
                    Descripción
                </label>
                <textarea id="descripcion" 
                          name="descripcion" 
                          rows="4"
                          class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:outline-none transition-colors duration-300"
                          placeholder="Describe tu producto..."></textarea>
                <p class="text-sm text-gray-500 mt-1">Incluye detalles sobre materiales, tamaño, colores disponibles, etc.</p>
            </div>

            <!-- Precio y Stock -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label class="block text-gray-700 font-bold mb-2" for="precio">
                        Precio (S/) <span class="text-red-500">*</span>
                    </label>
                    <input type="number" 
                           id="precio" 
                           name="precio" 
                           step="0.01" 
                           min="0"
                           required
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:outline-none transition-colors duration-300"
                           placeholder="0.00">
                </div>

                <div>
                    <label class="block text-gray-700 font-bold mb-2" for="stock">
                        Stock Disponible
                    </label>
                    <input type="number" 
                           id="stock" 
                           name="stock" 
                           min="0"
                           value="0"
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:outline-none transition-colors duration-300"
                           placeholder="0">
                </div>
            </div>

            <!-- Categoría -->
            <div class="mb-6">
                <label class="block text-gray-700 font-bold mb-2" for="categoria_id">
                    Categoría
                </label>
                <select id="categoria_id" 
                        name="categoria_id"
                        class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:outline-none transition-colors duration-300">
                    <option value="">Seleccionar categoría...</option>
                    {% for categoria in categorias %}
                    <option value="{{ categoria.CategoriaID }}">{{ categoria.Nombre }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Imagen -->
            <div class="mb-8">
                <label class="block text-gray-700 font-bold mb-2" for="imagen">
                    Imagen del Producto <span class="text-red-500">*</span>
                </label>
                <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-green-500 transition-colors duration-300">
                    <input type="file" 
                           id="imagen" 
                           name="imagen"
                           accept="image/png,image/jpeg,image/jpg,image/gif,image/webp"
                           required
                           class="hidden"
                           onchange="previewImage(event)">
                    <label for="imagen" class="cursor-pointer">
                        <div id="preview-container" class="mb-4">
                            <svg class="w-16 h-16 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                            <img id="image-preview" class="hidden max-h-64 mx-auto rounded-lg shadow-lg" alt="Vista previa">
                        </div>
                        <p class="text-gray-600 font-medium mb-2">Haz clic para seleccionar una imagen</p>
                        <p class="text-sm text-gray-500">PNG, JPG, JPEG, GIF o WEBP (máx. 5MB)</p>
                    </label>
                </div>
            </div>

            <script>
            function previewImage(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const preview = document.getElementById('image-preview');
                        const icon = document.querySelector('#preview-container svg');
                        preview.src = e.target.result;
                        preview.classList.remove('hidden');
                        icon.classList.add('hidden');
                    }
                    reader.readAsDataURL(file);
                }
            }
            </script>

            <!-- Botones -->
            <div class="flex gap-4">
                <button type="submit"
                        class="flex-1 px-6 py-4 bg-gradient-to-r from-green-500 to-emerald-600 text-white font-bold rounded-xl hover:from-green-600 hover:to-emerald-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 flex items-center justify-center gap-2">
                    <svg class="w-5 h-5" 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 Producto
                </button>
                
                <a href="{{ url_for('empresa.productos') }}"
                   class="px-6 py-4 bg-gray-200 text-gray-700 font-bold rounded-xl hover:bg-gray-300 transition-all duration-300 flex items-center justify-center">
                    Cancelar
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}