<div class="container-fluid">
  <div class='row'>
    <div class="col-lg-10 col-md-10 col-sm-10">
      <h2> <%= t :cash_in %> </h2>
      <br>
      <table class='table table-striped'>
        <tr>
          <td> <%= t :payment_reference %>
          </td>
          <td>
              <input type="text" class="form-control" placeholder="Reference" id="reference">
          </td>
        </tr>
        <tr>
          <td> <%= t("views.right_panel.detail.remark") %>
          </td>
          <td>
              <input type="text" class="form-control" placeholder="Remark" id="remark">
          </td>
        </tr>
        <tr>
          <td> <%= t :payment_method %>
          </td>
          <td>
          <button class='btn bg- waves-effect payment-type' data-id='cash' id='cash' style="background-color: #7a62d3;"><%= t("views.btn.cash") %></button>
          <button class='btn bg- waves-effect payment-type' data-id='mpu' id='mpu' style="background-color: #7a62d3;"><%= t("views.btn.mpu") %></button>
          <button class='btn bg- waves-effect payment-type' data-id='visa' id='visa' style="background-color: #7a62d3;"><%= t("views.btn.visa") %></button>
          <button class='btn bg- waves-effect payment-type' data-id='jcb' id='jcb' style="background-color: #7a62d3;"><%= t("views.btn.jcb") %></button>
          </td>
        </tr>
        <tr>
          <td> <%= t :reference_number %>
          </td>
          <td>
             <input type="text" class="form-control" id="payment_method_reference">
          </td>
        </tr>
        <tr>
          <td> <%= t("views.right_panel.detail.amount") %>
          </td>
          <td>
                <input type="text" class="form-control" placeholder="Amount" id="amount">
          </td>
        </tr>
      </table>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 ">
    <br>
      <div class="button-demo m-t-40">
         <button type="button" class="btn bg-default waves-effect btn-" id='back'><i class="material-icons">reply</i> <%= t("views.btn.back") %> </button>
      <button type="button" class="btn bg-blue waves-effect btn-" id='cash_in'> <%= t("views.btn.cash_in") %> </button>
      </div>
     
    </div>
  </div>
</div>

<script>
   cashier_type   = '<%= @cashier_type %>';
    console.log(cashier_type)

  var payment_method = "";
  $('.payment-type').on('click',function(){
    $('.payment-type').css("background-color","#7a62d3");
    $(this).css("background-color","green");
    var type = $(this).attr('data-id')
    if(type == 'cash'){
      payment_method = 'cash';
    }else if(type == 'mpu'){
      payment_method = "mpu";
    }else if(type == 'visa'){
      payment_method = "visa";
    }else if(type == 'jcb'){
      payment_method = "jcb";
    }
  })
  $('#cash_in').on('click',function(){
    var reference = $('#reference').val();
    var remark = $('#remark').val();
    var amount = $('#amount').val();
    var payment_method_reference = $('#payment_method_reference').val();
    $.ajax({type: "POST",
      url: "<%= origami_cash_ins_path %>",
      data: "reference="+ reference + "&remark=" + remark + "&amount="+ amount + "&payment_method="+payment_method + "&payment_method_reference="+ payment_method_reference,
      success:function(result){
        if (cashier_type == 'quick_service' || cashier_type == 'food_court') {
          window.location.href = '/origami/'+cashier_type+'/pending_order';
        }else{
          window.location.href = '/origami';
        }
      }
    });
  })
  $('#back').on('click',function(){
    if (cashier_type == 'quick_service' || cashier_type == 'food_court') {
      window.location.href = '/origami/'+cashier_type+'/pending_order';
    }else{
      window.location.href = '/origami';
    }
 })
</script>
