@extends('admin.layouts.layout')

@section('content')
<div class="container-fluid">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h5 class="m-0 font-weight-bold text-primary">Cadastro de Contribuintes</h5>
            <small>Cadastro de Contribuintes no Sistema</small>
            <a class="btn btn-outline-primary btn-block d-grid gap-2" type="button"
                href="{{ route('contribuintes.create') }}" role="button">Novo Contribuinte</a>
            <br>
            <!-- Adicione um campo de busca na sua view -->
            <input type="text" class="form-control" id="searchInput" placeholder="Buscar por código, nome, CPF ou CNPJ">
            <a class="btn btn-outline-primary btn-block d-grid gap-2" type="button" id="searchButton">Buscar</a>
        </div>

        <div class="card">
            <div class="card-body">


                <!-- Table -->
                <div class="table-responsive">
                    <table class="table table-sm table-hover" id="dataTable">
                        <thead>
                            <tr>
                                <th scope="col">Código</th>
                                <th scope="col">Cadastro</th>
                                <th scope="col">Tipo</th>
                                <th scope="col">Nome</th>
                                <th scope="col">CPF/CNPJ</th>
                                <th scope="col">Nº</th>
                                <th scope="col">Logradouro</th>
                                <th scope="col">Bairro</th>
                                <th scope="col">C.E.P.</th>
                                <th scope="col">U.F.</th>
                                <th scope="col">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($listarContribuintes as $item)
                            <tr>
                                <td>{{ $item['CODIGO'] }}</td>
                                <td>{{ $item['DATA_CADASTRO'] }}</td>
                                <td>{{ $item['TIPO_PESSOA'] }}</td>
                                <td>{{ $item['NOME']}}</td>
                                <td>{{ $item['CPF_CNPJ']}}</td>
                                <td>{{ $item['NPREDIO_PROPRIETARIO'] }}</td>
                                <td>{{ $item['LOGRAD_PROPRIETARIO'] }}</td>
                                <td>{{ $item['BAIRRO_PROPRIETARIO'] }}</td>
                                <td>{{ $item['CEP_PROPRIETARIO'] }}</td>
                                <td>{{ $item['UF_PROPRIETARIO'] }}</td>
                                <td>
                                    <form class="d-inline" action="">
                                        <button class="btn btn-outline-warning btn-sm">Mostrar</button>
                                    </form>
                                    <form class="d-inline" method="POST" action="">
                                        <button class="btn btn-sm btn-outline-danger" disabled>Exluir</button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                {{$listarContribuintes->links()}}

            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
    // Função para filtrar os dados da tabela
    function filterTable(searchValue) {
        $('#dataTable tbody tr').each(function() {
            var logradouro = $(this).find('td:nth-child(7)')
        .text(); // Obtém o valor do logradouro na coluna
            var cpf_cnpj = $(this).find('td:nth-child(5)')
        .text(); // Obtém o valor do cnp/cnpj na coluna 5
            var nome = $(this).find('td:nth-child(4)').text(); // Obtém o valor do nome na coluna 4
            var codigo = $(this).find('td:nth-child(1)')
                .text(); // Obtém o valor do código na coluna 1
            if (logradouro.toLowerCase().includes(searchValue.toLowerCase()) ||
                cpf_cnpj.toLowerCase().includes(searchValue.toLowerCase()) ||
                nome.toLowerCase().includes(searchValue.toLowerCase()) ||
                codigo.toLowerCase().includes(searchValue.toLowerCase())) {
                $(this).show(); // Exibe a linha se o nome ou o código corresponderem à busca
            } else {
                $(this).hide(); // Oculta a linha se o nome e o código não corresponderem à busca
            }
        });
    }

    // Evento de clique no botão de busca
    $('#searchButton').click(function() {
        var searchValue = $('#searchInput').val();
        filterTable(searchValue);
    });

    // Evento de pressionar Enter no campo de busca
    $('#searchInput').keypress(function(event) {
        if (event.which === 13) { // Verifica se a tecla pressionada é Enter
            var searchValue = $('#searchInput').val();
            filterTable(searchValue);
        }
    });
    // Evento de alteração do campo de busca
    $('#searchInput').on('input', function() {
        var searchValue = $(this).val();
        filterTable(searchValue);
    });
});
</script>
@endsection