@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;
	}
</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">{{$title}}</h3>
				</div>
				<!-- Card body -->
				<div class="card-body">
					<form method="POST" action="{{route('transaksi.laporStore')}}" enctype="multipart/form-data">
						@csrf
						<input class="form-check-input" type="hidden" name="transaksi_id" id="transaksi_id" value="{{ $transaksi->id }}">
						<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" value="{{$transaksi->reference}}" required readonly="">
									@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>
									<input type="name" class="form-control form-control-sm" name="dealer" id="dealer" readonly="" value="{{$transaksi->dealer->nama_dealer}} - {{$transaksi->dealer->cust_number}} " readonly="">
								</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="{{$transaksi->penerima}}" required readonly="">
									@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" value="{{$transaksi->no_hp}}" required readonly="">
									@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="{{$transaksi->tgl_transaksi}}" required readonly="">
									@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="{{$transaksi->mat_doc}}" readonly="">
									@error('mat_doc') <span class="text-danger error">{{ $message }}</span>@enderror
								</div>

								

							</div>

						</div>   

						<hr>
						<div class="row ml-5" style="margin-bottom:0;">
							<div class="form-group" style="margin-bottom:0;">
									
									<input type="checkbox" class="" name="lapor_check" id="lapor_check" value="1"> <label class="form-control-label" for="lapor_check">Tidak ada Kerusakan</label>
									
									@error('lapor_check') <span class="text-danger error">{{ $message }}</span>@enderror
							</div>
						</div>
						<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%;">
											<div class="row" id="clone_motor" style="margin-left:0px !important;">
												<div class="col-md-4 ml-2 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="detail_id">Pilih Motor</label>
														<select name="detail_id[]" class="form-control form-control-sm select2 multiple-motor" data-placeholder="Pilih Motor" required>
															<option>Pilih Motor</option>
															@foreach ($transaksi->detailTransaksi as $m)
															<option value="{{$m->id}}"> {{$m->serial_number}} - {{$m->motor->nama_motor}}/{{$m->motor->kode_type}}</option>
															@endforeach
														</select>
														@error('detail_id') <span class="text-danger error">{{ $message }}</span>@enderror
													</div>
												</div>

												<div class="col-md-2 ml-2 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="part">Nama Part</label>
														
														<input type="text" class="form-control" name="part[]">
														@error('part') <span class="text-danger error">{{ $message }}</span>@enderror

													</div>
												</div>

												<div class="col-md-2 ml-2 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="area_defect">Area Defect</label>

														<select name="area_defect[]" class=" form-control form-control-sm" data-placeholder="Pilih Area Defect" required >
															<option>Pilih Area Defect</option>
															<option value="Rear High">
																Rear High
															</option>
															<option value="Medium High">
																Medium High
															</option>
															<option value="Front High">
																Front High
															</option>
															<option value="Rear Middle">
																Rear Middle
															</option>
															<option value="Medium Middle">
																Medium Middle
															</option>
															<option value="Front Middle">
																Front Middle
															</option>
															<option value="Rear Lower">
																Rear Lower
															</option>
															<option value="Medium Lower">
																Medium Lower
															</option>
															<option value="Front Lower">
																Front Lower
															</option>
														</select>
														@error('area_defect') <span class="text-danger error">{{ $message }}</span>@enderror
													</div>
												</div>

												<div class="col-md-2 ml-2 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="keluhan">Jenis Defect</label>
														<textarea class="text form-control" name="keluhan[]" placeholder="Jenis Defect" required style="display: none;" disabled></textarea>
														<input type="checkbox" class="checkbox" checked disabled style="display:  none;"><label class="checkbox" style="display: none">Lain-lain</label>

														<select name="keluhan[]" class="pilihan form-control form-control-sm" data-placeholder="Pilih Defect" required >
															<option>Pilih Defect</option>
															<option value="lecet">Lecet</option>
															<option value="retak">Retak</option>
															<option value="pecah">Pecah</option>
															<option value="hilang">Hilang</option>
															<option value="lain">Lain - lain</option>
														</select>
														@error('keluhan') <span class="text-danger error">{{ $message }}</span>@enderror
													</div>
												</div>

												
												<div class="col-md-4 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="akibat">Catatan Kerusakan</label>
														<textarea class="text form-control" name="akibat[]" placeholder="Catatan Kerusakan" required style="display: none;" disabled></textarea>
														<input type="checkbox" class="checkbox" checked disabled style="display:  none;"><label class="checkbox" style="display: none">Lain-lain</label>

														<select name="akibat[]" class="pilihan form-control form-control-sm" data-placeholder="Pilih Akibat" required>
															<option>Pilih Akibat</option>
															<option value="tidak ada spons">Tidak ada spons</option>
															<option value="spons tidak layak">Spons tidak layak</option>
															<option value="tali tidak layak">Tali tidak layak</option>
															<option value="pengikatan tidak kuat">Pengikatan tidak kuat</option>
															<option value="lain">Lain - lain</option>
														</select>
														@error('akibat') <span class="text-danger error">{{ $message }}</span>@enderror
													</div>
												</div>	

												<div class="col-md-2 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="foto_path">Upload Foto</label>
														<input type="file" class="form-control" name="foto_path[]" id="foto_path" placeholder="Upload Foto" required>
													</div>
												</div>												

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

											</div>
										</div>



										<div class="ml-3 action">

										</div>

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

@endsection


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

	$(document).ready(function(){		

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

		// Motor Tidak Bisa Dipilih 
		$(".multiple-motor").change(function () {
			$.each(this.options, function (i, item) {
				$(item).prop("disabled", true); 
			});


				$("select.multiple-motor option").attr("disabled",false); //enable everything

			     //collect the values from selected;
			     var  arr = $.map
			     (
			     	$("select.multiple-motor option:selected"), function(n)
			     	{
			     		return n.value;
			     	}
			     	);

			    //disable elements
			    $("select.multiple-motor option").filter(function()
			    {
			        return $.inArray($(this).val(),arr)>-1; //if value is in the array of selected values maka disable
			    }).attr("disabled","disabled");  


			});

		// Enable Semuanya
		$(".submit").click(function(){
			$("select.multiple-motor option").attr("disabled",false); //enable everything
		});

		$("#lapor_check").change(function(){
			console.log("eyylmao");
			
				if($("#lapor_check").is(":checked")){
				$('#foto_path').removeAttr('required');
			}else{
				$('#foto_path').attr('required', true);
			}
			
			
		});
		
		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		

		$(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-2 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="detail_id">Pilih Motor</label>
														<select name="detail_id[]" class="form-control form-control-sm select2 multiple-motor" data-placeholder="Pilih Motor" required>
															<option>Pilih Motor</option>
															@foreach ($transaksi->detailTransaksi as $m)
															<option value="{{$m->id}}"> {{$m->motor->nama_motor}} - {{$m->motor->kode_type}}/{{$m->batch}}/{{$m->serial_number}} </option>
															@endforeach
														</select>
														@error('detail_id') <span class="text-danger error">{{ $message }}</span>@enderror
													</div>
												</div>

												<div class="col-md-2 ml-2 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="part">Nama Part</label>
														
														<input type="text" class="form-control" name="part[]">
														@error('part') <span class="text-danger error">{{ $message }}</span>@enderror
														
													</div>
												</div>

												<div class="col-md-2 ml-2 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="area_defect">Area Defect</label>

														<select name="area_defect[]" class=" form-control form-control-sm" data-placeholder="Pilih Area Defect" required >
															<option>Pilih Area Defect</option>
															<option value="Rear High">
																Rear High
															</option>
															<option value="Medium High">
																Medium High
															</option>
															<option value="Front High">
																Front High
															</option>
															<option value="Rear Middle">
																Rear Middle
															</option>
															<option value="Medium Middle">
																Medium Middle
															</option>
															<option value="Front Middle">
																Front Middle
															</option>
															<option value="Rear Lower">
																Rear Lower
															</option>
															<option value="Medium Lower">
																Medium Lower
															</option>
															<option value="Front Lower">
																Front Lower
															</option>
														</select>
														@error('area_defect') <span class="text-danger error">{{ $message }}</span>@enderror
													</div>
												</div>

												<div class="col-md-2 ml-2 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="keluhan">Jenis Defect</label>
														<textarea class="text form-control" name="keluhan[]" placeholder="Jenis Defect" required style="display: none;" disabled></textarea>
														<select name="keluhan[]" class="pilihan form-control form-control-sm" data-placeholder="Pilih Defect" required >
															<option>Pilih Defect</option>
															<option value="lecet">Lecet</option>
															<option value="retak">Retak</option>
															<option value="pecah">Pecah</option>
															<option value="hilang">Hilang</option>
															<option value="lain">Lain - lain</option>
														</select>
														@error('keluhan') <span class="text-danger error">{{ $message }}</span>@enderror
													</div>
												</div>

												<div class="col-md-4 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="akibat">Catatan Kerusakan</label>
														<textarea class="text form-control" name="akibat[]" placeholder="Catatan Kerusakan" required style="display: none;" disabled></textarea>
														<select name="akibat[]" class="pilihan form-control form-control-sm" data-placeholder="Pilih Akibat" required>
															<option>Pilih Akibat</option>
															<option value="tidak ada spons">Tidak ada spons</option>
															<option value="spons tidak layak">Spons tidak layak</option>
															<option value="tali tidak layak">Tali tidak layak</option>
															<option value="pengikatan tidak kuat">Pengikatan tidak kuat</option>
															<option value="lain">Lain - lain</option>
														</select>
														@error('akibat') <span class="text-danger error">{{ $message }}</span>@enderror
													</div>
												</div>

												<div class="col-md-2 col-sm-12">
													<div class="form-group">
														<label class="form-control-label" for="foto_path">Upload Foto</label>
														<input type="file" class="form-control" name="foto_path[]" placeholder="Upload Foto" required>
													</div>
												</div>									

												<div class="col-md-1 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>`);
			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();

			// Init
			//collect the values from selected;
			var  arr = $.map
			(
				$("select.multiple-motor option:selected"), function(n)
				{
					return n.value;
				}
				);

			    //disable elements
			    $("select.multiple-motor option").filter(function()
			    {
			        return $.inArray($(this).val(),arr)>-1; //if value is in the array of selected values maka disable
			    }).attr("disabled","disabled");  

			$(".multiple-motor").change(function () {
				$.each(this.options, function (i, item) {
					$(item).prop("disabled", true); 
				});


				$("select.multiple-motor option").attr("disabled",false); //enable everything

			     //collect the values from selected;
			     var  arr = $.map
			     (
			     	$("select.multiple-motor option:selected"), function(n)
			     	{
			     		return n.value;
			     	}
			     	);

			    //disable elements
			    $("select.multiple-motor option").filter(function()
			    {
			        return $.inArray($(this).val(),arr)>-1; //if value is in the array of selected values maka disable
			    }).attr("disabled","disabled");  


			});

			$(".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();
		})

		$(document).on("change", ".pilihan", function(e){
			if($(this).val() == "lain"){
				$(this).prop('disabled', true).hide();
				$(this).siblings(".text").prop('disabled', false).show();
				$(this).siblings(".checkbox").prop('disabled', false).prop("checked", true).show();
			}
		});

		$(document).on("click", ".checkbox",function(e){
			
			if(!$(this).is(':checked')){
				$(this).siblings(".pilihan").prop("disabled", false).show();
				$(this).siblings(".text").prop('disabled', true).hide();
				$(this).prop('disabled', true).hide();
				$(this).siblings(".checkbox").hide();
				$(this).siblings(".pilihan").prop("selectedIndex", 0);
			}
		});


	});
</script>
@endpush