@extends('layouts.app')

@section('content')
<div class="mb-4 d-flex">
<h3 class="text-muted my-auto"><b><i class="fas fa-vote-yea mr-2"></i>Accepted Refusals</b></h3>
</div>

<div class="card mb-4">
<div class="card-body">
<div class="scan-items">
<div class="form-group">
<input id="scanupc" type="text" class="form-control scan-control" placeholder="Scan Shipment #">
</div>
</div>
<div class="alert alert-success" role="alert" style="display:none">
Scanned Successfully
</div>
<div class="alert alert-danger" role="alert" style="display:none">
Shipment already scanned
</div>
</div>
</div>

<div class="card">
<div class="card-body">
<div class="table-responsive">
<form id="cn_grid" action="{{ URL::to('shipment/accepted_refusal_sheet') }}" method="POST">
@csrf
<table class="table table-hover table-center mb-0">
<thead>
<tr>
<th>Order #</th>
<th>Shipment #</th>
<th>Status</th>
<th>Call Center Action</th>
<th>Reason</th>
</tr>
</thead>
<tbody>
@csrf
@foreach($orders as $order)

<tr class="{{ $order->cnnumber }}">
<td>
<input type="hidden" name="confirmed_cn[]" value="{{ $order->cnnumber }}">
<input type="hidden" class="confirmed_status_{{ $order->cnnumber }}" name="confirmed_status[]" value="Not Confirmed">
{{ $order->order_number }}
</td>
<td>
{{ $order->cnnumber }}
<input type="hidden" name="cnnumber[]" value="{{ $order->cnnumber }}">
</td>
<td>
{{ Ucfirst($order->shipment_status) }}
<input type="hidden" name="shipment_status[]" value="{{ $order->shipment_status }}">
</td>
<td>
{{ Ucfirst($order->call_center_action) }}
<input type="hidden" name="call_center_action[]" value="{{ $order->call_center_action }}">
</td>
<td>
{{ Ucfirst($order->reason) }}
<input type="hidden" name="reason[]" value="{{ $order->reason }}">
</td>
</tr>
@endforeach
</tbody>
</table>
@if(sizeof($orders) > 0)
<button type="submit" class="btn btn-primary mt-4 boot-btn">Generate Refusal Sheet</button>
@endif
</form>
</div>
</div>
</div>
@endsection


@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/scannerdetection/1.2.0/jquery.scannerdetection.js"></script>
<script>

var confrimedOrders = [];
var packageValue = 1;

jQuery(document).scannerDetection({
timeBeforeScanTest: 200,
startChar: [120],
endChar: [13],
onComplete: function(barcode, qty){
$('.scan-control').val(barcode);
detechUPC(barcode);
}
});

function detechUPC(cnnumber){
var upc, item_id;
cn = cnnumber;
item_id = $('table').find('.'+cn).val();

if($('.confirmed_status_'+cn).val() == 'Confirmed'){
$('.alert-danger').show();
setTimeout(function() {
$('.alert-danger').show();
$('.alert-danger').fadeOut();
}, 1000 );
return false;
}

$('table').find('.'+cn).css({'background-color' : '#48C749', 'color' : '#ffffff'});
$('table').find('.confirmed_status_'+cn).val('Confirmed');
$('.alert-success').show();
// $('.alert-success').fadeIn().delay(1000).fadeOut();
setTimeout(function() {
// $('.alert-success').show();
$('.alert-success').fadeOut();
}, 1000 );


// if($.inArray(cn, confrimedOrders) !== -1){
// alert('cn already confirmed');
// return false;
// } else {
// // $('table').find('.'+cn).css({'background-color' : '#48C749', 'color' : '#ffffff'});
// // confrimedOrders.push(cn);
// // $('.confirmed_cn').append('<input type="hidden" name="confirmed_cn[]" value="'+cn+'">');
// // console.log(confrimedOrders);
// }
}

$(document).ready(function(){
$(".scan-control").val("");
document.getElementById("scanupc").focus();
document.getElementById("scanupc").select();

$('.scan-control').on('input', function(){
detechUPC($(this).val());
// $(this).val('');

setTimeout(function(){
$(".scan-control").val("");
}, 500);
});
});

$('.boot-btn').on('click', function(event){
event.preventDefault();
var notScanned = false;

$.each($('tr'), function(i, v){
if($(v).css('background-color') == 'rgb(72, 199, 73)'){
notScanned = true;
}
});

if(notScanned){
$('.lds-dual-ring').show();
$('#cn_grid').submit();
}else{
alert('Please scan Item first');
}
});
</script>
@endsection