@extends('layout.master')
@section('content')

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="container-xxl" id="kt_content_container">
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <div id="kt_content_container" class="container-xxl">
                <div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid gap-10"
                    id="kt_create_account_stepper">
                    <div class="card d-flex flex-row-fluid flex-center" style="background:none;">
                        <div class="card-body py-10 w-100 px-9" id="kt_create_account_form">
                            <form action="{{ route('transfer.post_select_customer', $uuid) }}" method="post"
                                id="transfer-form">
                                @csrf
                                <input type="hidden" class="vehicle-class" name="vehicle_class" value="">
                                <div class="row">
                                    <div class="col-md-3 left-top">
                                        <div class="transfer-bilgi" id="transfer-bilgi">
                                            <div class="adim-1">
                                                <div class="title">{{ __('transfer.create.start') }} <a href="#"><img
                                                            src="{{ URL::to('app/media/form-icon/transfer-icon8.svg') }}"
                                                            alt=""></a></div>
                                                <div class="date" id="transfer_date_time_div">
                                                    {{ $transfer_data->transfer_date_time }}</div>
                                                <div class="text">
                                                    <p><b>{{ __('transfer.create.where_from') }}:</b></p>
                                                    <p id="start_address_p">
                                                        {{ $transfer_data->start_address_formatted_address }}</p>
                                                    <p><b>{{ __('transfer.create.to_where') }}:</b></p>
                                                    <p id="end_address_p">
                                                        {{ $transfer_data->end_address_formatted_address }}</p>
                                                    <p><b>{{ __('transfer.create.number_of_passengers') }}:</b> <span
                                                            id="number_of_passengers_span">{{ $transfer_data->number_of_passengers }}</span>
                                                    </p>
                                                </div>
                                                <div class="title">{{ __('transfer.create.distance_time') }}</div>
                                                <div class="text">
                                                    <p><b>{{ __('transfer.create.distance') }}:</b>
                                                        {{ $transfer_data->distance_text }}</p>
                                                    <p><b>{{ __('transfer.create.estimated_time') }}:</b>
                                                        {{ $transfer_data->duration_text }}</p>
                                                </div>
                                            </div>
                                            <div class="adim-2" style="display: none;">
                                                <div class="title">{{ __('transfer.create.vehicle_information') }} <a
                                                        href="#"><img
                                                            src="{{ URL::to('app/media/form-icon/transfer-icon8.svg') }}"
                                                            alt=""></a></div>
                                                <div class="item-title" id="selected_vehicle_name">...</div>
                                                <div class="car-img"><img
                                                        src="{{ URL::to('app/media/form-icon/car.png') }}"
                                                        id="selected_vehicle_image" alt=""></div>
                                                <div class="car-detail">
                                                    <ul>
                                                        <li><img src="{{ URL::to('app/media/form-icon/persons.svg') }}"
                                                                alt=""> <span id="selected_vehicle_person_capacity">8
                                                            </span><span>{{ __('transfer.create.person') }}</span></li>
                                                        <li><img src="{{ URL::to('app/media/form-icon/bag.svg') }}"
                                                                alt=""> <span id="selected_vehicle_suitcase_capacity">8
                                                            </span><span>{{ __('transfer.create.suitcase') }}</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-9">
                                        <div class="adim2" id="adim2">
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <div class="title">{{ __('transfer.create.vehicles') }}</div>
                                                </div>
                                                <div class="col-md-2">
                                                    <select name="discount" id="discount"
                                                        class="select-filter discount">
                                                        <option value="0">{{ __('transfer.create.discount') }}</option>
                                                        <option value="10" @if($transfer_data->discount == 10 )
                                                            selected="selected" @endif>% 10</option>
                                                        <option value="20" @if($transfer_data->discount == 20 )
                                                            selected="selected" @endif>% 20</option>
                                                        <option value="30" @if($transfer_data->discount == 30 )
                                                            selected="selected" @endif>% 30</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-2">
                                                    <select name="currency" id="currency"
                                                        class="select-filter currency">
                                                        @foreach($currencies as $cur)
                                                        <option value="{{ $cur->id }}" @if($transfer_data->currency_id
                                                            == $cur->id ) selected="selected" @endif>{{ $cur->symbol }}
                                                            {{ $cur->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            @foreach($vehicle_class as $vc)
                                            <div class="row list-car">
                                                <div class="item">
                                                    <div class="col-md-12">
                                                        <div class="left">
                                                            <div class="item-title">{{ $vc->vehicle_class->name }}</div>
                                                            <div class="car-img"><img
                                                                    src="{{ URL::to('app/media/form-icon/car.svg') }}"
                                                                    alt=""></div>
                                                            <div class="car-detail">
                                                                <ul>
                                                                    <li><img src="{{ URL::to('app/media/form-icon/persons.svg') }}"
                                                                            alt="">
                                                                        <span>{{ $vc->vehicle_class->person_capacity }}</span><span>{{ __('transfer.create.person') }}</span>
                                                                    </li>
                                                                    <li><img src="{{ URL::to('app/media/form-icon/bag.svg') }}"
                                                                            alt="">
                                                                        <span>{{ $vc->vehicle_class->suitcase_capacity }}
                                                                        </span><span>{{ __('transfer.create.suitcase') }}</span>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="second">
                                                            <div class="item-title">
                                                                {{ __('transfer.create.free_services') }}</div>
                                                            <ul>
                                                                @if(count($vc->vehicle_class->getExtraFree()) > 0)
                                                                @foreach($vc->vehicle_class->getExtraFree() as $ep)
                                                                <li>
                                                                    - {{ $ep->name }}
                                                                    <input type="hidden"
                                                                        class="transfer_extra_free_price"
                                                                        name="transfer_extra_free_{{ $vc->vehicle_class->id }}[]"
                                                                        id="extra_free_{{$ep->id}}"
                                                                        value="{{ $ep->id }}">
                                                                </li>
                                                                @endforeach
                                                                @else
                                                                <li>- {{ __('transfer.create.free_service_not_found') }}
                                                                </li>
                                                                @endif
                                                            </ul>
                                                        </div>
                                                        <div class="third">
                                                            <div class="item-title">{{ __('transfer.create.extras') }}
                                                            </div>
                                                            <ul>
                                                                @foreach($vc->vehicle_class->getExtraWithPrice($transfer_data->currency_id)
                                                                as $ep)
                                                                <li>
                                                                    <input data-price="{{ $ep->price }}" type="checkbox"
                                                                        class="transfer_extra_price"
                                                                        name="transfer_extra_{{ $vc->vehicle_class->id }}[]"
                                                                        id="extra_{{$ep->id}}" value="{{ $ep->id }}">
                                                                    <label for="extra_{{$ep->id}}">{{ $ep->name }} <span
                                                                            class="price">{{ $ep->price }}
                                                                            {{ $transfer_data->currency_symbol }}</span></label>
                                                                </li>
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                        <div class="right">
                                                            @php $prices =
                                                            $vc->vehicle_class->calculateDistancePrice($transfer_data->distance_km,
                                                            $transfer_data->currency_id, $transfer_data->discount);
                                                            @endphp
                                                            @php $price = $prices->price; @endphp
                                                            @php $discounted_price = $prices->discounted_price; @endphp
                                                            @php $discount_price = $prices->discount_price; @endphp
                                                            <div data-price="{{ $price }}"
                                                                data-currency-symbol="{{ $transfer_data->currency_symbol }}"
                                                                class="price transfer_price">{{ $price }}
                                                                {{ $transfer_data->currency_symbol }}</div>
                                                            <div data-price="{{ $discounted_price }}"
                                                                data-currency-symbol="{{ $transfer_data->currency_symbol }}"
                                                                class="price transfer_discount_price">
                                                                {{ $discounted_price }}
                                                                {{ $transfer_data->currency_symbol }}</div>

                                                            <input type="button"
                                                                data-vehicle-class="{{ $vc->vehicle_class->id }}"
                                                                class="car-select" value="Aracı Seç"
                                                                data-vehicle-name="Mercedes Vito Standard 1"
                                                                data-person-capacity="3" data-suitcase-capacity="3"
                                                                data-vehicle-image-url="{{ URL::to('app/media/form-icon/car.svg') }}">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

@endsection

<!-- Bu sayfaya ait js dosyaları -->
@section('js')
<script>
$(function() {
    $(".currency").on("change", function() {
        console.log('value', $(this).val());
        let data = {
            "_token": "{{ csrf_token() }}",
            "currency_id": $(this).val(),
            "uuid": '{{ $uuid }}',
        };
        $.ajax({
            url: "{{ route('transfer.change_currency', $uuid) }}",
            type: "POST",
            data: data,
            dataType: "json",
            success: function(data) {
                console.log('data', data);
                location.reload();
            }
        });

    });
    $(".discount").on("change", function() {
        console.log('value', $(this).val());
        let data = {
            "_token": "{{ csrf_token() }}",
            "discount": $(this).val(),
            "uuid": '{{ $uuid }}',
        };
        $.ajax({
            url: "{{ route('transfer.change_discount', $uuid) }}",
            type: "POST",
            data: data,
            dataType: "json",
            success: function(data) {
                console.log('data', data);
                location.reload();
            }
        });

    });
    $(".transfer_extra_price").on("change", function() {
        //console.log('value', $(this).data('price'));
        let total_price = 0;
        let transfer_extra_price = 0;
        $(this).parents('.third').find('input').each(function() {
            if ($(this).prop('checked') == true) {
                transfer_extra_price += parseFloat($(this).data('price'));

            }
        })
        let transfer_price = $(this).parents('.item').find('.transfer_price').data('price');
        let transfer_discount_price = $(this).parents('.item').find('.transfer_discount_price').data(
            'price');

        let transfer_price_symbol = $(this).parents('.item').find('.transfer_price').data(
            'currency-symbol');
        let transfer_discount_price_symbol = $(this).parents('.item').find('.transfer_discount_price')
            .data('currency-symbol');

        total_price = parseFloat(transfer_price + transfer_extra_price).toFixed(2);
        discount_total_price = parseFloat(transfer_discount_price + transfer_extra_price).toFixed(2);

        $(this).parents('.item').find('.transfer_price').text(total_price + ' ' +
            transfer_price_symbol);
        $(this).parents('.item').find('.transfer_discount_price').text(discount_total_price + ' ' +
            transfer_discount_price_symbol);


    });

    $(".car-select").on("click", function() {
        let vehicle_class = $(this).data('vehicle-class');
        $('.vehicle-class').val(vehicle_class);
        $('#transfer-form').submit();
    });
});
</script>

@endsection

@endsection