@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="{{ $driver->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 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('{{ $driver->user->avatar }}')!important">
												<div class="image-input-wrapper w-125px h-125px"></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="fa-solid fa-arrow-up-from-bracket"></i>
													<input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
													<input type="hidden" name="avatar_remove" />
												</label>
											</div>
											<div class="form-text">İzin verilen dosya türleri: png, jpg, jpeg.</div>
										</div>
									</div>
									<div class="row mb-6">
										<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="{{ $driver->user->first_name }}" />
												</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="{{ $driver->user->last_name }}" />
												</div>
											</div>
										</div>
									</div>
									<div class="row mb-6">
										<label class="col-lg-4 col-form-label fw-semibold fs-6">Araç</label>
										<div class="col-lg-8 fv-row">
											<select id="vehicle_id" name="vehicle_id" aria-label="Sürücü Aracı" data-control="select2" data-placeholder="Araç seçiniz..." class="form-select form-select-solid form-select-lg">
												<option value="0">Sürücünün şuan aracı yok</option>
												@foreach($vehicles as $vehicle)
													<option value="{{ $vehicle->id }}" @if($driver->vehicle_id == $vehicle->id)selected @endif>{{ $vehicle->plate }} - {{ $vehicle->vehicle_brand->name }} {{ $vehicle->vehicle_model->name }}</option>
												@endforeach
											</select>
										</div>
									</div>
									<div class="row mb-6">
										<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="{{ $driver->identity_number }}" />
										</div>
									</div>
									<div class="row mb-6">
										<label class="col-lg-4 col-form-label fw-semibold fs-6">
											<span class="required">GSM No</span>
										</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:" value="{{ $driver->user->phone }}" />
										</div>
									</div>

									<div class="row mb-6">
										<label class="col-lg-4 col-form-label fw-semibold fs-6">
											<span class="required">E-Posta</span>
										</label>
										<div class="col-lg-8 fv-row">
											<input type="email" name="email" class="form-control form-control-lg form-control-solid" placeholder="E-posta adresi:" value="{{ $driver->user->email }}" />
										</div>
									</div>

									<!--<div class="row mb-6">
										<label class="col-lg-4 col-form-label fw-semibold fs-6">Doğum Tarihi</label>
										<div class="col-lg-8 fv-row">
											<input class="form-control form-control-solid" placeholder="Tarih Seçiniz" id="kt_daterangepicker_3"/>
										</div>
									</div>-->

									<div class="row mb-6">
										<label class="col-lg-4 col-form-label fw-semibold fs-6">Şifre</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">Boş bırakırsanız şifre değişmeyecektir.</div>
										</div>
									</div>

									<div class="row mb-6">
										<label class="col-lg-4 col-form-label fw-semibold fs-6">Şifre Tekrarı</label>
										<div class="col-lg-8 fv-row" data-kt-password-meter="true">
											<input placeholder="Şifre Tekrarı" name="confirm-password" type="password" autocomplete="off" class="form-control bg-transparent" />
										</div>
									</div>
								</div>
							</div>


							<div class="d-flex flex-stack">
							<div class="mr-2"></div>
									<button type="submit" class="btn btn-lg btn-primary" data-kt-stepper-action="next">Bilgileri Güncelle
									<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>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


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


@section('js')
<!-- Bu sayfaya ait js dosyaları -->
	<script src="{{ asset('app/js/custom/utilities/modals/create-account.js') }}"></script>
	<script src="{{ asset('app/js/widgets.bundle.js') }}"></script>
	<script src="{{ asset('app/js/custom/widgets.js') }}"></script>
	<script src="{{ asset('app/js/custom/utilities/modals/users-search.js') }}"></script>
	<script src="{{ asset('app/js/custom/forms/formrepeater.bundle.js') }}"></script>
	<script src="{{ asset('app/js/custom/forms/basic.js') }}"></script>
	<!--end::Custom Javascript-->
	<script>
		$("#kt_daterangepicker_3").daterangepicker({
						singleDatePicker: true,
						showDropdowns: true,
						minYear: 1901,
						maxYear: parseInt(moment().format("YYYY"),12)
				}, function(start, end, label) {
						var years = moment().diff(start, "years");
				}
		);
		var input = document.querySelector("#kt_tagify_7");

		// Initialize Tagify script on the above inputs
		new Tagify(input, {
				whitelist: ["Sınırsız İnternet", "Seyahat Sigortası", "Alkollü İçecek"],
				maxTags: 10,
				dropdown: {
						maxItems: 20,           // <- mixumum allowed rendered suggestions
						classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
						enabled: 0,             // <- show suggestions on focus
						closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
				}
		});
		$('#kt_docs_repeater_basic').repeater({
				initEmpty: false,

				defaultValues: {
						'text-input': 'foo'
				},

				show: function () {
						$(this).slideDown();
				},

				hide: function (deleteElement) {
						$(this).slideUp(deleteElement);
				}
		});

	</script>	
@endsection

@endsection