  <div class="modal fade" id="form_client_modal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document" style="min-width: 80%">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><%= t("activerecord.models.case") %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <%= form_with(model: @case, url: site_monitoring_save_case_path(params[:device_alert_id]), html: {data: {remote: "false"}}) do |form| %>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link btn fuse-ripple-ready active show" id="position-tab" data-toggle="tab" href="#position-tab-pane" role="tab" aria-controls="position-tab-pane" aria-selected="true" aria-expanded="true"><%= _("Position") %></a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn fuse-ripple-ready" id="general-tab" data-toggle="tab" href="#general-tab-pane" role="tab" aria-controls="general-tab-pane" aria-expanded="false" aria-selected="false"><%= _("Case info") %></a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn fuse-ripple-ready" id="protocol-tab" data-toggle="tab" href="#protocol-tab-pane" role="tab" aria-controls="protocol-tab-pane" aria-selected="false">Protocolo</a>
          </li>
        </ul>

        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade p-6" id="general-tab-pane" aria-labelledby="general-tab">
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :date %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.date_field :date %>
                </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">
                  <%= form.text_area :description %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :cases_status %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.select(:state, options_from_collection_for_select(CasesStatus.all, 'id', 'status_name'), { prompt: 'Seleccionar'} ) %>
                </div>
              </div>
            </div>
          </div>
          <div role="tabp5anel" class="tab-pane fade p-6" id="protocol-tab-pane" aria-labelledby="protocol-tab">
            <% type_alarm = @event.position.type_alarm %>
            <%= @event.device.type_alerts.includes(:hardware_event).where(hardware_events: {type_command: type_alarm}).first.try(:protocol) %>
          </div>
          <div role="tabp5anel" class="tab-pane fade p-6 active show" id="position-tab-pane" aria-labelledby="position-tab">
            <div id="accordion_now" role="tablist">
              <div class="card">
                <div class="card-header" role="tab" id="headingOne">
                  <h5 class="mb-0">
                    <a data-toggle="collapse" href="#general_now_map_vehicle" aria-expanded="true"
                       aria-controls="collapseOne">
                      Map
                    </a>
                  </h5>
                </div>

                <div id="general_now_map_vehicle" class="collapse show" role="tabpanel" aria-labelledby="headingOne"
                     data-parent="#accordion_now">
                  <div class="card-block">
                    <div id="vehicle-detail-map" class="map" style="height: 300px;">

                    </div>
                  </div>
                </div>
              </div>
              <div class="card">
                <div class="card-header" role="tab" id="headingTwo">
                  <h5 class="mb-0">
                    <a class="collapsed" data-toggle="collapse" href="#general_now_vehicle" aria-expanded="false"
                       aria-controls="collapseTwo">
                      General
                    </a>
                  </h5>
                </div>
                <div id="general_now_vehicle" class="collapse" role="tabpanel" aria-labelledby="headingTwo"
                     data-parent="#accordion_now">
                  <% device = @event.device %>
                  <% vehicle = Vehicle.find_by(tc_device_id: device.id) %>
                  <% position = @event.position %>
                  <%= render 'row_position', title: 'Serial/IMEI', value: device.uniqueid %>
                  <%= render 'row_position', title: _("Vechicle Name"), value: vehicle.try(:name) %>
                  <%= render 'row_position', title: _("Group"), value: vehicle.group.name %>
                  <%= render 'row_position', title: _("Phone"), value: device.phone %>
                  <%= render 'row_position', title: 'Lat/Lon', value:  "#{position.latitude} / #{position.longitude}" %>
                  <%= render 'row_position', title: _("Alert type"), value:  "#{type_alarm}" %>
                  <%= render 'row_position', title: _("Alert date"), value:  "#{position.devicetime}" %>
                </div>
              </div>
              <div class="card-block">
              </div>
            </div>
            <script>
                function initMap(){
                    var googleLayerRoadmap=new ol.layer.Tile({
                        title: "Google Road Map",
                        type: 'base',
                        visible: true,
                        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: false,
                        source: new ol.source.OSM(),
                    });

                    let map_detail = new ol.Map({
                        target: 'vehicle-detail-map',
                        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,
                        })
                    });


                    let layerSwitcher2 = new ol.control.LayerSwitcher({
                        tipLabel: 'Leyenda'
                    });
                    map_detail.addControl(layerSwitcher2);

                    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',
                            //color: 'red',
                            src: '/assets/' + 'images/<%= vehicle.marker_url %>'
                        })),
                        text: new ol.style.Text({
                            text: "<%= vehicle.name %>",
                            overflow: true,
                            fill: new ol.style.Fill({
                                color: Traccar.Style.mapGeofenceTextColor
                            }),
                            stroke: new ol.style.Stroke({
                                color: Traccar.Style.mapTextStrokeColor,
                                width: Traccar.Style.mapTextStrokeWidth
                            }),
                            font: Traccar.Style.mapTextFont
                        })

                    }));
                    marker.device_id = <%= device.id %>;
                    markerVectorLayer = new ol.layer.Vector({
                        source: new ol.source.Vector({
                            features: []
                        }),
                    });
                    markerVectorLayer.getSource().addFeature(marker);

                    let vectorSource = new ol.source.Vector({
                        features: [marker]
                    });
                    let markerVectorLayerMapDetails = new ol.layer.Vector({
                        source: vectorSource,
                    });

                    map_detail.addLayer(markerVectorLayerMapDetails);
                    map_detail.getView().fit(markerVectorLayerMapDetails.getSource().getExtent());
                }

                setTimeout("initMap();", 200);

            </script>
          </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-filter btn btn-light btn-sm fuse-ripple-ready" data-dismiss="modal"><%= t("utils.cancel_button") %></button>
        <button type="submit" class="btn btn-sm btn-send"><%= t("utils.send_button") %></button>
      </div>
      <% end %>
    </div>
  </div>
</div>
