{% extends './manager.html' %}
{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
    
        <div class="col-12 col-md-8 col-lg-6 bg-light p-4 shadow-lg">
            <h1>Editar Producto </h1>

            <form action="/manager/procesarEdicionProducto" id="frm_editar_producto" enctype="multipart/form-data" method="post">
                {% csrf_token %}

                <input type="hidden" name="id" value="{{ productoEditar.id }}">

                <label for="nombre">Nombre</label><br>
                <input class="form-control" type="text" name="nombre" id="nombre" value="{{ productoEditar.nombre }}"><br>

                <label for="marca">Marca</label><br>
                <input class="form-control" type="text" name="marca" id="marca" value="{{ productoEditar.marca }}"><br>

                <label for="talla">Talla</label><br>
                <input class="form-control" type="text" name="talla" id="talla" value="{{ productoEditar.talla }}"><br>

                <label for="color">Color</label><br>
                <input class="form-control" type="text" name="color" id="color" value="{{ productoEditar.color }}"><br>

                <label for="precio">Precio</label><br>
                <input class="form-control" type="text" name="precio" id="precio" value="{{ productoEditar.precio }}"><br>

                <label for="categoria"> Categoria</label><br>
                <input class="form-control" type="text" name="categoria" id="categoria" value="{{ productoEditar.categoria }}"><br>

                <label for="estilo">Estilo</label><br>
                <input class="form-control" type="text" name="estilo" id="estilo" value="{{ productoEditar.estilo }}"><br>

                <label for="cantidad">Cantidad</label><br>
                <input class="form-control" type="number" name="cantidad" id="cantidad" value="{{ productoEditar.cantidad }}"><br>

                <label for="fecha_ingreso">Fecha de ingreso</label><br>
                <input class="form-control" type="date" name="fecha_ingreso" id="fecha_ingreso" value="{{ productoEditar.fecha_ingreso }}"><br>

                <label for="foto">Foto</label><br>
                {% if productoEditar.foto %}
                    <img src="{{ productoEditar.foto.url }}" alt="foto" width="100" height="100"><br>
                {% endif %}
                <input class="form-control" type="file" name="foto" id="foto"><br><br>

                <label for="galeria_fotos" class="text-primary fw-bold">
                    <i class="bi bi-plus-circle"></i> Añadir nuevos ángulos a la galería
                </label>
                <input class="form-control" type="file" name="galeria_fotos" id="galeria_fotos" multiple>
                <small class="text-muted">Las fotos que selecciones se sumarán a la galería actual.</small>
                <br><br>

                <button class="btn btn-success" type="submit">Actualizar</button>
                <a class="btn btn-outline-danger" href="/manager/productos">Cancelar</a>

        
            </form>
        </div>
    </div>
</div>

<script>
    // Método personalizado para validar que solo sean letras y espacios
    $.validator.addMethod("soloLetras", function(value, element) {
        return this.optional(element) || /^[a-zA-ZáéíóúÁÉÍÓÚñÑ\s]+$/i.test(value);
    }, "Solo se permiten letras");

    $("#frm_editar_producto").validate({
        rules: {  
            nombre: { 
                required: true,
                minlength: 3,
                soloLetras: true // Validación de letras
            },
            marca: {
             
                soloLetras: true
            },
            talla: { 
                required: true,
                number: true, // Debe ser número
                min: 1        // Solo positivos (mayor a 0)
            },
            color: { 
                required: true,
                soloLetras: true 
            },
            precio: { 
                required: true,
                number: true,
                min: 0.01     // Solo positivos
            },
            categoria: { required: true },
            estilo: { 
                required: true,
                soloLetras: true
            },
            cantidad: { 
                required: true,
                number: true,  // Solo números enteros
                min: 1        // Mínimo 1 unidad
            },
            fecha_ingreso: { required: true },
          
        },
        messages: { 
            nombre: { 
                required: "El nombre es obligatorio",
                minlength: "El nombre debe tener al menos 3 caracteres",
                soloLetras: "El nombre no debe contener números"
            },
            marca: {
                
                soloLetras: "La marca solo puede contener letras"
            },
            talla: { 
                required: "La talla es obligatoria",
                number: "Ingrese una talla válida solo números",
                min: "La talla debe ser mayor a 0"
            },
            color: { 
                required: "El color es obligatorio",
                soloLetras: "El color no puede tener números"
            },
            precio: { 
                required: "El precio es obligatorio",
                number: "Formato de precio incorrecto",
                min: "El precio debe ser mayor a 0"
            },
            categoria: { required: "La categoría es obligatoria" },
            estilo: { 
                required: "El estilo es obligatorio",
                soloLetras: "El estilo solo puede contener letras"
            },
            cantidad: { 
                required: "La cantidad es obligatoria",
                number: "Solo se permiten números",
                min: "La cantidad debe ser al menos 1"
            },
            fecha_ingreso: { required: "La fecha de ingreso es obligatoria" },
            
        },
        // Opcional: Para que los errores se vean rojos y bonitos con Bootstrap
        errorElement: 'span',
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-control').after(error);
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        }
    });
</script>

<script>
    $("#foto").fileinput({
      language: "es",
      allowedFileExtensions: ["png", "jpg", "jpeg"],
      showCaption: false,
      dropZoneEnabled: true,
      showClose: false
    });
    $("#galeria_fotos").fileinput({
        language: "es",
        allowedFileExtensions: ["png", "jpg", "jpeg"],
        showCaption: true,
        dropZoneEnabled: true,
        showUpload: false,
        browseClass: "btn btn-primary",
        mainClass: "d-grid",
        msgPlaceholder: "Selecciona más ángulos..."
    });
</script>
{% endblock %}