@extends('layouts.app')

@section('content')
{!! Form::model($costlist, ['route' => ['costlists.update', $costlist->id ], 'method' => 'put']) !!}
    @csrf
    <fieldset class="border p-2">
        <legend class="w-auto">Editar Lista de Costos</legend>
        <div class="row py-md-2">
            <div class="col-sm-12">
                <label for="name">Nombre</label>
                <input type="text" class="form-control" id="name" name="name" value="{{ $costlist->name }}">
            </div> 
    
        </div>
        <div class="row py-md-2">
            <div class="col-sm-8">
                <label for="productdescription">Descripcion</label>
                <input type="text" class="form-control" id="description" name="description" value="{{ $costlist->description }}">
            </div>   
        </div>
        <div class="row py-md-2" >
            <div class="form-check">
            {{ Form::checkbox('status', '1', $costlist->status ,['class' => 'form-check-input','id' =>'status']) }} 
            <label for="status" class="form-check-label">Estatus</label> 
             </div> 
        </div>


    </fieldset>
    <input type="hidden" value="{{ $costlist->id }}" name="costlistid" id="costlistid">
    {{ Form::submit('Grabar Lista Costos',['class' => 'btn btn-success top-buffer']) }}
    {!! Form::close() !!}
    <fieldset class="border p-2">
        <legend class="w-auto">Agregar Productos</legend>
    <div class="row py-md-2">
        <div class="col-sm-5">
            <label for="name">Producto</label>
            <input type="text" class="form-control" id="productsearch" name="productsearch">
            <input type="hidden" class="form-control" id="productid">
        </div>
        <div class="col-sm-3">
            <label for="name">Precio</label>
            <input type="number" class="form-control" id="productprice" name="productprice">
        </div>
        <div class="col-sm-3">
            <label for="name">Costo</label>
            <input type="number" class="form-control" id="productcost" name="productcost">
        </div>
    </div>
    <div class="row py-md-2">
        <div class="col-sm-3">
            <label for="name">IVA</label>
            <input type="number" class="form-control" id="producttaxes1" name="producttaxes1">
        </div>
        <div class="col-sm-3">
            <label for="name">IEPS</label>
            <input type="number" class="form-control" id="producttaxes2" name="producttaxes2">
        </div>
        <div class="col-sm-3 py-md-4">
            <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
            <a href="#" class="btn btn-primary" id="btnAddProduct" name="btnAddProduct">Agregar</a>
        </div>
    </div>
    <div class="row py-md-2">
        <div class="col-sm-10">
            <table class="table table-bordered" id="tbl_products">
                <thead>
                    <tr>
                        <td>Id</td>
                        <td>Producto</td>
                        <td>Costo</td>
                        <td>Precio</td>
                        <td>IVA</td>
                        <td>IEPS</td>
                        <td>productid</td>
                        <td>costlistid</td>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    </fieldset>
@stop
@push('scripts')
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"> defer</script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script>
var tblProducts;
$( document ).ready(function() {

    tblProducts =  $('#tbl_products').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
          url: '{!! route('costlistdetaildata') !!}' ,
          data: { id: $("#costlistid").val() }
        },
        language: {
              "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
              },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'cost', name: 'cost' },
            { data: 'price', name: 'price' },
            { data: 'iva', name: 'iva' },
            { data: 'ieps', name: 'ieps' },
            { data: 'product_id', name: 'product_id' },
            { data: 'costlist_id', name: 'costlist_id' }
        ],
        aoColumnDefs: [
            {
                "targets":[6],
                "visible": false,
                "searchable": false
                 
            },
            {
                "targets":[7],
                "visible": false,
                "searchable": false
            }
        ]
    });

    $('#tbl_products tbody').on('click', 'tr', function () {
            $('.selected').removeClass('selected')
			 $(this).toggleClass('selected');
            var data = tblProducts.row( this ).data()

            $("#productid").val(data.product_id);
            $("#productsearch").val(data.name);
            $("#productcost").val(data.cost);
            $("#productprice").val(data.price);
            $("#producttaxes1").val(data.iva);
            $("#producttaxes2").val(data.ieps);
            
    });

    $("#productsearch").autocomplete({
		    delay: 1000,
        source: function( request, response ) {
            $.ajax({
                url : "{{ route('searchproductcl') }}",
                dataType: "json",
                type: "GET",
                data: {
                    searchdata: request.term,
                    costlistid: $("#costlistid").val()
                },
                success: function( data ) {
                    response( $.map( data, function( item ) {
                    console.log(item.resultado);
                            return {
                                label: item.code+"-"+item.name,
                                value: item.code+"-"+item.name,
                                data : item
                            }
                    }));
                }
            });
        },
        messages: {
            noResults: '',
            results: function() {}
        },
        autoFocus: true,	      	
        minLength: 2,
        select: function( event, ui ) {
            var productData = ui.item.data;
            $("#productid").val(productData.id);            
        }		      	
    });

    $("#btnAddProduct").on('click', function() {


        $.ajax({
            type: 'POST',
            url: "{{ route('addproductscl') }}", // call your php file
            data: { _token: $("#_token").val(),productid: $("#productid").val(),cost: $("#productcost").val() ,price: $("#productprice").val(), taxes1: $("#producttaxes1").val(), taxes2: $("#producttaxes2").val(),costlistid: $("#costlistid").val()  },
            cache: false,
            success: function(data){
               // var info = JSON.parse(data);
              if(data) {
                
                alert('Se Agrego el Producto');
                $("#productid").val('0');
                $("#productsearch").val('');
                $("#productprice").val('');
                $("#producttaxes1").val('');
                $("#producttaxes2").val('');
                tblProducts.ajax.reload();
 
              } 
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(xhr);
            } 
        });
    })
});

</script>
@endpush