@extends('layout')

@section('title')
    Usuários
@endsection

@section('content')

    <div class="card card-body">
        <h4 class="card-title">Novo usuário</h4>
        <h5 class="card-subtitle"> Preencha com as informações requisitadas. </h5>
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <form method="POST" action="{{ route('usuarios_store') }}">
                    @csrf
                    <div class="form-group">
                        <label>Nome</label>
                        <input type="text" class="form-control" id="nome" name="nome">
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="email" class="form-control" id="email" name="email">
                    </div>
                    <div class="form-group">
                        <label>Senha</label>
                        <input type="password" class="form-control" id="senha" name="senha">
                    </div>
                    <div class="form-group">
                        <label>Confirme a senha</label>
                        <input type="password" class="form-control" id="resenha" name="resenha">
                    </div>
                    @include('flashs')
                    <button type="submit" class="btn btn-success m-r-10" onclick="return validarForm()">Confirmar</button>
                    <a href="{{ route('usuarios') }}"><button type="button" class="btn btn-dark">Cancelar</button></a>
                </form>
            </div>
        </div>
    </div>
    <script>
        var nome = document.getElementById("nome");
        var email = document.getElementById("email");
        var resenha = document.getElementById("resenha");
        var senha = document.getElementById("senha");

        resenha.onblur = function(){
            if (senha.value != resenha.value){
                resenha.setCustomValidity("Senhas diferentes!");
                resenha.reportValidity();
                return false;
            }
            else {
                resenha.setCustomValidity("");
                return true;
            }
        }

        function validarForm() {
            if(nome.value != "" && email.value != "" && senha.value != "" && resenha.value != ""){
                if (senha.value != resenha.value){
                    resenha.setCustomValidity("Senhas diferentes!");
                    resenha.reportValidity();
                    return false;
                }
                else {
                    nome.setCustomValidity("");
                    email.setCustomValidity("");
                    senha.setCustomValidity("");
                    resenha.setCustomValidity("");
                    return true;
                }
            }
            else{
                if (nome.value == ""){
                    nome.setCustomValidity("Informe o nome do usuário!");
                    nome.reportValidity();
                    return false;
                }
                else{
                    if (email.value == ""){
                        email.setCustomValidity("Informe o email do usuário!");
                        email.reportValidity();
                        return false;
                    }
                    else{
                        if (senha.value == ""){
                            senha.setCustomValidity("Informe uma senha!");
                            senha.reportValidity();
                            return false;
                        }
                        else{
                            if (resenha.value == ""){
                                resenha.setCustomValidity("Confirme a senha!");
                                resenha.reportValidity();
                                return false;
                            }
                            else{
                                nome.setCustomValidity("");
                                email.setCustomValidity("");
                                senha.setCustomValidity("");
                                resenha.setCustomValidity("");
                                return true;
                            }
                        }
                    }
                }
            }
        }
    </script>
@endsection