{% extends 'main/dashboard.html' %}


{% load static %}
{% block content %}
         

{% load crispy_forms_tags %} 



<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>



<style>

.leaflet-container {
  height: 500px;
  width: 100% s
  max-width: 100%;
  max-height: 100%;
}
</style>

<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw.css" />
<script src="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw-src.js"></script>





<div class="container-xxl flex-grow-1 container-p-y">
  <h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">Mapamentu /</span> <a href="{% url 'mapa:grupubambu' %}">Dados Grupu Pre - Fabrica</a> / <span class="text-muted fw-light">Rejistu Dados </span> 

 
  

    <!-- Button trigger modal -->


<!-- Modal -->

  
  </h4>
              
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">Input Kordinate</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
  
        <form method="get" action="">
  
        <div class="modal-body">
  
       <input type="tex" class="form-control" name="kordinate" placeholder="Prenxe Kordinate">
       <br>
       Nota : <br>Prenxe uluk latitude depois kontinua ho Longetude haketak ho koma (,) <br>
       Exemplu  : -8.556856, 125.560310
       
        </div>
  
  
        <div class="modal-footer">
          <button type="submit" class="btn btn-secondary" data-bs-disxmiss="modal">Rai</buttom>
        </div>
  
      </form>
  
      </div>
    </div>
  </div>



    <div class="row">
      <div class="col-lg-12 mb-4">

                  <div class="col-xxl">
                    <div class="card mb-4">
                      <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="mb-0">
                          
                          Dezenha Mapa</h5>

                          
                          <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" style="float:right;" data-bs-target="#staticBackdrop">
                            <span class="tf-icons bx bx-plus"></span>  Input Kordinate  Manual
                           </button>


                      </div>
                      <div class="card-body">
              
                     
    <div id="mapem" ></div>
					
                            				
                               
               
                      </div>
                    </div>
                  </div>
  </div>

  <div class="col-lg-12 mb-4">

    <div class="col-xxl">
      <div class="card mb-4">
        <div class="card-header d-flex align-items-center justify-content-between">
          <h5 class="mb-0">Prenxe Formulariu</h5>
          <small class="text-muted float-end">Kompleta formulariu x</small>
        </div>
        <div class="card-body">


          {% crispy forms %}


        </div>
      </div>
    </div>


</div>
  
</div>
  
    

<script>
  
  var map 
  //Kondisaun ba interface mapa husi kada user sira


{% if kordinate == "mamuk" %}
map = L.map('mapem').setView([-8.556856, 125.560310], 8);
{% else %}
map = L.map('mapem').setView([{{kordinate}}], 8);
{% endif %}





    var basemaps = {
  OpenStreetMap: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
           maxZoom: 20,
    layers: 'TOPO-WMS'
  }),

  GoogleSatelite: L.tileLayer.wms('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
           maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
  }),

};

L.control.layers(basemaps, {}, {collapsed: false}).addTo(map);

basemaps.OpenStreetMap.addTo(map);

  //kontrol husi leaflet draw
    
     // Hamos Dados zona ne'ebe iha ba iha mapa


{% if kordinate == "mamuk" %}

{% else %}

var marker;
marker = new L.marker([{{kordinate}}]).addTo(map).bindPopup("localizasaun");
map.addLayer(marker);

{% endif %}


     


     
// Initialise the FeatureGroup to store editable layers
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

var options = {
position: 'topleft',
draw: {
  polygon: {
    allowIntersection: false, // Restricts shapes to simple polygons
    drawError: {
      color: '#e1e100', // Color the shape will turn when intersects
      message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
    },
    shapeOptions: {
      color: '#97009c'
    }
  },
  polyline: {
    shapeOptions: {
      color: '#f357a1',
      weight: 10
        }
  },
  // disable toolbar item by setting it to false
  polyline: false,
  circle: false, // Turns off this drawing tool
  polygon: false,
  marker: true,
  rectangle: false,
circlemarker: false,
},
edit: {
  featureGroup: editableLayers, //REQUIRED!!
  remove: false
}
};

// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw(options);
map.addControl(drawControl);

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

map.on('draw:created', function(e) {
var type = e.layerType,
  layer = e.layer;

if (type === 'polyline') {
  
} else if ( type === 'polygon') {
    var koko = layer.getLatLngs();
    document.getElementById("kordinate_area").value = koko;
    alert(koko);
} else if (type === 'marker') {

 

  var koko = layer.getLatLng();
  alert("Ita Bo'ot hili localizasaun " + koko);
  document.getElementById("kordinate_centru").value = koko;


{% if kordinate == "mamuk" %}
{% else %}
map.removeLayer(marker)
{% endif %}




     


     


}
else if (type === 'circle') 
{layer.bindPopup('A circle!');}
 else if (type === 'rectangle') 
{layer.bindPopup('A rectangle!');}


editableLayers.addLayer(layer);

});



L.Control.RemoveAll = L.Control.extend(
{
  options:
  {
      position: 'topright',
  },
  onAdd: function (map) {




      var controlDiv = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
      L.DomEvent
          .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
          .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
      .addListener(controlDiv, 'click', function () {
          editableLayers.clearLayers();
          document.getElementById("kordinate_area").value = "";
          document.getElementById("kordinate_centru").value = "";
          map.removeLayer(marker)

      });

      var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
      controlUI.title = 'Remove All Polygons';
      controlUI.href = '#';
      return controlDiv;
  }
});
var removeAllControl = new L.Control.RemoveAll();
map.addControl(removeAllControl);





  </script>
        
                                    
              

                    
{% endblock content %}


               
              

