@extends('layouts.simple.master')

@section('title', 'Form Validation')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/intltelinput.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/tagify.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/flatpickr/flatpickr.min.css') }}">
<style>
    ul.list-group {
        max-height: 200px;
        /* Altura máxima antes de ativar o scroll */
        overflow-y: auto;
        /* Ativa a barra de rolagem vertical */
        border: 1px solid #ddd;
        /* Opcional: Adiciona borda para um visual mais claro */
    }
</style>

@endsection

@section('main_content')
<div class="container-fluid">
    <div class="page-title">
        <div class="row">
            <div class="col-sm-6">
                <h3>Incluir Pedido</h3>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href=""> <svg class="stroke-icon">
                                <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                            </svg></a></li>
                    <li class="breadcrumb-item">Vendas</li>
                    <li class="breadcrumb-item active">Pedidos Saída</li>
                </ol>
            </div>
        </div>
    </div>
</div><!-- Container-fluid starts-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <form class="theme-form needs-validation custom-input" name="pedidos_form" id="pedidos_form" novalidate="" action="{{ route('pedidos.create-pedidos') }}" method="post">
                    @csrf
                    <div class="card-header">
                        <h5>Informações</h5><span><a href="#"></a></span>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <label class="form-label" for="validationVenda">N° Pedido</label>
                                    <input class="form-control" readonly id="validationVenda" value="{{$venda}}" name="validationVenda" type="text" oninput="handleInput(event)">
                                </div>
                                <div class="col-md-3 mb-3 ">
                                    <label class="form-label" for="validationDt_entrada">Data de Entrada</label>
                                    <input class="form-control digits" readonly name="validationDt_entrada" id="validationDt_entrada" type="text" Value="16-06-2025 04:48">
                                    <div class="invalid-feedback">Selecione a data</div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label" for="validationDt_saida">Data de Saída</label>
                                    <input class="form-control digits" name="validationDt_saida" id="validationDt_saida" type="datetime-local" value="">
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label" for="validationDt_prevista">Data Prevista</label>
                                    <input class="form-control digits" name="validationDt_prevista" id="validationDt_prevista" type="date" value="">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-3">

                                    <label class="form-label" for="validationDest">Destinatário</label>
                                    <select class="form-select" id="validationDest" name="validationDest" required="">
                                        <option value="">ESCOLHA</option>
                                        @foreach($dest as $dt)
                                        <option value="{{ $dt->id }}">{{ $dt->nome }}</option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback">Selecione o Destinátario</div>
                                    <!-- <div class="select-box" style="margin: 26px 0px 0px 0px;">
                                        <div class="options-container custom-scrollbar">                                                                               
                                            @foreach($dest as $dt)           
                                                <div class="selection-option">                                     
                                                <input class="radio" id="validationdest" type="radio" name="category"><label class="mb-0" for="validationdest">{{$dt->nome}}</label></div>
                                                <div class="invalid-feedback">teste</div>
                                            @endforeach
                                        </div>
                                        <div class="selected-box">Destinatário</div>
                                        <div class="search-box"><input type="text" placeholder="Start Typing..."  >
                                        </div>
                                    </div>-->
                                </div>
                                <div class=" col-md-4 mb-3" id="div_cnpj">
                                    <label class="form-label" for="validationTipo_pedido">Tipo Pedido</label>
                                    <select class="form-select" id="validationTipo_pedido" name="validationTipo_pedido" required="">
                                        <option value="">ESCOLHA</option>
                                        @foreach($tipo_pedidos as $tp)
                                        <option value="{{ $tp->id }}">{{ $tp->descricao }}</option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback">Selecione o Tipo de Pedido</div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label" for="validationEtapa_pedido">Status</label>
                                    <select class="form-select" id="validationEtapa_pedido" name="validationEtapa_pedido">
                                        @foreach($etapa_pedidos as $ep)
                                        <option value="{{ $ep->id }}">{{ $ep->descricao }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label" for="cfop">Natureza da Operação</label>
                                    <input type="text" id="cfop" class="form-control" name="validationNop" id="validationNop" placeholder="Digite o CFOP ou descrição">
                                    <ul id="cfop-autocomplete-list" class="list-group" style="position: absolute; z-index: 1000; display: none;"></ul>
                                    <div class="invalid-feedback">Selecione a Natureza da operação</div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label" for="validationVendedor">Vendedor</label>
                                    <input class="form-control" id="validationVendedor" name="validationVendedor" type="text" oninput="handleInput(event)">
                                </div>
                            </div>
                        </div>
                        <div class="card-header">
                            <h5>Produtos</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <label class="form-label" for="validationProd">Produto*</label>
                                    <select class="form-select" id="validationprodutos_0" name="validationprodutos[]" onchange="pegaDados(this, 0)" required="">
                                        <option value="">ESCOLHA</option>
                                        @foreach($produtos as $prod)
                                        <option value="{{ $prod->id }}">{{ $prod->codigo_sku}} - {{ $prod->nome }}</option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback">Selecione o Produto</div>
                                </div>
                                <div class="col-md-2 mb-3"> <!-- disabled="disabled" -->
                                    <label class="form-label" for="validationLote">ID/UID/DISP</label>
                                    <input class="form-control" id="validationLote_0" name="validationlote[]" type="text" oninput="handleInput(event)" required="">
                                    <ul id="lote-autocomplete-list_O" class="list-group position-absolute w-100" style="z-index: 1000; display: none;"></ul>
                                </div>
                                <div class="col-md-1 mb-3">
                                    <label class="form-label" for="validationsku">SKU</label>
                                    <input class="form-control" id="validationsku_0" readonly name="validationsku[]" type="text" oninput="handleInput(event)" required="">
                                </div>
                                <div class="col-md-1 mb-3">
                                    <label class="form-label" for="validationQuant">Qtde</label>
                                    <input class="form-control" id="validationQuant_0" name="validationQuant[]" type="text" onchange="updateSums();fnDesconto()" oninput="handleInput(event)" required="">
                                </div>
                                <!-- <div class="col-md-1 mb-3">
                                    <label class="form-label" for="validationUN">UN</label>
                                    <input class="form-control" id="validationUN_0" disabled="disabled" name="validationUN[]" type="text" oninput="handleInput(event)" required="">
                                </div>-->
                                <div class="col-md-1 mb-3">
                                    <label class="form-label" for="validationVlr_uni">Vlr Uni</label>
                                    <input class="form-control" id="validationVlr_uni_0" name="validationVlr_uni[]" type="text" onchange="updateSums();fnDesconto()" oninput="handleInput(event)" required="">
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label" for="validationTotal">Total</label>
                                    <input class="form-control" id="validationTotal_0" readonly name="validationTotal[]" type="text" oninput="handleInput(event)">
                                </div>
                                <div id="cart_fields"></div>
                                <div class="col-12">
                                    <div class="input-group-btn">
                                        <button class="btn btn-success" type="button" onclick="cart_fields();">Adicioanar Item<span class="fa-solid fa-plus" aria-hidden="true"></span>
                                        </button>
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </div>

                        </div>
                        <div class="card-header">
                            <h5>Totais</h5><span><a href="#"></a></span>
                        </div>
                        <div class="card-body">
                            <div id="cart_fields"></div>
                            <div class="row">
                                <div class="col-md-2 mb-3">
                                    <label class="form-label" for="validationNitens">N° de itens</label>
                                    <input class="form-control" id="validationNitens" readonly name="validationNitens" type="text" oninput="handleInput(event)">
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label" for="validationSomaQtdes">Soma de Qtdes</label>
                                    <input class="form-control" id="validationSomaQtdes" readonly name="validationSomaQtdes" type="text" maxlength="15" oninput="handleInput(event)">
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label" for="validationDesconto">Desconto</label>
                                    <input class="form-control" id="validationDesconto" name="validationDesconto" type="text" value="0" onchange="fnDesconto()" maxlength="15" oninput="handleInput(event)">
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label" for="validationimp">Impostos</label>
                                    <input class="form-control" id="validationimp" readonly name="validationimp" type="text" oninput="handleInput(event)" value="0">
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label" for="validationTotalProds">Total de Produtos</label>
                                    <input class="form-control" id="validationTotalProds" readonly name="validationTotalProds" type="text" oninput="handleInput(event)">
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label" for="validationTotalVenda">Total da Venda</label>
                                    <input class="form-control" id="validationTotalVenda" readonly name="validationTotalVenda" type="text" oninput="handleInput(event)">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label" for="validationObs">Observação</label>
                                    <textarea class="form-control" id="validationObs" name="validationObs" oninput="handleInput(event)"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="card-header">
                            <h5>Pagamento</h5><span><a href="#"></a></span>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label" for="validationCondpg">Condicao de Pagamento</label>
                                    <input class="form-control" id="validationCondpg" name="validationCondpg" type="text" oninput="handleInput(event)">
                                </div>

                                <div class="col-md-4 mb-3">
                                    <label class="form-label" for="validationCategoria">Categoria</label>
                                    <input class="form-control" id="validationCategoria" name="validationCategoria" type="text" oninput="handleInput(event)">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <button id="btn_gerar" class="btn btn-success" type="submit" style="margin: 29px 0px 0px 0px;">Gerar</button>
                                </div>

                            </div>
                        </div>
                        <div class="card-header">
                            <h5>Transporte</h5><span><a href="#"></a></span>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-2 mb-3">
                                    <label class="form-label" for="validationTransp">Transportador</label>
                                    <input class="form-control" id="validationTransp" name="validationTransp" type="text" oninput="handleInput(event)">
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label" for="validationfrete_conta">frete por conta</label>
                                    <input class="form-control" id="validationfrete_conta" name="validationfrete_conta" type="text" oninput="handleInput(event)">
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label" for="validationQ">Quantidade</label>
                                    <input class="form-control" id="validationQ" name="validationQ" type="text" oninput="handleInput(event)">
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label" for="validationPesoBruto">Peso Bruto</label>
                                    <input class="form-control" id="validationPesoBruto" name="validationPesoBruto" type="text" oninput="handleInput(event)">
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label" for="validationFrt">Frete</label>
                                    <input class="form-control" id="validationFrt" name="validationFrt" type="text" oninput="handleInput(event)">
                                </div>
                            </div>
                        </div>
                        <div class="card-header">
                            <h5>Dados Adicionais</h5><span><a href="#"></a></span>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label" for="validationObs_">Observações</label>
                                    <textarea class="form-control" id="validationObs_" name="validationObs_" oninput="handleInput(event)"></textarea>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label" for="validationObs__">Observações Internas</label>
                                    <textarea class="form-control" id="validationObs__" name="validationObs__" oninput="handleInput(event)"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="card-header">
                            <h5>Campos Personalizados</h5><span><a href="#"></a></span>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="validationAss">Assinatura</label>
                                    <input class="form-control" id="validationAss" name="validationAss" type="text" oninput="handleInput(event)">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="validationNTermi">Número do Terminal</label>
                                    <input class="form-control" id="validationNTermi" name="validationNTermi" type="text" oninput="handleInput(event)">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="validationCobrar">Cobrar</label>
                                    <input class="form-control" id="validationCobrar" name="validationCobrar" type="text" oninput="handleInput(event)">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="validationconc">Concluído</label>
                                    <input class="form-control" id="validationconc" name="validationconc" type="text" oninput="handleInput(event)">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label" for="validationMotivo">Motivo</label>
                                    <textarea class="form-control" id="validationMotivo" name="validationMotivo" oninput="handleInput(event)"></textarea>
                                </div>


                            </div>
                        </div>
                        <!--   <div class="select-box select-box2">
                            <div id="teste-cont" class="options-container options-container2 custom-scrollbar">
                                <div class="selection-option selection-option2" id="selection-op"><input class="radio" id="webdesigner" type="radio" name="category"><label class="mb-0"
                                        for="webdesigner">web&ndash;designer</label></div>
                                <div class="selection-option selection-option2" id="selection-op"><input class="radio" id="film" type="radio"
                                        name="category"><label class="mb-0" for="film">Film
                                        &amp; animation</label></div>
                                <div class="selection-option selection-option2" id="selection-op"><input class="radio" id="software" type="radio"
                                        name="category"><label class="mb-0" for="software">Software
                                        engineer</label></div>

                            </div>
                            <div class="selected-box selected-box2" id="teste">Select Your Profession</div>
                            <div class="search-box search-box2" id="teste-box"><input type="text" placeholder="Start Typing...">
                            </div>
                        </div>-->


                </form>

                <div class="card-footer text-end">
                    <button id="btn_cadastrar" class="btn btn-success" type="submit">Salvar</button>
                    <a href="{{ route('pedidos') }}" class="btn btn-secondary">Voltar</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('assets/js/select2/tagify.js') }}"></script>
<script src="{{ asset('assets/js/select2/tagify.polyfills.min.js') }}"></script>
<script src="{{ asset('assets/js/select2/intltelinput.min.js') }}"></script>
<script src="{{ asset('assets/js/select2/telephone-input.js') }}"></script>
<script src="{{ asset('assets/js/select2/custom-inputsearch.js') }}"></script>
<script src="{{ asset('assets/js/select2/select3-custom.js') }}"></script>

<script src="{{ asset('assets/js/form-validation-custom.js') }}"></script>
<script src="{{ asset('assets/js/height-equal.js') }}"></script>
<script src="{{ asset('assets/js/custom-animated-form.js') }}"></script>
<script src="{{ asset('assets/js/custom-pwd-validation.js') }}"></script>
<script src="{{ asset('assets/js/bootstrap-maxlength.min.js') }}"></script>
<script src="{{ asset('assets/js/bootstrap-multiselectsplitter.min.js') }}"></script>
<script src="{{ asset('assets/js/base-input/custom-inputs.js') }}"></script>
<script src="{{ asset('assets/js/base-input/maxlength-input.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script src="{{ asset('assets/js/flat-pickr/flatpickr.js') }}"></script>
<script src="{{ asset('assets/js/flat-pickr/custom-flatpickr.js') }}"></script>
<script>
    jQuery(function() {
        initDatePicker();
    });

    function initDatePicker() {
        jQuery(".datepicker").flatpickr({
            enableTime: true,
            dateFormat: "d/m/Y H:i",
            defaultDate: new Date()

        });
    }

    /* Natureza da operação*/
    document.addEventListener('DOMContentLoaded', function() {
        const cfopInput = document.getElementById('cfop');
        const cfopList = document.getElementById('cfop-autocomplete-list');

        // Recebendo os dados do Blade via JSON embutido
        const cfopData = @json($natureza_operacao); // Converte array do Blade para JavaScript isso vem do banco

        // Função para filtrar e exibir sugestões
        function showCFOPSuggestions(query) {
            const filteredData = cfopData.filter(item => {
                return item.cfop.includes(query) || item.descricao_cfop.toLowerCase().includes(query.toLowerCase());
            });

            cfopList.innerHTML = ''; // Limpa a lista de sugestões

            filteredData.forEach(item => {
                const listItem = document.createElement('li');
                listItem.classList.add('list-group-item');
                listItem.style.cursor = 'pointer';
                listItem.textContent = `${item.cfop} - ${item.descricao_cfop}`;
                listItem.addEventListener('click', function() {
                    cfopInput.value = `${item.cfop} - ${item.descricao_cfop}`;
                    cfopList.style.display = 'none'; // Esconde a lista de sugestões
                });
                cfopList.appendChild(listItem);
            });

            cfopList.style.display = filteredData.length > 0 ? 'block' : 'none';
        }

        // Evento de input para mostrar sugestões
        cfopInput.addEventListener('input', function() {
            const query = cfopInput.value.trim();
            if (query.length > 0) {
                showCFOPSuggestions(query);
            } else {
                cfopList.style.display = 'none'; // Esconde a lista se o campo estiver vazio
            }
        });

        // Evento para fechar a lista ao clicar fora
        document.addEventListener('click', function(event) {
            if (!cfopInput.contains(event.target) && !cfopList.contains(event.target)) {
                cfopList.style.display = 'none';
            }
        });
    });

    function pegaDados(element, id) {

        console.log($(element).val());

        var prod_sel = $(element).val();
        $('#validationTotal_' + id).val("R$ 0.00");
        $.ajax({
            'processing': true,
            'serverSide': false,
            type: "GET",
            data: {
                item_produto: prod_sel
            },
            url: "/pedidos/detalhesProd",
            success: function(data) {
                $('#validationsku_' + id).val(data.codigo_sku);
                $('#validationQuant_' + id).val('0');
                $('#validationUN_' + id).val(data.unidade_sigla);
                $('#validationVlr_uni_' + id).val(data.preco);
            }
        });
    }


    // Dynamic Form Field
    var room = 1;

    function cart_fields() {
        room++;
        var objTo = document.getElementById("cart_fields");
        var divtest = document.createElement("div");
        divtest.setAttribute("class", "form-group removeclass" + room);
        var rdiv = "removeclass" + room;
        divtest.innerHTML =
            '<div class="row">' +
            '<div class="col-md-3 mb-3">' +
            '<label class="form-label" for="validationProd">Produto</label>' +
            '<select class="form-select" id="validationprodutos_' + room + '" name="validationprodutos[]" onchange="pegaDados(this, ' + room + ')">' +
            '<option value="0">ESCOLHA</option>' +
            '@foreach($produtos as $prod)<option value="{{ $prod->id }}">{{ $prod->nome }}</option>@endforeach' +
            '</select>' +
            '</div>' +
            ' <div class="col-md-2 mb-3"> ' +
            '<label class="form-label" for="validationLote">ID/UID/DISP</label>' +
            '<input class="form-control" id="validationLote_' + room + '  name="validationlote[]" type="text" oninput="handleInput(event)" required="">' +
            '<ul id="lote-autocomplete-list_' + room + '" class="list-group position-absolute w-100" style="z-index: 1000; display: none;"></ul>' +
            '</div>' +
            '<div class="col-md-1 mb-3">' +
            '<label class="form-label" for="validationsku">SKU</label>' +
            '<input class="form-control" id="validationsku_' + room + '" disabled="disabled" name="validationsku[]" type="text">' +
            '</div>' +
            '<div class="col-md-1 mb-3">' +
            '<label class="form-label" for="validationQuant">Qtde</label>' +
            '<input class="form-control" id="validationQuant_' + room + '" onchange="updateSums()" name="validationQuant[]" type="text">' +
            '</div>' +
            '<div class="col-md-1 mb-3">' +
            '<label class="form-label" for="validationVlr_uni">Vlr Uni</label>' +
            '<input class="form-control" id="validationVlr_uni_' + room + '" onchange="updateSums()" name="validationVlr_uni[]" type="text">' +
            '</div>' +
            '<div class="col-md-2 mb-3">' +
            '<label class="form-label" for="validationTotal">Total</label>' +
            '<input class="form-control" id="validationTotal_' + room + '" disabled="disabled" name="validationTotal[]" type="text">' +
            '</div>' +
            '<div class="col-md-2 mb-3">' +
            '<div class="input-group-btn" style="margin: 29px 0px 0px 0px;"><button class="btn btn-danger" onclick="remove_cart_fields(' + room + ');" type="button"><i class="fas fa-trash-alt"></i></button></div>' +
            '</div>' +
            '</div>';

        objTo.appendChild(divtest);
        updateSums(); //atualiza
    }

    function remove_cart_fields(rid) {
        $(".removeclass" + rid).remove();
    }

    function calculateTotal(id) {

        var quantity = document.getElementById("validationQuant_" + id).value;
        var unitPrice = document.getElementById("validationVlr_uni_" + id).value;

        quantity = formataNumero(quantity);
        unitPrice = formataNumero(unitPrice);

        var total = quantity * unitPrice;
        document.getElementById("validationTotal_" + id).value = total.toFixed(2);

        updateSums(); // Atualiza os totais gerais
    }

    document.addEventListener("input", function(event) {
        updateSums();
    });

    function updateSums() {
        // Contar todas as linhas
        var allQuantities = document.querySelectorAll("[id^=validationQuant_]");
        document.getElementById("validationNitens").value = allQuantities.length;

        // Somar quantidades
        var sumQuantities = 0;
        allQuantities.forEach(input => {
            sumQuantities += parseFloat(input.value) || 0;
        });
        document.getElementById("validationSomaQtdes").value = sumQuantities;

        // Somar total dos produtos (convertendo valores corretamente)
        var sumTotal = 0;
        document.querySelectorAll("[id^=validationTotal_]").forEach(input => {

            sumTotal += formataNumero(input.value);
        });

        document.getElementById("validationTotalProds").value = sumTotal.toLocaleString("pt-BR", {
            style: "currency",
            currency: "BRL"
        });;

    }


    function formataNumero(value) {
        return parseFloat(
            value.replace(/\s/g, '')
            .replace('R$', '')
            .replace('.', '')
            .replace(',', '.')
        ) || 0;
    }





    function handleInput(e) {
        var ss = e.target.selectionStart;
        var se = e.target.selectionEnd;
        e.target.value = e.target.value.toUpperCase();
        e.target.selectionStart = ss;
        e.target.selectionEnd = se;
    }


    document.addEventListener("DOMContentLoaded", function() {
        atualizarTodosTotais();
    });

    // pega o evento das quantidades
    document.addEventListener("input", function(event) {
        if (event.target.matches("[id^='validationQuant_'], [id^='validationVlr_uni_']")) {
            calcularTotalItem(event.target);
        }
    });

    function calcularTotalItem(element) {
        let index = element.id.match(/\d+$/)[0];

        let quantidade = document.getElementById(`validationQuant_${index}`);
        let valorUnitario = document.getElementById(`validationVlr_uni_${index}`);
        let total = document.getElementById(`validationTotal_${index}`);

        let qtd = parseFloat(quantidade.value) || 0;
        let vlr = parseFloat(valorUnitario.value) || 0;

        let resultado = qtd * vlr;
        total.value = resultado.toLocaleString("pt-BR", {
            style: "currency",
            currency: "BRL"
        });
    }

    function atualizarTodosTotais() {
        document.querySelectorAll("[id^='validationQuant_']").forEach(quantidade => {
            calcularTotalItem(quantidade);
        });
    }


    function limparCampos(element) {
        document.getElementById(`validationTotal_${index}`).value = "";
    }


    //* UID Autocomplet*// validationLote_0
    document.addEventListener("DOMContentLoaded", function() {
        const loteInputs = document.querySelectorAll("[id^='validationLote_']"); // Seleciona todos os inputs que começam com 'validationLote_'

        async function fetchLoteData() {
            try {
                const response = await fetch("https://www.geckobrasil.com/api/dispositivos-livres.php", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    }
                });
                const data = await response.json();
                console.log("Resposta do servidor:", data);
                if (!Array.isArray(data)) throw new Error("Dados inválidos");
                return data;
            } catch (error) {
                console.error("Erro ao buscar dados:", error);
                return [];
            }
        }

        function criarLista(id) {
            let lista = document.createElement("ul");
            lista.classList.add("autocomplete-list_" + id, "list-group");
            lista.setAttribute("id", `lote-autocomplete-list_${id}`);
            document.body.appendChild(lista);
            return lista;
        }

        loteInputs.forEach(input => {
            const inputId = input.id.split("_")[1]; // Obtém o índice do input
            let loteList = criarLista(inputId);

            async function mostrarLote() {
                const query = input.value.trim();
                if (query.length === 0) {
                    loteList.innerHTML = "";
                    loteList.style.display = "none";
                    return;
                }

                const loteData = await fetchLoteData();

                const filteredData = loteData.filter(item =>
                    item.numero && item.numero.includes(query) ||
                    item.tipo && item.tipo.toLowerCase().includes(query.toLowerCase())
                );

                loteList.innerHTML = "";
                if (filteredData.length === 0) {
                    loteList.style.display = "none";
                    return;
                }

                filteredData.forEach(item => {
                    const listItem = document.createElement("li");
                    listItem.classList.add("list-group-item");
                    listItem.style.cursor = "pointer";
                    listItem.textContent = `${item.numero}`;

                    listItem.addEventListener("click", function() {
                        input.value = `${item.numero}`;
                        loteList.style.display = "none";
                    });

                    loteList.appendChild(listItem);
                });

                let rect = input.getBoundingClientRect();
                loteList.style.position = "absolute";
                loteList.style.left = `${rect.left}px`;
                loteList.style.top = `${rect.bottom + window.scrollY}px`;
                loteList.style.display = "block";
            }

            input.addEventListener("input", mostrarLote);

            document.addEventListener("click", function(event) {
                if (!input.contains(event.target) && !loteList.contains(event.target)) {
                    loteList.style.display = "none";
                }
            });
        });
    });



    function fnDesconto() {
        total = $('#validationTotalProds').val();
        desconto = $('#validationDesconto').val();

        validationTotalProds = formataNumero(total);
        validationDesconto = formataNumero(desconto);
        resultado = validationTotalProds - validationDesconto;



        total = resultado.toLocaleString("pt-BR", {
            style: "currency",
            currency: "BRL"
        });

        $("#validationTotalVenda").val(total);
    }
</script>
@endsection