@extends('template.mapa')
@section('text-field')
@stop
@section('content')

    <link href="/css/timeline-materialize.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/vendors/magnific-popup/magnific-popup.css">

    <div class="row">
        <div class="card position-absolute z-depth-3" style="z-index: 999; width: 400px; height: 50px; border-radius: 50px;
        padding-right: 27px; margin-left: 15px; margin-top: 15px;">
            <div class="col s1">
                <a onclick="openFiltroMapa()" class="btn-floating waves-effect waves-light transparent"
                   style="box-shadow: none; margin-top: 5px;">
                    <i id="iconMenu" class="material-icons grey-text">menu</i>
                </a>
            </div>
            <div class="col s10">
                <h5 class="font-weight-900 grey-text" style="margin-left: 15px; font-size: 20px; margin-top: 14px;">Mapa
                    de Ocorrências</h5>
            </div>
            <div class="col s1">
                <a href="/home" class="btn-floating waves-effect waves-light transparent"
                   style="box-shadow: none; margin-top: 5px;">
                    <i class="material-icons grey-text">home</i>
                </a>
            </div>
        </div>

        <div hidden id="filtroMapa" class="position-absolute transparent" style="z-index: 999; width: 300px; height: 400px;
        padding-right: 15px; margin-left: 15px; margin-top: 15px; top: 65px;">

            <div class="col s12"
                 onclick="openModalFiltro()"
                 style="cursor: pointer"
            >
                <a>
                    <div class="chip grey-text text-darken-2 white">
                        Mais Filtros
                    </div>
                </a>
            </div>

            @php($statusCustom = session('configuration')['ocorrencia_status'])

            <div class="col s12">
                <a href="?aberta=on">
                    <div class="chip white-text" style="background: {{ \App\Services\ControleColor::arrayColor[1] }};">
                        1
                    </div>
                    <div class="chip white-text" style="background: {{ \App\Services\ControleColor::arrayColor[1] }};">
                        {{ $statusCustom[0]->nome }}
                    </div>
                </a>
            </div>

            <div class="col s12">
                <a href="?validacao=on">
                    <div class="chip white-text" style="background: {{ \App\Services\ControleColor::arrayColor[2] }};">
                        2
                    </div>
                    <div class="chip white-text" style="background: {{ \App\Services\ControleColor::arrayColor[2] }};">
                        {{ $statusCustom[1]->nome }}
                    </div>
                </a>
            </div>

            <div class="col s12">
                <a href="?para_atendimento=on">
                    <div class="chip white-text" style="background: {{ \App\Services\ControleColor::arrayColor[3] }};">
                        3
                    </div>
                    <div class="chip white-text" style="background: {{ \App\Services\ControleColor::arrayColor[3] }};">
                        {{ $statusCustom[2]->nome }}
                    </div>
                </a>
            </div>

            <div class="col s12">
                <a href="?em_atendimento=on">
                    <div class="chip white-text" style="background: {{ \App\Services\ControleColor::arrayColor[4] }};">
                        4
                    </div>
                    <div class="chip white-text" style="background: {{ \App\Services\ControleColor::arrayColor[4] }};">
                        {{ $statusCustom[3]->nome }}
                    </div>
                </a>
            </div>

            <div class="col s12">
                <a href="?finalizadas=on">
                    <div class="chip white-text" style="background: {{ \App\Services\ControleColor::arrayColor[5] }};">
                        5
                    </div>
                    <div class="chip white-text" style="background: {{ \App\Services\ControleColor::arrayColor[5] }};">
                        {{ $statusCustom[4]->nome }}
                    </div>
                </a>
            </div>

            <div class="col s12">
                <a href="?recusadas=on">
                    <div class="chip white-text" style="background: {{ \App\Services\ControleColor::arrayColor[6] }};">
                        6
                    </div>
                    <div class="chip white-text" style="background: {{ \App\Services\ControleColor::arrayColor[6] }};">
                        {{ $statusCustom[5]->nome }}
                    </div>
                </a>
            </div>

            <div class="col s12">
                <a href="/gerenciar/ocorrencia/mapa">
                    <div class="chip white-text grey">
                        7
                    </div>
                    <div class="chip white-text grey">
                        Todas
                    </div>
                </a>
            </div>

        </div>

        <div id="map" style="width: 100%; height: 100%; position: absolute;"></div>
    </div>

    <div id="slider"></div>

    <div id="modalAtendimento" class="modal bottom-sheet z-depth-5"
         style="
         padding: 0 !important;
         margin: auto;
         max-height: 95%;
         min-height: 95%;
         width: 50%;
         border-bottom-right-radius: 0 !important;
         border-bottom-left-radius: 0 !important;
">
        <div class="modal-content" id="conteudoAtendimentoAdmin" style="padding: 0;"></div>

        <div id="divLoadFloactActionButton">
            <a id="floatActionButtonLoad" class="btn-floating btn-large waves-effect waves-light position-absolute"
               style="bottom: 0; right: 45%;"
            >
                <i class="material-icons">add</i>
            </a>
        </div>
    </div>

    <div id="modalFiltro" class="modal bottom-sheet" style="max-height: 100%; min-height: 100%;">
        <div class="modal-content">
            <h5 class="font-weight-800">Filtros</h5>

            <div class="row">
                <form class="col s12" id="formFiltroAdmin" method="get">

                    <div class="row">

                        <div class="input-field col s2">
                            <input id="filtro-codigo" name="filtro-codigo"
                                   type="text">
                            <label for="filtro-codigo">Protocolo</label>

                        </div>

                        <div class="input-field col s10">
                            <input id="filtro-palavra-chave" name="filtro-palavra-chave" type="text">
                            <label for="filtro-palavra-chave">Pesquise aqui por palavras que gostaria de
                                encontrar</label>

                        </div>
                    </div>


                    <div class="row">


                        <div class="col s7">

                            <div class="row">
                                <div class="col s12">

                                    <p class="font-weight-700">Bairros</p>

                                    <ul class="collapsible border-radius-10" data-collapsible="accordion">
                                        <li class="border-radius-10">
                                            <div class="collapsible-header border-radius-10">Bairro:<span></span></div>
                                            <div class="collapsible-body border-radius-10"
                                                 style="max-height: 300px; overflow-y: auto">

                                                <div class="row">

                                                    <div class="col s12">
                                                        <input type="text" class="uiRelationSearch"
                                                               placeholder="Busca">
                                                    </div>

                                                </div>

                                                <div class="row uiRelationSelect">

                                                    @foreach($bairros->data as $bairro)

                                                        <div class="col s6">
                                                            <p>
                                                                <input class="with-gap uiRelationOption"
                                                                       value="{{ (string)$bairro->id }}"
                                                                       name="filtro_bairro_id" type="radio"
                                                                       id="bairro_id-{{ $bairro->id }}"/>
                                                                <label for="bairro_id-{{ $bairro->id }}">{{ $bairro->nome }}</label>
                                                            </p>
                                                        </div>

                                                    @endforeach

                                                </div>

                                            </div>
                                        </li>
                                    </ul>

                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12">

                                    <p class="font-weight-700">Secretarias</p>


                                    <ul class="collapsible border-radius-10" data-collapsible="accordion">
                                        <li class="border-radius-10">
                                            <div class="collapsible-header border-radius-10">Secretaria:<span></span>
                                            </div>
                                            <div class="collapsible-body border-radius-10"
                                                 style="max-height: 300px; overflow-y: auto">

                                                <div class="row">
                                                    <div class="col s12">
                                                        <input type="text" class="uiRelationSearch"
                                                               placeholder="Busca">
                                                    </div>
                                                </div>

                                                <div class="row uiRelationSelect">

                                                    @foreach($secretarias->data as $secretaria)

                                                        <div class="col s6">
                                                            <p>
                                                                <input class="with-gap uiRelationOption"
                                                                       value="{{ (string)$secretaria->id }}"
                                                                       name="filtro_secretaria_id" type="radio"
                                                                       id="secretaria_id-{{ $secretaria->id }}"/>
                                                                <label for="secretaria_id-{{ $secretaria->id }}">{{ $secretaria->nome }}</label>
                                                            </p>
                                                        </div>

                                                    @endforeach

                                                </div>

                                            </div>
                                        </li>
                                    </ul>

                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12">

                                    <p class="font-weight-700">Subcategorias</p>


                                    <ul class="collapsible border-radius-10" data-collapsible="accordion">
                                        <li class="border-radius-10">
                                            <div class="collapsible-header border-radius-10">Subcategoria:<span></span>
                                            </div>
                                            <div class="collapsible-body border-radius-10"
                                                 style="max-height: 300px; overflow-y: auto">

                                                <div class="row">
                                                    <div class="col s12">
                                                        <input type="text" class="uiRelationSearch"
                                                               placeholder="Busca">
                                                    </div>
                                                </div>

                                                <div class="row uiRelationSelect">

                                                    @foreach($subcategorias->data as $subcategoria)

                                                        <div class="col s6">
                                                            <p>
                                                                <input class="with-gap uiRelationOption"
                                                                       value="{{ (string)$subcategoria->id }}"
                                                                       name="filtro_subcategoria_id" type="radio"
                                                                       id="subcategria_id-{{ $subcategoria->id }}"/>
                                                                <label for="subcategria_id-{{ $subcategoria->id }}">{{ $subcategoria->nome }}</label>
                                                            </p>
                                                        </div>

                                                    @endforeach

                                                </div>

                                            </div>
                                        </li>
                                    </ul>

                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12">

                                    <p class="font-weight-700">Data</p>

                                    <div class="row">
                                        <div class="input-field col s2">
                                            <input id="filtro-data-inicio" name="filtro-data-inicio" type="text"
                                                   class="datepicker">
                                            <label for="filtro-data-inicio">Inicio</label>
                                        </div>
                                        <div class="input-field col s2">
                                            <input id="filtro-data-fim" name="filtro-data-fim" type="text"
                                                   class="datepicker">
                                            <label for="filtro-data-fim">Fim</label>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>

                        <div class="col offset-s1 s4">

                            <div class="row">

                                <p class="font-weight-700">Status</p>

                                <p>
                                    <input type="checkbox" name="pendentes" class="filled-in filtro-check"
                                           id="pendentes"/>
                                    <label for="pendentes">Aberta</label>
                                </p>

                                <p>
                                    <input type="checkbox" name="verificacao" class="filled-in filtro-check"
                                           id="verificacao"/>
                                    <label for="verificacao">Validação</label>
                                </p>

                                <p>
                                    <input type="checkbox" name="para_atendimento" class="filled-in filtro-check"
                                           id="para_atendimento"/>
                                    <label for="para_atendimento">@lang('Para Atendimento')</label>
                                </p>

                                <p>
                                    <input type="checkbox" name="em_atendimento" class="filled-in filtro-check"
                                           id="em_atendimento"/>
                                    <label for="em_atendimento">@lang('Em Atendimento')</label>
                                </p>

                                <p>
                                    <input type="checkbox" name="finalizadas" class="filled-in filtro-check"
                                           id="finalizadas"/>
                                    <label for="finalizadas">@lang('Finalizadas')</label>
                                </p>

                                <p>
                                    <input type="checkbox" name="recusadas" class="filled-in filtro-check"
                                           id="recusadas"/>
                                    <label for="recusadas">Recusadas</label>
                                </p>

                            </div>

                            <div class="row">

                                <p class="font-weight-700">Social</p>

                                <p>
                                    <input type="checkbox" name="filtro_mais_visualizadas"
                                           class="filled-in filtro-check"
                                           id="mais_visualizadas"/>
                                    <label for="mais_visualizadas">Mais Visualizadas</label>
                                </p>

                                <p>
                                    <input type="checkbox" name="filtro_mais_aderidas" class="filled-in filtro-check"
                                           id="mais_aderidas"/>
                                    <label for="mais_aderidas">Mais Aderidas</label>
                                </p>


                            </div>

                        </div>


                    </div>

                </form>
            </div>

            <a class="btn-floating mb-1 white btn waves-effect waves-light z-depth-3"
               style="position: fixed; top: 30px; right: 150px;"
               onclick="fecharModalFiltro()">
                <i class="material-icons orange-text">close</i>
            </a>

            <a class="btn-floating mb-1 white btn waves-effect waves-light z-depth-3"
               style="position: fixed; top: 30px; right: 90px;"
               onclick="resetFilterMap()"
            >
                <i class="material-icons orange-text">cancel</i>
            </a>

            <a class="btn-floating mb-1 btn-large waves-effect waves-light z-depth-3"
               onclick="setFiltro()"
               style="position: fixed; top: 20px; right: 20px;">
                <i class="material-icons">search</i>
            </a>

        </div>
    </div>

@endsection
@section('specific-scripts')
    <script src="/vendors/magnific-popup/jquery.magnific-popup.min.js" type="text/javascript"></script>
    <script src="/vendors/imagesloaded.pkgd.min.js" type="text/javascript"></script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/script-custom/markerclusterer.js') }}"></script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key={{ custom_system('MAPS_KEY') }}&libraries=places&callback=initMap"></script>
    <script type="text/javascript" src="/js/UiRelationship.js"></script>
    <script type="text/javascript" src="/js/OcorrenciaMap.js"></script>

    <script>

        function openModalFiltro() {

            $('#modalFiltro').modal('open');

        }

        function fecharModalFiltro() {

            $('#modalFiltro').modal('close');

        }

        function setFiltro() {

            $('#formFiltroAdmin').submit();

        }

        function resetFilterMap() {

            window.location.href = '/gerenciar/ocorrencia/mapa';

        }

    </script>

    <script>

        ocorrenciaMap = new OcorrenciaMap();

        $(document).ready(function () {
            $('.chip').addClass('z-depth-3');
        });

        var filtroMapaOpenClose = false;

        function openFiltroMapa() {

            if (filtroMapaOpenClose === false) {
                $('#filtroMapa').removeAttr('hidden', 'hidden');
                $('#iconFiltroMapa').text('close');
                $('#iconMenu').text('close');
                filtroMapaOpenClose = true;
            } else {
                $('#filtroMapa').attr('hidden', 'hidden');
                $('#iconFiltroMapa').text('more_vert');
                $('#iconMenu').text('menu');
                filtroMapaOpenClose = false;
            }

        }

        var markers = [];

        function initMap() {
            var cidadeLatLng = {lat: {{ custom_system('CIDADE_LATITUDE') }}, lng: {{ custom_system('CIDADE_LONGITUDE') }} };

            var defaultBounds = new google.maps.LatLngBounds(
                new google.maps.LatLng({{ custom_system('CIDADE_LATITUDE') }}, {{ custom_system('CIDADE_LONGITUDE') }}));


            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: cidadeLatLng,
                mapTypeId: 'roadmap',
                disableDefaultUI: true
            });


/////////////////////////////Inicio/////////////////////////////////////////////////////////

            @php($index = 0)

                    @foreach($ocorrencias->data->withGPS as $key => $ocorrencia)

                posicao = {

                lat: {{ (float)$ocorrencia->lat }},
                lng: {{ (float)$ocorrencia->lon }}

            };

            markers[{{ $index }}] = new google.maps.Marker({

                position: posicao,
                map: map,
                animation: google.maps.Animation.DROP,
                icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|{{ $ocorrencia->categoria_cor }}',

            });

            markers[{{ $index }}].addListener('click', function () {
                openMoreDetail('{{ $ocorrencia->id }}', 'map')
            });

            @php($index += 1)

            @endforeach


            //////////////////////////////////// SEM GPS /////////////////////////////////

            @php($index = 0)

                    @foreach($ocorrencias->data->withOutGPS as $key => $ocorrencia)

                posicao = {

                lat: {{ (float)$ocorrencia->lat }},
                lng: {{ (float)$ocorrencia->lon }}

            };

            markers[{{ $index }}] = new google.maps.Marker({

                position: posicao,
                map: map,
                animation: google.maps.Animation.DROP,
                icon: '/images/custered/m5.png',
                label: {text: '{{ $ocorrencia->total }}', color: 'white'}

            });

            markers[{{ $index }}].addListener('click', function () {

                @php($ocorrenciaIdArray = explode(';', $ocorrencia->ocorrencias_id))
                @php($ocorrenciaIdArray = array_map(function ($value) {

                return (int)$value;

                }, $ocorrenciaIdArray))

                ocorrenciaMap.seeMultiple('{{ json_encode($ocorrenciaIdArray) }}');

            });

            @php($index += 1)

            @endforeach

            ////////////////////////////////FIM/////////////////////////////

            var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: '/images/custered/m'});

        }

        function toggleBounce() {
            if (markers.getAnimation() !== null) {
                markers.setAnimation(null);
            } else {
                markers.setAnimation(google.maps.Animation.BOUNCE);
            }
        }

        var intervalId;
        var controlAnimation = false;

        function floatActionButtonLoad() {

            intervalId = setInterval(function () {

                if (controlAnimation === false) {
                    $('#floatActionButtonLoad').css('bottom', '140px');
                    controlAnimation = true;
                } else {
                    $('#floatActionButtonLoad').css('bottom', '0');
                    controlAnimation = false;
                }

            }, 350);

        }


        function openMoreDetail(data, map) {

            var dataRaw = data;

            $('#floatActionButtonLoad').css('bottom', '0');
            controlAnimation = false;

            floatActionButtonLoad();

            $.ajax({
                type: 'GET',
                dataType: 'html',
                url: '/home/ocorrencia/more/detail',
                data: {
                    data: data,
                    map: map
                },
                beforeSend: function () {

                    $('#conteudoAtendimentoAdmin').empty();
                    $('#divLoadFloactActionButton').removeAttr('hidden', 'hidden');
                    $('#modalAtendimento').css('min-height', '40%');
                    $('#modalAtendimento').modal('open');

                },
                success: function (data) {

                    $('#divLoadFloactActionButton').attr('hidden', 'hidden');
                    $('#modalAtendimento').css('min-height', '95%');
                    $('#conteudoAtendimentoAdmin').append(data);
                    clearInterval(intervalId)

                },
                error: function (xhr) {
                    $('#modalAtendimento').modal('close');
                    clearInterval(intervalId)
                }
            });

        }



        var diaSemana = ['Domingo', 'Segunda-Feira', 'Terca-Feira', 'Quarta-Feira', 'Quinta-Feira', 'Sexta-Feira', 'Sabado'];
        var mesAno = ['Janeiro', 'Fevereiro', 'Marco', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
        var data = new Date();
        var hoje = diaSemana[data.getDay()] + ', ' + mesAno[data.getMonth()] + ' de ' + data.getFullYear();
        $("#dataPesquisa").attr("value", hoje);
        $(".datepicker").pickadate({
            monthsFull: mesAno,
            monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
            weekdaysFull: diaSemana,
            weekdaysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
            weekdaysLetter: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
            selectMonths: true,
            selectYears: true,
            clear: false,
            format: 'dd/mm/yyyy',
            today: "Hoje",
            close: "Fechar",
            min: new Date(data.getFullYear() - 1, 0, 1),
            max: new Date(data.getFullYear() + 1, 11, 31),
            closeOnSelect: true
        });
        $('.picker__frame').css('top', '42%');

        $('.dropdown-button').dropdown({
                inDuration: 300,
                outDuration: 225,
                constrainWidth: false, // Does not change width of dropdown to that of the activator
                hover: true, // Activate on hover
                gutter: 0, // Spacing from edge
                belowOrigin: false, // Displays dropdown below the button
                alignment: 'right', // Displays dropdown with edge aligned to the left of button
                stopPropagation: false // Stops event propagation
            }
        );



    </script>

@stop