@extends("ushuaia.web.plantilla")
@section("contenido")
<div class="contenido-perfilComercio py-4">
    <div class="container my-4">
        <form method="POST" enctype="multipart/form-data">
            <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
            <div class="row">
                <div class="col-12">
                    <h3 class="mb-4">Cambiar clave</h3>
                </div>
                <div class="col-12">
                    <div id="msg"></div>
                                    </div>
                <div class="form-group col-12">
                    <div class="row">
                        <div class="col-12">
                            <label for="txtClaveActual">Clave actual</label>
                            <input type="password" id="txtClaveActual" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="form-group col-12">
                    <label for="txtClaveNueva">Clave nueva</label>
                    <p class="mb-0">Utiliza 8 caracteres como mínimo. No utilices una contraseña de otro sitio ni un término que sea demasiado obvio, como el nombre de tu mascota.</p>
                    <input type="password" id="txtClaveNueva" class="form-control" minlength="8">
                </div>
                <div class="form-group col-12">
                    <label for="txtClaveNuevaRepetida">Repetir clave nueva</label>
                    <input type="password" id="txtClaveNuevaRepetida" name="txtClaveNuevaRepetida" class="form-control" minlength="8">
                </div>
                <div class="col-12 text-center">
                    <button type="button" class="btn py-1 px-5 mt-5 text-uppercase" onclick="guardar();">Cambiar clave</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    $("#txtClaveActual").change(function() {
        validarClave();
    });

    $("#txtClaveNuevaRepetida").change(function() {
        validarClavesNuevas();
    });

    let matchingPassword = false;

    const validarClave = () => {
        let claveActual = $("#txtClaveActual").val();
        if (claveActual != "") {
            $.ajax({
                type: "GET",
                url: '/comercio/validarClave',
                data: {
                    claveActual: claveActual
                },
                async: true,
                dataType: 'json',
                success: function(data) {
                    if (data.match == "true") {
                        $("#msg").hide();
                        matchingPassword = true;
                    } else {
                        matchingPassword = false;
                        $("#msg").show();
                        msgShow("La clave introducida no coincide con la del usuario", "danger");
                    }
                }
            });
        }
    }

    const validarClavesNuevas = () => {
        let claveNueva = $("#txtClaveNueva").val();
        let claveNuevaRepetida = $("#txtClaveNuevaRepetida").val();
        if (claveNuevaRepetida != "")
            if (claveNueva != claveNuevaRepetida)
                msgShow("Las claves no coinciden", "danger");
    }

    $("#form1").validate();

    function guardar() {
        let claveNueva = $("#txtClaveNueva").val();
        let claveNuevaRepetida = $("#txtClaveNuevaRepetida").val();
        if (matchingPassword) {
            if (claveNueva != "" && claveNuevaRepetida != "") {
                if (claveNueva == claveNuevaRepetida) {
                    if ($("#form1").valid()) {
                        form1.submit();
                    } else {
                        $("#modalGuardar").modal('toggle');
                        msgShow("Corrija los errores e intente nuevamente.", "danger");
                        return false;
                    }
                } else {
                    $("#msg").show();
                    $("#modalGuardar").modal('toggle');
                    msgShow("Las claves no coincden", "danger");
                }
            } else {
                $("#msg").show();
                $("#modalGuardar").modal('toggle');
                msgShow("Las claves no deben estar vacías", "danger");
            }
        } else {
            $("#msg").show();
            $("#modalGuardar").modal('toggle');
            msgShow("La clave introducida no coincide con la del usuario", "danger");
        }
    }
</script>

@endsection