@extends('admin.master')
@section('content')
<section id="dashboard-content">
    <div id="configuracoes" class="col-xs-12 section-content">
        <div class="row">
            <div id="cnf-content" class="col-xs-12">
                <div id="cnf-users" class="box-col-3">
                    <h2 class="page-subTitle">Usuários Administrativos</h2>
                    <div class="usr-content_wrapper box-content">
                        <div class="row">
                            <div id="usr-add" class="col-xs-12">
                                <div class="row">
                                    <input type="hidden" id="usrId" name="usrId">
                                    <div class="col-xs-12">
                                        <label for="usrNome">Nome:</label>
                                        <input type="text" id="usrNome" name="usrNome" required>
                                    </div>
                                    <div class="col-xs-12">
                                        <label for="usrEmail">E-mail:</label>
                                        <input type="email" id="usrEmail" name="usrEmail" required>
                                    </div>
                                    <div class="col-xs-12">
                                        <label for="usrSenha">Senha:</label>
                                        <input type="password" id="usrSenha" name="usrSenha" required>
                                    </div>
                                    <div class="col-xs-12 btnAdd">
                                        <button type="submit" id="addUser">
                                            Adicionar Usuário
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr class="separator">
                            <div id="usr-list" class="col-xs-12">
                                <div class="row">
                                    <div id="usr-list_title" class="col-xs-12">
                                        Usuários cadastrados
                                    </div>
                                    <div id="usr-list_content" class="col-xs-12">
                                        @foreach($users as $user)
                                            <div id="user_{{$user->id}}" class="dropdown usr-list-item">
                                                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn-email">
                                                    {{$user->name}} | {{$user->email}}
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu" aria-labelledby="dLabel">
                                                    <li>
                                                        <a onclick="editarUser('{{$user->id}}', '{{$user->name}}', '{{$user->email}}')">
                                                        <i class="fa fa-pencil"></i> Editar</a></li>
                                                    <li>
                                                        <a onclick="deleteUser('{{$user->id}}')">
                                                            <i class="fa fa-trash"></i>Excluir
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



            </div>
        </div>
    </div>
</section>
@stop
@section('scripts')

    <script type="text/javascript">

        function editarUser(id , name, email){
            $('input[name=usrId]').val(id);
            $('input[name=usrNome]').val(name);
            $('input[name=usrEmail]').val(email);
            $('input[name=usrSenha]').val('');
        };

        function deleteUser(id){
            var formData = {
                'id' : id,
            };

            $.ajax({
                type        : 'DELETE',
                url         : "{{ url('admin/userRegister') }}",
                data        : formData,
                dataType    : 'json',
            })
            .done(function(result) {
                $('#user_'+id).remove();
                alert('Usuário deletado com sucesso!');
            });
        };


        $(document).ready(function(){

            $('#addUser').click(function(){

                if(!($('input[name=usrNome]').val()))
                {
                    alert('Preencha o nome');
                    return;
                }
                if(!($('input[name=usrEmail]').val()))
                {
                    alert('Preencha o e-mail');
                    return;
                }
                if(!validateEmail($('input[name=usrEmail]').val()))
                {
                    alert('O campo e-mail é inválido');
                    return;
                }

                if(($('input[name=usrId]').val()))
                {
                    var id = $('input[name=usrId]').val();
                    var formData = {
                    'id'              : $('input[name=usrId]').val(),
                    'name'              : $('input[name=usrNome]').val(),
                    'email'             : $('input[name=usrEmail]').val(),
                    'password'          : $('input[name=usrSenha]').val()
                    };
                    $.ajax({
                        type        : 'PUT',
                        url         : "{{ url('admin/userRegister') }}",
                        data        : formData,
                        dataType    : 'json',
                    })
                    .done(function(result) {
                        alert('Usuário alterado com sucesso!');
                        $('#user_'+id+' .btn-email').html(result.data.email + '<span class="caret"></span>');
                        $('input[name=usrId]').val();
                        $('input[name=usrNome]').val('');
                        $('input[name=usrEmail]').val('');
                        $('input[name=usrSenha]').val('');
                    });

                } else {

                    if(!($('input[name=usrSenha]').val()))
                    {
                        alert('Preencha a senha');
                        return;
                    }

                    var formData = {
                        'name'              : $('input[name=usrNome]').val(),
                        'email'             : $('input[name=usrEmail]').val(),
                        'password'          : $('input[name=usrSenha]').val()
                    };
                    $.ajax({
                        type        : 'POST',
                        url         : "{{ url('admin/userRegister') }}",
                        data        : formData,
                        dataType    : 'json',
                    })
                    .done(function(result) {
                        var html = `<div id="user_` + result.data.id + `" class="dropdown usr-list-item">
                                        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">`;
                        html += result.data.name + ' | ' + result.data.email  ;
                        html += `<span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="dLabel">
                                            <li><a onclick="editarUser('` + result.data.id + `', '` + result.data.name + `', '` + result.data.email + `')"><i class="fa fa-pencil"></i>Editar</a></li>
                                            <li><a onclick="deleteUser('`+ result.data.id + `')"><i class="fa fa-trash"></i>Excluir</a></li>
                                        </ul>
                                    </div>`;
                        $('#usr-list_content').append(html);
                        alert('Usuário adicionado com sucesso!');
                        $('input[name=usrId]').val();
                        $('input[name=usrNome]').val('');
                        $('input[name=usrEmail]').val('');
                        $('input[name=usrSenha]').val('');
                    }).fail(function(result) {
                        alert(result.responseJSON.msg);
                        console.log(result);
                    });
                }
            });

        });

        function validateEmail(email) {

            //var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

            return re.test(email);
        }

    </script>
@stop