@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
            {{-- <form method="get" action="{{ route('pos-audit-close-stock')  }}" onsubmit="return confirm('Are you sure you want to Close Audit ');">
                @csrf
                <input type="hidden" class="form-control" name="pos_id" value="{{ $pos->id }}">
                <input type="submit" style="float:right;width: 18%; color: white!important;font-size: 17px;" class="form-control btn btn-md btn-success" name="closeaudit" value='Close Audit'>
          </form> --}}
         
          {{-- <form method="get" action="{{ route('pos-audit-start-stock')  }}" onsubmit="return confirm('Are you sure you want to Start Audit ');">
            @csrf
            <input type="hidden" class="form-control" name="pos_id" value="{{ $pos->id }}">
            <input type="submit" style="float:right;width: 18%; color: white!important;font-size: 17px;" class="form-control btn btn-md btn-success" name="closeaudit" value='Start Audit'>
          </form> --}}
         
        </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_POS as $posi)
                                    @if($posi->id == $pos->id)
                                        <option value="{{ $posi->id }}">{{ $posi->name }} {{ ' ' }} {{ $posi->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">{{ $scannedData->count() }}</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>
                            @if($scannedData->count() > 0)
                            @foreach($scannedData as $obj)
                            <tr>
                                <td>{{ $obj->boxnum }}</td>
                                <td>{{ $obj->barcode }}</td>
                                <td>{{ $obj->article }}</td>
                                <td>{{ $obj->color }}</td>
                                <td>{{ $obj->size }}</td>
                                <td>{{ $obj->mrp }}</td>
                                <td>{{ '1' }}</td>
                            </tr>
                            @endforeach
                            @endif
                        </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();
    $("#auditBarcode").prop('disabled', true);
    $.post("{{ route('audit-pos-get-scan-barcode-info') }}", {
        _token: document.tokenForm._token.value,
        barcode: barcode,
        pos_id: $("#store_id").val(),
        save_audit: 1,
        boxNum: boxNum
    }, function(result) {
        var response = jQuery.parseJSON(result);
        if(response.status == true) {
            toastr.success(response.info);
            $("#auditBarcode").prop('disabled', false);
            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 ='<input type="hidden" name="article[]"  value="'+response.articles[idx].id+'"/>'+response.articles[idx].code+'';
                    } 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 ='<input type="hidden" name="color[]" value="'+response.colors[idx].id+'"/>'+response.colors[idx].name+'';;
                    } 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 ='<input type="hidden" name="size[]" value="'+response.sizes[idx].id+'"/>'+response.sizes[idx].name+'';
                    } 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="hidden" step="any" class="mrp_'+barcode+' form-control" name="mrp[]" value="'+barcodeInfo.mrp+'">'+barcodeInfo.mrp+'</td>\
                    <td><input type="hidden"  class="qty_'+barcode+' form-control" name="qty[]" value="'+barcodeInfo.qty+'">'+barcodeInfo.qty+'</td>\
                    <!--td colspan="2"><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);
            var barcodeInfo = response.barcodeInfo;
            $("#auditBarcode").val('');
            $("#auditBarcode").focus();
            $("#auditBarcode").prop('disabled', false);
            var html = '';
            var articleSelect ='<input type="hidden" name="article[]"  value=""/><input type="text" class="article"  value=""/>';
            var colorSelect ='<input type="hidden" name="color[]" value=""/><input type="text" class="color"  value=""/>';
            var sizeSelect ='<input type="hidden" name="size[]" value=""/><input type="text" class="size"  value=""/>';

            html+='<tr class="'+barcode+'" id="'+response.r_id+'">\
                    <td><input type="hidden" name="boxnum[]" class="boxnum" value="'+boxNum+'">'+boxNum+'</td>\
                    <td><input type="hidden" name="barcode[]" class="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="hidden" step="any" class="mrp_'+barcode+' form-control" name="mrp[]" value=""><input type="text" class="bmrp"  value=""/></td>\
                    <td><input type="hidden"  class="qty_'+barcode+' form-control" name="qty[]" value="1">1 &nbsp; <button type="button" onclick="updaterow(\''+response.r_id+'\')" class="btn btn-primary btn-sm">Update</button></td>\
                    <!--td colspan="2"><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);
            return false;
        }
        return false;
    });
}

function updaterow(id) {
    var article = $('#'+id).find('.article').val();
    var color = $('#'+id).find('.color').val();
    var size = $('#'+id).find('.size').val();
    var bmrp = $('#'+id).find('.bmrp').val();
    var rowid = id;
    var boxNum = $('#'+id).find('.boxnum').val();
    var barcode = $('#'+id).find('.barcode').val();
    $('#'+id).find('button').prop('disabled', true);
    $.post("{{ route('audit-pos-get-scan-barcode-info-manual') }}", {
        _token: document.tokenForm._token.value,
        barcode: barcode,
        article: article,
        color: color,
        size: size,
        bmrp: bmrp,
        rowid: rowid,
        boxNum: boxNum
    }, function(result) {
        var response = jQuery.parseJSON(result);
        if(response.status == true) {
            toastr.success(response.info);
            var html = '';
            html+='<td><input type="hidden" name="boxnum[]" class="boxnum" value="'+response.boxNum+'">'+response.boxNum+'</td>\
                    <td><input type="hidden" name="barcode[]" class="barcode" value="'+barcode+'">'+barcode+'</td>\
                    <td>'+article+'</td>\
                    <td>'+color+'</td>\
                    <td>'+size+'<input type="hidden" name="warehouse_id[]" value="'+$("#store_id").val()+'"/></td>\
                    <td><input type="hidden" step="any" class="mrp_'+barcode+' form-control" name="mrp[]" value="'+bmrp+'">'+bmrp+'</td>\
                    <td><input type="hidden"  class="qty_'+barcode+' form-control" name="qty[]" value="1">1</td>\
                    <!--td colspan="2"><button class="btn btn-sm btn-danger" type="button" onclick="$(\'tr.'+barcode+'\').remove();return false;">REMOVE</button></td-->\
            ';
        }
        $("#"+rowid).html(html);
        return false;
    });
}
</script>
@endsection