@extends('client/layouts/contentNavbarLayout')

@section('title')
{{ __('client.update_conveying') }}
@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">{{ __('client.update_conveying') }}</h2>
@include('client.responses.messages')
<form action="{{ route('client.conveying.update') }}" 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 mt-5">
                <div class="col-md-12">
                    <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="{{ $departure['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>
        </div>
    </div>
    <div class="card mb-4">
        <div class="card-body">
            <h3 class="card-title h4 text-color">{{ __('conveying.create.departure_contact_title') }}</h3>
            <input type="number" name="departure_id" value="{{ $departure['id'] }}" hidden>
            <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="{{ $departure['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="{{ $departure['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="{{ $departure['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="{{ $departure['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="{{ $departure['departure_address'] }}" placeholder="{{ __('conveying.create.address_placeholder') }}" required minlength="3" maxlength="255">
                    <select class="departure-address-autocomplete form-control" required>
                        <option value="0" selected>{{ $departure['departure_address'] }}</option>
                    </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="{{ $departure['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="{{ $departure['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="{{ $departure['departure_lat'] }}" hidden>
            <input type="text" name="departure_lng" id="lng-departure" value="{{ $departure['departure_long'] }}" 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="{{ $departure['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="{{ $departure['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="{{ $departure['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="{{ $departure['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="{{ $departure['arrival_address'] }}" id="address-arrival" placeholder="{{ __('conveying.create.address_placeholder') }}" required minlength="3" maxlength="255">
                    <select class="arrival-address-autocomplete form-control" required>
                        <option value="0" selected>{{ $departure['arrival_address'] }}</option>
                    </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="{{ $departure['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="{{ $departure['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="{{ $departure['arrival_lat'] }}" hidden>
            <input type="text" name="arrival_lng" id="lng-arrival" value="{{ $departure['arrival_long'] }}" hidden>
        </div>
    </div>

    @if($arrival)
    <div class="card mb-4" id="return-conveying-card">
        <div class="card-body">
            <h3 class="card-title h4 text-color">{{ __('conveying.create.coming_arrival_contact_title') }}</h3>
            <input type="number" id="coming-id" name="coming_id" value="{{ $arrival['id'] }}" hidden>
            <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="{{ $arrival['arrival_contact_first_name'] }}" id="first-name-return-arrival" 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="coming_contact_last_name" value="{{ $arrival['arrival_contact_last_name'] }}" id="last-name-return-arrival" 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="coming_contact_phone" value="{{ $arrival['arrival_contact_phone'] }}" id="phone-return-arrival" 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="coming_contact_email" value="{{ $arrival['arrival_contact_email'] }}" id="email-return-arrival" 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="coming_address" value="{{ $arrival['arrival_address'] }}" id="address-return-arrival" id="address-arrival" placeholder="{{ __('conveying.create.address_placeholder') }}" required minlength="3" maxlength="255">
                    <br>
                    <select class="coming-address-autocomplete form-control" style="width: 100%!important" required>
                        <option value="0" selected>{{ $arrival['arrival_address'] }}</option>
                    </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="{{ $arrival['arrival_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="{{ $arrival['arrival_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="{{ $arrival['arrival_lat'] }}" hidden>
            <input type="text" name="coming_lng" id="lng-return-arrival" value="{{ $arrival['arrival_long'] }}" hidden>
        </div>
    </div>
    @else
    <input type="number" id="coming-id" value="0" hidden>
    <input type="text" id="lat-return-arrival" hidden>
    <input type="text" id="lng-return-arrival" hidden>
    @endif

    <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">{{ $departure['vehicle_mark'] . $departure['vehicle_model'] . $departure['vehicle_version'] }}</strong></span>
                <input type="number" id="vehicle-id" value="{{ $departure['vehicle_id'] }}" hidden>
            </div>
            <div class="my-3">
                <span class="h5">{{ __('conveying.create.summary_from_date') }} : &nbsp; <strong id="order-summary-date">{{ Carbon::parse($departure['from_date'])->format('Y-m-d') }}</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">{{ $departure['departure_address'] }}</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">{{ $departure['arrival_address'] }}</strong></span>
                    </div>
                </div>
                <div class="my-3">
                    <span class="h5">{{ __('conveying.create.summary_distance') }} : &nbsp; <strong id="order-summary-first-distance">{{ $departure['distance'] }}</strong></span>
                </div>
                <div class="my-3">
                    <span class="h5">{{ __('conveying.create.summary_price_excluding_tax') }} : &nbsp; <strong id="order-summary-first-price">{{ $departure['price_ht'] }}</strong></span>
                </div>
            </div>

            @if ($arrival)
            <div id="return-conveying-summary">
                <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">{{ $arrival['departure_address'] }}</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">{{ $arrival['arrival_address'] }}</strong></span>
                    </div>
                </div>
                <div class="my-3">
                    <span class="h5">{{ __('conveying.create.summary_distance') }} : &nbsp; <strong id="order-summary-return-distance">{{ $arrival['distance'] }}</strong></span>
                </div>
                <div class="my-3">
                    <span class="h5">{{ __('conveying.create.summary_price_excluding_tax') }} : &nbsp; <strong id="order-summary-return-price">{{ $arrival['price_ht'] }}</strong></span>
                </div>
            </div>
            @endif

            <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">@if($arrival) {{ $departure['price_ht'] + $arrival['price_ht'] }} @else {{ $departure['price_ht'] }} @endif</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">{{ __('client.update_order') }}</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);
        coming_state = document.getElementById('coming-id').value != 0 ? 1 : null;
        if (response_api)
            writeAddressSpecifications(address, response_api, id, coming_state);
        else return;

        latAndLng = getLatAndLng(coming_state);

        if (latAndLng.latDeparture && latAndLng.lngDeparture && latAndLng.latArrival && latAndLng.lngArrival) {
            vehicleId = document.getElementById('vehicle-id').value;
            response = await calculeDistancesAndPrices(latAndLng, vehicleId);

            if (coming_state) {
                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';
            } else {
                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 changeDate(date) {
        document.getElementById('order-summary-date').textContent = date;
    }


    function writeAddressSpecifications(address, response_api, id, coming_state) {
        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' && coming_state)
            document.getElementById('order-summary-address-return-departure').textContent = response_api['properties']['label'];
        else if (id == 'departure' && coming_state) {
            address = document.getElementById('address-return-arrival').value;
            address = document.getElementById('order-summary-address-return-arrival').textContent = response_api['properties']['label'];
        }
    }

    function getLatAndLng(coming_state) {
        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, vehicleId) {
        url = '{{ route('client.address.distance-price', ":id") }}' + '/?departure_lat=' + latAndLng.latDeparture + '&departure_lng=' + latAndLng.lngDeparture + '&arrival_lat=' + latAndLng.latArrival + '&arrival_lng=' + latAndLng.lngArrival + '&coming_lat=' + latAndLng.returnLatArrival + '&coming_lng=' + latAndLng.returnLngArrival;
        url = url.replace(':id', vehicleId);
        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
            }
        });
    });
</script>

@endsection