@extends('backend.layouts.app')

@section('content')
    <h2 class="title">現状マップ</h2>
{{--    <div><span id="current_location"></span>～「経由地：{{ $params->takeover_address }}」～「目的地：{{ $params->delivery_address }}」</div>--}}
    <div id="map"></div>
    <div class="center-submit">
        <input type="button" value="戻る" onclick='location.href="{{ route("backend.{$department}.forwarding_request.index", $return_params) }}"'>
    </div>
@endsection

@section('page_css')
    <style>
        #map {
            width: 100%;
            height: 700px;
        }
        #content_box #map_distance {
            color: #ff9933;
            font-size: 16px;
            padding-left: 5px;
            font-weight: bold;
        }
        #content_box img {
            width: 25px;
            vertical-align: bottom;
        }
        #content_box p {
            text-align: left;
        }
        .position_text p {
            max-width: 200px;
            word-break: break-all;
        }
        .position_text p:first-child {
            margin-bottom: 5px;
        }
        .position_text strong {
            font-weight: bold;
        }
    </style>
@endsection

@section('page_js')
    <script>
        let map, infoWindowA, infoWindowB, currentInfoWindow, markerA,  markerB, markerCurrent, drag_pos, posA = null, posB = null, posC = null, takeover_name, delivery_name;
        $(document).ready(function () {
            getFirstAddress("{{ $params->takeover_address }}");
            delivery_name = "{{ (($params->delivery_shed == config('const.forwarding_shed_code.other') || $params->delivery_shed == config('const.forwarding_shed_code.partner')) ? $params->delivery_shed_etc : config('const.forwarding_shed.'.$params->delivery_shed)) }}";
            takeover_name = "{{ (($params->takeover_shed == config('const.takeover_shed_code.other') || $params->takeover_shed == config('const.takeover_shed_code.partner')) ? $params->takeover_shed_etc : config('const.takeover_shed.'.$params->takeover_shed)) }}";
            getSecondAddress("{{ $params->delivery_address }}");
            getCurrentAddress();
            @if(empty($params->takeover_address) && empty($params->delivery_address))
                getFirstAddress("福岡県八女市室岡３７７−１０");
                takeover_name = "八女本社"
            @endif
        });
        function getFirstAddress(address1)
        {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode( { 'address': address1}, function(results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();

                    posA = {lat: latitude, lng: longitude};
                    initMap();

                } else if(status == google.maps.GeocoderStatus.ZERO_RESULTS) {
                    alert('有効なアドレスを入力してください。');
                }
            });
        }
        function getSecondAddress(address2)
        {
            var geocoder = new google.maps.Geocoder();

            geocoder.geocode( { 'address': address2}, function(results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();

                    posB = {lat: latitude, lng: longitude};
                    initMap();

                } else if(status == google.maps.GeocoderStatus.ZERO_RESULTS) {
                    alert('有効なアドレスを入力してください。');
                }
            });
        }

        let intervalLoop = 0;
        setInterval(getCurrentAddress, 1000 * 10);
        function getCurrentAddress()
        {
            $.ajax({
                type: 'post',
                url: "{{ route("backend.{$department}.forwarding_request.get_position") }}",
                data: {
                    id:"{{ $params->id }}",
                    _token: "{{ csrf_token() }}",
                },
                success: function(result) {
                    if(result.result_code == 'success') {
                        posC = {lat: (parseFloat(result.lat)), lng: (parseFloat(result.lng)) };
                        if(intervalLoop) {
                            drawMarkC();
                        } else {
                            initMap();
                        }
                        intervalLoop++;
                    } else {
                        if(posA) {
                            posC = posA;
                            if(intervalLoop) {
                                drawMarkC();
                            } else {
                                initMap();
                            }
                            intervalLoop++;
                        } else {
                            clearInterval(getCurrentAddress);
                        }
                    }
                }
            });
        }
        /**
         * A customized popup on the map.
         */
        function initMap() {
            if(posA) {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: posA,
                    zoom: 10
                });
            } else if(posB) {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: posB,
                    zoom: 10
                });
            } else {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: {
                        lat: -34.397,
                        lng: 150.644
                    },
                    zoom: 2
                });
            }

            markerB = new google.maps.Marker({
                map: map,
                icon:{
                    url:"{{ asset("assets/backend/img/destination.png") }}",
                    labelOrigin:{x:20, y:-10}
                }
            });
            markerA = new google.maps.Marker({
                map: map,
            });
            markerCurrent = new google.maps.Marker({
                map: map
            });
            infoWindowA = new google.maps.InfoWindow;
            infoWindowB = new google.maps.InfoWindow;
            currentInfoWindow = new google.maps.InfoWindow;
            if(posA) {
                // Try HTML5 geolocation.
                map.setCenter(posA);
                map.setZoom(2);
                //Put markers on the place
                const contentA = '<div class="position_text"><p><strong>引取先</strong>：'+takeover_name+'</p><p>'+"{{ $params->takeOverPostCode() }}{{ $params->takeover_address }}"+'</p></div>';
                infoWindowA.setContent(contentA);
                markerA.setPosition(posA);
                markerA.setVisible(true);
                markerA.addListener('click', function() {
                    infoWindowA.open({map, anchor:markerA, maxWidth:100});
                });
            }

            if(posB) {
                markerB.setPosition(posB, );
                markerB.setVisible(true);
                const contentB = '<div class="position_text"><p><strong>納車先</strong>：'+delivery_name+'</p><p>'+"{{ $params->deliveryPostCode() }}{{ $params->delivery_address }}"+'</p></div>';
                infoWindowB.setContent(contentB);
                markerB.addListener('click', function() {
                    infoWindowB.open({map, anchor:markerB, maxWidth: 100});
                });
            }
            drawMarkC(true);
            drawMarkerLine();
        }
        function drawMarkC(first = false) {
            if(posC && posB) {
                var origin1 = new google.maps.LatLng(posC.lat, posC.lng);
                var geocoder = new google.maps.Geocoder();
                var destinationB = new google.maps.LatLng(posB.lat, posB.lng);

                var service = new google.maps.DistanceMatrixService();
                service.getDistanceMatrix(
                    {
                        origins: [origin1],
                        destinations: [destinationB],
                        travelMode: 'DRIVING',
                        avoidHighways: true,
                        avoidTolls: true,
                    }, function(response, status) {
                        if (status === 'OK') {
                            markerCurrent.setPosition(posC, );
                            markerCurrent.setVisible(true);
                            console.log(response.rows);
                            if(response && response.rows[0] && response.rows[0].elements[0] && response.rows[0].elements[0].duration) {
                                const contentString = '<div id="content_box"><div><img src="{{ asset("assets/backend/img/car.png") }}"/><span id="map_distance">'+response.rows[0].elements[0].duration.text+'</span></div><p>'+response.rows[0].elements[0].distance.text+'</p></div>'
                                currentInfoWindow.setContent(contentString);
                                markerCurrent.addListener("click", () => {
                                    currentInfoWindow.open({
                                        anchor:markerCurrent,
                                        map,
                                        shouldFocus:false
                                    }) ;
                                });
                                markerCurrent.setLabel('');
                                markerCurrent.setIcon({
                                    url:"",
                                });
                                google.maps.event.trigger(markerCurrent, 'click');
                            }
                        }
                    });
            }
            setTimeout(function () {
                $("#content_box").parent().parent().next().remove();
            }, 700);
        }

        function drawMarkerLine() {
            if(posA && posB && posB!=posA) {
                drawDriveLine(posA, posB);
            } else if(posC && posB) {
                drawDriveLine(posC, posB)
            } else if(posC && posA) {
                drawDriveLine(posC, posA)
            }
            /*
            let lineResult = true;
            if(posC && posA) {
                lineResult = drawDriveLine(posC, posA)
            }
            if(posC && posB) {
                lineResult &= drawDriveLine(posC, posB)
            }
            if(!posC && posA && posB && posB!=posA) {
                drawDriveLine(posA, posB);
            }
            * */
        }
        function drawDriveLine(position1, position2)
        {
            let result = false;
            var directionsService = new google.maps.DirectionsService();
            var directionsRenderer1 = new google.maps.DirectionsRenderer({
                map: map,
                suppressMarkers: true
            });
            var directionsRenderer2 = new google.maps.DirectionsRenderer({
                map: map,
                suppressMarkers: true,
                polylineOptions: {
                    strokeColor: "gray"
                }
            });
            directionsService.route({
                    origin: position1,
                    destination: position2,
                    travelMode: 'DRIVING',
                    provideRouteAlternatives: true
                },
                function(response, status) {
                    if (status === 'OK') {

                        for (var i = 0, len = response.routes.length; i < len; i++) {
                            if (i === 0) {
                                directionsRenderer1.setDirections(response);
                                directionsRenderer1.setRouteIndex(i);

                            } else {

                                directionsRenderer2.setDirections(response);
                                directionsRenderer2.setRouteIndex(i);
                            }
                        }
                        result = true;
                    } else {
                        window.alert('Directions request failed due to ' + status);
                    }
                });
            return result;
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                'Error: The Geolocation service failed.' :
                'Error: Your browser doesn\'t support geolocation.');
            infoWindow.open(map);
        }

    </script>
@endsection