@php

$titulo = 'Reembolsos Viagens 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.viagemreembolsado') }}" 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.viagemreembolsado')}}" 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.viagemreembolsado') }}" 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.viagemreembolsado') }}" 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 " 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 active" 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.viagemreembolsado') }}" 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.viagemreembolsado', ['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.viagemreembolsado', ['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" >
                        <div class="container mb-3">
                            <div class="row mt-3">
                                <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">
                                        {{ $reembolso->rem_status == 0 ? 'Não reembolsado' : 'Reembolsado' }}
                                    </strong>
                                </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">
                                            @if( $reembolso->des_id != null || $reembolso->des_id != 0 )
                                                <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="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                                                    <form 
                                                    action="{{ route('financeiro.reembolso.update', $reembolso->rem_id) }}" method="POST"
                                                    >
                                                    @csrf
                                                    <button type="submit" class="btn btn-primary">Reembolsar</button>
                                                </form>
                                            </div>
                                            @elseif ($reembolso->rem_status == 1)
                                                <div class="text-center mb-2">
                                                    <hr>
                                                    <h5><strong>Reembolsado</strong></h5>
                                                </div>
                                                @endif
                                                @else
                                                <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>via_des_id: <strong>{{$reembolso->viaDespesa->via_des_id}} </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="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                                                <form 
                                                action="{{ route('financeiro.reembolso.update', $reembolso->rem_id) }}" method="POST"
                                                >
                                                    @csrf
                                                    <button type="submit" class="btn btn-primary">Reembolsar</button>
                                                </form>
                                            </div>
                                        @elseif ($reembolso->rem_status == 1)
                                            <div class="text-center mb-2">
                                                <hr>
                                                <h5><strong>Reembolsado</strong></h5>
                                            </div>
                                            @endif
                                            @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')