@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/bootstrap-select/css/bootstrap-select.css') }}" rel="stylesheet">
    <link href="{{ asset('plugins/select2/select2.min.css') }}" rel="stylesheet" />
@endsection


@section('contenido')

@if(auth()->user()->hasRole('productos.destroy'))
    <form method='POST' id='delete-form' action="{{route('productos.destroy')}}">
        @csrf
        @method('DELETE')
        <input type="hidden" name="id" id="producto_id">
    </form>
@endif
        <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>
                                    Productos
                                </h1>
                            </div>
                            <div class="col-xs-4 col-sm-2  col-md-2 align-right">
                                @if(auth()->user()->hasRole('productos.store'))
                                    <button class='btn bg-blue btn-circle-lg waves-effect waves-circle waves-float' data-color="indigo" data-toggle="modal" data-target="#productosModal"><i class="material-icons">add</i></button>
                                @endif
                            </div>
                            <div class=" col-md-3 col-xs-6 ">
                                <div class="form-group ">
                               
                                   
                                    <b>Sucursal</b>
                                    <select class="form-control show-tick" name="sucursal_id" id="sucursal_id">
                                        @foreach ($sucursales as $sucursal)
                                            <option value="{{$sucursal->id}}">{{$sucursal->nombre}}</option>
                                            
                                        @endforeach
                                    </select>
                                    
                           
                                     
                                     
                                </div>
                            </div>
                        </div>
                        
                       
                        
                        <div class="body">
                            <table id="dataTable" class="table table-striped table-bordered table-condensed table-hover dt-responsive nowrap" style="width: 100%">
                                <thead>
                                    <tr>
                                        <th>Codigo</th>
                                        <th>Nombre</th>
                                        <th>Stock min.</th>
                                        <th>Stock max.</th>
                                        <th>Categoria</th>
                                        <th>Tipo de Producto</th>
                                        <th>Stock Sucursal</th>
                                        <th>Precio Venta</th>
                                        <th>Costo Promedio</th>
                                        <th width='30px'></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!-- Modal Crea Producto-->
	<div class="modal fade" id="productosModal" 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">Crea Producto </h2>
	            </div>
                <form action="{{route('productos.store')}}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Codigo</b>
                                        <input type="text" class="form-control" name="codigo" required maxlength="50">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Nombre</b>
                                        <input type="text" class="form-control" name="nombre" required maxlength="250">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Stock minimo</b>
                                        <input type="number" class="form-control" name="stk_min" required min="0" value="0">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Stock Maximo</b>
                                        <input type="number" class="form-control" name="stk_max" required min="0" value="0">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <b>Categoria</b><br/>
                                    <select class="list_categoria" name="categoria_id" id="categoria_id" lang="es"></select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <b>Tipo de Producto</b><br/>
                                    <select class="list_principio_activo" name="principioactivo_id" id="principioactivo_id" lang="es"></select>
                                </div>
                            </div>

                            @foreach ($sucursales as $sucursal)
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="form-line ">
                                            <b>Precio Venta {{$sucursal->nombre}}</b>
                                            <input type="number" class="form-control" name="precios[{{$sucursal->id}}][]" required min="0">
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </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>
                </form>
	        </div>
	    </div>
    </div>

    <!-- Modal Edita Producto-->
	<div class="modal fade" id="EditaproductosModal" 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">Edita Producto </h2>
	            </div>
                <form action="{{route('productos.update')}}" method="POST">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="id" id="edita_id">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Codigo</b>
                                        <input type="text" class="form-control" name="codigo" id="edita_codigo"  required maxlength="50">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Nombre</b>
                                        <input type="text" class="form-control" name="nombre" id="edita_nombre" required maxlength="250">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Stock minimo</b>
                                        <input type="number" class="form-control" name="stk_min" id="edita_stk_min" required min="0" value="0">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Stock Maximo</b>
                                        <input type="number" class="form-control" name="stk_max" id="edita_stk_max" required min="0" value="0">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <b>Categoria</b><br/>
                                    <select class="list_categoria" name="categoria_id" id="edita_categoria_id" lang="es"></select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <b>Tipo de Producto</b><br/>
                                    <select class="list_principio_activo" name="principioactivo_id" id="edita_principioactivo_id" lang="es"></select>
                                </div>
                            </div>

                            @foreach ($sucursales as $sucursal)
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="form-line ">
                                            <b>Precio Venta {{$sucursal->nombre}}</b>
                                            <input type="number" class="form-control sucursales_precios" id="sucursal_precio_{{$sucursal->id}}" name="precios[{{$sucursal->id}}]" required min="0">
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success waves-effect">EDITAR</button>
                        <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CERRAR</button>
                    </div>
                </form>
	        </div>
	    </div>
    </div>

@endsection

@section('scripts')
    <script src="{{ asset('plugins/bootstrap-select/js/bootstrap-select.js') }}"></script>
    <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('plugins/jquery-datatable/extensions/export/jszip.min.js') }}"></script>
    <script src="{{ asset('plugins/jquery-datatable/extensions/export/pdfmake.min.js') }}"></script>
    <script src="{{ asset('plugins/jquery-datatable/extensions/export/vfs.fonts.js') }}"></script>
    <script src="{{ asset('plugins/jquery-datatable/extensions/export/buttons.print.min.js') }}"></script>
    <script src="{{ asset('plugins/jquery-datatable/extensions/export/buttons.html5.min.js') }}"></script>
    <script>

            $('#dataTable').DataTable({
                dom: 'Bfrltip',
                stateSave: false,
                pageLength: 50,
                processing: true,
                serverSide: true,
                responsive: true,
                deferRender: true,
                order: [0, 'asc'],
               buttons: [
                { extend: 'excelHtml5',title: 'Producto', footer: true ,  exportOptions: {
         
         format: {
             body: function(data, row, column, node) {
                 data = $('<p>' + data + '</p>').text();
                 return $.isNumeric(data.replaceAll('.', '')) ? data.replaceAll('.', '') : data;
             }
         }
     } },
                ],
                ajax: {
                    url: '{{route('productos.datatable')}}',
                    "data": function ( d ) {
                            d.sucursal_id = $('#sucursal_id').val();
                           
                        }
                },

                columns: [
                    {data: 'codigo'},
                    {data: 'nombre'},
                    {data: 'stk_min'},
                    {data: 'stk_max'},
                    {data: 'categoria.nombre', defaultContent: ''},
                    {data: 'principioactivo.nombre', defaultContent: ''},
                    {data: 'stock', orderable: false, searchable: false},
                    {data: 'precio',orderable: false, searchable: false},
                    {data: 'costo_promedio'},
                    {data: 'function_buttons', orderable: false, searchable: false}
                ],
            });

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

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

    function clear(){
        $('#edita_id').val('');
        $('#edita_codigo').val('');
        $('#edita_nombre').val('');
        $('#edita_stk_min').val('');
        $('#edita_stk_max').val('');
        $('#edita_categoria_id').empty();
        $('#edita_categoria_id').empty();
        $(".sucursales_precios").each(function() {
            $(this).val('');
        });
    }

    function deleteProducto(id){
        if(id=='')return;
        $('#producto_id').val(id);
        deleteDialog('delete-form','¿Esta seguro de eliminar este producto?');
    }

    $('#sucursal_id').on("change", function(e) {
            $('#dataTable').DataTable().draw();
            //id1 = $('#sucursal_id').val();
             //alert(window.location.href + '?estado=Completado');
            
           // history.pushState(null, "", "productos?id=" + id1);
          
		});

    function getProducto(id){
        if(id=='')return;
        clear();
        $.ajax({
            url: '{{route('productos.ajax.get', ':id')}}'.replace(':id', id),
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                $('#edita_id').val(data.id);
                $('#edita_codigo').val(data.codigo);
                $('#edita_nombre').val(data.nombre);
                $('#edita_stk_min').val(data.stk_min);
                $('#edita_stk_max').val(data.stk_max);
                data.precios.forEach(element => {
                    $('#sucursal_precio_'+element.sucursal_id).val(element.precio);
                });
                if(data.categoria_id){
                    var opt = $("<option selected  value='"+data.categoria.id+"'>").text(data.categoria.nombre);
                    $('#edita_categoria_id').append(opt);
                }
                if(data.principioactivo_id){
                    var opt = $("<option selected  value='"+data.principioactivo.id+"'>").text(data.principioactivo.nombre);
                    $('#edita_principioactivo_id').append(opt);
                }
                $('#EditaproductosModal').modal('show');
            },
            error: function (data) {
                errorDialog(data.responseJSON.msg);
            }
        });
    }

    </script>
@endsection