@extends('layout')

@section('content')
<nav class="breadcrumb">
    <a class="breadcrumb-item" href="/">Home</a>
    <span class="breadcrumb-item active">Productos</span>
</nav>

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Productos</h4>
        <h6 class="card-subtitle">Listado de con stock y precios.</h6>

        <table class="table table-hover" id="datatable_productos">
            <thead class="thead-default">
                <tr>
                    <th>SKU</th>
                    <th>NOMBRE</th>
                    <th>CATEGORIA</th>
                    <th>MEDIDA</th>
                    <th>PRECIO</th>
                    <th>STOCK</th>
                </tr>
                <tr class="filter">
                    <td>
                        <div class="form-group mb-0">
                            <input type="text" class="form-control form-filter" placeholder="" data-column="0">
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                    <td>
                        <div class="form-group mb-0">
                            <input type="text" class="form-control form-filter" placeholder="" data-column="1">
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                    <td>
                        <div class="form-group mb-0">
                            <input type="text" class="form-control form-filter" placeholder="" data-column="2">
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript" src="/vendors/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/vendors/datatables/input.js"></script>
<script type="text/javascript">
$(function() {
    $.extend( true, $.fn.dataTable.defaults, datatables_options);
    $.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) { 
        mensaje('error','ERROR',message);
    };
    var table = $('#datatable_productos').DataTable({
        ajax: '{{ url('productos/datatables') }}',
        columns: [
            { data: 'sku', name: 'sku' },
            { 
                data: 'nombre', 
                name: 'nombre',
                render: function(data,type,row){
                    return '<a href="{{ url('productos') }}/'+ row.id +'">'+ row.nombre +'</a>'
                }
            },
            { data: 'categoria', name: 'categoria' },
            { data: 'medida', name: 'medida' },
            { data: 'precio', name: 'precio' },
            { data: 'cantidad', name: 'cantidad' },
        ]
    });

    $('.form-filter').keyup(function(){
        var $this = $(this);
        delay(function(){
            table.columns($this.data('column'))
                .search($this.val())
                .draw();
        },600);
    });
});
</script>
@endpush