{% 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> Nuevo Producto </h1>

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

                <label for="nombre">Nombre</label><br>
                <input class="form-control" placeholder="Ingrese el nombre del zapato" type="text" name="nombre" id="nombre"><br>

                <label for="marca">Marca</label><br>
                <input class="form-control" placeholder="Ingrese la marca" type="text" name="marca" id="marca"><br>

                <label for="talla">Talla</label><br>
                <input class="form-control" placeholder="Ingrese la talla" type="text" name="talla" id="talla"><br>

                <label for="color">Color</label><br>
                <input class="form-control" placeholder="Ingrese el color" type="text" name="color" id="color"><br>

                <label for="precio">Precio</label><br>
                <input class="form-control" placeholder="Ingrese el precio" type="text" name="precio" id="precio"><br>

                <label for="categoria">Categoria</label><br>
                <input class="form-control" placeholder="Ingrese la categoría" type="text" name="categoria" id="categoria"><br>

                <label for="estilo">Estilo</label><br>
                <input class="form-control" placeholder="Ej: Deportivo, Casual, Formal" type="text" name="estilo" id="estilo"><br>

                <label for="cantidad">Cantidad</label><br>
                <input class="form-control" placeholder="Ingrese la cantidad" type="number" name="cantidad" id="cantidad"><br>

                <label for="fecha_ingreso">Fecha de ingreso</label><br>
                <input class="form-control" placeholder="YYYY-MM-DD" type="date" name="fecha_ingreso" id="fecha_ingreso"><br>

                <label for="foto">Foto</label><br>
                <input class="form-control" type="file" name="foto" id="foto"><br><br>

                <label for="galeria_fotos" class="text-primary fw-bold">Galería de Ángulos (Opcional)</label><br>
                <input class="form-control" type="file" name="galeria_fotos" id="galeria_fotos" multiple><br>
                <small class="text-muted">Puedes seleccionar varias fotos (Suela, lado, atrás) manteniendo presionada la tecla Ctrl.</small>
                <br><br>

                <button class="btn btn-success" type="submit">Guardar</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_nuevo_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 },
            foto: { required: true }
        },
        messages: { 
            nombre: { 
                required: "El nombre es obligatorio",
                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" },
            foto: { required: "Debes subir una foto principal" }
        },
        // 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",
    uploadMultiple: true,   
    maxFileCount: 10,        
    overwriteInitial: false  
});

</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const fechaInput = document.getElementById("fecha_ingreso");
        const hoy = new Date();

        // Formato YYYY-MM-DD
        const yyyy = hoy.getFullYear();
        const mm = String(hoy.getMonth() + 1).padStart(2, '0');
        const dd = String(hoy.getDate()).padStart(2, '0');
        const fechaHoy = `${yyyy}-${mm}-${dd}`;

        fechaInput.value = fechaHoy;
        fechaInput.min = fechaHoy;
        fechaInput.max = fechaHoy;
    });
</script>

{% endblock %}