@extends('layouts.app')

@section('css')
    <link href="{{ asset('plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css') }}" rel="stylesheet">
    <link href="{{ asset('css/responsive.dataTables.min.css') }}" rel="stylesheet">
    <link href="{{ asset('plugins/select2/select2.min.css') }}" rel="stylesheet" />
@endsection

@section('contenido')

<div class="container-fluid">
    <div class="row clearfix">
        <div class="card">
            <div class="header">
            <div class="user-info">
        <div class="image">
            <img src="{{ asset('img/logo.png') }}" width="250" height="100" alt="Logo" />
        </div>
    </div>
    <P></P>
                <div class="row clearfix">
                    <div class="col-xs-8 col-sm-10 col-md-10">
                        <h1>
                            Compras
                        </h1>
                    </div>
                </div>
                <div class="body">
                    <div class="row">
                        <form action="{{route('compras.store')}}" method="POST" onreset='return resetDialog("Se perderan los datos!");' onsubmit='return validateForm("Desea crear la Compra?");'  id='formStore'>
                            @csrf
                            <div class="col-md-8">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <b>Sucursal</b><br/>
                                            <select class="list_sucursal" name="sucursal_id" lang="es"></select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <b>Proveedor</b><br/>
                                            <select class="list_proveedor" name="proveedor_id"  lang="es"></select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <b>Producto</b><br/>
                                            <select class="list_productos" multiple="multiple" lang="es"></select>
                                        </div>
                                    </div>
                                </div>



                                <input type="hidden"  id="codigo" >
                                <input type="hidden"  id="nombre" >
                                <input type="hidden"  id="cantidad" >
                                <input type="hidden"  id="precio" >
                                <input type="hidden"  id="stock">
                                <div class="col-md-12">
                                    <table id="dataTable" class="table  dataTable js-exportable">
                                        <thead>
                                            <tr>
                                                <th>Producto</th>
                                                <th>Cantidad</th>
                                                <th>Precio Compra</th>
                                                <th>Subtotal</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card">
                                    <div class="body">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group m-bottom-0">
                                                    <div class="form-line ">
                                                        <b>Subtotal</b>
                                                        <input type="text" class="form-control" name="subtotal" id="subtotal" readonly="true" value="0">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group m-bottom-0">
                                                    <div class="form-line ">
                                                        <b>Descuento</b>
                                                        <input type="text" class="form-control" name="descuento" id="descuento" onchange="sumar()" value="0">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group m-bottom-0">
                                                    <div class="form-line ">
                                                        <b>Neto</b>
                                                        <input type="text" class="form-control" name="neto" id="neto" readonly="true" value="0">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group m-bottom-0">
                                                    <div class="form-line ">
                                                        <b>IVA</b>
                                                        <input type="text" class="form-control" name="iva" id="iva" readonly="true" value="0">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group m-bottom-0">
                                                    <div class="form-line ">
                                                        <b>Total</b>
                                                        <input type="text" class="form-control" name="total" id="total" readonly="true" value="0">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <button type="submit" class="btn btn-success btn-large"  >Guardar</button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




@endsection

@section('scripts')
    <script src="{{ asset('plugins/jquery-datatable/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js') }}"></script>
    <script src="{{ asset('plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
    <script src="{{ asset('plugins/select2/select2.min.js') }}"></script>
    <script src="{{ asset('plugins/select2/es.js') }}"></script>
    <script src="{{ asset('js/jquery.number.min.js') }}"></script>
    <script>

    var counter=1;

    var table = $('#dataTable').DataTable({
        paging: false,
        searching: false,
        ordering: false,
        info: false,
    });

    $('.list_productos').select2({
        placeholder: 'Ingresa un nombre o codigo de barras',
        ajax: {
            url: function (params) {
                url="{{route('productos.ajax.find', ':q')}}";
                return  url.replace(':q', params.term);
            },
            dataType: 'json',
            delay: 250,
            processResults: function (data) {
                if(data.length==1){
                    $('#cantidad').val('1');
                    $('#codigo').val(data[0].id);
                    $('#nombre').val(data[0].text);
                    $('#precio').val(data[0].costo);
                    $('#stock').val(data[0].stock);
                    agregaProducto();
                    $(".list_productos").select2("close");
                }
                return {
                    results: data
                };
            },
            cache: true
        },
       /* minimumInputLength: 2,
        allowClear: true*/
    });

    $('.list_productos').on('select2:select', function (e) {
        var data = e.params.data;
        $('#cantidad').val('1');
        $('#codigo').val(data.id);
        $('#nombre').val(data.text);
        $('#precio').val(data.costo);
        $('#stock').val(data.stock);
        agregaProducto();
    });

    $('.list_sucursal').select2({
        placeholder: 'Ingresa un nombre',
        ajax: {
            url: function (params) {
                url="{{route('sucursales.ajax.find', ':q')}}";
                return  url.replace(':q', params.term);
            },
            dataType: 'json',
            delay: 250,
            processResults: function (data) {
                return {
                    results: data
                };
            },
            cache: true
        },
       /* minimumInputLength: 2,
        allowClear: true*/
    });

    $('.list_proveedor').select2({
        placeholder: 'Ingresa un nombre',
        ajax: {
            url: function (params) {
                url="{{route('proveedores.ajax.find', ':q')}}";
                return  url.replace(':q', params.term);
            },
            dataType: 'json',
            delay: 250,
            processResults: function (data) {
                return {
                    results: data
                };
            },
            cache: true
        },
       /* minimumInputLength: 2,
        allowClear: true*/
    });

    function clear(){
        $('.list_productos').val('').trigger('change');
        $('#cantidad').val('');
        $('#codigo').val('');
        $('#nombre').val('');
        $('#precio').val('');
        $('#stock').val('');
    }

   function agregaProducto() {
        div="";
        var datos = {};
        datos.codigo = $('#codigo').val().trim();
        datos.nombre = $('#nombre').val().trim();
        datos.precio=parseInt($('#precio').val());
        datos.stock=parseInt($('#stock').val());

        if(!datos.codigo){
            errorDialog("Debe Igresar un Producto!");
            return;
        }

        //addDatatable(div,datos);
        var existe = buscaenLista(datos.codigo);
        if(existe){
            var cantidad_previa = parseInt($('#detalle_titulo_cantidad'+existe).val());
            var nueva_cantidad=cantidad_previa+1
            $('#detalle_titulo_cantidad'+existe).val(nueva_cantidad);
            $('#detalle_titulo_total'+existe).val((nueva_cantidad)*parseFloat($('#detalle_titulo_precio'+existe).val()));
        }else{
            table.row.add( [
                "<input type='hidden' disabled name='detalle_pedido["+counter+"][codigo]' value='"+datos.codigo+"'  id='detalle_titulo_codigo"+counter+"'/>"+
                "<input type='text' class='form-control font-12' style='width:300px' max='255'  required value='"+datos.nombre+"' name='detalle_pedido["+counter+"][nombre]'/>",
                "<input type='number' class='form-control font-12 cantidad' style='width:75px;border-color:red' onblur='getCantidad("+counter+",this.value)'  min='1' id='detalle_titulo_cantidad"+counter+"' name='detalle_pedido["+counter+"][cantidad]' value='1' />",
                "<input type='number' class='form-control font-12 ' style='width:90px' id='detalle_titulo_precio"+counter+"' min='1' onblur='getPrecio("+counter+",this.value)'  required name='detalle_pedido["+counter+"][precio]' value='"+(datos.precio)+"' />",
                "<input type='number' class='form-control font-12 totales ' style='width:90px' id='detalle_titulo_total"+counter+"'  disabled value='"+($.number(1*datos.precio,0,".",''))+"' />",
                "<button type='button' onclick='deleteRow("+counter+")' id='"+counter+"'class='btn bg-red btn-circle waves-effect waves-circle waves-float'>"+
                "<i class='material-icons'>delete</i>"+
                "</button>",
                ] ).draw( false );
             counter++;
        }
        clear();
        sumar();
    };


    function deleteRow(id) {
        table.row($('#'+id).parents('tr')).remove().draw( false );
        sumar();
    }

    function validateForm(texto=""){
        if ( ! table.rows().count() ) {
            errorDialog("No ha Ingresado Productos!");
            return false;
        }else{
            return submitDialog('formStore',texto);
        }
    return false;
    }

    function buscaenLista(codigo){
        var busqueda=codigo.trim();
        for (i=1;i<=counter;i++){
            if($('#detalle_titulo_codigo'+i).length > 0){
                if($('#detalle_titulo_codigo'+i).val().trim()==busqueda){
                    return i;
                }
            }
        }
        return false;
    }

    function getPrecio(counter,value){
        var cantidad=parseInt($('#detalle_titulo_cantidad'+counter).val());
        $('#detalle_titulo_total'+counter).val(cantidad*parseFloat(value));
        sumar();
    }

    function getCantidad(counter,value){
        var precio=parseFloat($('#detalle_titulo_precio'+counter).val());
        $('#detalle_titulo_total'+counter).val(precio*parseInt(value));
        sumar();
    }


function sumar(){


  var suma=0;
  var valorizado=0;
  var valor=0;
  var valor1=0;
  var descuento= ($('#descuento').val());
  var neto=0;

  for(var i=1;i<=counter;i++){
      valor= $('#detalle_titulo_cantidad'+i).val();
      valor1= $('#detalle_titulo_total'+i).val();
      if(valor){
        suma=suma+parseInt(valor);
        valorizado=valorizado+ parseFloat(valor1);
      }
    }
  if(descuento > 0){
      neto=valorizado- descuento;
    }else{
      neto=valorizado;
    }

var neto_siniva=neto/(1+{{config('app.iva')}}/100);

$('#txtcantidad').val($.number(suma,0,'.',''));
$('#subtotal').val($.number(valorizado,0,'.',''));
$('#neto').val($.number(neto_siniva,0,'.',''));
$('#iva').val($.number(neto_siniva*{{config('app.iva')}}/100,0,'.',''));
$('#total').val($.number(parseFloat(neto),0,'.',''));
}


</script>

@endsection