{% extends 'adm/layout.html.twig' %}
{% block add_css %}
{{ parent() }}

{% endblock %}
{% block content %}

<div class="content-wrapper" id="vue-edit">

	<form class="edit-form" method="POST" action="{{ site_url('adm/sales_orders/save') }}">
	
	<section class="content-header">
		<div class="container-fluid">
			<div class="row mb-2">
				<div class="col-sm-6">
					<h4>{{ content_title }}</h4>
				</div>
				<div class="col-sm-6">
					<ol class="breadcrumb float-sm-right">
						<li class="breadcrumb-item">Beranda</li>
						<li class="breadcrumb-item"><a href="#">Penjualan</a></li>
					</ol>
				</div>
			</div>
		</div>
	</section>

	<!-- Main content -->
	<section class="content">

		<div class="container-fluid">

			<div class="row">

				<div class="col-md-12">

					<div class="card card-default">
						
						<div class="card-body">
							<div class="row">
								<div class="col-md-3">
									<div class="form-group">
										<input type="hidden" class="form-control" name="id" id="id" value="{{ id }}">

										<label class="control-label">Nomor</label>
										<input type="text" class="form-control" id="number" name="number" tabindex="1"
											value="{{ autonumber }}" readonly="readonly" style="background-color:white" required="required">
									</div>
								</div>

								<div class="col-md-3">
									<div class="form-group">
										<label>Tanggal</label>

										<div class="input-group date-input" data-target-input="nearest">
											<input type="text" class="form-control" id="sales-order-date" name="date" tabindex="2" value="{{ date_text }}" required="required">

											<div class="input-group-append" data-target=".date-input" data-toggle="datetimepicker">
												<div class="input-group-text"><i class="far fa-calendar"></i></div>
											</div>
										</div>
									</div>
								</div>

								<div class="col-md-3">
									<div class="form-group">
										<label>Pelanggan</label>
										<select class="form-control select2" id="customer-select" name="customer" tabindex="3" required="required">
											<option value="">- Pilih -</option>
											{% if customer_data %}
											{% for customer_row in customer_data %}
											<option value="{{ customer_row.customer_id }}"
												{% if same(customer_row.customer_id, check_array_key(header_data, 'sales_order_header_customer_id')) %}
												selected="selected" {% endif %}>{{ customer_row.customer_name }}</option>
											{% endfor %}
											{% endif %}
										</select>
									</div>
								</div>

								<div class="col-md-3">
									<div class="form-group">
										<label>Metode Pembayaran</label>
										<select class="form-control select2" id="payment-method-select" name="payment_method" tabindex="4">
											<option value="Tunai"
												{% if same("Tunai", check_array_key(header_data, 'sales_order_header_payment_method')) %}
												selected="selected" {% endif %}>Tunai</option>
											<option value="Kredit"
												{% if same("Kredit", check_array_key(header_data, 'sales_order_header_payment_method')) %}
												selected="selected" {% endif %}>Kredit</option>
										</select>
									</div>
								</div>

							</div>

							<div class="row">
								<div class="col-md-3">
									<div class="form-group">
										<label class="control-label">Jangka Waktu Pembayaran</label>
										<input type="text" class="form-control" id="payment-term-text" name="payment_term" readonly="readonly" style="background-color:white">
									</div>
								</div>

								<div class="col-md-3">
									<div class="form-group">
										<label class="control-label">Tanggal Jatuh Tempo</label>
										<input type="text" class="form-control" id="payment-due-text" name="payment_due" readonly="readonly"
											style="background-color:white">
									</div>
								</div>
							</div>

						</div>
					</div>

				</div>

			</div>
			
			<div class="row">
				<div class="col-12">
					<div class="card">
						<div class="card-header">
							<!-- <h3 class="card-title">List Material</h3> -->
								
								<button type="button" class="btn btn-primary" @click="detailAdd">
									Tambah Item
								</button>
								
								<button type="button" class="btn btn-danger" @click="detailDelete">
									Hapus Item
								</button>
						</div>
							
						<div class="card-body p-2" style="max-height: 800px;">

								<table class="table table-responsive table-striped" style="width:100%" id="edit-table" border="0">
								<thead>
									<tr>
										<th align="left" rowspan="0" style="width:1%">
											<input class="check-all" type="checkbox">
										</th>
										<th align="left" rowspan="2" style="width:15%">Nama Barang</th>
										<th align="left" colspan="3" style="width:25%;">Satuan Besar</th>
										<th align="left" colspan="3" style="width:25%;">Satuan Sedang</th>
										<th align="left" colspan="3" style="width:25%;">Satuan Kecil</th>
										<!-- <th align="left" rowspan="0">Diskon</th> -->
										<th align="left" rowspan="0" style="width:9%">Total Harga</th>
									</tr>
									<tr>
										<th align="left" style="width: 10%;">Satuan</th>
										<th align="left" style="width: 5%;">Quantity</th>
										<th align="left" style="width: 10%;">Harga</th>
										<th align="left" style="width: 10%;">Satuan</th>
										<th align="left" style="width: 5%;">Quantity</th>
										<th align="left" style="width: 10%;">Harga</th>
										<th align="left" style="width: 10%;">Satuan</th>
										<th align="left" style="width: 5%;">Quantity</th>
										<th align="left" style="width: 10%;">Harga</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(row, detail_idx) in detailData">
										<td>
											<input class="check-sub" type="checkbox" v-bind:value="detail_idx">
										</td>
										<th class="sticky-column">
											<input type="text" class="form-control" style="width:100%; background-color: white;" disabled v-model="row.name">
										</th>
										<td>
											<input type="text" v-if="row.lg_unit != ''" class="form-control" style="width:100%; background-color: white;" v-model="row.lg_unit">
										</td>
										<td>
											<input type="text" v-if="row.lg_unit != ''" class="form-control text-danger" @keyup="handleCount(row, 'lg_unit_qty', $event.target.value)" style="width:100%;" v-model="row.lg_unit_qty">
										</td>
										<td>
											<input type="text" v-if="row.lg_unit != ''" class="form-control text-danger currency-mask" @keyup="handlePrice(row, 'lg_unit_prc', $event.target.value)" style="width:100%; text-align:right" v-model="row.lg_unit_prc">
										</td>
										<td>
											<input type="text" v-if="row.md_unit != ''" class="form-control" style="width:100%; background-color: white;" v-model="row.md_unit">
										</td>
										<td>
											<input type="text" v-if="row.md_unit != ''" class="form-control text-danger" @keyup="handleCount(row, 'md_unit_qty', $event.target.value)" style="width:100%;" v-model="row.md_unit_qty">
										</td>
										<td>
											<input type="text" v-if="row.md_unit != ''" class="form-control text-danger currency-mask" @keyup="handlePrice(row, 'md_unit_prc', $event.target.value)" style="width:100%; text-align:right" v-model="row.md_unit_prc">
										</td>
										<td>
											<input type="text" v-if="row.sm_unit != ''" class="form-control" style="width:100%; background-color: white;" v-model="row.sm_unit">
										</td>
										<td>
											<input type="text" v-if="row.sm_unit != ''" class="form-control text-danger" @keyup="handleCount(row, 'sm_unit_qty', $event.target.value)" style="width:100%;" v-model="row.sm_unit_qty">
										</td>
										<td>
											<input type="text" v-if="row.sm_unit != ''" class="form-control text-danger currency-mask" @keyup="handlePrice(row, 'sm_unit_prc', $event.target.value)" style="width:100%; text-align:right" v-model="row.sm_unit_prc">
										</td>
										<!-- <td>
											<div class="input-group">
												<input type="text" class="form-control text-right text-danger currency-mask" @keyup="handlePrice(row, 'discount', $event.target.value)" v-model="row.discount">
												<div class="input-group-append">
													<span class="input-group-text">%</span>
												</div>
											</div>
										</td> -->
										<td>
											<input type="text" class="form-control text-right text-success text-bold currency-mask" @keyup="handlePrice(row, 'total', $event.target.value)" style="width:100%; background-color:white" v-model="row.total" disabled>
										</td>
									</tr>
								</tbody>
								<tfoot>
									<tr>
										<th colspan="8"></th>
										<th align="left" colspan="2">Grand Total</th>
										<th colspan="2">
											<input type="text" name="grand_total" class="form-control text-right text-success text-bold currency-mask" v-bind:value="countSubTotal()">
										</th>
									</tr>
								</tfoot>
							</table>

						</div>
						<div class="card-footer">

							<div class="form-group">
								<label class="control-label">Keterangan</label>
								<textarea class="form-control" name="description" rows="6">{{ check_array_key(header_data, 'purchase_order_header_description') }}</textarea>
							</div>

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

			<div class="row">

				<div class="col-md-12">

					<div class="card card-default col-md-2 float-right">
						
						<div class="card-body">
							<div class="row">
								<div class="col-md-12">
									<button type="submit" class="btn btn-success float-right" style="width: 100%;">
									Simpan
								</button>
								</div>
							</div>
						</div>
					</div>

				</div>

			</div>
		 	
		</div>

	</section>
	<!-- /.content -->

	</form>

</div>

<div class="modal fade edit-modal" id="modal-default">
	<div class="modal-dialog modal-xl">
		<div class="modal-content edit-modal-content">
			Loading...
		</div>
	</div>
</div>

{% endblock  %}

{% block add_javascript %}
{{ parent() }}


<script type="text/javascript" src="{{ assets_url('assets/js/app/sales_orders/edit.js?') }}"></script>

<script type="text/javascript">
	window.FORM_EDIT.handleVue();
	window.INPUT.handleSelect2();
</script>
{% endblock  %}