<div class="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">Laporan</h3>
      </div>
      <div class="box-body">
        <div class="form-group row">
          <div class="form-group col-lg-4 col-md-6 col-xs-12" style="margin-bottom: 0;">
              <label>Customer</label>
              <input type="text" class="form-control" name="txtCustomer" id="txtCustomer"><br/>
              <div id="suggesstion-box"></div>
          </div>
          <div class="form-group col-lg-4 col-md-6 col-xs-12" style="margin-bottom: 0;">
              <label>Produk</label>
              <input type="text" class="form-control" name="txtProduct" id="txtProduct"><br/>
              <div id="suggesstion-product"></div>
          </div>
        </div>
        <div class="form-group row">
          <div class="form-group col-lg-4 col-md-6 col-xs-12" style="margin-bottom: 0;">
            <label class="">Start Date</label>
            <div class="input-group date" data-provide="datepicker">
                <input type="text" class="form-control" id="tgl_awal">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                </div>
            </div>
          </div>
          <div class="form-group col-lg-4 col-md-6 col-xs-12" style="margin-bottom: 0;">
            <label class="">End Date</label>
            <div class="input-group date" data-provide="datepicker">
                <input type="text" class="form-control" id="tgl_akhir">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                </div>
            </div>
          </div>
          <div class="form-group col-md-6" style="padding-top: 25px;">
            <button class="btn btn-success" onclick="filterByDate()">Search <i class="fa fa-search"></i></button>
          </div>
        </div>

        <div id="result"></div>
        <!-- <div id="laporan_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
          <div class="row">
            <div class="col-sm-12" style="overflow-x: auto;">
              <table id="tbLaporan" class="table table-bordered table-striped dataTable" >
                <thead>
                  <tr role="row">
                    <th style="text-align: center;">No</th>
                    <th style="text-align: center;">Kode Customer</th>
                    <th style="text-align: center;">Nama Customer</th>
                    <th style="text-align: center;">Total Unit</th>
                  </tr>
                </thead>
                <tbody>                
                </tbody>
              </table>
            </div>
          </div>
        </div> -->
      </div>     
    </div>
  </div>
</div>

                
              
  <script type="text/javascript">
    $(function()
    {
      $('#tgl_awal').datepicker({autoclose: true,todayHighlight: true,format: 'YYYY-mm-dd'}),
      $('#tgl_akhir').datepicker({autoclose: true,todayHighlight: true,format: 'yyyy-mm-dd'})
    });
    var table;
    $(document).ready(function(){
      $('#txtCustomer').attr("autocomplete", "off");
      $('#txtProduct').attr("autocomplete", "off");
      $('#tgl_awal').attr("autocomplete", "off");
      $('#tgl_akhir').attr("autocomplete", "off");
    

      $("#txtCustomer").keyup(function(){
        $.ajax({
          type: "POST",
          url : "<?php echo base_url('barcode/getDataCustomerLap') ?>",
          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/getDataProductLap') ?>",
          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");
          }
        });
      });
      
    });


    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 filterByDate(){
      var customerCode =  $('#txtCustomer').val();
      var productCode =  $('#txtProduct').val();
      var dateFrom = $('#tgl_awal').val();
      var dateTo = $('#tgl_akhir').val();
      
      $.ajax({
       url:"<?php echo site_url('Laporansummary/LaporanSearch')?>",
       method:"POST",
       data: {
                      "customerCode": customerCode,
                      "productCode": productCode,
                      "dateFrom": dateFrom,
                      "dateTo": dateTo
                  },
         success:function(data){
            $('#result').html(data);
         }
      })
      
    }

    function cDate(_date){
      var year = _date.substring(0,2);
      var month = _date.substring(3,5);
      var date =  _date.substring(6,10);
      var today = year + '/' + month + '/' + date;

      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>