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

    @php($configuration = session('configuration'))
    @php($notifyBackDay = $configuration['notify_back_day'])
    @php($searhBackDays = $dados->info->searhBackDays)
    @php($modules = session('modules'))
    @php($dataInicial = request()->get('dataInicial'))
    @php($dataFinal = request()->get('dataFinal'))

    <div class="row">
        <br/>
        <div class="col s2">
            <label for="busca_texto">Data inicial</label>
            <input type="date" name="data_incial" id="data_incial" value="{{$dataInicial}}"/>
        </div>
        <div class="col s2">
            <label for="busca_texto">Data final</label>
            <input type="date" name="data_final" id="data_final" value="{{$dataFinal}}"/>
        </div>
        <div class="col s1">
            <a class="btn-floating btn-large waves-effect waves-light" onclick="sendFilter()">
                <i class="material-icons">search</i>
            </a>
        </div>
    </div>

    <div class="row">

        <div class="col s2">
            <div class="card z-depth-2 border-radius-8 min-height-150 center-align">
                <h5 class="font-weight-600 grey-text center-align">Ocorrências</h5>
                <h4 class="font-weight-500 center-align">{{ $dados->ocorrenciasTodas }}</h4>
                <i class="material-icons md-24 orange-text">record_voice_over</i>
                {!! custom_component_tooltip([
                               'texto' => "Total de ocorrências com os status: <br>"
                               . status_to_string([1,3,4,5,6], '<br>')
                               ,
                               'position' => 'bottom_right'
                               ])
                !!}
            </div>
        </div>

        <div class="col s2">
            <div class="card z-depth-2 border-radius-8 min-height-150 center-align">
                <h5 class="font-weight-600 grey-text center-align">Abertas</h5>
                <h4 class="font-weight-500 center-align">{{ $dados->ocorreciasAbertas }}</h4>
                <i class="material-icons md-24 orange-text">lock_open</i>
                {!! custom_component_tooltip([
                               'texto' => "Total de ocorrências com os status: <br>"
                               . status_to_string([1,2,3,4], '<br>'),
                               'position' => 'bottom_right'
                               ])
                !!}
            </div>
        </div>

        <div class="col s2">
            <div class="card z-depth-2 border-radius-8 min-height-150 center-align">
                <h5 class="font-weight-600 grey-text center-align">Atrasadas</h5>
                <h4 class="font-weight-500 center-align">{{ $dados->ocorrenciasAtrasadas }}</h4>
                <i class="material-icons md-24 orange-text">access_time</i>
                {!! custom_component_tooltip([
                               'texto' => "Total de ocorrências com os status: <br>"
                               . status_to_string([1,2,3,4], '<br>') .
                               "<br>É estão sem mudança de status há $notifyBackDay dias",
                               'position' => 'bottom_right'
                               ])
                !!}
            </div>
        </div>

        <div class="col s2">
            <div class="card z-depth-2 border-radius-8 min-height-150 center-align">
                <h5 class="font-weight-600 grey-text center-align">Usuários</h5>
                <h4 class="font-weight-500 center-align">{{ $dados->userFiscalizadores }}</h4>
                <i class="material-icons md-24 orange-text">face</i>
                {!! custom_component_tooltip([
                               'texto' => "Total de cidadão cadastrado no sistema",
                               'position' => 'bottom_right'
                               ])
                !!}
            </div>
        </div>

        <div class="col s4">
            <div class="card z-depth-2 border-radius-8 min-height-150">

                <div class="center-align">
                    <a class="waves-effect waves-light modal-trigger center-align tooltipped" href="#modal1"
                       data-position="bottom" data-delay="1" data-tooltip="Clique aqui para escolher uma secretaria"
                    >
                        <h5 class="font-weight-600 grey-text center-align">
                            {{$_GET['avaliacaoSecretariaNome'] ?? 'Avaliação Geral'}}
                            <i class="material-icons">more</i>
                        </h5>
                    </a>
                </div>

                <h4 class="font-weight-500 center-align">{{ $dados->avaliacaoMediaPontuacao }}</h4>

                <div class="row center-align">

                    @php($resto = $dados->avaliacaoMediaPontuacao - (int)$dados->avaliacaoMediaPontuacao)

                    @for($i = 0; $i < (int)$dados->avaliacaoMediaPontuacao; $i++)
                        <i class="material-icons orange-text star">star</i>
                    @endfor

                    @if($resto != 0)
                        <i class="material-icons orange-text star">star_half</i>
                    @endif

                    @if((int)$resto != 0)
                        @for($i = 0; $i < (int)$resto; $i++)
                            <i class="material-icons orange-text star">star_border</i>
                        @endfor
                    @endif
                </div>
                {!! custom_component_tooltip([
                               'texto' => "Avaliação geral ou de uma secretaria, no período de $searhBackDays dias
                               para trás",
                               'position' => 'bottom_right'
                               ])
                !!}
            </div>
        </div>

    </div>
    
    <div class="row">

        <div class="col {{ $chart1['col'] }}">
            <div class="card z-depth-2 border-radius-8"
                 style="min-height: 300px; {{ $chart1['height'] }}">

                <i
                        onclick="expandChart('1', '{{ $chart1['action'] }}')"
                        class="material-icons md-18 md-18 position-absolute grey-text"
                        style="cursor: pointer; top: 5px; right: 5px;">{{ $chart1['icon'] }}</i>

                <h5 class="font-weight-600 grey-text center-align">Total de ocorrências por secretaria</h5>
                <div id="piechart" style="height: 100%;"></div>
                {!! custom_component_tooltip([
                               'texto' => "Total de ocorrência por secretaria, no período de $searhBackDays dias para trás",
                               'position' => 'bottom_right'
                               ])
                !!}
            </div>
        </div>

        <div class="col {{ $chart2['col'] }}">
            <div class="card z-depth-2 border-radius-8"
                 style="min-height: 300px; {{ $chart2['height'] }}">
                <i
                        onclick="expandChart('2', '{{ $chart2['action'] }}')"
                        class="material-icons md-18 position-absolute grey-text"
                        style="cursor: pointer; top: 5px; right: 5px;">{{ $chart2['icon'] }}</i>

                <h5 class="font-weight-600 grey-text center-align">Status x Secretaria</h5>

                <div id="piechart2" style="height: 100%;"></div>

                <div class="center-align">
                    <a class="waves-effect waves-light modal-trigger center-align tooltipped" href="#modalGrafico"
                       data-position="bottom" data-delay="1"
                       data-tooltip="Clique aqui para escolher uma secretaria">
                        <h5 class="font-weight-600 grey-text center-align">{{ $_GET['ocorrenciaSecretariaNome'] ?? 'Total Geral'  }}
                            <i class="material-icons">more</i>
                        </h5>
                    </a>
                </div>
                {!! custom_component_tooltip([
                               'texto' => "Total de ocorrências por secretarias e grupado por status, no período de
                               $searhBackDays dias para trás",
                               'position' => 'bottom_right'
                               ])
                !!}
            </div>
        </div>

        <div class="col {{ $chart3['col'] }}">
            <div class="card z-depth-2 border-radius-8"
                 style="min-height: 300px; {{ $chart3['height'] }}">

                <i
                        onclick="expandChart('3', '{{ $chart3['action'] }}')"
                        class="material-icons md-18 position-absolute grey-text"
                        style="cursor: pointer; top: 5px; right: 5px;">{{ $chart3['icon'] }}</i>
                <h5 class="font-weight-600 grey-text center-align">Subcategoria x Secretaria</h5>

                <div id="piechart3" style="height: 100%;"></div>

                <div class="center-align">
                    <a class="waves-effect waves-light modal-trigger center-align tooltip" href="#modalGrafico3"
                       data-position="bottom" data-delay="1" data-tooltip="Clique aqui para escolher uma secretaria"
                    >
                        <h5 class="font-weight-600 grey-text center-align">{{ $_GET['ocorrenciaSecretariaNomeSub'] ?? 'Total Geral'  }}
                            <i class="material-icons">more</i>
                        </h5>
                    </a>
                </div>
                {!! custom_component_tooltip([
                               'texto' => "Total de ocorrências por secretarias e grupado por subcategorias, no período
                               de $searhBackDays dias para trás",
                               'position' => 'bottom_right'
                               ])
                !!}
            </div>
        </div>

        {{--<div class="col {{ $chart4['col'] }}">
            <div class="card z-depth-2 border-radius-8"
                 style="min-height: 300px; {{ $chart4['height'] }}">
                <i
                        onclick="expandChart('4', '{{ $chart4['action'] }}')"
                        class="material-icons md-18 position-absolute grey-text"
                        style="cursor: pointer; top: 5px; right: 5px;">{{ $chart4['icon'] }}</i>

                <h5 class="font-weight-600 grey-text center-align">Total de Ocorrências Atendidas x Abertas</h5>

                <div id="piechart4" style="height: 100%;"></div>


                <div class="center-align">
                    <a class="waves-effect waves-light modal-trigger center-align tooltipped" href="#modalGrafico"
                       data-position="bottom" data-delay="1"
                       data-tooltip="Clique aqui para escolher uma secretaria">
                    </a>
                </div>
                {!! custom_component_tooltip([
                               'texto' => "Esse gráfico mostra o total de ocorrência atendidas e abertas até a data da última atualização, desconsiderando as ocorrências deletadas",
                               'position' => 'bottom_right'
                               ])
                !!}
            </div>
        </div>--}}

    </div>


    <div class="row">
        <div class="col s4">
            <div class="card z-depth-2 border-radius-8" style="height: 550px; overflow: auto;">

                <table class="centered">
                    <thead>
                    <tr>
                        <h5 class="font-weight-600 grey-text center-align">Abertas x Atendida</h5>
                    </tr>
                    <tr>
                        <th>Secretaria</th>
                        <th>Aberta</th>
                        <th class="width-40">Atendida</th>
                    </tr>
                    </thead>
                    <tbody>

                    @if(!empty($dados->listaSecretariaPercentual))

                        
                        {{--                        <tr class="{{ $cor }} white-text U_font-weight-600">--}}
                        {{--                            <td>Total</td>--}}
                        {{--                            <td>{{ number_format($percentTotalAtendida, 0) . '%' }}</td>--}}
                        {{--                            <td>{{ number_format($percentTotalFinalizada, 0) . '%'}}</td>--}}
                        {{--                        </tr>--}}

                    @endif
                    @foreach($dados->listaSecretariaPercentual as $lista)

                        
                        <tr class="{{ $cor }} white-text">
                            <td>{{ $lista->secretaria_nome }}</td>
                            <td>{{ number_format($porAtendimento, 0) . '%' }}</td>
                            <td>{{ number_format($porFinalizado, 0) . '%'}}</td>
                        </tr>

                    @endforeach

                    </tbody>
                </table>
                {!! custom_component_tooltip([
                               'texto' => "Comparativo em porcentagem das ocorrências com status:<br>"
                               . status_to_string([3,4], '<br>') .
                               "<br> X <br>"
                               . status_to_string([5]) .
                               "<br> No período de $searhBackDays dias para trás"
                               ,
                               'position' => 'top_right'
                               ])
                !!}
            </div>
        </div>

        <div class="col s4">
            <div class="card z-depth-2 border-radius-8" style="max-height: 550px; overflow: auto;">

                <table class="centered">
                    <thead>
                    <tr>
                        <h5 class="font-weight-600 grey-text center-align">Bairros com mais ocorrências</h5>
                    </tr>
                    <tr>
                        <th></th>
                        <th>Bairro</th>
                        <th class="width-40">Total</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>

                    @foreach($dados->listaBairroTotalOcorrencia as $key => $lista)

                        <tr>
                            <td class="font-weight-600">{{ $key + 1 }}º</td>
                            <td>{{ $lista->bairro_nome }}</td>
                            <td>{{ $lista->total }}</td>
                            <td>
                                <a href="/gerenciar/ocorrencia?customSelectBairro={{ $lista->bairro_id }}&pendente_f=true&verificacao_f=true&em_atendimento_f=true&amp;para_atendimento_f=true&"
                                   target="_blank">
                                    <i class="material-icons md-18 grey-text text-darken-2" style="cursor: pointer;"
                                    >remove_red_eye</i>
                                </a>
                            </td>
                        </tr>

                    @endforeach

                    </tbody>
                </table>

                <div class="center-align">
                    <a class="waves-effect waves-light modal-trigger center-align tooltip" href="#modalTabela1"
                       data-position="bottom" data-delay="1" data-tooltip="Clique aqui para escolher uma secretaria"
                    >
                        <h5 class="font-weight-600 grey-text center-align">{{ $_GET['listaBairroTotalOcorrenciaPorSecretariaNomeSub'] ?? 'Total Geral'  }}
                            <i class="material-icons">more</i>
                        </h5>
                    </a>
                </div>
                {!! custom_component_tooltip([
                               'texto' => "Em ordem decrecente os bairros com mais ocorrências, no período de
                               $searhBackDays dias para trás",
                               'position' => 'top_right'
                               ])
                !!}
            </div>
        </div>

        @if($configuration['bloquear_acesso_home'] !== 1)

            <div class="col s4">
                <div class="card z-depth-2 border-radius-8" style="height: 550px; overflow: auto;">

                    <table class="centered" id="chartTop10OcorrenciasApoiadas">
                        <thead>
                        <tr>
                            <h5 class="font-weight-600 grey-text center-align">Top 10 de ocorrências apoiadas</h5>
                        </tr>
                        <tr>
                            <th></th>
                            <th>Protocolo</th>
                            <th class="width-40">Apoios</th>
                        </tr>
                        </thead>
                        <tbody>

                        @foreach($dados->top10OcorrenciasApoiadas as $key => $lista)

                            <tr>
                                <td class="font-weight-600">{{ $key + 1 }}º</td>
                                <td>{{ $lista->codigo }}</td>
                                <td>{{ $lista->total }}</td>
                            </tr>

                        @endforeach

                        </tbody>
                    </table>

                    <div class="center-align">
                        <a class="waves-effect waves-light modal-trigger center-align tooltip" href="#modalTabela2"
                           data-position="bottom" data-delay="1" data-tooltip="Clique aqui para escolher uma secretaria"
                        >
                            <h5 class="font-weight-600 grey-text center-align">{{ $_GET['top10OcorrenciasApoiadasNomeSub'] ?? 'Total Geral'  }}
                                <i class="material-icons">more</i>
                            </h5>
                        </a>
                    </div>
                    {!! custom_component_tooltip([
                               'texto' => "Top 10 das ocorrências mais apoiadas (Curtidas), no período de
                                $searhBackDays dias para trás",
                               'position' => 'top_right'
                               ])
                    !!}
                </div>
            </div>

        @endif

    </div>

    <div class="row">
        <div class="col s12">
            <div class="card z-depth-2 border-radius-8" style="overflow: hidden;">
                <h5 class="font-weight-600 grey-text center-align">Total de ocorrências no mês
                    de {{ custom_name_month() }}</h5>

                <div class="center-align">
                    <a class="waves-effect waves-light modal-trigger center-align tooltip" href="#modalLine1"
                       data-position="bottom" data-delay="1" data-tooltip="Clique aqui para escolher uma secretaria"
                    >
                        <h5 class="font-weight-600 grey-text center-align">{{ $_GET['atendidaXSecretariaGraficoLinhaSecretariaNomeSub'] ?? 'Total Geral'  }}
                            <i class="material-icons">more</i>
                        </h5>
                    </a>
                </div>

                <div id="curve_chart"></div>
                {!! custom_component_tooltip([
                               'texto' => "Em cada dia do mês vigente o total de ocorrências, com os status
                               Abertas(Aberta e Validação), Em Atendimento(Para Atendimento, Em Atendimento), Finalizada, Recusada",
                               'position' => 'top_right'
                               ])
                    !!}
            </div>
        </div>
    </div>

    @if($modules->ENVIO_SMS)

        <div class="row">
            <div class="col s12">
                <div class="card z-depth-2 border-radius-8" style="overflow: hidden;">
                    <h5 class="font-weight-600 grey-text center-align">Total de visualizações dos posts por dia no
                        mês de {{ custom_name_month() }}</h5>

                    {{--<div class="center-align">
                        <a class="waves-effect waves-light modal-trigger center-align tooltip" --}}{{--href="#modalLine1"--}}{{--
                           data-position="bottom" data-delay="1" data-tooltip="Clique aqui para escolher uma secretaria"
                        >
                            <h5 class="font-weight-600 grey-text center-align">Total de visualização dos post por dia no
                                mes de {{ custom_name_month() }}
                                <i class="material-icons">more</i>
                            </h5>
                        </a>
                    </div>--}}

                    <div id="curve_chart_2"></div>
                    {!! custom_component_tooltip([
                                   'texto' => "Em cada dia do mês vigente o total de ocorrências, com os status
                                   Abertas(Aberta e Validaçaõ), Em Atendimento(Para Atendimento, Em Atendimento), Finalizada, Recusada",
                                   'position' => 'top_right'
                                   ])
                        !!}
                </div>
            </div>
        </div>

    @endif

    <div class="row">
        <div class="col s12">
            <div class="card z-depth-2 border-radius-8" style="overflow: hidden;">
                <h5 class="font-weight-600 grey-text center-align">Total de ocorrências nos últimos 30 dias</h5>

                <div class="center-align">
                    <a class="waves-effect waves-light modal-trigger center-align tooltip" href="#modalLine30"
                       data-position="bottom" data-delay="1" data-tooltip="Clique aqui para escolher uma secretaria"
                    >
                        <h5 class="font-weight-600 grey-text center-align">{{ $_GET['atendidaXSecretariaGraficoLinha30SecretariaNomeSub'] ?? 'Total Geral'  }}
                            <i class="material-icons">more</i>
                        </h5>
                    </a>
                </div>

                <div id="curve_chart_thirty_days"></div>
                {!! custom_component_tooltip([
               'texto' => "O total de ocorrências nos últimos trinta dias com os status
               Abertas(Aberta e Validaçaõ), Em Atendimento(Para Atendimento, Em Atendimento), Finalizada, Recusada",
               'position' => 'top_right'
               ])
    !!}
            </div>
        </div>
    </div>

    <!-- Modal Structure -->
    <div id="modal1" class="modal">
        <div class="modal-content">
            <h4 class="font-weight-600 grey-text">Secretarias</h4>
            <p class="font-weight-500 grey-text">Escolha uma secretaria para apresentar a sua nota</p>

            <div class="row">

                <form>

                    <div class="col s4">
                        <p>
                            <input onclick="filtroMudarSecretariaAvaliacao('', 'Avaliação Geral')"
                                   name="avaliacaoSecretaria"
                                   type="radio"
                                   id="test-ava-reset"/>
                            <label for="test-ava-reset" class="orange-text">Avaliação Geral</label>
                        </p>
                    </div>

                    @foreach($secretarias as $secretaria)

                        <div class="col s4">
                            <p>
                                <input onclick="filtroMudarSecretariaAvaliacao('{{ $secretaria->id }}', '{{ $secretaria->nome }}')"
                                       class="with-gap"
                                       name="avaliacaoSecretaria" value="{{ $secretaria->id }}"
                                       type="radio"
                                       id="test{{ $secretaria->id }}"/>
                                <label for="test{{ $secretaria->id }}">{{ $secretaria->nome  }}</label>
                            </p>
                        </div>

                    @endforeach

                </form>

            </div>

        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Fechar</a>
        </div>
    </div>

    <div id="modalGrafico" class="modal">
        <div class="modal-content">
            <h4 class="font-weight-600 grey-text">Secretarias</h4>
            <p class="font-weight-500 grey-text">Escolha uma secretaria para apresentar total ocorrências</p>

            <div class="row">

                <form>

                    <div class="col s4">
                        <p>
                            <input onclick="filtroMudarSecretariaOcorrencia('', 'Geral')"
                                   name="avaliacaoSecretaria"
                                   type="radio"
                                   id="test-ava-reset2"/>
                            <label for="test-ava-reset2" class="orange-text">Avaliação Geral</label>
                        </p>
                    </div>

                    @foreach($secretarias as $secretaria)

                        <div class="col s4">
                            <p>
                                <input onclick="filtroMudarSecretariaOcorrencia('{{ $secretaria->id }}', '{{ $secretaria->nome }}')"
                                       class="with-gap"
                                       name="avaliacaoSecretaria" value="{{ $secretaria->id }}"
                                       type="radio"
                                       id="test-grafico2-{{ $secretaria->id }}"/>
                                <label for="test-grafico2-{{ $secretaria->id }}">{{ $secretaria->nome  }}</label>
                            </p>
                        </div>

                    @endforeach

                </form>

            </div>

        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Fechar</a>
        </div>
    </div>

    <div id="modalGrafico3" class="modal">
        <div class="modal-content">
            <h4 class="font-weight-600 grey-text">Secretarias</h4>
            <p class="font-weight-500 grey-text">Escolha uma secretaria para apresentar total ocorrências</p>

            <div class="row">

                <form>

                    <div class="col s4">
                        <p>
                            <input onclick="filtroMudarSubcategoriaOcorrencia('', 'Geral')"
                                   name="avaliacaoSecretaria"
                                   type="radio"
                                   id="test-ava-reset3"/>
                            <label for="test-ava-reset3" class="orange-text">Avaliação Geral</label>
                        </p>
                    </div>

                    @foreach($secretarias as $secretaria)

                        <div class="col s4">
                            <p>
                                <input onclick="filtroMudarSubcategoriaOcorrencia('{{ $secretaria->id }}', '{{ $secretaria->nome }}')"
                                       class="with-gap"
                                       name="avaliacaoSecretaria" value="{{ $secretaria->id }}"
                                       type="radio"
                                       id="test-grafico3-{{ $secretaria->id }}"/>
                                <label for="test-grafico3-{{ $secretaria->id }}">{{ $secretaria->nome  }}</label>
                            </p>
                        </div>

                    @endforeach

                </form>


            </div>

        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Fechar</a>
        </div>
    </div>

    <div id="modalTabela1" class="modal">
        <div class="modal-content">
            <h4 class="font-weight-600 grey-text">Secretarias</h4>
            <p class="font-weight-500 grey-text">Escolha uma secretaria para apresentar total ocorrências</p>

            <div class="row">

                <form>

                    <div class="col s4">
                        <p>
                            <input onclick="filtroMudarBairrosComMaisOcorrencias('', 'Geral')"
                                   name="avaliacaoSecretaria"
                                   type="radio"
                                   id="test-ava-reset4"/>
                            <label for="test-ava-reset3" class="orange-text">Avaliação Geral</label>
                        </p>
                    </div>

                    @foreach($secretarias as $secretaria)

                        <div class="col s4">
                            <p>
                                <input onclick="filtroMudarBairrosComMaisOcorrencias('{{ $secretaria->id }}', '{{ $secretaria->nome }}')"
                                       class="with-gap"
                                       name="avaliacaoSecretaria" value="{{ $secretaria->id }}"
                                       type="radio"
                                       id="test-tabela1-{{ $secretaria->id }}"/>
                                <label for="test-tabela1-{{ $secretaria->id }}">{{ $secretaria->nome  }}</label>
                            </p>
                        </div>

                    @endforeach

                </form>


            </div>

        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Fechar</a>
        </div>
    </div>

    <div id="modalTabela2" class="modal">
        <div class="modal-content">
            <h4 class="font-weight-600 grey-text">Secretarias</h4>
            <p class="font-weight-500 grey-text">Escolha uma secretaria para apresentar total ocorrências</p>

            <div class="row">
                <form>
                    <div class="col s4">
                        <p>
                            <input onclick="filtroMudarTop10OcorrenciasApoiadas('', 'Geral')"
                                   name="avaliacaoSecretaria"
                                   type="radio"
                                   id="test-ava-reset5"/>
                            <label for="test-ava-reset3" class="orange-text">Avaliação Geral</label>
                        </p>
                    </div>

                    @foreach($secretarias as $secretaria)
                        <div class="col s4">
                            <p>
                                <input onclick="filtroMudarTop10OcorrenciasApoiadas('{{ $secretaria->id }}', '{{ $secretaria->nome }}')"
                                       class="with-gap"
                                       name="avaliacaoSecretaria" value="{{ $secretaria->id }}"
                                       type="radio"
                                       id="test-tabela2-{{ $secretaria->id }}"/>
                                <label for="test-tabela2-{{ $secretaria->id }}">{{ $secretaria->nome  }}</label>
                            </p>
                        </div>
                    @endforeach
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Fechar</a>
        </div>
    </div>

    <div id="modalLine1" class="modal">
        <div class="modal-content">
            <h4 class="font-weight-600 grey-text">Secretarias</h4>
            <p class="font-weight-500 grey-text">Escolha uma secretaria para apresentar total de ocorrências</p>

            <div class="row">
                <form>
                    <div class="col s4">
                        <p>
                            <input onclick="filtroMudarAtendidaXSecretariaGraficoLinhaSecretaria('', 'Geral')"
                                   name="avaliacaoSecretaria"
                                   type="radio"
                                   id="test-ava-reset6"/>
                            <label for="test-ava-reset6" class="orange-text">Avaliação Geral</label>
                        </p>
                    </div>

                    @foreach($secretarias as $secretaria)
                        <div class="col s4">
                            <p>
                                <input onclick="filtroMudarAtendidaXSecretariaGraficoLinhaSecretaria('{{ $secretaria->id }}', '{{ $secretaria->nome }}')"
                                       class="with-gap"
                                       name="avaliacaoSecretaria" value="{{ $secretaria->id }}"
                                       type="radio"
                                       id="test-line1-{{ $secretaria->id }}"/>
                                <label for="test-line1-{{ $secretaria->id }}">{{ $secretaria->nome  }}</label>
                            </p>
                        </div>

                    @endforeach

                </form>


            </div>

        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Fechar</a>
        </div>
    </div>


    <div id="modalLine30" class="modal">
        <div class="modal-content">
            <h4 class="font-weight-600 grey-text">Secretarias</h4>
            <p class="font-weight-500 grey-text">Escolha uma secretaria para apresentar total de ocorrências</p>

            <div class="row">

                <form>

                    <div class="col s4">
                        <p>
                            <input onclick="filtroMudarAtendidaXSecretariaGraficoLinha30Secretaria('', '')"
                                   name="avaliacaoSecretaria30"
                                   type="radio"
                                   id="test-ava-reset6"/>
                            <label for="test-ava-reset6" class="orange-text">Avaliação Geral</label>
                        </p>
                    </div>

                    @foreach($secretarias as $secretaria)
                        <div class="col s4">
                            <p>
                                <input onclick="filtroMudarAtendidaXSecretariaGraficoLinha30Secretaria('{{ $secretaria->id }}', '{{ $secretaria->nome }}')"
                                       class="with-gap"
                                       name="avaliacaoSecretaria30" value="{{ $secretaria->id }}"
                                       type="radio"
                                       id="test-line1-{{ $secretaria->id }}-30"/>
                                <label for="test-line1-{{ $secretaria->id }}-30">{{ $secretaria->nome  }}</label>
                            </p>
                        </div>
                    @endforeach
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Fechar</a>
        </div>
    </div>

@endsection

@section('specific-scripts')

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
        $('.titulo_pagina').text('DashBoard Admin');
        $('#dateForCache').text('{{ \Carbon\Carbon::parse($dados->info->cache_date)->format('d/m/Y H:i:s') }}');
        $('#nav-clear-cache').removeAttr('hidden', 'hidden');
        $('#fixNavBar').attr('hidden', 'hidden');
        $('#nav-clear-cache').find('i').attr('onclick', 'clearCache()');

        $(document).ready(function () {
            $('#btnEsconderNav').click();
        });

        queryStringAtual = '{{ $urlQueryString }}';

        function clearCache() {

            if (queryStringAtual === '') {

                queryStringAtual = '?clearCache=true';

            } else {

                queryStringAtual += '&clearCache=true';

            }

            queryStringAtual = queryStringAtual.replace(/amp;/gi, '');

            sendUrl(queryStringAtual);

        }

        function filtroMudarSecretariaAvaliacao(secretariaId, nome) {

            if (queryStringAtual === '') {

                queryStringAtual = '?avaliacaoSecretariaId=' + secretariaId + '&avaliacaoSecretariaNome=' + nome;

            } else {

                queryStringAtual += '&avaliacaoSecretariaId=' + secretariaId + '&avaliacaoSecretariaNome=' + nome;

            }

            queryStringAtual = queryStringAtual.replace(/amp;/gi, '');

            sendUrl(queryStringAtual);

        }

        function sendFilter() {
            const dataInicial = $('#data_incial').val();
            const dataFinal = $('#data_final').val();

            if(!dataInicial || !dataFinal){
                alert('Para filtrar defina uma data inicial e final');
            }

            if (queryStringAtual === '') {

                queryStringAtual = '?dataInicial=' + dataInicial + '&dataFinal=' + dataFinal;

            } else {

                queryStringAtual += '&dataInicial=' + dataInicial + '&dataFinal=' + dataFinal;

            }

            queryStringAtual = queryStringAtual.replace(/amp;/gi, '');

            sendUrl(queryStringAtual);

        }

        function filtroMudarSecretariaOcorrencia(secretariaId, nome) {

            if (queryStringAtual === '') {

                queryStringAtual = '?totalOcorrenciaPorEspecificaSecretaria=' + secretariaId + '&ocorrenciaSecretariaNome=' + nome;

            } else {

                queryStringAtual += '&totalOcorrenciaPorEspecificaSecretaria=' + secretariaId + '&ocorrenciaSecretariaNome=' + nome;

            }

            queryStringAtual = queryStringAtual.replace(/amp;/gi, '');

            sendUrl(queryStringAtual);

        }

        function filtroMudarSubcategoriaOcorrencia(secretariaId, nome) {

            if (queryStringAtual === '') {

                queryStringAtual = '?ocorrenciaPorSubcategoria=' + secretariaId + '&ocorrenciaSecretariaNomeSub=' + nome;

            } else {

                queryStringAtual += '&ocorrenciaPorSubcategoria=' + secretariaId + '&ocorrenciaSecretariaNomeSub=' + nome;

            }

            queryStringAtual = queryStringAtual.replace(/amp;/gi, '');

            sendUrl(queryStringAtual);

        }

        function filtroMudarBairrosComMaisOcorrencias(secretariaId, nome) {

            if (queryStringAtual === '') {

                queryStringAtual = '?listaBairroTotalOcorrenciaPorSecretaria=' + secretariaId + '&listaBairroTotalOcorrenciaPorSecretariaNomeSub=' + nome;

            } else {

                queryStringAtual += '&listaBairroTotalOcorrenciaPorSecretaria=' + secretariaId + '&listaBairroTotalOcorrenciaPorSecretariaNomeSub=' + nome;

            }

            queryStringAtual = queryStringAtual.replace(/amp;/gi, '');

            sendUrl(queryStringAtual);

        }

        function filtroMudarTop10OcorrenciasApoiadas(secretariaId, nome) {

            if (queryStringAtual === '') {

                queryStringAtual = '?top10OcorrenciasApoiadas=' + secretariaId + '&top10OcorrenciasApoiadasNomeSub=' + nome;

            } else {

                queryStringAtual += '&top10OcorrenciasApoiadas=' + secretariaId + '&top10OcorrenciasApoiadasNomeSub=' + nome;

            }

            queryStringAtual = queryStringAtual.replace(/amp;/gi, '');

            sendUrl(queryStringAtual);

        }

        function filtroMudarAtendidaXSecretariaGraficoLinhaSecretaria(secretariaId, nome) {

            if (queryStringAtual === '') {

                queryStringAtual = '?atendidaXSecretariaGraficoLinhaSecretaria=' + secretariaId + '&atendidaXSecretariaGraficoLinhaSecretariaNomeSub=' + nome;

            } else {

                queryStringAtual += '&atendidaXSecretariaGraficoLinhaSecretaria=' + secretariaId + '&atendidaXSecretariaGraficoLinhaSecretariaNomeSub=' + nome;

            }

            queryStringAtual = queryStringAtual.replace(/amp;/gi, '');

            sendUrl(queryStringAtual);

        }

        function filtroMudarAtendidaXSecretariaGraficoLinha30Secretaria(secretariaId, nome) {
            alert(secretariaId, nome);
            if (queryStringAtual === '') {

                queryStringAtual = '?atendidaXSecretariaGraficoLinha30Secretaria=' + secretariaId + '&atendidaXSecretariaGraficoLinha30SecretariaNomeSub=' + nome;

            } else {

                queryStringAtual += '&atendidaXSecretariaGraficoLinha30Secretaria=' + secretariaId + '&atendidaXSecretariaGraficoLinha30SecretariaNomeSub=' + nome;

            }

            queryStringAtual = queryStringAtual.replace(/amp;/gi, '');

            sendUrl(queryStringAtual);

        }

        function expandChart(chart, action) {

            if (action === 'normal') {

                queryStringAtual = queryStringAtual.replace('chart' + chart, '');
                sendUrl(queryStringAtual);
                return;

            }

            if (queryStringAtual === '') {

                queryStringAtual = '?chart' + chart

            } else {

                queryStringAtual += '&chart' + chart

            }

            sendUrl(queryStringAtual);

        }

        function sendUrl(url) {
            url = url.replace(/amp;/gi, '');
            window.location.href = url;
        }

        google.charts.load('current', {'packages': ['corechart'], 'language': 'pt'});
        google.charts.setOnLoadCallback(drawChart1);
        google.charts.setOnLoadCallback(drawChart2);
        google.charts.setOnLoadCallback(drawChart3);
        google.charts.setOnLoadCallback(drawChart4);

        function drawChart1() {

            var data = google.visualization.arrayToDataTable([
                ['Ocorrências', 'Por Secretaria'],

                    @foreach($dados->totalOcorrenciaPorSecretaria as $graficoDado)
                ['{{ $graficoDado->secretaria }}', {{ $graficoDado->total }}],
                @endforeach

            ]);
            var options = {
                pieSliceText: 'label'
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart'));

            // data.sort([{column: 1}]);
            // data.sort([{column: 0, desc: true}])
            chart.draw(data, options);
        }

        function drawChart2() {


            @php($colorCustom = [
             1 => 'rgb(11,168,79)',
             2 => 'rgb(237,50,55)',
             3 => 'rgb(255,242,18)',
             4 => 'rgb(0,175,239)',
             5 => 'rgb(168,39,163)',
             6 => 'rgb(0,0,0)'
            ])


            var slicesCustom = {
                        @foreach($dados->totalOcorrenciaPorEspecificaSecretaria as $key => $graficoDado)
                                @if($graficoDado->total == 0)
                                @continue
                                @endif
                                {{ $key }}:
                            {
                                color: '{{ $colorCustom[$graficoDado->status_id] }}'
                            }
                    ,

                        @endforeach
                }
            ;

            var data = google.visualization.arrayToDataTable([
                ['Ocorrências', 'Por Secretaria'],

                    @foreach($dados->totalOcorrenciaPorEspecificaSecretaria as $graficoDado)
                ['{{ $graficoDado->nome }}', {{ $graficoDado->total }}],
                @endforeach

            ]);

            var options = {
                pieHole: 0.0,
                slices: slicesCustom,
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart2'));

            chart.draw(data, options);
        }

        function drawChart4() {
            var data = google.visualization.arrayToDataTable([
                ['Abertas', 'Por Atendidas'],
                ['Abertas', {{$totalOcorrencias->data->abertas}}],
                ['Atendidas', {{$totalOcorrencias->data->atendidas}}]

            ]);


            var options = {
                pieHole: 0.0,
                slices: {
                    0: {color: 'blue'},
                    1: {color: 'green'},

                }
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart4'));

            chart.draw(data, options);
        }


        function drawChart3() {

            var data = google.visualization.arrayToDataTable([
                ['Ocorrências', 'Por Subcategoria'],

                    @foreach($dados->ocorrenciaPorSubcategoria as $graficoDado)
                ['{{ $graficoDado->nome }}', {{ $graficoDado->total }}],
                @endforeach

            ]);

            var options = {
                pieSliceText: 'label',
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart3'));

            chart.draw(data, options);
        }

    </script>

    <script type="text/javascript">
        google.charts.load('current', {'packages': ['line'], 'language': 'pt'});
        google.charts.setOnLoadCallback(drawChart);
        google.charts.setOnLoadCallback(drawChart30);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Dias', 'Abertas', 'Em Atendimento', 'Finalizada', 'Recusada'],

                    @foreach($dados->atendidaXSecretariaGraficoLinha as $days => $data)

                [
                    '{{ $days + 1 }}',
                    {{ $data->abertas }},
                    {{ $data->atendimento }},
                    {{ $data->finalizada }},
                    {{ $data->recusada }}
                ],

                @endforeach

            ]);

            var options = {
                legend: {position: 'bottom'},
                height: 500,
                chartArea: {
                    left: 40,
                    top: 10,
                    width: window.screen.availWidth - 100,
                    height: 350
                },
                colors: ['#ffc400', '#00b0ff', '#388e3c', '#b71c1c']
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

            chart.draw(data, options);
        }


        google.charts.load('current', {'packages': ['line'], 'language': 'pt'});
        google.charts.setOnLoadCallback(drawChart2);

        function drawChart2() {
            var data = google.visualization.arrayToDataTable([
                ['Dias', 'Total de Visalização'],

                    @foreach($dados->linhaPostVisualizacao as $days => $data)

                [
                    '{{ $days + 1 }}',
                    {{ $data->total }}
                ],

                @endforeach

            ]);

            var options = {
                legend: {position: 'bottom'},
                height: 500,
                chartArea: {
                    left: 40,
                    top: 10,
                    width: window.screen.availWidth - 100,
                    height: 350
                },
                colors: ['#08db43', '#00b0ff']
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart_2'));

            chart.draw(data, options);
        }

        function drawChart30() {
            var data = google.visualization.arrayToDataTable([
                ['Dias', 'Abertas/Verificadas', 'Atendidas'],

                    @foreach($dados->atendidaXSecretariaGraficoLinha30 as $days => $data)

                [
                    '{{ 29 - $days }}',
                    {{ $data->abertas }},
                    {{ $data->finalizada }},
                ],

                @endforeach

            ]);

            var options = {
                legend: {position: 'bottom'},
                height: 500,
                chartArea: {
                    left: 40,
                    top: 10,
                    width: window.screen.availWidth - 100,
                    height: 350
                },
                colors: ['#ffc400', '#00b0ff', '#388e3c', '#b71c1c']
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart_thirty_days'));

            chart.draw(data, options);


        }

    </script>


@stop