@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;
	}
	
	.form-check-label .fas {
		font-size:5.2em;
	}

	.desc{
		font-size: 2.2em;
		font-weight: 400;
		padding: 8px;
	}

	.form-check-label .fa-check,.desc-true{
		color: rgb(165, 201, 165);
	}
	.form-check-label .fa-times,.desc-false{
		color: rgb(163, 138, 138);
	}

	.form-check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
/* .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
} */

/* On mouse-over, add a grey background color */
.form-check:hover input ~ .checkmark {
  background-color: #ccc;
}

.form-check:hover input ~ .desc {
	border-radius: 10px;
  background-color: #ccc;
  cursor: pointer;
  transition: ease-in-out 0.1s;
}

.form-check-label i:hover {
	border-radius: 10px;
  background-color: #ccc;
  cursor: pointer;
  transition: ease-in-out 0.1s;
}

.form-check-label i{
	padding: 8px;
}

/* When the radio button is checked, add a blue background */
.form-check input:checked ~ .checkmark {
  background-color: #2196F3;
}

.form-check input:checked ~ .fa-check,.form-check input:checked ~ .desc-true {
	color: green;
}

.form-check input:checked ~ .fa-times, .form-check input:checked ~ .desc-false {
	color: red;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
/* .checkmark:after {
  content: "";
  position: absolute;
  display: none;
} */

/* Show the indicator (dot/circle) when checked */
/* .form-check input:checked ~ .checkmark:after {
  display: block;
} */

/* Style the indicator (dot/circle) */
/* .form-check .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
} */
</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-block-block mb-0"> {{$title}} </h6>
		<nav aria-label="breadcrumb" class="d-none d-md-block-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">Gimana Pengiriman Unit Hari Ini ? Kasih Tau Kami ya..</h3>
				</div>
				<!-- Card body -->
				<div class="card-body">
					<form method="POST" action="{{route('transaksi.penilaianStore')}}" enctype="multipart/form-data">
                        @csrf
                        <input class="form-check-input" type="hidden" name="transaksi_id" id="transaksi_id" value="{{ $transaksi->id }}">
						<div class="row justify-content-center mb-3">

							<div class="col-md-4">
								<img src="{{ asset('img/mark.png') }}" alt="">
								<div class="form-group text-center">
                                    <label class="form-control-label d-block" for="kd_transaksi">Tidak ada Unit Defect</label>
                                    
									<div class="form-check d-block">
                                        <label class="form-check-label" >
                                            <input class="form-check-input" type="radio" name="kualitas_unit" id="kualitas_unit" value="1" checked>
											<span class="checkmark"></span>
											<i class="fas fa-check" ></i>
                                        </label>
                                    </div>
                                    
                                    <div class="form-check d-block">
                                        <label class="form-check-label" >
											<input class="form-check-input" type="radio" name="kualitas_unit" id="kualitas_unit" value="0">
											<span class="checkmark"></span>
											<i class="fas fa-times"></i>
                                        </label>
                                    </div>
								</div>
							</div>

							<div class="col-md-4">
								<img src="{{ asset('img/motor.png') }}" alt="">
								<div class="form-group text-center">
									<label class="form-control-label d-block" for="dealer_id">Jumlah Unit Sesuai BASTK</label>
									<div class="form-check d-block">
                                        
                                        <label class="form-check-label" >
											<input class="form-check-input" type="radio" name="kuantitas_unit" id="kuantitas_unit" value="1" checked>
											<span class="checkmark"></span>
                                            <i class="fas fa-check"></i>
                                        </label>
                                    </div>
                                    
                                    <div class="form-check d-block">
                                        
                                        <label class="form-check-label" >
											<input class="form-check-input" type="radio" name="kuantitas_unit" id="kuantitas_unit" value="0">
											<span class="checkmark"></span>
											<i class="fas fa-times"></i>
                                        </label>
                                    </div>
								</div>
							</div>

							<div class="col-md-4">
								<img src="{{ asset('img/helmet.png') }}" alt="">
								<div class="form-group text-center">
									<label class="form-control-label d-block" for="penerima">Jumlah KSU & Aksesoris Sesuai BASTK
									</label>
									<div class="form-check d-block">
                                        
                                        <label class="form-check-label" >
											<input class="form-check-input" type="radio" name="kualitas_ksu_acc" id="kualitas_ksu_acc" value="1" checked>
											<span class="checkmark"></span>
                                            <i class="fas fa-check"></i>
                                        </label>
                                    </div>
                                    
                                    <div class="form-check d-block">
                                        
                                        <label class="form-check-label" >
											<input class="form-check-input" type="radio" name="kualitas_ksu_acc" id="kualitas_ksu_acc" value="0">
											<span class="checkmark"></span>
                                            <i class="fas fa-times"></i>
                                        </label>
                                    </div>
								</div>
							</div>

							<div class="col-md-4">
								<img src="{{ asset('img/like.png') }}" alt="">
								<div class="form-group text-center">
									<label class="form-control-label d-block" for="no_hp">Kondisi KSU & Aksesoris Baik</label>
									<div class="form-check d-block">
                                        
                                        <label class="form-check-label" >
											<input class="form-check-input" type="radio" name="kuantitas_ksu_acc" id="kuantitas_ksu_acc" value="1" checked>
											<span class="checkmark"></span>
                                            <i class="fas fa-check"></i>
                                        </label>
                                    </div>
                                    
                                    <div class="form-check d-block">
                                        
                                        <label class="form-check-label" > 
											<input class="form-check-input" type="radio" name="kuantitas_ksu_acc" id="kuantitas_ksu_acc" value="0">
											<span class="checkmark"></span>
											<i class="fas fa-times"></i>
                                        </label>
                                    </div>
								</div>
							</div>

							<div class="col-md-4">
								<img src="{{ asset('img/koordinasi.png') }}" alt="">
								<div class="form-group text-center">
									<label class="form-control-label d-block" for="tgl_transaksi">Komunikasi dan Koordinasi Ekspedisi Bagus</label>
									<div class="form-check">
                                        
                                        <label class="form-check-label" >
											<input class="form-check-input" type="radio" name="koordinasi" id="koordinasi" value="1" checked>
											<span class="checkmark"></span>
                                            <p class="desc desc-true"> <b>Koordinasi Baik</b> </p>
                                        </label>
                                    </div>
                                    
                                    <div class="form-check">
                                        
                                        <label class="form-check-label" >
											<input class="form-check-input" type="radio" name="koordinasi" id="koordinasi" value="0">
											<span class="checkmark"></span>
                                            <p class="desc desc-false"><b>Koordinasi Tidak Baik</b>	</p>
                                        </label>
                                    </div>
								</div>
							</div>

						</div>   

						<hr>

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

{{-- <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({
		});

		// 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
		});


		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", ".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>
@endsection