{# empty Twig template #}
{% macro show(label, value, type , id) %}
    <div class="control-group">
        <label class='control-label'>{{label|trans}}</label>
        <div class="controls">
            {% if type|default('text') == 'text' %}
            <input type="text" readonly class='cemporcento' value='{{ value }}'>
            {% endif %}
            {% if type|default('text') == 'textarea' %}
            <textarea  {% if id is not null %}id="{{ id }}"{% endif %}readonly class='cemporcento' style="height: 100% !important;">{{ value }}</textarea>
            {% endif %}
        </div>
    </div>
    {#<input type="{{ type|default('text') }}" name="{{ name }}" value="{{ value|e }}" size="{{ size|default(20) }}" />#}
{% endmacro %}





{% macro inputText(label, name, id, value, habilitado, defaultValue) %}
    <div class="control-group">
        <label for='{{id}}' class='control-label {{ label|trans|lower|replace(' ', '_') }}'>{{label|trans}}</label>
        <div class="controls">
            {% if habilitado %}
                {% if value is empty %}
                    {% set value = defaultValue %}
                {% endif %}
            {% endif %}
            <input id='{{id}}' {{habilitado?'':'readonly'}} name="{{name}}" type="text" class='initial-focus' value='{{ value }}'>
        </div>
    </div>
{% endmacro %}

{% macro inputDate(label, name, id, value, habilitado, defaultValue) %}
    <div class="control-group">
        <label for='{{id}}' class='control-label'>{{label|trans}}</label>
        <div class="controls">
            {% if value is empty %}
                {% set value = defaultValue %}
            {% endif %}
            <input id='{{id}}' {{habilitado?'':'readonly'}} name="{{name}}" type="text" class='initial-focus' value='{{ value }}'>
        </div>
    </div>
{% endmacro %}



{% macro inputInteger(label, name, id, value, habilitado, defaultValue, class) %}
    <div class="control-group {{class}}">
        <label for='{{id}}' class='control-label'>{{label|trans}}</label>
        <div class="controls">
            {% if habilitado %}
                {% if value is empty %}
                    {% set value = defaultValue %}
                {% endif %}
            {% endif %}
            <input id='{{id}}' {{habilitado?'':'readonly'}} name="{{name}}" type="text" class='initial-focus' value='{{ value }}'>
        </div>

        <script>
            $(document).ready(function(){
                $("#{{id}}").mask('00000000');
            });
        </script>

    </div>
{% endmacro %}


{% macro inputDecimal(label, name, id, value, habilitado, defaultValue, class, txtsOpcoes) %}
    {%  set precision = txtsOpcoes ?txtsOpcoes: 4 %}
    <div class="control-group {{class}}">
        <label for='{{id}}' class='control-label'>{{label|trans}}</label>
        <div class="controls">
            {% if habilitado %}
                {% if value is empty %}
                    {% set value = defaultValue %}
                {% endif %}
            {% endif %}
                <input id='{{id}}' {{habilitado?'':'readonly'}} name="{{name}}" type="text" class='initial-focus' value='{{ value }}'>
                <script>
                    $('#{{id}}').ready(function() {
                        $('#{{id}}').maskMoney({
                                'showSymbol' : false,
                                'thousands': '',
                                'decimal': ',',
                                'precision': {{ precision }},
                                'defaultZero' : false
                            })
                    });
                </script>
                
        </div>
    </div>
{% endmacro %}

{% macro inputCheckbox(label, name, id, value, habilitado, defaultValue, values) %}
    <div class="control-group">
        <label for='{{id}}' class='control-label'>{{label|trans}}</label>
        <div class="controls">
                {% if value is empty %}
                    {% set value = defaultValue %}
                {% else %}
                    {% set value = value|split('^|^') %}
                {% endif %}
                {% set options = values|split('^|^') %}
                {% for option in options %}
                    
                    <label>
                        <input  name="{{name}}[]" type="hidden" value=''>
                        <input id="{{name | replace({'[]': '_', '][': "_", ']': "_", '[': "_"})}}{{  option | regexreplace('/[^\\da-z]/i')  }}" name="{{name}}[]" {{option in value?'checked':''}} type="checkbox" class='initial-focus' {{habilitado?'':"readonly onclick='return false;'"}} value='{{ option }}'>&nbsp;{{ option }}
                    </label>
                {% endfor %}
        </div>
    </div>
{% endmacro %}

{% macro inputSelectChosen(label, name, id, value, habilitado, defaultValue, values) %}
    <div class="control-group">
        <label for='{{ id }}' class='control-label'>{{ label|trans }}</label>
        <div class="controls">
            {% if value is empty %}
                {% set value = defaultValue %}
            {% else %}
                {% set value = value|split('^|^') %}
            {% endif %}
            {% set options = values|split('^|^') %}
            <select id='{{ id }}' multiple="multiple" data-placeholder=" " name="{{ name }}[]"
                        class='select_chosen initial-focus' {{ habilitado?'':'disabled onchange="this.selectedIndex=this.defaultIndex;" onfocus="this.defaultIndex=this.selectedIndex;"' }}>
                {% for option in options %}
                    <option value='{{ option }}' {{ option in value?'selected':'' }}>{{ option }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
        <style>
            .tab-content {
                display: table;
                width: 80%;
            }

            ul#tab-esforco{
                width: 15%;
            }
            select#{{ id }}{
                max-height:28px;

            }
            .chzn-results{
                overflow: visible;
                max-height: 122px !important;
            }
        </style>

        <script>
            $(document).ready(function(){
                $("#{{ id }}").chosen({
                    no_results_text: "Nenhum resultado encontrado para",
                    width: "95%",
                    max_shown_results : 50,
                    display_selected_options: false
                });
            });
        </script>

{% endmacro %}



{% macro inputSelect(label, name, id, value, habilitado, defaultValue, values) %}
    <div class="control-group">
        <label for='{{id}}' class='control-label'>{{label|trans}}</label>
        <div class="controls">
            {% if habilitado %}
                {% if value is empty %}
                    {% set value = defaultValue %}
                {% endif %}
            {% endif %}
                {% set options = values|split('^|^') %}
                <select id='{{id}}' name="{{name}}" class='initial-focus' {{habilitado?'':'readonly onchange="this.selectedIndex=this.defaultIndex;" onfocus="this.defaultIndex=this.selectedIndex;"'}}>
                    <option value='' >{{'combobox.selecione'|trans}}</option> 
                    {% for option in options %}
                        <option value='{{option}}' {{value==option?'selected':''}}>{{option}}</option> 
                    {% endfor %}
                </select>
        </div>
    </div>
{% endmacro %}

{% macro inputSelect2(label, name, id, class, values) %}
    <div class="control-group {{class}}">
        <label for='{{id}}' class='control-label'>{{label|trans}}</label>
        <div class="controls">
            {% set options = values|split(';') %}
            <select id='{{id}}' name="{{name}}" class='initial-focus'>
                <option value='' selected>{{'combobox.selecione'|trans}}</option> 
                {% for option in options %}
                    {%if option != ''%}
                        {% set name = option|split(':') %}
                        <option value='{{option}}'>{{name[1]}}</option> 
                    {% endif %}
                {% endfor %}
            </select>
        </div>
    </div>
{% endmacro %}


{% macro mount_map(featuresCollection,inclusaoFeaturesCollection, edicaoFeaturesCollection, center, inlineLegend) %}
    <style>

        .legend label{
            line-height: 15px;
            height: 18px;
            margin: 0px 3px;

        }
        .legend .option .color {
            float: left;
            width: 25px;
            height: 15px;
            border: 1px solid #fff;
            margin: 0px 3px;
        }

        .legend .option.inclusao .color{
            background-color: #F09008;
        }

        .legend .option.edicao .color {
            background-color: #6FB1D1;
        }
        .legend .option.sincronizacao .color{
            background-color: #f0e511;
        }

        .legend {
            background-color: #fefefe;
            padding: 5px;
            border: 1px solid #ccc;
            display: inline-block;
        }

        .legend.inline label, .legend.inline h5 {
            display: inline-block;
        }

        .legend.inline{
            display: block;
        }

        .ol-popup {
            display: none;
            position: absolute;
            background-color: white;
            -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 20px 15px 15px 15px;
            border-radius: 10px !important;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            width: 350px;;
        }
        .scroll_td {
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            display: block;
        }
        td {
            width: 190px;
        }
        .ol-popup table{
            margin-bottom: 0px;
        }
        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }
        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 10px;
        }
        .ol-popup-closer:after {
            content: "✖";
        }

    </style>
    <div id="map" class="center-block col-md-12" style="height: 380px;">

        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content"></div>
        </div>

    </div>
    <div class="legend {% if inlineLegend %}inline{% endif %}">
        <h5>Legenda:</h5>
        <label class="option inclusao"> <span class="color"></span><span>Inclusão</span></label>
        <label class="option edicao"><span class="color"></span>Edição</label>
        <label class="option sincronizacao"> <span class="color"></span>Sincronização</label>

    </div>
    <script>
        // Função que faz as verificações e adiciona uma coordenada no array de coordenadas
        function addCoordenada(coordenadas, feature){
            // Se o array informado não existir inicializa um novo array
            coordenadas = (coordenadas != undefined) ? coordenadas : [];
            // Se a feature informada não existir não altera o array
            if(feature != undefined){                
                var val = undefined;
                // Verifica o tipo da feature e busca as coordenadas
                if(feature.constructor.name == 'Ik'){
                    val = (feature.U != undefined && feature.U.geometry != undefined) ? feature.U.geometry.B : undefined;
                }else{
                    val = (feature.values_ != undefined && feature.values_.geometry != undefined) ? feature.values_.geometry.flatCoordinates : undefined;
                }
                // Verifica se uma coordenada foi encontrada
                if(val != undefined && val != null){
                    var deveAdicionar = true;
                    // Itera sobre o array e verifica se a coordenada é válida e se ela já existe no array
                    coordenadas.forEach(function(coordenada){
                        deveAdicionar = !(coordenada[0] == val[0] && coordenada[1] == val[1]) || (val[0] == 'Infinity' || val[0] == '-Infinity' ||  val[1] == 'Infinity' || val[1] == '-Infinity');
                    });
                    // Adiciona a coordenada no array
                    if(deveAdicionar){
                        coordenadas.push(val);
                    }
                }
            }
            // Retorna o array
            return coordenadas;
        }

        var coordenadas = [];
        var map;
        var mapOptions;
        var precisaoInformada = false;
        //var pontosSourceConfig;
        $(document).ready(function(){
        // Inicio Sincronização
            // this example uses JSTS for which we don't have an externs file.
            var bufferSource = new ol.source.Vector();
            var pointSource = new ol.source.Vector();


            var json = '{{ featuresCollection | raw }}';


                var format = new ol.format.GeoJSON();
                var features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});
                var buffers =  format.readFeatures(json, {featureProjection: 'EPSG:3857'});

            var iconStyle = new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 4,
                    fill: new ol.style.Fill({color: "#f0e511" }),
                    stroke: new ol.style.Stroke({color: '#666666', width: 1})
                })
            });

                var parser = new jsts.io.OL3Parser();
                for (var i = 0; i < features.length; i++) {
                    var feature = features[i];
                    var precisao = feature.get('_precision');
                    feature.setStyle(iconStyle);
                    if (precisao > 0) {
                        var bufferFeature = buffers[i];
                        precisaoInformada = true;
                        // convert the OpenLayers geometry to a JSTS geometry
                        var jstsGeom = parser.read(bufferFeature.getGeometry());

                        // create a buffer of 40 meters around each line
                        var buffered = jstsGeom.buffer(precisao);

                        // convert back from JSTS and replace the geometry on the feature
                        bufferFeature.setGeometry(parser.write(buffered));

                        coordenadas = addCoordenada(coordenadas, feature);
                    }
                }



            pointSource.addFeatures(features);
             if (precisaoInformada) {
                 bufferSource.addFeatures(buffers);
             }
            var bufferLayer = new ol.layer.Vector({
                source: bufferSource
            });


            var pointLayer = new ol.layer.Vector({
                source: pointSource
            });

            pointLayer.setZIndex(2);
            pointLayer.set('selectable', true);
            // Sincronização

            // Inicio Inclusao
            // this example uses JSTS for which we don't have an externs file.
            var inclusaoBufferSource = new ol.source.Vector();
            var inclusaoPointSource = new ol.source.Vector();


            var json = '{{ inclusaoFeaturesCollection | raw }}';


            var format = new ol.format.GeoJSON();
            var features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});
            var buffers =  format.readFeatures(json, {featureProjection: 'EPSG:3857'});

            var iconStyle = new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 4,
                    fill: new ol.style.Fill({color: "#F09008" }),
                    stroke: new ol.style.Stroke({color: '#666666', width: 1})
                })
            });

            var parser = new jsts.io.OL3Parser();
            for (var i = 0; i < features.length; i++) {
                var feature = features[i];
                var precisao = feature.get('_precision');
                feature.setStyle(iconStyle);
                if (precisao > 0) {
                    var bufferFeature = buffers[i];
                    precisaoInformada = true;
                    // convert the OpenLayers geometry to a JSTS geometry
                    var jstsGeom = parser.read(bufferFeature.getGeometry());

                    // create a buffer of 40 meters around each line
                    var buffered = jstsGeom.buffer(precisao);

                    // convert back from JSTS and replace the geometry on the feature
                    bufferFeature.setGeometry(parser.write(buffered));

                    coordenadas = addCoordenada(coordenadas, feature);
                }
            }



            inclusaoPointSource.addFeatures(features);
            if (precisaoInformada) {
                inclusaoBufferSource.addFeatures(buffers);
            }
            var inclusaoBufferLayer = new ol.layer.Vector({
                source: inclusaoBufferSource
            });


            var inclusaoPointLayer = new ol.layer.Vector({
                source: inclusaoPointSource
            });



            inclusaoPointLayer.setZIndex(4);
            inclusaoPointLayer.set('selectable', true);

            // Inclusao


            // Inicio edicao
            // this example uses JSTS for which we don't have an externs file.
            var edicaoBufferSource = new ol.source.Vector();
            var edicaoPointSource = new ol.source.Vector();


            var json = '{{ edicaoFeaturesCollection | raw }}';


            var format = new ol.format.GeoJSON();
            var features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});
            var buffers =  format.readFeatures(json, {featureProjection: 'EPSG:3857'});

            var iconStyle = new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 4,
                    fill: new ol.style.Fill({color: "#6FB1D1" }),
                    stroke: new ol.style.Stroke({color: '#666666', width: 1})
                })
            });

            var parser = new jsts.io.OL3Parser();
            for (var i = 0; i < features.length; i++) {
                var feature = features[i];
                var precisao = feature.get('_precision');
                feature.setStyle(iconStyle);
                if (precisao > 0) {
                    var bufferFeature = buffers[i];
                    precisaoInformada = true;
                    // convert the OpenLayers geometry to a JSTS geometry
                    var jstsGeom = parser.read(bufferFeature.getGeometry());

                    // create a buffer of 40 meters around each line
                    var buffered = jstsGeom.buffer(precisao);

                    // convert back from JSTS and replace the geometry on the feature
                    bufferFeature.setGeometry(parser.write(buffered));

                    coordenadas = addCoordenada(coordenadas, feature);
                }
            }



            edicaoPointSource.addFeatures(features);
            if (precisaoInformada) {
                edicaoBufferSource.addFeatures(buffers);
            }
            var edicaoBufferLayer = new ol.layer.Vector({
                source: edicaoBufferSource
            });
            var edicaoPointLayer = new ol.layer.Vector({
                source: edicaoPointSource
            });
            edicaoPointLayer.setZIndex(6);


            edicaoPointLayer.set('selectable', true);
            // edicao


            var rasterLayer = new ol.layer.Tile({
                source: new ol.source.OSM()
            });

            var center = ol.proj.transform([-47.2, -24.4], 'EPSG:4326', 'EPSG:3857');
            {% if center %}
                center = ol.proj.transform([{{ center.longitude }}, {{  center.latitude }}], 'EPSG:4326', 'EPSG:3857')
            {% endif %}

            var map = new ol.Map({
                layers: [rasterLayer, pointLayer,  bufferLayer, inclusaoPointLayer, inclusaoBufferLayer, edicaoPointLayer, edicaoBufferLayer ],
                target: document.getElementById('map'),
                view: new ol.View({
                    center: center,
                    zoom: 16
                })
            });

            // Se tiver mais de um ponto aplica o zoom baseado nas coordenadas
            if(coordenadas.length > 1){
                map.getView().fit(ol.extent.boundingExtent(coordenadas), map.getSize());
            }

            //clique para obter camada
            var container = document.getElementById('popup');
            var content = document.getElementById('popup-content');
            var closer = document.getElementById('popup-closer');
            closer.onclick = function() {
                container.style.display = 'none';
                closer.blur();
                return false;
            };
            var overlay = new ol.Overlay({
                element: container
            });
            map.addOverlay(overlay);
            map.on('singleclick', function(evt) {

                var feature = map.forEachFeatureAtPixel(evt.pixel,
                        function(feature, layer) {



                            if((layer.get('selectable'))){
                                return feature;
                            }
                        });


                if (feature) {
                    var geometry = feature.getGeometry();
                    if(geometry instanceof ol.geom.Point){
                        var coord = geometry.getCoordinates();
                    }else{
                        var coord = geometry.getFirstCoordinate();
                    }


                    overlay.setPosition(coord);
                    var html = "<table class='table table-bordered table-condensed table-hover'>";
                    var attrs = feature.getKeys();
                    for(var attr in attrs){
                        attr = attrs[attr];
                        if(attr == "geometry" || attr.indexOf("_") == 0){
                            continue;
                        }

                        if(attr == "Códigos dos registros"){
                            html += "<tr><th style='width: 40%'>"+attr+"</th><td><div class='scroll_content'>"+feature.get(attr)+"</div></td></tr>";
                        }else{
                            html += "<tr><th style='width: 40%'>"+attr+"</th><td>"+feature.get(attr)+"</td></tr>";
                        }


                    }
                    html += "</table>";
                    content.innerHTML = html;
                    container.style.display = 'block';
                    $(container).popover('show');
                }




            });

        });
    </script>
{% endmacro %}