@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">

        @include('app.settings.header')

        <div class="card mb-5 mb-xl-10" id="kt_profile_details_view">
            <div class="card-header border-0">
                <div class="card-title">
                    <h2 class="fw-bold mb-0">Araç Sınıf Ücretleri & Ekstralar</h2>
                </div>
                <div class="card-toolbar">
                    <a href="javascript:void(0)" class="btn btn-sm btn-flex btn-light-primary" data-bs-toggle="modal"
                        data-bs-target="#kt_modal_new_vehicle_class">
                        <span class="svg-icon svg-icon-3">
                            <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="5" fill="currentColor" />
                                <rect x="10.8891" y="17.8033" width="12" height="2" rx="1"
                                    transform="rotate(-90 10.8891 17.8033)" fill="currentColor" />
                                <rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="currentColor" />
                            </svg>
                        </span>
                        Yeni Araç Sınıfı Ekle
                    </a>
                </div>
            </div>
            <div id="kt_customer_view_payment_method" class="card-body pt-0">
                @foreach($classes as $class)
                <div class="separator separator-dashed"></div>
                <div class="py-0" data-kt-customer-payment-method="row">
                    <div class="py-3 d-flex flex-stack flex-wrap">
                        <div class="d-flex align-items-center collapsible collapsed rotate" data-bs-toggle="collapse"
                            href="#kt_customer_view_payment_method_{{ $class->id }}" role="button" aria-expanded="false"
                            aria-controls="kt_customer_view_payment_method_{{ $class->id }}">
                            <div class="me-3 rotate-90">
                                <span class="svg-icon svg-icon-3">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M12.6343 12.5657L8.45001 16.75C8.0358 17.1642 8.0358 17.8358 8.45001 18.25C8.86423 18.6642 9.5358 18.6642 9.95001 18.25L15.4929 12.7071C15.8834 12.3166 15.8834 11.6834 15.4929 11.2929L9.95001 5.75C9.5358 5.33579 8.86423 5.33579 8.45001 5.75C8.0358 6.16421 8.0358 6.83579 8.45001 7.25L12.6343 11.4343C12.9467 11.7467 12.9467 12.2533 12.6343 12.5657Z"
                                            fill="currentColor" />
                                    </svg>
                                </span>
                            </div>
                            <img src="{{ URL::to('uploads/'.$class->image.'') }}" class="w-40px me-3" alt="" />
                            <div class="me-3">
                                <div class="d-flex align-items-center">
                                    <div class="text-gray-800 fw-bold">{{ $class->name }}</div>
                                </div>
                                <div class="text-muted">{{ $class->description }}</div>
                            </div>
                        </div>
                        <div class="d-flex my-3 ms-9">
                            <!--<a href="javascript:void(0)" class="btn btn-icon btn-active-light-primary w-30px h-30px me-3 vehicle_class_detail" data-bs-toggle="modal" data-bs-target="#kt_modal_new_card" data-id="{{ $class->id }}" data-uuid="{{ $class->uuid }}">
									<span data-bs-toggle="tooltip" data-bs-trigger="hover" title="Fiyatları Güncelle">
											<img src="{{ URL::to('app/media/icon/update.svg') }}" alt="">
									</span>
								</a>-->

                            @if(Auth::user()->company_id == $class->company_id)
                            <a href="javascript:void(0)" data-url="{{ $class->delete_url }}"
                                class="btn btn-icon btn-active-light-primary w-30px h-30px me-3 delete_action"
                                data-id="{{ $class->id }}" data-uuid="{{ $class->uuid }}">
                                <span data-bs-toggle="tooltip" data-bs-trigger="hover" title="Sınıfı Sil">
                                    <img src="{{ URL::to('app/media/icon/delete.svg') }}" alt="">
                                </span>
                            </a>
                            @endif

                            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold w-150px py-3"
                                data-kt-menu="true">
                                <div class="menu-item px-3">
                                    <a href="#" class="menu-link px-3"
                                        data-kt-payment-mehtod-action="set_as_primary">Set as Primary</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="kt_customer_view_payment_method_{{ $class->id }}" class="collapse fs-6 ps-10"
                        data-bs-parent="#kt_customer_view_payment_method">
                        <div class="d-flex flex-wrap py-5">
                            <div class="flex-equal me-5">

                                <div class="mb-3 row">
                                    <div class="col-lg-6 fv-row">
                                        <label class="col-lg-12 col-form-label fw-semibold fs-6">
                                            <span class="">Sınıf Fiyatlandırması:</span>

                                            <a href="javascript:void(0)"
                                                class="btn btn-icon btn-active-light-primary w-30px h-30px me-3 vehicle_class_detail"
                                                data-bs-toggle="modal" data-bs-target="#kt_modal_new_card"
                                                data-id="{{ $class->id }}" data-uuid="{{ $class->uuid }}">
                                                <span data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    title="Fiyatları Güncelle">
                                                    <img src="{{ URL::to('app/media/icon/update.svg') }}" alt="">
                                                </span>
                                            </a>

                                            <hr>
                                        </label>

                                        @if($class->distance_prices_exists)
                                        <table class="table table-flush fw-semibold gy-1">
                                            @foreach($class->vehicleClassDistancePrices as $distancePrice)
                                            <tr class="text-right">
                                                <td class="text-muted min-w-200px w-200px">

                                                    @if(!($loop->last))
                                                    {{ $distancePrice->start }} - {{ $distancePrice->end }} km
                                                    @else
                                                    {{ $distancePrice->start }} km'den sonra
                                                    @endif
                                                </td>
                                                <td class="text-gray-800">{{ $distancePrice->price }}
                                                    {{ $distancePrice->vehicleClassDistancePriceCurrency->symbol }}</td>
                                            </tr>
                                            @endforeach
                                        </table>
                                        @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">
                                                    <span><strong>{{ $class->name }} </strong>sınıfı için henüz
                                                        fiyatlandırma eklenmedi!</span>
                                                </div>
                                            </div>
                                        </div>
                                        @endif

                                    </div>

                                    <div class="col-lg-6 fv-row">
                                        <label class="col-lg-12 col-form-label fw-semibold fs-6">
                                            <span>Sınıf Ekstraları:</span>

                                            <a href="javascript:void(0)"
                                                class="btn btn-icon btn-active-light-primary w-30px h-30px me-3 class_extra_detail"
                                                data-bs-toggle="modal" data-bs-target="#edit_class_extra"
                                                data-id="{{ $class->id }}" data-uuid="{{ $class->uuid }}">
                                                <span data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    title="Ekstraları Düzenle">
                                                    <img src="{{ URL::to('app/media/icon/update.svg') }}" alt="">
                                                </span>
                                            </a>

                                            <hr>
                                        </label>

                                        @if($class->vehicle_class_extras_exists)
                                        <table class="table table-flush fw-semibold gy-1">
                                            @foreach($class->vehicleClassExtras as $extra)
                                            <tr class="text-right">
                                                <td class="text-muted min-w-200px w-200px">
                                                    {{ $extra->name }}
                                                </td>
                                                <td class="text-gray-800">
                                                    @if($extra->price == 0)
                                                    Ücretsiz
                                                    @else
                                                    {{ $extra->price }} {{ $extra->priceCurrency->symbol }}
                                                    @endif
                                                </td>
                                            </tr>
                                            @endforeach
                                        </table>
                                        @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">
                                                    <span><strong>{{ $class->name }} </strong>sınıfı için henüz ekstra
                                                        eklenmedi!</span>
                                                </div>
                                            </div>
                                        </div>
                                        @endif

                                    </div>
                                </div>



                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<form style="display:none" method="post" action="#" enctype="multipart/form-data" id="form_object">
    <input style="display:none" type="hidden" name="_token" value="{{ csrf_token() }}" />
</form>

<div class="modal fade" id="kt_modal_new_vehicle_class" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Yeni Araç Sınıfı</h2>
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <span class="svg-icon svg-icon-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="17.3137" width="16" height="2" rx="1"
                                transform="rotate(-45 6 17.3137)" fill="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)"
                                fill="currentColor" />
                        </svg>
                    </span>
                </div>
            </div>

            <form action="{{ route('vehicle_class.vehicle_class_create') }}" method="POST" id="add_vehicle_class_form"
                enctype="multipart/form-data">
                @csrf
                <div class="modal-body scroll-y mx-2 mx-xl-5 my-3">
                    <div class="w-100">

                        <div class="mb-3 row">
                            <div class="col-lg-6 fv-row">
                                <label class="col-lg-12 col-form-label fw-semibold fs-6">
                                    <span class="required">Araç Sınıfı Adı:</span>
                                </label>
                                <input type="text" name="name" id="name"
                                    class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" />
                            </div>

                            <div class="col-lg-6 fv-row">
                                <label class="col-lg-12 col-form-label fw-semibold fs-6">
                                    <span>Sınıf Görseli:</span>
                                </label>
                                <input type="file" name="image" id="image"
                                    class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" />
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <div class="col-lg-6 fv-row">
                                <label class="col-lg-12 col-form-label fw-semibold fs-6">
                                    <span class="required">Kişi Sayısı:</span>
                                </label>
                                <input type="number" name="person_capacity" id="person_capacity"
                                    class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" />
                            </div>

                            <div class="col-lg-6 fv-row">
                                <label class="col-lg-12 col-form-label fw-semibold fs-6">
                                    <span class="required">Valiz Sayısı:</span>
                                </label>
                                <input type="number" name="suitcase_capacity" id="suitcase_capacity"
                                    class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" />
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <div class="col-lg-12 fv-row">
                                <label class="col-lg-12 col-form-label fw-semibold fs-6">
                                    <span class="required">Araç Sınıfı Açıklaması:</span>
                                </label>
                                <textarea name="text" id="text" cols="30" rows="3" class="form-control"
                                    placeHolder="Örn: Otobüs vb."></textarea>
                            </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 class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Vazgeç</button>
                    <button type="submit" class="btn btn-primary" id="add_vehicle_class_button">Araç Sınıfı
                        Ekle</button>
                </div>
            </form>

        </div>
    </div>
</div>

<div class="modal fade" id="kt_modal_new_card" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Fiyat Bilgileri</h2>
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <span class="svg-icon svg-icon-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="17.3137" width="16" height="2" rx="1"
                                transform="rotate(-45 6 17.3137)" fill="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)"
                                fill="currentColor" />
                        </svg>
                    </span>
                </div>
            </div>

            <div id="vehicle_distance_price_content"></div>

        </div>
    </div>
</div>

<div class="modal fade" id="edit_class_extra" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Sınıf Ekstra Bilgileri</h2>
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <span class="svg-icon svg-icon-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="17.3137" width="16" height="2" rx="1"
                                transform="rotate(-45 6 17.3137)" fill="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)"
                                fill="currentColor" />
                        </svg>
                    </span>
                </div>
            </div>

            <div id="class_extra_content"></div>

        </div>
    </div>
</div>


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

@endsection

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

<script>
$(".delete_action").click(function(e) {
    let el = $(this);
    Swal.fire({
        title: "Emin misiniz?",
        text: "Seçilen araç sınıfını silmek istediğinize emin misiniz!",
        icon: "question",
        showCancelButton: true,
        confirmButtonText: "Evet, sınıfı sil.",
        cancelButtonText: "Hayır, vazgeç!",
        reverseButtons: true,
        customClass: {
            confirmButton: "btn btn-success",
            cancelButton: 'btn btn-danger'
        }
    }).then(function(result) {
        if (result.value) {
            // Swal.fire(
            // 		"Siliniyor!",
            // 		"Müşteri siliniyor..",
            // )
            event.preventDefault();
            $('#form_object').attr('action', el.data('url'));
            $('#form_object').submit();
            // result.dismiss can be "cancel", "overlay",
            // "close", and "timer"
        } else if (result.dismiss === "cancel") {
            Swal.fire(
                "İptal Edildi",
                "Silme işlemi iptal edildi.",
                "error"
            )
        }
    });
});
</script>

<script src="{{ URL::to('app/js/modules/add_vehicle_class.js') }}"></script>

<script>
$('.vehicle_class_detail').click(function() {
    let id = $(this).attr("data-id")
    let uuid = $(this).attr("data-uuid")
    //console.log("id:", id)
    //console.log("uuid:", uuid)
    $('#vehicle_distance_price_content').html("");
    $.ajax({
        url: "{{route('vehicle.get_vehicle_class_distance_price_ajax')}}",
        type: "POST",
        data: {
            id: id,
            uuid: uuid,
            _token: '{{ csrf_token() }}'
        },
        success: function(result) {
            console.log(result)
            $('#vehicle_distance_price_content').html(result);
        }
    });
});

$('.class_extra_detail').click(function() {
    let id = $(this).attr("data-id")
    let uuid = $(this).attr("data-uuid")

    //console.log("id:", id)
    //console.log("uuid:", uuid)
    $('#class_extra_content').html("");

    $.ajax({
        url: "{{route('vehicle_class.edit_class_extra')}}",
        type: "POST",
        data: {
            id: id,
            uuid: uuid,
            _token: '{{ csrf_token() }}'
        },
        success: function(result) {
            console.log(result)
            $('#class_extra_content').html(result);
        }
    });
});


$(document).ready(function() {

    $('#kilometer1').keyup(function() {
        var kilometer1 = $(this).val();
        $('#km1').html(kilometer1);
    });

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

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

    $('#kilometer3').keyup(function() {
        var kilometer3 = $(this).val();
        $('#km3').html(kilometer3);
    });

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

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

});
</script>
@endsection

@endsection