@php
$titulo = "Cadastro de despesa de viagem";
@endphp
{{-- @extends('components.head') --}}
@include('components.head')
<style>
    #fotoCapturada {
        margin-top: 20px;
    }

    #fotoCapturada h4 {
        margin-bottom: 10px;
    }
</style>
{{-- <script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script> --}}
<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>
<div class="container mb-5">
    <h5>Cadastro de despesa </h5>
    @if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if (session('msg_error') && session('msg_error') != '0' )
    <div class="alert alert-danger">{{ session('msg_error')}}</div>
    {{ session('msg_error')  }}
    @endif
   
    @if (session('warning'))
    <div class="alert alert-warning">
        {{ session('warning') }}
    </div>
@endif
 


    @if (session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif
    @if ($errors->has('via_imagem_arquivo'))
    <div class="alert alert-danger">
        {{ $errors->first('via_imagem_arquivo') }}
    </div>
    @endif
    @if ($errors->has('via_justificativa'))
    <div class="alert alert-danger">
        {{ $errors->first('via_justificativa') }}
    </div>
    @endif
    
    <form action="{{ route ('viagens.adicionar_despesapost', ['via_id' => $viagens->via_id])}}" method="post" id="meuFormulario" enctype="multipart/form-data">
        @csrf
        
        <div class="row">
            <div class="form-group col-md-2 col-sm-12 d-inline">
                <label for="via_valor">Valor:</label>
                <input class="form-control" id="via_valor" name="via_valor" inputmode="numeric" onkeyup="formatarMoeda(this)" placeholder="R$ 0,00" value="{{old('via_valor')}}" required>
            </div>

           
<div class="form-group col-md-6 col-sm-12 d-inline">
    <label for="opcao">Tipo de despesa:</label>
    <select class="form-control custom-select" id="via_tipo" name="via_tipo" required>
        <option value="">Selecione</option>
        @foreach ($tipo_despesa as $tipodespesa)
        <option value="{{$tipodespesa->tip_despesa}}" 
            data-limite="{{$tipodespesa->tip_valorlimite}}"
            {{ old('via_tipo') == $tipodespesa->tip_despesa ? 'selected' : '' }}>
        {{$tipodespesa->tip_despesa}}
        </option>
        @endforeach
    </select>
    <p id="limite-info" class="text-danger" style="display: none;">
        Limite máximo total: R$ <span id="limite-max"></span>
    </p>
</div>

<!-- Campo para número de viajantes -->
{{-- <div class="form-group col-md-6 col-sm-12 d-inline"> --}}
    <label hidden for="qtd_viajantes">Quantidade de viajantes:</label>
    <input type="number" id="qtd_viajantes" class="form-control" value="1" min="1" hidden>
{{-- </div> --}}

<script>
document.getElementById('via_tipo').addEventListener('change', atualizarLimite);
document.getElementById('qtd_viajantes').addEventListener('input', atualizarLimite);

function atualizarLimite() {
    var limite = document.getElementById('via_tipo').options[document.getElementById('via_tipo').selectedIndex].getAttribute('data-limite');
    var qtdViajantes = parseInt(document.getElementById('qtd_viajantes').value) || 1; // Se estiver vazio, assume 1

    if (limite) {
        var total = parseFloat(limite) * {{$numViajantes}};
        document.getElementById('limite-max').innerText = total.toFixed(2);
        document.getElementById('limite-info').style.display = 'block';
    } else {
        document.getElementById('limite-info').style.display = 'none';
    }
}
</script>

            <div class="form-group col-md-2 col-sm-12 d-inline">
                <label for="opcao">Recurso utilizado:</label>
                <select class="form-control custom-select" id="via_recurso" name="via_recurso" onchange="mostrarCampos()" required>
                    <option class="select" value="">Selecione</option>
                    <option value="Cartão da viagem" {{old('via_recurso') == 'Cartão da viagem' ? 'selected' : ''}}>Cartão da viagem</option>
                    <option value="Recurso próprio" {{old('via_recurso') == 'Recurso próprio' ? 'selected' : ''}}>Recurso próprio</option>
                    <option value="Faturado" {{old('via_recurso') == 'Faturado' ? 'selected' : ''}}>Faturado</option>
                </select>
            </div>
            <div class="form-group col-md-2 col-sm-12 d-inline">
                <label for="opcao">Tipo de Recibo:</label>
                <select class="form-control custom-select" id="via_recibo" name="via_recibo" onchange="mostrarCampos()" required>
                    <option value="">Selecione</option>
                    <option value="Danfe NF" {{old('via_recibo') == 'Danfe NF' ? 'selected' : ''}}>
                        Danfe (NF)
                    </option>
                    <option value="Cupom fiscal com cnpj" {{old('via_recibo') == 'Cupom fiscal com cnpj' ? 'selected' : ''}}>
                        Cupom fiscal (com cnpj)
                    </option>
                    <option value="Cupom fiscal sem cnpj" {{old('via_recibo') == 'Cupom fiscal sem cnpj' ? 'selected' : ''}}>
                        Cupom fiscal (sem cnpj)
                    </option>
                    <option value="Recibo" {{old('via_recibo') == 'Recibo' ? 'selected' : ''}}>
                        Recibo
                    </option>
                    <option value="Canhoto do cartão" {{old('via_recibo') == 'Canhoto do cartão' ? 'selected' : ''}}>
                        Canhoto do cartão
                    </option>

                </select>
            </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="18" placeholder="XX.XXX.XXX/XXXX-XX" value="{{old('via_cnpj')}}" required>
                <small id="erro-cnpj" class="text-danger"></small>
            </div>

            <div class="form-group col-md-4 col-sm-6 d-inline">
                <label for="via_data">Data:</label>
                <input class="form-control" name="via_data" type="date" max="{{ \Carbon\Carbon::now()->setTimezone('America/Sao_Paulo')->format('Y-m-d') }}" value="{{old('via_data')}}" required>
            </div>
            <div class="form-group col-md-4 col-sm-6 d-inline">
                <label for="via_hora">Hora:</label>
                <input class="form-control" name="via_hora" type="time" value="{{old('via_hora')}}" required>
            </div>
            <div class="form-group col-md-12" id="justificativa-container">
               <label for="via_justificativa">Justificativa:</label>
                <textarea class="form-control" id="via_justificativa" name="via_justificativa" value="{{old('via_justificativa')}}"  rows="3">{{old('via_justificativa')}}</textarea>
                 <p class="text-danger">Apenas requirido se ultrapassar do valor limite</p>
            </div>
            
            <div class="form-group col-md-12" id="autorizado_por_container">
                <label for="via_autorizado_por">Autorizado por:</label>
                <input class="form-control" id="via_autorizado_por" name="via_autorizado_por" value="{{old('via_autorizado_por')}}" >
                 <p class="text-danger">Foi utilizado recurso prório, necessita aprovação de um gestor</p>
            </div>
            <script>
                function mostrarCampos() {
                    var recurso = document.getElementById("via_recurso").value;
                    var campoAutorizado = document.getElementById("autorizado_por_container");
                    var inputAutorizado = document.getElementById("via_autorizado_por");
            
                    if (recurso === "Recurso próprio") {
                        campoAutorizado.style.display = "block";
                        inputAutorizado.setAttribute("required", "required");
                    } else {
                        campoAutorizado.style.display = "none";
                        inputAutorizado.removeAttribute("required");
                        inputAutorizado.value = ""; // Opcional: limpar o campo ao ocultar
                    }
                }
            
                // Garantir que o estado inicial esteja correto ao recarregar a página
                document.addEventListener("DOMContentLoaded", function() {
                    mostrarCampos();
                });
            </script>
           
        </div>

        
    

        <hr style="color: #333; background-color: #333; height: 2px; border: none;">
        <label>Foto/PDF do comprovante:</label>
        <div class="form-group">
            <input class="form-control" name="via_imagem" id="via_imagem" type="hidden">
            <label for="file-input" class="btn btn-primary">Escolher Arquivo</label>
            
            
            <input id="file-input" type="file" name="via_imagem_arquivo" style="display:none;" onchange="previewFile()">
            {{-- <button type="button" class="btn btn-danger" onclick="removerArquivoTemp()">Remover Arquivo</button> --}}
            <p id="fileInfo"></p>
        </div>
        
        <div id="filePreview">
          
            <img id="fotoMiniatura" src="" alt="Pré-visualização da imagem" style="display: none; width: 100%; max-width: 320px;"> 
            <iframe id="pdfViewer" style="display: none; width: 100%; height: 400px;" frameborder="0"></iframe> 
        </div>
        
        <hr style="color: #333; background-color: #333; height: 2px; border: none;">

        <div class="col-12 text-center">
            <a href="{{ $voltar }}" class="btn btn-danger mr-5">Cancelar</a>
      
            <button id="btnEnviar" type="submit" class="btn btn-success ml-5">Incluir despesa</button>
        </div><br>

    </form>

</div>
 <div class="modal fade" id="modalAguarde" tabindex="-1" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" 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 recarregue a página para que não perca seus dados</strong>
      <div class="spinner-border text-primary mt-3" role="status"></div>
    </div>
  </div>
</div>
<script>
    document.getElementById('meuFormulario').addEventListener('submit', function(e) {
    $('#modalAguarde').modal('show'); // requer jQuery + Bootstrap
    this.querySelector('button[type="submit"]').disabled = true;
});
</script>
<script>


    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) {
        document.getElementById('fotoMiniatura').style.display = 'none';
        document.getElementById('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.';
        return;
    } else {
        fileInfo.style.color = 'green';
        fileInfo.textContent = `Nome do arquivo: ${file.name}, Tamanho: ${(file.size / 1024).toFixed(2)} KB`;
    }

    reader.onloadend = function () {
        if (file.type === "application/pdf") {
            document.getElementById('pdfViewer').src = reader.result;
            document.getElementById('pdfViewer').style.display = 'block';
            document.getElementById('fotoMiniatura').style.display = 'none';
        } else {
            document.getElementById('fotoMiniatura').src = reader.result;
            document.getElementById('fotoMiniatura').style.display = 'block';
            document.getElementById('pdfViewer').style.display = 'none';
        }
    };

    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 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('via_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')