@php($srcImage = (!empty($ocorrencia->arquivos_ocorrencias) ?
                        $ocorrencia->arquivos_ocorrencias[0]->arquivo :
                        custom_system('API_URL') . '/' . $ocorrencia->subcategoria->imagem
                         ))

@php($srcDefault = (!empty($ocorrencia->arquivos_ocorrencias) ? false : true ))

@php($rotoloBackGround = \App\Services\ControleColor::arrayColor[$ocorrencia->status_id])

@php($statusCustom = session('configuration')['ocorrencia_status'])
@php($ocorrenciaStatus = $statusCustom[$ocorrencia->status_id - 1]->nome)


@php($bairro = (isset($ocorrencia->bairro->nome) ? $ocorrencia->bairro->nome : '-----------------'))
@php($rua = (isset($ocorrencia->rua->nome) ? $ocorrencia->rua->nome : '-----------------'))

@php($complemento = (!empty($ocorrencia->complemento) ? $ocorrencia->complemento : '-----------------'))
@php($complementoExist = (!empty($ocorrencia->complemento) ? true : false))

@php($pontoReferencia = (!empty($ocorrencia->ponto_referencia) ? $ocorrencia->ponto_referencia : '-----------------'))
@php($pontoReferenciaExist = (!empty($ocorrencia->ponto_referencia) ? true : false))

@php($latitude = null)
@php($longitude = null)
@php($typeMap = null)

@if($options['map'] == 'true')

    @if(!empty($ocorrencia->lat))
        @php($latitude = $ocorrencia->lat)
        @php($longitude = $ocorrencia->long)
        @php($typeMap = 'MARKER')
    @else
        @if(!empty($ocorrencia->bairro->lat))
            @php($latitude = $ocorrencia->bairro->lat)
            @php($longitude = $ocorrencia->bairro->lon)
            @php($typeMap = 'LOCATE')
        @endif
    @endif

@endif


@if(!empty($ocorrencia->orcamento_categorias_id))
    <a id="btnFloatAction" onclick="seeMore()"
       class="btn-large waves-effect waves-light position-absolute z-depth-2 scale-out scale-transition"
       style="right: 20px;
            top: 260px;">
        andamento das obras
    </a>
@endif


@if(empty($ocorrencia->orcamento_categorias_id))
    <a id="btnFloatAction" onclick="seeMore()"
       class="btn-floating btn-large waves-effect waves-light position-absolute z-depth-2 scale-out scale-transition"
       style="
           right: 20px;
            top: 260px;
                "
    >
        <i class="material-icons" id="iconFloatAction">chat</i>
    </a>
@endif

<div class="row contentFirst" style="max-height: 300px;">

    <div class="contentFirst grey-text text-darken-3">

        <div class="card position-absolute z-depth-3 map-ocorrencia-endereco-card background_transparent_1
            border-radius-10 valign-wrapper">
            <i class="material-icons md-18">place</i>
            <span class="no-padding no-margin font-weight-500">&nbsp;&nbsp;{{ $bairro }}</span>
            <span class="no-padding no-margin font-weight-500">&nbsp;&nbsp;{{ $rua }}</span>
        </div>

        @if($complementoExist == true)

            <div class="card position-absolute z-depth-3 map-ocorrencia-endereco-card background_transparent_1
            border-radius-10 valign-wrapper"
                 style="top: 37px;"
            >
                <i class="material-icons md-18">more</i>
                <span class="no-padding no-margin font-weight-500">&nbsp;&nbsp;{{ $complemento }}</span>
            </div>

        @endif

        @if($pontoReferenciaExist == true)

            <div class="card position-absolute z-depth-3 map-ocorrencia-endereco-card background_transparent_1
            border-radius-10 valign-wrapper"
                 style="top: 74px;"
            >
                <i class="material-icons md-18">more</i>
                <span class="no-padding no-margin font-weight-500">&nbsp;&nbsp;{{ $pontoReferencia }}</span>
            </div>

        @endif

        @if($latitude == null)

            @if($srcDefault == false)

                <i class="material-icons position-absolute white-text icon_obove_img">face</i>

            @endif

            <span class="position-absolute font-weight-900 z-depth-2 rotulo-ocorrencia white-text"
                  style="background: {{ $rotoloBackGround }};">{{ $ocorrenciaStatus }}</span>

            <img class="img_card_ocorrencia_more_detail" title="Clique para visualizar mais detalhes"
                 src="{{ $srcImage }}">

        @endif

        @if($latitude != null)

            <div id="map" style="height: 300px;"></div>

        @endif

    </div>


    <br>
</div>

<div class="row contentFirst grey-text text-darken-3 padding-25-custom">

    <div class="col s12">

        <blockquote style="border-color: orange">
            <span class="font-weight-800">{{ $ocorrencia->texto }}</span>
        </blockquote>

    </div>

    <div class="col s12">

        <div class="row valign-wrapper">

            <div class="col s8 l3" style="margin-left: 0;">
                <i class="material-icons md-18">vpn_key</i>
                <span class="no-padding no-margin font-weight-500">&nbsp;&nbsp;{{ $ocorrencia->codigo }}</span>
            </div>

            <div class="col s4 l5 valign-wrapper" style="margin-right: 20px;">

                <div style="margin-right: 15px;" class="valign-wrapper">
                    <i id="btnCurtir" class="material-icons md-18" style="cursor: pointer"
                       onclick="aderir('{{ $ocorrencia->id }}')">thumb_up</i>
                    <span id="totalCurtir"
                          class="no-padding no-margin font-weight-500">&nbsp;&nbsp;{{ count($ocorrencia->adesoes) }}</span>
                </div>

                <div style="margin-right: 15px;" class="valign-wrapper">
                    <i class="material-icons md-18">remove_red_eye</i>
                    <span class="no-padding no-margin font-weight-500">&nbsp;&nbsp;{{ $ocorrencia->visualizacoes }}</span>
                </div>

            </div>

        </div>

        <div class="row">
            <div class="col l4 s12 valign-wrapper">
                <i class="material-icons md-18">business</i>
                <span class="no-padding no-margin font-weight-500">&nbsp;&nbsp;{{ $ocorrencia->subcategoria->categoria->nome }}</span>
            </div>
        </div>

        <div class="row">
            <div class="col l4 s12 valign-wrapper">
                <i class="material-icons md-18">subdirectory_arrow_right</i>
                <span class="no-padding no-margin font-weight-500">&nbsp;&nbsp;{{ $ocorrencia->subcategoria->nome }}</span>
            </div>
        </div>

        @if($ocorrencia->status_id === \App\Models\Status::FINALISADA and $ocorrencia->nota !== null)

            <div class="row contentFirst grey-text text-darken-3" style="margin-top: 20px; margin-bottom: 10px;">
                <div class="col s12">
                    <span class="no-padding no-margin font-weight-900">Avaliação do Atendimento</span>
                </div>
            </div>

            @if($ocorrencia->nota !== null)

                <div class="row">

                    <div class="col s12">

                        @php($maximoEstrela = 5)

                        @if($ocorrencia->nota != null)
                            @for($i = 0; $i < $ocorrencia->nota; $i++)
                                <i class="material-icons orange-text star">star</i>
                            @endfor

                            @for($i = 0; $i < ($maximoEstrela - $ocorrencia->nota); $i++)
                                <i class="material-icons orange-text star">star_border</i>
                            @endfor
                        @endif

                    </div>

                </div>

            @endif
        @endif

        @if(session('configuration')['bloquear_compartilhamento'] !== 1)

            <div class="row contentFirst grey-text text-darken-3" style="margin-top: 20px; margin-bottom: 10px;">
                <div class="col s12">
                    <span class="no-padding no-margin font-weight-900">Compartilhar</span>
                </div>
            </div>

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

                    <div class="a2a_kit a2a_kit_size_32 a2a_default_style "
                         data-a2a-url="{{ custom_system('APP_URL') }}/home?ocorrenciaShare={{ $ocorrencia->id }}"
                         data-a2a-title="{{ custom_system('NOME_SISTEMA') }}">
                        <a class="a2a_button_whatsapp"></a>
                        <a class="a2a_button_telegram"></a>
                        <a class="a2a_button_facebook"></a>
                        <a class="a2a_button_twitter"></a>
                    </div>
                    <script async src="https://static.addtoany.com/menu/page.js"></script>

                </div>
            </div>

        @endif

    </div>
</div>


<div class="row contentFirst padding-25-custom grey-text text-darken-3" style="margin-top: 20px;">
    <div class="col s12">
        <span class="no-padding no-margin font-weight-900">Galeria</span>
    </div>
</div>

<div class="row padding-25-custom contentFirst" style="margin-bottom: 20px;">
    <div class="">

        @foreach($ocorrencia->arquivos_ocorrencias as $arquivo)

            <div class="col l2 s6" style="margin-bottom: 20px;">

                <img class="materialboxed border-radius-6" src="{{ $arquivo->arquivo }}"
                     style="width: 100px; height: 100px; object-fit: cover;">

            </div>

        @endforeach

        @foreach($ocorrencia->comentario as $comentario)
            @if(empty($comentario->arquivo))
                @continue
            @endif

            <div class="col l2 s6" style="margin-bottom: 20px;">
                <img class="materialboxed border-radius-6"
                     src="{{ custom_system('API_URL') }}/{{ $comentario->arquivo }}"
                     style="width: 100px; height: 100px; object-fit: cover;">
            </div>

        @endforeach

    </div>
</div>

<div class="row contentFirst padding-25-custom grey-text text-darken-3">
    <div class="col s12">
        <span class="font-weight-900">Timeline do atendimento</span>
    </div>
    <div class="col s12" style="margin-top: 20px;">
        <div class="timeline">

            @php($countChange = 0)
            @foreach($ocorrencia->historicos as $keyHistorico => $historico)

                @foreach($ocorrencia->history_change->secretaria_subcatgoria as $keySubcategoria => $historicoSubcategoria)

                    @if($keySubcategoria === 0 )
                        @continue
                    @endif

                    @php($historicoSubcategoriaDate = \Carbon\Carbon::parse($historicoSubcategoria->data))
                    @php($historicoDataCurrent = \Carbon\Carbon::parse($historico->created_at))

                    @if(isset($ocorrencia->historicos[$keyHistorico + 1]))

                        @php($historicoDataNext = \Carbon\Carbon::parse($ocorrencia->historicos[$keyHistorico + 1]->created_at))

                    @else

                        @php($historicoDataNext = \Carbon\Carbon::now())

                    @endif

                    @if($historicoSubcategoriaDate->between($historicoDataCurrent, $historicoDataNext)
                        and
                        $countChange > 0)

                        <div class="timeline-event">
                            <div class="timeline-content" style="height: 120px;">
                                <div>

                                    <p class="no-padding no-margin font-weight-600 grey-text text-darken-3">Troca de
                                        secretaria e subcategoria</p>
                                    <div class="row no-padding no-margin">
                                        <div class="col s2 no-margin">
                                            <p class="no-padding no-margin">Secretaria:</p>
                                            <p class="no-padding no-margin">Tipo:</p>
                                            <p class="no-padding no-margin">Data:</p>
                                        </div>
                                        <div class="col s3 no-margin">
                                            <p class="no-padding no-margin">{{ $ocorrencia->history_change->secretaria_subcatgoria[$keySubcategoria - 1]->categoria }}</p>
                                            <p class="no-padding no-margin">{{ $ocorrencia->history_change->secretaria_subcatgoria[$keySubcategoria - 1]->subcategoria }}</p>
                                            <p class="no-padding no-margin">
                                                {{ \Carbon\Carbon::parse($ocorrencia->history_change->secretaria_subcatgoria[$keySubcategoria - 1]->data)->format('d/m/Y') }}
                                            </p>
                                        </div>
                                        <div class="col s1 no-margin">
                                            <i class="material-icons">chevron_right</i>
                                        </div>
                                        <div class="col s3 no-margin">
                                            <p class="no-padding no-margin">{{ $historicoSubcategoria->categoria }}</p>
                                            <p class="no-padding no-margin">{{ $historicoSubcategoria->subcategoria }}</p>
                                            <p class="no-padding no-margin">
                                                {{ \Carbon\Carbon::parse($historicoSubcategoria->data)->format('d/m/Y') }}
                                            </p>
                                        </div>
                                    </div>
                                    {{--<p class="no-padding no-margin">###############</p>--}}

                                </div>
                            </div>
                            <div class="timeline-badge white-text green lighten-1" style="top: 0;">
                                <i class="material-icons">update</i>
                            </div>
                        </div>

                    @endif

                    @php($countChange++)

                @endforeach

                @php($rotoloBackGround = \App\Services\ControleColor::arrayColor[$historico->status_id])
                @php($ocorrenciaStatus = \App\Models\Status::statusArray[$historico->status_id])


                @if(!in_array($historico->status_id , [
                \App\Models\Status::EM_ATENDIMENTO,
                \App\Models\Status::FINALISADA
                ]))

                    <div class="timeline-event">
                        <div class="timeline-content" style="height: 70px;">
                            <div>

                                <p class="no-padding no-margin font-weight-600 grey-text text-darken-3">{{ $statusCustom[$historico->status_id - 1]->nome }}</p>
                                <p class="no-padding no-margin">{{ \Carbon\Carbon::parse($historico->created_at)->format('d/m/Y') }}</p>

                            </div>
                        </div>
                        <div class="timeline-badge white-text" style="background: {{ $rotoloBackGround }}; top: 0;">
                            <i class="font-weight-900" style="font-style: normal;">{{ $historico->status_id }}</i>
                        </div>
                    </div>

                @endif


                @if($historico->status_id === \App\Models\Status::EM_ATENDIMENTO)

                    <div class="timeline-event">
                        <div class="timeline-content">
                            <div>
                                <p class="no-padding no-margin font-weight-600 grey-text text-darken-3">{{ $statusCustom[$historico->status_id - 1]->nome }}</p>
                                <p class="no-padding no-margin">{{ \Carbon\Carbon::parse($historico->created_at)->format('d/m/Y') }}</p>


                                @foreach($ocorrencia->acoes as $acao)

                                    <div class="row">
                                        <div class="col s12 valign-wrapper">

                                            <i class="material-icons md-18">
                                                {{ ($acao->pivot->concluido == 1 ? 'check' : 'access_time') }}
                                            </i>

                                            <span class="no-margin no-padding">&nbsp&nbsp {{ $acao->nome }}</span>
                                        </div>
                                    </div>

                                @endforeach


                            </div>
                        </div>
                        <div class="timeline-badge white-text" style="background: {{ $rotoloBackGround }}; top: 0;">
                            <i class="font-weight-900" style="font-style: normal;">{{ $historico->status_id }}</i>
                        </div>
                    </div>

                @endif

                @if($historico->status_id === \App\Models\Status::FINALISADA)

                    @php($maximoEstrela = 5)

                    <div class="timeline-event">
                        <div class="timeline-content">
                            <div>
                                <p class="no-padding no-margin font-weight-600 grey-text text-darken-3">{{ $statusCustom[$historico->status_id - 1]->nome }}</p>
                                <p class="no-padding no-margin">{{ \Carbon\Carbon::parse($historico->created_at)->format('d/m/Y') }}</p>

                                @foreach($ocorrencia->acoes as $acao)

                                    <div class="row">
                                        <div class="col s12 valign-wrapper">

                                            <i class="material-icons md-18">
                                                {{ ($acao->pivot->concluido == 1 ? 'check' : 'access_time') }}
                                            </i>

                                            <span class="no-margin no-padding">&nbsp&nbsp {{ $acao->nome }}</span>
                                        </div>
                                    </div>

                                @endforeach


                            </div>
                        </div>
                        <div class="timeline-badge white-text" style="background: {{ $rotoloBackGround }}; top: 0;">
                            <i class="font-weight-900" style="font-style: normal;">{{ $historico->status_id }}</i>
                        </div>
                    </div>

                @endif

            @endforeach


        </div>


    </div>
</div>


<div class="row contentSecond" hidden>

    <div class="U_full-widht z-depth-2 grey lighten-3 valign-wrapper U_height-80">

        <a class="btn btn-flat btn-floating U_margin_left-15" onclick="backHome()">
            <i class="material-icons black-text">arrow_back</i>
        </a>

        <img class="circle z-depth-2" src="{{ custom_system('LOGO_PREFEITURA') }}"
             style="width: 65px; height: 65px; margin-left: 10px;">

        <div class="U_margin_left-20">
            <p class="font-weight-800 U_no-margin">{{ $ocorrencia->subcategoria->categoria->nome }}</p>
            <p class="font-weight-500 U_no-margin truncate">{{ $ocorrencia->subcategoria->categoria->descricao }}</p>
        </div>

    </div>

    <div class="row" style="padding: 50px; padding-top: 90px;">
        @php($key = 0)
        @forelse($ocorrencia->comentario as $key => $comentario)

            <div class="row" id="comentario-{{ $key }}">

                <div class="col s6 card white border-radius-6 z-depth-2">

                    @if($comentario->arquivo != null)

                        <div class="row">
                            <div class="col s12 no-padding">
                                <img src="{{ custom_system('API_URL_production')  . '/' . $comentario->arquivo }}"
                                     style="width: 100%;">
                            </div>
                        </div>

                    @endif

                    <div class="row">
                        <div class="col s12">
                            <span class="font-weight-500">{{ $comentario->texto }}</span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="right">
                            <span class="font-weight-400"
                                  style="margin-right: 10px; font-size: 12px;">{{ \Carbon\Carbon::parse($comentario->created_at)->format('d/m/Y h:i') }}</span>
                        </div>
                    </div>

                </div>

            </div>

        @empty

            <br><br><br><br><br><br><br><br>
            <h5 class="center-align">
                <i class="material-icons md-48 grey-text text-lighten-1">message</i>
            </h5>
            <h6 class="font-weight-800 grey-text text-lighten-1 center-align">Essa ocorrência ainda não possui
                mensagens</h6>

        @endforelse

    </div>

</div>

<script>

    $(document).ready(function () {
        $('.materialboxed').materialbox();
    });


    $(document).ready(function () {

        setTimeout(function () {

            $('#btnFloatAction').removeClass('scale-out');
            $('#btnFloatAction').removeClass('scale-transition');

        }, 200)

    });

    function seeMore() {

        $('#btnFloatAction').css('top', '10px');
        $('#iconFloatAction').text('close');
        $('.contentFirst').attr('hidden', 'hidden');
        $('.contentSecond').removeAttr('hidden', 'hidden');
        $('#btnFloatAction').attr('onclick', 'backHome()');

        window.location.href = '#comentario-{{ $key }}';

    }

    function backHome() {

        $('#btnFloatAction').css('top', '260px');
        $('#iconFloatAction').text('chat');
        $('.contentFirst').removeAttr('hidden', 'hidden');
        $('.contentSecond').attr('hidden', 'hidden');
        $('#btnFloatAction').attr('onclick', 'seeMore()');

        window.location.href = '#map';

    }

</script>


<script>

    var latitude = '{{ $latitude }}';
    var longitude = '{{ $longitude }}';
    var typeMap = '{{ $typeMap }}';

    @if($options['map'] == 'true')

    $(document).ready(function () {
        if (latitude !== '') {
            initialize();
        }
    });

    @endif

    function initialize() {

        if (latitude === null || isNaN(latitude)) {
            return;
        }

        var local = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
        var map = new google.maps.Map(document.getElementById('map'), {

            @if($typeMap === 'MARKER')

            zoom: 17,

            @else

            zoom: 15,

            @endif

            center: local,
            mapTypeId: 'roadmap',
            disableDefaultUI: true,
            zoomControl: false,
            scaleControl: false,
            scrollwheel: false,
            disableDoubleClickZoom: true,
            draggable: false
        });

        if (typeMap === 'MARKER') {
            addMarker(local, map);
        }

        $('#div_maps').removeAttr('hidden', 'hidden');

    }

    function addMarker(location, map) {
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>