@extends('cadastros.cadastros');

@section('content')
    <div class="bg-white max-w-screen max-h-auto max-w-auto mx-auto sm:w-full xl:w-11/12  rounded-lg mt-16 mb-16 pb-8 pt-8">
        <h1 class="text-orangeblack text-lg font-bold  m-3 mt-3 mb-3 p-3">Cadastrar - <span class="text-lg">Empresas e Pessoas</span> </h1>
        <div id="formCadastroMotorista" class="p-10 bg-gray-100 md:mx-3 md:rounded-md">
            <form action="">

            <div class="mx-2 mb-4">
                <select name="tipo" id="tipo" class=" bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack  p-2.5  dark:focus:ring-orangeblack dark:focus:border-orangeblack sm:w-5/6 lg:w-auto w-11/12  m-2">
                 <option value="" disabled selected>Tipo de Cadastro</option>
                 <option class="text-gray-700" value="empresa">Empresa</option>
                 <option class="text-gray-700" value="pessoa">Pessoa</option>
                 <option class="text-gray-700" value="fornecedor">Fornecedor</option>
                 <option class="text-gray-700" value="parceiro">Parceiro</option>
                </select>
                 
             </div>
            <div class="mx-3 px-1  ">
                <div class="justify-normal  md:grid md:grid-flow-col my-2 lg:my-6 lg:max-w-8xl">
                    <div class="w-full  ">
                        <input type="text" id="nome" class="w-full my-2 shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack  p-2.5  dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="Nome ou Razão Social" required />
                    </div>
                    <div class=" w-full ">
                        <input type="text" id="documento" class="md:mx-2 w-full my-2  shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack  p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="CPF ou CNPJ"  pattern="[0-9]" required />
                    </div>
                </div>
                <div class="justify-normal  md:grid md:grid-flow-col my-2 lg:my-6 lg:max-w-8xl">
                    <div class="w-full">
                        <input type="text" id="email" class="w-full my-2  shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack  p-2.5  dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="Email" required />
                    </div>
                    <div class="  w-full">
                        <input type="text" id="telefone" class="w-full my-2 md:max-w-48 lg:max-w-72 md:mx-2  shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack  p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="Telefone" required />
                        <input type="text" id="celular" class="w-full my-2 md:max-w-48 lg:max-w-72 shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack  p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="Celular" @required(true) />

                    </div>
                </div>
                <div class="justify-normal  md:grid md:grid-flow-col my-2 lg:my-6 lg:max-w-8xl">
                    <form action="" method="get">
                        <div class="w-full md:grid md:grid-flow-col  ">
                            <input type="text" name="cep" id="cep" class="w-full my-2  shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack  p-2.5  dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="CEP" size="10" maxlength="9" onblur="pesquisacep(this.value);" required />
                            <input type="text" name="rua" id="rua" class="w-full my-2  md:ml-2   shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack  p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="Rua" size="60" required />
                            <input type="text" name="cidade" id="cidade" class="w-full my-2 md:ml-3  shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack  p-2.5  dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="Cidade" size="40" required />
                            <input type="text" name="bairro" id="bairro" class="w-full my-2  md:ml-4 shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack  p-2.5  dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="Bairro" size="40" required />
                            <input type="text" name="ibge" id="ibge" class="w-full max-w-32 my-2  md:ml-5 shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack  p-2.5  dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="Cod. IBGE" size="40" required />

                            <select name="uf" id="uf" class="w-full max-w-20 my-2 md:ml-6 lg:ml-3  shadow-sm bg-gray-50 border border-gray-300 text-gray-500 text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack  p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="UF" required >
                                <option class="text-blueblack" value="" disabled selected>UF</option>
                                <option class="text-blueblack" value="AC">AC</option>
                                <option class="text-blueblack" value="AL">AL</option>
                                <option class="text-blueblack" value="AP">AP</option>
                                <option class="text-blueblack" value="AM">AM</option>
                                <option class="text-blueblack" value="BA">BA</option>
                                <option class="text-blueblack" value="CE">CE</option>
                                <option class="text-blueblack" value="DF">DF</option>
                                <option class="text-blueblack" value="ES">ES</option>
                                <option class="text-blueblack" value="GO">GO</option>
                                <option class="text-blueblack" value="MA">MA</option>
                                <option class="text-blueblack" value="MT">MT</option>
                                <option class="text-blueblack" value="MS">MS</option>
                                <option class="text-blueblack" value="MG">MG</option>
                                <option class="text-blueblack" value="PA">PA</option>
                                <option class="text-blueblack" value="PB">PB</option>
                                <option class="text-blueblack" value="PR">PR</option>
                                <option class="text-blueblack" value="PE">PE</option>
                                <option class="text-blueblack" value="PI">PI</option>
                                <option class="text-blueblack" value="RJ">RJ</option>
                                <option class="text-blueblack" value="RN">RN</option>
                                <option class="text-blueblack" value="RS">RS</option>
                                <option class="text-blueblack" value="RO">RO</option>
                                <option class="text-blueblack" value="RR">RR</option>
                                <option class="text-blueblack" value="SC">SC</option>
                                <option class="text-blueblack" value="SP">SP</option>
                                <option class="text-blueblack" value="SE">SE</option>
                                <option class="text-blueblack" value="TO">TO</option>
                            </select>
                        </div>
                    </form>
                </div>
            </div>
            <div class="mx-2">
                <button type="button" id="btnGravar" name="btnGravar"  class="text-white bg-blueblack hover:bg-orangeblack text-base lg:rounded-lg rounded-md p-1 w-full m-2 sm:max-w-40 lg:max-w-28">Gravar</button>
                <button type="button" class="text-black bg-yellow-300 hover:bg-yellow-400 text-base lg:rounded-lg rounded-md p-1 w-full m-2 sm:max-w-40 lg:max-w-28" onclick="limpa_formulario_cep()">Limpar</button>
            </div>
        </form>
        </div>
        <div id="DivRetorno" class="flex flex-col items-center justify-center w-40"></div>
    </div>
</div> 

<script  src="{{ asset('js/formularios/cadastros/buscaCep.js') }}"></script>
<script type="module" src="{{ asset('js/formularios/cadastros/formCadastro.js') }}"></script>
<script type="module" src="{{ asset('js/functions/functionsBase.js') }}"></script>





@endsection