 <h3 class="p-2">Forests <span class="float-sm-end">
  <?php if(has_permission('ReddSettings.manageForests')):?>
	<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#forestModal">Add</button>
  <?php endif;?>
	</span>
</h3>
<div class="table-responsive">
	<table class="table table-sm table-striped">
		<thead class="bg-dark text-white" style="font-size:12px;">
			<th>#ID</th>
			<th width="40%">Name</th>
			<th>Classification</th>
			<th>Size<small>(Ha)</small></th>
			<th>Latitude</th>
			<th>Longitude</th>
			<th>Map</th>
			<th></th>
		</thead>
		<tbody class="align-items-center" style="font-size:12px;">
			<?php foreach($forests as $forest):?>
				<tr >
					<td><?= $forest->id; ?></td>
					<td>
						<strong><?= $forest->name; ?></strong>
						<small class="text-muted d-flex"><?= $forest->location_description; ?></small>
					</td>
					<td><?= $forest->classification; ?></td>
					<td><?= $forest->size; ?></td>
					<td><?= $forest->geo_lat; ?></td>
					<td><?= $forest->geo_long ?></td>
					<td>
						<button 
							class="btn btn-sm btn-success" 
							data-bs-toggle="modal" 
							data-bs-target="#mapModal" 
							data-id="<?= $forest->id; ?>" 
							data-lat="<?= $forest->geo_lat; ?>" 
							data-long="<?= $forest->geo_long; ?>" 
							data-boundary='<?= $forest->boundary_file; ?>'>
							<i class="bi bi-map"></i> Map
						</button>
						<!-- Forest Map Modal -->
						<div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
						<div class="modal-dialog modal-lg modal-dialog-centered">
							<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="mapModalLabel">Forest Map</h5>
								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							</div>
							<div class="modal-body p-0">
								<div id="forestMap" style="height: 400px; width: 100%;"></div>
							</div>
							</div>
						</div>
						</div>
						<!-- End Modal !-->
					</td>
					<td>
						<div class="btn-group">
							<button type="button" class="btn btn-sm btn-info rounded-circle me-2 editForest" data-id="<?= $forest->id; ?>"><i class="bi bi-pencil"></i></button>
							<button type="button" class="btn btn-sm btn-danger rounded-circle" onclick="delete_forest(<?= $forest->id ?>, '<?= $forest->name; ?>')"><i class="bi bi-trash"></i></button>
						</div>
					</td>
				</tr>
			<?php endforeach;?>
		</tbody>
	</table>
</div>

<script>
	let forestMap;
let forestLayer;

$('#mapModal').on('shown.bs.modal', function (event) {
  let button = $(event.relatedTarget); // Button that triggered modal
  let lat = button.data('lat');
  let long = button.data('long');
  let boundary = button.data('boundary'); // This is GeoJSON string

  // Initialize Leaflet map if not already
  if (!forestMap) {
    forestMap = L.map('forestMap').setView([lat, long], 10);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap'
    }).addTo(forestMap);
  }

  // Clear previous layers
  if (forestLayer) {
    forestMap.removeLayer(forestLayer);
  }

  // Add marker if no boundary
  if (!boundary) {
    forestLayer = L.marker([lat, long]).addTo(forestMap)
      .bindPopup("Forest Location").openPopup();
    forestMap.setView([lat, long], 12);
  } else {
    try {
      let geojson = JSON.parse(boundary);
      forestLayer = L.geoJSON(geojson).addTo(forestMap);
      forestMap.fitBounds(forestLayer.getBounds());
    } catch (e) {
      console.error("Invalid GeoJSON", e);
    }
  }
});
</script>