@extends('masushuaia.plantilla')
@section('titulo', $titulo)
@section('scripts')
<link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/datatables.min.js') }}"></script>
<script>
    globalId = '0';
    
</script>
@endsection
@section('breadcrumb1')
<a title="Salir" href="#" class="btn-blue py-1 px-3" aria-hidden="true" onclick="javascript: $('#modalSalir').modal('toggle');"><span><i class="fas fa-arrow-left"></i></span></a>
@endsection
@section('breadcrumb')

<a title="Guardar" href="#" class="btn-blue py-1 px-4 mr-2" aria-hidden="true" onclick="javascript: $('#modalGuardar').modal('toggle');"><span>Cambiar clave</span></a>

<script>
function fsalir(){
    location.href ="/usuarios";
}
</script>
@endsection
@section('breadcrumb-list')
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/">Inicio</a></li><span class="px-2">/</span>
  <li class="breadcrumb-item active">Cambiar clave</li>
</ol>
@endsection
@section('contenido')
<div class="row">
    <div class="col-12">
        <div id = "msg"></div>
    </div>
    </div>
<form id="form1" method="POST" enctype="multipart/form-data">
    <div class="row">
        <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
        <input type="hidden" id="id" name="id" class="form-control" value="{{$globalId}}" required>
        <div class="form-group col-lg-12">
            <div class="row">
                <div class="col-6">
                    <label for="txtClaveActual">Clave actual</label>
                    <input type="password" name="txtClaveActual" id="txtClaveActual" class="form-control">
                </div>
            </div>
        </div>
        <div class="form-group col-lg-12">
            <div class="row">
                <div class="col-6">
                    <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" name="txtClaveNueva" id="txtClaveNueva" class="form-control" minlength="8">
                </div>
            </div>

        </div>
        <div class="form-group col-lg-12">
            <div class="row">
                <div class="col-6">
                    <label for="txtClaveNuevaRepetida">Repetir clave nueva</label>
                    <input type="password" name="txtClaveNuevaRepetida" id="txtClaveNuevaRepetida" class="form-control" minlength="8">
                </div>
            </div>
        </div>
    </div>
</form>
<script>
    
    $("#txtClaveActual").change(function(){
        validarClave();
    });

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

    let matchingPassword = false;

    const validarClave = () => {
        let claveActual = $("#txtClaveActual").val();
        if(claveActual != ""){
            $.ajax({
                type: "GET",
                url: "/validarClave",
                data: {claveActual: claveActual},
                async: true,
                dataType: "json",
                success: function(data){
                    console.log(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){
                $("#msg").show();
                msgShow("Las claves no coinciden", "danger");
            } else {
                $("#msg").hide();
            }
        }
    }

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

    function guardar() {
        let claveNueva = $("#txtClaveNueva").val();
        let claveNuevaRepetida = $("#txtClaveNuevaRepetida").val();
        validarClave();
        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