@php
$titulo = "Despesas totais";
@endphp
@include('components.head')
 
 
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
<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 {
         background-color: #F2F6FF; 
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          /* Sombra para o efeito de elevação */
    } 

/* 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>
<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');
        }
    }
    $('#editaDespesaModal').on('show.bs.modal', function () {
    $('body').addClass('modal-open');
    });

    $('#editaDespesaModal').on('hidden.bs.modal', function () {
        $('body').removeClass('modal-open');
    });

    
// Ajustar camada da modal ao clicar nela
$(document).on('click', '.modal', function () {
    const highestZIndex = Math.max(...Array.from(document.querySelectorAll('*')).map(el => parseFloat(getComputedStyle(el).zIndex) || 0));
    $(this).css('z-index', highestZIndex + 1);
});
// Quando clicar no botão "Editar", abrir a modal e preencher os campos
$(document).on('click', '.editar-despesa', function() {
    var despesaId = $(this).data('id'); // Pega o ID da despesa
    var imagemUrl = $(this).data('imagem'); // Pega a URL da imagem atual

    // Preenche os campos da modal com os dados da despesa
    $('#editaDespesaModal').find('#nova_imagem').val("");  // Limpa o campo de upload
    $('#editaDespesaModal').find('#imagem-atual').attr('src', imagemUrl); // Atualiza a imagem da modal

    // Abre a modal
    $('#editaDespesaModal').modal('show');
});

document.getElementById('nova_imagem').addEventListener('change', function() {
    const fileName = this.files[0] ? this.files[0].name : 'Nenhum arquivo selecionado';
    alert(`Arquivo selecionado: ${fileName}`);
});

</script>


<div class="container mb-5">
    @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
    <h5>Minha viagem</h5>
    <div class="card card-alert shadow d-none d-md-block">
        <div class="container mt-2 mb-2">
            <div class="row">
                <div class="col-6">
                    <small>Empresa: </small><br>
                    <strong>{{ $viagem['via_empresa'] }}</strong><br>
                    <small>Cidade:</small><br>
                    <strong>{{$viagem['via_cidade']}}</strong><br>
                    <small>Cartão:</small><br>
                    <strong> {{$cartao->car_dono ?? ' '}} - {{$cartao->car_numero ?? ' '}} </strong><br>
                </div>
                <div class="col-4 ">
                        <small>Viajantes:</small>
                        <br>
                        @foreach($viacol as $viajantes) 
                        {{-- <strong> {{$viajantes->colaborador->col_id }} </strong>   --}}
                        <strong>
                            {{ $viajantes->colaborador->pessoa->pes_nome_completo ?? 'Nome não encontrado' }} <br>
                        </strong>
                        @endforeach
                        <br>
                        
                    
                </div>
                <div class="col-2">
                    <small>Valor total gasto: </small><br>
                        @if( $viagem->via_valor <= 0)
                        <strong> Gastos ainda não lançados </strong><br>
                        @else
                        <strong> R$ {{ $viagem['via_valor'] }}</strong><br>
                        @endif

                        <small>Data de abertura</small> <br>  
                        <strong> {{Carbon\Carbon::parse($viagem->via_recebimentocartao)->format('d/m/Y') }} </strong><br>

                        @if($viagem->via_devolucaocartao)
                        <small>Data de encerramento</small><br>
                        <strong> {{ Carbon\Carbon::parse($viagem['via_devolucaocartao'])->format('d/m/Y')  }} </strong><br>
                        @endif
                        @if($viagem->via_finalizacao)
                        <small>Data de finalização</small><br>
                        <strong> {{Carbon\Carbon::parse($viagem['via_finalizacao'])->format('d/m/Y')}} </strong>
                        @endif
                    </div>

            </div>
        </div>
    </div>
    <div class="card card-alert shadow d-sm-block d-md-none">
        <div class="container mt-2 mb-2">
            <div class="row">
                <div class="col-12">
                    <small>Empresa: </small><br>
                    <strong>{{ $viagem['via_empresa'] }}</strong><br>
                    <small>Cidade:</small><br>
                    <strong>{{$viagem['via_cidade']}}</strong><br>
                    <small>Cartão:</small><br>
                    <strong> {{$cartao->car_dono ?? ' '}} - {{$cartao->car_numero ?? ' '}} </strong><br>
                        <small>Viajantes:</small>
                        <br>
                        @foreach($viacol as $viajantes) 
                        {{-- <strong> {{$viajantes->colaborador->col_id }} </strong>   --}}
                        <strong>
                            {{ $viajantes->colaborador->pessoa->pes_nome ?? 'Nome não encontrado' }} <br>
                        </strong>
                        @endforeach

                    </p>
                    <small>Valor total gasto: </small><br>
                        @if( $viagem->via_valor <= 0)
                        <strong> Gastos ainda não lançados </strong>
                        @else
                        <strong> R$ {{ $viagem['via_valor'] }}</strong>
                        @endif
                    </div>
            </div>
        </div>
    </div>
    <hr style="color: #333; background-color: #333; height: 2px; border: none;">
      
    @if ($viagem['via_status'] == 0) 
        @if($usuario['mod_viagem'] != 1)
    <h5>Ação</h5>
        <button type="submit" onclick="location.href='{{ route ( 'viagens.adiciona_despesa', ['via_id' => $viagem->via_id] )}} '" class='col-12 alert alert-light text-dark text-left text-primary shadow painel'>
            <div><strong>Adicionar despesa</strong><i style="margin-left: 80%;" class="fas fa-plus text-success"></i></div>
        </button>

        
        @endif
        
    @endif
    <h5>Despesas lançadas</h5>
    <hr style="color: #333; background-color: #333; height: 2px; border: none;">
    @if(empty($despesas) || $despesas->isEmpty())
    <p> Sem despesas lançadas </p>
    @endif
    @foreach ($despesas as $despesa)  
        
        @if($despesa->via_status == 1)
        {{-- <i class="bi bi-exclamation-circle-fill"></i> --}}
       
        <div class="card painel mb-1 shadow alert-danger" title="Necessita atenção">
             <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>  
            <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 align-items-center">
                        <small>Tipo de despesa: </small>
                        <strong> {{$despesa['via_tipo']}} </strong><br>
                        <small>CNPJ: </small>
                        <strong> {{ $despesa['via_cnpj'] }}</strong>
                    </div>
                    <div class="col-md-3 col-sm-12 align-items-center">
                        <small>Recibo: </small>
                        <strong> {{$despesa['via_recibo']}}</strong><br>
                        <small>Recurso: </small>
                        <strong>{{$despesa->car_id != 0 ? $despesa->viagem->cartao->car_dono .' - '. $despesa->viagem->cartao->car_numero : $despesa->via_recurso}}</strong>
                    </div>
                    <div class="col-md-2 col-sm-12 align-items-center">
                        <small>Data:</small>
                        <strong>{{ \Carbon\Carbon::parse($despesa['via_data'])->format('d/m/Y') }}</strong>

                        <br>
                        <small>Valor: </small>
                        @if (is_null($despesa['via_valor']))
                            <strong class="ml-1">Gastos ainda não lançados</strong>
                        @else 
                            <strong class="ml-1"> R$ {{$despesa->via_valor}} </strong>
                        @endif
                    </div>
                    
                    <div class="col-2 d-flex align-items-center">
                        
                    {{--Adicionar o IF de edição neste botão --}}
                    
                        
                        @if ($usuario['col_id'] == $despesa->col_id && $despesa->via_status == 1)
                        <button type="button" 
                            class="btn btn-warning mr-5"
                            data-toggle="modal" 
                            data-via_des_id="{{ $despesa->via_des_id }}"
                            data-target="#editaDespesaModal-{{ $despesa->via_des_id }}" 
                            data-url="{{ route('viagens.pegaarquivo', ['via_des_id' => $despesa->via_des_id]) }}" 
                            >Editar
                        </button>
                        @else
                        <button type="button" 
                            class="btn btn-warning mr-5"
                            {{-- data-toggle="modal"  --}}
                            {{-- data-target="#editaDespesaModal-{{ $despesa->via_des_id }}"  --}}
                            {{-- data-via_des_id="{{ $despesa->via_des_id }}"> --}}
                            disabled
                            >Editar
                        </button>

                        @endif
                        <a href="{{ route('viagens.visualiza_despesa_especifica' , [
                        'via_id' => $viagem->via_id,
                        'via_des_id' => $despesa->via_des_id
                        ])
                         }}" class="btn btn-primary mr-5">
                            Visualizar
                        </a>
                        
                        <a href="{{ asset('storage/' . $despesa['via_imagem']) }}" download="{{ $despesa['via_des_id'] }}_codigo{{ $despesa['via_id'] }}_{{ Str::slug($despesa['via_tipo']) }}_{{ str_replace('.', '_', $despesa['via_valor']) }}.jpg" class="btn btn-secondary mr-5">
                            Download
                        </a>
                            
                        {{-- <a href="{{ route('viagens.edita_despesa', ['des_id' => $despesa->des_id]) }}" class="mr-5">
                            Editar btn btn-sm btn-warning
                        </a> --}}
                        {{-- <button type="button" data-toggle="modal" data-target="#editaDespesaModal-{{ $despesa->via_des_id }}" data-id="{{ $despesa->via_des_id }}" class="btn btn-warning text-dark ">Editar</button> --}}
                        

                       
                       
                    {{-- --}}                        
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="editaDespesaModal-{{ $despesa->via_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('viagens.edita_despesa', ['via_des_id' => $despesa->via_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->via_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->via_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->via_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->via_recurso  }} </option>
                                       
                                   </select>
                               </div>
           
                               <!-- Campo de CNPJ -->
                               <div class="form-group">
                                   <label for="via_cnpj">CNPJ:</label>
                                   <input class="form-control" value="{{ $despesa->via_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->via_data }}" max="{{ \Carbon\Carbon::now()->setTimezone('America/Sao_Paulo')->format('Y-m-d') }}" disabled>
                               </div>
           
                               <!-- Campo de Hora -->
                               <div class="form-group">
                                   <label for="via_hora">Hora:</label>
                                   <input class="form-control" name="via_hora" type="time" value="{{ $despesa->via_hora }}"  disabled>
                               </div>
           
                               <!-- Campo de Justificativa -->
                               <div class="form-group">
                                   <label for="via_justificativa">Justificativa:</label>
                                   <input class="form-control" name="via_justificativa" value="{{ $despesa->via_justificativa }}" type="text" {{$despesa->via_jus > 0 ? 'required' : 'disabled'}}>
                               </div>
                               
                               <div class="form-group">
                                   <label for="via_autorizado_por">Autorizado por:</label>
                                   <input class="form-control" name="via_autorizado_por" value="{{ $despesa->via_autorizado_por }}" type="text" {{$despesa->via_aut > 0 ? 'required' : 'disabled'}}>
                               </div>
                              
                               </div>
            
                                <div class="col-lg-6">
                                
                                <div class="form-group">
                                    <label for="via_imagem">Imagem/PDF atual:</label>
                                    <div class="" id="imagem-despesa-{{ $despesa->via_des_id }}">
                                        <p>Nenhum arquivo carregado ainda.</p>
                                    </div>
                                
                                    <!-- Upload de nova imagem/PDF -->
                                    <label for="nova_imagem_{{ $despesa->via_des_id }}" class="btn btn-primary mt-3 {{$despesa->via_img > 0 ? 'required' : 'disabled'}}" >Escolher Arquivo</label>
                                    <input type="file" id="nova_imagem_{{ $despesa->via_des_id }}" name="nova_imagem" accept="image/*,application/pdf" style="display: none;" onchange="mostrarPreview({{ $despesa->via_des_id }})">
                                
                                    <!-- Pré-visualização do arquivo -->
                                    <div id="preview-container-{{ $despesa->via_des_id }}" style="margin-top: 15px;">
                                        <p id="preview-text-{{ $despesa->via_des_id }}" style="display: none;">Pré-visualização:</p>
                                        <img id="preview-imagem-{{ $despesa->via_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->via_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>
                           
                   </form>
                   </div>
               </div>
           </div>
        @else
        <div class="card painel shadow mb-1">
            <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 align-items-center">
                        <small>Tipo de despesa: </small>
                        <strong> {{$despesa['via_tipo']}} </strong><br>
                        <small>CNPJ: </small>
                        <strong> {{ $despesa['via_cnpj'] }}</strong>
                    </div>
                    <div class="col-md-3 col-sm-12 align-items-center">
                        <small>Recibo: </small>
                        <strong> {{$despesa['via_recibo']}}</strong><br>
                        <small>Recurso: </small>
                        <strong>{{$despesa->car_id != 0 ? $despesa->viagem->cartao->car_dono .' - '. $despesa->viagem->cartao->car_numero : $despesa->via_recurso}}</strong>
                    </div>
                    <div class="col-md-2 col-sm-12 align-items-center">
                        <small>Data:</small>
                        <strong>{{ \Carbon\Carbon::parse($despesa['via_data'])->format('d/m/Y') }}</strong>

                        <br>
                        <small>Valor: </small>
                        @if (is_null($despesa['via_valor']))
                            <strong class="ml-1">Gastos ainda não lançados</strong>
                        @else 
                            <strong class="ml-1"> R$ {{$despesa->via_valor}} </strong>
                        @endif
                    </div>
                    
                    <div class="col-2 d-flex align-items-center">
                        
                    {{--Adicionar o IF de edição neste botão --}}
                    
                        
                        @if ($usuario['col_id'] == $despesa->col_id && $despesa->via_status == 1)
                        <button type="button" 
                            class="btn btn-warning mr-5"
                            data-toggle="modal" 
                            data-via_des_id="{{ $despesa->via_des_id }}"
                            
                            data-target="#editaDespesaModal-{{ $despesa->via_des_id }}" 
                            >Editar
                        </button>
                        @php
                            // Obtém a extensão do arquivo
                            $extensaodown = pathinfo($despesa->via_imagem, PATHINFO_EXTENSION);
                            @endphp
                        @endif
                        <a href="{{ route('viagens.visualiza_despesa_especifica' , [
                        'via_id' => $viagem->via_id,
                        'via_des_id' => $despesa->via_des_id
                        ])
                         }}" class="btn btn-primary mr-5">
                            Visualizar
                        </a>
                        
                        <a href="{{ asset('storage/' . $despesa['via_imagem']) }}" download="{{ $despesa['via_des_id'] }}_codigo{{ $despesa['via_id'] }}_{{ Str::slug($despesa['via_tipo']) }}_{{ str_replace('.', '_', $despesa['via_valor']) }}" class="btn btn-secondary mr-5">
                            Download
                        </a>
                            


                        {{--<div class="modal fade" id="editaDespesaModal-{{ $despesa->via_des_id }}" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <form action="{{ route('viagens.edita_despesa', ['via_des_id' => $despesa->via_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">
                                            <!-- 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->via_valor }}" required>
                                            </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">
                                                    <option value="Café da Manhã" {{ $despesa->via_tipo == 'Café da Manhã' ? 'selected' : '' }}>Café da Manhã</option>
                                                    <option value="Almoço" {{ $despesa->via_tipo == 'Almoço' ? 'selected' : '' }}>Almoço</option>
                                                    <option value="Café da Tarde" {{ $despesa->via_tipo == 'Café da Tarde' ? 'selected' : '' }}>Café da Tarde</option>
                                                    <option value="Jantar" {{ $despesa->via_tipo == 'Jantar' ? 'selected' : '' }}>Jantar</option>
                                                    <option value="Condução" {{ $despesa->via_tipo == 'Condução' ? 'selected' : '' }}>Condução (Uber/Taxi/Onibus)</option>
                                                    <option value="Combustível" {{ $despesa->via_tipo == 'Combustível' ? 'selected' : '' }}>Combustível</option>
                                                    <option value="Estacionamento" {{ $despesa->via_tipo == 'Estacionamento' ? 'selected' : '' }}>Estacionamento</option>
                                                    <option value="Hospedagem" {{ $despesa->via_tipo == 'Hospedagem' ? 'selected' : '' }}>Hospedagem</option>
                                                    <option value="Pedágio" {{ $despesa->via_tipo == 'Pedágio' ? 'selected' : '' }}>Pedágio</option>
                                                    <option value="Compra de material" {{ $despesa->via_tipo == 'Compra de material' ? 'selected' : '' }}>Compra de material</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">
                                                    <option value="Cartão da viagem" {{ $despesa->via_recurso == 'Cartão da viagem' ? 'selected' : '' }}>Cartão da viagem</option>
                                                    <option value="Recurso próprio" {{ $despesa->via_recurso == 'Recurso próprio' ? 'selected' : '' }}>Recurso próprio</option>
                                                    <option value="Faturado" {{ $despesa->via_recurso == 'Faturado' ? 'selected' : '' }}>Faturado</option>
                                                </select>
                                            </div>
                        
                                            <!-- Campo de CNPJ -->
                                            <div class="form-group">
                                                <label for="via_cnpj">CNPJ:</label>
                                                <input class="form-control" value="{{ $despesa->via_cnpj }}" type="text" id="via_cnpj" name="via_cnpj" inputmode="numeric" onkeyup="formatarCNPJ(this)" maxlength="16" placeholder="XX.XXX.XXX/XXXX-XX" required>
                                            </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->via_data }}" max="{{ \Carbon\Carbon::now()->setTimezone('America/Sao_Paulo')->format('Y-m-d') }}" required>
                                            </div>
                        
                                            <!-- Campo de Hora -->
                                            <div class="form-group">
                                                <label for="via_hora">Hora:</label>
                                                <input class="form-control" name="via_hora" type="time" value="{{ $despesa->via_hora }}"  required>
                                            </div>
                        
                                            <!-- Campo de Justificativa -->
                                            <div class="form-group">
                                                <label for="via_justificativa">Justificativa:</label>
                                                <input class="form-control" name="via_justificativa" value="{{ $despesa->via_justificativa }}" type="text">
                                            </div>
                                            
                         
                                    
                                        <!-- Campo de Imagem -->
                                        <div class="form-group">
                                            
                                                <label for="via_imagem">Imagem atual:</label>
                                                <div id="imagem-despesa-{{ $despesa->via_des_id }}">
                                                    <p>Nenhuma imagem carregada ainda.</p>
                                                </div>
                                           
                                            <!-- Upload de nova imagem -->
                                            <label for="nova_imagem_{{ $despesa->via_des_id }}" class="btn btn-primary mt-3">Escolher nova imagem</label>
                                            <input type="file" id="nova_imagem_{{ $despesa->via_des_id }}" name="nova_imagem"  style="display: none;" onchange="mostrarPreview({{ $despesa->via_des_id }})">

                                            <!-- Pré-visualização da imagem -->
                                            <div id="preview-container-{{ $despesa->via_des_id }}" style="margin-top: 15px;">
                                                <p id="preview-text-{{ $despesa->via_des_id }}" style="display: none;">Pré-visualização:</p>
                                                <img id="preview-imagem-{{ $despesa->via_des_id }}" src="" alt="Preview da imagem" style="max-width: 100%; display: none; border: 1px solid #ccc; padding: 5px;">
                                            </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-primary">Editar</button>
                                    </div>
                                    
                                </form>
                                </div>
                            </div>
                        </div> --}}
                    {{-- --}}                        
                    </div>
                </div>
            </div>
        </div>
        @endif
        
    @endforeach
   
</div>
<br>
<script>
 
function mostrarPreview(despesaId) {
    const previewContainer = document.getElementById('preview-container-' + despesaId);
    const previewText = document.getElementById('preview-text-' + despesaId);
    const previewImage = document.getElementById('preview-imagem-' + despesaId);
    let previewPdf = document.getElementById('preview-pdf-' + despesaId);

    if (!previewPdf) {
        previewPdf = document.createElement('iframe');
        previewPdf.id = 'preview-pdf-' + despesaId;
        previewPdf.style.display = 'none';
        previewPdf.style.width = '100%';
        previewPdf.style.height = '400px';
        previewContainer.appendChild(previewPdf);
    }

    const file = document.getElementById('nova_imagem_' + despesaId).files[0];
   
    
    if (file) {
        const reader = new FileReader();

        if (file.type.startsWith('image/')) {
            reader.onload = function (e) {
                previewImage.src = e.target.result;
                previewImage.style.display = 'block';
                previewPdf.style.display = 'none';
                previewText.style.display = 'block';
                previewContainer.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else if (file.type === 'application/pdf') {
            // Aqui aplicamos a correção para carregar PDFs corretamente
            const blob = new Blob([file], { type: "application/pdf" });
            const url = URL.createObjectURL(blob);
            previewPdf.src = url;
            previewPdf.onload = function() {
                console.log("PDF carregado no iframe!");
            };
            
            previewPdf.style.display = 'block';
            previewImage.style.display = 'none';
            previewText.style.display = 'block';
            previewContainer.style.display = 'block';
        } else {
            previewContainer.style.display = 'none';
        }
    } else {
        previewContainer.style.display = 'none';
    }
}

// function mostrarPreview(despesaId) {
//     const previewContainer = document.getElementById('preview-container-' + despesaId);
//     const previewText = document.getElementById('preview-text-' + despesaId);
//     const previewImage = document.getElementById('preview-imagem-' + despesaId);
//     let previewPdf = document.getElementById('preview-pdf-' + despesaId);

//     if (!previewPdf) {
//         previewPdf = document.createElement('iframe');
//         previewPdf.id = 'preview-pdf-' + despesaId;
//         previewPdf.style.display = 'none';
//         previewPdf.style.width = '100%';
//         previewPdf.style.height = '400px';
//         previewContainer.appendChild(previewPdf);
//     }

//     const file = document.getElementById('nova_imagem_' + despesaId).files[0];

//     if (file) {
//         const reader = new FileReader();

//         if (file.type.startsWith('image/')) {
//             reader.onload = function (e) {
//                 previewImage.src = e.target.result;
//                 previewImage.style.display = 'block';
//                 previewPdf.style.display = 'none';
//                 previewText.style.display = 'block';
//                 previewContainer.style.display = 'block';
//             };
//             reader.readAsDataURL(file);
//         } else if (file.type === 'application/pdf') {
//             reader.onload = function (e) {
//                 previewPdf.src = e.target.result;
//                 previewPdf.style.display = 'block';
//                 previewImage.style.display = 'none';
//                 previewText.style.display = 'block';
//                 previewContainer.style.display = 'block';
//             };
//             reader.readAsDataURL(file);
//         } else {
//             previewContainer.style.display = 'none';
//         }
//     } else {
//         previewContainer.style.display = 'none';
//     }
// }

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

    if (!via_des_id) {
        console.error("via_des_id não definido");
        return;
    }
    let fileContainer = $(`#imagem-despesa-${via_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 () {
            fileContainer.html('<p>Erro ao carregar o arquivo.</p>');
        }
    });
});
 

    // document.getElementById('meuFormulario').addEventListener('submit', function(e) {
    //     if (imageDataURL) {
    //         document.getElementById('via_imagem').value = imageDataURL;
    //     }
    // });

    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('via_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 = '';
        }
    }

    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;
    }
</script>
@include('components.footer')