@extends('layouts.master')
@section('content')
<div class="container grid-sm pt40 pb-40">
    <div class="text-center">
        <h5 class="pt-60 m-0 text-secundary bold">Cambio de contraseña</h5>
    </div>
    <div class="message toast mt-20" style="display: none;"></div>
    <form class="form-horizontal">
        {{ csrf_field() }}
        <label class="form-label pt-20" for="password">Contraseña</label>
        <input class="form-input" type="password" id="password" name="password">
        <label class="form-label pt-20" for="c_password">Confirmar Contraseña</label>
        <input class="form-input" type="password" id="c_password" name="c_password">
        <button type="button" id="send_password" class="btn btn-primary w-100 mt-10">Enviar</button>
    </form>
</div>

<script>
    $('#send_password').click(function(){
        var password = $('#password').val();
        var c_password = $('#c_password').val();

        if(password.length < 6){
            show_message('toast-error', 'La contraseña debe contener 6 o más dígitos.');
        } else if(password != c_password){
            show_message('toast-error', 'Las contraseñas no coinciden.');
        } else {
            send(password);
        }
    });

    $('.form-horizontal').on('click', '#password, #c_password', function(){
        $('.message').removeClass('toast-error');
        $('.message').html('');
        $('.message').hide();
    });
    
    var send = function(password){
        var token = "{{ $token }}";

        $.post('/send_reset_password', { password: password, password_token: token, _token: "{{ csrf_token() }}" }, function(response){
            if(response.success){
                show_message('toast-success', response.success);
            } else {
                show_message('toast-error', response.error);
            }
        });
    }

    var show_message = function(class_name, message){
        $('.message').addClass(class_name);
        $('.message').html(message);
        $('.message').show();
    }
</script>
@endsection