@csrf
<input type="hidden" value="{{ $edit->id ?? '' }}" name="id">
@if ($errors->any())
    @foreach ($errors->all() as $item)
        {{ $item }}
    @endforeach
@endif

<div class="row">
    <div class="col-md-4">
        <!-- Cliente -->
        <div class="form-group">
            <label>Cliente</label>
            <select name="cliente_id" class="form-control">
                <option value="" hidden>Selecione</option>
                @foreach ($clientes as $customer)
                    <option value="{{ $customer['id'] }}">{{ $customer['nome'] }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Cliente -->
        <div class="form-group">
            <label>Nº da Factura</label>
            <input type="text" name="numero_factura" class="form-control" value="{{ $numero }}" readonly>

        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label>Data de Validade</label>
            <input type="date" name="data_factura" class="form-control" value="{{ date('Y-m-d') }}">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <!-- Cliente -->
        <div class="form-group">
            <label>Categoria</label>
            <select id="categoria_id" class="form-control">
                <option value="" hidden>Selecione</option>
                @foreach ($items as $item)
                    <option value="{{ $item['id'] }}">{{ $item['categoria'] }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="col-md-3">
        <!-- Cliente -->
        <div class="form-group">
            <label>Produto</label>
            <select id="produto_id" class="form-control">
                <option value="">Selecione um Produto</option>
            </select>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <label>Preço</label>
            <input type="text" name="date" class="form-control" id="preco" value="0.00 Kz" readonly>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <label>Quantidade</label>
            <input type="number" name="quantidade" min="1" class="form-control" value="1" id="qtd">
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <label>Factura</label>
            <button type="button" class="btn btn-success mb-3" id="btn_add" disabled>
                Adicionar Item
            </button>
        </div>
    </div>
</div>

<!-- Tabela de itens -->

<table class="table table-bordered" id="detalhes">
    <thead class="thead-light">
        <tr>
            <th>#</th>
            <th>Categoria</th>
            <th>Produto</th>
            <th>Quantidade</th>
            <th>Preço</th>
            <th>Subtotal</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <h4 id="total">Akz 0.00</h4><input type="hidden" id="total_venda" class="form-control"
                    name="total">
            </td>
        </tr>
    </tfoot>
</table>



<!-- Totais -->
<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label>Conta</label>
            <select name="conta_id" id="idtipo" class="form-control">
                <option value="" hidden>Selecione</option>
                @foreach ($contas as $item)
                    <option value="{{ $item['id'] }}">{{ $item['banco'] }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="col-md-8">
        <div class="form-group">
            <label>Descrição</label>
            <textarea name="" class="form-control" rows="5"></textarea>
        </div>
    </div>
</div>
<div class="col-md-4 offset-md-8">
    <div class="form-group">
        <label>Total</label>
        <input type="text" id="grandTotal" name="total_liquido" class="form-control" readonly>
    </div>
</div>


@push('script')
    <script>
        document.getElementById('categoria_id').addEventListener('change', function() {

            let categoriaId = this.value;
            let produtoSelect = document.getElementById('produto_id');
            const botao = document.getElementById("btn_add");
            botao.disabled = true;

            produtoSelect.innerHTML = '<option>Carregando...</option>';

            if (categoriaId) {
                
                fetch(`/produtos/${categoriaId}`)
                    .then(response => response.json())
                    .then(data => {
                        let options = '<option value="">Selecione um produto</option>';
                        data.forEach(produto => {
                            options += `<option value="${produto.id}" data-preco="${produto.preco}">
                        ${produto.nome}
                    </option>`;
                        });

                        produtoSelect.innerHTML = options;
                    });
            } else {
                produtoSelect.innerHTML = '<option value="">Nenhum produto</option>';
            }
        });

        function price() {
            let taxSelect = document.getElementById('produto_id');
            const botao = document.getElementById("btn_add");
            botao.disabled = false;
            let selectedOption = taxSelect.options[taxSelect.selectedIndex];

            let prices = parseFloat(selectedOption.getAttribute('data-preco')) || 0;

            document.getElementById('preco').value = prices.toLocaleString('pt-AO', {
                minimumFractionDigits: 2
            });

        }

        // Eventos
        document.getElementById('produto_id').addEventListener('change', price);
        /*$(document).ready(function() {
            $('#idtipo').change(function(e) {
                var tipo = $('#idtipo').val();
                $.getJSON('http://localhost/estoquevenda/lib/selects.php?opcao=select_produtos&valor=' +
                    tipo,
                    function(dados) {

                        if (dados.length > 0) {
                            var option = '<option hidden>Seleccionar O Produto</option>';
                            $.each(dados, function(i, obj) {
                                option += '<option value="' + obj.idproduto + '_' + obj.venda +
                                    '_' + obj.qtd + '">' + obj.titulo + ' {' + obj.subtitulo +
                                    '}</option>';
                            })
                        } else {
                            var option = '<option hidden>Nenhum Produto para Esta Categoria</option>';
                        }
                        $('#idproduto').html(option).show();
                    })
            })
        })*/
        //VENDAS
        var cont = 0;
        total = 0;
        subtotal = [];
        $('#salvar').hide();
        $('#troco').hide();
        $('#cancelar').hide();
        $('#id_produto').change(mostrarStock);
        $('#troco').keyup(novoTroco);
        $(document).ready(function() {
            $('#btn_add').click(function() {
                adicionar();
            });
        });

        function limpar() {
            $('#qtd').val("1");
            $('#preco').val("");
            $('#stock').val("0");
            $('#imposto').val("0");
        }

        function validar() {
            if (total > 0) {
                $('#salvar').show();
                $('#cancelar').show();
                $('#troco').show();
            } else {
                $('#troco').hide();
                $('#salvar').hide();
                $('#cancelar').hide();
            }
        }

        function novoTroco() {
            troco = $('#troco').val();
            resultado = troco - total;
            if (troco < total) {
                $('#salvar').hide();
                $('#cancelar').hide();
            } else {
                $('#salvar').show();
                $('#cancelar').show();
            }
            $('#total_cliente').show();
            $('#resultado_venda').html("Akz " + resultado);
            document.getElementById("total_cliente").setAttribute('value', resultado);
            //$('#total_cliente').val(resultado);
        }



        function mostrarStock() {
            dadosProduto = document.getElementById('id_produto').value.split('_');
            $('#preco').val(dadosProduto[1]);
            $('#estoque').val(dadosProduto[2]);
        }

        function adicionar() {


            /*dadosProduto = document.getElementById('idproduto').value.split('_');
             */
            let taxSelect = document.getElementById('produto_id');
            let selectedOption = taxSelect.options[taxSelect.selectedIndex];

            idproduto = taxSelect.value;
            preco = parseFloat(selectedOption.getAttribute('data-preco')) || 0;
            categoria = $('#categoria_id option:selected').text();
            produto = $('#produto_id option:selected').text();
            qtd = $('#qtd').val();
            stock = $('#stock').val();

            let existe = document.querySelector(`tr[data-id="${idproduto}"]`);

            if (existe) {
                alert('Produto já foi adicionado!');
                return;
            }

            $('#troco').show();
            if (idproduto != "" && qtd != "" && qtd > 0 && preco != "") {
                //if (parseInt(qtd) <= parseInt(stock)) {
                subtotal[cont] = (qtd * preco);
                total = total + subtotal[cont];
                var fila = '<tr class="selected" id="fila' + cont +
                    '"><td><button type="button" class="btn btn-danger" onclick="eliminar(' + cont +
                    ');">X</button></td><td><input type="hidden" name="produto_id[]"value="' + idproduto + '">' +
                    categoria + '</td><td>' + produto +
                    '</td><td><input type="hidden" name="quantidade[]" id="novoQtdMenos" readonly value="' + qtd +
                    '">' + qtd + '</td><td><input type="hidden" name="preco[]" value="' + preco + '">' + preco + '</td><td>' + subtotal[
                        cont] + '</td>';
                cont++;
                $('#total').html("Akz " + total);
                $('#total_venda').val(total);
                $('#grandTotal').val(total);
                $('#salvar').hide();
                $('#cancelar').hide();
                $('#detalhes').append(fila);
                validar();
                limpar();
                /*} else {
                    alert('Quantidade superior que a prateleira');
                }*/
            } else {
                alert("Erro ao adicionar detalhe de produto");
            }
        }

        function eliminar(index) {
            total = total - subtotal[index];
            $('#total').html("Akz " + total);
            $('#total_venda').val(total);
            $('#fila' + index).remove();
            validar();
        }

        function troco() {
            $('#resultado_venda').val(total);
        }

        function removerProduto(index) {
            total = total - subtotal[index];
            $('#total').html("Akz " + total);
            $('#total_venda').val(total);
            $('#fila novoQtdMenos' + index).val(qtd - 1);
            alert(qtd - 1);
        }
    </script>
@endpush