<% include _header %>

<script>
    function initMap() {           
        console.log('<%= currentUser.dispName() %>');
        const source = { lat: <%= pointA.latitude %>, lng: <%= pointA.longitude %> };
        //const source = { lat:  -35.314075, lng: 149.108093};
        const dist = { lat: <%= pointB.latitude %>, lng: <%= pointB.longitude %> };
         // The location of Uluru
        // const thisClinic = { lat: <%= pointB.latitude %>, lng: <%= pointB.longitude %> };
            myOptions = {
                zoom: 7,
                center: dist
            },
            map = new google.maps.Map(document.getElementById('map'), myOptions),
            // Instantiate a directions service.
            directionsService = new google.maps.DirectionsService,
            directionsDisplay = new google.maps.DirectionsRenderer({
                map: map
            }),               
            new google.maps.Marker({
                position: dist,                    
                title: '<%= clinic.clinicName () %>',                    
                map: map
            }),                
            new google.maps.Marker({
                position: source,
                icon: "https://img.icons8.com/external-flatart-icons-flat-flatarticons/64/000000/external-location-business-and-teamwork-flatart-icons-flat-flatarticons.png",                   
                title: '<%= currentUser.dispName() %>',                    
                map: map
            });
            https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
        // get route from A to B
        calculateAndDisplayRoute(directionsService, directionsDisplay, source, dist);
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix(
        {
            origins: [source],
            destinations: [dist],
            travelMode: 'DRIVING',
            // transitOptions: TransitOptions,
            // drivingOptions: DrivingOptions,
            // unitSystem: UnitSystem,
            avoidHighways: false,
            avoidTolls: false,
        }, callback);
        function callback(response, status) {
            document.getElementById('distance').innerText = response['rows'][0].elements[0].distance.text; 
            document.getElementById('duration').innerText = response['rows'][0].elements[0].duration.text;
         
        }
    }
    function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
        directionsService.route({
            origin: pointA,
            destination: pointB,
            travelMode: google.maps.TravelMode.DRIVING
        }, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });
    } 
</script>

<div class="row">

    <div class="col-sm-12">
        <h1>Booking Confirmation</h1>
        <h2>You are all set to see a doctor,
             <%= currentUser.dispName() %>.</h2>
        <br>
    </div>

</div>

<div class="row">

    <div class="col-sm-9">
            
        <p>You have now successfully joined the queue at:</p>
        <table class="table">
            <tr>
                <td>
                    <br><b>
                        <%= clinic.clinicName() %>
                    </b>
                    <br>
                    <%= clinic.clinicAddress() %>
                        <%= clinic.clinicPostcode() %>
                            <br>Phone: <%= clinic.clinicPhone() %>
                </td>
                <td width="75%">
                    <div id="map"></div>
                </td>
            </tr>

        </table>

        <p>Your wait time is approximately <b>
                <%= clinic.approxWait() %> hrs
            </b>.
            Please aim to arrive by <b>
                <%= etaTime %>
            </b>. </p>
        <p>Total distance        
        <span id="distance"> </span> 
        <p>Total duration 
        <span id="duration"> </span> 
        <p>You can manage your queue position by clicking on the button below.</p>

        <p>
        <form action="#" method="post">
            <input name="clinicID" type="hidden" value="<%= clinic._id %>">
            <input type="submit" value="Manage My Queue Position" class="btn btn-primary">
        </form>
        </p> 
    </div>

    <div class="col-sm-3">
        <nav class="nav flex-column">        
            <a class="nav-link menu" href="/user-profile">Patient Profile</a>
            <a class="nav-link menu" href="/chat/<%= clinicUsername %>">Chat with Clinic</a>
            <a class="nav-link menu" href="#">Manage Queue</a>
        </nav>
    </div>

</div>












<% include _footer %>
