@extends('modules.head') @section('contenido')
<div class="box-header">
    @if(Auth::user()->rol_id == 1 || Auth::user()->rol_id == 2)
    <a class="auxiliar" href="{{url('/replenish/report')}}">
        <button type="button" class="btn  pull-left btnAux">
            <i class="fa fa-file"></i>@lang('messages.inventory_report')
        </button>
    </a>
    @endif
</div><br>

<div class="box-header">
    <h3>Internal Replenish Orders</h3></br>
</div>

<!-- List banners-->
<div class="box">
    <div class="box-header with-border">
    </div>

    <!-- /.box-header -->
    <div class="box-body table-responsive ">
        <table id="table-internal_replenish_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">PLU</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Qty available</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">Branch</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">Picked By</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Status</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('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/masterSAPB1.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script type="text/javascript">

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

            $('#table-internal_replenish_orders thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
            $("#table-internal_replenish_orders").dataTable().fnDestroy();
            _table = $('#table-internal_replenish_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: 'replenish/get_internal_replenish_orders',
                },
                columns: [

                    { data: 'product.plu', name: 'product.plu' , "width": "30%"},
                    { data: 'qty_available', name: 'qty_available' , "width": "30%"},
                    { data: 'to_bin_location.bin_code', name: 'to_bin_location.bin_code' , "width": "30%"},
                    { data: 'to_bin_location.warehouse_code', name: 'to_bin_location.warehouse_code' , "width": "30%"},
                    {
                        data: 'created_at',
                        name: 'created_at',
                        render: function (data) {
                            return new Date(data).toLocaleString();
                        }
                    },
                    {
                        data: 'admin',
                        name: 'admin.first_name',
                        render: function(data) {
                            if(data != null){
                                return data.first_name + " " + data.last_name
                            }else{
                                return ''
                            }
                        }
                    },
                    {
                        data: 'status.name',
                        name: 'status.name',
                        render: function (data, type, row) {
                            return `<span class="badge ${row.status.css_class}">${row.status.name}</span>`;
                        }
                    },
                    { data: 'id',  name: 'id', "width": "5%",
                        render(data, type, raw){
                            let buttonName = getButtonName(raw.status.id);
                            let tooltip = getNote(raw.note);
                            return `<a type="button" class="btn btn-default" style="width:90px" onclick="executeReplenishOrder(${data}, '${raw.status.id}')">${buttonName}</a>
                            ${tooltip}
                            `;
                        }
                    },
                ],
                initComplete: addFiltersForDataTable
            });
        });
    });

    function getNote(orderNote) {
        let tooltip = '';
        if(orderNote) {
            tooltip = `<span class="sTooltip">
                            <i class="fa fa-note-sticky iconMini"></i>
                            <b>${orderNote.content}</b>
                        </span>`
        }
        return tooltip;
    }

    function getButtonName(orderStatus) {
        if(orderStatus == 1) {
            return "Accept";
        }
        if(orderStatus == 2) {
            return "Collect";
        }
        if(orderStatus == 3) {
            return "Complete";
        }
    }

    function executeReplenishOrder(replenishOrderId, orderStatus) {
        if(orderStatus != 1) {
            location.href = '/replenish/create/'+replenishOrderId;
        }
        else {
            swal({
                text: "Are you sure you want to accept this order?",
                icon: "info",
                buttons: ["Cancel", "Ok"],
            })
            .then((value) => {
                if (value) {
                    $.ajax({
                        url: "replenish/accept_replenish_order/" + replenishOrderId,
                        type: "GET",
                        contentType: "application/json",
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                            "Content-Type": "application/json",
                        },
                        success: function() {
                            swal({
                                title: "Success",
                                text: "Replenish order updated",
                                icon: "success",
                            }).then(() => {
                                location.href = '/replenish/create/'+replenishOrderId;
                            })
                        },
                        error: function(e) {
                            console.log(e);
                        },
                    });
                }
            });
        }
    }
</script>

@endsection
<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>