@php

$titulo = 'Reembolsos Avulsos 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.avulsosreembolsado') }}" 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.avulsosreembolsado')}}" 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.avulsosreembolsado')  }}" 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.avulsosreembolsado')  }}" 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.avulsos')}}'">
                    Todos
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link " id="nao-reembolsados-tab" data-bs-toggle="tab" data-bs-target="#nao-reembolsados" type="button" role="tab" onclick="window.location.href='{{route('financeiro.reembolso.avulsosnaoreembolsado')}}'">
                    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.avulsosaprovado')}}'">
                    Aprovados
                </button>
            </li> --}}
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="reembolsados-tab" data-bs-toggle="tab" data-bs-target="#reembolsados" type="button" role="tab" onclick="window.location.href='{{route('financeiro.reembolso.avulsosreembolsado')}}'">
                    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.avulsosreembolsado') }}" 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 -->
            @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_justificado == 2 || $reembolso->rem_aprovado_por == 2) ? 'bg-warning' : '' }}">

                        <div class="container mb-3">
                            <div class="row mt-3 ">
                                <div class="{{($reembolso->rem_rejeitado == 1 ? 'text-white' : '')}}">
                                <div class="col-12">
                                    <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 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" 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">
                                                {{-- <p>des_id: <strong>{{$reembolso->despesa->des_id}} </strong> </p> --}}
                                                <p>Valor: <strong>R$ {{ $reembolso->despesa->des_valor }} </strong></p>
                                                <p>Tipo: <strong>{{ $reembolso->despesa->des_tipo  }}</strong></p>
                                                <p>CNPJ: <strong>{{ $reembolso->despesa->des_cnpj }}</strong></p>
                                                {{-- {{ $reembolso->despesa_id ? $reembolso->despesa->des_data : 'Despesa não encontrada' }} --}}
                                                
                                                <p>Data do pedido: <strong>{{ \Carbon\Carbon::parse($reembolso->despesa->des_data)->format('d/m/Y') }}</strong></p>
                                                <p>Data do reembolso: <strong>{{ \Carbon\Carbon::parse($reembolso->rem_horareembolso)->format('d/m/Y') }}</strong></p>
                                                {{-- {{ \Carbon\Carbon::parse($suaData)->format('d/m/Y')}} --}}
                                                <p>Justificativa: <strong>{{ $reembolso->despesa->des_justificativa  }}</strong></p>
                                                <p>Cupom fiscal: 
                                                    <a href="{{ asset('storage/' . $reembolso->despesa->des_imagem ?? 'images/sample_image.jpg') }}" target="_blank">Visualizar</a>
                                                </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.update', $reembolso->rem_id) }}" method="POST"
                                                      >
                                                      @csrf
                                                      <button type="submit" class="btn btn-primary mr-3 ml-3 mt-3">Reembolsar</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' required></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>
                                                @endif
                                                
                                         
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                
            @endforeach
    </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')