@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>
                                                        {{ __('vehicle.create.person') }}
                                                        <i class="fa-solid fa-suitcase"></i> <b
                                                            class="car_class_suitcase_capacity">...</b>
                                                        {{ __('vehicle.create.suitcase') }}
                                                    </span>
                                                </p>
                                                <p style="padding-top:10px;">Plaka : <b class="plate_text">...</b></p>
                                                <p>{{ __('vehicle.vehicle.class') }} : <b class="vehicle_class">...</b>
                                                </p>
                                                <p>{{ __('vehicle.vehicle.brand') }} : <b
                                                        class="vehicle_brand_id_text">...</b></p>
                                                <p>{{ __('vehicle.vehicle.model') }} : <b
                                                        class="vehicle_model_id_text">...</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">2</span>
                                        </div>

                                        <div class="stepper-label">
                                            <h3 class="stepper-title">{{ __('vehicle.vehicle.prices.information') }}
                                            </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">3</span>
                                        </div>
                                        <div class="stepper-label">
                                            <h3 class="stepper-title">{{ __('vehicle.vehicle.extras') }}</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">{{ __('vehicle.vehicle.driver.information') }}
                                            </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">{{ __('vehicle.vehicle.completed') }}</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" autocomplete="off">

                            <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 id="plateNumber" type="text" name="plate"
                                                            class="form-control form-control-lg form-control-solid mb-3 mb-lg-0 first_step_selected"
                                                            placeholder="{{ __('vehicle.plate') }}" value=""
                                                            autocomplete="off" />
                                                    </div>
                                                    <div class="col-lg-7 mb-6 position-relative fv-row">
                                                        <select id="vehicle_class_id" name="vehicle_class_id"
                                                            aria-label="{{ __('vehicle.vehicle.class') }}"
                                                            data-control="select2"
                                                            data-placeholder="{{ __('vehicle.create.select.vehicle.class') }}..."
                                                            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="{{ __('vehicle.create.vehicle.brand') }}"
                                                            data-control="select2"
                                                            data-placeholder="{{ __('vehicle.create.select.vehicle.brand') }}..."
                                                            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="{{ __('vehicle.create.vehicle.model') }}"
                                                            data-control="select2"
                                                            data-placeholder="{{ __('vehicle.create.select.vehicle.model') }}..."
                                                            class="form-select form-select-solid form-select-lg first_step_selected">
                                                            <option value="">
                                                                {{ __('vehicle.create.select.vehicle.model2') }}
                                                            </option>
                                                        </select>
                                                    </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 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 selectdriver"
                                                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 newdriver"
                                                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 fv-row w-100 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 driver_id" 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('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="price-stepper">

                            </div>
                            <input type="hidden" name="driver_select" id="driver-select" value="1">
                            <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>
@endsection
<!-- Bu sayfaya ait css dosyaları -->
@section('css')

@endsection

<!-- Bu sayfaya ait js dosyaları -->
@section('js')
<script src="{{ asset('app/js/extra/vehicle-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>
<script src="{{ asset('app/js/extra/jquery.mask.js') }}"></script>
<script src="{{ asset('app/js/modules/vehicle.js') }}"></script>

<!--end::Custom Javascript-->
<script>
$(function() {

    // Initialize Tagify script on the above inputs
    var input = document.querySelector("#kt_tagify_7");
    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);
    });

    let isTaxNoValid = function(taxno) {
        let v1 = 0,
            v2 = 0,
            v3 = 0,
            v4 = 0,
            v5 = 0,
            v6 = 0,
            v7 = 0,
            v8 = 0,
            v9 = 0,
            v11 = 0,
            v22 = 0,
            v33 = 0,
            v44 = 0,
            v55 = 0,
            v66 = 0,
            v77 = 0,
            v88 = 0,
            v99 = 0,
            lastDigit = 0,
            sum = 0;
        if (taxno.length == 10) {
            v1 = (Number(taxno.charAt(0)) + 9) % 10;
            v2 = (Number(taxno.charAt(1)) + 8) % 10;
            v3 = (Number(taxno.charAt(2)) + 7) % 10;
            v4 = (Number(taxno.charAt(3)) + 6) % 10;
            v5 = (Number(taxno.charAt(4)) + 5) % 10;
            v6 = (Number(taxno.charAt(5)) + 4) % 10;
            v7 = (Number(taxno.charAt(6)) + 3) % 10;
            v8 = (Number(taxno.charAt(7)) + 2) % 10;
            v9 = (Number(taxno.charAt(8)) + 1) % 10;
            lastDigit = Number(taxno.charAt(9));
            v11 = (v1 * 512) % 9;
            v22 = (v2 * 256) % 9;
            v33 = (v3 * 128) % 9;
            v44 = (v4 * 64) % 9;
            v55 = (v5 * 32) % 9;
            v66 = (v6 * 16) % 9;
            v77 = (v7 * 8) % 9;
            v88 = (v8 * 4) % 9;
            v99 = (v9 * 2) % 9;
            if (v1 != 0 && v11 == 0) {
                v11 = 9;
            }
            if (v2 != 0 && v22 == 0) {
                v22 = 9;
            }
            if (v3 != 0 && v33 == 0) {
                v33 = 9;
            }
            if (v4 != 0 && v44 == 0) {
                v44 = 9;
            }
            if (v5 != 0 && v55 == 0) {
                v55 = 9;
            }
            if (v6 != 0 && v66 == 0) {
                v66 = 9;
            }
            if (v7 != 0 && v77 == 0) {
                v77 = 9;
            }
            if (v8 != 0 && v88 == 0) {
                v88 = 9;
            }
            if (v9 != 0 && v99 == 0) {
                v99 = 9;
            }
            sum = v11 + v22 + v33 + v44 + v55 + v66 + v77 + v88 + v99;
            sum = (sum % 10 == 0) ? 0 : (10 - (sum % 10));
            return (sum == lastDigit) ? true : false;
        }
        return false;
    };

    let checkTcNum = function(value) {
        value = value.toString();
        let isEleven = /^[0-9]{11}$/.test(value);
        let totalX = 0;
        for (let i = 0; i < 10; i++) {
            totalX += Number(value.substr(i, 1));
        }
        let isRuleX = totalX % 10 == value.substr(10, 1);
        let totalY1 = 0;
        let totalY2 = 0;
        for (let i = 0; i < 10; i += 2) {
            totalY1 += Number(value.substr(i, 1));
        }
        for (let i = 1; i < 10; i += 2) {
            totalY2 += Number(value.substr(i, 1));
        }
        let isRuleY = ((totalY1 * 7) - totalY2) % 10 == value.substr(9, 0);
        return isEleven && isRuleX && isRuleY;
    };
    let isPlateValid = function(value) {
        let regex, v;
        v = value.replace(/\s+/g, '').toUpperCase();
        regex = /^(0[1-9]|[1-7][0-9]|8[01])(([A-Z])(\d{4,5})|([A-Z]{2})(\d{3,4})|([A-Z]{3})(\d{2,3}))$/;
        return v.match(regex) != null;
    };
    let plateInput = $('#plateNumber');
    plateInput.mask("NN-TZZ-NNLLL", {
        translation: {
            'N': {
                pattern: '[0-9]'
            },
            'L': {
                pattern: '[0-9]',
                optional: true
            },
            'T': {
                pattern: '[a-zA-Zı]{1}'
            },
            'Z': {
                pattern: '[a-zA-Zı]',
                optional: true
            },
            placeholder: "__-__-____"
        },
        onKeyPress: function(plate, e, field, options) {
            plateInput.val(plate.toUpperCase());
            plate = plate.split('-');
            if (plate.length > 1) {
                if (plate[1].length == 2) {
                    plateInput.mask('NN-TZZ-NNLL', options)
                } else if (plate[1].length == 3) {
                    plateInput.mask('NN-TZZ-NNL', options)
                } else {
                    plateInput.mask('NN-TZZ-NNLLL', options)
                }
            }
        }
    });


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

    $('.selectdriver').click(function() {
        $('#driver-select').val('1').trigger('change');
    });
    $('.newdriver').click(function() {
        $('#driver-select').val('0').trigger('change');
        $(".driver_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('vehicle.get_vehicle_model_ajax')}}",
                type: "post",
                data: {
                    vehicle_brand_id: brand_id,
                    _token: '{{csrf_token()}}'
                },
                success: function(response) {
                    //console.log('response', response)
                    var data = $.map(response, function(obj) {
                        obj.id = obj.id || obj
                            .pk; // replace pk with your identifier
                        obj.text = obj.name
                        return obj;
                    });


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

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

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

        let vehicle_class_id = $(this).val();
        let distance_price_array = [1, 2, 3, 4];
        $.ajax({
            url: "{{route('vehicle.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) {
                    $(".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("");
                    //  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('');
                    });
                }



            }
        });
    });
    /*
    $("#vehicle_model_id").html('');
    $.ajax({
        url: "{{route('vehicle.get_vehicle_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();
        }
    });*/
});
</script>
@endsection