Travel Fee calculator

<!DOCTYPE html>
<html>
<head>
    <title>Call-Out Fee Calculator</title>
    <style>
        .calculator-container {
            font-family: 'Arial', sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            background-color: #f9f9f9;
        }
        .calc-header {
            text-align: center;
            color: #333;
            margin-bottom: 15px;
        }
        .input-group {
            margin-bottom: 15px;
        }
        #address-input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        #map {
            height: 300px;
            width: 100%;
            border-radius: 4px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
        }
        #result-box {
            background-color: #fff;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: none;
        }
        .cost-highlight {
            font-size: 24px;
            font-weight: bold;
            color: #d9534f;
        }
        .credit-highlight {
            font-size: 18px;
            font-weight: bold;
            color: #5cb85c;
        }
    </style>
</head>
<body>

<div class="calculator-container">
    <h2 class="calc-header">Regional Call-Out Calculator</h2>
    <p style="text-align: center; font-size: 14px; color: #555;">Enter your address or click the map to drop a pin. We'll calculate your travel fee and labor credits.</p>
    
    <div class="input-group">
        <input id="address-input" type="text" placeholder="Start typing your address...">
    </div>
    
    <div id="map"></div>
    
    <div id="result-box">
        <h3>Your Call-Out Estimate</h3>
        <p><strong>Estimated Round-Trip Time:</strong> <span id="round-trip-time"></span> minutes</p>
        <p><strong>Call-Out Fee:</strong> $<span id="total-cost" class="cost-highlight"></span></p>
        <p id="labor-credit-text" style="display: none;"><strong>Bonus:</strong> Includes <span id="labor-credit" class="credit-highlight"></span> minutes of on-site labor!</p>
        <p id="surcharge-text" style="display: none; color: #d9534f; font-size: 14px;">*Includes a $<span id="surcharge-amount"></span> travel surcharge for trips exceeding 60 minutes.</p>
    </div>
</div>

<!-- Replace 'YOUR_API_KEY' with your actual Google Maps API key -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<script>
    let map, marker, directionsService;
    const baseAddress = "55-57 Lindsay Noonan Dr, South West Rocks, NSW, Australia";
    
    function initMap() {
        // Center map roughly on South West Rocks
        const swr = { lat: -30.8833, lng: 153.0333 };
        
        map = new google.maps.Map(document.getElementById("map"), {
            zoom: 11,
            center: swr,
        });
        
        marker = new google.maps.Marker({
            map: map,
            draggable: true,
            position: swr
        });

        directionsService = new google.maps.DirectionsService();

        // Autocomplete setup
        const input = document.getElementById("address-input");
        const autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo("bounds", map);

        // When user types an address
        autocomplete.addListener("place_changed", () => {
            const place = autocomplete.getPlace();
            if (!place.geometry || !place.geometry.location) {
                return;
            }
            map.setCenter(place.geometry.location);
            map.setZoom(13);
            marker.setPosition(place.geometry.location);
            calculateFee(place.geometry.location);
        });

        // When user clicks the map to drop a pin
        map.addListener("click", (e) => {
            marker.setPosition(e.latLng);
            calculateFee(e.latLng);
        });

        // When user drags the pin
        marker.addListener("dragend", (e) => {
            calculateFee(e.latLng);
        });
    }

    function calculateFee(destinationLatLng) {
        const request = {
            origin: baseAddress,
            destination: destinationLatLng,
            travelMode: 'DRIVING'
        };

        directionsService.route(request, (result, status) => {
            if (status == 'OK') {
                // Get one-way travel time in seconds, convert to minutes
                const oneWaySeconds = result.routes[0].legs[0].duration.value;
                const oneWayMinutes = Math.ceil(oneWaySeconds / 60);
                const roundTripMinutes = oneWayMinutes * 2;
                
                displayResults(roundTripMinutes);
            } else {
                alert("Could not calculate travel time to this location.");
            }
        });
    }

    function displayResults(roundTripMinutes) {
        const resultBox = document.getElementById("result-box");
        const timeDisplay = document.getElementById("round-trip-time");
        const costDisplay = document.getElementById("total-cost");
        const creditText = document.getElementById("labor-credit-text");
        const creditDisplay = document.getElementById("labor-credit");
        const surchargeText = document.getElementById("surcharge-text");
        const surchargeAmount = document.getElementById("surcharge-amount");

        let totalCost = 150.00;
        let laborCredit = 0;
        let surcharge = 0;

        if (roundTripMinutes <= 60) {
            laborCredit = 60 - roundTripMinutes;
            creditText.style.display = "block";
            creditDisplay.innerText = laborCredit;
            surchargeText.style.display = "none";
        } else {
            surcharge = (roundTripMinutes - 60) * 2;
            totalCost += surcharge;
            creditText.style.display = "none";
            surchargeText.style.display = "block";
            surchargeAmount.innerText = surcharge.toFixed(2);
        }

        timeDisplay.innerText = roundTripMinutes;
        costDisplay.innerText = totalCost.toFixed(2);
        resultBox.style.display = "block";
    }

    // Load the map on page load
    window.onload = initMap;
</script>

</body>
</html>