@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="driver_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">Sürücü Bilgileri</h3>
                                            <div class="stepper-desc fw-semibold">
                                                <img src="{{ asset('app/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" 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">Araç Bilgileri</h3>
                                            <div class="stepper-desc fw-semibold">
                                                <img src="{{ asset('app/media/vito-exclusive.png') }}" width="120"
                                                    class="img-fluid" alt="">
                                                <p>
                                                    <span class="icon">
                                                        <i class="fa-solid fa-user"></i> <b>4</b> Kişi
                                                        <i class="fa-solid fa-suitcase"></i> <b>4</b> Valiz
                                                    </span>
                                                </p>
                                                <p style="padding-top:10px;">Plaka : <b>35 GC 4388</b></p>
                                                <p>Araç Sınıfı : <b>Standart: Otomobil-Taksi</b></p>
                                                <p>Marka : <b>Mercedes</b></p>
                                                <p>Model : <b>Vito Executive</b></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="stepper-line h-15px"></div>
                                </div>
                                <div class="stepper-item price-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">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 extra-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">Araç Extralar</h3>
                                            <div class="stepper-desc fw-semibold">
                                                <div class="tags">
                                                    <span>Araç İçi Wifi</span>
                                                    <span>İçecek</span>
                                                    <span>Sigorta</span>
                                                </div>
                                            </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" id="driver_form">
                            <div class="current" data-kt-stepper-element="content">

                                <div class="card-body border-top 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('{{ asset('app/media/svg/avatars/blank.svg') }}')!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="" />
                                                </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-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="" />
                                        </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>
                                            <!--<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Cep numaranıza doğrulama bilgisi gönderilecektir."></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:" value="" />
                                        </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"
                                                        value="" />
                                                    <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-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" value="" />
                                        </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 active selectcar" data-id="1" data-bs-toggle="tab"
                                                href="#selectcar">Araç Seç</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link newcar" data-id="0" data-bs-toggle="tab"
                                                href="#newcar">Yeni Araç Ekle</a>
                                        </li>
                                    </ul>

                                    <div class="tab-content" id="myTabContent">
                                        <div class="tab-pane fade show active" id="selectcar" role="tabpanel">
                                            <div class="row mt-6 mb-6">
                                                @if(count($vehicles) > 0)
                                                @foreach($vehicles as $vehicle)
                                                <div class="col-md-6 mb-1 fv-row">
                                                    <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 vehicle_id" type="radio"
                                                                    name="vehicle_id" id="vehicle_id" value="" />
                                                            </div>
                                                            <div class="flex-grow-1">
                                                                <div
                                                                    class="d-flex align-items-center fs-4 fw-bold flex-wrap">
                                                                    {{ $vehicle->plate }}</div>
                                                                <div class="fw-semibold opacity-75">
                                                                    {{ $vehicle->vehicle_class->name }}</div>
                                                            </div>
                                                        </div>
                                                        <div class="ms-5">
                                                            <img src="{{ asset('app/media/vito-exclusive.png') }}"
                                                                class="img-fluid" alt="">
                                                        </div>
                                                    </label>
                                                </div>
                                                @endforeach
                                                @endif
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="newcar" role="tabpanel">
                                            <div class="row mt-6">
                                                <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" id="plate" 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">
                                                                <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>

                            <div data-kt-stepper-element="content">
                                <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="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 class="price-stepper">

                            </div>
                            <input type="hidden" name="driver_select" id="driver-select" value="">

                            <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="{{ LaravelLocalization::localizeUrl('/driver/create') }}"
                                                    class="btn btn-primary me-2 mb-2"
                                                    style="padding: 20px 50px;"><b>Yeni Sürücü Ekle</b></a>
                                            </div>
                                            <div class="col">
                                                <a href="{{ LaravelLocalization::localizeUrl('/transfer/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">
                                <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 submitbtn"
                                        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 nextbtn"
                                        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>
                            <input type="hidden" name="car-choose" id="car-choose">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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


@section('js')
<!-- Bu sayfaya ait js dosyaları -->
<script src="{{ asset('app/js/extra/driver-validation.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: [
        @foreach($vehicle_default_extra as $vehicle_default)
        "{{ $vehicle_default->name }}",
        @endforeach
    ],
    maxTags: 20,
    placeholder: "Buraya tıklayarak araç özelliklerini seçebilir veya yeni ekleyebilirsiniz.",
    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,
    },
}).on('add', function(e, tagName) {
    console.log("onAddTag: ", e.detail);
    console.log("onAddTag: ", e.detail.data.value, e.detail.index);
    let extra_price_input =
        '<div class="col-lg-4 mb-10 fv-row"><label class="col-lg-12 col-form-label fw-semibold fs-6"><span class="required">' +
        e.detail.data.value + '</span></label><input type="text" name="extra[]" id="extra_' + e.detail.index +
        '" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Fiyat Giriniz" value="" /><input type="hidden" name="extra_name[]" id="extra_name_' +
        e.detail.index + '" value="' + e.detail.data.value + '" /></div>'

    $('.taglist').append(extra_price_input);

}).on("invalid", function(e, tagName) {
    console.log('JQEURY EVENT: ', "invalid", e, ' ', tagName);
});
</script>

<script>
$(document).ready(function() {
    /*
    $('.selectcar').click(function() {
    	var selectvalue = $(this).attr('data-id');
    	if(selectvalue==0){
    		$(".radio-car").prop('checked',false);
    		$("#car-choose").val('0');
    	}
    	if(selectvalue==1){
    		$('#vehicle_class_id').empty().trigger('change');
    		$('#vehicle_brand_id').empty().trigger('change');
    		$('#vehicle_model_id').empty().trigger('change');
    		$("#plate").val("");
    		$("#car-choose").val('1');
    	}
    	
    	console.log(selectvalue);
    });
    */

    $('#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);
    });

    $('#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);
    });

    $('.selectcar').click(function() {
        $('#drive-select').val('1').trigger('change');
    });
    $('.newcar').click(function() {
        $('#drive-select').val('0').trigger('change');
        $(".vehicle_id").prop('checked', false);
    });

    $('#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('driver.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);
                }
            });
        }
    });

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

        let vehicle_class_id = $(this).val();
        let distance_price_array = [1, 2, 3, 4];
        $.ajax({
            url: "{{route('driver.get_distance_price_ajax')}}",
            type: "POST",
            data: {
                vehicle_class_id: vehicle_class_id,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            success: function(result) {

                // araç sınıfına göre daha önceden srgirilmiş fiyat ve km bilgisi kontrol ediliyor.
                if (result.distance_price.length > 0) {
                    $('.nextbtn').hide();
                    $('.submitbtn').show();
                    $(".price-stepper").append(
                        "<input type='hidden' name='price-step' id='price-step' value='1'>"
                    )

                    //  fiyat ve km bilgisi varsa gerekli inputlar dolduruluyor.
                    $.each(result.distance_price, function(key, value) {
                        let kk = key + 1;
                        if ($(`#kilometer${kk}`).length > 0) {
                            $(`#kilometer${kk}`).val(value.value);
                        }
                        $(`#price${kk}`).val(value.price);
                    });
                } else {
                    $(".price-stepper").html("");
                    $('.nextbtn').show();
                    $('.submitbtn').hide();
                    //  fiyat ve km bilgisi yoksa gerekli inputlar dolduruluyor.
                    $.each(distance_price_array, function(key) {
                        if ($(`#kilometer${key}`).length > 0) {
                            $(`#kilometer${key}`).val('');
                        }
                        $(`#price${key}`).val('');
                    });
                }

            }
        });
    });
});
</script>
@endsection