@extends('app.app')

@section('title') Route Run @endsection
@section('styles')
@endsection
@push('head-scripts')

@section('content')
    <div class="container">
        <h2><i class="fa-solid fa-map-location-dot"></i> Route Run</h2>
        <div class="row">
            <div class="col-lg-8 col-12">
                <div id="map" style="height:80vh" ></div>
            </div>
            <div class="col-lg-4 col-12">
                <div id="main-panel">
                    <div>
                        <div class="mb-2">
                            <b>Start:</b>
                            <select id="start_address" class="form-control dropdown">
                                @foreach ($warehouses as $warehouse)
                                    <option id="start_address_warehouse_{{$loop->index}}" name="start_addresses" value="{{$warehouse->warehouse_address}}">{{$warehouse->warehouse_name}}: {{$warehouse->warehouse_address}}</option>
                                @endforeach
                                @foreach ($pickup_tasks as $pickup_date)
                                @foreach ($pickup_date as $pickup_task)
                                <option id="start_address_{{$loop->index}}" name="start_addresses" value="{{$pickup_task['receiver_address']}}">{{$pickup_task['receiver_address']}}</option>
                                @endforeach
                                @endforeach

                            </select>
                        </div>

                        <div class="mb-4">
                            <b>End:</b>
                            <select id="end_address" class="form-control dropdown">
                                @foreach ($warehouses as $warehouse)
                                    <option id="end_address_warehouse_{{$loop->index}}" name="end_addresses" value="{{$warehouse->warehouse_address}}">{{$warehouse->warehouse_name}}: {{$warehouse->warehouse_address}}</option>
                                @endforeach
                                @foreach ($pickup_tasks as $pickup_date)
                                @foreach ($pickup_date as $pickup_task)
                                <option id="end_address_{{$loop->index}}" name="end_addresses" value="{{$pickup_task['receiver_address']}}">{{$pickup_task['receiver_address']}}</option>
                                @endforeach
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-2">
                            <b>Date:</b>
                            <select id="pickup_date" class="form-control dropdown">
                                @foreach ($pickup_tasks as $pickup_date)
                                <option id="pickup_date_{{$loop->index}}" name="pickup_date" value="{{array_search($pickup_date, $pickup_tasks)}}">{{array_search($pickup_date, $pickup_tasks)}}</option>
                                @endforeach
                            </select>
                        </div>

                        <input type="submit" class="btn btnAddFile" style="width:100%" id="submit_btn" value="See Pickup Route" />
                    </div>
                    <br>
                    <br>
                    <div>
                        @foreach ($pickup_tasks as $pickup_date)
                        @foreach ($pickup_date as $pickup_task)
                        <input type="hidden" id="pickup_order_{{$loop->index}}" name="pickup_orders" value="{{$pickup_task['order_id']}}">
                        <input type="hidden" id="pickup_address_{{$loop->index}}" name="pickup_addresses" value="{{$pickup_task['receiver_address']}}">
                        <input type="hidden" id="pickup_date_{{$loop->index}}" name="pickup_dates" value="{{$pickup_task['pickup_date']}}">
                        @endforeach
                        @endforeach
                    </div>
                    <div id="directions-route"></div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVAjuVd5ARnE_xmdbKnlLTw8nyBnihK6Y&callback=initMap&libraries=places,geometry"></script>
    <script>
        function initMap() {
            const directionsService = new google.maps.DirectionsService();
            const directionsRenderer = new google.maps.DirectionsRenderer();
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 11,
                center: { lat: -36.9026073, lng: 174.7239558 },
            });
            directionsRenderer.setMap(map);
            document.getElementById("submit_btn").addEventListener("click", () => {
                calculateDisplayRoutes(directionsService, directionsRenderer);
            });
        }

        function calculateDisplayRoutes(directionsService, directionsRenderer) {

            var pickup_dates = document.getElementsByName("pickup_dates");
            var pickup_addresses = document.getElementsByName("pickup_addresses");
            const waypts = [];
            // const wayPointId = document.getElementById("waypoints").value;
            for (let i = 0; i < pickup_addresses.length; i++ ) {
                if ( pickup_addresses[i].value !== document.getElementById("start_address").value
                    && pickup_addresses[i].value !== document.getElementById("end_address").value
                    && pickup_dates[i].value ===  document.getElementById("pickup_date").value)
                {
                    waypts.push({
                        location: pickup_addresses[i].value,
                        stopover: true,
                    });
                }
            }
            console.log(document.getElementById("pickup_date").value)
            var pickup_orders = [];
            var pickup_orders_id = document.getElementsByName("pickup_orders");
            for (let i = 0; i < pickup_orders_id.length; i++ ) {
                pickup_orders += pickup_orders_id[i].value;
                console.log("pickup_orders: " + pickup_orders[i]);
            }

            var pickup_dates = [];
            pickup_dates_id = document.getElementsByName("pickup_dates");
            for (let i = 0; i < pickup_dates_id.length; i++ ) {
                pickup_dates += pickup_dates_id[i].value;
                console.log("pickup_dates: " + pickup_dates[i]);
            }

            directionsService.route({
                origin: document.getElementById("start_address").value,
                destination: document.getElementById("end_address").value,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: google.maps.TravelMode.DRIVING,
            },(response, status) => {
                if (status === "OK" && response) {
                    directionsRenderer.setDirections(response);
                    const route = response.routes[0];
                    const summaryPanel = document.getElementById("directions-route");
                    summaryPanel.innerHTML = "";

                    // For each route, display summary information.
                    for (let i = 0; i < route.legs.length; i++) {
                        const routeSegment = i + 1;
                        summaryPanel.innerHTML +=
                        "<b>Route Segment: " + routeSegment + "</b><br>";
                        // summaryPanel.innerHTML += "<b>TM# " + pickup_orders[i] + "</b><br>";
                        // summaryPanel.innerHTML += "<b>Pickup Date " + pickup_dates[i] + "</b><br>";
                        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
                        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
                        summaryPanel.innerHTML +=
                        route.legs[i].distance.text + "<br><br>";
                    }
                } else {
                    window.alert("Directions request failed due to " + status);
                }
            }
        );
    }
    </script>

    @endpush
@endsection