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

<div class="box-header">
    <a class="auxiliar" href="{{url('/stock/report/'.$storeType)}}">
        <button type="button" class="btn  pull-left btnAux">
            <i class="fa fa-file"></i>Reporte inventario
        </button>
    </a>
</div>

<!-- List Data -->
<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') . '?v=' . time() }}"></script>
<script type="text/javascript">

    $(document).ready(function () {
        var storeType = <?php echo json_encode($storeType); ?>;
        localStorage.setItem('storeType', storeType);
        url = '/stock/list/' + storeType;
        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: window.DATATABLES_LANGUAGE_URL,
                },
                ajax: url,
                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 table = $('#table-list').DataTable();
                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