Embed

<div class="trip-calculator" id="trip-calculator">
  <div class="tc-container">
    <h2>🚖 Calculate Trip Cost</h2>

    <form class="tc-form">
      <div class="tc-form-group">
        <label for="tc-origin">Pickup Address:</label>
        <input type="text" id="tc-origin" name="origin" required>
      </div>

      <div class="tc-form-group">
        <label for="tc-destination">Dropoff Address:</label>
        <input type="text" id="tc-destination" name="destination" required>
      </div>

      <div class="tc-actions">
        <button type="submit">Calculate Cost</button>
        <button type="button" data-action="reset">Reset</button>
        <button type="button" onclick="window.location.href='https://miateleport.com/reserva'">Book Ride</button>
      </div>
    </form>

    <div id="tc-result" class="tc-result"></div>
    <div class="tc-disclaimer">
      Disclaimer: This estimated cost is based solely on the information entered by the customer and may vary depending on distance, travel time, traffic conditions, weather events, or unforeseen circumstances during the trip.
    </div>
  </div>
</div>

<style>
/* ——— Estilos scopeados ——— */
.trip-calculator{font-family:"Segoe UI",Roboto,Arial,sans-serif}
.trip-calculator .tc-container{
  background:#fff;border-radius:16px;padding:30px;max-width:600px;margin:40px auto;
  box-shadow:0 6px 18px rgba(0,0,0,.15)
}
.trip-calculator h2{margin:0 0 25px;text-align:center;font:700 26px/1.2 "Segoe UI",Roboto,Arial}
.trip-calculator .tc-form-group{margin-bottom:20px;position:relative}
.trip-calculator label{display:block;margin-bottom:6px;font-weight:600;color:#333}
.trip-calculator input[type="text"]{
  width:100%;padding:12px 14px;border:1px solid #ccc;border-radius:8px;font-size:15px;
  transition:box-shadow .2s,border-color .2s
}
.trip-calculator input[type="text"]:focus{
  border-color:#A5FF70;outline:0;box-shadow:0 0 6px rgba(165,255,112,.6)
}
.trip-calculator .tc-actions{display:flex;gap:12px;justify-content:space-between;margin-top:25px}
.trip-calculator .tc-actions button{
  flex:1;background:linear-gradient(135deg,#000,#333);color:#A5FF70;border:0;border-radius:8px;
  padding:12px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s
}
.trip-calculator .tc-actions button:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.trip-calculator .tc-result{
  margin-top:25px;padding:16px;background:#f1f3f5;border-left:4px solid #A5FF70;border-radius:8px;
  font-size:17px;font-weight:500;color:#222
}
.trip-calculator .tc-disclaimer{margin-top:20px;font-size:13px;color:#555;line-height:1.4;text-align:justify}

/* ——— Autocomplete (scopeado) ——— */
.trip-calculator .tc-autocomplete-list{
  position:absolute;top:100%;left:0;right:0;z-index:9999;background:#fff;border:1px solid #ddd;
  border-radius:10px;margin-top:6px;box-shadow:0 8px 20px rgba(0,0,0,.12);max-height:240px;overflow:auto
}
.trip-calculator .tc-autocomplete-item{padding:10px 12px;cursor:pointer}
.trip-calculator .tc-autocomplete-item:hover{background:#f5f7f9}
</style>

<script>
/* ——— Lógica aislada para que no choque con tu sitio ——— */
(function(){
  const root = document.getElementById('trip-calculator');
  if(!root) return;

  const form = root.querySelector('.tc-form');
  const origin = root.querySelector('#tc-origin');
  const destination = root.querySelector('#tc-destination');
  const resultEl = root.querySelector('#tc-result');

  // Autocomplete con Nominatim (scopeado al widget)
  function attachAutocomplete(input){
    let controller;
    input.addEventListener('input', async function(){
      const value = this.value.trim();
      closeLists();
      if(!value) return;

      const list = document.createElement('div');
      list.className = 'tc-autocomplete-list';
      this.parentNode.appendChild(list);

      try{
        if(controller) controller.abort();
        controller = new AbortController();
        const resp = await fetch(
          'https://nominatim.openstreetmap.org/search?format=json&q=' + encodeURIComponent(value),
          {signal: controller.signal, headers:{'Accept':'application/json'}}
        );
        const data = await resp.json();
        (data||[]).slice(0,7).forEach(row=>{
          const item = document.createElement('div');
          item.className = 'tc-autocomplete-item';
          item.textContent = row.display_name;
          item.addEventListener('click',()=>{
            input.value = row.display_name;
            closeLists();
          });
          list.appendChild(item);
        });
      }catch(e){ /* ignore abort */ }
    });
  }
  function closeLists(){
    root.querySelectorAll('.tc-autocomplete-list').forEach(n=>n.remove());
  }
  document.addEventListener('click', (e)=>{ if(!root.contains(e.target)) closeLists(); });

  attachAutocomplete(origin);
  attachAutocomplete(destination);

  // Submit → calcula distancia y costo
  form.addEventListener('submit', async (e)=>{
    e.preventDefault();
    resultEl.textContent = 'Calculating...';

    const geocode = async (q)=>{
      const r = await fetch('https://nominatim.openstreetmap.org/search?format=json&q=' + encodeURIComponent(q));
      const j = await r.json();
      return j[0] ? {lat:j[0].lat, lon:j[0].lon} : null;
    };

    const [o, d] = await Promise.all([geocode(origin.value), geocode(destination.value)]);
    if(!o || !d){ resultEl.textContent = 'Error: Could not geocode one or both addresses.'; return; }

    const r = await fetch(`https://router.project-osrm.org/route/v1/driving/${o.lon},${o.lat};${d.lon},${d.lat}?overview=false`);
    const j = await r.json();
    if(!j.routes || !j.routes[0]){ resultEl.textContent = 'Error computing route.'; return; }

    const miles = j.routes[0].distance / 1609.34;
    const costPerMile = 1.69;
    const total = miles * costPerMile;

    resultEl.innerHTML = `📍 Distance: <strong>${miles.toFixed(2)} miles</strong><br>💲 Total Cost: <strong>$${total.toFixed(2)}</strong>`;
  });

  // Reset
  root.querySelector('[data-action="reset"]').addEventListener('click', ()=>{
    origin.value=''; destination.value=''; resultEl.innerHTML=''; closeLists();
  });
})();
</script>