{% extends 'propesqBundle::layout.webgis.sig2.html.twig' %}
{% block title %}{% if mapconfiguration.title %}{{ mapconfiguration.title }}{% else %}{{ parent() }}{% endif %}{% endblock title %}




{# Completely overrides page layout #}
{% block page_content_body %}
    <div class="theme-panel">
        <div class="toggler">
        </div>
        <div class="toggler-close">
        </div>
        <div class="theme-options">
            <div class="theme-option theme-colors clearfix">
                <span>Ajustar Camadas</span>
            </div>
            <div class="theme-option">
                <span style="display: inline">
                    <a href="#modal-container" onclick="document.dispatchEvent(new CustomEvent('gs-open-filter', {'detail': {'filter': '{% block general_filter_url %}{{ path('webgis_carregafiltro', {'nome': 'geral' }) }}{% endblock general_filter_url %}'} }));" id="btn-modal-container" data-toggle="modal" class="btn btn-default btn-xs blue-stripe">
                        Filtros do mapa
                        &nbsp;
                        <i class="glyphicon" data-bind="css: cssFilterAppplied"></i>
                    </a>
                    <a id="tools_ruler" title="Régua" onclick="ferramentaRegua()" id="btn-modal-container" data-toggle="modal" class="btn btn-default btn-xs">
                        <i class="glyphicon glyphicon-screenshot"></i>
                    </a>
                    <a title="Unidade de Medida" onclick="abrirSelecaoUnidade()" id="btn-modal-container" data-toggle="modal" class="btn btn-default btn-xs">
                        <i class="glyphicon glyphicon-cog"></i>
                    </a>
                </span>
            </div>
            <div class="theme-option">
                <div class="row">
                    <div class="col-md-12">
                        <div class="dd" id="nestable">
                            <ol class="dd-list">

                                <!-- ko foreach: {data: layers }-->
                                <li class="dd-item" data-type="folder" data-bind="attr: {'data-id': $index, 'data-order': ($index() + 1)}">
                                    <div class="dd-handle dd3-handle">
                                        <a class="btn btn-xs btn-default" title="Mover" style="cursor: move;">
                                            <span class="glyphicon glyphicon-move"></span>
                                        </a>
                                    </div>
                                    <div class="dd3-content"><span data-bind='text: name' style="text-transform: uppercase"></span></div>
                                    <ol class="dd-list">
                                        <!-- ko foreach: {data: layers }-->
                                        <li class="dd-item" data-bind="attr: {'data-idparent': $parentContext.$index, 'data-id': id + '_', 'data-order': ($index() + 1)}" data-type="layer">
                                            <div class="dd-handle dd3-handle">
                                                <a class="btn btn-xs btn-default" title="Mover" style="cursor: move;">
                                                    <span class="glyphicon glyphicon-move"></span>
                                                </a>
                                            </div>
                                            <div class="dd3-content" style="/* min-height: 30px; height: auto; */padding: 4px 5px 5px 35px">
                                                <div class="btn-group btn-group-xs pull-right">
                                                    <a data-bind="visible: name != 'Pontos de Referência', click: functionLegend" class="btn btn-xs btn-default" title="Legenda">
                                                        <span class="glyphicon glyphicon-list"></span>
                                                    </a>

                                                    {#<!-- ko if: $data instanceof GSRasterLayer -->#}
                                                    {#<a data-bind="visible: (typeof(functionQueryOnClick) == 'function'), click: functionQueryOnClick" class="btn btn-xs btn-default" title="Obter informações">#}
                                                        {#<span data-bind="css: cssQueryOnClick" class="glyphicon"></span>#}
                                                    {#</a>#}
                                                    {#<!-- /ko -->#}

                                                    <a data-bind="visible: (typeof(symbology) == 'object' && typeof(symbology.url) == 'string'), click: (typeof(functionSymbology) == 'function' ? functionSymbology : '')" class="btn btn-xs btn-default" title="Configurar">
                                                        <span class="glyphicon glyphicon-cog"></span>
                                                    </a>



                                                    <!-- ko if: $data instanceof GSVectorLayer -->
                                                    <a data-bind="visible: typeof(filter) == 'string', click: (typeof(functionFilter) == 'function' ? functionFilter : '')" class="btn btn-xs btn-default" title="Filtro">
                                                        <span data-bind="css: cssFilterActive" class="glyphicon glyphicon-filter"></span>
                                                    </a>
                                                    <!-- /ko -->

                                                    <a data-bind="visible: typeof(opacityUrl) == 'string', click: (typeof(functionOpacity) == 'function' ? functionOpacity : '')" class="btn btn-xs btn-default" title="Transparência">
                                                        <span class="glyphicon glyphicon-adjust"></span>
                                                    </a>

                                                    <a data-bind="click: (name == 'Viagens' ? warnAndChangeVisibility : changeVisibility), attr: { title: (visible() ? 'Ocultar' : 'Mostrar') }" class="btn btn-xs btn-default" >
                                                        <span data-bind="css: cssIconVisibility" class="glyphicon"></span>
                                                    </a>
                                                </div>
                                                <div data-bind='text: name, attr: {title: name}' style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; "></div>
                                            </div>
                                        </li>
                                        <!-- /ko -->
                                    </ol>
                                </li>
                                <!-- /ko -->

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

    <div class="full-height-content" >
        <div id="map-container" style="background-color: #212121;">
            <div id="popup" class="ol-popup">
                <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                <div id="popup-content"></div>
            </div>
        </div>
    </div>

    <div id="modal-container" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="modal_body_container">

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

    <div id="selecionar-unidade" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title" >Unidade de Medida da Régua: </h4>
            </div>
            <div class="modal-body">
                <div id="container-configuracoes" >

                    <div class="row" style="margin-top: 5px;">
                        <div class="span-12">
                            <label>Unidade de medida da régua</label>
                            <select name="unidade_medida" id="unidade_medida">
                                <option value="km" selected>Quilômetros</option>
                                <option value="mn">Milhas náuticas</option>
                            </select>
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button id="btn_selecionar_unidade" onclick="selecionarUnidade()" class="btn blue"><i class="glyphicon"></i> Selecionar</button>
                <button type="button" data-dismiss="modal" class="btn default">Cancelar</button>
            </div>
        </div>
    </div>


{% endblock page_content_body %}

{# Completely removes menu UL. #}
{% block page_sidebar_body %}{% endblock page_sidebar_body %}

{# Removes the menu toggler from navbar #}
{% block responsive_menu_toggler %}{% endblock responsive_menu_toggler %}


{% block page_level_styles %}
    <link href="{{ asset('bundles/propesq/webgis/geoInformacao/css/map.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('bundles/propesq/webgis/geoInformacao/plugins/openlayers/v3.20.1-dist/ol.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/jquery-tags-input/jquery.tagsinput.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('bundles/propesq/webgis/geoInformacao/plugins/jquery-nestable/jquery.nestable.css') }}" rel="stylesheet" type="text/css"/>

    <style>

        .scroll_content{
            max-height: 200px;
            overflow-y: scroll;

        }

        .page-content {
            border-left: 0px !important; ;
            background-color: #262626 !important;
        }
        .help-block-error {
            color: #e73d4a
        }

        .help-block-hide{
            display: none;
        }

        .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: "✖";
        }

        .dd3-handle{
            text-indent: 0 !important;
            border: 0 !important;
            background: transparent !important;
            padding: 4px 6px;
            width: 35px;
        }

        .dd3-content:hover{
            color: #333;
        }

        .dd-list .dd-list{
            padding-left: 15px !important;
        }

        .dd-placeholder, .dd-empty{
            background-color: #DDDDDD;
        }

        .glyphicon-deactived{
            color: #DDDDDD !important;
        }

        .gs-spinner{
            width: auto !important;;
        }

        #selecionar-unidade {
            width: 90%;
            max-width: 90%;
        }

        #selecionar-unidade .modal-dialog {
            padding: 10px;
            border-radius: 6px;
            background-color: white;
        }

        #unidade_medida {
            border-radius: 4px;
            background-color: white;
        }

        .tooltip {
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            color: white;
            padding: 4px 8px;
            opacity: 0.8;
            white-space: nowrap;
        }

        .modal-lg {
            width: 90%;
            max-width: 90%;
        }

    </style>


{% endblock page_level_styles %}

{% block page_level_plugins %}
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/bootbox/bootbox.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/select2/select2.js') }}"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/select2/select2_locale_pt-BR.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/jquery-tags-input/jquery.tagsinput.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/plugins/openlayers/v3.20.1-dist/ol.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/plugins/knockout/knockout-3.4.0.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/plugins/jquery-nestable/jquery.nestable.js') }}"></script>
{% endblock page_level_plugins %}

{% block page_level_scripts %}
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/scripts/metronic.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/admin/layout/scripts/layout.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/common/app.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/bootstrap-toastr/toastr.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/common/index.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/plugins/gs/ruler/v0.0.1/ruler.js') }}"></script>

    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js') }}"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/admin/pages/scripts/form-wizard.js') }}"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.pt-BR.min.js') }}"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js') }}"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.pt-BR.js') }}"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/jquery-inputmask/inputmask/jquery.inputmask.js') }}"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js') }}"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/common/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/metronic_v3.9/theme/assets/global/plugins/bootstrap-tabdrop/js/bootstrap-tabdrop.js') }}"></script>

    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/common/moment.min.js') }}"></script>
    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/plugins/prototype/addPrototype.js') }}"></script>

    <script src="{{ asset('bundles/propesq/webgis/geoInformacao/common/oms.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/webgis/symbology/SymbologyFactory.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/webgis/ExportingManager.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/webgis/LegendManager.js')}}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/webgis/LayerModel.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/webgis/map.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/common/index.js') }}"></script>
{% endblock page_level_scripts %}

{% block js %}
    <script>
        var BingMapsSource = null;
        var base = null;
        var lastErrorMessage = {
            "tileError": []
        };
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "positionClass": "toast-top-center",
            "onclick": null,
            "showDuration": "1000",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };

        var regua = new Ruler();
        var unidadeMedidaRegua = "km";

        function abrirSelecaoUnidade() {
            $("#container-configuracoes").show();

            $("#selecionar-unidade").modal({
                keyboard: false,
                backdrop: 'static'
            });

            $("#selecionar-unidade").modal('show');
        }

        function selecionarUnidade() {
            unidadeMedidaRegua = $('#unidade_medida').val();

            $("#selecionar-unidade").modal('hide');

            regua.setMeasureUnit(unidadeMedidaRegua);
        }

        function reiniciarRegua(){            
            $("#tools_ruler").addClass('green-stripe');
            $(".tooltip-static").remove();
        }

        function disableRegua() {
            regua.resetRuler(function () {
                regua.disableRuler(function() {
                    $("#tools_ruler").removeClass('green-stripe');
                    $(".tooltip-static").remove();
                });
            });
        }

        function ferramentaRegua(){
            if(regua.isActive()){
                disableRegua();
            }else {
                ativarRegua();
            }
        }

        function ativarRegua(){
            regua.resetRuler(function(){
                reiniciarRegua();
            });

            regua.setMeasureUnit(unidadeMedidaRegua);
        }

        $('#map-container').on('click', function () {
            if(regua.isActive()) {
                document.getElementById('popup').setAttribute('style', 'display: none;');
            }
        });

        $(document).ready(function(){
            Metronic.blockUI();
            Map.init('{{ path('webgis_getlayers') }}', '{{ path('webgis_getlayer') }}', '{{ path('webgis_legenda') }}'); // init map features
            regua.setMap(map);
        });
    </script>
{% endblock js %}

{% block body_classes %} page-full-width {% endblock body_classes %}