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

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">Create cycle count orders </h3></br>
    </div>
    <!-- /.box-header -->
    <div class="col-10 col-md-10">
        <div class="box-body table-responsive ">
            <input type="hidden" id="parameter_cycle_count_prod_qty" value={{$parameter_cycle_count_prod_qty}}>
            <table id="table-cycle_count_products" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
                <thead>
                    <tr role="row">
                        <th style="width:5%" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Select</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">Description</th>
                        <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">A-B-C</th>
                        <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Stock</th>
                        <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Last time counted</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div class="modal-footer">
            <a href="/work_orders"><button class="btn">Cancel</button></a>
            <button type="button" class="btn btn-danger btn-sm" id="btnCreateBatch">Create work orders
            </button>
        </div>
    </div>
    <input type="hidden" id="branch_id" name="branch_id" value={{Session::get('branch_id')}} />
</div>

<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 src="{{ asset('js/cycle_counts.js') }}"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $(function() {
            $('#table-cycle_count_products thead tr')
            .clone(true)
            .addClass('filters')
            .prependTo('#table-cycle_count_products thead');
            $('#table-cycle_count_products thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
            $("#table-cycle_count_products").dataTable().fnDestroy();
            _table = $('#table-cycle_count_products').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },
                ajax: {
                    url: '/cycle_counts/get_products',
                },
                columns: [
                    { data: 'id',  name: 'id', "width": "5%",
                        render(data, type, row){
                            return `<input type="checkbox" value=${data}>`;
                        }
                    },
                    { data: 'plu', name: 'plu'},
                    { data: 'name', name: 'name'},
                    {
                         data: 'abc_xyzs', name: 'abc_xyzs',
                         render(data, type, row){
                            let branch_id = $("#branch_id").val();
                            if(data.length > 0) {
                                for(let i=0; i< data.length; i++) {
                                    if(data[i].branch_id == branch_id){
                                        return data[i].current_class;
                                    }
                                    else {
                                        return "None";
                                    }
                                }
                            }
                            else {
                                return "None";
                            }
                        }
                    },
                    {
                        data: 'stock', name: 'stock'
                    },
                    {
                        data: 'last_date_counted', name: 'last_date_counted',
                        render(data, type, row){
                            return data ? data : "";
                        }
                    },
                ],
                columnDefs: [{
                    targets: 0,
                    className: 'app_id',
                }],
            orderCellsTop: true,
            fixedHeader: true,
                initComplete: addFiltersForDataTable,
            });
        });
    });
</script>
<style type="text/css">
    .app_id input{ outline: none;
        border:none;
        background-image:none;
        background-color:transparent;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
</style>
@endsection