@section('navigation')
    @auth
        <div class="container-fluid d-none d-md-block">
            <ul class="nav nav-tabs justify-content-center pt-2  mt-3">
                <li class="nav-item">
                    <button type="button" class="nav-link" data-bs-toggle="modal" data-bs-target="#modalCadastro">
                        Novo cadastro
                    </button>
                </li>
                <li class="nav-item">
                    <a href="" class="nav nav-link">Relatórios</a>
                </li>
                <li class="nav-item d-block">
                    <div id="search-container" class="">
                        <form action="/dashboard/clientes" method="GET" class="d-flex me-2">
                            <input type="text" id="search" name="search" class="w-5 ms-2 me-2 form-control" placeholder="Procurar cliente">
                            <button type="submit" class="btn btn-primary">Procurar</button>
                        </form>
                    </div>
                </li>
                <li class="nav-item"><a href="/dashboard/clientes" class="nav-link">Todos</a></li>
                <li class="nav-item"><a href="/dashboard/clientes/filas?fila=viabilidade" name="viabilidade" id="viabilidade" value="viabilidade" class="nav-link">viabilidade</a></li>
                <li class="nav-item"><a href="/dashboard/clientes/filas?fila=pipeline" class="nav-link">pipeline</a></li>
                <li class="nav-item"><a href="/dashboard/clientes/filas?fila=instalacao" class="nav-link">instalação</a></li>
                <li class="nav-item"><a href="/dashboard/clientes/filas?fila=ativo" class="nav-link">ativo</a></li>
                <li class="nav-item"><a href="/dashboard/clientes/filas?fila=reparo" class="nav-link">reparo</a></li>
                <li class="nav-item"><a href="/dashboard/clientes/filas?fila=bloqueio" class="nav-link">bloqueio</a></li>
            </ul>
        </div>
        <div class="modal fade" id="modalCadastro" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Cadastro de usuário</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="/dashboard/clientes">
                            @csrf
                            <div class="form-floating">
                                <input type="text" name="nome" id="floatingNome" class="form-control" required>
                                <label for="floatingNome">Nome completo</label>
                            </div>
                            <div class="row g-2 mt-1">
                                <div class="form-floating col-md">
                                    <input type="email" name="email" class="form-control" id="email">
                                    <label for="email">E-mail</label>
                                </div>
                                <div class="form-floating col-md">
                                    <input type="text" maxlength="16" name="telefone" class="form-control" id="tel" required>
                                    <label for="tel">Telefone</label>
                                </div>
                            </div>
                            <div class="row g-2 mt-1">
                                <div class="form-floating mt-2 col-md">
                                    <select class="form-select" id="docTipoSelect" onchange="gerarCampo()">
                                        <option value="" hidden></option>
                                        <option value="cnpj">CNPJ</option>
                                        <option value="cpf">CPF</option>
                                        <option value="rg">RG</option>
                                    </select>
                                    <label for="docTipoSelect">Escolha o tipo de documento</label>
                                </div>
                                <div id="campoDocumento" class="form-floating col-md mt-2"></div>
                            </div>
                            
                            <script>
                                function gerarCampo() {
                                    var tipoDocumento = document.getElementById("docTipoSelect").value;
                                    var campoDocumento = document.getElementById("campoDocumento");
                                    campoDocumento.innerHTML = "";
                                    if (tipoDocumento === "cnpj") {
                                        campoDocumento.innerHTML = `
                                        <div class="form-floating">
                                            <input type="text" maxlength="18" name="doc_cnpj" class="form-control" id="docNumero" required>
                                            <label for="docNumero">Número do CNPJ</label>
                                        </div>`;
                                    } else if (tipoDocumento === "cpf") {
                                        campoDocumento.innerHTML = `
                                        <div class="form-floating">
                                            <input type="text" maxlength="14" name="doc_cpf" class="form-control" id="docNumero" required>
                                            <label for="docNumero">Número do CPF</label>
                                        </div>`;
                                    } else if (tipoDocumento === "rg") {
                                        campoDocumento.innerHTML = `
                                        <div class="form-floating">
                                            <input type="text" maxlength="9" name="doc_rg" class="form-control" id="docNumero" required>
                                            <label for="docNumero">Número do RG</label>
                                        </div>`;
                                    }
                                    
                                }
                            </script>                            
                            <div class="row g-2 mt-1">
                                <div class="form-floating col-md-6">
                                    <input type="text" name="cto" class="form-control" id="cto" required>
                                    <label for="cto">Centro de custo</label>
                                </div>
                                <div class="form-floating col-md-6">
                                    <input type="text" maxlength="9" name="cep" class="form-control" id="cep" required>
                                    <label for="cep">CEP</label>
                                </div>
                            </div>
                            <div class="row g-2 mt-1">
                                <div class="form-floating col-md">
                                    <input type="text" name="rua" class="form-control" id="rua" required>
                                    <label for="rua">Logradouro</label>
                                </div>
                                <div class="form-floating col-md">
                                    <input type="text" name="bairro" class="form-control" id="bairro" required>
                                    <label for="bairro">Bairro</label>
                                </div>
                            </div>
                            <div class="row g-2 mt-1">
                                <div class="form-floating col-md">
                                    <input type="text" name="numero" class="form-control" id="nmr" required>
                                    <label for="nmr">Número</label>
                                </div>
                                <div class="form-floating col-md">
                                    <input type="text" name="complemento" class="form-control" id="complemento" required>
                                    <label for="complemento">Complemento</label>
                                </div>
                            </div>
                            <div class="modal-footer mt-1">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                                <button type="submit" class="btn btn-primary">Salvar</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                function limpa_formulário_cep() {
                    $("#rua").val("");
                    $("#bairro").val("");
                    $("#cidade").val("");
                    $("#uf").val("");
                    $("#ibge").val("");
                }
                $("#cep").blur(function() {
                    var cep = $(this).val().replace(/\D/g, '');
                    if (cep != "") {
                        var validacep = /^[0-9]{8}$/;
                        if(validacep.test(cep)) {
                            $("#rua").val("...");
                            $("#bairro").val("...");
                            $("#cidade").val("...");
                            $("#uf").val("...");
                            $("#ibge").val("...");
                            $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) {

                                if (!("erro" in dados)) {
                                    $("#rua").val(dados.logradouro);
                                    $("#bairro").val(dados.bairro);
                                    $("#cidade").val(dados.localidade);
                                    $("#uf").val(dados.uf);
                                    $("#ibge").val(dados.ibge);
                                } else {
                                    limpa_formulário_cep();
                                    alert("CEP não encontrado.");
                                }
                            });
                        } else {
                            limpa_formulário_cep();
                            alert("Formato de CEP inválido.");
                        }
                    } else {
                        limpa_formulário_cep();
                    }
                });
            });
        </script>
    @endauth
@endsection