@extends('templateMaterializeV0-100-2.base2')
@section('title', 'Mapa de Ocorrências')
@section('content')

    <link type="text/css" rel="stylesheet" href="/css/screen-specific/map-occurrence/index.css"
          media="screen,projection"/>
    <div id="contentMap" class="U_hidden">
        <div id="map" class="U_full-widht U_full-height-fixed"></div>

        <div class="U_top_left_10_fixed U_widht-400" id="interaction1">

            <div class="white U_border-radius-30 U_widht-400 {{--U_height-300--}} z-depth-3 U_height-97v-max U_scroll-y-auto">

                <div class="white z-depth-1 U_widht-400 U_height-50 U_z-index-hight U_border-radius-30
            valign-wrapper U_padding-20">
                    <h5 class="U_font-weight-400 U_no-margin U_text-center truncate"
                        id="interface-district-in-focus">Aproxime de um bairro</h5>
                    <i class="material-icons U_hidden" id="interface-district-in-icon">history</i>
                    <i class="material-icons U_mouse-click" id="interface-btn-filters"
                       onclick="openFilters()">filter_list</i>
                    <i class="material-icons U_mouse-click U_margin_left-10" id="interface-btn-filters"
                       onclick="window.location.href = '/home'">home</i>
                </div>

                <div class="U_remove" id="interface-filters-content">

                    <div class="row">
                        <div class="col s12 U_padding-left-20 U_padding-right-20">

                            <div class="valign-wrapper U_margin_top-10">
                                <h6 class="U_text-left U_font-weight-500 U_no-margin">Filtros:</h6>
                                <div class="U_full-widht">
                                    <div class="chip right U_mouse-click" onclick="clearFilter()">
                                        <span>Limpar filtros</span>
                                    </div>
                                </div>
                            </div>

                            <p class="U_font-weight-400">Status:</p>

                            <a onclick="makeFilter('status', 1)"
                               class="btn-floating btn-flat waves-effect waves-light amber U_margin_right-10 ACTION_FILTERS
                            tooltipped" data-position="bottom" data-tooltip="Aberta" id="filter_status_1">
                                <h6 class="U_text-center U_font-weight-800 white-text">1</h6>
                            </a>

                            <a onclick="makeFilter('status', 2)"
                               class="btn-floating btn-flat waves-effect waves-light orange U_margin_right-10 ACTION_FILTERS
                            tooltipped" data-position="bottom" data-tooltip="Validação" id="filter_status_2">
                                <h6 class="U_text-center U_font-weight-800 white-text">2</h6>
                            </a>

                            <a onclick="makeFilter('status', 3)"
                               class="btn-floating btn-flat waves-effect waves-light cyan U_margin_right-10 ACTION_FILTERS
                            tooltipped" data-position="bottom" data-tooltip="Para Atendimento" id="filter_status_3"
                            >
                                <h6 class="U_text-center U_font-weight-800 white-text">3</h6>
                            </a>

                            <a onclick="makeFilter('status', 4)"
                               class="btn-floating btn-flat waves-effect waves-light blue U_margin_right-10 ACTION_FILTERS
                           tooltipped" data-position="bottom" data-tooltip="Em Atendimento" id="filter_status_4"
                            >
                                <h6 class="U_text-center U_font-weight-800 white-text">4</h6>
                            </a>

                            <a onclick="makeFilter('status', 5)"
                               class="btn-floating btn-flat waves-effect waves-light teal U_margin_right-10 ACTION_FILTERS
                           tooltipped" data-position="bottom" data-tooltip="Atendida" id="filter_status_5"
                            >
                                <h6 class="U_text-center U_font-weight-800 white-text">5</h6>
                            </a>

                            <a onclick="makeFilter('status', 6)"
                               class="btn-floating btn-flat waves-effect waves-light red U_margin_right-10 ACTION_FILTERS
                           tooltipped" data-position="bottom" data-tooltip="Recusada" id="filter_status_6"
                            >
                                <h6 class="U_text-center U_font-weight-800 white-text">6</h6>
                            </a>
                        </div>
                    </div>

                    <div class="row U_no-margin">
                        <div class="col s12 U_padding-left-20 U_padding-right-20">

                            <ul class="collapsible U_border-radius-8">
                                <li class="U_border-radius-8">
                                    <div class="collapsible-header U_border-radius-8">Bairros:<span></span></div>
                                    <div class="collapsible-body U_scroll-y-auto U_border-radius-8"
                                         style="max-height: 300px;">

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

                                        <div class="row uiRelationSelect">

                                            @foreach($districts as $district)

                                                <div>
                                                    <p class="U_no-margin">
                                                        <label>
                                                            <input onchange="moveToDistricByName(this.value)"
                                                                   name="district" type="radio" checked class="with-gap
                                                               filter_bairro"
                                                                   value="{{ (string)$district->nome }}"/>
                                                            <span>{{ $district->nome }}</span>
                                                        </label>
                                                    </p>
                                                </div>

                                            @endforeach

                                        </div>

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

                        </div>
                    </div>

                    <div class="row U_no-margin">
                        <div class="col s12 U_padding-left-20 U_padding-right-20">

                            <ul class="collapsible U_border-radius-8">
                                <li class="U_border-radius-8">
                                    <div class="collapsible-header U_border-radius-8">Subcategorias:<span></span></div>
                                    <div class="collapsible-body U_scroll-y-auto U_border-radius-8"
                                         style="max-height: 300px;">

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

                                        <div class="row uiRelationSelect">

                                            <div>
                                                <p class="U_no-margin">
                                                    <label>
                                                        <input onchange="makeFilter('sucategoria', null)"
                                                               name="subcategoria" type="radio" checked class="with-gap
                                                               filter_subcategoria"/>
                                                        <span class="U_font-weight-500 black-text">Todas</span>
                                                    </label>
                                                </p>
                                            </div>

                                            @foreach($subcategorias as $subcategoria)

                                                <div>
                                                    <p class="U_no-margin">
                                                        <label>
                                                            <input onchange="makeFilter('sucategoria', this.value)"
                                                                   name="subcategoria" type="radio" checked class="with-gap
                                                               filter_subcategoria"
                                                                   value="{{ (string)$subcategoria->id }}"/>
                                                            <span>{{ $subcategoria->nome }}</span>
                                                        </label>
                                                    </p>
                                                </div>

                                            @endforeach

                                        </div>

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

                        </div>
                    </div>

                    <div class="row">
                        <div class="col s12 U_padding-left-20 U_padding-right-20">
                            <p class="U_font-weight-400">Data período:</p>
                            <div class="col s5 U_no-padding">
                                <p class="U_font-weight-400 U_no-margin">Inícial</p>
                                <input class="browser-default U_border-radius-30 grey lighten-2 U_no-outline U_no-border
                            U_padding-5"
                                       type="date" id="filter_date_initial"
                                       onchange="makeFilter('data_initial', this.value)">
                            </div>
                            <div class="col s6 offset-s1 U_no-padding">
                                <p class="U_font-weight-400 U_no-margin">Final</p>
                                <input class="browser-default U_border-radius-30 grey lighten-2 U_no-outline U_no-border
                            U_padding-5"
                                       type="date" id="filter_date_final"
                                       onchange="makeFilter('data_final', this.value)">
                            </div>
                        </div>
                    </div>

                    <br>

                </div>

            </div>
        </div>

        <div id="lockDistrictDIV" class="U_top_left_420_fixed">
            <div class="U_widht-50 U_height-50 white z-depth-3 U_border-radius-30 valign-wrapper U_mouse-click tooltipped"
                 data-position="bottom" data-tooltip="Travar/Destravar - Utilize essa função para manter o bairro
                 escolhido mesmo movendo o mapa."
                 onclick="doLockEvent(this)" id="lock_btn">
                <i class="material-icons U_text-center">lock_open</i>
            </div>
        </div>

        <div id="makeClusterDIV" class="U_top_left_450_fixed">
            <div class="U_widht-50 U_height-50 white z-depth-3 U_border-radius-30 valign-wrapper U_mouse-click tooltipped"
                 data-position="bottom" data-tooltip="Travar/Destravar - Utilize essa função para manter o bairro
                 escolhido mesmo movendo o mapa."
                 onclick="resetView()">
                <i class="material-icons U_text-center">zoom_out_map</i>
            </div>
        </div>

        <div hidden id="content-parent-occurrence-view"
             class="U_top_left_420_fixed U_scroll-y-auto U_height-97v-max U_border-radius-30 z-depth-3 U_z-index-hight">

            <div class="white U_border-radius-30 U_widht-500" id="content-occurrence-view">
            </div>
            <div hidden class="white U_border-radius-30 U_widht-500 center U_padding-20"
                 id="content-occurrence-view-load">
                <div class="preloader-wrapper small active">
                    <div class="spinner-layer">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div>
                        <div class="gap-patch">
                            <div class="circle"></div>
                        </div>
                        <div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>
                </div>
                <h6 class="U_font-weight-600 U_text-center U_full-widht U_no-margin">Carregando</h6>
            </div>
        </div>

        <div class="U_top_right_10_fixed_fixed valign-wrapper">

            <div hidden onclick="startLive(this)"
                 class="blue lighten-1  U_border-radius-30 z-depth-3 U_margin_right-10 U_padding-left-10 U_padding-right-10
             valign-wrapper U_mouse-click U_min-height-50 U_min-widht-50 center tooltipped" data-position="bottom"
                 data-tooltip="Ao Vivo: Ligado/Desligado">
                <h5 id="static2" hidden
                    class="U_no-margin U_margin_top-10 U_margin_bottom-10 white-text U_margin_right-10 U_widht-90 white-text">
                    Ao Vivo</h5>
                <i class="material-icons black-text center white-text" style="margin-left: 3px;">live_tv</i>
            </div>

        </div>
    </div>

@endsection
@section('specific-scripts')
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('libraries/FullLoadPage/FullLoadPage.js') }}">
    </script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/map-occurrence/boot.js') }}">
    </script>
    <script>

        const _token = '{{ csrf_token() }}';

        const coordinate = {
            lat: {{ (float)custom_system('CIDADE_LATITUDE') }},
            lng: {{ (float)custom_system('CIDADE_LONGITUDE') }}
        };

        const cityWithState = '{{ custom_system('CIDADE') . ' ' . custom_system('ESTADO') }}'

    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/map-occurrence/index.js') }}">
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key={{ custom_system('MAPS_KEY') }}&callback=initMap" async
            defer>
    </script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/map-occurrence/map-styles.js') }}">
    </script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/map-occurrence/filters.js') }}">
    </script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/map-occurrence/occurrence-view.js') }}">
    </script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/screen-specific/map-occurrence/live.js') }}">
    </script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/moment/moment.js') }}">
    </script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('js/UiRelationship.js') }}">
    </script>
@stop