@extends('client/layouts/contentNavbarLayout')

@section('title')
{{ __('conveying.create.title') }}
@endsection


@section('page-script')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/themes/dark.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection

@section('content')
<h2 class="fw-bold py-3 mb-4 h4">{{ __('conveying.create.title') }}</h2>
@include('client.responses.messages')
<form action="{{ route('client.conveying.store') }}" method="POST">
    @csrf
    <div class="card mb-4">
        <div class="card-body">
            <h3 class="card-title h4 text-color">{{ __('conveying.create.date_title') }}</h3>
            <div class="row">
                <div class="col-2 col-md-1 position-relative">
                    <span class="text-center position-absolute top-35 width-80">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="26">
                            <path fill="#696cff" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm32 224c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z" />
                        </svg>
                    </span>
                </div>
                <div class="col-10 col-md-11">
                    <p class="card-text text-size">
                        {{ __('conveying.create.date_paragraph_first_ligne') }}
                        <br />
                        {{ __('conveying.create.date_paragraph_second_ligne') }}
                        <br />
                        {{ __('conveying.create.date_paragraph_third_ligne') }}
                    </p>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-md-6">
                    <div class="group-form">
                        <label for="from-date" class="h5">{{ __('conveying.create.from_date') }}</label>
                        <input class="form-control" type="text" placeholder="Sélectionner une date.." name="from_date" value="{{ old('from_date') }}" id="from-date" onchange="changeDate(event.target.value)" required autocomplete="off">
                    </div>
                    <p class="text-warning">{{ __('conveying.create.from_date_note') }}</p>
                </div>
                <div class="col-md-6">
                    <div class="group-form">
                        <label for="livraision-limit-date" class="h5">{{ __('conveying.create.to_date') }}</label>
                        <p class="">{{ __('conveying.create.to_date_note') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card mb-4">
        <div class="card-body">
            <h3 class="card-title h4 text-color">{{ __('conveying.create.vehicle_title') }}</h3>
            <div class="form-group">
                <label for="vehicle" class="h5">{{ __('conveying.create.vehicle') }}</label>
                <select class="form-select" name="vehicle_id" id="vehicle" onchange="changeVehicle(this)" required>
                    <option value="">{{ __('conveying.create.select_vehicle') }}</option>
                    @foreach ($vehicles as $vehicle)
                    <option class="px-2" @if(old('vehicle_id')==$vehicle['id']) selected @endif value="{{ $vehicle['id'] }}">{{ $vehicle->mark . ' ' . $vehicle->model . ' ' . $vehicle->version }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <h3 class="card-title h4 text-color">{{ __('conveying.create.delivery_title') }}</h3>
            <div class="row">
                <div class="col-2 col-md-1 position-relative">
                    <span class="text-center position-absolute top-35 width-80">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="26">
                            <path fill="#696cff" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm32 224c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z" />
                        </svg>
                    </span>
                </div>
                <div class="col-10 col-md-11">
                    <p class="card-text text-size">
                        {{ __('conveying.create.delivery_paragraph') }}
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="card mb-4">
        <div class="card-body">
            <h3 class="card-title h4 text-color">{{ __('conveying.create.departure_contact_title') }}</h3>
            <div class="row">
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="first-name" class="h5">{{ __('conveying.create.first_name') }}</label>
                        <input class="form-control" type="text" name="departure_contact_first_name" value="{{ old('departure_contact_first_name') }}" id="first-name" placeholder="{{ __('conveying.create.first_name') }}" required minlength="2" maxlength="255">
                    </div>
                </div>
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="last-name" class="h5">{{ __('conveying.create.last_name') }}</label>
                        <input class="form-control" type="text" name="departure_contact_last_name" value="{{ old('departure_contact_last_name') }}" id="last-name" placeholder="{{ __('conveying.create.last_name') }}" required minlength="2" maxlength="255">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="phone" class="h5">{{ __('conveying.create.phone') }}</label>
                        <input class="form-control" type="text" name="departure_contact_phone" value="{{ old('departure_contact_phone') }}" id="phone" placeholder="{{ __('conveying.create.phone_placeholder') }}" required minlength="10" maxlength="10">
                    </div>
                </div>
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="email" class="h5">{{ __('conveying.create.email') }}</label>
                        <input class="form-control" type="email" name="departure_contact_email" value="{{ old('departure_contact_email') }}" id="email" placeholder="{{ __('conveying.create.email_placeholder') }}" required minlength="3" maxlength="255">
                    </div>
                </div>
            </div>
            <div class="mt-4">
                <div class="group-form">
                    <label for="address" class="h5">{{ __('conveying.create.address') }}</label>
                    <input hidden class="form-control" type="text" name="departure_address" id="address-departure" value="{{ old('departure_address') }}" placeholder="{{ __('conveying.create.address_placeholder') }}" required minlength="3" maxlength="255">
                    <select class="departure-address-autocomplete form-control" required>
                    </select>
                    <p class="text-warning">{{ __('conveying.create.address_note') }}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="city" class="h5">{{ __('conveying.create.city') }}</label>
                        <input class="form-control" type="text" name="departure_city" value="{{ old('departure_city') }}" id="city-departure" placeholder="{{ __('conveying.create.city') }}" readonly>
                    </div>
                </div>
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="postcode" class="h5">{{ __('conveying.create.postal_code') }}</label>
                        <input class="form-control" type="text" name="departure_postal_code" value="{{ old('departure_postal_code') }}" id="postal-code-departure" placeholder="{{ __('conveying.create.postal_code') }}" readonly>
                    </div>
                </div>
            </div>
            <input type="text" name="departure_lat" id="lat-departure" value="{{ old('departure_lat') }}" hidden>
            <input type="text" name="departure_lng" id="lng-departure" value="{{ old('departure_lng') }}" hidden>
        </div>
    </div>
    <div class="card mb-4">
        <div class="card-body">
            <h3 class="card-title h4 text-color">{{ __('conveying.create.arrival_contact_title') }}</h3>
            <div class="row">
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="first-name" class="h5">{{ __('conveying.create.first_name') }}</label>
                        <input class="form-control" type="text" name="arrival_contact_first_name" value="{{ old('arrival_contact_first_name') }}" id="first-name" placeholder="{{ __('conveying.create.first_name') }}" required minlength="2" maxlength="255">
                    </div>
                </div>
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="last-name" class="h5">{{ __('conveying.create.last_name') }}</label>
                        <input class="form-control" type="text" name="arrival_contact_last_name" value="{{ old('arrival_contact_last_name') }}" id="last-name" placeholder="{{ __('conveying.create.last_name') }}" required minlength="2" maxlength="255">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="phone" class="h5">{{ __('conveying.create.phone') }}</label>
                        <input class="form-control" type="text" name="arrival_contact_phone" value="{{ old('arrival_contact_phone') }}" id="phone" placeholder="{{ __('conveying.create.phone_placeholder') }}" required minlength="10" maxlength="10">
                    </div>
                </div>
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="email" class="h5">{{ __('conveying.create.email') }}</label>
                        <input class="form-control" type="email" name="arrival_contact_email" value="{{ old('arrival_contact_email') }}" id="email" placeholder="{{ __('conveying.create.email_placeholder') }}" required minlength="3" maxlength="255">
                    </div>
                </div>
            </div>
            <div class="mt-4">
                <div class="group-form">
                    <label for="address" class="h5">{{ __('conveying.create.address') }}</label>
                    <input hidden class="form-control" type="text" name="arrival_address" value="{{ old('arrival_address') }}" id="address-arrival" placeholder="{{ __('conveying.create.address_placeholder') }}" required minlength="3" maxlength="255">
                    <select class="arrival-address-autocomplete form-control" required>
                    </select>
                </div>
                <p class="text-warning">{{ __('conveying.create.address_note') }}</p>
            </div>
            <div class="row">
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="city" class="h5">{{ __('conveying.create.city') }}</label>
                        <input class="form-control" type="text" name="arrival_city" value="{{ old('arrival_city') }}" id="city-arrival" placeholder="{{ __('conveying.create.city') }}" readonly>
                    </div>
                </div>
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="postcode" class="h5">{{ __('conveying.create.postal_code') }}</label>
                        <input class="form-control" type="text" name="arrival_postal_code" value="{{ old('arrival_postal_code') }}" id="postal-code-arrival" placeholder="{{ __('conveying.create.postal_code') }}" readonly>
                    </div>
                </div>
            </div>
            <input type="text" name="arrival_lat" id="lat-arrival" value="{{ old('arrival_lat') }}" hidden>
            <input type="text" name="arrival_lng" id="lng-arrival" value="{{ old('arrival_lng') }}" hidden>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body pb-2">
            <h3 class="card-title h4 text-color">{{ __('conveying.create.conveying_options_title') }}</h3>

            <p class="my-4 text-size">
                {{ __('conveying.create.conveying_options_paragraph_first_ligne') }}
                <br>
                {{ __('conveying.create.conveying_options_paragraph_second_ligne') }}
            </p>

            <div class="form-check">
                <input class="form-check-input" type="radio" id="return-conveying" name="coming_conveying_status" value="1" @if (old('coming_conveying_status')=='1' ) checked @endif>
                <label class="form-check-label h5">{{ __('conveying.create.conveying_option_zero') }}</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" id="return-conveying" name="coming_conveying_status" value="2" @if (old('coming_conveying_status')=='2' ) checked @endif>
                <label class="form-check-label h5">{{ __('conveying.create.conveying_option_one') }}</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" id="return-conveying" name="coming_conveying_status" value="0" @if (!old('coming_conveying_status') || old('coming_conveying_status')=='0' ) checked @endif>
                <label class="form-check-label h5">{{ __('conveying.create.conveying_option_two') }}</label>
            </div>
        </div>
    </div>

    <div class="card mb-4" id="return-conveying-card" hidden>
        <div class="card-body">
            <h3 class="card-title h4 text-color">{{ __('conveying.create.coming_arrival_contact_title') }}</h3>
            <div class="row">
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="first-name" class="h5">{{ __('conveying.create.first_name') }}</label>
                        <input class="form-control" type="text" name="coming_contact_first_name" value="{{ old('coming_contact_first_name') }}" id="first-name-return-arrival" placeholder="{{ __('conveying.create.first_name') }}" required minlength="2" maxlength="255" disabled>
                    </div>
                </div>
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="last-name" class="h5">{{ __('conveying.create.last_name') }}</label>
                        <input class="form-control" type="text" name="coming_contact_last_name" value="{{ old('coming_contact_last_name') }}" id="last-name-return-arrival" placeholder="{{ __('conveying.create.last_name') }}" required minlength="2" maxlength="255" disabled>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="phone" class="h5">{{ __('conveying.create.phone') }}</label>
                        <input class="form-control" type="text" name="coming_contact_phone" value="{{ old('coming_contact_phone') }}" id="phone-return-arrival" placeholder="{{ __('conveying.create.phone_placeholder') }}" required minlength="10" maxlength="10" disabled>
                    </div>
                </div>
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="email" class="h5">{{ __('conveying.create.email') }}</label>
                        <input class="form-control" type="email" name="coming_contact_email" value="{{ old('coming_contact_email') }}" id="email-return-arrival" placeholder="{{ __('conveying.create.email_placeholder') }}" required minlength="3" maxlength="255" disabled>
                    </div>
                </div>
            </div>
            <div class="mt-4">
                <div class="group-form">
                    <label for="address" class="h5">{{ __('conveying.create.address') }}</label>
                    <input hidden class="form-control" type="text" name="coming_address" value="{{ old('coming_address') }}" id="address-return-arrival" id="address-arrival" placeholder="{{ __('conveying.create.address_placeholder') }}" required minlength="3" maxlength="255" disabled>
                    <br>
                    <select class="coming-address-autocomplete form-control" style="width: 100%!important">
                    </select>
                </div>
                <p class="text-warning">{{ __('conveying.create.address_note') }}</p>
            </div>
            <div class="row">
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="city" class="h5">{{ __('conveying.create.city') }}</label>
                        <input class="form-control" type="text" name="coming_city" value="{{ old('coming_city') }}" id="city-return-arrival" placeholder="{{ __('conveying.create.city') }}" readonly>
                    </div>
                </div>
                <div class="col-md-6 mt-4">
                    <div class="group-form">
                        <label for="postcode" class="h5">{{ __('conveying.create.postal_code') }}</label>
                        <input class="form-control" type="text" name="coming_postal_code" value="{{ old('coming_postal_code') }}" id="postal-code-return-arrival" placeholder="{{ __('conveying.create.postal_code') }}" readonly>
                    </div>
                </div>
            </div>
            <input type="text" name="coming_lat" id="lat-return-arrival" value="{{ old('coming_lat') }}" hidden>
            <input type="text" name="coming_lng" id="lng-return-arrival" value="{{ old('coming_lng') }}" hidden>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <h3 class="card-title h4 text-color">{{ __('conveying.create.documents_title') }}</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="text-center">
                        @include('client.conveying.old-create.document-illustration')
                    </div>
                    <div class="text-center">
                        <p class="h4">{{ __('conveying.create.vehicle_registration_document') }}</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="text-center">
                        @include('client.conveying.old-create.id-card-illustration')
                    </div>
                    <div class="text-center">
                        <p class="h4">{{ __('conveying.create.identity_document') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="card mb-4">
        <div class="card-body">
            <h3 class="card-title h4 text-color">{{ __('conveying.create.summary_title') }}</h3>
            <div class="my-3">
                <span class="h5">{{ __('conveying.create.summary_vehicle') }} : &nbsp; <strong id="order-summary-vehicle"></strong></span>
            </div>
            <div class="my-3">
                <span class="h5">{{ __('conveying.create.summary_from_date') }} : &nbsp; <strong id="order-summary-date"></strong></span>
            </div>
            <div>
                <hr class="my-4">
                <h3 class="card-title h5 text-color">{{ __('conveying.create.summary_going_conveying_title') }}</h3>

                <div class="row my-0 my-md-3">
                    <div class="col-md-6 my-2 my-md-0">
                        <span class="h5">{{ __('conveying.create.summary_conveying_from') }} : &nbsp; <strong id="order-summary-address-departure"></strong></span>
                    </div>
                    <div class="col-md-6 my-2 my-md-0">
                        <span class="h5">{{ __('conveying.create.summary_conveying_to') }} : &nbsp; <strong id="order-summary-address-arrival"></strong></span>
                    </div>
                </div>
                <div class="my-3">
                    <span class="h5">{{ __('conveying.create.summary_distance') }} : &nbsp; <strong id="order-summary-first-distance"></strong></span>
                </div>
                <div class="my-3">
                    <span class="h5">{{ __('conveying.create.summary_price_excluding_tax') }} : &nbsp; <strong id="order-summary-first-price"></strong></span>
                </div>
            </div>

            <div id="return-conveying-summary" hidden>
                <hr class="my-4">
                <h3 class="card-title h5 text-color">{{ __('conveying.create.summary_coming_conveying_title') }}</h3>

                <div class="row my-0 my-md-3">
                    <div class="col-md-6 my-2 my-md-0">
                        <span class="h5">{{ __('conveying.create.summary_conveying_from') }} : &nbsp; <strong id="order-summary-address-return-departure"></strong></span>
                    </div>
                    <div class="col-md-6 my-2 my-md-0">
                        <span class="h5">{{ __('conveying.create.summary_conveying_to') }} : &nbsp; <strong id="order-summary-address-return-arrival"></strong></span>
                    </div>
                </div>
                <div class="my-3">
                    <span class="h5">{{ __('conveying.create.summary_distance') }} : &nbsp; <strong id="order-summary-return-distance"></strong></span>
                </div>
                <div class="my-3">
                    <span class="h5">{{ __('conveying.create.summary_price_excluding_tax') }} : &nbsp; <strong id="order-summary-return-price"></strong></span>
                </div>
            </div>

            <div>
                <hr class="my-4">
                <div class="my-3">
                    <span class="h5">{{ __('conveying.create.summary_total_price_excluding_tax') }} : &nbsp; <strong id="order-summary-price-excluding-tax"></strong></span>
                </div>
            </div>
        </div>
    </div>


    <div class="card my-5">
        <div class="card-body">
            <div class="text-center my-2">
                <button type="submit" class="btn btn-primary">{{ __('conveying.create.submit') }}</button>
            </div>
        </div>
    </div>

</form>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/i18n/fr.js"></script>

<script>

var features = null;
    var addresses = [];

    $('.departure-address-autocomplete').select2({
        placeholder: 'Adresse',
        minimumInputLength: 3,
        language: "fr",
        ajax: {
            url: 'https://api-adresse.data.gouv.fr/search/',
            data: function (params) {
                return {
                    q: params.term
                };
            },
            processResults: function (response) {
                features = response.features;
                addresses = [];
                for (let i = 0; i < response.features.length; i++) {
                    addresses.push({
                        'id': response.features[i].properties.id,
                        'text': response.features[i].properties.label,
                    })
                }
                return {
                    results: addresses
                };
            },
            cache: true
        }
    }).on("change", function() {
        if(features) {
            const feature = features.find(e => e.properties.id === this.value);
            if(feature) {
                getData(feature.properties.label, 'departure')
            }
        }
    });

    $('.arrival-address-autocomplete').select2({
        placeholder: 'Address',
        minimumInputLength: 3,
        language: "fr",
        ajax: {
            url: 'https://api-adresse.data.gouv.fr/search/',
            data: function (params) {
                return {
                    q: params.term
                };
            },
            processResults: function (response) {
                features = response.features;
                addresses = [];
                for (let i = 0; i < response.features.length; i++) {
                    addresses.push({
                        'id': response.features[i].properties.id,
                        'text': response.features[i].properties.label,
                    })
                }
                return {
                    results: addresses
                };
            },
            cache: true
        }
    }).on("change", function() {
        if(features) {
            const feature = features.find(e => e.properties.id === this.value);
            if(feature) {
                getData(feature.properties.label, 'arrival')
            }
        }
    });

    $('.coming-address-autocomplete').select2({
        placeholder: 'Address',
        minimumInputLength: 3,
        language: "fr",
        ajax: {
            url: 'https://api-adresse.data.gouv.fr/search/',
            data: function (params) {
                return {
                    q: params.term
                };
            },
            processResults: function (response) {
                features = response.features;
                addresses = [];
                for (let i = 0; i < response.features.length; i++) {
                    addresses.push({
                        'id': response.features[i].properties.id,
                        'text': response.features[i].properties.label,
                    })
                }
                return {
                    results: addresses
                };
            },
            cache: true
        }
    }).on("change", function() {
        if(features) {
            const feature = features.find(e => e.properties.id === this.value);
            if(feature) {
                getData(feature.properties.label, 'return-arrival')
            }
        }
    });

</script>
<script>
    async function getData(address, id) {
        const response_api = await getAddress(address);
        if (response_api)
            writeAddressSpecifications(address, response_api, id);
        else return;

        latAndLng = getLatAndLng();
        if (latAndLng.latDeparture && latAndLng.lngDeparture && latAndLng.latArrival && latAndLng.lngArrival) {
            state = document.querySelector('input[name="coming_conveying_status"]:checked').value;
            if(status != '2')
                response = await calculeDistancesAndPrices(latAndLng);

            switch (state) {
                case '1':
                    document.getElementById('order-summary-first-distance').textContent = response.forwardDistance + ' km';
                    document.getElementById('order-summary-first-price').textContent = response.forwardPrice + ' euro';
                    document.getElementById('order-summary-return-distance').textContent = response.forwardDistance + ' km';
                    document.getElementById('order-summary-return-price').textContent = response.forwardPrice + ' euro';
                    document.getElementById('order-summary-price-excluding-tax').textContent = response.forwardPrice*2 + ' euro';
                    break
                case '2':
                    if (latAndLng.returnLatArrival && latAndLng.returnLngArrival) {
                        response = await calculeDistancesAndPrices(latAndLng);
                        document.getElementById('order-summary-first-distance').textContent = response.forwardDistance + ' km';
                        document.getElementById('order-summary-first-price').textContent = response.forwardPrice + ' euro';
                        document.getElementById('order-summary-return-distance').textContent = response.backDistance + ' km';
                        document.getElementById('order-summary-return-price').textContent = response.backPrice + ' euro';
                        priceTotale = parseFloat(Number(response.forwardPrice) + Number(response.backPrice)).toFixed(2);
                        document.getElementById('order-summary-price-excluding-tax').textContent = priceTotale + ' euro';
                    }
                    break
                default:
                    document.getElementById('order-summary-first-distance').textContent = response.forwardDistance + ' km';
                    document.getElementById('order-summary-first-price').textContent = response.forwardPrice + ' euro';
                    document.getElementById('order-summary-price-excluding-tax').textContent = response.forwardPrice + ' euro';
            }
        }
    }

    function changeVehicle(sel) {
        vehicle = sel.options[sel.selectedIndex].text;
        document.getElementById('order-summary-vehicle').textContent = vehicle;
    }

    function changeDate(date) {
        document.getElementById('order-summary-date').textContent = date;
    }


    function writeAddressSpecifications(address, response_api, id) {
        document.getElementById('address-' + id).value = response_api['properties']['label'];
        document.getElementById('city-' + id).value = response_api['properties']['city'];
        document.getElementById('postal-code-' + id).value = response_api['properties']['postcode'];
        document.getElementById('lat-' + id).value = response_api['geometry']['coordinates'][1];
        document.getElementById('lng-' + id).value = response_api['geometry']['coordinates'][0];
        document.getElementById('order-summary-address-' + id).textContent = response_api['properties']['label'];
        if (id == 'arrival')
            document.getElementById('order-summary-address-return-departure').textContent = response_api['properties']['label'];
        else if (id == 'departure') {
            state = document.querySelector('input[name="coming_conveying_status"]:checked').value;
            if (state == 0 || state == 1)
                document.getElementById('order-summary-address-return-arrival').textContent = response_api['properties']['label'];
            else if (state == 2) {
                address = document.getElementById('address-return-arrival').value;
                address = document.getElementById('order-summary-address-return-arrival').textContent = response_api['properties']['label'];
            }
        }
    }

    function getLatAndLng() {
        latDeparture = document.getElementById('lat-departure').value;
        lngDeparture = document.getElementById('lng-departure').value;
        latArrival = document.getElementById('lat-arrival').value;
        lngArrival = document.getElementById('lng-arrival').value;
        returnLatArrival = document.getElementById('lat-return-arrival').value;
        returnLngArrival = document.getElementById('lng-return-arrival').value;
        return {
            'latDeparture': latDeparture
            , 'lngDeparture': lngDeparture
            , 'latArrival': latArrival
            , 'lngArrival': lngArrival
            , 'returnLatArrival': returnLatArrival
            , 'returnLngArrival': returnLngArrival
        }
    }

    function calculeDistancesAndPrices(latAndLng) {
        url = '{{ route('client.address.distance-price') }}' + '/?departure_lat=' + latAndLng.latDeparture + '&departure_lng=' + latAndLng.lngDeparture + '&arrival_lat=' + latAndLng.latArrival + '&arrival_lng=' + latAndLng.lngArrival + '&coming_lat=' + latAndLng.returnLatArrival + '&coming_lng=' + latAndLng.returnLngArrival;
        return getFetchCall(url);
    }

    function getAddress(address) {
        var url = '{{ route('client.address.search')  }}' + '/?address=' + address;
        return getFetchCall(url)
    }

    function getFetchCall(url) {
        return fetch(url).then(function(response) {
            return response.json();
        }).then(function(data) {
            return data;
        }).catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    $(document).ready(function() {

        flatpickr("#from-date", {
            enableTime: false
            , dateFormat: "Y-m-d"
            , minDate: new Date().fp_incr(2)
            , "locale": {
                "firstDayOfWeek": 1
            }
            , "disable": [
                function(date) {
                    return (date.getDay() === 0);
                }
            ]
            , allowInput: true
            , onReady: function(selectedDates, dateStr, instance) {
                let el = instance.element;

                function preventInput(event) {
                    event.preventDefault();
                    return false;
                };
                el.onkeypress = el.onkeydown = el.onkeyup = preventInput; // disable key events
                el.onpaste = preventInput; // disable pasting using mouse context menu

                el.style.caretColor = 'transparent'; // hide blinking cursor
                el.style.cursor = 'pointer'; // override cursor hover type text
                el.style.color = '#585858'; // prevent text color change on focus
                el.style.backgroundColor = '#fff'; // prevent bg color change on focus
            }
        });

        $('input[type=radio]').click(function() {
            if (this.id == "return-conveying") {
                addressDeparture = document.getElementById('address-departure').value;
                addressArrival = document.getElementById('address-arrival').value;
                if (addressDeparture.length > 2)
                    getData(addressDeparture, 'departure')
                else if (addressArrival.length > 2)
                    getData(addressArrival, 'arrival')
                else {
                    document.getElementById('order-summary-address-return-arrival').textContent = null;
                    document.getElementById('order-summary-return-distance').textContent = null;
                }

                if (this.value == 2) {
                    $('#return-conveying-summary').attr({
                        'hidden': false
                    })
                    $('#return-conveying-card').attr({
                        'hidden': false
                    })
                    $('#first-name-return-arrival').attr({
                        'disabled': false
                    });
                    $('#last-name-return-arrival').attr({
                        'disabled': false
                    });
                    $('#phone-return-arrival').attr({
                        'disabled': false
                    });
                    $('#email-return-arrival').attr({
                        'disabled': false
                    });
                    $('#address-return-arrival').attr({
                        'disabled': false
                    });
                    $('#coming-address-autocomplete').attr('required', 'required');

                    addressReturn = document.getElementById('address-return-arrival').value;
                    if (addressReturn.length > 2)
                        getData(addressReturn, 'return-arrival')
                } else if (this.value == 1) {
                    $('#return-conveying-summary').attr({
                        'hidden': false
                    })
                    $('#return-conveying-card').attr({
                        'hidden': true
                    })
                    $('#first-name-return-arrival').attr({
                        'disabled': true
                    });
                    $('#last-name-return-arrival').attr({
                        'disabled': true
                    });
                    $('#phone-return-arrival').attr({
                        'disabled': true
                    });
                    $('#email-return-arrival').attr({
                        'disabled': true
                    });
                    $('#address-return-arrival').attr({
                        'disabled': true
                    });
                    $('#coming-address-autocomplete').removeAttr('required');

                } else {
                    $('#return-conveying-summary').attr({
                        'hidden': true
                    })
                    $('#return-conveying-card').attr({
                        'hidden': true
                    })
                    $('#first-name-return-arrival').attr({
                        'disabled': true
                    });
                    $('#last-name-return-arrival').attr({
                        'disabled': true
                    });
                    $('#phone-return-arrival').attr({
                        'disabled': true
                    });
                    $('#email-return-arrival').attr({
                        'disabled': true
                    });
                    $('#address-return-arrival').attr({
                        'disabled': true
                    });
                    $('#coming-address-autocomplete').removeAttr('required');
                }
            }
        });
    });
</script>

@endsection