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

<!-- List banners-->
<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">Cycle Count Orders</h3></br>
    </div>

    <!-- /.box-header -->
    <div class="box-body table-responsive ">
        <table id="table-cycle_count_orders" 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">Code</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Creation date</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Accepted by</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Product</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">Current qty</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Counted qty</th>

                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Result</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('cycle_counts.modal_notes')

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

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

            $('#table-cycle_count_orders thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
            $("#table-cycle_count_orders").dataTable().fnDestroy();
            _table = $('#table-cycle_count_orders').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                "order" : [],
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },
                ajax: {
                    url: 'get_cycle_count_orders',
                },
                columns: [
                    {
                        data: 'work_order.code',
                        name: 'work_order.code',
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        render: function (data) {
                            return new Date(data).toLocaleString();
                        }
                    },
                    {
                        data: 'work_order.accepted_by',
                        name: 'work_order.accepted_by',
                        render: function(data) {
                            if (data) {
                                return data.first_name + " " + data.last_name;
                            }
                            else {
                                return '';
                            }
                        }
                    },
                    {
                        data: 'product.plu',
                        name: 'product.plu',
                    },
                    {
                        data: 'bo_bin_location',
                        name: 'bo_bin_location',
                        render: function(data) {
                            return data.bin_code;
                        }
                    },
                    {
                        data:'current_qty',
                        name: 'current_qty',
                    },
                    {
                        data:'counted_qty',
                        name: 'counted_qty',
                    },

                    {
                        data: 'status',
                        name: 'status',
                        render: function (data, type, row) {
                            if(data) {
                                let btn_note = `<a type="button" onClick="displayModalNote(${row.work_order_id}, '', 'Cycle count')"><i class="fa fa-note-sticky iconMini"></i></a>`;
                                let name = data.name.charAt(0).toUpperCase() + data.name.slice(1);
                                return `<span class="badge ${data.css_class}">${name}</span>${btn_note}`;
                            }
                            else {
                                return '';
                            }
                        }
                    },

                    {
                        data: 'id',
                        render: function (data, type, row) {
                            if(data) {
                                if(row.cycle_count_status_id === 1) {
                                    return `<a type="button"  class="btn btn-default" style="width:80px" onClick=validateCountResult(${row.id})>Confirm</a>`
                                }
                                else if(row.cycle_count_status_id === 2) {
                                    return `<a type="button"  class="btn btn-default" style="width:80px" onClick=validateCountResult(${row.id})>Resolve</a>`
                                }
                                return '---';
                            }
                        }
                    },
                ],
                initComplete: addFiltersForDataTable
            });
        });
    });
</script>
@include('work_order/modal_cycle_count_notes')
<style type="text/css">
    .sTooltip { position: relative;}
    .sTooltip i {
        cursor: pointer;
    }
    .sTooltip b { display: none; position: absolute; background-color: #fff; border: solid 1px #444; border-radius: 10px; padding: 10px; width: 250px; bottom: 100%; right: 0; font-size: 13px; font-weight: normal; z-index: 4; box-shadow: 2px 2px 2px #999; }
    .sTooltip i:hover ~ b { display: block;}
</style>

@endsection