@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">
        <ol class="breadcrumb breadcrumb-col-blue-grey">
            <li><i class="material-icons">home</i> Inicio</li>
            <li><a href="{{ route('ventas.index')}}"><i class="material-icons">shopping_cart</i> Ventas</a></li>
            <li class="active">{{$caja->nombre}}</li>
        </ol>
        <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>
                            Ventas {{$caja->nombre}}
                        </h1>
                    </div>
                </div>
                <div class="body">
                    <div class="row">
                        <form action="{{route('ventas.store')}}" method="POST" onreset='return resetDialog("Se perderan los datos!");' onsubmit='return validateForm("Desea crear la Venta?");'  id='formStore'>
                            @csrf
                            <div class="col-md-8">
                                <div class="form-group">
                                    
                                <h2>Datos Comprador</h2>
                                <br>
                                 <div class="col-md-3">
                                    <label>Rut</label>
                                    <input type="text" style="width:100%" id="rut_cliente" name="rut_cliente" >
                                    </div>
                                    <div class="col-md-5">
                                    <label>Nombre</label>
                                    <input type="text" style="width:100%"  id="nombre_cliente" name="nombre_cliente" >
                                    </div>
                                    <br>
                                     <div class="col-md-8">
                                    <label>Comunas</label>
                                     <select class="mi-selector" id="comuna_cliente" name="comuna_cliente"  >
                                         @foreach($comunas as $cm)
                                         <option value ="{{$cm->id}}">{{$cm->nombre}}</option>
                                         @endforeach
                                         
                                     </select>
                                     </br>
                                     <div style="margin-top:10px">
                                     <label>Direccion</label>
                                    <input type="text" style="width:100%" id="direccion_cliente" name="direccion_cliente" >
                                    </div>
                                    <br>
                                    <label>Plataforma</label>
                                     <select class="mi-selector" id="plataforma" name="plataforma" lang="es">
                                         @foreach($plataformas as $pm)
                                         <option value ="{{$pm->id}}">{{$pm->plataforma}}</option>
                                         @endforeach
                                         
                                     </select>
                                </div>    
                                 </div>
                                <div class="col-md-8">
                                    <b>Producto</b><br/>
                                    <select class="list_productos" multiple="multiple" lang="es"></select>
                                </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">
                                <input type="hidden"  id="caja_id" name="caja_id" value="{{$caja->id}}">
                                <div class="col-md-12">
                                    <table id="dataTable" class="table  dataTable js-exportable">
                                        <thead>
                                            <tr>
                                                <th>Producto</th>
                                                <th>Cantidad</th>
                                                <th>Precio</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" readonly="true" 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="button" class="btn btn-success btn-large" data-toggle="modal" data-target="#GuardaModal" >Pagar</button>
                                            </div>
                                        </div>
                                           <!-- Modal Pago-->
                                            <div class="modal fade" id="GuardaModal" role="dialog" style="display: none;">
                                                <div class="modal-dialog modal-lg" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h2 class="modal-title" id="largeModalLabel">Pago de Venta </h2>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <div class="form-line ">
                                                                            <b>Cantidad</b>
                                                                            <input type="text" class="form-control" id="txtcantidad" disabled readonly value="">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <div class="form-line ">
                                                                            <b>Monto Total</b>
                                                                            <input type="text" class="form-control" id="txttotal" disabled readonly value="">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <hr>
                                                                <div class="col-md-12">
                                                                    <div class="form-group m-bottom-0">
                                                                        <b>Tipo de Pago</b><br/>
                                                                        <select class="form-control" name="tipo_pago" required lang="es">
                                                                            <option value="">--Seleccione Opcion--</option>
                                                                            <option value="1">Efectivo</option>
                                                                            <option value="2">Tarjeta Debito</option>
                                                                            <option value="3">Tarjeta Credito</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-12">
                                                                    <div class="form-group m-bottom-0">
                                                                        <div class="form-line ">
                                                                            <b>Monto de Pago</b>
                                                                            <input type="number" onkeyup="changeVuelto()" onchange="changeVuelto()"  class="form-control" name="monto_pago" id="monto_pago" value="0">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-12">
                                                                    <div class="form-group m-bottom-0">
                                                                        <div class="form-line ">
                                                                            <b>Vuelto</b>
                                                                            <input type="text" class="form-control" name="vuelto" id="vuelto" readonly="true"  disabled value="0">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="submit" class="btn btn-success waves-effect">GUARDAR</button>
                                                            <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CERRAR</button>
                                                        </div>
                                                    </div>
                                                </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>
    
    jQuery(document).ready(function($){
    $(document).ready(function() {
        $('.mi-selector').select2();
    });
    $("#rut_cliente").blur(function(){
         var rut=$(this).val();
         getEntidad(rut);
		//$(this).hide("slow");
	});
    
});

    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].precio);
                    $('#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.precio);
        $('#stock').val(data.stock);
        agregaProducto();
    });

    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;
        }

        if(datos.stock<1){
            errorDialog("No hay Stock Suficiente!");
            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
            if(nueva_cantidad>datos.stock){
                errorDialog("No hay Stock Suficiente!");
                nueva_cantidad=datos.stock;
                return;
            }
            $('#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' min='1' id='detalle_titulo_cantidad"+counter+"' onblur='getStock("+counter+",this.value)' name='detalle_pedido["+counter+"][cantidad]' value='1' />",
                "<input type='number' class='form-control font-12 ' style='width:90px' id='detalle_titulo_precio"+counter+"' min='0'  disabled 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 getEntidad(id){
        if(id=='')return;
        clear();
        $.ajax({
            url: '{{route('entidad.ajax.get', ':id')}}'.replace(':id', id),
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                
                var rut = data.rut;
                var nombre = data.nombre;
                var direccion = data.direccion;
                var comuna = data.comuna;
                //alert(comuna);
                
                $('#nombre_cliente').val(nombre);
                $('#direccion_cliente').val(direccion);
                $('#comuna_cliente option[value='+comuna+']').attr('selected', true);
                 $('#comuna_cliente').trigger('change');
                
               // $('#edita_nombre').val(data.nombre);
               /* if(data.sucursal_id){
                    $('#edita_sucursal_id option[value='+data.sucursal_id+']').attr('selected', true);
                    $('#edita_sucursal_id').trigger('change');
                }
                $('#EditacajaModal').modal('show');*/
            },
            error: function (data) {
                errorDialog(data.responseJSON.msg);
            }
        });
    }

    function getStock(counter,value){
        var codigo=$('#detalle_titulo_codigo'+counter).val();
        $.ajax({
            url: "/productos/ajax/find?q="+codigo,
            type: 'GET',
            success: function (data) {
                cantidad=parseInt(value);
                if(data[0].stock<cantidad){
                    errorDialog("No hay Stock Suficiente!");
                    cantidad=data[0].stock;
                    $('#detalle_titulo_cantidad'+counter).val(cantidad);
                }
                $('#detalle_titulo_total'+counter).val(cantidad*parseFloat($('#detalle_titulo_precio'+counter).val()));
                sumar();
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    }

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

    function validateForm(texto=""){
        vuelto=parseFloat($('#vuelto').val());
        if(vuelto<0){
            errorDialog("El Pago debe ser mayor al total!");
            return false;
        }
        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 changeVuelto(){
        var total = parseFloat($('#txttotal').val());
        var pago = parseFloat($('#monto_pago').val());
        $('#vuelto').val($.number(parseFloat(pago-total),0,'.',''));
    }

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.trim()==''){
      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,'.',''));
$('#txttotal').val($.number(parseFloat(neto),0,'.',''));
$('#monto_pago').val(0);
$('#vuelto').val($.number(parseFloat(0-(neto)),0,'.',''));

}


</script>

@endsection