@php
    $titulo = "Reembolso $reembolso->rem_id"
@endphp
@include('components.head')
<div class="container">
    <h5>Correção de pedido de reembolso</h5>
    <form action="{{route('perfil.reembolso.corrigir_reembolso', $reembolso->rem_id)}}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="footer">
            <div class="row">
                @if($reembolso->despesa)
                    {{-- <h5>Despesa avulsa</h5> --}}
                    @if ($reembolso->rem_justificativa)
                    <div class="col-lg-6">
                        <label for="">Justificativa:</label>
                        <input class="form-control" type="text" name="des_justificativa" id="" value="{{ $reembolso->despesa->des_justificativa }}" required>
                        <span class="text-danger">Atenção: Editar aqui</span>
                    </div>
                    @else
                    <div class="col-lg-6">
                        <label for="">Justificativa:</label>
                        <input class="form-control" type="text" name="" id="" value="{{ $reembolso->despesa->des_justificativa }}" disabled>
                    </div>
                    @endif
                    @if($reembolso->rem_aprovado_por)
                    <div class="col-lg-6">
                        <label for="">Aprovado por:</label>
                        <input class="form-control" type="text" name="des_autorizado_por" id="" value="{{ $reembolso->despesa->des_autorizado_por }}" required>
                        <span class="text-danger">Atenção: Editar aqui</span>
                    </div>
                    @else
                    <div class="col-lg-6">
                        <label for="">Aprovado por:</label>
                        <input class="form-control" type="text" name="" id="" value="{{ $reembolso->despesa->des_autorizado_por }}" disabled>
                    </div>
                    @endif
                    {{-- @if($reembolso->rem_arquivo)
                    <div class="col-lg-6"> 
                        <label for="">Cupom fiscal:</label>
                        <input class="form-control" type="text" name="des_imagem" id="" value="{{ $reembolso->despesa->des_imagem }}">
                    </div>
                    @endif --}}
                    @if($reembolso->rem_arquivo)
                    <div class="col-lg-6 mt-3"> 
                        <label for="">Cupom fiscal:</label>
                        
                        <!-- Campo de Input para editar o nome do arquivo -->
                        {{-- <input class="form-control mb-2" type="text" name="via_imagem" value="{{ $reembolso->despesa->des_imagem }}"> --}}

                        @php
                            $caminhoArquivo = asset('storage/' . $reembolso->despesa->des_imagem);
                            $extensao = pathinfo($reembolso->despesa->des_imagem, PATHINFO_EXTENSION);
                        @endphp

                        <!-- Verifica se o arquivo é uma imagem -->
                        @if(in_array(strtolower($extensao), ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']))
                            <div>
                                <img src="{{ $caminhoArquivo }}" alt="Cupom Fiscal" class="img-thumbnail" style="max-width: 6
                                500px;">
                            </div>
                        @elseif(strtolower($extensao) === 'pdf')
                            <div>
                                <iframe src="{{ $caminhoArquivo }}" width="100%" height="400px" style="border: none;"></iframe>
                            </div>

                        @else
                            <!-- Caso seja outro tipo de arquivo -->
                            <p class="text-muted">Arquivo não visualizável. <a href="{{ $caminhoArquivo }}" target="_blank">Baixar</a></p>
                        @endif

                        @if($reembolso->rem_arquivo)
                        <div class="mt-3 custom-file-button">
                            <button class="btn btn-primary" type="button" id="btnUpload">Alterar imagem</button>
                            <input id="arquivo" type="file" name="arquivo" class="form-control-file" style="display: none;" required>
                            <span class="text-danger">Atenção: Editar aqui</span>
                        </div>
                        @endif
                    </div>
                    <div class="col-lg-6 mt-3 ">
                        <div id="fotoEnviada" style="display:none;">
                            <label>Arquivo carregado:</label>
                            <img id="fotoMiniatura" src="" alt="Preview" style="width: 100%; max-width: 500px; height: 500px; display: none;">
                            <iframe id="pdfViewer" style="display: none; width: 100%; height: 400px;" frameborder="0"></iframe>
                            <p id="fileInfo" class="text-muted"></p>
                        </div>
                    </div>
                    
                    </div>
                @endif

                @endif

                @if($reembolso->viaDespesa)
                    {{-- <h5>Despesa de viagem</h5> --}}
                    @if ($reembolso->rem_justificativa)
                    <div class="col-lg-6">
                        <label for="">Justificativa:</label>
                        <input class="form-control" type="text" name="via_justificativa" id="" value="{{ $reembolso->viaDespesa->via_justificativa }}" required>
                        <span class="text-danger">Atenção: Editar aqui</span>
                    </div>
                    @else
                    <div class="col-lg-6">
                        <label for="">Justificativa:</label>
                        <input class="form-control" type="text" name="via_justificativa" id="" value="{{ $reembolso->viaDespesa->via_justificativa }}" disabled>
                    </div>
                    @endif
                    @if($reembolso->rem_aprovado_por)
                    <div class="col-lg-6">
                        <label for="">Aprovado por:</label>
                        <input class="form-control" type="text" name="via_autorizado_por" id="" value="{{ $reembolso->viaDespesa->via_autorizado_por }}" required>
                        <span class="text-danger">Atenção: Editar aqui</span>
                    </div> 
                    @else
                    <div class="col-lg-6">
                        <label for="">Aprovado por:</label>
                        <input class="form-control" type="text" name="via_autorizado_por" id="" value="{{ $reembolso->viaDespesa->via_autorizado_por }}" disabled>
                    </div> 

                    @endif
                    {{-- @if($reembolso->rem_arquivo)
                    <div class="col-lg-6"> 
                        <label for="">Cupom fiscal:</label>
                        <input class="form-control" type="text" name="via_imagem" id="" value="{{ $reembolso->viaDespesa->via_imagem }}">
                    </div>
                    @endif --}}
                   
                    <div class="col-lg-6 mt-3"> 
                        <label for="">Cupom fiscal:</label>
                        
                        @php
                            $caminhoArquivo = asset('storage/' . $reembolso->viaDespesa->via_imagem);
                            $extensao = pathinfo($reembolso->viaDespesa->via_imagem, PATHINFO_EXTENSION);
                        @endphp

                        <!-- Verifica se o arquivo é uma imagem -->
                        @if(in_array(strtolower($extensao), ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']))
                            <div>
                                <img src="{{ $caminhoArquivo }}" alt="Cupom Fiscal" class="img-thumbnail" style="max-width: 200px;">
                            </div>
                        @elseif(strtolower($extensao) === 'pdf')
                            <div>
                                <iframe src="{{ $caminhoArquivo }}" width="100%" height="500px" style="border: none;"></iframe>
                            </div>

                        @else
                            <!-- Caso seja outro tipo de arquivo -->
                            <p class="text-muted">Arquivo não visualizável. <a href="{{ $caminhoArquivo }}" target="_blank">Baixar</a></p>
                        @endif
                        @if($reembolso->rem_arquivo)
                        <div class="mt-3 custom-file-button">
                            <button class="btn btn-primary" type="button" id="btnUpload">Alterar imagem</button>
                            <input id="arquivo" type="file" name="arquivo" class="form-control-file" style="display: none;" required>
                            <span class="text-danger">Atenção: Editar aqui</span>
                        </div>
                        @endif
                    </div>
                    <div class="col-lg-6 mt-3 ">
                        <div id="fotoEnviada" style="display:none;">
                            <label>Arquivo carregado:</label>
                            <img id="fotoMiniatura" src="" alt="Preview" style="width: 100%; max-width: 500px; height: 500px; display: none;">
                            <iframe id="pdfViewer" style="display: none; width: 100%; height: 400px;" frameborder="0"></iframe>
                            <p id="fileInfo" class="text-muted"></p>
                        </div>
                    </div>
                


                @endif
                
                
                <div class="col-lg-12 d-flex justify-content-center mt-3 ">
    
                    <button class="btn btn-success " type="submit">
                        Salvar
                    </button>
                </div>

            </div>

        </div>
    </form>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const inputFile = document.getElementById("arquivo");
        const btnUpload = document.getElementById("btnUpload");
        const fotoMiniatura = document.getElementById("fotoMiniatura");
        const pdfViewer = document.getElementById("pdfViewer");
        const fileInfo = document.getElementById("fileInfo");
        const fotoEnviada = document.getElementById("fotoEnviada");
    
        // Quando clicar no botão, abrir a seleção de arquivo
        btnUpload.addEventListener("click", function () {
            inputFile.click();
        });
    
        // Preview do arquivo selecionado
        inputFile.addEventListener("change", function () {
            const file = inputFile.files[0];
            const reader = new FileReader();
    
            if (!file) {
                fotoMiniatura.style.display = "none";
                pdfViewer.style.display = "none";
                fileInfo.textContent = "";
                return;
            }
    
            const allowedExtensions = ["image/jpeg", "image/png", "image/jpg", "application/pdf"];
            const maxSize = 7 * 1024 * 1024; // 7 MB
    
            if (file.size > maxSize || !allowedExtensions.includes(file.type)) {
                fileInfo.style.color = "red";
                fileInfo.textContent = "Arquivo não suportado. Apenas imagens (JPG, PNG) ou PDFs até 7MB.";
                return;
            } else {
                fileInfo.style.color = "green";
                fileInfo.textContent = `Nome: ${file.name} | ${(file.size / 1024).toFixed(2)} KB`;
                fotoEnviada.style.display = "block";
            }
    
            reader.onloadend = function () {
                if (file.type === "application/pdf") {
                    pdfViewer.src = reader.result;
                    pdfViewer.style.display = "block";
                    fotoMiniatura.style.display = "none";
                } else {
                    fotoMiniatura.src = reader.result;
                    fotoMiniatura.style.display = "block";
                    pdfViewer.style.display = "none";
                }
            };
    
            reader.readAsDataURL(file);
        });
    });
    </script>
@include('components.footer')