@php
$titulo = "Despesas"
@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.1);
        z-index: 1;
        transition: all 0.5s ease;
    } 
    .alert-light { 
        transition: background-color 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;
}
 
#modalAguarde .modal-content {
    background-color: #fff;
    border-radius: 8px;
}
 



</style>
{{-- <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS Bundle (inclui Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --}}

<div class="container">
    @if ($errors->has('des_imagem_arquivo'))
    <div class="alert alert-danger">
        {{ $errors->first('des_imagem_arquivo') }}
    </div>
    @endif

    <h5>Minhas despesas lançadas</h5>
    {{-- @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('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('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>
        </div>
        
        @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
    <hr>
    {{-- @endif --}}
    @if($temRejeitado->count() > 0 )
        <h5>Despesas recusadas</h5>
    
    @endif
    @foreach ($temRejeitado as $despesa)
    
    <div class="card card-alert painel alert alert-danger">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-12 align-items-center">
                    <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 align-items-center">
                    <small>Recurso: </small>
                    <strong> {{ $despesa['des_recurso'] }}</strong>
                </div>
                <div class="col-md-3 col-sm-12 align-items-center">
                    <small>Data:</small>
                    <strong>{{ \Carbon\Carbon::parse($despesa['des_data'])->format('d/m/Y') }}</strong>
                    
                    <br>
                    <small>Valor: </small>
                    @if (is_null($despesa['des_valor']))
                    <strong class="ml-1">Gastos ainda não lançados</strong>
                    @else 
                    <strong class="ml-1">R$: {{$despesa->des_valor}} </strong>
                    @endif
                </div>
                <div class="col-3 d-flex align-items-center">
                    @php
                        // Obtém a extensão do arquivo
                        $extensaodown = pathinfo($despesa->des_imagem, PATHINFO_EXTENSION);
                    @endphp
                    <button type="button" 
                        class="btn btn-warning mr-5"
                        data-toggle="modal" 
                        data-des_id="{{ $despesa->des_id }}"
                        data-target="#editaDespesaModal-{{ $despesa->des_id }}" 
                        data-url="{{ route('despesa_avulsa.getimagem', ['des_id' => $despesa->des_id]) }}" 
                        >Editar
                    </button>
                    
                    <a id="des-ver-imagem" data-id="{{ $despesa->des_id }}" class="btn btn-primary mr-5">Visualizar</a>

                    
                    {{-- <a href="{{ asset('storage/' .$despesa['des_imagem']) }}" download="{{ $despesa['des_id'] }}_codigo{{ $despesa['des_id'] }}_{{ $despesa['des_tipo'] }}_{{ $despesa['des_valor'] }}.{{$extensaodown}}" class="btn btn-secondary mr-5">
                        Download
                    </a>
                    --}}

                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="editaDespesaModal-{{ $despesa->des_id }}" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form action="{{ route('despesas.edita_despesa_avulsa', ['des_id' => $despesa->des_id]) }}" enctype="multipart/form-data" method="post">
                    @csrf
                     <div class="modal-header">
                        <h5 class="modal-title" id="ModalLabel">Para editar sua despesa informe:</h5>
                        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                     </div>
                     <div class="modal-body">
                          
                         <div class="alert alert-danger">
                         <strong> Comentário da moderação: </strong><br> {{ $despesa->des_comentario }}
                         </div>
                         <div class="row">
                         <div class="col-lg-6">
                        <!-- Campo de valor -->

                        <div class="form-group">
                            <label for="via_valor">Valor da despesa:</label>
                            <input class="form-control" name="via_valor" type="text" inputmode="numeric" onkeyup="formatarMoeda(this)" value="{{ $despesa->des_valor }}" disabled>
                        </div>
                        
                        <!-- Campo de tipo de despesa -->
                        <div class="form-group">
                            <label for="via_tipo">Tipo de despesa:</label>
                            <select class="form-control custom-select" id="via_tipo" name="via_tipo" disabled>
                                <option>{{$despesa->des_tipo}}</option>
                            </select>
                        </div>
    
                        <!-- Campo de recurso utilizado -->
                        <div class="form-group">
                            <label for="via_recurso">Recurso utilizado:</label>
                            <select class="form-control custom-select" id="via_recurso" name="via_recurso" disabled>
                                <option > {{$despesa->des_recurso}} </option>
                            </select>
                        </div>
    
                        <!-- Campo de CNPJ -->
                        <div class="form-group">
                            <label for="via_cnpj">CNPJ:</label>
                            <input class="form-control" value="{{ $despesa->des_cnpj }}" type="text" id="via_cnpj" name="via_cnpj" inputmode="numeric" onkeyup="formatarCNPJ(this)" maxlength="16" placeholder="XX.XXX.XXX/XXXX-XX" disabled>
                        </div>
    
                        <!-- Campo de Data -->
                        <div class="form-group">
                            <label for="via_data">Data:</label>
                            <input class="form-control" name="via_data" type="date" value="{{ $despesa->des_data }}" max="{{ \Carbon\Carbon::now()->setTimezone('America/Sao_Paulo')->format('Y-m-d') }}" disabled>
                        </div>
    
                        <!-- Campo de Justificativa -->
                        <div class="form-group">
                            <label for="via_justificativa">Justificativa:</label>
                            <input class="form-control" name="des_justificativa" value="{{ $despesa->des_justificativa }}" type="text" {{$despesa->des_jus > 0 ? 'required' : 'disabled'}}>
                        </div>
                        <div class="form-group">
                            <label for="des_autorizado_por">Autorizado por:</label>
                            <input class="form-control" name="des_autorizado_por" value="{{ $despesa->des_autorizado_por }}" type="text" {{$despesa->des_aut > 0 ? 'required' : 'disabled'}}>
                        </div>
                       
                        </div>
     
                         <div class="col-lg-6">
                         
                         <div class="form-group">
                             <label for="des_imagem">Imagem/PDF atual:</label>
                             <div class="" id="imagem-despesa-{{ $despesa->des_id }}">
                                 <p>Nenhum arquivo carregado ainda.</p>
                             </div>
                         
                             <!-- Upload de nova imagem/PDF -->
                             <label for="nova_imagem_{{ $despesa->des_id }}" class="btn btn-primary mt-3  {{$despesa->des_img > 0 ? 'required': 'disabled'}}">Escolher Arquivo</label>
                             <input type="file" id="nova_imagem_{{ $despesa->des_id }}" name="nova_imagem" accept="image/*,application/pdf" style="display: none;" onchange="mostrarPreview({{ $despesa->des_id }})" {{$despesa->des_img > 0 ? 'required': 'disabled'}}>
                         
                             <!-- Pré-visualização do arquivo -->
                             <div id="preview-container-{{ $despesa->des_id }}" style="margin-top: 15px;">
                                 <p id="preview-text-{{ $despesa->des_id }}" style="display: none;">Pré-visualização:</p>
                                 <img id="preview-imagem-{{ $despesa->des_id }}" src="" alt="Preview da imagem" style="max-width: 100%; display: none; border: 1px solid #ccc; padding: 5px; max-height: 400px;">
                                 <iframe id="preview-pdf-{{ $despesa->des_id }}" style="display: none; width: 100%; height: 400px; border: 1px solid #ccc;"></iframe>
                             </div>
                         </div>
                         
                         </div>
                         </div>
                     </div>

                {{-- <div class="modal-footer">
                    <button class="btn btn-danger" type="button" data-dismiss="modal">Não</button>
                    <button type="submit" class="btn btn-success">Editar</button>
                    
                </div> --}}
                <div class="modal-footer">
                    <button class="btn btn-danger" type="button" data-dismiss="modal">Não</button>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#confirmarEdicaoModal">Editar</button>
                </div>
                <!-- Modal de Confirmação -->
<div class="modal fade" id="confirmarEdicaoModal" tabindex="-1" role="dialog" aria-labelledby="confirmarEdicaoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content text-center">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmarEdicaoModalLabel">Confirmar Edição</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Tem certeza que deseja editar esta despesa?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success" id="confirmarEdicaoBtn">Sim, editar</button>
            </div>
        </div>
    </div>
</div>
<script>
    document.getElementById('confirmarEdicaoBtn').addEventListener('click', function() {
        document.querySelector('.modal.show form').submit();
    });
    </script>
    
                    
            </form>
            </div>
        </div>
    </div>
    <script>
         
function mostrarPreview(despesaId) {
    let inputFile = document.getElementById(`nova_imagem_${despesaId}`);
    let previewContainer = document.getElementById(`preview-container-${despesaId}`);
    let previewImage = document.getElementById(`preview-imagem-${despesaId}`);
    let previewPDF = document.getElementById(`preview-pdf-${despesaId}`);
    let previewText = document.getElementById(`preview-text-${despesaId}`);

    if (inputFile.files && inputFile.files[0]) {
        let file = inputFile.files[0];
        let fileURL = URL.createObjectURL(file);

        previewText.style.display = "block"; 

        if (file.type.includes("image")) {
            previewImage.src = fileURL;
            previewImage.style.display = "block";
            previewPDF.style.display = "none";
        } else if (file.type === "application/pdf") {
            previewPDF.src = fileURL;
            previewPDF.style.display = "block";
            previewImage.style.display = "none";
        }
    } else {
        previewImage.style.display = "none";
        previewPDF.style.display = "none";
        previewText.style.display = "none";
    }
}
 

$(document).on('show.bs.modal', '.modal', function (event) {
    let button = $(event.relatedTarget);
    let des_id = button.data('des_id');
    let urlBase = button.data('url'); // Pega a rota dinâmica

    if (!des_id) {
        console.error("des_id não definido");
        return;
    }
    let fileContainer = $(`#imagem-despesa-${des_id}`);
    fileContainer.html('<p>Carregando...</p>');

    $.ajax({
        url: `${urlBase}`,
        type: 'GET',
        success: function (response) {
            console.log("URL do arquivo recebido:", response.arquivo_url); // <-- VERIFICAR URL
           
 
            if (response.arquivo_url) {
                if (response.tipo === 'imagem') {
                    fileContainer.html(`
                        <img src="${response.arquivo_url}" alt="Imagem da Despesa" style="max-width: 100%; border: 1px solid #ccc; padding: 5px;">
                    `);
                } else if (response.tipo === 'pdf') {
                    fileContainer.html(`
                     
     <p><a href="${response.arquivo_url}" target="_blank" class="btn btn-primary">Abrir PDF</a></p>
      
    <div class="embed-responsive embed-responsive-16by9">
        
        <iframe
        id="pdf-iframe" class="embed-responsive-item" frameborder="0"
        src="${response.arquivo_url}" 
        allowfullscreen 
        allow="autoplay; encrypted-media">
</iframe>
    </div>

                    `);
                }
            } else {
                fileContainer.html('<p>Arquivo não disponível.</p>');
            }
        },
        error: function (xhr, status, error) {
        console.log("Erro AJAX:", xhr.status, xhr.responseText);
        fileContainer.html('<p>Erro ao carregar o arquivo.</p>');
    }

        // error: function () {
        //     fileContainer.html('<p>Erro ao carregar o arquivo.</p>');
            
        // }
    });
});
        function previewFile() {
            const file = document.querySelector('input[type=file]').files[0];
            const reader = new FileReader();
            const fileInfo = document.getElementById('fileInfo');
    
            if (file) {
                const allowedExtensions = ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'];
                const maxSize = 7 * 1024 * 1024; // 5 MB
    
                if (file.size > maxSize || !allowedExtensions.includes(file.type)) {
                    fileInfo.style.color = 'red';
                    fileInfo.textContent = 'Arquivo não suportado.';
    
                    if (file.size > maxSize) {
                        fileInfo.textContent += ` Tamanho: ${(file.size / 1024 / 1024).toFixed(2)} MB (máximo permitido: 7 MB).`;
                    } else {
                        fileInfo.textContent += ` Tipo: ${file.type}.`;
                    }
    
                    document.getElementById('fotoMiniatura').src = '';
                    document.getElementById('fotoCapturada').style.display = 'none';
                    return;
                } else {
                    fileInfo.style.color = 'green';
                }
    
                reader.onloadend = function() {
                    document.getElementById('des_imagem').value = reader.result;
    
                    const fotoMiniatura = document.getElementById('fotoMiniatura');
                    fotoMiniatura.src = reader.result;
                    document.getElementById('fotoCapturada').style.display = 'block';
    
                    fileInfo.textContent = `Nome do arquivo: ${file.name}, Tamanho: ${(file.size / 1024).toFixed(2)} KB`;
                };
    
                reader.readAsDataURL(file);
            } else {
                document.getElementById('fotoMiniatura').src = '';
                document.getElementById('fotoCapturada').style.display = 'none';
                fileInfo.textContent = '';
            }
        }
    </script>
    @endforeach
    <h5>Despesas lançadas</h5>
    
    @if(empty($despesas))
    <p> Sem despesas lançadas </p>
    @endif
    <div class="mb-5">
       
    @foreach ($despesas as $despesa)  
        
        <div class="card card-alert painel alert {{$despesa->des_rejeitado == 0 ? 'alert-light' : 'alert-warning'}}" title="{{$despesa->des_rejeitado == 2 ? 'Despesa editada' : ''}}">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-12 align-items-center">
                        <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 align-items-center">
                        <small>Recurso: </small>
                        <strong> {{ $despesa['des_recurso'] }}</strong>
                    </div>
                    <div class="col-md-3 col-sm-12 align-items-center">
                        <small>Data:</small>
                        <strong>{{ \Carbon\Carbon::parse($despesa['des_data'])->format('d/m/Y') }}</strong>
                        
                        <br>
                        <small>Valor: </small>
                        @if (is_null($despesa['des_valor']))
                        <strong class="ml-1">Gastos ainda não lançados</strong>
                        @else 
                        <strong class="ml-1">R$ {{$despesa->des_valor}} </strong>
                        @endif
                    </div>
                    <div class="col-3 d-flex align-items-center">
                        @php
                            // Obtém a extensão do arquivo
                            $extensaodown = pathinfo($despesa->des_imagem, PATHINFO_EXTENSION);
                        @endphp
                        <a id="des-ver-imagem" data-id="{{ $despesa->des_id }}" class="btn btn-primary mr-5">Visualizar</a>

                        
                        <a href="{{ asset('storage/' .$despesa['des_imagem']) }}" download="{{ $despesa['des_id'] }}_codigo{{ $despesa['des_id'] }}_{{ $despesa['des_tipo'] }}_{{ $despesa['des_valor'] }}.{{$extensaodown}}" class="btn btn-secondary mr-5">
                            Download
                        </a>
                       

                    </div>
                </div>
            </div>
        </div>
        
        @endforeach
    </div>
    @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
    <hr>
 
         
             <div class="modal fade" id="imagemDespesaModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Detalhes da Despesa</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                        </div>
                        <div class="modal-body">
                            
                            {{-- @php
                                // Obtém a extensão do arquivo
                                $extensao = pathinfo($despesa->des_imagem, PATHINFO_EXTENSION);
                            @endphp --}}
                            <p><strong>Valor da despesa:</strong> <span id="modalValor">N/A</span></p>
                            <p><strong>Tipo de despesa:</strong> <span id="modalTipo">N/A</span></p>
                            <p><strong>CNPJ:</strong> <span id="modalCnpj">N/A</span></p>
                            <p><strong>Recurso:</strong> <span id="modalRecurso">N/A</span></p>
                            <p><strong>Cartão:</strong> <span id="modalCartao">N/A</span></p>

                            <p><strong>Data:</strong> <span id="modalData">N/A</span></p>
                            <p><strong>Autorizado por:</strong> <span id="modalAutorizado">N/A</span></p>
                            <p><strong>Descrição:</strong> <span id="modalDescricao">N/A</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>
                        @isset($despesa)
                        <div class="modal-footer justify-content-center">
                            <a id="modalDownload"  href="{{ asset('storage/' . $despesa['des_imagem']) }}" class="btn btn-secondary" download>Download</a>
                        </div>
                        @endisset
                    </div>
                </div>
            </div>
            <script>
document.addEventListener('DOMContentLoaded', function () {
    const baseUrl = "{{ route('despesa_avulsa.imagem', ':des_id') }}";
    const buttons = document.querySelectorAll('#des-ver-imagem');
    const modalElement = document.getElementById('imagemDespesaModal');
    const modal = new bootstrap.Modal(modalElement);
    const modalAutorizado = document.getElementById('modalAutorizado');
    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';
                        modalAutorizado.textContent = data.autorizado || '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>
            
        
        </div>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
        
    <!-- Modal -->
    <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>

</div>
{{-- 
<div id="loadingOverlay" style="display: none;">
    <div class="overlay-content">
        <div class="spinner-border text-light" role="status" style="width: 3rem; height: 3rem;"></div>
        <p class="mt-3 text-white font-weight-bold">Processando sua despesa...<br><small>Não feche ou recarregue a página</small></p>
    </div> 
</div> --}}
<script>
  window.addEventListener('DOMContentLoaded', function () {
    document.getElementById('loadingOverlay').style.display = 'none';
  });
</script>

{{-- <div id="loadingOverlay" style="
    display: none ;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.8); 
    z-index: 9999;
    align-items: center; justify-content: center; flex-direction: column;"
    class="d-flex">

  <div class="spinner-border text-primary" role="status"></div>
  <strong class="mt-3 text-dark">Processando sua despesa...</strong>
</div> --}}
<!-- Modal de "Processando" -->
<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>

</div>

<script>
    
    // document.getElementById('formDespesa').addEventListener('submit', function(e) {
        //     // Fecha a modal de cadastro (caso ainda esteja aberta)
        //     $('#despesaModal').modal('hide');
        
        //     // Aguarda um pouquinho para garantir que a primeira modal feche (evita sobreposição bugada)
        //     setTimeout(() => {
            //         $('#modalAguarde').modal({
                //             backdrop: 'static',
                //             keyboard: false
                //         });
                //     }, 400);
                
                //     // Desabilita botão para prevenir múltiplos envios
                //     document.getElementById('btnEnviar').disabled = true;
                // });
                
                // document.getElementById('formDespesa').addEventListener('submit', function(e) {
                    //     // Fecha a modal manualmente
                    //     $('#despesaModal').modal('hide');
                    
                    //     // Aguarda a modal desaparecer antes de exibir o overlay
                    //     setTimeout(function() {
                        //         document.getElementById('loadingOverlay').style.display = 'flex';
                        //     }, 500); // tempo suficiente para a modal sair
                        
                        //     // Desabilita o botão para evitar envio duplo
                        //     document.getElementById('btnEnviar').disabled = true;
                        // });
                        // document.getElementById('formDespesa').addEventListener('submit', function(e) {
                        //     // Impede múltiplos envios
                        //     document.getElementById('btnEnviar').disabled = true;

                        //     // Fecha a modal
                        //     $('#despesaModal').modal('hide');
                            
                        //     // Aguarda a modal ser completamente escondida
                        //     $('#despesaModal').on('hidden.bs.modal', function () {
                        //         document.getElementById('loadingOverlay').style.display = 'flex';
                        //     });
                        // });
                        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>
    
    // 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')