@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="vehicle_stepper">
					<div class="card d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px w-xxl-400px">
						<div class="card-body px-6 px-lg-10 px-xxl-15 py-10">
							<div class="stepper-nav">
								<div class="stepper-item current" data-kt-stepper-element="nav">
									<div class="stepper-wrapper">
										<div class="stepper-icon w-40px h-40px">
											<i class="stepper-check fas fa-check"></i>
											<span class="stepper-number">1</span>
										</div>

										<div class="stepper-label">
											<h3 class="stepper-title">{{ __('vehicle.vehicle.information') }}</h3>
											<div class="stepper-desc fw-semibold">
												<img src="assets/media/vito-exclusive.png" width="120" class="img-fluid" alt="">
												<p>
													<span class="icon">
														<i class="fa-solid fa-user"></i> <b class="car_class_person_capacity">...</b> Kişi
														<i class="fa-solid fa-suitcase"></i> <b class="car_class_suitcase_capacity">...</b> Valiz
													</span>
												</p>
												<p style="padding-top:10px;">Plaka : <b class="plate_text">...</b></p>
												<p>Araç Sınıfı : <b class="vehicle_class">...</b></p>
												<p>Marka : <b class="vehicle_brand_id_text">...</b></p>
												<p>Model : <b class="vehicle_model_id_text">...</b></p>
											</div>
										</div>
									</div>
									<div class="stepper-line h-15px"></div>
								</div>

								<div id="distance_price_stepper_nav" class="stepper-item" data-kt-stepper-element="nav">
									<div class="stepper-wrapper">
										<div class="stepper-icon w-40px h-40px">
											<i class="stepper-check fas fa-check"></i>
											<span class="stepper-number">2</span>
										</div>

										<div class="stepper-label">
											<h3 class="stepper-title">Fiyat Bilgileri</h3>
											<div class="stepper-desc fw-semibold">
												<p>0km - 50km : <b>4 ₺</b></p>
												<p>51km - 100km : <b>5 ₺</b></p>
												<p>101km - 150km : <b>6 ₺</b></p>
											</div>
										</div>
									</div>
									<div class="stepper-line h-15px"></div>
								</div>

								<div class="stepper-item" data-kt-stepper-element="nav">
									<div class="stepper-wrapper">
										<div class="stepper-icon w-40px h-40px">
											<i class="stepper-check fas fa-check"></i>
											<span class="stepper-number">3</span>
										</div>
										<div class="stepper-label">
											<h3 class="stepper-title">Araç Extralar</h3>
											<div class="stepper-desc fw-semibold">
												<div class="tags">
													@foreach($vehicle_default_extra as $vehicle_extra)
														<!--<span>{{ $vehicle_extra->name }}</span>-->
													@endforeach
												</div>
											</div>
										</div>
									</div>
									<div class="stepper-line h-15px"></div>
								</div>

								<div class="stepper-item" data-kt-stepper-element="nav">
									<div class="stepper-wrapper">
										<div class="stepper-icon w-40px h-40px">
											<i class="stepper-check fas fa-check"></i>
											<span class="stepper-number">4</span>
										</div>
										<div class="stepper-label">
											<h3 class="stepper-title">Sürücü Bilgileri</h3>
											<div class="stepper-desc fw-semibold">
												<img src="assets/media/avatars/300-1.jpg" width="120" class="img-fluid" alt="">
												<p style="padding-top:10px;">Ad Soyad:<b>Uğur Kurtuldu</b></p>
												<p>TC : <b>23123123123</b></p>
												<p>Telefon : <b>05352812874</b></p>
												<p>Doğum Tarihi : <b>25.05.1987</b></p>
											</div>
										</div>
									</div>
									<div class="stepper-line h-15px"></div>
								</div>

								<div class="stepper-item mark-completed" data-kt-stepper-element="nav">
									<div class="stepper-wrapper">
										<div class="stepper-icon w-40px h-40px">
											<i class="stepper-check fas fa-check"></i>
											<span class="stepper-number">5</span>
										</div>
										<div class="stepper-label">
											<h3 class="stepper-title">Tamamlandı</h3>
											<div class="stepper-desc fw-semibold"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<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="{{ route('vehicle.multi_form_store') }}" id="vehicle_form">
							
							<div class="current" data-kt-stepper-element="content">
								<div class="w-100">
									<div>
										<div class="row">
											<div class="col-lg-12">
												<div class="row mb-6 justify-content-center">
													<div class="col-lg-7 mb-6 fv-row">
														<input type="text" name="plate" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 first_step_selected" placeholder="Plaka" value="" />
													</div>
													<div class="col-lg-7 mb-6 position-relative 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 }}">{{ $cls->name }}</option>
															@endforeach
														</select>
														<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-html="true" 
														style="float:left;position:absolute; top: 18px;" data-bs-content="&lt;div class='p-4 rounded bg-light'&gt;&lt;div class='d-flex flex-stack text-dark mb-4'&gt;&lt;i class='fas fa-car text-dark fs-3 me-3'&gt;&lt;/i&gt;&lt;div class='fw-bold'&gt;Standart: Otomobil-Taksi&lt;/div&gt;&lt;/div&gt;&lt;div class='separator separator-dashed my-2'&gt;&lt;/div&gt;&lt;div class='d-flex flex-stack text-dark mb-2'&gt;&lt;div&gt;Örn: Octavia, Symbol&lt;/div&gt;&lt;/div&gt;&lt;div class='d-flex flex-stack text-dark mb-2'&gt;&lt;div&gt;Maks. Kişi Sayısı: 4&lt;/div&gt;&lt;/div&gt;&lt;div class='d-flex flex-stack text-dark mb-2'&gt;&lt;div&gt;Maks. Bagaj Sayısı: 4&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"></i>
													</div>
													<div class="col-lg-7 mb-6 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 }}">{{ $brand->name }}</option>
															@endforeach
														</select>
													</div>
													<div class="col-lg-7 mb-6 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">
															<option value="">Lütfen Marka Seçiniz</option>
														</select>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div data-kt-stepper-element="content" id="distance_price_stepper">
								<div class="w-100">
									<div class="pb-10 pb-lg-15">
										<h2 class="fw-bold text-dark">Fiyat Bilgileri</h2>
										<div class="text-muted fw-semibold fs-6">Seçilen araç sınıfına özel oluşturulacak transfer fiyat hesaplaması.</div>
									</div>
									<div class="mb-3 row">
										<div class="col-lg-3 fv-row">
											<label class="col-lg-12 col-form-label fw-semibold fs-6">
												<span class="required">KM:</span>
												<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Örn: 0-15 KM için 100 TL"></i>
											</label>
                                            <input type="hidden" name="distance_price" id="distance_price_input" value="0">
											<input type="number" name="kilometer[]" id="kilometer1" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="KM" value="" />
										</div>
										<div class="col-lg-3 fv-row">
											<label class="col-lg-12 col-form-label fw-semibold fs-6">
												<span class="required">Fiyat:</span>
												<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Yazılan km için fiyat bilgisi giriniz."></i>
											</label>
											<div class="input-group input-group-solid mb-5">
												<span class="input-group-text">₺</span>
												<input type="number" class="form-control" id="price1" name="price[]" aria-label="TL Tutarı">
												<!--<span class="input-group-text">.00</span>-->
											</div>
										</div>
										<div class="col-lg-6 text-muted mt-14">
											Transfere başlamak için istediğiniz minimum ücreti ve bu fiyata dahil olan kilometre bilgisini yazın.
										</div>
									</div><hr>
									<div class="mb-3 row">
										<div class="col-lg-3 fv-row">
											<input type="number" name="kilometer[]" id="kilometer2" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Sonraki X KM" value="" />
										</div>
										<div class="col-lg-3 fv-row">
											<div class="input-group input-group-solid mb-5">
												<span class="input-group-text">₺</span>
												<input type="number" class="form-control" name="price[]" id="price2" aria-label="TL Tutarı">
												<!--<span class="input-group-text">.00</span>-->
											</div>
										</div>

										<div class="col-lg-6 text-muted mt-1">
											<span id="km1">0</span>km - <span id="km2">0</span>km arası her km için <span id="price-1">0</span> TL olarak hesaplanacaktır.
										</div>
									</div>
									
									<div class="mb-3 row">
										<div class="col-lg-3 fv-row">
											<input type="number" name="kilometer[]" id="kilometer3" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Sonraki X KM" value="" />
										</div>
										<div class="col-lg-3 fv-row">
											<div class="input-group input-group-solid mb-5">
												<span class="input-group-text">₺</span>
												<input type="number" class="form-control" name="price[]" id="price3" aria-label="TL Tutarı">
												<!--<span class="input-group-text">.00</span>-->
											</div>
										</div>
										<div class="col-lg-6 text-muted mt-1">
											<span id="km3">0</span>km - <span id="km4">0</span>km arası her km için <span id="price-2">0</span> TL olarak hesaplanacaktır.
										</div>
									</div>
									
									<div class="mb-3 row">
										<div class="col-lg-3 fv-row">

										</div>
										<div class="col-lg-3 fv-row">
											<div class="input-group input-group-solid mb-5">
												<span class="input-group-text">₺</span>
												<input type="number" class="form-control" name="price[]" id="price4" aria-label="TL Tutarı">
												<!--<span class="input-group-text">.00</span>-->
											</div>
										</div>
										<div class="col-lg-6 text-muted mt-1">
											<span id="km5">0</span>km'den sonra her km için <span id="price-3">0</span> TL olarak hesaplanacaktır.
										</div>
									</div>
									
								</div>
							</div>
							<div data-kt-stepper-element="content">
								<div class="row">
									<div class="col-lg-12">
										<div class="w-100">
											<div class="pb-10 pb-lg-12">
												<h2 class="fw-bold text-dark">Araç Extra Bilgileri</h2>
												<div class="text-muted fw-semibold fs-6">Araç içerisinde sunulan ücretli veya ücretsiz ekstraları seçebilir veya ekleyebilirsiniz.</div>
											</div>
											<div class="fv-row mb-10">
												<label class="col-lg-12 col-form-label fw-semibold fs-6">
													<span class="required">Araç Özellikleri:</span>
													<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Aşağıdaki alandan seçim yapabilir ya da yeni özellik ekleyebilirsiniz."></i>
												</label>
												<input class="form-control form-control-solid" value="" id="kt_tagify_7"/>
											</div>
										</div>
									</div>
									<div class="col-lg-12">
										<div class="w-100">
											<div class="row taglist"></div>
										</div>
									</div>
								</div>
							</div>
							<div data-kt-stepper-element="content">

								<div class="d-flex flex-column">
									<ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x mb-5 fs-6">
											<li class="nav-item">
													<a class="nav-link @if(count($drivers) > 0)active @endif" data-bs-toggle="tab" href="#selectdriver">Sürücü Seç</a>
											</li>
											<li class="nav-item">
													<a class="nav-link @if(count($drivers) == 0)active @endif" data-bs-toggle="tab" href="#newdriver">Yeni Sürücü Ekle</a>
											</li>
									</ul>

									<div class="tab-content" id="myTabContent">
											<div class="tab-pane fade show @if(count($drivers) > 0)active @endif" id="selectdriver" role="tabpanel">
											<div class="row mt-6 mb-6">
											<input type="hidden" name="_token" value="{{ csrf_token() }}" />
												@if(count($drivers) > 0)
													@foreach($drivers as $driver)
														<div class="col-md-6 mb-1">
															<label class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-light-active d-flex flex-stack text-start p-6 active mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_startup">
																<div class="d-flex align-items-center me-2">
																	<div class="form-check form-check-custom form-check-solid form-check-success flex-shrink-0 me-2">
																		<input class="form-check-input" type="radio" name="driver_id" value="{{ $driver->id }}" />
																	</div>
																	<div class="flex-grow-1">
																		<div class="d-flex align-items-center fs-4 fw-bold flex-wrap">{{ $driver->user->first_name }} {{ $driver->user->last_name }}</div>
																		<div class="fw-semibold opacity-75">{{ $driver->user->country_code }}{{ $driver->user->phone }}</div>
																	</div>
																</div>
																<div class="ms-5">
																	<img src="{{ asset('assets/media/avatars/300-1.jpg') }}" width="90" class="img-fluid" alt="">
																</div>
															</label>
														</div>
													@endforeach
												@else
													<div class="col-md-12 mb-1">
														<div class="alert alert-dismissible bg-light-primary d-flex flex-column flex-sm-row p-5 mb-10">
																<div class="d-flex flex-column pe-0 pe-sm-10">
																		<h4 class="fw-semibold">Sürücü Eklenmedi</h4>
																		<span>Henüz sürücü eklemediniz, üstte bulunan Yeni Sürücü Ekle butonuna tıklayarak sürücü ekleyebilirsiniz veya sürücü eklemeden devam edebilirsiniz.</span>
																</div>
														</div>
													</div>
												@endif
													
												</div>
											</div>
											<div class="tab-pane fade show @if(count($drivers) == 0)active @endif" id="newdriver" role="tabpanel">
											<div class="row mt-6">																
												<div class="card-body p-9">
													<div class="row mb-4">
														<label class="col-lg-4 col-form-label fw-semibold fs-6">Profil Fotoğrafı</label>
														<div class="col-lg-8">
															<div class="image-input image-input-outline" data-kt-image-input="true" style="background-image: url('assets/media/svg/avatars/blank.svg')">
																<div class="image-input-wrapper w-125px h-125px" style="background-image: url(assets/media/avatars/300-1.jpg)"></div>
																<label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar">
																	<i class="bi bi-pencil-fill fs-7"></i>
																	<input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
																	<input type="hidden" name="avatar_remove" />
																</label>
																<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
																	<i class="bi bi-x fs-2"></i>
																</span>
																<!--<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
																	<i class="bi bi-x fs-2"></i>
																</span>-->
															</div>
															<div class="form-text">Allowed file types: png, jpg, jpeg.</div>
														</div>
													</div>
													<div class="row mb-4">
														<label class="col-lg-4 col-form-label required fw-semibold fs-6">Ad Soyad</label>
														<div class="col-lg-8">
															<div class="row">
																<div class="col-lg-6 fv-row">
																	<input type="text" name="first_name" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Sürücü Adı" value="" />
																</div>
																<div class="col-lg-6 fv-row">
																	<input type="text" name="last_name" class="form-control form-control-lg form-control-solid" placeholder="Sürücü Soyadı" value="" />
																</div>
															</div>
														</div>
													</div>
													<div class="row mb-4">
														<label class="col-lg-4 col-form-label required fw-semibold fs-6">E-posta</label>
														<div class="col-lg-8 fv-row">
															<input type="email" name="email" class="form-control form-control-lg form-control-solid" placeholder="Sürücü e-postası" value="" />
														</div>
													</div>
													<div class="row mb-4">
														<label class="col-lg-4 col-form-label required fw-semibold fs-6">TC Kimlik No</label>
														<div class="col-lg-8 fv-row">
															<input type="text" name="identity_number" class="form-control form-control-lg form-control-solid" placeholder="Sürücü TC Kimlik No" value="" />
														</div>
													</div>
													<div class="row mb-4">
														<label class="col-lg-4 col-form-label fw-semibold fs-6">
															<span class="required">GSM No</span>
															<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Başında 0 olmadan yazınız."></i>
														</label>
														<div class="col-lg-8 fv-row">
															<input type="tel" name="phone" class="form-control form-control-lg form-control-solid" placeholder="Cep No: 5554443322 şeklinde" value="" />
														</div>
													</div>
													<div class="row mb-4">
														<label class="col-lg-4 col-form-label fw-semibold required fs-6">Uygulama Şifresi</label>
														<div class="col-lg-8 fv-row" data-kt-password-meter="true">
																<div class="mb-1">
																	<div class="position-relative mb-3">
																		<input class="form-control bg-transparent" type="password" placeholder="Şifre" name="password" autocomplete="off" />
																		<span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
																			<i class="bi bi-eye-slash fs-2"></i>
																			<i class="bi bi-eye fs-2 d-none"></i>
																		</span>
																	</div>
																	<div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
																		<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
																		<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
																		<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
																		<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
																	</div>
																</div>
																<div class="text-muted">Harf, sayı ve simge karışımıyla 8 veya daha fazla karakter kullanın.</div>
														</div>
													</div>

													<div class="row mb-4">
														<label class="col-lg-4 col-form-label fw-semibold required fs-6">Şifres Tekrarı</label>
														<div class="col-lg-8 fv-row" data-kt-password-meter="true">
															<input placeholder="Şifre Tekrarı" name="password_confirmation" type="password" autocomplete="off" class="form-control bg-transparent" />
														</div>
													</div>
												</div>
											</div>
											</div>
									</div>
								</div>
							</div>
							<div data-kt-stepper-element="content">
								<div class="w-100">
									<div class="mb-0">
										<div class="notice d-flex bg-light-success rounded border-success border border-dashed p-6">
											<span class="svg-icon svg-icon-2tx svg-icon-success me-4">
												<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
													<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor" />
													<rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)" fill="currentColor" />
													<rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)" fill="currentColor" />
												</svg>
											</span>
											<div class="d-flex flex-stack flex-grow-1">
												<div class="fw-semibold">
													<h4 class="text-white-900 fw-bold">Araç ve Sürücü Bilgileri Eklendi!</h4>
													<div class="fs-6 text-gray-600">Lorem Ipsum is simply...</div>
												</div>
											</div>
										</div>
										<div class="row text-center mb-20 mt-10">
											<div class="col">
												<a href="{{ route('vehicle.create') }}" class="btn btn-primary me-2 mb-2" style="padding: 20px 50px;"><b>Yeni Araç Ekle</b></a>
											</div>
											<div class="col">
												<a href="{{ route('vehicle.create') }}" class="btn btn-success me-2 mb-2" style="padding: 20px 50px;"><b>Transfer Oluştur</b></a>
											</div>
										</div>
										
									</div>
								</div>
							</div>
							<div class="d-flex flex-stack pt-10">
								<div class="mr-2">
									<button type="button" class="btn btn-lg btn-light-primary me-3" data-kt-stepper-action="previous">
									<span class="svg-icon svg-icon-4 me-1">
										<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<rect opacity="0.5" x="6" y="11" width="13" height="2" rx="1" fill="currentColor" />
											<path d="M8.56569 11.4343L12.75 7.25C13.1642 6.83579 13.1642 6.16421 12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75L5.70711 11.2929C5.31658 11.6834 5.31658 12.3166 5.70711 12.7071L11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25C13.1642 17.8358 13.1642 17.1642 12.75 16.75L8.56569 12.5657C8.25327 12.2533 8.25327 11.7467 8.56569 11.4343Z" fill="currentColor" />
										</svg>
									</span>
									Geri</button>
								</div>
								<div>
									<button type="button" class="btn btn-lg btn-primary me-3" data-kt-stepper-action="submit">
										<span class="indicator-label">Kaydet
										<span class="svg-icon svg-icon-3 ms-2 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>
										</span>
										<span class="indicator-progress">Lütfen Bekleyiniz...
										<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
									</button>
									<button type="button" class="btn btn-lg btn-primary step_clicked" data-kt-stepper-action="next">Devam Et
									<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>

<!-- Bu sayfaya ait css dosyaları -->
@section('css')
	
@endsection

<!-- Bu sayfaya ait js dosyaları -->
@section('js')
	<script src="{{ URL::to('app/js/widgets.bundle.js') }}"></script>
	<script src="{{ URL::to('app/js/custom/widgets.js') }}"></script>
	<script src="{{ URL::to('app/js/custom/utilities/modals/users-search.js') }}"></script>
	<script src="{{ URL::to('app/js/custom/forms/formrepeater.bundle.js') }}"></script>
	<script src="{{ URL::to('app/js/custom/forms/basic.js') }}"></script>
	
	<script src="{{ URL::to('app/js/modules/vehicle.js') }}"></script>

	<!--end::Custom Javascript-->

    <script>
        "use strict";
        var validations = [];
// Class definition
var KTCreateAccount = function (validations) {
	// Elements
	var modal;	
	var modalEl;

	var stepper;
	var form;
	var formSubmitButton;
	var formContinueButton;

	// Variables
	var stepperObj;
	

	// Private Functions
	var initStepper = function (validations) {
		// Initialize Stepper
		stepperObj = new KTStepper(stepper);

		// Stepper change event
		stepperObj.on('kt.stepper.changed', function (stepper) {
			if (stepperObj.getCurrentStepIndex() === 4) {
				formSubmitButton.classList.remove('d-none');
				formSubmitButton.classList.add('d-inline-block');
				formContinueButton.classList.add('d-none');
			} else if (stepperObj.getCurrentStepIndex() === 5) {
				formSubmitButton.classList.add('d-none');
				formContinueButton.classList.add('d-none');
			} else {
				formSubmitButton.classList.remove('d-inline-block');
				formSubmitButton.classList.remove('d-none');
				formContinueButton.classList.remove('d-none');
			}
		});

		// Validation before going to next page
		stepperObj.on('kt.stepper.next', function (stepper) {
			console.log('stepper.next');
			// Validate form before change stepper step
			var validator = validations[stepper.getCurrentStepIndex() - 1]; // get validator for currnt step

			if (validator) {
				validator.validate().then(function (status) {
					console.log('validated!');

					if (status == 'Valid') {
						stepper.goNext();

						KTUtil.scrollTop();
					} else {
						Swal.fire({
							text: "Lütfen girmiş olduğunuz bilgileri kontrol ediniz.",
							icon: "error",
							buttonsStyling: !1,
							confirmButtonText: "Tamam",
							customClass: {
								confirmButton: "btn btn-light"
							}
						}).then(function () {
							KTUtil.scrollTop();
						});
					}
				});
			} else {
				stepper.goNext();

				KTUtil.scrollTop();
			}
		});

		// Prev event
		stepperObj.on('kt.stepper.previous', function (stepper) {
			console.log('stepper.previous');

			stepper.goPrevious();
			KTUtil.scrollTop();
		});
	}

	var handleForm = function(validations) {
		formSubmitButton.addEventListener('click', function (e) {
			// Validate form before change stepper step
			var validator = validations[3]; // get validator for last form

			validator.validate().then(function (status) {

				if (status == 'Valid') {
					// Prevent default button action
					e.preventDefault();

					// Disable button to avoid multiple click 
					formSubmitButton.disabled = true;

					// Show loading indication
					formSubmitButton.setAttribute('data-kt-indicator', 'on');
                    
                    console.log('form serilalize', $('#vehicle_form').serialize())
                    let formData = new FormData($('#vehicle_form')[0]);
                    $.ajax({
						type : 'POST',
						url : $('#vehicle_form').attr('action'),
						enctype: 'multipart/form-data',
						data : $('#vehicle_form').serialize(),
						
						
						success: function (data) {
							console.log('return data', data);
							// Hide loading indication
							formSubmitButton.removeAttribute('data-kt-indicator');

							// Enable button
							formSubmitButton.disabled = false;

							stepperObj.goNext();
						
						},
						error: function(data){
							console.log('data', data)
							//var errors = $.parseJSON(data.responseText);
							let errors = data.responseJSON;
							let errorsHtml = '';
							console.log('errors', errors);
							$.each(errors.errors, function (index, value) {
									errorsHtml += '<ul class="list-group"><li class="list-group-item alert alert-danger">' + value + '</li></ul>';
								});
				
							$.each(errors.errors, function(index, value) {
								console.log('index', index);
								console.log('value', value);
				
							});
				
			 
							Swal.fire({
								 html: errorsHtml,
								 icon: "error",
								 buttonsStyling: !1,
								 confirmButtonText: "Tamam",
								 customClass: {
									 confirmButton: "btn btn-light"
								 }
							 }).then(function () {
								 KTUtil.scrollTop();
								 // Hide loading indication
								formSubmitButton.removeAttribute('data-kt-indicator');
								// Enable button
								formSubmitButton.disabled = false;


							 });
				
						}
					});
                    
					// // Simulate form submission
					// setTimeout(function() {
						
					// }, 2000);
				} else {
					Swal.fire({
						text: "Lütfen girmiş olduğunuz bilgileri kontrol ediniz.",
						icon: "error",
						buttonsStyling: !1,
						confirmButtonText: "Tamam",
						customClass: {
							confirmButton: "btn btn-light"
						}
					}).then(function () {
						KTUtil.scrollTop();
					});
				}
			});
		});

	}

	var initValidation = function (validations) {
		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
		// Step 1
		validations.push(FormValidation.formValidation(
			form,
			{
				fields: {
					plate: { validators: { notEmpty: { message: "Lütfen araç plakasını yazın!" } } },
					vehicle_class_id: { validators: { notEmpty: { message: "Lütfen araç sınıfı seçin!" } } },
					vehicle_brand_id: { validators: { notEmpty: { message: "Lütfen araç markası seçin!" } } },
					vehicle_model_id: { validators: { notEmpty: { message: "Lütfen araç modeli seçin!" } } },
					price: { validators: { notEmpty: { message: "Lütfen fiyat bilgisini yazın!" } } },
				},
				plugins: {
					trigger: new FormValidation.plugins.Trigger(),
					bootstrap: new FormValidation.plugins.Bootstrap5({
						rowSelector: '.fv-row',
                        eleInvalidClass: '',
                        eleValidClass: ''
					})
				}
			}
		));

		// Step 2
		validations.push(FormValidation.formValidation(
			form,
			{
				fields: {
					'kilometer[]': { validators: { notEmpty: { message: "Lütfen km bilgisini yazın!" } } },
					'price[]': { validators: { notEmpty: { message: "Lütfen fiyat bilgisini yazın!" } } },
				},
				plugins: {
					trigger: new FormValidation.plugins.Trigger(),
					// Bootstrap Framework Integration
					bootstrap: new FormValidation.plugins.Bootstrap5({
						rowSelector: '.fv-row',
                        eleInvalidClass: '',
                        eleValidClass: ''
					})
				}
			}
		));

		// Step 3
		validations.push(FormValidation.formValidation(
			form,
			{

			}
		));

		// Step 4
		validations.push(FormValidation.formValidation(
			form,
			{
				fields: {
					'first_name': { validators: { notEmpty: { message: "Lütfen isim bilgisini yazın!" } } },
					'last_name': { validators: { notEmpty: { message: "Lütfen soyisim bilgisini yazın!" } } },
					'email': { validators: { notEmpty: { message: "Lütfen e-posta bilgisini yazın!" } } },
					'identity_number': { validators: { notEmpty: { message: "Lütfen TC kimlik no bilgisini yazın!" } } },
					'phone': { validators: { notEmpty: { message: "Lütfen telefon bilgisini yazın!" } } },
					'password': { validators: { notEmpty: { message: "Lütfen şifre bilgisini yazın!" } } },
					'confirm_password': { validators: { notEmpty: { message: "Lütfen doğrulama şifre bilgisini yazın!" } } },
				},

				plugins: {
					trigger: new FormValidation.plugins.Trigger(),
					// Bootstrap Framework Integration
					bootstrap: new FormValidation.plugins.Bootstrap5({
						rowSelector: '.fv-row',
                        eleInvalidClass: '',
                        eleValidClass: ''
					})
				}
			}
		));
	}

	return {
		// Public Functions
		init: function (validations) {
			// Elements
			modalEl = document.querySelector('#vehicle_account');

			if ( modalEl ) {
				modal = new bootstrap.Modal(modalEl);	
			}					

			stepper = document.querySelector('#vehicle_stepper');

			if ( !stepper ) {
				return;
			}

			form = stepper.querySelector('#vehicle_form');
			formSubmitButton = stepper.querySelector('[data-kt-stepper-action="submit"]');
			formContinueButton = stepper.querySelector('[data-kt-stepper-action="next"]');

			initStepper(validations);
			initValidation(validations);
			handleForm(validations);
		}
	};
}();

// On document ready
KTUtil.onDOMContentLoaded(function() {
    KTCreateAccount.init(validations);
});
    </script>

	<script>
        $(document).ready(function () {
			
            $('#kilometer1').keyup(function() {
				var kilometer1 = $(this).val();
				$('#km1').html(kilometer1);
			});

            $('#kilometer2').keyup(function() {
				var kilometer1 = parseInt($('#kilometer1').val());
				var kilometer2 = parseInt($(this).val());
				$('#km2').html(kilometer1+kilometer2);
			});

            $('#kilometer3').keyup(function() {
				var kilometer1 = parseInt($('#kilometer1').val());
				var kilometer2 = parseInt($('#kilometer2').val());
				var kilometer3 = parseInt($(this).val());
				$('#km3').html(kilometer1+kilometer2);
				$('#km4').html(kilometer1+kilometer2+kilometer3);
				$('#km5').html(kilometer1+kilometer2+kilometer3);
			});

			/*
            $('#kilometer2').change(function() {
				var kilometer1 = parseInt($('#kilometer1').val());
				var kilometer2 = parseInt($(this).val());
				console.log('km2',kilometer2+'-km1'+kilometer1);
				if(kilometer2<kilometer1){
					toastr.error("Km değeri bir öncekinden küçük olamaz.");
					$('#kilometer2').val('');
				}
			});

            $('#kilometer3').change(function() {
				var kilometer2 = parseInt($('#kilometer2').val());
				var kilometer3 = parseInt($(this).val());
				console.log('km2',kilometer2+'-km3'+kilometer3);
				if(kilometer3<kilometer2){
					toastr.error("Km değeri bir öncekinden küçük olamaz.");
					$('#kilometer3').val('');
				}
			});
			*/
            
			$('#price2').keyup(function() {
				var price2 = $(this).val();
				$('#price-1').html(price2);
			});

            $('#price3').keyup(function() {
				var price3 = $(this).val();
				$('#price-2').html(price3);
			});

            $('#price4').keyup(function() {
				var price4 = $(this).val();
				$('#price-3').html(price4);
			});

            $('#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_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);
						}
						});
				}
			});
				/*
                $("#vehicle_model_id").html('');
                $.ajax({
                    url: "{{route('vehicle.get_model_ajax')}}",
                    type: "POST",
                    data: {
                        vehicle_brand_id: brand_id,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    success: function (result) {
                        $('#vehicle_model_id').html('<option value="">Marka Seçiniz</option>');
                        $.each(result.states, function (key, value) {
                            $("#vehicle_model_id").append('<option value="' + value
                                .id + '">' + value.name + '</option>');
                        });
						$('#vehicle_model_id').select2();
                    }
                });*/

                $('#vehicle_class_id').on('change', function (e) {

                    let vehicle_class_id = $(this).val();
                    $.ajax({
                        url: "{{route('test.ajax_test')}}",
                        type: "POST",
                        data: {
                            vehicle_brand_id: vehicle_class_id,
                            _token: '{{csrf_token()}}'
                        },
                        dataType: 'json',
                        success: function (result) {
                            console.log('fdasfdas', result);
                            $('#distance_price_input').val(1);
                            $('#distance_price_stepper').remove();
                            $('#distance_price_stepper_nav').remove();
                            validations = validations.filter((item,i) => i !== 1)
                            KTCreateAccount.init(validations);
                            /*
                            $('#vehicle_model_id').html('<option value="">Marka Seçiniz</option>');
                            $.each(result.states, function (key, value) {
                                $("#vehicle_model_id").append('<option value="' + value
                                    .id + '">' + value.name + '</option>');
                            });
                            $('#vehicle_model_id').select2();
                            */
                        }
                    });

                
                });

            });
    </script>
@endsection

@endsection