@extends('layouts.index')

@push('styles')
{{-- <link rel="stylesheet" href=" {{asset('copy/style.css')}} ">
<link rel="stylesheet" href=" {{asset('copy/chosen.css')}} "> --}}

<style>
	.form-control-sm+.select2-container .select2-selection--single{
		height: auto !important;
	}
	.table td, .table th{
		white-space: normal;
	}

	.table-overflow{
		height: 300px;
  		border: 1px dotted black;
  		overflow: scroll;
	}
</style>
@endpush

@section('header')
<div class="row align-items-center py-4">
	<div class="col-lg-6 col-7">
		<h6 class="h2 text-white d-inline-block mb-0"> {{$title}} </h6>
		<nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
			<ol class="breadcrumb breadcrumb-links breadcrumb-dark">
				<li class="breadcrumb-item"><a href="{{url($url)}}"><i class="fas fa-home"></i></a></li>
				<li class="breadcrumb-item active" aria-current="page">{{$menu}}</li>
			</ol>
		</nav>
	</div>
</div>
@endsection

@section('content')
<div class="row">
	<div class="col">
		<div class="card-wrapper">
			<!-- Default browser form validation -->
			<div class="card">
				<!-- Card header -->
				<div class="card-header">
					<h3 class="mb-0">Edit Data {{$title}}</h3>
				</div>
				<!-- Card body -->
				<div class="card-body">
					<form method="POST" action="{{route('transaksi.update', $transaksi->id)}}">
						@csrf
						{{method_field('PUT')}}
						<div class="row mb-3">
							<div class="col-md-6">

								{{-- <div class="form-group">
									<label class="form-control-label" for="kd_transaksi">Kode Transaksi</label>
									<input type="name" class="form-control form-control-sm" name="kd_transaksi" id="kd_transaksi" readonly="" value="{{$transaksi->kd_transaksi}}" required>
									@error('kd_transaksi') <span class="text-danger error">{{ $message }}</span>@enderror
								</div> --}}

								<div class="form-group">
									<label class="form-control-label" for="reference">Reference No.</label>
									<input type="name" class="form-control form-control-sm" name="reference" id="reference" placeholder="Reference" maxlength="200" required value="{{old('reference', $transaksi->reference)}}">
									@error('reference') <span class="text-danger error">{{ $message }}</span>@enderror
								</div>

								<div class="form-group">
									<label class="form-control-label" for="dealer_id">Nama Dealer - Customer No.</label>
									<select name="dealer_id" value="{{ old('delaer_id', $transaksi->dealer_id)}}"  class="form-control form-control-sm select2" id="dealer_id" required>
										@foreach ($dealers as $d)
										<option value="{{ $d->id }}" @if($d->id == $transaksi->dealer_id) {{"SELECTED"}} @endif>{{ $d->nama_dealer }} - {{ $d->cust_number }} </option>
										@endforeach
									</select>
									@error('dealer_id') <span class="text-danger error">{{ $message }}</span>@enderror
								</div>

								<div class="form-group">
									<label class="form-control-label" for="penerima">Penerima</label>
									<input type="name" class="form-control form-control-sm" name="penerima" id="penerima" placeholder="Nama Penerima" maxlength="200" value="{{old('penerima', $transaksi->penerima)}}" required>
									@error('penerima') <span class="text-danger error">{{ $message }}</span>@enderror
								</div>

								<div class="form-group">
									<label class="form-control-label" for="no_hp">No. Hp</label>
									<input type="number" class="form-control form-control-sm" name="no_hp" id="no_hp" placeholder="Nomor Hp" maxlength="15" required value="{{old('no_hp', $transaksi->no_hp)}}">
									@error('no_hp') <span class="text-danger error">{{ $message }}</span>@enderror
								</div>

							</div>

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

								<div class="form-group">
									<label class="form-control-label" for="tgl_transaksi">Tanggal Transaksi</label>
									<input type="name" class="form-control form-control-sm" name="tgl_transaksi" id="tgl_transaksi" readonly="" value="{{date('Y-m-d H:i:s')}}" required>
									@error('tgl_transaksi') <span class="text-danger error">{{ $message }}</span>@enderror
								</div>

								<div class="form-group">
									<label class="form-control-label" for="mat_doc">Lokasi Gudang</label>
									{{-- <input type="name" class="form-control form-control-sm" name="mat_doc" id="mat_doc" placeholder="Lokasi Gudang" maxlength="200" required value="{{old('mat_doc', $transaksi->mat_doc)}}"> --}}
									<select name="mat_doc"  class="form-control form-control-sm select2" id="mat_doc" required>
										@foreach ($gudangs as $d)
										<option value="{{ $d->id }}" @if($transaksi->mat_doc == $d->id)selected @endif>{{ $d->nama }}</option>
										@endforeach
									</select>
									@error('mat_doc') <span class="text-danger error">{{ $message }}</span>@enderror
								</div>

								

							</div>

						</div>   

						<hr>

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

								<div class="input_fields_wrap" style="min-height: 400px;max-height: 400px;overflow: scroll;">
									<div class="row" id="clone">

										<div class="w-100">
											<hr style="margin-bottom: 10px;margin-top: 10px;">
										</div>

										<!-- Force next columns to break to new line -->
										<div class="w-100"></div>

										<div class="wrap_motor" id="wrap_motor_0" style="width: 100%;">
											{{-- ROW --}}
											@foreach($transaksi->detailTransaksi as $index => $detail)
											<div class="row" id="clone_motor" style="margin-left:0px !important;">
												<div class="col-md-4 ml-5 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="motor_id">Pilih Motor</label>
														{{-- <select name="motor_id[{{$index}}]" class="form-control form-control-sm select2" data-placeholder="Pilih Motor" required value="{{$detail->motor_id}}">
															@foreach ($motors as $m)
															<option value="{{$m->id}}" @if($m->id == $detail->motor_id) {{"SELECTED"}} @endif> {{$m->kode_type}} - {{ $m->nama_motor }}</option>
															@endforeach
														</select> --}}

														<div class="table-overflow">
															<table class="table table-sm" >
																<tr>
																	<th></th>
																	<th >Kode Type</th>
																	<th >Nama</th>
																	<th>Kode Mesin</th>
																	<th>Series</th>
																</tr>
																@foreach($motors as $m)
																<tr>
																	<td><input type="radio" name="motor_id[{{$index}}]" value="{{$m->id}}" @if($m->id == $detail->motor_id) {{"CHECKED"}} @endif></td>
																	<td>{{$m->kode_type}}</td>
																	<td>{{$m->nama_motor}}</td>
																	<td>{{$m->kode_mesin}}</td>
																	<td>{{$m->series}}</td>
																</tr>
																@endforeach
																
															</table>
														</div>
														@error('motor_id') <span class="text-danger error">{{ $message }}</span>@enderror
													</div>
												</div>

												<div class="col-md-1 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="batch">Batch</label>
														<input type="text" class="form-control" name="batch[{{$index}}]" placeholder="Batch" required value="{{$detail->batch}}">
													</div>
												</div>

												<div class="col-md-2 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="serial_number">Serial Number</label>
														<input type="text" class="form-control" name="serial_number[{{$index}}]" placeholder="Serial Number" required value="{{$detail->serial_number}}">
													</div>
												</div>
												
												<div class="col-md-2 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="motor_id">Pstg. Date</label>
														<input type="date" class="form-control" name="pstg_date[{{$index}}]" placeholder="Pstg. Date" required value="{{date('Y-m-d',strtotime($detail->pstg_date))}}">
													</div>
												</div>												

												<div class="col-md-2 col-sm-12 delete" style="display: flex;align-items: center;">
													@if($index > 0)
													<button  class="remove_motor btn btn-danger btn-sm" type="button">X</button>
													@else
													<button class="btn btn-success btn-sm add_motor" type="button"><i class="fa fa-plus"></i></button>
													@endif
												</div>

											</div>
											@endforeach
											{{-- END ROW --}}
										</div>



										<div class="ml-3 action">

										</div>

									</div> 
								</div>
								<hr>
							</div>    
						</div>  
						<button class="btn btn-primary float-right" type="submit">Submit form</button>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection

@push('scripts')
{{-- <script src=" {{asset('copy/chosen.jquery.js')}} " type="text/javascript"></script>
<script src=" {{asset('copy/init.js')}} " type="text/javascript" charset="utf-8"></script> --}}
<script type="text/javascript">

	$(document).ready(function(){		

		$('select.select2').select2({
		});


		let total_barang = 1; // Total Armada
		let action = 0; // Action Untuk Armada
		let action_motor = 1; // Action Untuk Motor
		let wrap_motor = 0; // Pembungkus Motor		
		 let count  = {{$index + 1}};

		$(document).on('click', '.add_motor', function(){
			// let el = $("#clone_motor").clone()
			let ambil_wrap = $(this).closest('.wrap_motor').attr('id');
			let ambil = ambil_wrap.substr(ambil_wrap.length - 1); // Ambil Angka terakhir wrap_motor
			
			let el = $(this).closest('.wrap_motor').append(`<div class="row" style="margin-left:0px !important;">
													<div class="col-md-4 ml-5 col-sm-12">
														<div class="form-group">
															<label class="form-control-label" for="motor_id">Pilih Motor</label>
															<div class="table-overflow">
															<table class="table table-sm">
																<tr>
																	<th></th>
																	<th >Kode Type</th>
																	<th >Nama</th>
																	<th>Kode Mesin</th>
																	<th>Series</th>
																</tr>
																@foreach($motors as $m)
																<tr>
																	<td><input type="radio" name="motor_id[` + count + `]" value="{{$m->id}}"></td>
																	<td>{{$m->kode_type}}</td>
																	<td>{{$m->nama_motor}}</td>
																	<td>{{$m->kode_mesin}}</td>
																	<td>{{$m->series}}</td>
																</tr>
																@endforeach
															</table>
														</div>
															@error('motor_id') <span class="text-danger error">{{ $message }}</span>@enderror
													</div>
													</div>

													<div class="col-md-1 col-sm-12">
														<div class="form-group">
															<label class="form-control-label" for="batch">Batch</label>
															<input type="text" class="form-control" name="batch[` + count + `]" placeholder="Batch" required>
														</div>
													</div>

													<div class="col-md-2 col-sm-12">
														<div class="form-group">
															<label class="form-control-label" for="serial_number">Serial Number</label>
															<input type="text" class="form-control" name="serial_number[` + count + `]" placeholder="Serial Number" required>
														</div>
													</div>

													<div class="col-md-2 col-sm-12">
														<div class="form-group">
															<label class="form-control-label" for="motor_id">Pstg. Date</label>
															<input type="date" class="form-control" name="pstg_date[` + count + `]" placeholder="Pstg. Date" required>
														</div>
													</div>												

													<div class="col-md-2 delete-${action_motor}" style="display: flex;align-items: center;">
														<button class="btn btn-success btn-sm add_motor-${action_motor}" type="button"><i class="fa fa-plus"></i></button>
													</div>

												</div>`);
												count++
				el.find(`.add_motor-${action_motor}`).remove()
				el.find(`.delete-${action_motor}`).html(`<button  class="remove_motor btn btn-danger btn-sm" type="button">X</button>`);
			el.find(`.add_motor-${action_motor}`).remove()
			el.find(`.delete-${action_motor}`).html(`<button  class="remove_motor btn btn-danger btn-sm" type="button">X</button>`)

			$(`select.select2`).select2();

			$(".input_fields_wrap").animate({ scrollTop: $(".input_fields_wrap")[0].scrollHeight }, 1000);
			
			action_motor++;
		});

		$(document).on("click", ".remove_motor", function(e) {
			e.preventDefault();
			$(this).closest('.row').remove();
		})
	});
</script>
@endpush