@extends('layouts.app')


@section('content')
    @if(session()->has('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div>
    @endif
    <div class="card">
        <div class="card-body">
            <div class="mb-4 clearfix">
                <h4 class="float-left">Box Orders</h4>
            </div>
            @if(count($orders) > 0)
                <form id="doneOrders" action="{{ route('orders.box_orders.complete') }}" method="POST">
                    @csrf
                    <div class="scan-items">
                        <div class="form-group">
                            <input type="text" class="form-control scan-control" placeholder="Scan UPC">
                        </div>
                    </div>
                    <div class="item-box"></div>
                    <div class="row boxes_row">
                        @foreach($orders as $order)
                        <div class="col-12 col-md-3 my-2">
                            <div class="card border rounded {{ $order->order_number }}">
                                <div class="card-body text-center">
                                    <div class="box-number"><b>{{ $order->box_number }}</b></div>
                                    <div class="box_icon" style="font-size: 42px;">
                                        <i class="fas fa-box-open"></i>
                                    </div>
                                    <div class="order_number">
                                        {{ $order->order_number }}
                                        <input type="hidden" name="doneOrders[]" value="{{ $order->order_number }}">
                                    </div>
                                    <hr>
                                    <ul class="list-unstyled">
                                    @foreach(App\OrderItem::where([['order_id', $order->order_id], ['product_type', 'simple']])
                                            ->join('product_details', 'product_details.sku', 'order_items.sku')
                                            ->join('product_attributes', function ($join) {
                                                $join->on('product_attributes.product_id', '=', 'product_details.entity_id');
                                                $join->where('product_attributes.key', '=', 'upc');
                                            })
                                            ->select('product_attributes.value as upc')
                                            ->get() 
                                    as $key => $item)
                                        <li>{{ ($key+1) .') '.$item->upc }}</li>
                                    @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6 col-12 d-flex">
                            <input type="checkbox" name="endShift" class="my-auto mr-2" id="endShift"> 
                            <div class="my-auto">End Shift</div>
                        </div>
                        <div class="col-md-6 col-12 clearfix">
                            <button id="doneOrdersSubmit" type="button" class="btn btn-success btn-sm float-right">Complete Box Orders</button>
                        </div>
                    </div>
                </form>
            @else
                <h6><i class="fas fa-exclamation-circle"></i> No record found</h6>
            @endif
        </div>
    </div>
@endsection

@section('right_sidebar')

@endsection

@section('script') 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/scannerdetection/1.2.0/jquery.scannerdetection.js"></script>
    <script>
        jQuery(document).scannerDetection({
            timeBeforeScanTest: 200,
            startChar: [120],
            endChar: [13], 
            onComplete: function(barcode, qty){ 
                $('.scan-control').val(barcode);
            }
        });
        $(document).ready(function(){
            $('.scan-control').on('input', function(){
                $('.item-box').html('');
                $('.overlay').show();
                var upc = $(this).val();
                $.ajax({
                    type: "GET",
                    url: '{{ URL::to("orders/box_orders/upc") }}'+'/'+upc,
                    success: function(data){
                        $('.boxes_row').find('.box-orders').removeClass('box-orders');
                        $('.overlay').hide();
                        $('.item-box').append('<ul class="list-unstyled alert alert-dark message-append">');
                        for(var i=0; i<data.length; i++){
                            $('.message-append').append('<li>Upc <b>'+upc+'</b> belongs to order # <b>'+data[i]['order_number']+'</b> and box # <b>'+data[i]['box_number']+'</b></li>');
                            $("."+data[i]['order_number']).addClass('box-orders');
                        }
                        $('.item-box').append('</ul>');
                    }
                });
            });
        });

        $(document).ready(function(){
            var isEndShift = $('#endShift').is(':checked');
            var message = 'Are you sure you want to complete box orders?';

            if(isEndShift){
                message = 'Are you sure you want to complete box orders with End Shift?';
            }

            $('#doneOrdersSubmit').on('click', function(){
                var r = confirm(message);
                if (r == true) {
                    $('#doneOrders').submit();
                }else{
                    return false;
                }
            });
        });
    </script>
@endsection