<!-- === Distance & Pricing Calculator with Base Fee === -->
<div style="padding:20px; background:#f9f9f9; border:1px solid #ddd; border-radius:8px; max-width:500px; margin:auto;">
  <h3 style="text-align:center;">Instant Distance & Price Calculator</h3>

  <!-- Pickup Input -->
  <label for="pickup">Pickup Address:</label>
  <input id="pickup" type="text" placeholder="Enter pickup address" style="width:100%; padding:8px; margin-bottom:10px;">

  <!-- Drop-off Input -->
  <label for="dropoff">Drop-off Address:</label>
  <input id="dropoff" type="text" placeholder="Enter drop-off address" style="width:100%; padding:8px; margin-bottom:10px;">

  <!-- Calculate Button -->
  <button onclick="calculateDistance()" style="width:100%; padding:10px; background:#007bff; color:#fff; border:none; border-radius:5px; cursor:pointer;">
    Calculate Distance & Price
  </button>

  <!-- Result Area -->
  <div id="result" style="margin-top:15px; font-size:16px; text-align:center;"></div>

  <!-- Book Now -->
  <button id="bookNow" onclick="goToBooking()" style="display:none; margin-top:15px; width:100%; padding:10px; background:#28a745; color:#fff; border:none; border-radius:5px; cursor:pointer;">
    Book Now
  </button>
</div>

<script>
// ===== CONFIGURATION =====
const BASE_PRICE = 80; // Base fee: $80
const RATE_PER_MILE = 2.00; // $2 per mile
const MAX_MILES = 50; // Max distance allowed
const BOOKING_URL = "https://aclasslimo.simplybook.me/v2/"; // Your SimplyBook booking page

let finalPrice = 0;

// === Google Maps Distance Calculation ===
function calculateDistance() {
  const origin = document.getElementById("pickup").value;
  const destination = document.getElementById("dropoff").value;

  if (!origin || !destination) {
    alert("Please enter BOTH pickup and drop-off addresses.");
    return;
  }

  const service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
      origins: [origin],
      destinations: [destination],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.IMPERIAL,
    },
    function (response, status) {
      if (status !== google.maps.DistanceMatrixStatus.OK) {
        alert("Error calculating distance: " + status);
        return;
      }

      const element = response.rows[0].elements[0];
      if (!element || element.status !== "OK") {
        alert("Could not find a route between these locations.");
        return;
      }

      const distanceText = element.distance.text; // e.g. "12.3 mi"
      const miles = parseFloat(distanceText.replace(/[^\d\.]/g, ''));

      if (miles > MAX_MILES) {
        document.getElementById("result").innerHTML = `
          Distance: <b>${miles.toFixed(2)} miles</b><br>
          <span style="color:red;">Sorry, we only service up to ${MAX_MILES} miles.</span>
        `;
        document.getElementById("bookNow").style.display = "none";
        return;
      }

      // Pricing = Base $80 + $2 per mile
      const mileageFee = miles * RATE_PER_MILE;
      finalPrice = BASE_PRICE + mileageFee;

      document.getElementById("result").innerHTML = `
        Distance: <b>${miles.toFixed(2)} miles</b><br>
        Base Fee: $${BASE_PRICE.toFixed(2)}<br>
        Mileage Fee: $${mileageFee.toFixed(2)}<br>
        <hr>
        Total Price: <b>$${finalPrice.toFixed(2)}</b>
      `;

      // Show the Book Now button
      document.getElementById("bookNow").style.display = "block";
    }
  );
}

// === Book Now Redirect ===
function goToBooking() {
  window.location.href = BOOKING_URL;
}
</script>

<!-- ✅ Google Maps API Script with your key -->
<script async defer 
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC_A83OUQ1AFImVWrY06BWKlOhXHOnSbdU">
</script>
