@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">
    <link rel="stylesheet" type="text/css" href="/css/custom/custom.css">

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

                        @if(isset($params['aderidas']))

                            <input hidden name="ocorrenciasAderidas" value="{{ $params['aderidas'] }}">

                        @endif

                        <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="pendentes" class="filled-in filtro-check"
                                           id="pendentes"/>
                                    <label for="pendentes">{{ $statusCustom[0]->nome }}</label>
                                </p>

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

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


                    </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"
               onclick="getComponenteOcorrencia(null, null, 'resetFilter')"
               style="position: fixed; top: 20px; right: 20px;">
                <i class="material-icons">search</i>
            </a>

        </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: 55%;
         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 id="loadMoreContents" class="row" style="margin-bottom: 20px;">
        <div class="col s12">

            <h5 class="center-align">

                <a class="btn-floating waves-effect waves-light white z-depth-4"
                   style="padding-top: 7px; width: 50px; height: 50px;">

                    <div id="loadMaisCategoria">
                        <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>
                    </div>

                </a>

            </h5>


        </div>
    </div>

@endsection
@section('specific-scripts')
    <script src="https://maps.googleapis.com/maps/api/js?key={{ custom_system('MAPS_KEY') }}"></script>
    <script type="text/javascript" src="/js/script-custom/control-cookie.js"></script>
    <script type="text/javascript" src="/js/script-custom/gerenciar-ocorrencia-acao-minhas-ocorrencias.js"></script>
    <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="/js/UiRelationship.js"></script>

    <script>

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

        @if(isset($_GET['noticationOpen']))
        $(document).ready(function () {

            openMoreDetail('{{ $_GET['noticationOpen'] }}', null);

            window.history.pushState({}, document.title, "/minhas-ocorrencias");

        });
        @endif

    </script>

    <script>

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

            $('.titulo_pagina').text('Minhas Ocorrências');

            @if(isset($params['aderidas']))

            $('.titulo_pagina').text('Ocorrências Aderida');

            @endif


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

        });

        function closeModalAtendimento() {

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

        }

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

        }

        function openMoreDetail(data, map) {

            var dataRaw = data;

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

            floatActionButtonLoad();

            $.ajax({
                type: 'GET',
                dataType: 'html',
                url: '/minhas-ocorrencias/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 currentPage = 1;
        $(window).scroll(function () {
            if ($(window).scrollTop() + $(window).height() == $(document).height()) {

                currentPage++;

                setPageInput(currentPage.toString());

            }
        });

    </script>

@stop