@extends('templates.master')

@section('css-view')
@endsection

@section('js-view')
@endsection

@section('conteudo-view')
    <style>
        .alert {
            padding: 15px;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            color: #054468;
            text-align: center;
            margin-bottom: 20px;
        }

        .alert-orange {
            background-color: orange;
        }
    </style>

    @if(session('alert'))
        <div class="alert alert-orange">
            {{ session('alert') }}
        </div>
    @endif

    <h1>Inclusão de Clientes</h1>

    {!! Form::open (['route' => 'cadCliente.store', 'name' => 'cliente_blade', 'method' => 'post', 'class' => 'form-padrao']) !!}
        <div id="inputs">
            <center>
                <table cellspacing=2 cellpadding=5>
                    <tr valign=top>
                        <td class=tblHdr>Nome</td>
                        <td class=tblFld>
                            @include('templates.form.input', ['label' => '', 'input' => 'nome', 'attributes' => ['class' => 'forminput']])
                        </td>
                        <td class=tblHdr>&nbsp;&nbsp;&nbsp;</td>
                        <td class=tblHdr>CPF</td>
                        <td class=tblFld>
                            @include('templates.form.input',  ['label' => '', 'input' => 'cpf', 'attributes' => ['class' => 'forminput', 'onkeydown' => "javascript:doMask(this, 'cpf', event);"]])
                        </td>
                    </tr>
                    <tr valign=top>
                        <td class=tblHdr>Data Nascimento</td>
                        <td class=tblFld>
                            @include('templates.form.input', ['label' => '', 'input' => 'data_nascimento', 'attributes' => ['class' => 'forminput1', 'onkeydown' => "javascript:doMask(this, 'date', event);"]])
                        </td>
                        <td class=tblHdr>&nbsp;&nbsp;&nbsp;</td>
                        <td class=tblHdr>e-mail</td>
                        <td class=tblFld>
                            @include('templates.form.input',  ['label' => '', 'input' => 'email', 'attributes' => ['class' => 'forminput']])
                        </td>
                    </tr>
                    <tr valign=top>
                        <td class=tblHdr>CEP</td>
                        <td class=tblFld>
                            @include('templates.form.input',  ['label' => '', 'input' => 'cep', 'attributes' => ['class' => 'forminput1', 'id' => 'cep', 'onkeydown' => "javascript:doMask(this, 'cep', event);"]])
                        </td>
                        <td class=tblHdr>&nbsp;&nbsp;&nbsp;</td>
                        <td class=tblHdr>Endereço</td>
                        <td class=tblFld>
                            @include('templates.form.input', ['label' => '', 'input' => 'endereco', 'attributes' => ['class' => 'forminput']])
                        </td>
                    </tr>
                    <tr valign=top>
                        <td class=tblHdr>Complemento</td>
                        <td class=tblFld>
                            @include('templates.form.input', ['label' => '', 'input' => 'complemento', 'attributes' => ['class' => 'forminput']])
                        </td>
                        <td class=tblHdr>&nbsp;&nbsp;&nbsp;</td>
                        <td class=tblHdr>Bairro</td>
                        <td class=tblFld>
                            @include('templates.form.input', ['label' => '', 'input' => 'bairro', 'attributes' => ['class' => 'forminput']])
                        </td>
                    </tr>
                    <tr valign=top>
                        <td class=tblHdr>Cidade</td>
                        <td class=tblFld>
                            @include('templates.form.input', ['label' => '', 'input' => 'cidade', 'attributes' => ['class' => 'forminput']])
                        </td>
                        <td class=tblHdr>&nbsp;&nbsp;&nbsp;</td>
                        <td class=tblHdr>UF</td>
                        <td class=tblFld>
                            @include('templates.form.input', ['label' => '', 'input' => 'uf', 'attributes' => ['class' => 'forminput2']])
                        </td>
                    </tr>
                    <tr valign=top>
                        <td class=tblHdr>Telefone</td>
                        <td class=tblFld>
                            @include('templates.form.input', ['label' => '', 'input' => 'celular_1', 'attributes' => ['class' => 'forminput', 'onkeydown' => "javascript:doMask(this, 'telefone', event);"]])
                        </td>
                        <td class=tblHdr>&nbsp;&nbsp;&nbsp;</td>
                        <td class=tblHdr>Celular</td>
                        <td class=tblFld>
                            @include('templates.form.input', ['label' => '', 'input' => 'celular_2', 'attributes' => ['class' => 'forminput', 'onkeydown' => "javascript:doMask(this, 'celular', event);"]])
                        </td>
                    </tr>
                    <tr valign=top>
                        <td class=tblHdr>Whatsapp</td>
                        <td class=tblFld>
                            @include('templates.form.input', ['label' => '', 'input' => 'whatsapp', 'attributes' => ['class' => 'forminput', 'onkeydown' => "javascript:doMask(this, 'celular', event);"]])
                        </td>
                        <td class=tblHdr>&nbsp;&nbsp;&nbsp;</td>
                        <td class=tblHdr>RG</td>
                        <td class=tblFld>
                            @include('templates.form.input', ['label' => '', 'input' => 'rg', 'attributes' => ['class' => 'forminput', 'onkeydown' => "javascript:doMask(this, 'rg', event);"]])
                        </td>
                    </tr>
                </table>
            </center>
        </div>
        <p></p>

        <div id="botoes">
            @include('templates.form.submit', ['input' => 'Incluir Registro'])
            &nbsp;&nbsp;
            <a href="{{ route('cadCliente.index') }}" class="backbutton">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Voltar&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
        </div>
        {!! Form::close() !!}
        <script>
            $( "#cep" ).blur(function() {
                event.preventDefault();

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "{{ route('cadCliente.cep') }}",
                    type: "post",
                    data: $(this).serialize(),
                    dataType: 'json',
                    success: function(response){
                        if (response.success === true) {
                            document.cliente_blade.endereco.value = response.logradouro;
                            document.cliente_blade.complemento.value = response.complemento;
                            document.cliente_blade.bairro.value = response.bairro;
                            document.cliente_blade.cidade.value = response.localidade;
                            document.cliente_blade.uf.value = response.uf;
                        } else {
                            alert('Erro: ' + response.message);
                        }
                    },
                    error: function(error){
                        alert('Erro: Erro na API, verificar o CNPJ digitado');
                    }
                });
            });
        </script>
@endsection