@extends('layouts.admin')

@section('content')
    <link rel="stylesheet" href="{{ asset('assets/css/route.css') }}">
    <script src="{{ asset('assets/js/jquery-ui.js') }}"></script>

    <section class="pc-container">
        <div class="pc-content">
            <div class="page-header pb-0">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item">
                                    Routes Management
                                </li>
                                <li class="breadcrumb-item">
                                    Routes & Drivers
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="row mt-2">
                                <div class="col-md-3">
                                    <div class="page-header-title">
                                        <h3 class="mb-0">Routes & Drivers</h3>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-text" id="basic-addon3">Route</span>
                                            <select class="form-select" id="routeSelect" data-bs-toggle="tooltip" title="Select route and manage its addresses">
                                                @foreach ($routes as $route)
                                                    <option value="{{ $route->id }}">#{{ $route->routeNumber }} &nbsp; {{ $route->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-text" id="basic-addon3">Sub Route</span>
                                            <select id="subRouteSelect" class="form-select" data-bs-toggle="tooltip" title="Select sub route">
                                                <option value="0" disabled selected>--- Not Selected ---</option>
                                                {{-- Will be filled with JS --}}
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-text" id="basic-addon3">Driver</span>
                                            <select class="form-select" id="driverSelect" data-bs-toggle="tooltip" title="Select driver for this route.">
                                                <option value="0" disabled selected>--- Not Selected ---</option>
                                                @foreach ($drivers as $driver)
                                                    <option value="{{ $driver->id }}">{{ $driver->firstName . ' ' . $driver->lastName }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row pt-0">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body routes-outer">
                            @include('include.flash-message')

                            <div class="row">
                                <div class="col-md-3 px-0">
                                    <div>
                                        @if (is_countable($routes))
                                            <table class="table">
                                                <tr>
                                                    <th>Route/Sub Route</th>
                                                    <th>Driver</th>
                                                </tr>
                                                @foreach ($routes as $route)
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" class="form-check-input input-primary mt-1 address-checkbox cursor-p" value="R-{{ $route->id }}">
                                                            &nbsp;
                                                            <span class="routeEleForMerge">
                                                                #{{ $route->routeNumber }} &nbsp;{{ $route->title }}
                                                            </span>
                                                        </td>
                                                        <td>
                                                            {{ $route->routeDriver ? $route->routeDriver->firstName : '' }}
                                                        </td>
                                                    </tr>
                                                    @if (count($route->subRoutes))
                                                        @foreach ($route->subRoutes as $sub)
                                                            <tr>
                                                                <td>
                                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                    <input type="checkbox" class="form-check-input input-primary mt-1 address-checkbox cursor-p" value="S-{{ $sub->id }}">
                                                                    &nbsp;
                                                                    <span class="routeEleForMerge">
                                                                        {{ $sub->title }}
                                                                    </span>
                                                                </td>
                                                                <td>
                                                                    @isset ($sub->driverDetails)
                                                                        {{ $sub->driverDetails->firstName }}
                                                                    @endisset
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @endif
                                                @endforeach
                                            </table>
                                            <div class="text-center">
                                                <button class="btn btn-primary" onclick="mergeRoutes()" data-bs-toggle="tooltip" title="This will merge selected routes into a new temporary route.">Merge Selected Routes</button>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-9 pe-0">
                                    <div id="map" class="route-index-map route-drivers-map">
                                        {{-- Google API will draw map here --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="{{ asset('assets/js/plugins/choices.min.js') }}"></script>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}" ></script>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        // Set starting location lat, lng
        var latitude = Number('{{ $baseLat }}');
        var longitude = Number('{{ $baseLng }}');

        // Variables for map
        var marker = 0;
        var map = 0;
        var autocomplete;
        var oldRouteDirections = [];
        var routeColor = '#00A86B';
        var markerColor = '#EC5800';
        var routeWeight = 2.5;
        var directionsService = new google.maps.DirectionsService();
        var directionRenderers = [];
        var markersArr = [];
        var markersIndex = 1;
        var markers_map = new Map();
        var infoWindowMap = new Map();
        var address_markers = [];

        const mapOptions = {
            zoom: 14,
            center: { lat: latitude, lng: longitude },
        };

        // Change route for given route id.
        function changeRoute(routeId) {
            if (routeId != null) {
                drawRouteMap($('#routeSelect').val());
                selectDriver(routeId);
            }
        }

        // This function draws map for given route id.
        function drawRouteMap(routeId) {
            var origins;
            var destinations;
            var waypoints;
            var temp = [];
            var waypointLatLong = [];
            var directionsRenderer = new google.maps.DirectionsRenderer();
            var bounds = new google.maps.LatLngBounds();
            var routeMarkers = [];
            var directionRenderers = [];
            var markers = [];
            var positions = [];
            var first_markers = [];
            address_markers = [];

            // Add starting lat,lng to bounds
            let m1 = new google.maps.Marker({
                position: { lat: latitude, lng: longitude },
                map: map,
            });

            markers.push(m1);
            bounds.extend(m1.getPosition());

            var url = "{{ route('get-route-map', ['route' => 'arg1']) }}";
            url = url.replace('arg1', routeId);

            $.ajax({
                type: 'POST',
                url: url,
                success: function(data) {
                    origins = data['origins'];
                    destinations = data['destinations'];
                    waypoints = data['waypoints'];
                    info = data['info'];

                    origins.forEach(function(item) {
                        temp.push(new google.maps.LatLng(item[0], item[1]));
                        waypointLatLong.push([item[0], item[1]]);
                    });

                    origins = temp;

                    temp = [];

                    destinations.forEach(function(item) {
                        temp.push(new google.maps.LatLng(item[0], item[1]));
                    });

                    destinations = temp;

                    var service = new google.maps.DistanceMatrixService();

                    service.getDistanceMatrix(
                    {
                        origins: origins,
                        destinations: destinations,
                        travelMode: 'DRIVING',
                    });

                    let request = {
                        origin: origins[0],
                        destination: destinations[destinations.length - 1],
                        waypoints: waypoints,
                        travelMode: 'DRIVING',
                        optimizeWaypoints: true,
                        provideRouteAlternatives: true,
                    };

                    if (oldRouteDirections.length > 0) {
                        oldRouteDirections.forEach(function(item) {
                            if (item[0] == data['routeNumber']) {
                                item[1].setMap(null);

                                if (item[2].length > 0) {
                                    item[2].forEach(function(mk) {
                                        mk.setMap(null);
                                    });
                                }
                            }
                        });
                    }

                    directionsService.route(request, function(result, status) {
                        if (status == 'OK') {
                            directionsRenderer.setOptions({
                                polylineOptions: {
                                    fillColor: routeColor,
                                    strokeColor: routeColor,
                                    strokeWeight: routeWeight,
                                },
                                preserveViewport: true,
                                suppressMarkers: true
                            });

                            let directionRenderersLen = directionRenderers.length;
                            let showDirectionsFlag = true;
                            let waypointsOrder = result['routes'][0]['waypoint_order'];
                            let waypointsOrderIndex = 0;

                            if (directionRenderersLen > 0) {
                                for (let i = 0; i < directionRenderersLen; i++) {
                                    if (directionRenderers[i][0] == data['routeId']) {
                                        let dR = directionRenderers[i][1];
                                        dR.setMap(null);
                                        dR.setDirections({routes: []});
                                        directionRenderers.splice(i, 1);
                                        showDirectionsFlag = false;
                                        break;
                                    }
                                }
                            }

                            if (showDirectionsFlag == true) {
                                directionRenderers.push([data['routeId'], directionsRenderer, routeColor]);

                                let temp = [];
                                temp = data['destinations'];

                                let infoWindowArr = [];
                                let legs = result['routes'][0]['legs'];

                                for (let i = 0; i < temp.length; i++) {
                                    let pos = legs[i]['end_location'].lat() + ' ' + legs[i]['end_location'].lng();

                                    if (positions[pos]) {
                                        positions[pos].push(i);
                                    } else {
                                        positions[pos] = [i];
                                    }
                                }

                                let label_index = 0;

                                for (const key in positions) {
                                    if (positions.hasOwnProperty(key)) {
                                        const array = positions[key];
                                        const k = `${key}`;
                                        const v = `${array.join(', ')}`;
                                        const [x, y] = k.split(' ');
                                        const v_arr = v.split(',');

                                        let myPin = {
                                            path: 'M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0',
                                            strokeColor: markerColor,
                                            fillColor: markerColor,
                                            fillOpacity: 1,
                                            scale: 0.7
                                        };

                                        let addr_ids = [];
                                        let first_marker_flag = true;

                                        v_arr.forEach((element, index) => {
                                            let i = parseInt(`${element}`);
                                            let marker_id = info[i]['address']['id'];

                                            addr_ids.push(marker_id);
                                            label_index++;

                                            let m = new google.maps.Marker({
                                                position: { lat: Number(x), lng: Number(y) },
                                                map: map,
                                                icon: myPin,
                                                label: {
                                                    text: "" + (label_index),
                                                    fontWeight: "medium",
                                                    color:"white"
                                                },
                                                id: marker_id
                                            });

                                            markers.push(m);
                                            markers_map.set(marker_id, m);
                                            markersArr[markersIndex++] = m;

                                            if (first_marker_flag == true) {
                                                first_markers.push(marker_id);
                                            }

                                            first_marker_flag = false;

                                            bounds.extend(m.getPosition());

                                            let infoContent = '<div class="infoContent fw-medium">';
                                            infoContent += '<div id="info-' + marker_id  + '" class="mb-3 info-div">';
                                            infoContent += '<span class="f-16">' + info[waypointsOrder[waypointsOrderIndex]]['accountId'] + ' ' + info[waypointsOrder[waypointsOrderIndex]]['firstName'] + ' ' + info[waypointsOrder[waypointsOrderIndex]]['lastName'] + '</span>';
                                            infoContent += '<br>';
                                            infoContent += '<div class="text-gray-700">';

                                            if (info[waypointsOrder[waypointsOrderIndex]]['packageTitle']) {
                                                infoContent += info[waypointsOrder[waypointsOrderIndex]]['packageTitle'];
                                                infoContent += '<br>';
                                            }

                                            infoContent += info[waypointsOrder[waypointsOrderIndex]]['phone'];
                                            infoContent += '</div>';
                                            infoContent += '<div class="text-gray-700">';
                                            infoContent += '<div>'+ info[waypointsOrder[waypointsOrderIndex]]['address']['houseNumber'] +'</div>';
                                            infoContent += '<div>'+ info[waypointsOrder[waypointsOrderIndex]]['address']['street'] +'</div>';
                                            infoContent += '<div>'+ info[waypointsOrder[waypointsOrderIndex]]['address']['address'] +'</div>';
                                            infoContent += '</div>';
                                            infoContent += '</div>';

                                            let infowindow = new google.maps.InfoWindow({
                                                content: infoContent,
                                                ariaLabel: 'alias-' + info[waypointsOrder[waypointsOrderIndex]]['firstName'],
                                            });

                                            infoWindowArr.push(infowindow);
                                            waypointsOrderIndex++;

                                            m.addListener("mouseover", () => {
                                                infoWindowArr.forEach(function(x) {
                                                    x.close();
                                                })

                                                infowindow.open({
                                                    anchor: m,
                                                    map,
                                                });
                                            });
                                        });

                                        addr_ids.forEach(function(v) {
                                            address_markers[v] = addr_ids;
                                        });
                                    }
                                }

                                showOnlyMarkers(first_markers);

                                google.maps.event.addListener(map, "click", function(event) {
                                    infowindow.close();
                                });


                                routeMarkers.push([data['routeId'], markers]);

                                if (oldRouteDirections.length > 0) {
                                    let oldRouteDirectionsLength = oldRouteDirections.length;
                                    let oldRouteDirectionsFlag = false;

                                    for (let i = 0; i < oldRouteDirectionsLength; i++) {
                                        if (oldRouteDirections[0][0] == data['routeNumber']) {
                                            oldRouteDirections[0][1] = directionsRenderer;
                                            oldRouteDirections[0][2] = markers;
                                            oldRouteDirectionsFlag = true;
                                            break;
                                        }
                                    }

                                    if (oldRouteDirectionsFlag == false) {
                                        oldRouteDirections.push([data['routeNumber'], directionsRenderer, markers]);
                                    }
                                } else {
                                    oldRouteDirections.push([data['routeNumber'], directionsRenderer, markers]);
                                }

                                directionsRenderer.setMap(map);
                                directionsRenderer.setDirections(result);
                            }

                            map.fitBounds(bounds);
                        }
                    });
                }
            });
        }

        function changeMarkerIcon(mkr) {
            markers_map.forEach(function(v) {
                v.setIcon({
                    path: 'M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0',
                    strokeColor: markerColor,
                    fillColor: markerColor,
                    fillOpacity: 1,
                    scale: 0.7
                });
            });

            mkr.setIcon({
                path: 'M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0',
                strokeColor: markerColor2,
                fillColor: markerColor2,
                fillOpacity: 1,
                scale: 0.7
            });

            map.setCenter(mkr.getPosition());
            map.setZoom(12); // Adjust zoom level as needed
        }

        function showOnlyMarkers(firstMarkers) {
            markers_map.forEach(function(v) {
                v.setMap(null);
            });

            firstMarkers.forEach(function(v) {
                let mk = markers_map.get(v);

                if (mk) {
                    mk.setMap(map);
                } else {
                    console.log(`Marker with ID ${id} not found.`);
                }
            });
        }

        function highlightMarker(id) {
            // Hide all markers at same location.
            let target = address_markers[id];

            target.forEach(function(v) {
                let mk = markers_map.get(v);

                if (mk) {
                    mk.setMap(null);
                }

                $('#info-'+v).addClass('d-none');
            })

            // Show given marker.
            id = parseInt(id)
            let mk = markers_map.get(id);

            if (mk) {
                mk.setMap(map);
                changeMarkerIcon(mk);
            } else {
                console.log(`Marker with ID ${id} not found.`);
            }
        }


        // Reset map to starting location without any route directions.
        function resetMap() {
            map = new google.maps.Map(document.getElementById("map"), mapOptions);

            marker = new google.maps.Marker({
                position: { lat: latitude, lng: longitude },
                map: map,
                label: {text: 'O', color: "white"},
            });
        }

        function details()
        {
            var url = "{{ route('route-details', ['route' => 'arg1']) }}";

            url = url.replace('arg1', $('#routeSelect').val());

            location.href = url;
        }

        // Hide address order div and show main route div
        function returnToRoutes() {
            resetMap();
            changeRoute($(this).val());
        }

        function selectDriver(routeId) {
            var url = "{{ route('get-route-driver', ['route' => 'arg1']) }}";

            url = url.replace('arg1', routeId);

            $.ajax({
                type: 'POST',
                url: url,
                success: function(data){
                    if (data > 0) {
                        $('#driverSelect').val(data);
                    } else {
                        $('#driverSelect').val(0);
                    }
                }
            });
        }

        // Change route
        $('#routeSelect').on('change', function() {
            resetMap();

            changeRoute($(this).val());
        });

        // Change Driver
        $('#driverSelect').on('change', function() {
            var url = "{{ route('change-route-driver', ['route' => 'arg1', 'driver' => 'arg3', 'subRoute' => 'arg2']) }}";

            url = url.replace('arg1', $('#routeSelect').val());
            url = url.replace('arg3', $('#driverSelect').val());
            url = url.replace('arg2', $('#subRouteSelect').val());

            $.ajax({
                type: 'POST',
                url: url,
                success: function(data) {
                    if (data == 'done') {
                        location.reload();
                    }
                }
            });
        });


        // Fetch sub routes on route change. And then fill in sub route select.
        $('#routeSelect').on('change', function() {
            var url = "{{ route('fetch-sub-routes', ['routeId' => 'arg1']) }}";

            url = url.replace('arg1', $('#routeSelect').val());

            $.ajax({
                type: 'POST',
                url: url,
                success: function(data){
                    data = JSON.parse(data);

                    if (data.length > 0) {
                        let a = $('#subRouteSelect');

                        data.forEach(function(x) {
                            let b = '<option value="' + x.id + '">' + x.title + '</option>';

                            a.append(b);
                        });
                    }
                }
            });
        });

        function mergeRoutes() {
            let selectedRoutes = [];

            $('.routeEleForMerge').each(function(index, ele) {
                let temp = $(ele).prev()[0];

                if (temp.checked == true) {
                    selectedRoutes.push($(temp).val());
                }
            });

            var url = "{{ route('merge-routes', ['routes' => 'arg1']) }}";

            url = url.replace('arg1', selectedRoutes);

            $.ajax({
                type: 'POST',
                url: url,
                success: function(data){
                    location.href = '{{ route("routes") }}';
                }
            });
        }

        $(document).ready(function() {
            resetMap();
            changeRoute($('#routeSelect').val());
        });
    </script>
@endsection