// Or load as standalone popup via JS

$csFile = __DIR__ . '/limo-booking-plugin/data/company_settings.json';
$cs = file_exists($csFile) ? (json_decode(file_get_contents($csFile), true) ?? []) : [];
$googleKey = $cs['google_api_key'] ?? '';

$psFile = __DIR__ . '/limo-booking-plugin/data/pricing_settings.json';
$ps = file_exists($psFile) ? (json_decode(file_get_contents($psFile), true) ?? []) : [];

$vFile = __DIR__ . '/limo-booking-plugin/data/vehicles.json';
$vehicles = file_exists($vFile) ? (json_decode(file_get_contents($vFile), true) ?? []) : [];
$activeVehicles = array_values(array_filter($vehicles, fn($v) => !array_key_exists('active', $v) || !empty($v['active'])));
?>
<!-- MyNYSUV Price Widget -->
<style>
#mynysuv-widget-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9998;
  background: rgba(212,175,55,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 50px;
  padding: 12px 22px;
  color: #d4af37;
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}
#mynysuv-widget-btn:hover {
  background: rgba(212,175,55,0.25);
  border-color: rgba(212,175,55,0.7);
  transform: translateY(-2px);
}
#mynysuv-widget-btn svg { width:16px; height:16px; }

#mynysuv-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
}
#mynysuv-overlay.open { display: flex; }

#mynysuv-modal {
  width: 860px;
  max-width: 95vw;
  max-height: 90vh;
  background: rgba(212,175,55,0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 360px 1fr;
  box-shadow: 0 32px 80px rgba(0,0,0,0.4);
  animation: modalIn 0.25s ease;
}
@keyframes modalIn {
  from { opacity:0; transform:scale(0.96) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

#mynysuv-form-col {
  padding: 28px 24px;
  border-right: 1px solid rgba(212,175,55,0.15);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  max-height: 90vh;
}

#mynysuv-map-col {
  position: relative;
  min-height: 400px;
  background: rgba(212,175,55,0.04);
  display: flex;
  flex-direction: column;
}

#mynysuv-map {
  flex: 1;
  min-height: 300px;
}

#mynysuv-map-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(212,175,55,0.3);
  font-family: Georgia, serif;
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

.mw-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(212,175,55,0.15);
  border: 1px solid rgba(212,175,55,0.3);
  color: #d4af37;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  z-index: 10;
  transition: all 0.2s;
}
.mw-close:hover { background: rgba(212,175,55,0.3); }

.mw-brand {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: #d4af37;
  margin-bottom: 4px;
}
.mw-brand span { color: rgba(245,241,232,0.85); }
.mw-subtitle {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(212,175,55,0.5);
}

.mw-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(212,175,55,0.6);
  margin-bottom: 5px;
}

.mw-input, .mw-select {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 10px;
  color: rgba(245,241,232,0.9);
  font-family: Georgia, serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
}
.mw-input::placeholder { color: rgba(245,241,232,0.2); }
.mw-input:focus, .mw-select:focus {
  border-color: rgba(212,175,55,0.55);
  background: rgba(255,255,255,0.09);
}
.mw-select option { background: #1a1a1a; color: #f5f1e8; }

.mw-divider {
  display: flex; align-items: center; gap: 10px;
}
.mw-divider-line { flex:1; height:1px; background: rgba(212,175,55,0.12); }
.mw-divider-icon {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.2);
  background: rgba(212,175,55,0.07);
  display: flex; align-items: center; justify-content: center;
  color: rgba(212,175,55,0.5);
  font-size: 12px;
}

.mw-price-box {
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.mw-price-amount {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: #d4af37;
  line-height: 1;
}
.mw-price-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(212,175,55,0.5);
  margin-bottom: 4px;
}
.mw-price-note { font-size: 10px; color: rgba(245,241,232,0.25); margin-top: 3px; }
.mw-price-placeholder { font-size: 12px; color: rgba(245,241,232,0.25); font-style: italic; }
.mw-price-loading { font-size: 12px; color: rgba(212,175,55,0.4); animation: mwpulse 1.2s ease-in-out infinite; }
@keyframes mwpulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

.mw-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mw-meta-item {
  background: rgba(212,175,55,0.05);
  border: 1px solid rgba(212,175,55,0.1);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  color: rgba(245,241,232,0.5);
}
.mw-meta-item strong { color: rgba(245,241,232,0.8); display:block; font-size:13px; font-weight:600; }

.mw-btn-book {
  width: 100%;
  padding: 13px;
  background: #d4af37;
  border: none; border-radius: 10px;
  color: #0a0a0a;
  font-family: Georgia, serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.mw-btn-book:hover { background: #e8c547; transform: translateY(-1px); }
.mw-btn-book:disabled { background: rgba(212,175,55,0.25); color: rgba(10,10,10,0.4); cursor:not-allowed; transform:none; }

.mw-route-info {
  padding: 14px 16px;
  border-top: 1px solid rgba(212,175,55,0.12);
  display: none;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(0,0,0,0.15);
}
.mw-route-info.show { display: flex; }
.mw-route-stat { font-size: 12px; color: rgba(212,175,55,0.5); }
.mw-route-stat strong { color: rgba(245,241,232,0.8); font-size: 13px; display:block; }

@media (max-width: 700px) {
  #mynysuv-modal { grid-template-columns: 1fr; }
  #mynysuv-map-col { min-height: 220px; }
}
</style>

<!-- Trigger Button -->
<button id="mynysuv-widget-btn" onclick="document.getElementById('mynysuv-overlay').classList.add('open')">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
  Get a Price
</button>

<!-- Modal Overlay -->
<div id="mynysuv-overlay" onclick="mwCloseOnBg(event)">
  <div id="mynysuv-modal">

    <!-- Left: Form -->
    <div id="mynysuv-form-col">

      <button class="mw-close" onclick="mwClose()">✕</button>

      <div>
        <div class="mw-brand">My<span>NY</span>SUV</div>
        <div class="mw-subtitle">Instant Price Estimate</div>
      </div>

      <div>
        <div class="mw-label">Pickup Location</div>
        <input type="text" class="mw-input" id="mw-pickup" placeholder="Start typing address..." autocomplete="off" oninput="mwOnChange()" />
      </div>

      <div class="mw-divider">
        <div class="mw-divider-line"></div>
        <div class="mw-divider-icon">↓</div>
        <div class="mw-divider-line"></div>
      </div>

      <div>
        <div class="mw-label">Drop-off Location</div>
        <input type="text" class="mw-input" id="mw-dropoff" placeholder="Enter destination..." autocomplete="off" oninput="mwOnChange()" />
      </div>

      <div>
        <div class="mw-label">Vehicle</div>
        <select class="mw-select" id="mw-vehicle" onchange="mwOnChange()">
                  </select>
      </div>

      <!-- Price Display -->
      <div class="mw-price-box" id="mw-price-box">
        <div id="mw-price-content">
          <div class="mw-price-placeholder">Enter pickup & drop-off<br>for instant estimate</div>
        </div>
      </div>

      <!-- Route Meta -->
      <div class="mw-meta" id="mw-meta" style="display:none">
        <div class="mw-meta-item">Distance<strong id="mw-distance">—</strong></div>
        <div class="mw-meta-item">Duration<strong id="mw-duration">—</strong></div>
        <div class="mw-meta-item">Tolls<strong id="mw-tolls">—</strong></div>
        <div class="mw-meta-item">Vehicle<strong id="mw-vehicle-disp">—</strong></div>
      </div>

      <button class="mw-btn-book" id="mw-book-btn" onclick="mwBookNow()">
        ✦ Book Now
      </button>

      <div style="text-align:center;font-size:10px;color:rgba(212,175,55,0.3);letter-spacing:0.08em">
        No commitment · Instant confirmation
      </div>
    </div>

    <!-- Right: Map -->
    <div id="mynysuv-map-col">
      <div id="mynysuv-map"></div>
      <div id="mynysuv-map-placeholder">
        <div>
          <div style="font-size:32px;margin-bottom:12px;opacity:0.3">🗺</div>
          Enter pickup and drop-off<br>to see your route
        </div>
      </div>
      <div class="mw-route-info" id="mw-route-info"></div>
    </div>

  </div>
</div>

<script>
var mwGoogleKey = null;
var mwCalcTimer = null;
var mwMap = null;
var mwDirections = null;
var mwPickupAC = null;
var mwDropoffAC = null;
var mwCurrentPickup = '';
var mwCurrentDropoff = '';
var mwCurrentPrice = 0;

function mwClose() {
  document.getElementById('mynysuv-overlay').classList.remove('open');
}
function mwCloseOnBg(e) {
  if (e.target === document.getElementById('mynysuv-overlay')) mwClose();
}

function mwOnChange() {
  clearTimeout(mwCalcTimer);
  var p = document.getElementById('mw-pickup').value.trim();
  var d = document.getElementById('mw-dropoff').value.trim();
  if (p.length > 5 && d.length > 5) {
    document.getElementById('mw-price-content').innerHTML = '<div class="mw-price-loading">Calculating your fare...</div>';
    mwCalcTimer = setTimeout(function(){ mwCalculate(p, d); }, 900);
  } else {
    document.getElementById('mw-price-content').innerHTML = '<div class="mw-price-placeholder">Enter pickup & drop-off<br>for instant estimate</div>';
    document.getElementById('mw-meta').style.display = 'none';
  }
}

function mwCalculate(pickup, dropoff) {
  mwCurrentPickup = pickup;
  mwCurrentDropoff = dropoff;
  var vehicle = document.getElementById('mw-vehicle').value;

  fetch('/limo-booking-plugin/admin/bc_distance.php?origin=' + encodeURIComponent(pickup) + '&dest=' + encodeURIComponent(dropoff))
    .then(function(r){ return r.json(); })
    .then(function(d) {
      if (d.ok) {
        var miles = d.distance_miles || 0;
        var mins = d.duration_mins || 0;
        var tolls = d.tolls || 0;

        fetch('/limo-booking-plugin/admin/booking_edit.php?ajax=recalc', {
          method: 'POST',
          headers: {'Content-Type':'application/x-www-form-urlencoded'},
          body: 'pickup=' + encodeURIComponent(pickup) +
                '&dropoff=' + encodeURIComponent(dropoff) +
                '&trip1Vehicle=' + encodeURIComponent(vehicle) +
                '&serviceType=oneway&tolls=' + tolls
        })
        .then(function(r){ return r.json(); })
        .then(function(p) {
          var total = parseFloat(p.total || p.tripPrice || 0);
          mwCurrentPrice = total;
          mwShowPrice(total, miles, mins, tolls, vehicle, d);
          if (mwMap) mwShowRoute(pickup, dropoff);
        })
        .catch(function(){
          mwCurrentPrice = 0;
          mwShowPrice(0, miles, mins, tolls, vehicle, d);
        });

        document.getElementById('mw-distance').textContent = d.distance_text || (miles + ' mi');
        document.getElementById('mw-duration').textContent = d.duration_text || (mins + ' mins');
        document.getElementById('mw-tolls').textContent = tolls > 0 ? '$' + tolls : 'None';
        document.getElementById('mw-vehicle-disp').textContent = vehicle;
        document.getElementById('mw-meta').style.display = 'grid';

        if (mwMap) mwShowRoute(pickup, dropoff);
      } else {
        document.getElementById('mw-price-content').innerHTML = '<div class="mw-price-placeholder">Could not calculate route.<br>Please check addresses.</div>';
      }
    })
    .catch(function(){
      document.getElementById('mw-price-content').innerHTML = '<div class="mw-price-placeholder">Enter pickup & drop-off<br>for instant estimate</div>';
    });
}

function mwShowPrice(total, miles, mins, tolls, vehicle, routeData) {
  if (total > 0) {
    document.getElementById('mw-price-content').innerHTML =
      '<div>' +
        '<div class="mw-price-label">Estimated fare</div>' +
        '<div class="mw-price-amount">$' + total.toFixed(2) + '</div>' +
        '<div class="mw-price-note">' + vehicle + ' · incl. tolls & fees</div>' +
      '</div>';
  } else {
    document.getElementById('mw-price-content').innerHTML =
      '<div class="mw-price-placeholder">Unable to get price.<br>Try booking directly.</div>';
  }
}

function mwShowRoute(pickup, dropoff) {
  if (!mwDirections) return;
  document.getElementById('mynysuv-map-placeholder').style.display = 'none';
  document.getElementById('mynysuv-map').style.display = 'block';
  mwDirections.route({
    origin: pickup,
    destination: dropoff,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(result, status) {
    if (status === 'OK') {
      new google.maps.DirectionsRenderer({ map: mwMap }).setDirections(result);
    }
  });
}

function mwBookNow() {
  var p = document.getElementById('mw-pickup').value.trim();
  var d = document.getElementById('mw-dropoff').value.trim();
  var v = document.getElementById('mw-vehicle').value;
  var params = new URLSearchParams();
  if (p) params.set('pickup', p);
  if (d) params.set('dropoff', d);
  if (v) params.set('vehicle', v);
  window.location.href = '/limo-booking-plugin/customer-booking.php' + (params.toString() ? '?' + params.toString() : '');
}

function mwInitMaps() {
  var mapEl = document.getElementById('mynysuv-map');
  mapEl.style.display = 'none';

  mwMap = new google.maps.Map(mapEl, {
    center: {lat: 40.7128, lng: -74.0060},
    zoom: 10,
    styles: [
      {elementType:'geometry',stylers:[{color:'#1a1a2e'}]},
      {elementType:'labels.text.fill',stylers:[{color:'#d4af37'}]},
      {elementType:'labels.text.stroke',stylers:[{color:'#0a0a0a'}]},
      {featureType:'road',elementType:'geometry',stylers:[{color:'#2a2a4a'}]},
      {featureType:'road.highway',elementType:'geometry',stylers:[{color:'#3d3d6b'}]},
      {featureType:'water',elementType:'geometry',stylers:[{color:'#0d1b2a'}]},
      {featureType:'poi',stylers:[{visibility:'off'}]},
      {featureType:'transit',stylers:[{visibility:'off'}]}
    ],
    disableDefaultUI: false,
    mapTypeControl: false,
    streetViewControl: false,
    fullscreenControl: false
  });

  mwDirections = new google.maps.DirectionsService();

  var acOpts = { fields: ['formatted_address','geometry','name'], types: ['geocode'] };

  mwPickupAC = new google.maps.places.Autocomplete(document.getElementById('mw-pickup'), acOpts);
  mwPickupAC.addListener('place_changed', function() {
    var place = mwPickupAC.getPlace();
    if (place && place.formatted_address) document.getElementById('mw-pickup').value = place.formatted_address;
    mwOnChange();
  });

  mwDropoffAC = new google.maps.places.Autocomplete(document.getElementById('mw-dropoff'), acOpts);
  mwDropoffAC.addListener('place_changed', function() {
    var place = mwDropoffAC.getPlace();
    if (place && place.formatted_address) document.getElementById('mw-dropoff').value = place.formatted_address;
    mwOnChange();
  });
}

(function(){
  if (!mwGoogleKey) return;
  var s = document.createElement('script');
  s.src = 'https://maps.googleapis.com/maps/api/js?key=' + mwGoogleKey + '&libraries=places&callback=mwInitMaps';
  s.async = true; s.defer = true;
  document.head.appendChild(s);
})();
</script>
<!-- End MyNYSUV Price Widget -->