@extends('template.default')
@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">

    @include('telas.home.componente.banner-component', ['data' => $news])
    @include('telas.home.componente.corona-virus', ['data' => $coronaVirus ?? []])

    <div id="ocorrenciasAdmin"></div>

    <div class="fixed-action-btn" style="top: 100px; right: 25px;">
        <a onclick="getComponenteOcorrencia('' , 'map')"
           class="btn-floating z-depth-4 white waves-effect waves-light tooltipped"
           id="btnChangeView"
           data-position="bottom"
           data-delay="1"
           data-tooltip="Mudar para Mapa">
            <i class="material-icons" style="color: {{ custom_system('___SECONDARY_COLOR___') }}">map</i>
        </a>

    </div>

    <div class="fixed-action-btn" style="bottom: 60px; right: 19px;">
        <a href="/reclamacao/abrir" id="abrir-reclamacao"
           class="btn-floating z-depth-4 btn-large waves-effect waves-light tooltipped modal-trigger"
           data-position="bottom"
           data-delay="1"
           data-tooltip="@lang('Abrir Ocorrência')">
            <i class="material-icons">record_voice_over</i>
        </a>

    </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">

                    <input hidden name="page" id="page" value="1">
                    <input hidden name="modeView" id="modeView">

                    <div class="row">

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

                        </div>

                        <div class="input-field col s12 l10">
                            <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 s12 l7">

                            <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">Tipos</p>


                                    <ul class="collapsible border-radius-10" data-collapsible="accordion">
                                        <li class="border-radius-10">
                                            <div class="collapsible-header border-radius-10">Tipo:<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 s6 l2">
                                            <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 s6 l2">
                                            <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>

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

                        <div class="col s12 offset-l1 l4">

                            <div class="row">

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

                                <p>
                                    <input type="checkbox" name="para_atendimento" class="filled-in filtro-check"
                                           id="para_atendimento"/>
                                    <label for="para_atendimento">{{ $statusCustom[2]->nome }}</label>
                                </p>

                                <p>
                                    <input type="checkbox" name="em_atendimento" class="filled-in filtro-check"
                                           id="em_atendimento"/>
                                    <label for="em_atendimento">{{ $statusCustom[3]->nome }}</label>
                                </p>

                                <p>
                                    <input type="checkbox" name="finalizadas" class="filled-in filtro-check"
                                           id="finalizadas"/>
                                    <label for="finalizadas">{{ $statusCustom[4]->nome }}</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>

                            </div>

                            <div class="row">
                                <p class="font-weight-700">
                                    Data de criação
                                </p>

                                <div class="col s12">
                                    <p>
                                        <input type="radio"
                                            name="ordem" class="filled-in filtro-check" id="ascendente" value="asc"/>
                                        <label for="ascendente">Crescente</label>
                                    </p>

                                    <p>
                                        <input type="radio"
                                            name="ordem" class="filled-in filtro-check" id="descendente" value="desc"/>
                                        <label for="descendente">Decrescente</label>
                                    </p>
                                </div>
                            </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" style="color: {{ custom_system('___SECONDARY_COLOR___') }}">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="resetFilter()">
                <i class="material-icons" style="color: {{ custom_system('___SECONDARY_COLOR___') }}">clear_all</i>
            </a>

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

        </div>
    </div>


    <div class="tap-target amber" data-activates="abrir-reclamacao">
        <div class="tap-target-content">
            <h5 class="font-weight-700 white-text">Abrir ocorrência</h5>
            <p class="white-text">Utilize esse botão sempre que quiser criar uma ocorrência.
                Depois é só informar se sua ocorrência vai ser anônima ou autenticada, escolher uma categoria, e
                preencher as informações como endereço, foto do ocorrido e uma descrição.
            </p>
        </div>
    </div>

    <div id="modalAtendimento" class="modal bottom-sheet z-depth-5"
         style="
         padding: 0 !important;
         margin: auto;
         max-height: 95%;
         min-height: 95%;
         width: 750px;
         border-bottom-right-radius: 0 !important;
         border-bottom-left-radius: 0 !important;
">
        <h5 onclick="closeModalAtendimento()"
            class="hide-on-large-only"
            style="cursor: pointer;
        position: absolute;
        top: 0;
        right: 10px;
        z-index: 9999999;">
            <i class="material-icons">close</i>
        </h5>

        <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 hidden id="loadGeral" style="margin-top: 20%;">
        <h5 class="center-align">
            <div class="preloader-wrapper 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>
        </h5>
        <h4 class="font-weight-600 center-align grey-text">Buscando ocorrências</h4>
    </div>

    <input hidden id="controlScroll" value="true">

@endsection
@section('specific-scripts')

    <script src="https://maps.googleapis.com/maps/api/js?key={{ custom_system('MAPS_KEY') }}"></script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/script-custom/control-cookie.js') }}"></script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/script-custom/gerenciar-ocorrencias-home.js') }}"></script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/script-custom/gerenciar-ocorrencia-acao-home.js') }}"></script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/vendors/magnific-popup/jquery.magnific-popup.min.js') }}"></script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/script-custom/control-cookie.js') }}"></script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/vendors/imagesloaded.pkgd.min.js') }}"></script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/UiRelationship.js') }}"></script>

    <script>

        $('#nav-search').removeAttr('hidden', 'hidden');
        $('#fixNavBar').attr('hidden', 'hidden');

        $(document).ready(function () {
            $('#navBusca').removeAttr('hidden', 'hidden');

            if ($(window).width() <= 600) {
                $('#modalAtendimento').css('width', '100%');
            }

        });

        function closeModalAtendimento() {

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

        }

        if (getCookie('firstUseHome') === null) {

            $('.tap-target').tapTarget('open');

        }

        function abrirModalFiltro() {

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

        }

        function fecharModalFiltro() {

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

        }

        function atendimento() {

            $('#para_atendimento').attr('checked', 'checked');
            $('#em_atendimento').attr('checked', 'checked');

            getComponenteOcorrencia();

            $('#para_atendimento').removeAttr('checked', 'checked');
            $('#em_atendimento').removeAttr('checked', 'checked');

        }

        function finalizadas() {

            $('#finalizadas').attr('checked', 'checked');

            getComponenteOcorrencia();

            $('#finalizadas').removeAttr('checked', 'checked');
        }

        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);

        }

        @if(isset($_GET['ocorrenciaShare']))

        $(document).ready(function () {
            openMoreDetail('{{ $_GET['ocorrenciaShare'] }}', 'default');
            window.history.pushState({}, document.title, "/");
        });

        @endif

        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 enableScroll = true;
        // var currentPage = 1;
        // $(window).scroll(function () {
        //     if ($(window).scrollTop() + $(window).height() == $(document).height()) {

        //         if ($('#controlScroll').val() == 'true') {

        //             currentPage++;
        //             setPageInput(currentPage.toString());

        //         }

        //     }
        // });

        
    </script>

@stop