
<style>
:root {
  --danger: #e74c3c;
}
.emergency-card {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  border-left: 5px solid var(--danger);
  transition: transform 0.2s;
}
.emergency-card:hover { transform: translateY(-4px); }
.emergency-card-header {
  background: rgba(231, 76, 60, 0.1);
  padding: 15px;
  border-bottom: 1px solid rgba(231, 76, 60, 0.2);
}
.emergency-card-header h5 {
  margin: 0; color: var(--danger); font-weight: bold;
}
.resident-info { display: flex; align-items: center; margin-bottom: 15px; }
.resident-avatar { width: 55px; height: 55px; border-radius: 50%; margin-right: 15px; }
.resident-details h5 { margin: 0; font-size: 1.1rem; }
.emergency-details p { margin: 5px 0; }
.map-container {
  height: 180px;
  border-radius: 8px;
  background: #4a69bd;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  text-align: center;
}
.emergency-actions { margin-top: 15px; display: flex; gap: 8px; flex-wrap: wrap; }
.btn-action { font-size: 0.85rem; padding: 6px 14px; border-radius: 5px; }
.emergency-map-modal .modal-dialog { max-width: 90%; }
#leafletMap { height: 500px; width: 100%; }
</style>

<div class="container-fluid dashboard-container">
  <div class="row">
    <div class="col-md-12">
      <div class="mb-3">
        <small>Filter Status</small>
        <select class="form-control w-50" id="status">
          <option>--select--</option>
          <option value="Pending" >Pending</option>
          <option value="Responding" >Responding</option>
          <option value="Resolved" >Resolved</option>
        </select>
      </div>
      <div id="emergency_cards"></div>
    </div>
  </div>
</div>

<!-- 📍 Leaflet Map Modal -->
<div class="modal fade emergency-map-modal" id="fullMapModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="fullMapTitle">Emergency Location</h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body p-0">
        <div id="leafletMap"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button class="btn btn-primary" id="getDirections">Get Directions</button>
      </div>
    </div>
  </div>
</div>

<script>
window.mapInstance = window.mapInstance || null;
window.mapMarker = window.mapMarker || null;
window.currentLat = window.currentLat || null;
window.currentLng = window.currentLng || null;

$(document).on('input', '#status', function(){
  let status = $(this).val();
  load_emergency(status);

});
load_emergency();
function load_emergency(status) {
  $.ajax({
    type: "POST",
    url: "query/emergency_query.php",
    data: {
     "loading_emergency": 1,
     "status": status 
     },
    success: function (res) {
      $("#emergency_cards").html(res);
    }
  });
}






// ✅ Handle Update Status Click
$(document).on("click", ".update-status", function () {
  const emergencyId = $(this).data("id");
  const newStatus = $(this).data("status");

  $.ajax({
    url: "query/emergency_query.php",
    type: "POST",
    data: {
      update_status: 1,
      emergency_id: emergencyId,
      emergency_status: newStatus
    },
    success: function (res) {
      swal("Status Updated", "Emergency status changed to " + newStatus, "success");
      load_emergency(); // Reload cards to reflect change
    },
    error: function () {
      swal("Error", "Failed to update emergency status", "error");
    }
  });
});


$(document).on("click", ".view-full-map", function () {
  window.currentLat = parseFloat($(this).data("lat"));
  window.currentLng = parseFloat($(this).data("lng"));
  const name = $(this).data("name");

  $("#fullMapTitle").text(`Emergency Location - ${name}`);
  $("#fullMapModal").modal("show");

  setTimeout(() => initLeafletMap(window.currentLat, window.currentLng, name), 300);
});

function initLeafletMap(lat, lng, name) {
  const location = [lat, lng];

  if (!window.mapInstance) {
    window.mapInstance = L.map("leafletMap").setView(location, 16);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 19,
      attribution: "© OpenStreetMap"
    }).addTo(window.mapInstance);
  } else {
    window.mapInstance.setView(location, 16);
  }

  if (window.mapMarker) {
    window.mapInstance.removeLayer(window.mapMarker);
  }

  window.mapMarker = L.marker(location).addTo(window.mapInstance)
    .bindPopup(`<strong>${name}</strong><br>📍 ${lat.toFixed(5)}, ${lng.toFixed(5)}`)
    .openPopup();
}

// ✅ Directions Button
$("#getDirections").click(function () {
  if (window.currentLat && window.currentLng) {
    window.open(
      `https://www.google.com/maps/dir/?api=1&destination=${window.currentLat},${window.currentLng}`,
      "_blank"
    );
  }
});
</script>