@extends('v2/fleet/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('styles')
<style>
    .form-check-input {
        border: 1px solid #505054 !important;
    }
    .form-check-input:checked {
        background-color: #0F82EA !important;
        border-color: #0F82EA !important;
    }
    .border-custom-blue {
        border-color: #36317D!important;
    }
    .btn-primary {
        color: #fff;
        background-color: #0F82EA;
        border: 1px solid #0F82EA;
    }
    .btn-primary:hover {
        background-color: #0056b3;
        border: 1px solid #0056b3;
    }

    .bg-primary {
        color: #fff;
        background-color: #0F82EA!important;
        border: 1px solid #0F82EA!important;
    }
    .img-size {
        height: 140px;
        width: 100%;
    }

</style>
@endsection

@section('content')

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

    <div class="row">
        <div class="col-8">
            <div class="card">
                <div class="card-header pb-0">
                    <h2 class="fw-bold h4 text-dark">{{ __('conveying.create.title') }}</h2>
                </div>
        
                @include('client.responses.messages')
        
                    <div class="card-body" id="test"> 
                        @include('v2/fleet.conveyings.create.sections.alert')
        
                        @include('v2/fleet.conveyings.create.sections.vehicles', ['vehicles' => $vehicles])
        
                        @include('v2/fleet.conveyings.create.sections.departure_details')
        
                        @include('v2/fleet.conveyings.create.sections.arrival_details')
                        
                        @include('v2/fleet.conveyings.create.sections.submit-button')

                        <section id="submit-btn">
                            @include('v2/fleet.conveyings.create.sections.hidden-data')
                        </section>
                    </div>
            </div>
        </div>
        <div class="col-4">
            @include('v2/fleet.conveyings.create.sections.order-summary')
        </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>
    window.addEventListener('scroll', function() {
        var card = document.querySelector('.summary-card');
        var scrollPosition = window.scrollY;
        console.log(scrollPosition)
        if (scrollPosition >= 110) {
            card.style.top = '10px';
        } else {
            card.style.top = 110 - scrollPosition + 'px';
        }
    });

    function changeContact(id) {
        const firstName = document.getElementById(id + '-first-name-contact').value;
        const lastName = document.getElementById(id + '-last-name-contact').value;
        document.getElementById('order-summary-contact-' + id).textContent = firstName + ' ' + lastName;
    } 

    function chooseContact(id) {
        var e = document.getElementById(id + "-contact");
        var contact= e.options[e.selectedIndex];

        if(!contact.value) {
            return;
        }

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

        if(contact.value == '-1') {
            document.getElementById(id + '-contact-div').style.display = 'block';
            document.getElementById(id + '-first-name-contact').value = null;
            document.getElementById(id + '-last-name-contact').value = null;
            document.getElementById(id + '-phone-contact').value = null;
            document.getElementById(id + '-email-contact').value = null;
            document.getElementById('order-summary-contact-' + id).textContent = null;
        } else {
            document.getElementById(id + '-contact-div').style.display = 'none';
            document.getElementById('contact-' + id + '-type').value = contact.dataset.type;
            document.getElementById(id + '-first-name-contact').value = contact.dataset.first_name;
            document.getElementById(id + '-last-name-contact').value = contact.dataset.last_name;
            document.getElementById(id + '-phone-contact').value = contact.dataset.phone;
            document.getElementById(id + '-email-contact').value = contact.dataset.email;
            document.getElementById('order-summary-contact-' + id).textContent = contact.text;
            console.log('order-summary-contact-' + id)
            console.log(contact.text)
        }
    }

    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-form').style.display = "none";
            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-form').style.display = "block";
            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')
            }
        }
    });

</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('vehicle-id',vehicleId)
        if (latAndLng.latDeparture && latAndLng.lngDeparture && latAndLng.latArrival && latAndLng.lngArrival && vehicleId) {
            response = await calculeDistancesAndPrices(latAndLng, vehicleId);
            console.log('response', response)
            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('total-price-excluding-tax').value = response.forwardPrice;

        }
    }

    function changeVehicle(sel) {
        vehicle = sel.options[sel.selectedIndex].text;
        vehicle_id = sel.options[sel.selectedIndex].value;
        console.log(vehicle, vehicle_id)
        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('order-summary-to-date').textContent = 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'];
    }

    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;
        return {
            'latDeparture': latDeparture
            , 'lngDeparture': lngDeparture
            , 'latArrival': latArrival
            , 'lngArrival': lngArrival
        }
    }

    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;
        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
            }
        });
    });
</script>

@endsection