<!-- The Modal -->
<script>
function calc_paym(amt){
	amount = new Number($('#paym_amount').val());
	total_paym = amount + new Number(amt);
	$('#paym_amount').val(total_paym)
	}
function get_paym(type){
	$('#paym_type').val(type);
	$('.link_paym').removeClass('bold');
	$('#'+type).addClass('bold');
	}
</script>
<style>
.link_grey{background-color:#CCC;}
</style>
<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header py-1">
        <h5 class="modal-title">Close Order</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div>Pembayaran <br>
        	<a href="javascript:void(0)" onclick="get_paym('Tunai')" id="Tunai" class="btn btn-blue link_paym">Tunai</a>
            <a href="javascript:void(0)" onclick="get_paym('Debit')" id="Debit" class="btn btn-blue link_paym">Debit</a>
            <a href="javascript:void(0)" onclick="get_paym('KK')" id="KK" class="btn btn-blue link_paym">Kartu Kredit</a>
            <a href="javascript:void(0)" onclick="get_paym('QRIS')" id="QRIS" class="btn btn-blue link_paym">QRIS</a>
            <a href="javascript:void(0)" onclick="get_paym('Gopay')" id="Gopay" class="btn btn-blue link_paym">Gopay</a>
            <a href="javascript:void(0)" onclick="get_paym('Ovo')" id="Ovo" class="btn btn-blue link_paym">Ovo</a>
            <input type="hidden" value="Tunai" id="paym_type" name="paym_type">
        </div>
        <div class="pt-2">
        	<a href="javascript:void(0)" onclick="calc_paym('1000')" class="btn btn-light link_grey">1.000</a>
        	<a href="javascript:void(0)" onclick="calc_paym('2000')" class="btn btn-light link_grey">2.000</a>
        	<a href="javascript:void(0)" onclick="calc_paym('5000')" class="btn btn-light link_grey">5.000</a>
			<a href="javascript:void(0)" onclick="calc_paym('10000')" class="btn btn-light link_grey">10.000</a>
            <a href="javascript:void(0)" onclick="calc_paym('20000')" class="btn btn-light link_grey">20.000</a>
            <a href="javascript:void(0)" onclick="calc_paym('50000')" class="btn btn-light link_grey">50.000</a>
            <a href="javascript:void(0)" onclick="calc_paym('100000')" class="btn btn-light link_grey">100.000</a>
        </div>
        
        
        <div class="d-flex mt-2" style="border-top:1px solid #999">
		  <div class="p-1 flex-fill"><h4>Total Order</h4></div>
		  <div id="order_total" class="p-1 flex-fill tr"></div>
		</div>
        <div class="d-flex">
        	<div class="flex-fill"><h4>&nbsp;Dibayar</h4></div>
        	<div class="flex-fill">
                    <input type="text" class="form-control input input-lg tr w-100 prevent_key" value="0" id="paym_amount" name="paym_amount">
            </div>
        </div>

      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
      <button class="btn btn-success w-50" onClick="validation('save')">Bayar</button>
        <button type="button" class="btn btn-danger w-50" data-dismiss="modal">Cancel</button>
      </div>

    </div>
  </div>
</div>