@php
$titulo = "Despesas - SW";
@endphp


@include('components.head')
<style>
    #fotos {
        display: none;
        /* Oculta o input de arquivo padrão */
    }

    .btn {
        cursor: pointer;
        padding: 10px 20px;
        border-radius: 5px;
        display: inline-block;
        color: white;
    }

    #labelFotos {
        background-color: #4CAF50;
        /* Cor verde para o botão de fotos */
    }

    #labelFotos:hover {
        background-color: #45a049;
    }

    .btn:hover {
        background-color: #769ea2;
        /* Cor de fundo padrão para outros botões */
    }.painel{
    /* border-color: black;  */
    border-style: solid;
    border-width: 2px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); 
    }    
    .painel:hover { 
        transform: scale(1.05);
        z-index: 1;
        transition:   0.3s ease, box-shadow 0.3s ease; 
        /* transition: all 0.5s ease; */
    } 
    .alert-light { 
        transition:   0.3s ease, box-shadow 0.3s ease; 
        /* Suavização da transição */
    } 

    .alert-light:hover {
         
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          /* Sombra para o efeito de elevação */
    } 
    .form-control{
        height: 50px;
    }

/* Desativar estilos quando a modal estiver aberta */
/* body.modal-opened .btn:hover,
body.modal-opened .painel:hover,
body.modal-opened .alert-light:hover {
    background-color: inherit;
    transform: none;
    z-index: 0;
    box-shadow: none;
    transition: none !important;
}
.modal {
    z-index: 1055 !important;
} */
/* .modal-open .background-elements {
    pointer-events: none;
} */
/* Desativar o efeito quando a modal estiver aberta */
.modal-open .painel:hover {
    transform: none !important;
    z-index: auto !important;
}

/* .modal-backdrop {
    z-index: 1050 !important;
} */
 
.modal-open .painel:hover {
    transform: none !important;
    z-index: auto !important;
}


</style>
<style>
    /* Modal ajustável */
    .modal-dialog {
        position: relative;
        max-width: 600px; /* Tamanho inicial */
        transition: max-width 0.3s ease-in-out;
    }
    
    /* Painel expansível fixo na direita */
    /* Painel expansível inicialmente escondido */
.expansivel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: white;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    padding: 20px;
    transition: width 0.3s ease-in-out;
    display: none; /* Oculta inicialmente */
}

/* Quando expandir, torna visível */
.modal-content.expande .expansivel {
    width: 250px;
    display: block; /* Torna visível */
}

    
    /* Aumenta o tamanho da modal */
    .modal-content.expande {
        max-width: 850px;
    }
    </style>
    <style>
    #btnAceitarContainer {
        position: absolute;
        top: 10px; /* Ajuste a posição para o topo */
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: none; /* Será exibido ao clicar no "Expandir Aceitar" */
    }
    
    #btnAceitarContainer button {
        width: 100%; /* Faz o botão ocupar toda a largura */
        margin-bottom: 10px; /* Espaço entre os botões */
    }
</style>     

</style>
<div class="container">
    <p>Abaixo estão listadas todas as despesas avulsas lançadas.</p>
     <div class="mb-3">

         <ul class="nav nav-tabs" id="reembolsoTabs" role="tablist">
             <li class="nav-item" role="presentation">
                 <button class="nav-link active" id="todos-tab" data-bs-toggle="tab" data-bs-target="#todos" type="button" role="tab" onclick="window.location.href='{{route('financeiro.despesas.index')}}'">
                     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.despesas.index_corrigidas')}}'">
                        Corrigidos
                    </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.despesas.index_retornadas')}}'">
                        Retornados
                    </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.despesas.index_validas')}}'">
                        Válidos
                    </button>
                </li>
            </ul>
        </div>
    {{-- @if ($despesa->des_status == 0) --}}
    {{-- <hr style="color: #333; background-color: #333; height: 2px; border: none;"> --}}
    <h5 class="text-start">Ações</h5>
    <div class="form-group">
        <form action="{{ route('financeiro.despesas.index') }}" method="GET" class="mb-3">
            <!-- Campo de pesquisa -->
            <div class="row mb-3">
                <div class="col-lg-3">
                    <label for="search">Pesquisa por texto</label>
                    <input
                        type="text"
                        name="search"
                        class="form-control"
                        placeholder="Pesquisar por recurso ou por tipo de despesa"
                        value="{{ request('search') }}">
                </div>
                
                <div class="col-lg-3">
                    <label for="start_date">Data de início</label>
                    <input
                        type="date"
                        name="start_date"
                        class="form-control"
                        value="{{ request('start_date') }}">
                </div>
                
                <div class="col-lg-3">
                    <label for="end_date">Até a data</label>
                    <input
                        type="date"
                        name="end_date"
                        class="form-control"
                        value="{{ request('end_date') }}">
                </div>
                
                <!-- Botões -->
                <div class="col-lg-1 d-flex align-items-end">
                    <div class="">
                        {{-- @if(request('search') || request('start_date') || request('end_date')) --}}
                        <a href="{{ route('financeiro.despesas.index') }}" class="btn btn-danger">Limpar</a>
                        {{-- @endif --}}
                    </div>
                </div>
                
                <div class="col-lg-1 d-flex align-items-end">
                    <div class="">
                        <button type="submit" class="btn btn-primary">Pesquisar</button>
                    </div>
                </div>
                


            </div>
        </form>
        
            <button type="button" class="col-12 alert alert-light text-dark text-left text-primary shadow painel" data-toggle="modal" data-target="#despesaModal">
            <div><strong>Adicionar despesa</strong><i style="margin-left: 44%;" class="fas fa-plus text-success"></i></div>
            </button>
            
            <hr>
           

      
         
        @if (session('success'))
        <div aria-live="polite" aria-atomic="true" class="position-relative"  >
            <div class="toast-container position-fixed top-0 start-50 translate-middle-x mt-5 p-5" style="z-index: 11">
                <div id="successToast" class="toast hide show bg-success text-white" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <strong class="me-auto">Sucesso</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fechar"></button>
                    </div>
                    <div class="toast-body">
                        {{ session('success') }}
                    </div>
                </div>
            </div>
        </div>
        
        {{-- Script para ativar o Toast --}}
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                let successToast = new bootstrap.Toast(document.getElementById('successToast'), {
                        delay: 5000 // 5 segundos antes de fechar sozinho
                    });
                    successToast.show();
            });
        </script>
        @endif
    </div>
    <div class="modal fade" id="despesaModal" tabindex="-1" role="dialog" aria-labelledby="despesaModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="despesaModalLabel">Cadastro de Despesa Avulsa</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route ('despesas.adicionar')}}" method="post" id="formDespesa" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group mb-2">
                            <label for="des_recurso">Forma de pagamento:</label>
                            <select class="custom-select" id="des_recurso" name="des_recurso" onchange="checkRecurso(this)" required>
                                <option value="">Selecione o recurso</option>
                                <option value="cartao">Cartão de crédito</option>
                                <option value="Faturado">Faturado</option>
                                <option value="Recurso próprio">Recurso próprio</option>
                                <option value="custom">Outro (especifique)</option>
                            </select>
                        
                            <!-- Select para os cartões, inicialmente oculto -->
                            <div id="cartaoContainer" style="display: none;" class="mt-2">
                                <label for="selected_cartao">Cartão utilizado:</label>
                                <select class="custom-select" id="selected_cartao" name="selected_cartao">
                                    <option value="">Selecione um cartão</option>
                                    @foreach ($cartoes as $cartao)
                                        <option value="{{ $cartao->car_id }}">
                                            {{ $cartao->car_dono }} - {{ $cartao->car_numero }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        
                            <!-- Input para customização, inicialmente oculto -->
                            <input 
                                class="form-control mt-2" 
                                type="text" 
                                id="customCartao" 
                                name="custom_via_cartao" 
                                placeholder="Digite o recurso utilizado" 
                                style="display: none;" 
                            />
                        </div>
                        
                        
                       <script>
                        function checkRecurso(select) {
                        const cartaoContainer = document.getElementById('cartaoContainer');
                        const customCartao = document.getElementById('customCartao');

                        // Esconde ambos os campos inicialmente
                        cartaoContainer.style.display = 'none';
                        customCartao.style.display = 'none';

                        if (select.value === 'cartao') {
                            cartaoContainer.style.display = 'block'; // Exibe o select de cartões
                        } else if (select.value === 'custom') {
                            customCartao.style.display = 'block'; // Exibe o campo para customização
                        }
                        }
 

                       </script>
                        {{-- <div class="form-group mb-2">
                            <label for="des_recurso">Forma de pagamento:</label>
                            <select class="custom-select" id="des_recurso" name="des_recurso" onchange="checkCustomCartao(this)" required>
                                <option value="">Selecione o cartão</option>
                                @foreach ($cartoes as $cartao) : ?>
                                <option value=" {{ $cartao->car_numero }}"> {{$cartao->car_numero}} - {{ $cartao->car_dono}} </option>
                                @endforeach
                                <option value="Faturado">Faturado</option>
                                <option value="Recurso próprio">Recurso próprio</option>
                                <option value="custom">Outro (especifique)</option>
                            </select>

                            <input class="form-control" type="text" id="customCartao" name="custom_via_cartao" placeholder="Digite o recurso utilizado" style="display:none;" onblur="addCustomCartao(this)" />
                        </div> --}}
                        <div class="form-group mb-2">
                            <label for="opcao">Tipo de despesa:</label>
                            <select class="form-control custom-select" id="des_tipo" name="des_tipo" onchange="mostrarCampos()">
                                <option value="Café da Manhã">Café da Manhã</option>
                                <option value="Almoço">Almoço</option>
                                <option value="Café da Tarde">Café da Tarde</option>
                                <option value="Jantar">Jantar</option>
                                <option value="Condução">Condução (Uber/Taxi/Onibus)</option>
                                <option value="Combustível">Combustível</option>
                                <option value="Estacionamento">Estacionamento</option>
                                <option value="Hospedagem">Hospedagem</option>
                                <option value="Pedágio">Pedágio</option>
                                <option value="Compra de material">Compra de material</option>
                                <option value="Outro">Outro</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="des_cnpj">CNPJ:</label>
                            <input class="form-control" type="text" id="des_cnpj" name="des_cnpj" inputmode="numeric" onkeyup="formatarCNPJ(this)" maxlength="16" placeholder="XX.XXX.XXX/XXXX-XX" required>
                            <small id="erro-cnpj" class="text-danger"></small>

                        </div>
                        {{-- <div class="form-group col-md-4 col-sm-12 d-inline">
                            <label for="via_cnpj">CNPJ:</label>
                            <input class="form-control" type="text" id="via_cnpj" name="via_cnpj" inputmode="numeric" onkeyup="formatarCNPJ(this)" maxlength="16" placeholder="XX.XXX.XXX/XXXX-XX" required>
                            <small id="erro-cnpj" class="text-danger"></small>
                        </div> --}}
            
                        <div class="form-group">
                            <label for="des_valor">Valor:</label>
                            <input class="form-control" name="des_valor" inputmode="numeric" onkeyup="formatarMoeda(this)" placeholder="R$ 0,00" autocomplete="off" required>
                        </div>

                        <div class="form-group">
                            <label for="des_autorizado_por">Autorizado por:</label>
                            <input class="form-control" name="des_autorizado_por" type="text" required>
                        </div>
                        <div class="form-group">
                            <label for="des_justificativa">Justificativa:</label>
                            <input class="form-control" name="des_justificativa" type="text">
                        </div>


                        {{-- <div class="form-group">
                        <label for="des_imagem_arquivo">Fotos:</label>
                        <button>upload de foto
                        <input id="des_imagem_arquivo" type="file" name="des_imagem_arquivo" class="form-control-file" onchange="previewFile()">
                        </button>
                    </div> --}}
                        <div class="form-group">
                            <label for="des_imagem_arquivo">Foto/PDF do comprovante:</label>
                            <div class="custom-file-button">
                                <button type="button" class="btn btn-primary">
                                    Escolher arquivo
                                </button>
                                <input id="des_imagem_arquivo" type="file" name="des_imagem_arquivo" class="form-control-file" onchange="previewFile()" style="display: none;"  required
                                oninvalid="showWarning()"
                                oninput="removeWarning()">
                            </div>
                            <small id="fileWarning" style="color: red; display: none;">Este campo é obrigatório.</small>

                        </div>
                        <script>
                            function showWarning() {
                            const warning = document.getElementById('fileWarning');
                            warning.style.display = 'block'; // Mostra o aviso
                        }

                        function removeWarning() {
                            const warning = document.getElementById('fileWarning');
                            warning.style.display = 'none'; // Remove o aviso quando o campo for preenchido
                        }

                        </script>

                        <div id="fotoCapturada" style="display:none;">
                            <h4>Imagem carregada:</h4>
                            <img id="fotoMiniatura" src="" alt="Foto capturada" style="width: 100%; max-width: 320px;height:100%;height:320px">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                    <button type="submit" form="formDespesa" id="btnEnviar" class="btn btn-success">Salvar Despesa</button>
                </div>
            </div>
        </div>
    </div>
    
   
    @if ($despesas->isEmpty())
        <div class="alert alert-secondary">Sem despesas cadastradas.</div>
    @else
    {{-- <div class="row"> --}}
        @foreach ($despesas as $despesa)
        <div class="card painel shadow mb-1 {{$despesa->des_rejeitado == 1 ? ' alert-danger' : ''}} {{$despesa->des_rejeitado == 2 ? 'alert-warning' : ''}}" title="{{$despesa->des_rejeitado == 1 ? 'Despesa retornada' : ($despesa->des_rejeitado == 2 ? 'Despesa editada' : '') }}">
            @if($despesa->des_rejeitado == 1)
            <div class="position-absolute start-0 translate-middle mb-5" >
            
            
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-exclamation-circle-fill" viewBox="0 0 16 16">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/>
                </svg>
            </div>  
            @endif
                    <div class="card-header">
                        {{-- <small>Colaborador: </small><strong>{{ Str::limit($despesa->colaborador->pessoa->pes_nome_completo, 16) }}</strong><br> --}}
                        <small>Colaborador: </small><strong>{{ $despesa->colaborador->pessoa->pes_nome_completo }}</strong><br>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 col-sm-12">
                                
                                <small>Tipo de despesa:</small>
                                <strong>{{ $despesa['des_tipo'] }}</strong><br>
                                <small>CNPJ:</small>
                                <strong>{{ $despesa['des_cnpj'] }}</strong>
                            </div>
                            <div class="col-md-3 col-sm-12">
                                <small>Recurso:</small>
                                <strong>{{ $despesa['des_recurso'] }}</strong><br>
                                @if($despesa->des_rejeitado > 0)
                                <small>Status:</small>
                                @endif
                                <strong>{{ $despesa['des_rejeitado'] == 0 ? '' : ($despesa->des_rejeitado == 1 ? 'Retornada' : 'Corrigida') }}</strong>
                            </div>
                            <div class="col-md-3 col-sm-12">
                                <small>Data:</small>
                                <strong>{{ \Carbon\Carbon::parse($despesa['des_data'])->format('d/m/Y') }}</strong><br>
                                <small>Valor:</small>
                                <strong class="ml-1">R$ {{ $despesa['des_valor'] ?? 'Gastos ainda não lançados' }}</strong>
                            </div>
                            <div class="col-3 d-flex align-items-center">
                                <button  type="button"  class="des-ver-imagem btn btn-primary" data-bs-toggle="modal" data-bs-target="#imagemDespesaModal{{ $despesa->des_id }}" data-des-id="{{$despesa->des_id}}">
                                  Visualizar
                                </button>
                                <a href="{{ asset('storage/' . $despesa['des_imagem']) }}" download class="btn btn-secondary ml-2">Download</a>
                            </div>
                        </div>
                    </div>
                </div>

                  
<div class="modal fade" id="imagemDespesaModal{{$despesa->des_id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imagemDespesaModalLabel">Detalhes da Despesa</h5>
                {{-- <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button> --}}
            </div>
            
            
            <div class="modal-body">
                <p><strong>Colaborador:</strong> <span>{{ $despesa->colaborador->pessoa->pes_nome_completo }}</span></p>
                <p><strong>Valor da despesa:</strong> <span>{{ $despesa['des_valor'] }}</span></p>
                <p><strong>Tipo de despesa:</strong> <span>{{ $despesa['des_tipo'] }}</span></p>
                <p><strong>CNPJ:</strong> <span>{{ $despesa['des_cnpj'] }}</span></p>
                <p><strong>Recurso:</strong> <span>{{ $despesa['des_recurso'] }}</span></p>
                <p><strong>Data:</strong> <span>{{ \Carbon\Carbon::parse($despesa['des_data'])->format('d/m/Y') }}</span></p>
                <p><strong>Descrição:</strong> <span>{{ $despesa['des_justificativa'] }}</span></p>
                <p><strong>Autorizado por:</strong> <span>{{ $despesa['des_autorizado_por'] }}</span></p>
                            <div id="visualizador">
                                <img id="modalImagem" class="img-fluid" alt="Imagem da Despesa" style="display: none;" />
                                <iframe id="modalPdf" class="embed-responsive-item" frameborder="0" style="width: 100%; height: 400px; display: none;"></iframe>
                            </div>
                            
            </div>
            
                <div class="modal-footer justify-content-center">
                    @if($despesa->des_rejeitado == 2)
                    {{-- <button data-toggle="modal" data-target="#aceitarEdicaoModal"  class="btn btn-success">Aceitar correção</button> --}}
                    <button id="btnExpandirAceitar-{{$despesa->des_id}}" class="btn btn-success">Opções</button>
                    <div id="btnAceitarContainer-{{$despesa->des_id}}" style="display: none; position: absolute; left: 50%; transform: translateX(-50%) translateY(-110%); margin-bottom: 5px;">
                        <!-- Novo botão "Tem certeza?" -->
                        <p style="color: #dc3545; font-weight: bold; margin-bottom: 5px;">
                            <i class="fas fa-exclamation-triangle"></i> Tem certeza?
                        </p>
                        
                        <!-- Formulário de Aceitar correção -->
                        <form method="POST" action="{{ route('financeiro.despesas.aceitar', $despesa->des_id) }}">
                            @csrf
                            <button type="submit" class="btn btn-success">Aceitar correção</button>
                        </form>
                    </div>
                    
                    @endif
                    @if($despesa->des_rejeitado != 1)
                    <button id="btnExpandir" class="btn btn-warning">Devolver Despesa</button>
                    @endif
                    <a id="modalDownload" href="{{ asset('storage/' . $despesa['des_imagem']) }}" class="btn btn-secondary" download>Download</a>
                
                </div>
                            
               
             
                
                         
            <div class="expansivel">
                <h5>Devolver Despesa</h5>
                <p>Motivos da devolução</p>
                <form method="POST" action="{{ route('financeiro.despesas.devolver', $despesa->des_id) }}">
                        @csrf
                        <div class="form-check">
                            <input class="form-check-input check-todos" type="checkbox" data-id="{{$despesa->des_id}}" onchange="selecionarTodos()">
                            <label class="form-check-label" for="todos">Todos</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input selecionar" type="checkbox" name="justificativa" value="1">
                            <label class="form-check-label">Justificativa</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input selecionar" type="checkbox" name="imagem" value="1">
                            <label class="form-check-label">Imagem</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input selecionar" type="checkbox" name="autor" value="1">
                            <label class="form-check-label">Autorizado por</label>
                        </div>
                    <textarea class="form-control" placeholder="Motivo da devolução" name="comentario" rows='6' required></textarea>
                    <button class="btn btn-success mt-2" type="submit">Confirmar Devolução</button>
                </form>
                {{-- <script>
                function selecionarTodos() {
                    let checkTodos = document.getElementById("todos");
                    let checkboxes = document.querySelectorAll(".selecionar");
            
                    checkboxes.forEach(checkbox => {
                        checkbox.checked = checkTodos.checked;
                    });
                }
            </script> --}}
            <script>
                document.addEventListener("DOMContentLoaded", function () {
                    document.querySelectorAll(".check-todos").forEach(function (checkTodos) {
                        checkTodos.addEventListener("change", function () {
                            let form = this.closest("form"); // Obtém o formulário correto
                            let checkboxes = form.querySelectorAll(".selecionar"); // Busca checkboxes dentro do formulário
            
                            checkboxes.forEach(checkbox => {
                                checkbox.checked = this.checked;
                            });
                        });
                    });
                });
            </script>
            
            </div>
        </div>
    </div>
</div> 



            @endforeach
        {{-- </div> --}}
    @endif
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll("[id^='btnExpandirAceitar-']").forEach(botao => {
                botao.addEventListener('click', function() {
                    let des_id = this.id.split('-')[1]; // Pega o ID correto
                    let container = document.getElementById(`btnAceitarContainer-${des_id}`);
                    if (container) {
                        container.style.display = (container.style.display === "none" || container.style.display === "") ? "block" : "none";
                    }
                });
            });
        });
    </script>
    
 <script>
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".btn-warning").forEach(function (btnExpandir) {
            btnExpandir.addEventListener("click", function () {
                // Encontrar a modal correspondente ao botão clicado
                let modalContent = this.closest(".modal-content");

                // Alternar a classe de expansão
                modalContent.classList.toggle("expande");
            });
        });
    });
</script>    



    @if ($despesas->count())
    <nav class="mt-3 d-flex justify-content-end" aria-label="Navegação de página">
        <ul class="pagination">
            {{-- Botão "Anterior" --}}
            <li class="page-item {{ $despesas->onFirstPage() ? 'disabled' : '' }}">
                <a class="page-link" href="{{ $despesas->previousPageUrl() }}" aria-label="Anterior">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
    
            {{-- Números das páginas --}}
            @for ($i = 1; $i <= $despesas->lastPage(); $i++)
                <li class="page-item {{ $i == $despesas->currentPage() ? 'active' : '' }}">
                    <a class="page-link" href="{{ $despesas->url($i) }}">{{ $i }}</a>
                </li>
            @endfor
    
            {{-- Botão "Próximo" --}}
            <li class="page-item {{ $despesas->currentPage() == $despesas->lastPage() ? 'disabled' : '' }}">
                <a class="page-link" href="{{ $despesas->nextPageUrl()}}" aria-label="Próximo">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    
        @endif
</div>
<div class="modal fade" id="modalAguarde" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content align-items-center text-center p-4">
      <strong>Processando sua despesa...</strong>
      <strong class="text-danger">Não atualize ou feche a página</strong>
      <div class="spinner-border text-primary mt-3" role="status"></div>
    </div>
  </div>
</div>
<script> 
document.getElementById('formDespesa').addEventListener('submit', function(e) {
  // Fecha a modal de cadastro, se estiver aberta
  $('#despesaModal').modal('hide');

  // Aguarda 300ms para garantir que a modal foi fechada, então mostra o loading
  setTimeout(() => {
    $('#modalAguarde').modal('show');
  }, 300);
});
</script>

            {{-- <script>
document.addEventListener('DOMContentLoaded', function () {
    const baseUrl = "{{ route('despesa_avulsa.imagem', ':des_id') }}";
    // const buttons = document.querySelectorAll('#des-ver-imagem');
    const buttons = document.querySelectorAll('.des-ver-imagem');
    const desId = document.getElementById('data-des-id');
    const modalElement = document.getElementById('imagemDespesaModal${desId}');
    const modal = new bootstrap.Modal(modalElement);

    const modalImagem = document.getElementById('modalImagem');
    const modalDescricao = document.getElementById('modalDescricao');
    const modalRecurso = document.getElementById('modalRecurso');
    const modalValor = document.getElementById('modalValor');
    const modalTipo = document.getElementById('modalTipo');
    const modalCartao = document.getElementById('modalCartao');
    const modalCnpj = document.getElementById('modalCnpj');
    const modalData = document.getElementById('modalData');
    const modalDownload = document.getElementById('modalDownload');

    buttons.forEach(button => {
        button.addEventListener('click', function () {
            const despesaId = this.getAttribute('data-id');
            const url = baseUrl.replace(':des_id', despesaId);

            console.log('Carregando dados da despesa:', despesaId); // Log para depuração

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        modalImagem.src = data.foto || '';
                        modalDescricao.textContent = data.descricao || 'Sem descrição disponível';
                        modalValor.textContent = `R$ ${data.valor || 'N/A'}`;
                        modalTipo.textContent = data.tipo || 'N/A';
                        modalCnpj.textContent = data.cnpj || 'N/A';
                        
                        if (data.cartao) {
                            modalCartao.textContent = `${data.cartao.dono} - ${data.cartao.numero}`;
                            modalRecurso.textContent = 'Cartão de crédito';
                        } else {
                            modalCartao.textContent = 'Sem cartão associado';
                            modalRecurso.textContent = data.recurso || 'N/A';
                        }
                        // modalCartao.textContent = data.cartao || 'N/A';
                        modalData.textContent = data.data || 'N/A';
                        modalDownload.href = data.foto || '#';
                        modalDownload.download = data.foto
                            ? `${despesaId}_codigo${despesaId}_${data.tipo}_${data.valor}.${data.extensao}`
                            : '';

                        console.log('Dados carregados, exibindo modal...');
                       
                        if (data.extensao === 'pdf') {
                            modalPdf.style.display = 'block';
                            modalPdf.src = data.foto;
                            modalImagem.style.display = 'none';
                        } else {
                            modalImagem.style.display = 'block';
                            modalImagem.src = data.foto;
                            modalPdf.style.display = 'none';
                        } 
                        modal.show();
                    } else {
                        alert(data.message || 'Erro ao carregar os detalhes da despesa.');
                    }
                })
                .catch(error => {
                    console.error('Erro ao carregar a despesa:', error);
                });
        });
    });
});

                </script> --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
    const baseUrl = "{{ route('despesa_avulsa.imagem', ':des_id') }}";

    // Seleciona todos os botões pela classe correta
    const buttons = document.querySelectorAll('.des-ver-imagem');

    buttons.forEach(button => {
        button.addEventListener('click', function () {
            const despesaId = this.getAttribute('data-des-id'); // Obtém o ID da despesa
            const modalElement = document.getElementById(`imagemDespesaModal${despesaId}`); // Obtém o modal correto
            
            if (!modalElement) {
                console.error('Modal não encontrado para despesa:', despesaId);
                return;
            }

            const modal = new bootstrap.Modal(modalElement);

            // Seleciona os elementos dentro do modal específico
            const modalImagem = modalElement.querySelector('#modalImagem');
            const modalPdf = modalElement.querySelector('#modalPdf');
            const modalDownload = modalElement.querySelector('#modalDownload');

            // Monta a URL para buscar os dados
            const url = baseUrl.replace(':des_id', despesaId);

            console.log('Carregando dados da despesa:', despesaId);

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        modalImagem.src = data.foto || '';
                        modalDownload.href = data.foto || '#';

                        // Define se exibe imagem ou PDF
                        if (data.extensao === 'pdf') {
                            modalPdf.style.display = 'block';
                            modalPdf.src = data.foto;
                            modalImagem.style.display = 'none';
                        } else {
                            modalImagem.style.display = 'block';
                            modalImagem.src = data.foto;
                            modalPdf.style.display = 'none';
                        }

                        console.log('Dados carregados, exibindo modal...');
                        modal.show();
                    } else {
                        alert(data.message || 'Erro ao carregar os detalhes da despesa.');
                    }
                })
                .catch(error => {
                    console.error('Erro ao carregar a despesa:', error);
                });
        });
    });
});

</script>
<script>
    // Associa o clique no botão ao input de arquivo
    document.querySelector('.custom-file-button button').addEventListener('click', function() {
        document.getElementById('des_imagem_arquivo').click();
    });
</script>
<script>
    function mostrarCampos() {
        var opcao = document.getElementById('opcao');
        var camposExtras = document.getElementById('camposExtras');

        if (opcao.value === 'sim') {
            camposExtras.classList.remove('hidden');
        } else {
            camposExtras.classList.add('hidden');
        }
    }

    function previewFile() {
        const file = document.getElementById('des_imagem_arquivo').files[0];
        const reader = new FileReader();

        reader.onloadend = function() {
            const fotoMiniatura = document.getElementById('fotoMiniatura');
            fotoMiniatura.src = reader.result;
            document.getElementById('fotoCapturada').style.display = 'block';
        };

        if (file) {
            reader.readAsDataURL(file);
        }
    }

    // function formatarCNPJ(campo) {
    //     let valor = campo.value;
    //     valor = valor.replace(/\D/g, "");

    //     if (valor.length <= 2) {
    //         valor = valor.replace(/(\d{2})/, "$1");
    //     } else if (valor.length <= 5) {
    //         valor = valor.replace(/(\d{2})(\d{3})/, "$1.$2");
    //     } else if (valor.length <= 8) {
    //         valor = valor.replace(/(\d{2})(\d{3})(\d{3})/, "$1.$2.$3");
    //     } else if (valor.length <= 12) {
    //         valor = valor.replace(/(\d{2})(\d{3})(\d{3})(\d{4})/, "$1.$2.$3/$4");
    //     } else {
    //         valor = valor.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1.$2.$3/$4-$5");
    //     }
    //     campo.value = valor;
    // }

    function formatarMoeda(campo) {
        let valor = campo.value;
        valor = valor.replace(/\D/g, "");
        valor = (valor / 100).toFixed(2) + "";
        valor = valor.replace(".", ",");
        campo.value = "" + valor;
    }

    function checkCustomCartao(select) {
        var customOption = select.options[select.selectedIndex].value;
        if (customOption === 'custom') {
            select.style.display = 'none';
            document.getElementById('customCartao').style.display = '';
            document.getElementById('customCartao').focus();
        }
    }

    function addCustomCartao(input) {
        var newValue = input.value.trim();
        if (newValue) {
            var select = document.getElementById('via_cartao');
            var newOption = new Option(newValue, newValue);
            select.options.add(newOption, select.options.length - 1);
            select.value = newValue;
            input.style.display = 'none';
            select.style.display = '';
        }
    }
</script>
<script>  
function formatarCNPJ(campo) {
    let valor = campo.value;
    valor = valor.replace(/\D/g, "");

    if (valor.length <= 2) {
        valor = valor.replace(/(\d{2})/, "$1");
    } else if (valor.length <= 5) {
        valor = valor.replace(/(\d{2})(\d{3})/, "$1.$2");
    } else if (valor.length <= 8) {
        valor = valor.replace(/(\d{2})(\d{3})(\d{3})/, "$1.$2.$3");
    } else if (valor.length <= 12) {
        valor = valor.replace(/(\d{2})(\d{3})(\d{3})(\d{4})/, "$1.$2.$3/$4");
    } else {
        valor = valor.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1.$2.$3/$4-$5");
    }
    campo.value = valor;
}

 
function validarCNPJ(cnpj) {
cnpj = cnpj.replace(/\D/g, ""); // Remove caracteres não numéricos

if (cnpj.length !== 14) return false;

// Verifica se todos os dígitos são iguais (ex.: 11111111111111)
if (/^(\d)\1+$/.test(cnpj)) return false;

// Validação do primeiro dígito verificador
let soma = 0;
let pesos = [5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2];
for (let i = 0; i < 12; i++) {
    soma += parseInt(cnpj[i]) * pesos[i];
}
let resto = soma % 11;
let digito1 = resto < 2 ? 0 : 11 - resto;

if (parseInt(cnpj[12]) !== digito1) return false;

// Validação do segundo dígito verificador
soma = 0;
pesos.unshift(6); // Adiciona o peso 6 para o segundo dígito
for (let i = 0; i < 13; i++) {
    soma += parseInt(cnpj[i]) * pesos[i];
}
resto = soma % 11;
let digito2 = resto < 2 ? 0 : 11 - resto;

return parseInt(cnpj[13]) === digito2;
}

// Evento de validação no campo
document.getElementById('des_cnpj').addEventListener('blur', function () {
const cnpj = this.value;
const erroCNPJ = document.getElementById('erro-cnpj');
const botaoSubmit = document.getElementById('botao-submit');

if (!validarCNPJ(cnpj)) {
    this.classList.add('is-invalid');
    this.classList.remove('is-valid');
    erroCNPJ.textContent = "CNPJ inválido!";
    botaoSubmit.disabled = true;
} else {
    this.classList.remove('is-invalid');
    this.classList.add('is-valid');
    erroCNPJ.textContent = "";
    botaoSubmit.disabled = false;
}
});
</script>
@include('components.footer')