@extends('modules.head') @section('contenido')
    <div class="box-header">

    </div>

    <!-- List forms-->
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Product Forecast</h3>

        </div>

        <!-- /.box-header -->
        <div class="box-body table-responsive ">
            <table id="example2" class="table table-bordered table-hover dataTable" role="grid">
                <thead>
                <tr role="row">
                    <th>Product</th>
                    <th>Branch</th>
                    <th>Daily Demand</th>
                </tr>
                </thead>
            </table>
        </div>
        <!-- /.box-body -->
    </div>

@endsection
<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/create_filters_for_dataTables.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#example2 thead tr')
            .clone(true)
            .addClass('filters')
            .prependTo('#example2 thead');

        $('#example2 thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
        $("#example2").dataTable().fnDestroy();
        const _table = $('#example2').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            "order": [],
            ajax: '/product-forecast',
            columns: [
                {data: 'product.plu', name: 'product.plu', render: function(data, type, row, meta) {
                    return `<a href="/product-forecast/${row.id}">${data}</a>`;
                }},
                {data: 'branch.name', name: 'branch.name'},
                {data: 'daily_demand', name: 'daily_demand'}
            ],
            initComplete: addFiltersForDataTable
        })
    });

</script>