@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 flex text-center justify-center m-3 mt-3 mb-3 p-3">Cadastros - <span class="text-lg">Lista</span> </h1>

        <div class="rounded-lg mb-10 m-3 sm:p-2 p-1   lg:m-3 xl:m-3 flex justify-center ">
            <form method="GET" action="{{ route('cadastros.lista') }}" class="bg-gray-200 rounded-md p-3 w-3/6 mx-auto m-0 mt-5 mb-3 sm:grid grid-flow-col lg:flex lg:flex-row lg:justify-center lg:items-center">
                <select id="tipo" name="tipo" class="bg-gray-50 border border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-3/4 w-11/12 p-2 m-2">
                    <option value="" disabled selected>Tipo Cadastro</option>
                    <option value="empresa">Empresa</option>
                    <option value="pessoa">Pessoa</option>
                    <option value="fornecedor">Fornecedor</option>
                    <option value="parceiro">Parceiro</option>
                </select>
                <input id="nome" name="nome" class="bg-gray-50 border border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-full w-11/12 p-2 m-2" placeholder="Nome ou Razao Social">
                <input id="documento" name="documento" class="bg-gray-50 border border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-full w-11/12 p-2 m-2" placeholder="CPF ou CNPJ">

               
                <select name="uf" id="uf" class="bg-gray-50 border border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-3/4 w-11/12 p-2 m-2">
                    <option 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>
                <button type="submit" class="text-white bg-blueblack hover:bg-orangeblack text-base lg:rounded-lg rounded-md p-1 sm:w-5/6 m-2 lg:max-w-28">Pesquisar</button>
            </form>
        </div>

        <div class="relative overflow-x-auto shadow-md rounded m-3">
            <table class="w-full text-sm text-left rtl:text-right text-blueblack">
                <thead class="text-xs text-white  uppercase bg-blueblack rounded-lg">
                    <tr>
                        <th scope="col" class="px-4 py-3 text-center">
                            Tipo
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Nome
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Documento
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            UF
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Editar
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($cadastros as $dados)

                    <tr class="bg-white border-b hover:bg-gray-200 text-blueblack">
                            
                        <td class="px-6 py-4 text-center  text-base">
                         {{ucfirst($dados->tipo)}}
                        </td>
                        <td class="px-6 py-4 text-center">
                            {{ucfirst($dados->nome)}}
                        </td>
                        <td class="px-6 py-4 text-center">
                            @php
                                $documento = $dados->documento;
                                $formato = strlen($documento);

                                if ($formato === 11) {
                                    // Formatar CPF
                                    $documentoFormatado = preg_replace('/(\d{3})(\d{3})(\d{3})(\d{2})/', '$1.$2.$3-$4', $documento);
                                } elseif ($formato === 14) {
                                    // Formatar CNPJ
                                    $documentoFormatado = preg_replace('/(\d{2})(\d{3})(\d{3})\/(\d{4})-(\d{2})/', '$1.$2.$3/$4-$5', $documento);
                                } else {
                                    $documentoFormatado = $documento; // Caso não seja nem CPF nem CNPJ
                                }
                            @endphp

                            {{ $documentoFormatado }}
                        </td>
                        <td class="px-6 py-4 text-center">
                            {{$dados->uf}}
                        </td>
                        <td class="px-6 py-4 text-center">
                            <button  id="btnEditar" name="btnEditar" class="" value="{{ $dados->id }}" data-id="{{$dados->id}}" data-modal-target="update-modal" data-modal-toggle="update-modal"><svg class="w-6 h-6 text-yellow-600 bg-yellow-200 rounded-full" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                                <path fill-rule="evenodd" d="M11.32 6.176H5c-1.105 0-2 .949-2 2.118v10.588C3 20.052 3.895 21 5 21h11c1.105 0 2-.948 2-2.118v-7.75l-3.914 4.144A2.46 2.46 0 0 1 12.81 16l-2.681.568c-1.75.37-3.292-1.263-2.942-3.115l.536-2.839c.097-.512.335-.983.684-1.352l2.914-3.086Z" clip-rule="evenodd"/>
                                <path fill-rule="evenodd" d="M19.846 4.318a2.148 2.148 0 0 0-.437-.692 2.014 2.014 0 0 0-.654-.463 1.92 1.92 0 0 0-1.544 0 2.014 2.014 0 0 0-.654.463l-.546.578 2.852 3.02.546-.579a2.14 2.14 0 0 0 .437-.692 2.244 2.244 0 0 0 0-1.635ZM17.45 8.721 14.597 5.7 9.82 10.76a.54.54 0 0 0-.137.27l-.536 2.84c-.07.37.239.696.588.622l2.682-.567a.492.492 0 0 0 .255-.145l4.778-5.06Z" clip-rule="evenodd"/>
                              </svg></button>
                        </td>
                    </tr>
                    @endforeach
                
                </tbody>
            </table>
        </div>
        {{ $cadastros->links() }}
    </div>
</div> 
<!--  modal  update-->
<div id="update-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative p-2 w-4/5 max-w-md max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t">
                <h3 class="text-xl font-semibold text-blueblack ">
                    Alterar Cadastro
                </h3>
                <button type="button" id="closeModalUpdate" class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="update-modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Fechar Modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-4 md:p-5">
                <form class="space-y-4" action="#">
                    <div>
                        <label for="" class="block mb-2 text-sm font-medium text-gray-900">Tipo Cadastro</label>
                        <select name="tipoCadastro" id="tipoCadastro" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                         focus:orangeblack focus:border-orangeblack block w-40 p-2.5 ">
                            <option value="" selected disabled>Tipo 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>
                        <input type="hidden" id="idCadastro" name="idCadastro">
                    </div>
                    <div class="flex grid-flow-col">
                        <div class="w-full">
                            <label for="" class="block mb-2 text-sm font-medium text-gray-900">Nome</label>
                            <input type="text" name="nomeCadastro" id="nomeCadastro" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                             focus:ring-orangeblack focus:border-orangeblack  w-full p-2.5"  placeholder="Nome" required/>
                        </div>
                        <div class="w-full ml-1">
                            <label for="" class="block mb-2 text-sm font-medium text-gray-900">Documento</label>
                            <input type="text" name="documentoCadastro" id="documentoCadastro" pattern="[0-9]"  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                             focus:ring-orangeblack focus:border-orangeblack  w-full p-2.5" placeholder="CPF ou CNPJ" required/>
                        </div>
                    </div>
                  
                    <div>
                        <label for="" class="block mb-2 text-sm font-medium text-gray-900">Email</label>
                        <input type="text" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm 
                        rounded-md focus:orangeblack focus:border-orangeblack block w-full p-2.5" placeholder="Email" required/>
                    </div>
                    <div class="flex grid-flow-col">
                        <div class="w-full">
                            <label for="" class="block mb-2 text-sm font-medium text-gray-900">Telefone</label>
                            <input type="text" name="telefone" id="telefone" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                             focus:ring-orangeblack focus:border-orangeblack w-full p-2.5" minlength="10" maxlength="40" placeholder="Telefone" required/>
                        </div>
                        <div class="w-full ml-1">
                            <label for="" class="block mb-2 text-sm font-medium text-gray-900">Celular</label>
                            <input type="text" name="celular" id="celular" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                            focus:ring-orangeblack focus:border-orangeblack w-full p-2.5" minlength="10" maxlength="13" placeholder="Celular" required/>
                        </div>
                    </div>
                    <div class="flex grid-flow-col">
                        <div class="w-full">
                            <label for="" class="block mb-2 text-sm font-medium text-gray-900">CEP</label>
                            <input type="text" name="cep" id="cep" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                             focus:ring-orangeblack focus:border-orangeblack  w-full p-2.5" onblur="pesquisacep(this.value);" minlength="10" maxlength="40" placeholder="CEP" required/>
                        </div>
                        <div class="w-full ml-1">
                            <label for="" class="block mb-2 text-sm font-medium text-gray-900">Endereço</label>
                            <input type="text" name="rua" id="rua" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                            focus:ring-orangeblack focus:border-orangeblack  w-full p-2.5" minlength="10" maxlength="13" placeholder="Endereço" required/>
                        </div>
                    </div>
                    <div class="flex grid-flow-col">
                        <div class="w-full">
                            <label for="" class="block mb-2 text-sm font-medium text-gray-900">Cidade</label>
                            <input type="text" name="cidade" id="cidade" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                             focus:ring-orangeblack focus:border-orangeblack  w-full p-2.5" minlength="10" maxlength="90" placeholder="Cidade" required/>
                        </div>
                        <div class="w-full ml-1">
                            <label for="" class="block mb-2 text-sm font-medium text-gray-900">Bairro</label>
                            <input type="text" name="bairro" id="bairro" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                            focus:ring-orangeblack focus:border-orangeblack  w-full p-2.5" minlength="10" maxlength="13" placeholder="Bairro" required/>
                        </div>
                    </div>
                    <div class="flex grid-flow-col">
                        <div class="w-full">
                            <label for="" class="block mb-2 text-sm font-medium text-gray-900">IBGE</label>
                            <input type="text" name="ibge" id="ibge" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                             focus:ring-orangeblack focus:border-orangeblack  w-full p-2.5" minlength="10" maxlength="30" placeholder="IBGE" required/>
                        </div>
                        <div class="w-full ml-1">
                            <label for="" class="block mb-2 text-sm font-medium text-gray-900">UF</label>
                            <input type="text" name="ufCadastro" id="ufCadastro" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                            focus:ring-orangeblack focus:border-orangeblack  w-full p-2.5" minlength="10" maxlength="13" placeholder="UF" required/>
                        </div>
                    </div>
                    <div>
                        <label for="status" class="block mb-2 text-sm font-medium text-gray-900">Status</label>
                        <select name="status" id="status" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                         focus:orangeblack focus:border-orangeblack block w-32 p-2.5 ">
                            <option value="ativo" selected>Ativo</option>
                            <option value="inativo">inativo</option>
                        </select>
                    </div>
                    <div id="DivRetorno">

                    </div>
                    <div id="DivHistorico">
                        
                    </div>
                    <div class="pt-2">
                        <button type="button" id="btnGravar" class="rounded-md px-2 py-1 mr-2 bg-green-400 hover:bg-green-500 text-white ">Salvar</button>
                        <button type="button" id="btnCancelar" class="rounded-md px-2 py-1   bg-gray-400  hover:bg-gray-500 text-white ">Cancelar</button>
                    </div>
                </form>
                <div id="DivRetornoUpdate"></div>
            </div> 
        </div>
    </div>
</div> 

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



@endsection