{% extends "base.html" %}
{% block title %}خريطة المزرعة — KFS Smart Farm{% endblock %}
{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
{% endblock %}
{% block content %}
<section class="card">
    <div class="card-head">
        <h2>توزيع رطوبة التربة على عقد المزرعة</h2>
        <span class="legend"><i style="background:#c0392b"></i> جاف <i style="background:#f5a524"></i> متوسط <i style="background:#13787b"></i> رطب</span>
    </div>
    <div id="map" style="height:70vh;border-radius:12px"></div>
</section>
{% endblock %}
{% block scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script>
const map = L.map('map').setView([{{ lat }}, {{ lon }}], 17);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    {maxZoom: 20, attribution: 'Imagery © Esri'}).addTo(map);
const color = v => v == null ? '#888' : v < 30 ? '#c0392b' : v < 55 ? '#f5a524' : '#13787b';
fetch('/api/v1/latest').then(r => r.json()).then(({nodes}) => {
    const heat = [];
    nodes.filter(n => n.lat && n.lon).forEach(n => {
        L.circleMarker([n.lat, n.lon], {radius: 14, color: '#fff', weight: 2, fillColor: color(n.soil_moisture_pct), fillOpacity: .9})
            .addTo(map)
            .bindPopup(`<b>${n.name || n.node_id}</b><br>رطوبة التربة: ${n.soil_moisture_pct ?? '—'}%<br>الحرارة: ${n.air_temp_c ?? '—'} °C<br>${n.online ? '🟢 متصل' : '🔴 غير متصل'}`);
        if (n.soil_moisture_pct != null) heat.push([n.lat, n.lon, 1 - n.soil_moisture_pct / 100]);
    });
    if (heat.length) L.heatLayer(heat, {radius: 45, blur: 30, gradient: {0.2: '#13787b', 0.5: '#f5a524', 0.9: '#c0392b'}}).addTo(map);
});
</script>
{% endblock %}