@extends('layouts.backend')
@section('extraCss')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
@endsection
@section('mainContentArea')
@include('backend.pos-window.bill-menu')
<div class="card card-default">
    <div class="card-header">
        <h4>
            Audit Scans
        </h4>
    </div>
    <div class="card-body">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Select {{ $stype }}</th>
                    <th>Cell Num.</th>
                    <th>Scan Barcode</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <select name="store_id" id="store_id" class="form-control">
                                @foreach($ALL_WAREHOUSES as $pos)
                                    @if(in_array($pos->id, $assignedStores))
                                        <option value="{{ $pos->id }}">{{ $pos->name }} {{ ' ' }} {{ $pos->city }}</option>
                                    @endif
                                @endforeach
                        </select>
                    </td>
                    <td><input type="text" class="form-control" id="boxNum"></td>
                    <td><input type="text" class="form-control" id="auditBarcode"></td>
                </tr>
            </tbody>
        </table>
        <div class="row">
            <div class="col-md-12 table-responsive">
                <div class="text-right">Total Items: <span class="totalItems"></span></div>
                <form method="post" action="{{ route('audit-save-barcode-scans') }}" onsubmit="return confirm('Are you sure you want to lock this scan? Once locked the items cannot be reverted back! Press OK to continue! Press Cancel to abort!');">
                    <div class="text-right"><button class="btn btn-md btn-success"><i class="fa fas fa-save"></i> Save Scan Audit</button></div>
                    @csrf
                    <table class="table table-striped table-bordered" id="scannedOutput">
                        <thead>
                            <th>Cell No.</th>
                            <th>Barcode</th>
                            <th>Article</th>
                            <th>Color</th>
                            <th>Size</th>
                            <th>MRP</th>
                            <th>Qty</th>
                            <th colspan="2">Action</th>
                        </thead>
                        <tbody></tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('extraJs')
<script>
$("#auditBarcode").keyup(function (event) {
    if(event.which == 13) {
      var barcode = event.target.value;
      var boxNum = $("#boxNum").val();
      if($.trim(boxNum) == '') {
          toastr.error('Please enter the Cell Number')
          return false;
      }
      if($.trim(barcode) == '') {
          toastr.error('Please enter the Barcode')
          return false;
      }
      if($('tr.'+barcode).length > 0) {
          toastr.error('Barocode already scanned and is in the list!')
          return false;
      }
      atc(barcode);
    }
});

function updateBarcodeInfo(barcode) {
    var article = $(".article_"+barcode).val();
    var size = $(".size_"+barcode).val();
    var color = $(".color_"+barcode).val();
    var qty = $(".qty_"+barcode).val();
    var mrp = $(".mrp_"+barcode).val();
    var warehouse_id = $("#store_id").val();
    $.post("{{ route('audit-update-barcode-info') }}", {
        _token: document.tokenForm._token.value,
        product_id: article,
        size_id: size,
        color_id: color,
        qty: qty,
        mrp: mrp,
        warehouse_id: warehouse_id,
        barcode: barcode
    }, function(result) {
        var response = jQuery.parseJSON(result);
        if(response.status == true) {
            toastr.success(response.info);
            return false;
        } else {
            toastr.error(response.info);
            return false;
        }
        return false;
    });
}

function atc(barcode) {
    var boxNum = $("#boxNum").val();
    $.post("{{ route('audit-get-scan-barcode-info') }}", {
        _token: document.tokenForm._token.value,
        barcode: barcode,
        pos_id: $("#store_id").val(),
    }, function(result) {
        var response = jQuery.parseJSON(result);
        if(response.status == true) {
            toastr.success(response.info);
            var barcodeInfo = response.barcodeInfo;
            $("#auditBarcode").val('');
            $("#auditBarcode").focus();
            // POPULATE THE RECORDS
            var html = '';
            var articleSelect = '<select class="article_'+barcode+' form-control" name="article[]">';
                for(var idx = 0; idx < response.articles.length; idx++) {
                    if(response.articles[idx].code == barcodeInfo.article) {
                        articleSelect+='<option value="'+response.articles[idx].id+'" selected>'+response.articles[idx].code+'</option>';
                    } else {
                        articleSelect+='<option value="'+response.articles[idx].id+'">'+response.articles[idx].code+'</option>';
                    }
                }
                articleSelect+='</select>';
            var colorSelect = '<select class="color_'+barcode+' form-control" name="color[]">';
                for(var idx = 0; idx < response.colors.length; idx++) {
                    if(response.colors[idx].name == barcodeInfo.color) {
                        colorSelect+='<option value="'+response.colors[idx].id+'" selected>'+response.colors[idx].name+'</option>';
                    } else {
                        colorSelect+='<option value="'+response.colors[idx].id+'">'+response.colors[idx].name+'</option>';
                    }
                }
                colorSelect+='</select>';
            var sizeSelect = '<select class="size_'+barcode+' form-control" name="size[]">';
                for(var idx = 0; idx < response.sizes.length; idx++) {
                    if(response.sizes[idx].name == barcodeInfo.size) {
                        sizeSelect+='<option value="'+response.sizes[idx].id+'" selected>'+response.sizes[idx].name+'</option>';
                    } else {
                        sizeSelect+='<option value="'+response.sizes[idx].id+'">'+response.sizes[idx].name+'</option>';
                    }
                }
                sizeSelect+='</select>';


            html+='<tr class="'+barcode+'">\
                    <td><input type="hidden" name="boxnum[]" value="'+boxNum+'">'+boxNum+'</td>\
                    <td><input type="hidden" name="barcode[]" value="'+barcode+'">'+barcode+'</td>\
                    <td>'+articleSelect+'</td>\
                    <td>'+colorSelect+'</td>\
                    <td>'+sizeSelect+'<input type="hidden" name="warehouse_id[]" value="'+$("#store_id").val()+'"/></td>\
                    <td><input type="number" step="any" class="mrp_'+barcode+' form-control" name="mrp[]" value="'+barcodeInfo.mrp+'"></td>\
                    <td><input type="number"  class="qty_'+barcode+' form-control" name="qty[]" value="'+barcodeInfo.qty+'"></td>\
                    <td><button class="btn btn-sm btn-default" type="button" onclick="updateBarcodeInfo(\''+barcode+'\');return false;">UPDATE</button></td>\
                    <td><button class="btn btn-sm btn-danger" type="button" onclick="$(\'tr.'+barcode+'\').remove();return false;">REMOVE</button></td>\
                    </tr>\
            ';
            $("#scannedOutput tbody").prepend(html);
            $("span.totalItems").html($("#scannedOutput tr").length - 1);
            // POPULATE THE RECORDS
            return false;
        } else {
            toastr.error(response.info);
            $("#auditBarcode").val('');
            $("#auditBarcode").focus();
            return false;
        }
        return false;
    });
}
</script>
@endsection