@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($ocorrenciaStatus = \App\Models\Status::statusArray[$ocorrencia->status_id])

@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(!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

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

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

            <div class="col s3 valign-wrapper">
                <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="valign-wrapper right" style="margin-right: 20px;">

                <div style="margin-right: 15px; cursor: pointer" class="valign-wrapper">
                    <i class="material-icons md-18">share</i>
                </div>

                <div style="margin-right: 15px;" class="valign-wrapper">
                    <i class="material-icons md-18">thumb_up</i>
                    <span 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 s4 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 s4 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>

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

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


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

                <img class="materialboxed" src="{{ $arquivo->arquivo }}" style="width: 100%;">

            </div>

        @empty

            <div class="col s12 valign-wrapper grey-text text-darken-1">
                <i class="material-icons md-18">block</i>
                <span class="no-padding no-margin font-weight-900">&nbsp; Usuário não envio foto</span>
            </div>

        @endforelse

    </div>
</div>

<div class="row contentFirst padding-25-custom grey-text text-darken-3">
    <div class="col s12">
        <span class="no-padding no-margin font-weight-900">Time line do atendimento</span>
    </div>
    <div class="col s12">

        <div class="timeline">

            @foreach($ocorrencia->historicos as $historico)

                @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; padding-top: 15px;">
                            <div>

                                <p class="no-padding no-margin font-weight-600 grey-text text-darken-3">{{ $ocorrenciaStatus }}</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 }}">
                            <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" style="padding-top: 78px;">
                            <div>
                                <p class="no-padding no-margin font-weight-600 grey-text text-darken-3">{{ $ocorrenciaStatus }}</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 }}">
                            <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" style="padding-top: 98px;">
                            <div>
                                <p class="no-padding no-margin font-weight-600 grey-text text-darken-3">{{ $ocorrenciaStatus }}</p>
                                <p class="no-padding no-margin">{{ \Carbon\Carbon::parse($historico->created_at)->format('d/m/Y') }}</p>

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

                                        <div class="col-12">

                                            @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>
                                </div>

                                @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 }}">
                            <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="col s12 z-depth-2 valign-wrapper grey lighten-2" style="min-height: 80px;">

        <div class="row">
            <div class="col s5">
                <img class="circle white z-depth-2" src="/images/avatar/avatar-1.png"
                     style="width: 65px; margin-left: 10px;">
            </div>
            <div class="col s6" style="margin-top: 10px;">
                <p class="no-padding no-margin font-weight-600">User_nome</p>
                <p class="no-padding no-margin font-weight-400">{{ $ocorrencia->subcategoria->categoria->nome }}</p>
            </div>
        </div>
    </div>

    <div class="row" style="padding: 50px;">

        @forelse($ocorrencia->comentario as $comentario)

            <div class="row">

                <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><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
                messagens</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()');

    }

    function backHome() {

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

    }

</script>


<script>

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

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

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

        google.maps.event.addListener(map, 'click', function (event) {
            addMarker(event.latLng, map);
        });

        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>