@extends('layouts.app')

@section('css')
<link href="{{ asset('plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css') }}" rel="stylesheet">
    <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/bootstrap-select/css/bootstrap-select.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>
                            Ajustes
                        </h1>
                    </div>
                </div>
                <div class="body">
                    <div class="row">
                        <form action="{{route('ajustes.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>Tipo</b><br/>
                                            <select class="form-control form-line show-tick" name="tipo" lang="es">
                                                <option value="1">Entrada</option>
                                                <option value="2">Merma</option>
                                                <option value="3">Perdida</option>
                                            </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" >
                                <div class="col-md-12">
                                    <table id="dataTable" class="table  dataTable js-exportable">
                                        <thead>
                                            <tr>
                                                <th>Producto</th>
                                                <th>Cantidad</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-4 align-center">
                                <button type="submit" class="btn btn-success btn-large"  >Guardar</button>
                            </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);
                    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);
        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*/
    });

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

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

        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);
        }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' />",
                "<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();
    };


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

    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 getCantidad(counter,value){
        var precio=parseFloat($('#detalle_titulo_precio'+counter).val());
        $('#detalle_titulo_total'+counter).val(precio*parseInt(value));
    }

</script>

@endsection