<?php
/**
 * File			: transaksi_form.php
 * Description  : View untuk halaman transaksi
 * Created By	: Hendi
 * Created Date : 7 Apr 2021
 * Last Update  : 13 Apr 2021
**/
?>
<style>
    .sum {text-align: right;padding-right: 5px;font-size: 20px;font-weight: bold;}
</style>
<div class="container-fluid">
	<div class="row">
      	<div class="col-md-12">
			<div class="card">
				<div class="card-header card-header-info">
					<h4 class="card-title">Transaksi</h4>
					<p class="card-category">Input Transaksi Penjualan</p>
				</div>
				<div class="card-body" id="form-transaksi">
                    <input type="hidden" id="sts" name="sts" value="<?= esc($sts) ?>" />
                    <div class="row">
                        <div class="col-md-4">
          		            <div class="row">
                                  <label class="col-md-4 col-form-label">No. Transaksi</label>
                                  <div class="col-md-8">
                                      <div class="form-group has-default bmd-form-group">
                                          <input type="text" id="transaction-id" name="transaction_id" class="form-control" value="" readonly />
                                          <small>* otomatis</small>
                                      </div>
                                  </div>
                              </div>
                        </div>
                        <div class="col-md-4">
          		            <div class="row">
                                  <label class="col-md-4 col-form-label">Tgl. Transaksi</label>
                                  <div class="col-md-5">
                                      <div class="form-group has-default bmd-form-group">
                                          <input type="text" id="date" name="date" class="form-control" value="<?=date('Y-m-d')?>" readonly />
                                          <small>tahun-bln-tgl</small>
                                      </div>
                                  </div>
                              </div>
                        </div>
                        <div class="col-md-4">
          		            <div class="row">
                                  <label class="col-md-4 col-form-label">No. Antrian</label>
                                  <div class="col-md-3">
                                      <div class="form-group has-default bmd-form-group">
                                          <input type="text" id="queue-number" name="queue_number" class="form-control sum" value="0" readonly />
                                          <small>* otomatis</small>
                                      </div>
                                  </div>
                              </div>
                        </div>
                    </div>
                    <hr />
                    <div class="row">
                        <div class="col-md-6">
          		            <div class="row">
                                <label class="col-md-3 col-form-label">Kode Menu [F6]</label>
                                <div class="col-md-2">
                                    <div class="form-group has-default bmd-form-group">
                                        <input list="menu" id="menu-id" name="menu_id" class="form-control" value="" autocomplete="off" onchange="javascript: var _mn = getMenuName(this.value); document.getElementById('menu-name').value = _mn.toUpperCase();document.getElementById('qty').focus();"/>
                                        <datalist id="menu">
                                        <?php
											foreach ($menu_data as $v)
											{
												echo '<option value="'.$v['menu_id'].'"'.(isset($inputs['menu_id']) && $inputs['menu_id'] == $v['menu_id'] ? ' selected' : '').'>'.strtoupper($v['menu_name']).' | Rp. '.number_format($v['price'], 0, ',', '.').'</option>';
											}
										?>
                                        </datalist>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <input type="text" id="menu-name" name="menu_name" class="form-control" value="" min="1" readonly />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
          		            <div class="row">
                                <label class="col-md-2 col-form-label">QTY</label>
                                <div class="col-md-2">
                                    <div class="form-group has-default bmd-form-group">
                                        <input type="number" id="qty" name="qty" class="form-control" value="" min="1" required />
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <button id="add-detail-trx" type="button" class="btn btn-info pull-right" rel="tooltip" title="" data-original-title="Tambahkan ke Rincian"><i class="material-icons">add</i>&nbsp;&nbsp;&nbsp;Tambah [F7]</button>
                                </div>
                            </div>
                        </div>
                    </div> 
                    <hr />   
                    <div class="material-datatables">
						<table id="dt-<?= $mod.'-detail' ?>" class="table table-striped table-no-bordered table-hover dataTable dtr-inline" cellspacing="0" width="100%" role="grid">
							<thead>
								<tr role="row">
									<th>NO</th>
									<th>KODE</th>
									<th>NAMA MENU</th>
									<th>HARGA (RP)</th>
									<th>QTY</th> 
									<th>SUBTOTAL (RP)</th>
                                    <th>HAPUS</th>
								</tr>
							</thead>
							<tbody></tbody>
							<tfoot></tfoot>
						</table>
					</div>
                    <hr />
                    <div class="row">
                        <div class="col-md-6">
          		            <div class="row">
                                <div class="col-md-12">
                  		            <div class="row">
                                          <label class="col-md-2 col-form-label">Catatan</label>
                                          <div class="col-md-10">
                                              <div class="form-group has-default bmd-form-group">
                                                  <textarea id="note" name="note" class="form-control" rows="4" maxlength="200" required></textarea>
                                                  <small>boleh dikosongkan</small>
                                              </div>
                                          </div>
                                      </div>
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-md-4 col-form-label"><small>F5 = Input Transaksi Baru</small></label>
                                <label class="col-md-4 col-form-label"><small>F6 = Fokus ke Menu</small></label>
                                <label class="col-md-4 col-form-label"><small>F7 = Tambahkan ke Rincian</small></label>
                            </div>
                            <div class="row">
                                <label class="col-md-4 col-form-label"><small>F8 = Fokus ke Uang Bayar</small></label>
                                <label class="col-md-4 col-form-label"><small>F9 = Cetak Struk</small></label>
                                <label class="col-md-4 col-form-label"><small>F10 = Simpan Transaksi</small></label>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <button id="new-trx" type="button" class="btn btn-info pull-left" rel="tooltip" title="" data-original-title="Input Transaksi Baru" onclick="javascript:location.reload();"><i class="material-icons">border_color</i>&nbsp;&nbsp;&nbsp;Input [F5]</button>
                                </div>
                                <div class="col-md-4">
                                    <button id="print-trx" type="button" class="btn btn-warning pull-right" rel="tooltip" title="" data-original-title="Cetak Struk"><i class="material-icons">print</i>&nbsp;&nbsp;&nbsp;Cetak [F9]</button>
                                </div>
                                <div class="col-md-4">
                                    <button id="save-trx" type="button" class="btn btn-success pull-left" rel="tooltip" title="" data-original-title="Simpan Transaksi"><i class="material-icons">save</i>&nbsp;&nbsp;&nbsp;Simpan [F10]</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
          		            <div class="row">
                                <label class="col-md-3 col-form-label">TOTAL</label>
                                <div class="col-md-6">
                                    <div class="form-group has-default bmd-form-group">
                                        <input type="text" id="total" name="total" class="form-control sum" value="0" readonly />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-md-3 col-form-label">PAJAK (10%)</label>
                                <div class="col-md-6">
                                    <div class="form-group has-default bmd-form-group">
                                        <input type="text" id="tax" name="tax" class="form-control sum" value="0" readonly />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-md-3 col-form-label">TOTAL BAYAR</label>
                                <div class="col-md-6">
                                    <div class="form-group has-default bmd-form-group">
                                        <input type="text" id="total-paid" name="total_paid" class="form-control sum" value="0" readonly />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-md-3 col-form-label">UANG BAYAR [F8]</label>
                                <div class="col-md-6">
                                    <div class="form-group has-default bmd-form-group">
                                        <input type="text" id="cash" name="cash" class="form-control sum" value="0" />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-md-3 col-form-label">KEMBALI</label>
                                <div class="col-md-6">
                                    <div class="form-group has-default bmd-form-group">
                                        <input type="text" id="change" name="change" class="form-control sum" value="0" readonly />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	//_mod dideklarasikan di myscrypt.js
	_mod = '<?= $mod ?>';
    // menu makanan
    var _menu_json = <?=json_encode($menu_data)?>;
    // untuk detail transaksi
    var _arr_detail_trx = [];
</script>