
<?php foreach($clientProjects as $project):?>
<div class="card card-body">
    <h6 class="alert alert-success"><?= $project->name ?></h6>
    <div id="map" style="height: 400px;"></div>
</div>


<script>

var geo_lat = <?= $project->geo_lat ?>;
var geo_long = <?= $project->geo_long ?>;
var file_boundary = <?= json_encode($project->boundary_file) ?>; 
// file_boundary should be stored as GeoJSON or an array of coordinates

// Init map
var map = L.map('map').setView([geo_lat, geo_long], 13);

// Add OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);

// Add project marker
L.marker([geo_lat, geo_long]).addTo(map)
    .bindPopup("Project Location")
    .openPopup();

// If you have project boundary (GeoJSON polygon)
if (file_boundary) {
    try {
        var boundaryLayer = L.geoJSON(file_boundary, {
            style: {color: "blue", weight: 2, fillOpacity: 0.1}
        }).addTo(map);
        map.fitBounds(boundaryLayer.getBounds());
    } catch (e) {
        console.error("Invalid boundary data:", e);
    }
}
</script>
<?php endforeach;?>