@php

$titulo = 'Reembolsos Viagens Não Reembolsados - SW';
// dd($reembolsos->despesa->des_data)
// dd($despesa_avulsa);
@endphp
@include('components.head') 
<style>
    .col-3 {
       transition: opacity 0.3s ease, visibility 0.3s ease;
       opacity: 1;
       visibility: visible;
       display: block; /* inicialmente visível */
   }
   
   .col-3.hidden {
       opacity: 0;
       visibility: hidden;
       /* NÃO coloca display: none aqui direto! */
   }
   
   .col-3.none {
       display: none; /* só depois da animação */
   }
   
   
   </style>
<div class="container">
    <p>Abaixo estão listadas todas as solicitações de reembolso de viagens.</p>
    {{-- <form action="{{ route('financeiro.reembolso.viagemnaoreembolsado') }}" method="GET" class="d-flex align-items-center mb-3">
        <input type="text" name="search" class="form-control" placeholder="Buscar por colaborador" value="{{ request('search') }}">
        @if(request('search'))
        <a href="{{route('financeiro.reembolso.viagemnaoreembolsado')}}" class="btn btn-danger ml-2">Limpar</a>
        @endif
        <button type="submit" class="btn btn-primary ml-2">Pesquisar</button>
    </form> --}}
    <div class="container">
        <form action="{{ route('financeiro.reembolso.viagemnaoreembolsado') }}" method="GET" class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label">Pesquisa de colaborador</label>
                <input type="text" name="search" class="form-control" placeholder="Buscar por colaborador" value="{{ request('search') }}">
            </div>
    
            <div class="col-md-2">
                <label class="form-label">Data do pedido (início):</label>
                <input type="date" name="data_pedido_inicio" class="form-control" value="{{ request('data_pedido_inicio') }}">
            </div>
    
            <div class="col-md-2">
                <label class="form-label">Data do pedido (fim):</label>
                <input type="date" name="data_pedido_fim" class="form-control" value="{{ request('data_pedido_fim') }}">
            </div>
    
            <div class="col-md-2">
                <label class="form-label">Data do reembolso (início):</label>
                <input type="date" name="data_reembolso_inicio" class="form-control" value="{{ request('data_reembolso_inicio') }}">
            </div>
    
            <div class="col-md-2">
                <label class="form-label">Data do reembolso (fim):</label>
                <input type="date" name="data_reembolso_fim" class="form-control" value="{{ request('data_reembolso_fim') }}">
            </div>
    
            <div class="col-md-1 d-flex align-items-end">
                @if(request()->hasAny(['search', 'data_pedido_inicio', 'data_pedido_fim', 'data_reembolso_inicio', 'data_reembolso_fim']))
                    <a href="{{ route('financeiro.reembolso.viagemnaoreembolsado') }}" class="btn btn-danger me-2">Limpar</a>
                @endif
                <button type="submit" class="btn btn-primary">Pesquisar</button>
            </div>
        </form>
    </div>
    <div class="d-flex justify-content-between align-items-center mb-2">
        <!-- Abas de navegação -->
        <ul class="nav nav-tabs" id="reembolsoTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="todos-tab" data-bs-toggle="tab" data-bs-target="#todos" type="button" role="tab" onclick="window.location.href='{{route('financeiro.reembolso.viagem')}}'">
                    Todos
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link active " id="nao-reembolsados-tab" data-bs-toggle="tab" data-bs-target="#nao-reembolsados" type="button" role="tab" onclick="window.location.href='{{route('financeiro.reembolso.viagemnaoreembolsado')}}'">
                    Não Reembolsados
                </button>
            </li>
            {{-- <li class="nav-item" role="presentation">
                <button class="nav-link" id="aprovados-tab" data-bs-toggle="tab" data-bs-target="#nao-reembolsados" type="button" role="tab" onclick="window.location.href='{{route('financeiro.reembolso.viagemaprovado')}}'">
                   Aprovados
                </button>
            </li> --}}
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="reembolsados-tab" data-bs-toggle="tab" data-bs-target="#reembolsados" type="button" role="tab" onclick="window.location.href='{{route('financeiro.reembolso.viagemreembolsado')}}'">
                    Reembolsados
                </button>
            </li>
        </ul>
    
        <!-- Botões de paginação -->
        <div class="d-flex align-items-center">
            <!-- Campo para selecionar resultados por página -->
            <form action="{{ route('financeiro.reembolso.viagemnaoreembolsado') }}" method="GET" class="d-flex align-items-center me-3">
                <input type="text" id="filtroCards" class="form-control d-flex align-items-center me-3" onkeyup="aplicaFiltroCards()" placeholder="Filtro de status...">
                <label for="resultados_por_pagina" class="me-2 mb-0">Resultados:</label>
                <select class="form-select me-2" id="resultados_por_pagina" name="resultados_por_pagina" style="width: auto;" onchange="this.form.submit()">
                    <option value="12" {{ request('resultados_por_pagina') == 12 ? 'selected' : '' }}>12</option>
                    <option value="24" {{ request('resultados_por_pagina') == 24 ? 'selected' : '' }}>24</option>
                    <option value="52" {{ request('resultados_por_pagina') == 52 ? 'selected' : '' }}>52</option>
                    <option value="100" {{ request('resultados_por_pagina') == 100 ? 'selected' : '' }}>100</option>
                </select>
            <script>
document.getElementById('resultados_por_pagina').addEventListener('change', function () {
    // Remover o parâmetro "page" do formulário antes de enviar
    const form = this.form;
    const pageInput = form.querySelector('input[name="page"]');
    if (pageInput) {
        pageInput.remove(); // remove o input da página
    }
    form.submit();
});
</script>

                {{-- Mantém os parâmetros existentes ao alterar o número de resultados --}}
                @foreach(request()->except('resultados_por_pagina') as $key => $value)
                    <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                @endforeach
                <button type="submit" class="btn btn-primary">Atualizar</button>
            </form>
    
            <!-- Paginação -->
            {{-- <nav aria-label="Navegação de página">
                <ul class="pagination mb-0">
                    <li class="page-item {{ $pagina <= 1 ? 'disabled' : '' }}">
                        <a class="page-link" href="{{ route('financeiro.reembolso.viagemnaoreembolsado', ['pagina' => $pagina - 1, 'resultados_por_pagina' => $resultados_por_pagina_real]) }}" aria-label="Anterior">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item {{ $pagina >= $total_paginas ? 'disabled' : '' }}">
                        <a class="page-link" href="{{ route('financeiro.reembolso.viagemnaoreembolsado', ['pagina' => $pagina + 1, 'resultados_por_pagina' => $resultados_por_pagina_real]) }}" aria-label="Próximo">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav> --}}
            @if ($reembolsos->count())
                <nav aria-label="Navegação de página">
                    <ul class="pagination mb-3">
                        {{-- Botão "Anterior" --}}
                        <li class="page-item {{ $reembolsos->onFirstPage() ? 'disabled' : '' }}">
                            <a class="page-link" href="{{ $reembolsos->appends(request()->query())->previousPageUrl() }}" aria-label="Anterior">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        

                        {{-- Números das páginas --}}
                        @for ($i = 1; $i <= $reembolsos->lastPage(); $i++)
                        <li class="page-item {{ $i == $reembolsos->currentPage() ? 'active' : '' }}">
                            <a class="page-link" href="{{ $reembolsos->appends(request()->query())->url($i) }}">{{ $i }}</a>
                        </li>
                        @endfor

                        {{-- Botão "Próximo" --}}
                        <li class="page-item {{ $reembolsos->currentPage() == $reembolsos->lastPage() ? 'disabled' : '' }}">
                            <a class="page-link" href="{{ $reembolsos->appends(request()->query())->nextPageUrl() }}" aria-label="Próximo">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            @endif
        </div>
    </div>
    @if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif
    
 
    <div id="containerCards">
    <div class="row">
        
            @foreach ($reembolsos as $reembolso)
           
            
                <div class="col-3 mb-2">
                    <div class="card card-alert shadow {{($reembolso->rem_rejeitado == 1 ? 'bg-danger' : '')}} {{ ($reembolso->rem_arquivo == 2 || $reembolso->rem_justificativa == 2 || $reembolso->rem_aprovado_por == 2) ? 'bg-warning' : '' }} {{$reembolso->rem_status == 1 ? 'bg-success' : ($reembolso->rem_status == 2 ? 'alert-success' : '')}}">
                        <div class="container mb-3">
                            <div class="row mt-3 ">
                                <div class="{{($reembolso->rem_rejeitado == 1 ? 'text-white' : '')}} {{$reembolso->rem_status == 1 ? 'text-white' : ''}}">
                                <div class="col-12">
                                    {{-- <small>ID: {{$reembolso->rem_id}}</small> <br> --}}
                                    <small>Solicitante:</small><br>
                                    <strong>
                                        {{ $reembolso->colaborador->pessoa->pes_nome_completo ?? 'indisponivel'}}                                        
                                    </strong>
                                </div>
                                <div class="col-12 d-flex align-items-center">
                                    <small>Valor: </small><br>
                                    <strong class="ml-1">R$ {{ $reembolso->rem_valor }}</strong>
                                </div>
                                <div class="col-12 d-flex align-items-center">
                                    <small>Status: </small><br>
                                    <strong class="ml-1">
                                    @if ($reembolso->rem_rejeitado)
                                        {{ 'Rejeitado' }}
                                    @elseif ($reembolso->rem_arquivo == 2 || $reembolso->rem_justificado == 2 || $reembolso->rem_aprovado_por == 2)
                                        {{ 'Editado' }}
                                    @else
                                    {{ $reembolso->rem_status == 0 ? 'Não reembolsado' : ($reembolso->rem_status == 1 ? 'Reembolsado' : ($reembolso->rem_status == 2 ? 'Aprovado' : ' ')) }}
                                    @endif
                                    </strong>
                                </div>
                                </div>
                                <div class="col-12 text-center">
                                    <button type="button" class="btn btn-small btn-primary shadow mt-2" data-bs-toggle="modal" data-bs-target="#reembolsoModal{{ $reembolso->rem_id }}">Verificar</button>
                                </div>
                                
                                <!-- Modal -->
                                <div class="modal fade " id="reembolsoModal{{ $reembolso->rem_id }}" tabindex="-1" aria-labelledby="modalLabel{{ $reembolso->rem_id }}" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                             
                                                <h5 class="modal-title  {{$reembolso->rem_status == 2 ? 'text-black' : ''}}" id="modalLabel{{ $reembolso->rem_id }}">Análise de reembolso</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body  {{$reembolso->rem_status == 2 ? 'text-black' : ''}}">
                                                {{-- <p>via_des_id: <strong>{{$reembolso->viaDespesa->via_des_id}} </strong></p> --}}
                                                <p>Destino: <strong> {{ $reembolso->viaDespesa->viagem->via_cidade }} </strong></p>
                                                <p>Valor: <strong>R$ {{ $reembolso->viaDespesa->via_valor }} </strong></p>
                                                <p>Tipo: <strong>{{ $reembolso->viaDespesa->via_tipo  }}</strong></p>
                                                <p>CNPJ: <strong>{{ $reembolso->viaDespesa->via_cnpj }}</strong></p>
                                                {{-- {{ $reembolso->despesa_id ? $reembolso->despesa->des_data : 'Despesa não encontrada' }} --}}
    
                                                <p>Data do pedido: <strong>{{ \Carbon\Carbon::parse($reembolso->viaDespesa->via_data)->format('d/m/Y') }}</strong></p>
                                                {{-- {{ \Carbon\Carbon::parse($suaData)->format('d/m/Y')}} --}}
                                                @if($reembolso->rem_status == 1)
                                                <p>Data do reembolso: <strong>{{ \Carbon\Carbon::parse($reembolso->rem_horareembolso)->format('d/m/Y') }}</strong></p>
                                                @endif
                                                <p>Justificativa: <strong>{{ $reembolso->viaDespesa->via_justificativa  }}</strong></p>
                                                <p>Cupom fiscal: 
                                                    <a href="{{ asset('storage/' .$reembolso->viaDespesa->via_imagem ?? 'images/sample_image.jpg') }}" target="_blank">Visualizar</a>
                                                </p>
                                                <p>Aprovador por: <strong>{{ $reembolso->viaDespesa->via_autorizado_por }}</strong></p>
                                            </div>
                                            @if ($reembolso->rem_status == 0)
                                                <div class="d-flex justify-content-between w-100">
                                                      <div class="mt-3 ml-3 mr-3">
                                                                
                                                        <button type="button" class="btn btn-danger" id="btn-devolver-{{ $reembolso->rem_id }}" data-form="form-desreembolso-{{ $reembolso->rem_id }}">
                                                            Rejeitar reembolso
                                                        </button>
                                                        </div>   
                                                        <form 
                                                            action="{{ route('financeiro.reembolso.aprovar', $reembolso->rem_id) }}" method="POST"
                                                            >
                                                            @csrf
                                                            <button type="submit" class="btn btn-primary mr-3 ml-3 mt-3">Aprovar</button>
                                                        </form>
                                                    </div>
                                                    <hr>
                                                    <form id="form-desreembolso-{{ $reembolso->rem_id }}" action="{{ route('financeiro.reembolso.desreembolsar', $reembolso->rem_id) }}" method="POST" hidden>
                                                        @csrf
                                                        <div class="mb-3 mr-3 ml-3 ">
                                                            
                                                            <div class="row">
                                                                <div class="col-12 ">
                                                                    <label>Qual motivo da rejeição?</label>
                                                                    {{-- Quais são os itens com problema? --}}
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox" name="problemas[]" value="justificativa" id="problema_justificativa">
                                                                        <label class="form-check-label" for="problema_justificativa">
                                                                            Justificativa
                                                                        </label>
                                                                    </div>
                                                    
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox" name="problemas[]" value="aprovador" id="problema_aprovador">
                                                                        <label class="form-check-label" for="problema_aprovador">
                                                                            Aprovador
                                                                        </label>
                                                                    </div>
                                                                    
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox" name="problemas[]" value="arquivo" id="problema_arquivo">
                                                                        <label class="form-check-label" for="problema_arquivo">
                                                                            Arquivo
                                                                        </label>
                                                                    </div>
                                                                    <span id="erro-problemas-{{ $reembolso->rem_id }}" class="text-danger d-none">Selecione pelo menos um motivo para rejeição.</span> 
                                                                </div>
                                                                <label for="rem_comentario">Comentário de rejeição do reembolso</label>
                                                                <div class="col-9">
                                                                    {{-- <input type="text" name="rem_comentario" id="rem_comentario" class="form-control"> --}}
                                                                    <textarea name="rem_comentario" id="rem_comentario" class="form-control" rows='5'></textarea>
    
                                                                </div>
                                                                <div class="col-3">
    
                                                                    <button type="submit" id="btn-enviar-{{ $reembolso->rem_id }}" class="btn btn-primary" disabled>Enviar</button>
                                                                </div>
                                                                 
                                                            </div>
                                                        </div>
                                                    </form>
                                                    <script>
                                                        document.addEventListener("DOMContentLoaded", function () {
                                                        document.querySelectorAll("[id^='form-desreembolso-']").forEach(form => {
                                                            let formId = form.id;
                                                            let reembolsoId = formId.replace("form-desreembolso-", ""); // Pegando o ID do reembolso
                                                            let checkboxes = document.querySelectorAll(`#${formId} input[name='problemas[]']`);
                                                            let botaoEnviar = document.querySelector(`#btn-enviar-${reembolsoId}`);
                                                            let erroMensagem = document.querySelector(`#erro-problemas-${reembolsoId}`);
            
                                                            function verificarCheckboxes() {
                                                                let algumMarcado = Array.from(checkboxes).some(checkbox => checkbox.checked);
                                                                if (algumMarcado) {
                                                                    botaoEnviar.removeAttribute("disabled"); // Habilita o botão
                                                                    erroMensagem.classList.add("d-none"); // Esconde a mensagem de erro
                                                                } else {
                                                                    botaoEnviar.setAttribute("disabled", "true"); // Desabilita o botão
                                                                    erroMensagem.classList.remove("d-none"); // Exibe a mensagem de erro
                                                                }
                                                            }
            
                                                            checkboxes.forEach(checkbox => {
                                                                checkbox.addEventListener("change", verificarCheckboxes);
                                                            });
            
                                                            form.addEventListener("submit", function (event) {
                                                                if (botaoEnviar.disabled) {
                                                                    event.preventDefault();
                                                                }
                                                            });
                                                        });
                                                    });
                                                </script>       
                                                    
                                                   
                                                <script>
                                                document.querySelectorAll("[id^='btn-devolver-']").forEach(botao => {
                                                botao.addEventListener("click", function() {
                                                let formId = this.getAttribute("data-form");
                                                document.getElementById(formId).hidden = false;
                                                });
                                                });
    
                                                </script>
                                                @elseif ($reembolso->rem_status == 1)
                                                <div class="text-center mb-2">
                                                    <hr>
                                                    <h5><strong>Reembolsado</strong></h5>
                                                </div>
                                                @elseif ($reembolso->rem_status == 2 )
                                            <div class="text-center mb-2">
                                                <form 
                                                            action="{{ route('financeiro.reembolso.update', $reembolso->rem_id) }}" method="POST"
                                                            >
                                                            @csrf
                                                            <button type="submit" class="btn btn-primary mr-3 ml-3 mt-3">Reembolsar</button>
                                                        </form>
                                            </div>
                                                @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
            
            @endforeach
           @if ($reembolsos->count() == 0)
                <div class="d-flex justify-content-center align-items-center" style="height: 60vh;">
                    <div class="text-center">
                        <h4>Não foi encontrado nenhum reembolso no momento.</h4>
                    </div>
                </div>
            @endif   
    </div>
    </div>
</div>

<script>
    function aplicaFiltroCards() {
        var input = document.getElementById("filtroCards");
        var filter = input.value.toUpperCase();
        var cardContainers = document.getElementById("containerCards").getElementsByClassName("col-3"); 
    
        for (let i = 0; i < cardContainers.length; i++) {
            let card = cardContainers[i];
            let title = card.querySelector(".card .container");
    
            if (title && title.innerText.toUpperCase().indexOf(filter) > -1) {
                // Se tem correspondência, mostrar:
                card.classList.remove('hidden', 'none'); // Remove as classes que escondem
            } else {
                if (!card.classList.contains('hidden')) { 
                    // Só aplica se ainda não estiver escondendo
                    card.classList.add('hidden'); // Começa a animação
                    setTimeout(() => {
                        card.classList.add('none'); // Depois da animação, tira do layout
                    }, 300); // tempo igual ao transition: 0.3s (300ms)
                }
            }
        }
    }
</script>
@include('components.footer')