{% extends "qommon/forms/widget.html" %}
{% load qommon %}

{% block widget-title %}
<h3>{{widget.title}}</h3>
{% endblock %}

{% block widget-content %}
<input name="{{widget.name}}" id="similar-choice" type="hidden">
<div id="similar-list">
{% with demands=script.close_demands %}
  {% for formdata in demands %}
    {% with formdict=formdata.get_as_dict %}
      <div data-id="{{formdata.id}}" style="display: none;"
             ><span class="marker-counter">{{formdata.counter}}</span>
              <span class="type-probleme">{{ formdict.var_incident }}</span>
              {% if formdict.var_sous_domaine_voirie %}
              <span class="sous-domaine">{{ formdict.var_sous_domaine_voirie|default:"" }}</span>
              {% endif %}
              {% if formdict.var_sous_domaine_proprete %}
              <span class="sous-domaine">{{ formdict.var_sous_domaine_proprete|default:"" }}</span>
              {% endif %}
              {% if formdict.var_sous_domaine_avaloir %}
              <span class="sous-domaine">{{ formdict.var_sous_domaine_avaloir|default:"" }}</span>
              {% endif %}
              {% if formdict.var_sous_domaine_graffiti %}
              <span class="sous-domaine">{{ formdict.var_sous_domaine_graffiti|default:"" }}</span>
              {% endif %}
              {% if formdict.var_sous_domaine_espace_vert %}
              <span class="sous-domaine">{{ formdict.var_sous_domaine_espace_vert|default:"" }}</span>
              {% endif %}
              {% if formdict.var_sous_domaine_signalisation %}
              <span class="sous-domaine">{{ formdict.var_sous_domaine_signalisation|default:"" }}</span>
              {% endif %}
              {% if formdict.var_sous_domaine_mobilier_urbain %}
              <span class="sous-domaine">{{ formdict.var_sous_domaine_mobilier_urbain|default:"" }}</span>
              {% endif %}
              <span class="message">{{ formdict.var_numero|default:"" }} {{ formdict.var_voie_reelle }}</span>
              <span class="datetime">Signalé {{ formdata.receipt_time|parse_date|date:"SHORT_DATE_FORMAT" }}</span>
        <a class="plus1" href="#">C'est le même signalement !</a>
      </div>
    {% endwith %}
  {% endfor %}
{% endwith %}
</div>
<script>
$('#similar-list a.plus1').click(function() {
  $('#similar-choice').val($(this).parents('[data-id]').data('id'));
  $('button[name=submit]').click();
  return false;
}); 

  if ($('.similar-map').length) {
    var geojsonMarkerOptions = {
      radius: 8,
      fillColor: "#ff2000",
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8
    };
    $(document).on('wcs:maps-ready', function() {
      $('.qommon-map').each(function() {
        var $map_widget = $(this);
        var map = $map_widget[0].leaflet_map;
        var geojson_url = $('#similar').data('geojson-url');
        var geo_json = null;

        $(map).on('zoomend moveend', function() {
          var similar_list = $('#similar-list');
          similar_list.find('> div').hide();
          map.eachLayer(function(layer){
            if (layer instanceof L.Marker && map.getBounds().contains(layer.getLatLng())) {
              if (layer.feature && layer.feature.properties.id) {
                similar_list.find('[data-id="' + layer.feature.properties.id + '"]').show();
                return;
              }
            }
          });
        });

        if (geojson_data) {
          var geo_json = L.geoJson(geojson_data,
            {
              pointToLayer: function (feature, latlng) {
                // test : #292E48, #cc5428
		// marker on the map
                var markerStyles = "background-color:" + feature.properties.color + "; font-size: 80%;";
		// marker in list of reporting
                $('div[data-id="' + feature.properties.id + '"] .marker-counter').css('background-color',feature.properties.color);
                marker = L.divIcon({
                                    iconAnchor: [0, 0],
                                    popupAnchor: [5, -45],
                                    html: '<span style="' + markerStyles + '"><i class="leaflet-marker-icon ' +
                                        '" style="color: white; font-family: inherit; font-weight: bold;' +
                                        '">' + feature.properties.counter + '</i></span>'
                                   });
                return L.marker(latlng, {icon: marker});
              }
            });
          map.fitBounds(geo_json.getBounds(), {maxZoom: 18});
          geo_json.addTo(map);
          $(map).trigger('moveend');
        }
      });
    });
  }

</script>
<style>
#similar-list > div {
  position: relative;
  min-height: 3em;
  border: 2px solid #ccc;
  border-radius: 1ex;
  padding: 1ex;
  padding-left: 3em;
  margin-bottom: 1em; }
  #similar-list > div .marker-counter {
    /*background: #2A2E49;*/
    color: white;
    display: inline-block;
    width: 2em;
    height: 2em;
    border-radius: 100%;
    text-align: center;
    font-weight: bold;
    line-height: 2em;
    position: absolute;
    left: 1ex; }
  #similar-list > div .datetime,
  #similar-list > div .type-probleme,
  #similar-list > div .message {
    display: block; }
  #similar-list > div .datetime {
    color: #666;
    font-size: 80%; }
</style>
{% endblock %}

