@include('include.header')
<div class="modal" style="display: none;">
    <div class="loading">
        <div class="spinner"></div>
        <p>Carregando...</p>
        <p> Não feche a janela enquanto o download estiver em progresso.</p>
    </div>
</div>
<div class="container body-content mt-5">
    <div class="row justify-content-md-center">
        <div class="col-md-12">
            <h2>Gerenciar faturas</h2>
        </div>

        <div class="col-md-12 col-xs-12">
            @if(session()->has('error'))
                <div class="alert alert-warning mt-2">
                    {{ session()->get('error') }}
                </div>
            @endif
            @if(session()->has('success'))
                <div class="alert alert-success mt-2">
                    {{ session()->get('success') }}
                </div>
            @endif

            <div class="row">
                <div class="col-md-8 col-xs-12">
                    @if(\AuthApiContatos::hasPermission(['gerenciar-faturas:escrita']))
                        <form action="{{ route('upload.excel') }}" id="formUpload" class="formUpload" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="input-group mb-3">
                                <label class="input-group-text" for="inputGroupFile01">Importar dados</label>
                                <input type="file" class="form-control" name="excel_file" id="inputGroupFile01">
                                <button class="btn btn-outline-success" type="submit">Enviar</button>
                            </div>
                        </form>
                    @endif
                </div>
            </div>

            <div class="row border-top">
                <div class="col-md-12">
                    <form class="mt-4" role="search" action="faturas">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="uf">UF</label>
                                <select class="form-control" id="uf" name="uf">
                                    <option value="">Selecione a UF</option>
                                    @foreach($ufs as $uf)
                                        <option {{ request()->input('uf') == $uf->uf ? 'selected' : '' }}>{{$uf->uf}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label for="formGroupExampleInput">Município</label>
                                <input type="text" class="form-control" id="municipio" name="municipio" autocomplete="off"  placeholder="Digite o nome do município" value="{{ request()->input('municipio') }}">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <label for="cnpj">CNPJ</label>

                                <div class="input-group">
                                    <input class="form-control" type="search" maxlength="18" placeholder="Digite seu CNPJ" id="cnpj" name="cnpj" aria-label="Search" value="{{ request()->input('cnpj') }}">
                                </div>
                            </div>

                            <div class="col-md-3">
                                <label for="tipo_pgto">Tipo Pagamento</label>
                                <select class="form-control" id="tipo_pgto" name="tipo_pgto">
                                    <option value="">Selecione o tipo de pagamento</option>
                                    @foreach($formasPagamento as $forma)
                                        <option {{ request()->input('tipo_pgto') == $forma->FormaDePgto ? 'selected' : '' }}>{{$forma->FormaDePgto}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-3">
                                <button class="btn btn-outline-success" type="submit">Pesquisar</button>

                                @if(
                                    request()->input('uf') || request()->input('municipio')
                                    || request()->input('cnpj') || request()->input('tipo_pgto')
                                    )
                                    <a href="/faturas" class="btn btn-outline-secondary" type="button">Limpar</a>
                                @endif

                            </div>
                        </div>
                    </form>
                </div>

                <div class="col-md-12 mt-4">
                    <p><b>Resultado:</b> {{ number_format($faturas->total(), 0, '.', '.') }} registros encontrados.</p>
                    @if($situacao)
                        <p>
                            <b>Situação:</b>
                            <b style="color: {{ $situacao == 'Em dia' ? 'green' : '#eead2d' }}">{{ $situacao }}</b>
                        </p>
                    @endif
                <div>

                <div class="col-md-12 border-top">
                    <div class="table-responsive">
                        <table class="table table-striped mt-4">
                            <thead>
                                <tr>
                                    <th scope="col">Municipio</th>
                                    <th scope="col">UF</th>
                                    <th scope="col">Serviço</th>
                                    <th scope="col">Forma de pagamento</th>
                                    <th scope="col">Situação</th>
                                    <th scope="col">Valor</th>
                                    <th scope="col">Referência</th>
                                    <th scope="col">Vencimento</th>
                                    <th scope="col">Data Pagamento</th>
                                    <th scope="col">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($faturas as $key => $fatura)
                                    <tr>
                                        <td>{{$fatura->municipio}}</td>
                                        <td>{{$fatura->uf}}</td>
                                        <td>{{$fatura->servico}}</td>
                                        <td>{{$fatura->formaDePgto}}</td>
                                        <td>{{$fatura->situacao}}</td>
                                        <td>@if(is_numeric($fatura->valor))
                                            {{ number_format(abs($fatura->valor), 2, ',', '.') }}
                                            @else
                                            {{ $fatura->valor }}
                                            @endif
                                        </td>
                                        <td>{{$fatura->referencia}}</td>
                                        <td>{{$fatura->vencimento}}</td>
                                        <td>{{$fatura->dataPgto}}</td>
                                        <td>
                                            @if(\AuthApiContatos::hasPermission(['gerenciar-faturas:escrita']))
                                                <div class="d-flex">
                                                    <a href="/faturas/{{$fatura->id}}/edit" class="btn btn-sm btn-outline-primary">Editar</a>

                                                    <form action="/faturas/{{$fatura->id}}" method="POST" onsubmit="return confirm('Tem certeza de que deseja remover esse registro?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-outline-danger">Excluir</button>
                                                    </form>
                                                </div>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-center">
        {{ $faturas->links() }}
    </div>
</div>

<script>
    let inputCNPJ = document.getElementById('cnpj');

    if (inputCNPJ) {
        inputCNPJ.addEventListener('input', function(event) {
            var valor = event.target.value;
            event.target.value = formatarCNPJ(valor);
        });
    }

    $("#formUpload").on("submit", function() {
        var elemento = document.querySelector(".modal");
        elemento.style.display = "flex";
    });

    let exportDado = document.getElementById("exportDado");

    if (exportDado) {
        exportDado.addEventListener("click", function() {
            var elemento = document.querySelector(".modal");
            elemento.style.display = "flex";

            setTimeout(function() {
                elemento.style.display = "none";
            }, 5000);
        });
    }

    function municipiosRender(uf = null, refresh = false) {
        let municipios = {!! json_encode($municipios) !!};

        if (uf) {
            municipios = municipios.filter(item => item.uf == uf);
        }

        if (refresh) {
            $('#municipio').typeahead('destroy');
        }

        $('#municipio').typeahead({
            source: municipios.map(item => item.municipio),
            minLength: 1,
            highlight: true,
        });
    }

    $('#uf').on('change', function() {
        municipiosRender($(this).val(), true);

        $('#municipio').val('');
    })

    $(document).ready(function(){
        municipiosRender($('#uf').val());
    });
</script>

<script src="{{asset('js/printPDF.js')}}"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>

@include('include.footer')