@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 onsubmit="getNextStep(event)">
    <div id="test"> 
        @include('client.conveying.create-sections.date')

        @include('client.conveying.create-sections.vehicles', ['vehicles' => $vehicles])

        @include('client.conveying.create-sections.addresses')

        @include('client.conveying.create-sections.conveying-type')
        
        @include('client.conveying.create-sections.coming-address')
    </div>

    @include('client.conveying.create-sections.order-summary')

    @include('client.conveying.create-sections.next-step-button')
</form>

<form action="{{ route('client.conveying.store') }}" method="POST">
    @csrf

    <div id="test-2" style="display: none">
        @include('client.conveying.create-sections.hidden-data')

        @include('client.conveying.create-sections.vehicle-owner')

        @include('client.conveying.create-sections.departure-contact')

        @include('client.conveying.create-sections.arrival-contact')
        
        @include('client.conveying.create-sections.coming-contact')

        @include('client.conveying.create-sections.submit-button')
    </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>

    function chooseSite(id)
    {
        var e = document.getElementById(id + "-sites");
        var site= e.options[e.selectedIndex];

        if(!site.value) {
            return;
        }

        document.getElementById('sites-' + id).value = site.value;

        if(site.value == '-1') {
            document.getElementById(id + '-address-div').style.display = 'block';
            document.getElementById(id + '-address-autocomplete').disabled = false;
        } else {
            document.getElementById(id + '-address-div').style.display = 'none';
            document.getElementById(id + '-address-autocomplete').disabled = true;
            document.getElementById('sites-' + id + '-type').value = site.dataset.type;

            feature = {
                'properties' : {
                    'label' : site.dataset.address,
                    'city' : site.dataset.city,
                    'postcode' : site.dataset.postal_code,
                },
                'geometry' : {
                    'coordinates' : {
                        0 : site.dataset.long,
                        1 : site.dataset.lat,
                    }
                }
            }

            getData(feature, id)
        }

    }

    function ChangeVehicleOwner(value){
        var list, index;
        list = document.getElementsByClassName("vehicle-owner-address-autocomplete");

        if(value){
            document.getElementById('vehicle-owner-first-name').setAttribute('disabled', '');
            document.getElementById('vehicle-owner-last-name').setAttribute('disabled', '');
            document.getElementById('vehicle-owner-phone').setAttribute('disabled', '');
            document.getElementById('vehicle-owner-email').setAttribute('disabled', '');
            for (index = 0; index < list.length; ++index) {
                list[index].setAttribute('disabled', '');
            }
            document.getElementById('vehicle-owner-city').setAttribute('disabled', '');
            document.getElementById('vehicle-owner-postal-code').setAttribute('disabled', '');
        } else {
            document.getElementById('vehicle-owner-first-name').removeAttribute('disabled');
            document.getElementById('vehicle-owner-last-name').removeAttribute('disabled');
            document.getElementById('vehicle-owner-phone').removeAttribute('disabled');
            document.getElementById('vehicle-owner-email').removeAttribute('disabled');
            document.getElementById('vehicle-owner-city').removeAttribute('disabled');
            document.getElementById('vehicle-owner-postal-code').removeAttribute('disabled');
            for (index = 0; index < list.length; ++index) {
                list[index].removeAttribute('disabled');
            }
        }
    }

    function getNextStep(event)
    {
        event.preventDefault()
        const fromDate = document.getElementById('from-date').value;
        const toDate = document.getElementById('date-to').value;
        const distance = document.getElementById('order-summary-first-distance').textContent?.split(" ");

        if(toDate){
            const date1 = new Date(fromDate);
            const date2 = new Date(toDate);

            const diffInHours = (date2 - date1) / (1000 * 60 * 60);
            if(diffInHours < 1){
                alert('La date de retour doit être supérieure à la date de départ');
                return;
            }
            const minDiffRequired = Math.ceil(distance[0] / 50);
            if(diffInHours < minDiffRequired){
                alert("Un décalage de " + minDiffRequired + " heures entre la date de départ et la date de livraison souhaitée au minimum est obligatoire pour un trajet de " + distance[0] + " km.")
                return;
            }
        }

        document.getElementById('test').style.display = "none";
        document.getElementById('test-0').style.display = "none";
        document.getElementById('test-2').style.display = "block";
    }

    function getPreviousStep()
    {
        document.getElementById('test').style.display = "block";
        document.getElementById('test-0').style.display = "block";
        document.getElementById('test-2').style.display = "none";
    }
    $(document).ready(function() {
        $('.js-example-basic-single').select2({
            placeholder: "Choisissez un de vos sites ou parkings",
        });
    });

    $('.vehicle-owner-address-autocomplete').select2({
        placeholder: "Chercher l'adresse du propriétaire du véhicule",
        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) {
                document.getElementById('vehicle-owner-address').value = feature['properties']['label'];
                document.getElementById('vehicle-owner-city').value = feature['properties']['city'];
                document.getElementById('vehicle-owner-postal-code').value = feature['properties']['postcode'];
                document.getElementById('vehicle-owner-lat').value = feature['geometry']['coordinates'][1];
                document.getElementById('vehicle-owner-lng').value = feature['geometry']['coordinates'][0];            
            }
        }
    });

    $('.departure-address-autocomplete').select2({
        placeholder: "Chercher l'adresse de départ",
        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, 'departure')
            }
        }
    });

    $('.arrival-address-autocomplete').select2({
        placeholder: "Chercher l'adresse d'arrivée",
        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, 'arrival')
            }
        }
    });

    $('.coming-address-autocomplete').select2({
        placeholder: "Chercher l'adresse d'arrivée du deuxième convoyage",
        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, 'return-arrival')
            }
        }
    });

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

        latAndLng = getLatAndLng();
        vehicleId = document.getElementById('vehicle-id').value;
        console.log(vehicleId)
        if (latAndLng.latDeparture && latAndLng.lngDeparture && latAndLng.latArrival && latAndLng.lngArrival && vehicleId) {
            state = document.querySelector('input[name="conveying_type"]:checked').value;
            response = await calculeDistancesAndPrices(latAndLng, vehicleId);
            console.log(response)

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

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

        addressDeparture = document.getElementById('address-departure').value;
        if (addressDeparture.length > 2)
                    getData(addressDeparture, 'departure')
    }

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

    function changeToDate(date) {
        document.getElementById('date-to').value = date;
    }


    function writeAddressSpecifications(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(id + '-city').value = response_api['properties']['city'];
        document.getElementById(id + '-postal-code').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'];
        if (id == 'departure' || id == 'arrival') {
            state = document.querySelector('input[name="conveying_type"]: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;
                document.getElementById('order-summary-address-return-arrival').textContent = address;
            }
        }
    }

    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, 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: true
            , dateFormat: "Y-m-d H:i"
            , 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
            }
        });
        flatpickr("#to-date", {
            enableTime: true
            , dateFormat: "Y-m-d H:i"
            , 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") {
                document.getElementById('coming-conveying-status').value = this.value;
                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
                    })
                    $('#return-conveying-contact').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
                    });
                    $('#return-arrival-sites').attr({
                        'disabled': false
                    });
                    $('#return-arrival-sites').attr('required', 'required');
                    $('#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
                    })
                    $('#return-conveying-contact').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
                    });
                    $('#return-arrival-sites').attr({
                        'disabled': true
                    });
                    $('#coming-address-autocomplete').removeAttr('required');
                    $('#return-arrival-sites').removeAttr('required');
                } else {
                    $('#return-conveying-summary').attr({
                        'hidden': true
                    })
                    $('#return-conveying-card').attr({
                        'hidden': true
                    })
                    $('#return-conveying-contact').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
                    });
                    $('#return-arrival-sites').attr({
                        'disabled': true
                    });
                    $('#return-arrival-sites').removeAttr('required');
                    $('#coming-address-autocomplete').removeAttr('required');
                }
            }
        });
    });
</script>

@endsection