@extends('layouts.backend')
@section('mainContentArea')
@include('backend.pos-window.bill-menu')
<style>
  .paymentLabel {
    display: block;
    font-weight:bold;
    font-size:12px;
  }
</style>
<div class="row">
    <div class="col-md-8 offset-md-2">
      <div class="card card-default">
        <div class="card-header"><h4>Add products to Exchange</h4></div>
        <div class="card-body">
          <div class="form-group">
            <label for="telephone">Barcode</label>
            <input type="text" class="form-control" id="exchangeSrch">
            <span class="text-danger">Scan the barcode to initiate the exchange</span>
          </div>
          <div class="form-group searchResults">
              <form method="post" action="{{ route('save-exchange') }}" name="exFrm">
                <input type="hidden" name="customer_id" value="{{ request('customer') }}">
                @csrf
                <table class="table table-striped">
                    <thead>
                        <th>Barcode</th>
                        <th>Article</th>
                        <th>Color</th>
                        <th>Size</th>
                        <th>Bill#</th>
                        <th>Date</th>
                        <th>MRP</th>
                        <th>SPS</th>
                        <th>Ex. Price</th>
                        <th>Action</th>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <td colspan="9" class="text-right"><b>Total:</b></td>
                            <td class="aggregate"></td>
                        </tr>
                        <tr>
                            <td class="text-right" colspan="10">
                                <button type="button" class="btn btn-sm btn-success" onclick="saveExchange();"><i class="fa fas fa-save"></i> Save Exchange</button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
              </form>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('extraJs')
<script>
    function saveExchange() {
        var tot = parseFloat($(".aggregate").html());
        if(isNaN(tot)) {
            toastr.error('Please select the products to exchange!');
            return false;
        }
        if(tot <= 0) {
            toastr.error('Please select the products to exchange!');
            return false;
        }

        document.exFrm.submit();
    }
    $("#exchangeSrch").keyup(function (event){
    if(event.which == 13) {
      var barcode = event.target.value;
      if($('tr.'+barcode.toLowerCase()).length > 0) {
          toastr.error('Barcode already added for exchange!');
          return false;
      }
      $.post("{{ route('get-exchange-product') }}", {
            _token: document.tokenForm._token.value,
            barcode: barcode,
            customer: {{ request('customer') }}
        }, function(result) {
            var response = jQuery.parseJSON(result);
            if(response.status == true) {
                toastr.success(response.info);
                var products = response.products;
                var html = '';
              //  for(i = 0; i < products.length; i++) {
                    //var product = products[i];
                    //var order = products[i].bill_info;
                    var product = products;
                    var order = products.bill_info;
                    html+='\
                        <tr class="'+product.barcode.toLowerCase()+'">\
                            <td>\
                            <input type="hidden" name="bill_product_id[]" value="'+product.id+'"/>\
                            <input type="hidden" name="source_pos[]" value="'+product.shop_from+'"/>\
                            <input type="hidden" name="order_id[]" value="'+order.id+'"/>\
                            <input type="hidden" name="barcode[]" value="'+product.barcode+'"/>\
                            <input type="hidden" name="hsn[]" value="'+product.hsn+'"/>\
                            <input type="hidden" name="qty[]" value="'+product.hsn+'"/>\
                            <input type="hidden" name="article[]" value="'+product.article+'"/>\
                            <input type="hidden" name="color[]" value="'+product.color+'"/>\
                            <input type="hidden" name="size[]" value="'+product.size+'"/>\
                            <input type="hidden" name="mrp[]" value="'+product.basemrp+'"/>\
                            <input type="hidden" class="selling_price" name="selling_price[]" value="'+product.selling_price+'"/>\
                            '+product.barcode+'\
                            </td>\
                            <td>'+product.article+'</td>\
                            <td>'+product.color+'</td>\
                            <td>'+product.size+'</td>\
                            <td>'+order.bill_number+'</td>\
                            <td>'+order.bill_date+'</td>\
                            <td>'+product.basemrp+'</td>\
                            <td>'+product.sps_mrp+'</td>\
                            <td>'+product.selling_price+'</td>\
                            <td><button class="btn btn-sm btn-danger" type="button" onclick="$(this).parent().parent().remove();calculateTot();"><i class="fa fas fa-times"/></button></td>\
                        </tr>\
                    ';
               // }
                $(".searchResults table tbody").append(html);
                calculateTot();
                $("#exchangeSrch").val('');
                $("#exchangeSrch").focus();
                return false;
            } else {
                toastr.error(response.info);
                $("#exchangeSrch").val('');
                $("#exchangeSrch").focus();
                calculateTot();
                return false;
            }
            return false;
        });
    }
  });

  function calculateTot() {
    var total = 0;
    $(".searchResults table tbody tr").each(function () {
        total+=parseFloat($(this).find('.selling_price').val());
    });
    $(".aggregate").html(total.toFixed(0));
  }
    $("#exchangeSrch").val('');
    $("#exchangeSrch").focus();
</script>
@endsection