<div class="modal fade" id="form_geofence_modal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><%= t("activerecord.models.geofence") %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <%= form_with(model: @geofence, remote: true) do |form| %>


        <div style="width: 100%; height: 400px;" id="map-edit-geofence"></div>

        <div class="field">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.label :name %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= @geofence.name %>
            </div>
          </div>
        </div>
        <div class="field">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.label :description %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
             <%= @geofence.description %>
            </div>
          </div>
        </div>
        <div style="display:none;" class="field">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.label :area %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.text_area :area, id: "geofence_area" %>
            </div>
          </div>
        </div>
        <div class="row form-errors">
          <div class="col-md-12 col-xs-12 col-sm-12 px-7">
            <ul></ul>
          </div>
        </div>
        <div class="modal-footer">
          <%= render "shared/loading" %>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      <% end %>
    </div>
  </div>
</div>
<script>

    var googleLayerRoadmap = new ol.layer.Tile({
        title: "Google Road Map",
        type: 'base',
        visible: false,
        source: new ol.source.TileImage({url: 'https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}'}),
    });

    var googleLayerHybrid = new ol.layer.Tile({
        title: "Google Satellite & Roads",
        type: 'base',
        visible: false,
        source: new ol.source.TileImage({url: 'https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}'}),
    });

    var googleLayerHybrid2 = new ol.layer.Tile({
        title: "Google Terrain & Roads",
        type: 'base',
        visible: false,
        source: new ol.source.TileImage({url: 'https://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}'}),
    });

    var osmLayer = new ol.layer.Tile({
        title: "Open Street Map",
        type: 'base',
        visible: true,
        source: new ol.source.OSM(),
    });

    var geofenceVectorLayerEditGeofence = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: []
        }),
    });
    var mapEditGeofence;
    var typeSelect = document.getElementById('type');
    var draw; // global so we can remove it later


    function addInteraction() {
        var value = typeSelect.value;
        if (value !== 'None') {
            draw = new ol.interaction.Draw({
                source: geofenceVectorLayerEditGeofence.getSource(),
                type: typeSelect.value
            });
            mapEditGeofence.addInteraction(draw);
        }

        draw.on('drawstart', function () {
            geofenceVectorLayerEditGeofence.getSource().clear();
        });

        draw.on('drawend', function (evt) {
            let feature = evt.feature;
            let geometry = feature.getGeometry();

            let wkt = geometryToWkt(mapEditGeofence.getView().getProjection(), geometry);
            $("#geofence_area").html(wkt);

            feature = new ol.Feature(wktToGeometry(mapEditGeofence.getView(), wkt));
            geofenceVectorLayerEditGeofence.getSource().addFeature(feature);
            mapEditGeofence.getView().fit(geofenceVectorLayerEditGeofence.getSource().getExtent());
        });
    }

    function initEditMapGeofence() {
        mapEditGeofence = new ol.Map({
            target: 'map-edit-geofence',
            layers: [
                new ol.layer.Group({
                    'title': 'Base maps',
                    layers: [
                        googleLayerHybrid,
                        googleLayerHybrid2,
                        googleLayerRoadmap,
                        osmLayer
                    ]
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([-72, 4]),
                zoom: 6,
                minZoom: 0,
                maxZoom: 19,
            })
        });

        mapEditGeofence.addLayer(geofenceVectorLayerEditGeofence);

        var layerSwitcherEditGeofence = new ol.control.LayerSwitcher({
            tipLabel: 'Leyenda'
        });
        mapEditGeofence.addControl(layerSwitcherEditGeofence);
        let wkt = "<%= @geofence.area %>";

        let feature = new ol.Feature(wktToGeometry(mapEditGeofence.getView(), wkt));
        let attributes = <%= @geofence.attributes["attributes"].blank? ? "{}" : @geofence.attributes["attributes"].gsub!('"', "'").html_safe %>;
        feature.setStyle(geofenceStyle('<%= @geofence.name %>', attributes ? attributes.color : null));
        feature.geofence_id = <%= @geofence.id %>;

        geofenceVectorLayerEditGeofence.getSource().addFeature(feature);

        <% if !params[:data].blank? %>
        let data = JSON.parse(atob("<%= params[:data] %>"));
        let vehicle = data.vehicle;
        let position = data.last_position;
        let marker_url = vehicle.marker_url;
        let marker = new ol.Feature({
            geometry: new ol.geom.Point(
                ol.proj.fromLonLat([position.longitude, position.latitude])
            ),
        });

        marker.setStyle(new ol.style.Style({
            image: new ol.style.Icon(({
                crossOrigin: 'anonymous',
                src: '/assets/' + marker_url,
            })),
        }));
        geofenceVectorLayerEditGeofence.getSource().addFeature(marker);
        <% end %>

        mapEditGeofence.getView().fit(geofenceVectorLayerEditGeofence.getSource().getExtent());

    }

    setTimeout("initEditMapGeofence()", 500);


    hideLoadingImg();

    $('#form_geofence_modal').on("hidden.bs.modal", function () {
        showLoadingImg();
        $.get("<%= params[:url_refresh].blank? ? geofences_path : params[:url_refresh] %>.js?<%= request.query_parameters.to_query %>", function () {
            hideLoadingImg();
            loadHideColumnSelectorTable();
        });
    });

    $(".btn.btn-send").click(function () {
        showLoadingImg();
    });
</script>
