<?php $__env->startSection('content'); ?>
    <style>
        #catalogo_productos {
            width: 100%;
        }
    </style>
    <form action="<?php echo e(route('compras.guardar_importacion')); ?>" method="POST" onkeydown="return event.key != 'Enter';"
        id="formEnviar" enctype="multipart/form-data">
        <?php echo csrf_field(); ?>
        <div id="contenedor_interno" class="container-fluid">
            <div class="row ">
                <div class="col-md-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="<?php echo e(route('compras.dashboard')); ?>">Compras</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Nueva Importacion</li>
                        </ol>
                    </nav>
                </div>
                <hr>
            </div>
        </div>

        <div id="contenedor_contenido" class="container-fluid px-lg-5">
            <div class="row">
                <div class="col-md-12">
                    <h2>Compra al Exterior<span id='referencia'></span> <span id='ver_cuenta_corriente'></span></h2>
                </div>
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="" class="col-sm-4 col-form-label">Proveedor </label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="proveedor" onchange="infoCliente(this)"
                                        id="exampleFormControlSelect1" required>
                                        <option value="">Seleccione un proveedor</option>
                                        <?php $__currentLoopData = $proveedores; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $proveedor): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($proveedor['id']); ?>"><?php echo e($proveedor['nombre']); ?></option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="" class="col-sm-4 col-form-label">Correo Electronico</label>
                                <div class="col-sm-8">
                                    <input type="text" readonly class="form-control-plaintext" id="correo"
                                        value="" placeholder="">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="" class="col-sm-4 col-form-label">Dirección</label>
                                <div class="col-sm-8">
                                    <p class="form-control-plaintext" id="direccion">No Disponible</p>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="" class="col-sm-4 col-form-label">Sitio Web</label>
                                <div class="col-sm-8">
                                    <a href="#" target="_blank" rel="noopener noreferrer" id="web"
                                        class="h5 text-primary"></a>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="" class="col-sm-4 col-form-label">Contacto</label>
                                <div class="col-sm-8">
                                    <ul>
                                        <li>
                                            <div>
                                                <label for="nombre_contacto" class="font-weight-bolder">Nombre: </label>
                                                <p id="nombre_contacto" class="h5">No disponible</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div>
                                                <label for="puesto_contacto" class="font-weight-bolder">Puesto: </label>
                                                <p id="puesto_contacto" class="h5">No disponible</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="" class="col-sm-4 col-form-label">Moneda</label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="id_moneda" id="id_moneda">
                                        <option value="2">$</option>
                                        <option value="1">Q</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group row">
                                <label for="" class="col-sm-4 col-form-label">Tipo de cambio</label>
                                <div class="col-sm-8">
                                    <input type="number" step="0.000001" name="tipo_cambio" class="form-control-plaintext"
                                        placeholder="">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="" class="col-sm-4 col-form-label">Condiciones de pago*</label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="condiciones_pago" id="condiciones_pago" required>
                                        <option disabled selected>Porcentajes pago</option>
                                        <option value="100%">100%</option>
                                        <option value="80% - 20%">80% - 20%</option>
                                        <option value="70% - 30%">70% - 30%</option>
                                        <option value="60% - 40%">60% - 40%</option>
                                        <option value="50% - 50%">50% - 50%</option>
                                        <option value="40% - 60%">40% - 60%</option>
                                        <option value="30% - 70%">30% - 70%</option>
                                        <option value="20% - 80%">20% - 80%</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="" class="col-sm-4 col-form-label">Incoterm*</label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="incoterm" id="incoterm" required>
                                        <option disabled selected>Seleccione</option>
                                        <option value="1">EXW</option>
                                        <option value="2">FOB</option>
                                        <option value="3">CIF</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="" class="col-sm-4 col-form-label">Observaciones</label>
                                <div class="col-sm-8">
                                    <input type="text" name="observaciones" class="form-control-plaintext"
                                        value="" placeholder="">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="" class="col-sm-4 col-form-label">Numero de PI*</label>
                                <div class="col-sm-8">
                                    <input type="text" name="numero_pi" class="form-control-plaintext" value=""
                                        placeholder="" required>
                                </div>
                            </div>
                            
                            <div class="form-group row">
                                <label for="" class="col-sm-4 col-form-label">Cargar Documento Proforma</label>
                                <div class="col-sm-8">
                                    <input type="file" name="proforma_file" class="form-control-plaintext"
                                        value="" placeholder="">
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <!-- Productos -->
                    <div class="row">
                        <div class="col-md-12">
                            <ul class="nav nav-tabs" id="myTab">
                                <li class="nav-item">
                                    <a href="#home" class="nav-link" data-toggle="tab">Lista del pedido</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade" id="home">
                                    <table class="table-responsive">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th scope="col" style='min-width: 500px;'>Descripción de Producto</th>
                                                <th scope="col">Cantidad</th>
                                                <th scope="col">Unidad de medida</th>
                                                <th scope="col">Precio unitario</th>
                                                <th scope="col">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody id="contenedorProductos">
                                            <tr class="producto">
                                                <td><span class="numerofila"></span><a class='eliminarFila'
                                                        onclick="eliminarFila(this)"><i class="far fa-trash-alt"></i></a>
                                                </td>
                                                <td>
                                                    <input type="text" id="catalogo_productos" class="producto_nombre"
                                                        required>
                                                    <input type="hidden" class="id_producto" name="id_p[]">
                                                </td>
                                                <td><input type="text" onchange="calcularSubTotal(this)"
                                                        name="cantidad_p[]" class="cantidad" data-cantidad="0" required>
                                                </td>
                                                <td><input class="unidad_medida" type="text"><input class="idMedida"
                                                        name="id_medida[]" type="hidden"></td>
                                                <td><input class="precio_sugerido" type="text" name="precio_p[]"
                                                        onchange="calcularSubTotal(this)"></td>
                                                <td><input type="text" class="subTotal" readonly></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <br>
                                    <a class="botonColor" onclick="nuevaFila()">Agregar producto</a>
                                    <hr>
                                    <div class="d-flex justify-content-end">
                                        <p class="">
                                            Cantidad Total:
                                            <span id="totalCantidad">0</span>
                                        </p>
                                    </div>
                                    <div class="total">
                                        <p class="mostrarTotal">Total: <span id="signo_moneda">$</span> <span
                                                id="totalTotal">0.00</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <button class="botonColor" id="botonEnviar">Guardar</button>
    </form>
    <link href="<?php echo e(asset('js/jquery_ui/jquery-ui.css')); ?>" rel="stylesheet">
    <script src="<?php echo e(asset('js/jquery_ui/jquery-ui.js')); ?>"></script>
    <script>
        let precioSinIva = 0;
        let activoProductos = 0;
        let activoCliente = 0;
        let moneda = '$';
        $('#exampleCheck1').on('change', function() {
            var i = 0;
            $('.producto').each(function() {
                if (i > 0) {
                    $(this).remove();
                } else {

                    $(this).find('.precio_sugerido').val('');
                    $(this).find('.cantidad').val('');
                    $(this).find('.unidad_medida').val('');
                    $(this).find('.idMedida').val('');
                    $(this).find('.subTotal').val('');
                    $(this).find('.producto_nombre').val('');
                }
                i++;
            })
        })
        $('#id_moneda').on('change', function() {
            var tipo_moneda = $(this).val();
            if (tipo_moneda == 2) {
                moneda = '$'
            } else {
                moneda = '$';
            }
            $('#signo_moneda').html(moneda);
            $('#signo_moneda2').html(moneda);
            console.log(moneda);
        })

        function nuevaFila() {
            var row = document.getElementsByClassName("producto"); // find row to copy
            var table = document.getElementById("contenedorProductos"); // find table to append to
            var clone = row[0].cloneNode(true); // copy children too
            table.appendChild(clone); // add new row to end of table
            clone.getElementsByClassName('precio_sugerido')[0].value = '';
            clone.getElementsByClassName('cantidad')[0].value = '';
            clone.getElementsByClassName('unidad_medida')[0].value = '';
            clone.getElementsByClassName('idMedida')[0].value = 0;
            clone.getElementsByClassName('subTotal')[0].value = '';
            clone.getElementsByClassName('producto_nombre')[0].value = '';
            $('.numerofila').each(function(key, value) {
                $(this).empty().append(key + 1);
            });
            var totalTotal = 0;
            $(".producto_nombre").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "<?php echo e(route('compras.buscar_producto')); ?>",
                        dataType: 'json',
                        data: {
                            term: request.term,
                            inventario: $('#exampleCheck1').is(":checked"),
                            servicios: $('#exampleCheck2').is(":checked")
                        },
                        success: function(data) {
                            response(data)
                        }
                    })
                },
                minLength: 2,
                select: function(event, ui) {
                    var padre = $(this).parent().parent();
                    activoProductos++;
                    $(padre).find('.unidad_medida').val(ui.item.unidad);
                    $(padre).find('.idMedida').val(ui.item.id_unidad);
                    $(padre).find('.precio_sugerido').val(ui.item.precio);
                    $(padre).find('.id_producto').val(ui.item.id);
                    if ($('#exampleCheck1').is(":checked")) {
                        var cantidad = ui.item.cantidad;
                        var precio = ui.item.precio;
                        var subtotal = cantidad * precio
                        $(padre).find('.cantidad').val(ui.item.cantidad);
                        $(padre).find('.cantidad').attr('data-cantidad', ui.item.cantidad);
                        if (moneda == '$') {
                            $(padre).find('.subTotal').val('$ ' + subtotal.toFixed(2).replace(
                                /\d(?=(\d{3})+\.)/g, '$&,'));
                        }

                        document.querySelectorAll('.subTotal').forEach(element => {
                            if (moneda == '$') {
                                var purgar_total = element.value.replace(',', '').replace('$', '');
                                console.log('Total2', purgar_total);
                                totalTotal = parseFloat(totalTotal) + parseFloat(purgar_total);
                            }

                        });

                        document.getElementById('totalTotal').innerHTML = totalTotal.toFixed(2).replace(
                            /\d(?=(\d{3})+\.)/g, '$&,');

                    }
                    if (precioSinIva == 1) {
                        var precio = parseFloat(ui.item.precio);
                        precio = precio / 1.12;
                        $(padre).find('.precio_sugerido').val(precio.toFixed(6));
                    } else {
                        $(padre).find('.precio_sugerido').val(ui.item.precio);
                    }
                }
            })
        }

        function eliminarFila(elemento) {
            var contador = $('.eliminarFila').length;
            console.log(contador);
            if (contador > 1) {
                var parentElem = elemento.parentElement;
                var eliminarElemento = parentElem.parentElement;
                eliminarElemento.parentNode.removeChild(eliminarElemento);

                $('.numerofila').each(function(key, value) {
                    $(this).empty().append(key + 1);
                });
            }

        }

        function formatMoney(number, decPlaces, decSep, thouSep) {
            decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
                decSep = typeof decSep === "undefined" ? "." : decSep;
            thouSep = typeof thouSep === "undefined" ? "," : thouSep;
            var sign = number < 0 ? "-" : "";
            var i = String(parseInt(number = Math.abs(Number(number) || 0).toFixed(decPlaces)));
            var j = (j = i.length) > 3 ? j % 3 : 0;

            return sign +
                (j ? i.substr(0, j) + thouSep : "") +
                i.substr(j).replace(/(\decSep{3})(?=\decSep)/g, "$1" + thouSep) +
                (decPlaces ? decSep + Math.abs(number - i).toFixed(decPlaces).slice(2) : "");
        }

        function infoCliente(elemento) {
            jQuery(document).ready(function() {
                limpiarDatosProveedor();
                var token = '<?php echo e(csrf_token()); ?>';
                $.ajax({
                    type: 'POST',
                    url: '<?php echo e(route('compras.buscar_proveedor')); ?>',
                    headers: {
                        'X-CSRF-TOKEN': token
                    },
                    data: {
                        id_proveedor: elemento.value,
                    },
                    success: function(data) {
                        console.log(data);
                        var regimen = "#regimen_fiscal option[value='" + data.tipo_regimen + "']";
                        $('#correo').val(data.correo_electronico);
                        $('#web').attr('href', 'https://' + data.sitio_web).empty().append(data
                            .sitio_web);
                        $('#nombre_contacto').empty().append(data.nombre_contacto);
                        $('#puesto_contacto').empty().append(data.puesto);
                        $('#direccion').empty().append(data.direccion);
                        $('#referencia').empty().append(' - ' + data.referencia);
                        $("#condiciones_pago").val(data.condiciones_pago).change();
                        $(regimen).prop('selected', true);
                        var regimenNuevo = data.tipo_regimen;
                        if (activoCliente > 0 && activoProductos > 0) {
                            $('.precio_sugerido').each(function() {
                                var padre = $(this).parent().parent();
                                if (precioSinIva == 0 && regimenNuevo == 2) {
                                    var precio = (parseFloat($(this).val()) / 1.12).toFixed(6);
                                } else if (precioSinIva == 1 && regimenNuevo == 0) {

                                    var precio = (parseFloat($(this).val()) * 1.12).toFixed(6);
                                } else {
                                    var precio = (parseFloat($(this).val()));
                                }
                                var cantidad = parseFloat($(padre).find('.cantidad').val());
                                if (cantidad) {
                                    var total = precio * cantidad;
                                    $(this).val(precio);
                                    $(padre).find('.subTotal').val(total.toFixed(2));
                                } else {
                                    $(this).val(precio);
                                }
                            })
                        }
                        activoCliente++;
                        if (regimenNuevo == 2) {
                            precioSinIva = 1;
                        } else {
                            precioSinIva = 0;
                        }

                    }
                });
            });
        }

        function limpiarDatosProveedor() {
            $('#correo').val('');
            $('#web').attr('href', '').empty();
            $('#nombre_contacto').empty().append('No disponible');
            $('#puesto_contacto').empty().append('No disponible');
            $('#direccion').empty().append('No disponible');
            $('#referencia').empty();
        }

        function calcularSubTotal(elemento) {
            var padre = elemento.parentElement.parentElement;
            var precio = padre.getElementsByClassName('precio_sugerido')[0].value;
            var cantidad = parseFloat(padre.getElementsByClassName('cantidad')[0].value);
            var subTotal = precio * cantidad;
            var totalImpuesto = 0;
            var totalTotal = 0;
            var totalCantidad = 0;

            // sumar los valores de todos los inputs con la clase 'cantidad'
            document.querySelectorAll('.cantidad').forEach(element => {
                totalCantidad = parseFloat(totalCantidad) + parseFloat(element.value);
                if (totalCantidad > 25000) {
                    alert("La cantidad total no puede ser mayor a 25,000 kilos");
                }
            });

            if (moneda == '$') {
                padre.getElementsByClassName('subTotal')[0].value = '$ ' + subTotal.toFixed(2).replace(/\d(?=(\d{3})+\.)/g,
                    '$&,');
            }

            //Sumar impuestos
            document.querySelectorAll('.subTotal').forEach(element => {
                if (moneda == '$') {
                    var purgar_total = element.value.replace(',', '').replace('$', '');
                    console.log(purgar_total);
                    totalTotal = parseFloat(totalTotal) + parseFloat(purgar_total);
                }
            });

            document.getElementById('totalTotal').innerHTML = totalTotal.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
            document.getElementById('totalCantidad').innerHTML = totalCantidad.toFixed(2).replace(/\d(?=(\d{3})+\.)/g,
                '$&,') + ' Kilos';
        }

        $(function() {
            var totalTotal = 0;
            $(".producto_nombre").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "<?php echo e(route('compras.buscar_producto')); ?>",
                        dataType: 'json',
                        data: {
                            term: request.term,
                            inventario: $('#exampleCheck1').is(":checked"),
                            servicios: $('#exampleCheck2').is(":checked")
                        },
                        success: function(data) {
                            response(data)

                        }
                    })
                },
                minLength: 2,
                select: function(event, ui) {
                    var padre = $(this).parent().parent();
                    activoProductos++;
                    $(padre).find('.unidad_medida').val(ui.item.unidad);
                    $(padre).find('.idMedida').val(ui.item.id_unidad);
                    //Calcular el precio sin IVA
                    if (precioSinIva == 1) {
                        var precio = parseFloat(ui.item.precio);
                        precio = precio / 1.12;
                        $(padre).find('.precio_sugerido').val(precio.toFixed(6));
                    } else {
                        $(padre).find('.precio_sugerido').val(ui.item.precio);
                    }
                    if ($('#exampleCheck1').is(":checked")) {
                        var cantidad = ui.item.cantidad;
                        var precio = ui.item.precio;
                        var subtotal = cantidad * precio
                        $(padre).find('.cantidad').val(ui.item.cantidad);
                        $(padre).find('.cantidad').attr('data-cantidad', ui.item.cantidad);
                        if (moneda == '$') {
                            $(padre).find('.subTotal').val('$ ' + subtotal.toFixed(2).replace(
                                /\d(?=(\d{3})+\.)/g, '$&,'));
                        }

                        document.querySelectorAll('.subTotal').forEach(element => {
                            if (moneda == '$') {
                                var purgar_total = element.value.replace(',', '').replace('$',
                                    '');
                                console.log('Total2', purgar_total);
                                totalTotal = parseFloat(totalTotal) + parseFloat(purgar_total);
                            }

                        });


                        document.getElementById('totalTotal').innerHTML = totalTotal.toFixed(2).replace(
                            /\d(?=(\d{3})+\.)/g, '$&,');

                    }
                    $(padre).find('.id_producto').val(ui.item.id);
                }
            })
        });
        $("#formEnviar").on('submit', function() {
            console.log('Enviando');
            $("#botonEnviar").prop('disabled', true);
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('compras.menu', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/devpwg5/laravelrp.com/resources/views/compras/nueva_importacion.blade.php ENDPATH**/ ?>