@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

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

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

            <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


            @if($ocorrencia->nota === null and $ocorrencia->user_id === session('user')->id)

                <div class="col s5 card white z-depth-2 border-radius-5 center teal lighten-3">

                    <div class="row padding-3">

                        <div class="col s12">
                            <span class="font-weight-500">Marque abaixo a sua avaliação.</span>
                        </div>


                        <div class="col s12">
                            <i onclick="notaAvaliacao(1)" id="star_1" class="material-icons orange-text star"
                               style="cursor: pointer">star</i>
                            <i onclick="notaAvaliacao(2)" id="star_2" class="material-icons orange-text star"
                               style="cursor: pointer">star_border</i>
                            <i onclick="notaAvaliacao(3)" id="star_3" class="material-icons orange-text star"
                               style="cursor: pointer">star_border</i>
                            <i onclick="notaAvaliacao(4)" id="star_4" class="material-icons orange-text star"
                               style="cursor: pointer">star_border</i>
                            <i onclick="notaAvaliacao(5)" id="star_5" class="material-icons orange-text star"
                               style="cursor: pointer">star_border</i>
                        </div>

                        <div class="col s12 center">

                            <div id="btnSendNota">
                                <a class="waves-effect waves-teal btn-flat font-weight-500"
                                   onclick="saveNota()"
                                >ENVIAR</a>
                            </div>

                            <div id="loadSendNota" hidden>
                                <div class="progress">
                                    <div class="indeterminate"></div>
                                </div>
                            </div>

                            <div id="postLoad" hidden>
                                <span class="font-weight-600">
                                    Recebemos sua nota.
                                </span>
                            </div>

                            <div id="postLoadErro" hidden>
                                <span class="font-weight-600">
                                    Não foi possivel enviar a sua nota.
                                </span>
                            </div>

                        </div>

                        <form id="form-avaliacao" method="get">

                            <input hidden value="1" name="nota" id="nota-avaliacao">
                            <input hidden value="{{$ocorrencia->id}}" name="id">

                        </form>
                    </div>

                </div>

            @else

                <span class="font-weight-400 grey-text text-darken-3">Aguardando avaliação</span>

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

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


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

                <img class="materialboxed border-radius-6" 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 enviou 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">Linha do tempo 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>

    @if (isset($ocorrencia->user_id))
        <div class="row">
            <div class="col s12 right-align">
                <button class="btn-flat red-text right-align waves-effect waves-light" id="delete-occurrence">
                    Excluir ocorrência
                </button>
            </div>
        </div>
    @endif
</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: 100px;">
        @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-500"
                                  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>

<div class="modal-bg" hidden>

    <input hidden id="occurrence-to-delete">

    <div class="modal-del">
        <h5>Tem certeza de que deseja excluir essa ocorrência?</h5>
        <strong>Após a exclusão, você e os operadores do sistema perderão acesso aos dados dessa ocorrência!</strong>

        <div>
            <button class="btn-flat" id="cancel-delete">Cancelar</button>
            <button class="btn-flat red-text" id="confirm-delete">Confirmar</button>
        </div>
    </div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js" async></script>

<script>
    async function deleteOccurrence() {
        const {data, status} = await axios.delete('/reclamacao/{{ $ocorrencia->id }}')

        console.log(data)
        if (status === 200) {
            $('#{{ md5($ocorrencia->id) }}').remove();
            $('#modalAtendimento').modal('close');
            M.toast({html: 'Ocorrência excluída com sucesso!'})
        }
    }

    $('#delete-occurrence').on('click', () => $('.modal-bg').prop('hidden', false))

    $('#cancel-delete').on('click', () => $('.modal-bg').prop('hidden', true))

    $('#confirm-delete').on('click', () => deleteOccurrence())
</script>

<script>

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


    $(document).ready(function () {

        setTimeout(function () {

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

        }, 200)

    });

    function saveNota() {

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/minhas-ocorrencias/ocorrencia/set/nota',
            data: $('#form-avaliacao').serialize(),
            beforeSend: function () {

                $('#loadSendNota').removeAttr('hidden', 'hidden');
                $('#btnSendNota').attr('hidden', 'hidden');
                $('#postLoad').attr('hidden', 'hidden');
                $('#postLoadErro').attr('hidden', 'hidden');

            },
            success: function (data) {

                $('#loadSendNota').attr('hidden', 'hidden');
                $('#btnSendNota').attr('hidden', 'hidden');
                $('#postLoad').removeAttr('hidden', 'hidden');
                $('#postLoadErro').attr('hidden', 'hidden');

            },
            error: function (xhr) {

                $('#loadSendNota').attr('hidden', 'hidden');
                $('#btnSendNota').attr('hidden', 'hidden');
                $('#postLoad').attr('hidden', 'hidden');
                $('#postLoadErro').removeAttr('hidden', 'hidden');

            }
        });

    }

    function notaAvaliacao(valor) {

        $('.star').text('star_border');

        for (var i = 1; i <= valor; i++) {
            $('#star_' + i).text('star');
        }

        $('#nota-avaliacao').val(valor);

    }

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

    }

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