@extends('modules.head') @section('contenido')

<div class="box-header">
    @if(Auth::user()->rol_id == 1 || Auth::user()->rol_id == 2 || Auth::user()->rol_id == 8)
        <a class="auxiliar" href="{{url('/stock/report')}}">
            <button type="button" class="btn  pull-left btnAux">
                <i class="fa fa-file"></i>@lang('messages.inventory_report')
            </button>
        </a>
    @endif
    @if(Auth::user()->rol_id == 1 || Auth::user()->rol_id == 2)
        <button onClick="updateFromB1('b1:sync-inventory {{ $warehouse }}')" class="btn btnBox">{{ Lang::get('messages.sapb1_sync.inventory') }}</button>
    @endif
</div>

<!-- List banners-->
<div class="box">
    <div class="box-header with-border">
        <div class="row">
            <div class="col-xs-2"><h3 class="box-title">{{ Lang::get('messages.screen_stocks_tag1')}}</h3></div>
        </div>
    </div>

    <!-- /.box-header -->
    <div class="box-body table-responsive ">
        <table id="table-list" 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">{{ Lang::get('messages.screen_stocks_tag2')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_products_tag4')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_products_tag5')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_products_tag11')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_products_tag7')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_products_tag62')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_products_tag22')}}</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 type="text/javascript">

    $(document).ready(function () {

        function format (data) {
            console.log(data.brand)
            console.log(data.product_attributes)
            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").dataTable().fnDestroy();
            _table = $('#table-list').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                "order" : [],
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },
                ajax: '/stock/list',
                columns: [
                    {
                        className:      'details-control',
                        orderable:      false,
                        defaultContent: ''
                    },
                    { data: 'name', name: 'name'  },
                    { data: 'plu', name: 'plu'  },
                    { data: 'available_units', name: 'available_units'  },
                    { data: 'price', name: 'price'  },
                    { data: 'dispatched_units', name: 'dispatched_units'  },
                    { data: 'brand.name', name: 'brand.name'  }
                ]
            });

            $('#table-list 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