@extends('layouts.app')

@section('content')
<div class="mb-4 d-flex">
    <h3 class="text-muted my-auto"><b><i class="fas fa-qrcode mr-2"></i>Scan Refused Shipment</b></h3>
</div>
<div class="card mb-4 ">
    @if(!Request::has('shipment'))
        <div class="card-body">
            <div class="form-group">
                <div class="row">
                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            <select id="selection" name="selection" class="form-control" required>
                                <option value="cnnumber" selected>Cn Number</option>
                                <option value="order_number">Order Number</option>
                                <option value="intl_order_number">International Order</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 scan-order" style="display:none">
                        <div class="form-group">
                            <input type="text" name="order" class="form-control scan-control" placeholder="Enter Order Number">
                        </div>
                    </div>
                    <div class="col-12 col-md-6 scan-cn">
                        <div class="form-group">
                            <input id="scanupc" type="text" name="cn" class="form-control scan-control" placeholder="Enter CN">
                        </div>
                    </div>
                </div>
                <div class="row mt-2">
                    <label class="mr-2 ml-auto cn-label" style="display:none"><b>Select Cnnumber:</b></label>
                    <label class="mr-2 ml-auto error" style="display:none; color:red;"><b>Incorrect order number</b></label>
                    <div class="order float-right" style="display:none">

                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="card-body">
            <div class="form-group">
                <input id="scanupc" type="text" class="form-control scan-control" placeholder="Scan UPC">
            </div>
            <form action="{{ URL::to('shipment/scan_refused_shipment/post') }}" method="POST">
                @csrf
                <table class="table item-table table-responsive">
                    <thead class=" text-primary">
                        <th></th>
                        <th>Order #</th>
                        <th>Customer</th>
                        <th>Qty</th>
                        <th>Product</th>
                        <th>UPC</th>
                        <th>Payment Method</th>
                        <th>Shipping Method</th>
                        <th>Amount</th>
                        <th>CN</th>
                    </thead>
                    <tbody>
                        @foreach ($order as $item)
                            <tr class="{{ $item->upc }}">
                                <td>
                                    <input type="hidden" class="scanned" name="scanned[]">
                                    <input type="hidden" name="order_number[]" value="{{ $item->order_number }}">
                                    <input type="hidden" name="customer_name[]" value="{{ $item->customer_name }}">
                                    <input type="hidden" name="shipped_qty[]" value="{{ $item->shipped_qty }}">
                                    <input type="hidden" name="sku[]" value="{{ $item->sku }}">
                                    <input type="hidden" name="upc[]" value="{{ $item->upc }}">
                                    <input type="hidden" name="payment_method[]" value="{{ $item->payment_method }}">
                                    <input type="hidden" name="courier[]" value="{{ $item->courier }}">
                                    <input type="hidden" name="sub_total[]" value="{{ $item->sub_total }}">
                                    <input type="hidden" name="cnnumber[]" value="{{ $item->cnnumber }}">
                                </td>
                                <td>{{ $item->order_number }}</td>
                                <td>{{ $item->customer_name }}</td>
                                <td>{{ $item->shipped_qty }}</td>
                                <td>{{ $item->sku }}</td>
                                <td>{{ $item->upc }}</td>
                                <td>{{ $item->payment_method }}</td>
                                <td>{{ $item->courier }}</td>
                                <td>{{ $item->sub_total }}</td>
                                <td>{{ $item->cnnumber }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="row reason mt-4">
                    <div class="col-12 col-md-12 ml-auto">
                        <div class="form-group">
                            <select id="reason" name="reason" class="form-control" required>
                                <option value="refused by customer" selected>Refused by customer</option>
                                <option value="consignee not home">Consignee not home</option>
                                <option value="incomplete address">Incomplete address</option>
                                <option value="unable to pay">Unable to pay</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Return</button>
            </form>
        </div> 
    @endif
</div>
@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/scannerdetection/1.2.0/jquery.scannerdetection.js"></script>
<script>
    document.getElementById("scanupc").focus();
    document.getElementById("scanupc").select();
</script>
@if(!Request::has('shipment'))
<script>
    jQuery(document).scannerDetection({
        timeBeforeScanTest: 200,
        startChar: [120],
        endChar: [13], 
        onComplete: function(barcode, qty){ 
            $('.scan-control').val(barcode);
        }
    });

    $(document).ready(function(){
        var selection;

        $('#scanupc').on('input', function(){
            window.location.href = '{{ URL::to("shipment/scan_refused_shipment") }}'+'?shipment='+$(this).val();
        });

        $("#selection").change(function(){
            selection = $(this).val();
            $('.cn-label').hide();
            $('.order').hide();
            
            if(selection == 'order_number'){
                $(".scan-order").show();
                $(".scan-cn").hide();
            } else if(selection == 'cnnumber') {
                $(".scan-cn").show();
                $(".scan-order").hide();
                $(".order").hide();
            } else if(selection == 'intl_order_number') {
                $(".scan-order").show();
                $(".scan-cn").hide();
            } else {
                // $(".scan-order").hide();
                // $(".scan-cn").hide();
            }
        });

        $('.scan-control').on('input', function(){
            var input_value = $(this).val();
            var container = $('.order');
            var reason = $('.reason');
            var cnlable = $('.cn-label');
            var errorMsg = $('.error');
            
            if(selection == 'order_number'){
                $.ajax({
                    type: "GET",
                    url: "{{ URL::to('ajax/get_cn_by_order?order_number=') }}"+ input_value,   
                    dataType: 'json',
                    success: function(data){
                        if (!$.trim(data)){   
                            container.html('');
                            errorMsg.show();
                            cnlable.hide();
                        } else {
                            container.show();
                            container.html('');
                            cnlable.show();
                            errorMsg.hide();
                            $.each(data, function(index, item) {
                                container.append('</label><label class="mr-3"><input type="radio" class="mr-1" id="cn_get" name="cnnumber" value="'+ item.cnnumber +'" onclick="radioClick(this)">'+ item.cnnumber +'<label>');
                            });
                        }
                    },error:function(){ 
                        container.hide();
                        cnlable.hide();
                    }
                });
            }

            if(selection == 'intl_order_number'){
                $.ajax({
                    type: "GET",
                    url: "{{ URL::to('ajax/get_intl_by_order?order_number=') }}"+ input_value,   
                    dataType: 'json',
                    success: function(data){
                        if (!$.trim(data)){   
                            container.html('');
                            errorMsg.show();
                            cnlable.hide();
                        } else {
                            container.show();
                            container.html('');
                            cnlable.show();
                            errorMsg.hide();
                            $.each(data, function(index, item) {
                                container.append('</label><label class="mr-3"><input type="radio" class="mr-1" id="cn_get" name="cnnumber" value="'+ item.cnnumber +'" onclick="radioClickIntl(this)">'+ item.cnnumber +'<label>');
                            });
                        }
                    },error:function(){ 
                        container.hide();
                        cnlable.hide();
                    }
                });
            }
        });
    });

    function radioClick(obj){
        window.location.href = '{{ URL::to("shipment/scan_refused_shipment") }}'+'?shipment='+$(obj).val();
    }

    function radioClickIntl(obj){
        window.location.href = '{{ URL::to("shipment/scan_refused_shipment_intl") }}'+'?shipment='+$(obj).val();
    }
</script>
@else
<script>
    $('#scanupc').on('input', function(){
        detechUPC($(this).val());

        setTimeout(function(){
            document.getElementById('scanupc').value = "";
        }, 1000);
    });

    function detechUPC(barcode){
        $('.'+barcode).find("input[name='scanned[]']").val('scanned');
        $('.'+barcode).css('background-color', 'rgb(72, 199, 73)');

        if($('.'+barcode).css('background-color', 'rgb(72, 199, 73)')) {
            $('.'+barcode).html();
            $('.'+barcode).appendTo('table');
        }
    }
</script>
@endif
@endsection