@extends('layout.master')
@section('content')

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
	<div class="container-xxl" id="kt_content_container">
		<div class="post d-flex flex-column-fluid" id="kt_post">
			<div id="kt_content_container" class="container-xxl">
				<div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid gap-10" id="kt_create_account_stepper">

					<div class="card d-flex flex-row-fluid flex-center">
						<form class="card-body py-10 w-100 mw-xl-700px px-9" method="post" action="{{ $object->update_url }}" enctype="multipart/form-data"  id="kt_create_account_form">
							@csrf
							<div class="current" data-kt-stepper-element="content">
								<div class="card-body p-9">
									<div class="row mb-6">
										<label class="col-lg-4 col-form-label required fw-semibold fs-6">{{ __('vehicle.vehicle.plate') }}</label>
										<div class="col-lg-8 fv-row">
											<input type="text" name="plate" class="form-control @if($errors->has('plate')) is-invalid @endif form-control-lg form-control-solid" placeholder="{{ __('vehicle.vehicle.plate') }}" value="{{ $object->plate }}" />
											@if($errors->has('plate'))<div class="invalid-feedback">{{ $errors->first('plate') }}</div>@endif
										</div>
									</div>

									<div class="row mb-6">
										<label class="col-lg-4 col-form-label required fw-semibold fs-6">{{ __('vehicle.vehicle.class') }}</label>
										<div class="col-lg-8 fv-row">
											<select id="vehicle_class_id" name="vehicle_class_id" aria-label="Araç Sınıfı" data-control="select2" data-placeholder="Araç sınıfı seçiniz..." class="form-select form-select-solid form-select-lg first_step_selected">
												<option value=""></option>
												@foreach($vehicle_class as $cls)
													<option value="{{ $cls->id }}" data-person-capacity="{{ $cls->person_capacity }}" data-suitcase-capacity="{{ $cls->suitcase_capacity }}" @if($object->vehicle_class_id == $cls->id)selected @endif>{{ $cls->name }}</option>
												@endforeach
											</select>
										</div>
									</div>

									<div class="row mb-6">
										<label class="col-lg-4 col-form-label required fw-semibold fs-6">{{ __('vehicle.vehicle.brand') }}</label>
										<div class="col-lg-8 fv-row">
											<select id="vehicle_brand_id" name="vehicle_brand_id" aria-label="Araç Markası" data-control="select2" data-placeholder="Marka seçiniz..." class="form-select form-select-solid form-select-lg first_step_selected" required>
												<option value=""></option>
													@foreach($vehicle_brand as $brand)
														<option value="{{ $brand->id }}" @if($object->vehicle_brand_id == $brand->id)selected @endif>{{ $brand->name }}</option>
													@endforeach
											</select>
										</div>
									</div>

									<div class="row mb-6">
										<label class="col-lg-4 col-form-label required fw-semibold fs-6">{{ __('vehicle.vehicle.model') }}</label>
										<div class="col-lg-8 fv-row">
											<select id="vehicle_model_id" name="vehicle_model_id" aria-label="Araç Modeli" data-control="select2" data-placeholder="Model seçiniz..." class="form-select form-select-solid form-select-lg first_step_selected">
												@foreach($selected_brand_models as $selected_model)
													<option value="{{ $selected_model->id }}" @if($object->vehicle_model_id == $selected_model->id)selected @endif>{{ $selected_model->name }}</option>
												@endforeach
											</select>
										</div>
									</div>

								</div>
							</div>

							<div class="d-flex flex-stack">
								<div class="mr-2">
								</div>
								<div>
									<button type="submit" class="btn btn-lg btn-primary" data-kt-stepper-action="nextd">{{ __('Kaydet') }}
									<span class="svg-icon svg-icon-4 ms-1 me-0">
										<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="currentColor" />
											<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="currentColor" />
										</svg>
									</span>
									</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
<!-- Bu sayfaya ait css dosyaları -->
@section('css')
	
@endsection

<!-- Bu sayfaya ait js dosyaları -->
@section('js')
	<script>
		//let window.vehicle_model_url =  "{{route('vehicle.get_vehicle_model_ajax')}}"
		$('#vehicle_brand_id').on('change', function (e) {
		//let brand_id = $(this).val();

		$("#vehicle_model_id").empty();
		
		let brand_id = $(this).val();
		//console.log('brand_id', brand_id, e)
		if (brand_id) {


			$.ajax({
				url: "{{route('vehicle.get_vehicle_model_ajax')}}",
				type: "post",
				data: {
						vehicle_brand_id: brand_id,
						_token: '{{csrf_token()}}'
					},
				success: function (response) {
					//console.log('response', response)
					var data = $.map(response, function (obj) {
						obj.id = obj.id || obj.pk; // replace pk with your identifier
						obj.text = obj.name
							return obj;
						});

					
					$('#vehicle_model_id').select2({
						'data': data,
						// Any other configuration options you want.
					});

				// You will get response from your PHP page (what you echo or print)
				},
				error: function(jqXHR, textStatus, errorThrown) {
					//console.log(textStatus, errorThrown);
				}
				});
		}
	});
	</script>

@endsection