<div class="breadcrumb">
<h4><?php echo $breadcrumb ?></h4>
</div>
<div class="row">
  <div class="col-md-12" id="layoutformadd">
    <div class="box">
      <div class="box-header with-border">
          <h3 class="box-title">Form Create Barcode</h3>
      </div>
      <div class="box-body">
        <form id="myfrm" method="POST"  action="<?php echo site_url('barcode/PrintBarcode'); ?>" class="form-inline" enctype="multipart/form-data" target="_blank" autocomplete="off">
        <!-- <form id="myfrm" class="form-inline"> -->
          <input type="hidden" id="createDate" name="createDate">
          <input type="hidden" id="imgBarcode" name="imgBarcode">
          <div class="form-group">
              <label>Customer</label>
              <input type="text" class="form-control" name="txtCustomer" id="txtCustomer" ><br/>
              <div id="suggesstion-box"></div>
          </div>
          <div class="form-group">
              <label>Produk</label>
              <input type="text" class="form-control" name="txtProduct" id="txtProduct"><br/>
              <div id="suggesstion-product"></div>
          </div>
          <div class="form-group">
              <label>Jumlah</label>
              <input type="text" class="form-control" name="txtJumlah" id="txtJumlah"><br/>
          </div>
          <div class="form-group">
            <div class="box-footer" style="border-top: 0;">
                 <button id="save" type="button" name="save" class="btn btn-primary btn-sm" onclick="previewBarcode(this)">Preview</button>
                 <button id="print" type="submit" name="print" class="btn btn-success btn-sm" style="display: none;"><i class="fa fa-print"></i> Print</button>
            </div>
          </div>
        </form>
      </div>
      <div class="box-body" id="preview-box">
        
      </div>         
    </div>
  </div>
</div>

<script>


  $(document).ready(function () 
  {
    $("#txtCustomer").keyup(function(){
        $.ajax({
        type: "POST",
        url : "<?php echo base_url('barcode/getDataCustomer') ?>",
        data:'keyword='+$(this).val(),
        beforeSend: function(){
          $("#txtCustomer").css("background","#FFF base_url(asset/images/LoaderIcon.gif) no-repeat 165px");
        },
        success: function(data){
          $("#suggesstion-box").show();
          $("#suggesstion-box").html(data);
          $("#txtCustomer").css("background","#FFF");
        }
    });
    });
    $("#txtProduct").keyup(function(){
        $.ajax({
        type: "POST",
        url : "<?php echo base_url('barcode/getDataProduct') ?>",
        data:'keyword='+$(this).val(),
        beforeSend: function(){
          $("#txtProduct").css("background","#FFF base_url(asset/images/LoaderIcon.gif) no-repeat 165px");
        },
        success: function(data){
          $("#suggesstion-product").show();
          $("#suggesstion-product").html(data);
          $("#txtProduct").css("background","#FFF");
        }
    });
    });

    // $('#myfrm').submit(function(e){
    //   var createDate = getToday();
    //   var imgBarcode = $('#preview-box').html();
    //   $('#createDate').val(createDate);
    //   $('#imgBarcode').val(imgBarcode);
    // })
  });

  function selectCustomer(obj) {
    var id = $(obj).attr('data-id');
   var val = $(obj).text();
    $("#txtCustomer").val(id+'-'+val);
    $("#suggesstion-box").hide();
  }


  function selectProduct(obj) {
    var id = $(obj).attr('data-id');
   var val = $(obj).text();
    $("#txtProduct").val(id+'-'+val);
    $("#suggesstion-product").hide();
  }

  function previewBarcode(obj){
    var codeCustomer = $('#txtCustomer').val();
    var codeProduct = $('#txtProduct').val();
    var jumlah = $('#txtJumlah').val();
    var date = getTodayNow();
    // var curr_date = date.getDate();
    // var curr_month = date.getMonth(); //Months are zero based
    // var curr_year = date.getFullYear();

    if(CheckEmptyVal('txtCustomer') == 1 && CheckEmptyVal('txtProduct') && CheckEmptyVal('txtJumlah')){
      $('#preview-box').empty();
      for(var i = 0; i < parseInt(jumlah); i++){

        var part1 = codeCustomer.split('-');
        var part2  = codeProduct.split('-');
        
        codeCustomer = part1[0];
        codeProduct =  part2[0];
        
        $('#preview-box').append('<img src="<?php echo site_url();?>barcode/CreateBarcode/'+ codeCustomer + codeProduct+ date +'" style="margin: 10px;">');
      }
      if(parseInt(jumlah) > 0 ){
        $('#print').css({ 'display': '' });
        var createDate = getToday();
        var imgBarcode = $('#preview-box').html();
        $('#createDate').val(createDate);
        $('#imgBarcode').val(imgBarcode);
      }
      else{
        $('#print').css({ 'display': 'none' });
      }
    }else if(CheckEmptyVal('txtProduct') && CheckEmptyVal('txtJumlah')){
      $('#preview-box').empty();
      $('#print').css({ 'display': 'none' });
    }else{
      CheckEmptyVal('txtJumlah');
      $('#preview-box').empty();
      $('#print').css({ 'display': 'none' });
    }
  }

  function CheckEmptyVal(id){

      var obj = $('#'+id);

      var result = 0;

      if ($(obj).val() != '' && $(obj).val() != undefined && $(obj).val() != null) {        
        
        $(obj).prev().children('span').remove();

        var label =  $(obj).prev().text();

        $(obj).prev().text(label);

        $(obj).css({ 'outline': '', 'outline-offset': '' });

        $(obj).attr('placeholder','');

        result = 1;

      }else{

        $(obj).prev().children('span').remove();

        var label =  $(obj).prev().text();

        $(obj).prev().html('<span style="color: #ff0000">*</span>' + label);

        $(obj).css({ 'outline': '2px solid #ff0000', 'outline-offset': '2px' });

        $(obj).attr('placeholder','required');

        result = 0;

      }

      return result;
  }

  function getTodayNow(){
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth() + 1; //January is 0!

    var yyyy = today.getFullYear();
    if (dd < 10) {
      dd = '0' + dd;
    } 
    if (mm < 10) {
      mm = '0' + mm;
    } 
    //var today = yyyy + '/' + mm + '/' + dd + ' ' + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();;
    var today = dd+''+mm+''+yyyy;
    return today;
  }


  function getToday(){
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth() + 1; //January is 0!

    var yyyy = today.getFullYear();
    if (dd < 10) {
      dd = '0' + dd;
    } 
    if (mm < 10) {
      mm = '0' + mm;
    } 
    var today = yyyy + '/' + mm + '/' + dd + ' ' + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();;

    return today;
  }

</script>

<style type="text/css">
  input[type=text], textarea
  {
      border: 1px solid #ccc;
  }
  input[type=text]:focus, textarea:focus
  {
      background-color: #FFBFFF;
      border: 1px solid #ccc;
  }
  .frmSearch {border: 1px solid #a8d4b1;background-color: #c6f7d0;margin: 2px 0px;padding:40px;border-radius:4px;}
#customer-list{float:left;list-style:none;margin-top:-3px;padding:0;width:190px;position: absolute;}
#customer-list li{padding: 10px; background: #f0f0f0; border-bottom: #bbb9b9 1px solid;}
#customer-list li:hover{background:#ece3d2;cursor: pointer;}
#txtCustomer{padding: 10px;border: #a8d4b1 1px solid;border-radius:4px;}

#product-list{float:left;list-style:none;margin-top:-3px;padding:0;width:190px;position: absolute;}
#product-list li{padding: 10px; background: #f0f0f0; border-bottom: #bbb9b9 1px solid;}
#product-list li:hover{background:#ece3d2;cursor: pointer;}
#txtProduct{padding: 10px;border: #a8d4b1 1px solid;border-radius:4px;}

</style>