@extends('modules.head') @section('contenido')
<div class="box-header">
    @if(Auth::user()->rol_id == 1 || Auth::user()->rol_id == 2)
    <a class="auxiliar" href="{{url('/replenish/report')}}">
        <button type="button" class="btn  pull-left btnAux">
            <i class="fa fa-file"></i>@lang('messages.inventory_report')
        </button>
    </a>
    @endif
</div><br>

<div class="box-header">
    <h3>Products Availability</h3>

</div>

<!-- List banners-->
<div class="box">
    <div class="box-header with-border">
        <!-- <div class="row">
            <div class="col-xs-2"><h3 class="box-title">5 or less units</h3></div>
        </div> -->
    </div>

    <!-- /.box-header -->
    <div class="box-body table-responsive ">
        <table id="table-list_low_stock" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Name</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">PLU</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Qty available</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Qty warehouse</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Qty receiving</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Bin Location</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Branch</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

@include('products.scraper')

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/dropzone/dropzone.js') }}"></script>
<script src="{{ asset('js/masterSAPB1.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script type="text/javascript">

    $(document).ready(function () {

        function format (data) {

            var $markup = '<table class="table table-bordered" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
            data.product_attributes.forEach(attributes => {
                $markup += '<tr><td> SKU: ' + attributes.sku + '</td>' +
                       '<td> Valor: ' + attributes.value + '</td>' +
                       '<td> Cantidades disponibles: ' + attributes.available_units + '</td>' +
                       '<td> Atributo: ' + attributes.attribute.display_name + '</td>' +
                       '<td> Unidades en despacho: ' + attributes.dispatched_units + '</td>' +
                       '<td> Precio adicional : ' + attributes.price_additional + '</td></tr>';
            })
            $markup += '</table>';
            return $markup;
        }

        $(function() {
            $('#table-list_low_stock thead tr')
            .clone(true)
            .addClass('filters')
            .prependTo('#table-list_low_stock thead');

            $('#table-list_low_stock thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
            $("#table-list_low_stock").dataTable().fnDestroy();
            _table = $('#table-list_low_stock').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                "order" : [],
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },
                ajax: {
                    url: 'stock/list/availability',
                 },
                columns: [
                    { data: 'product.name', name: 'product.name' , "width": "30%"},
                    { data: 'product.plu',  name: 'product.plu', "width": "20%",
                        render(data,  type, raw){
                          return `<a onclick="showInfoBinLocationItem(this, '${data}', '${raw.branch_id}')" role="button" class="table-link">${data}</a>`;
                        }
                    },
                    { data: 'available_units', name: 'available_units'},
                    { data: 'available_warehouse', name: 'available_warehouse'},
                    { data: 'available_receive_bin', name: 'available_receive_bin'},
                    { data: 'bin_location', name: 'bin_location'  },
                    { data: 'branch.short_name', name: 'branch.short_name'  },
                    { data: 'product.plu',  name: 'product.plu', "width": "5%",
                        render(data, type, raw){
                            return `<a type="button" class="btn btn-default sync-inventory" onclick="syncInventoryByPLU(this, '${data}', '${raw.branch_id}')"><i class="fa fa-refresh"></i></a>`;
                        }
                    },
                ],
                initComplete: addFiltersForDataTable
            });

            $('#table-list_low_stock tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = _table.row(tr);
                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }else{
                    // Open this row
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
            });
        });
    });
</script>

@endsection

<div class="modal" tabindex="-1" role="dialog" id="modalShowBinLocationItem">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>