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

    <link href="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/css/screen-specific/reclamacao/grupo.css') }}"
          type="text/css" rel="stylesheet">

    <br>
    <div class="row">

        <div class="col s12">
            <h5 class="center-align">

                <a id="btn-passo1" onclick="passo1()" class="btn-floating waves-effect waves-light">
                    <i class="material-icons">visibility</i>
                </a>

                <a class="btn-floating transparent z-depth-0" style="cursor: default;">
                    <i class="material-icons grey-text">chevron_right</i>
                </a>

                <a id="btn-passo2" onclick="passo2('menu')" class="btn-floating waves-effect waves-light" disabled>
                    <i class="material-icons">location_city</i>
                </a>

                <a class="btn-floating transparent z-depth-0">
                    <i class="material-icons grey-text">chevron_right</i>
                </a>

                <a id="btn-passo4" onclick="passo4()" class="btn-floating waves-effect waves-light" disabled>
                    <i class="material-icons">description</i>
                </a>

            </h5>

        </div>

    </div>

    <form id="formReclamacao" method="post">
        {{ csrf_field() }}

        <div id="passo1">

            <div class="data-large-diplay">
                <br><br><br>
            </div>

            <div class="data-smal-diplay-diplay">
                <br><br><br>
            </div>

            <div class="row" style="margin-bottom: 5%;">
                <div class="col offset-s1 s10">
                    <h5 class="center-align font-weight-600 titulos_genericos">@lang('Escolha a forma como gostaria de abrir sua ocorrência.')</h5>
                </div>
            </div>


            <div class="row">
                <div
                        @if(isset(session('user')->user_nivel_id))
                        @if(session('user')->user_nivel_id == \App\Models\Role::DESLOGADO)

                        onclick="loginArirReclamacao()"

                        @else
                        onclick="reclamacaoAutenticado()"

                        @endif
                        @endif

                        class="col offset-s1 s10 offset-m3 m2 offset-l3 l2 card-panel hoverable border-radius-10 white z-depth-2"
                        style="cursor: pointer"
                >
                    <div class="row">
                        <h5 class="center-align">
                            <i style="font-size: 100px;" class="material-icons">account_circle</i>
                        </h5>
                        <h6 class="center-align font-weight-600 grey-text text-darken-2">Autenticado</h6>
                    </div>
                    <div class="row" style="margin-bottom: 10px;">

                        <div hidden class="col offset-s1 s10">
                            <input value="autenticado" class="with-gap" name="group1"
                                   type="radio" id="tipo_reclamacao1"/>
                            <label for="tipo_reclamacao1">@lang('Autenticado')</label>
                        </div>

                    </div>
                </div>
                @if(!isset(session('configuration')['anonimo']))
                    <div onclick="reclamacaoAnonima()"
                         class="col offset-s1 s10 offset-m2 m2 offset-l2 l2 card-panel hoverable border-radius-10
                            grey darken-3 white-text z-depth-2" style="cursor: pointer">

                        <div id="cardAnonimo" class="row">
                            <h5 class="center-align">
                                <i style="font-size: 100px;" class="material-icons">visibility_off</i>
                                <h6 class="center-align font-weight-600 white-text text-darken-2">Anônima</h6>
                            </h5>
                        </div>
                        <div class="row" style="margin-bottom: 10px;">

                            <div hidden class="col offset-s1 s10">
                                <input value="anonima" class="with-gap" name="group1"
                                       type="radio" id="tipo_reclamacao2"/>
                                <label class="white-text" for="tipo_reclamacao2">Anônima</label>
                            </div>

                        </div>
                    </div>
                @endif
            </div>
        </div>

        <div class="row">
            <div hidden id="aviso" class="col s12 m6 offset-l2 l7 center">

                <br><br>

                <div class="card grey lighten-3 border-radius-8 z-depth-3">
                    <div class="card-content font-weight-500">
                        <p class="center-align font-weight-600" style="font-size: 30px;">Aviso</p>
                        <p>Nesta modalidade a ouvidoria não conseguirá entrar em contato por não possuir as informações
                            necessárias, mas a ocorrência ficará ativa para avaliação.</p>
                        <br>
                        <a onclick="passo1()" class="btn-flat red-text text-darken-2 waves-effect">Voltar</a> &nbsp;&nbsp;
                        &nbsp;
                        <a onclick="passo2()" class="btn waves-effect red darken-2">Concordo</a>
                    </div>
                </div>
            </div>
        </div>

        <div hidden id="passo2">

            <div class="data-large-diplay">

            </div>

            <div class="row" style="margin-bottom: 2%;">
                <div class="col offset-s1 s10">
                    <h5 class="center-align font-weight-600 titulos_genericos">Escolha uma Subcategoria</h5>
                </div>
            </div>

            <input hidden id="secretaria" name="secretaria">
            <input hidden id="sub_categoria" name="sub_categoria">

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

            <div hidden id="divMaisCategoria" class="row" style="margin-bottom: 20px;">
                <div class="col s12">

                    <h5 class="center-align">
                        <a id="btnMaisCategoria"
                           class="btn-floating center-align waves-effect waves-light white z-depth-4">
                            <i class="material-icons orange-text">expand_more</i>
                        </a>
                    </h5>

                </div>
            </div>

            <div hidden id="divLoadMaisCategoria" class="row" style="margin-bottom: 20px;">
                <div class="col s12">

                    <h5 class="center-align">

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

                            <div id="loadMaisCategoria">
                                <div class="preloader-wrapper small active">
                                    <div class="spinner-layer">
                                        <div class="circle-clipper left">
                                            <div class="circle"></div>
                                        </div>
                                        <div class="gap-patch">
                                            <div class="circle"></div>
                                        </div>
                                        <div class="circle-clipper right">
                                            <div class="circle"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </a>

                    </h5>


                </div>
            </div>
        </div>


        <div hidden id="passo4">

            <div class="data-large-diplay">

            </div>

            <div class="data-smal-diplay-diplay">
                <br><br><br>
            </div>

            <div class="row" style="margin-bottom: 2%;">
                <div class="col offset-s1 s10">
                    <h5 class="center-align font-weight-600 titulos_genericos">@lang('Preencha os dados abaixo referente a sua ocorrência.')</h5>
                </div>
            </div>

            <div class="row">
                <div id="input-reclamacao"
                     class="card-panel col s12 offset-m2 m8 offset-l2 l8 z-depth-2 border-radius-10">


                    <br>

                    <div class="col s12" style="margin-bottom: 30px;">
                        <div class="switch">
                            <label id="switch-privada" onchange="mudarCorLabelSwitch(this.id)">
                                <input name="privada" value="1" type="checkbox" id="switch-input">
                                <span class="lever"></span>
                                Torna essa ocorrência privada (Ocorrências privadas não serão visualizadas por outros
                                usuários)
                            </label>
                        </div>
                    </div>

                    <br>

                    <div class="input-field col s12">
                        <div id="conteudoBairro">

                        </div>
                    </div>

                    <div class="col s12">
                        <div id="conteudoRuas"></div>

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

                    <div hidden id="conteudoComplemento">
                        <div class="input-field col s12 m2 l2">
                            <input id="numero" name="numero" type="number" class="validate">
                            <label for="numero">@lang('número')</label>
                        </div>

                        <div class="input-field col s12 m5 l5">
                            <input id="complemento" name="complemento" type="text" class="validate">
                            <label for="complemento">@lang('Complemento')</label>
                        </div>

                        <div class="input-field col s12 m5 l5">
                            <input id="ponto_referencia" name="ponto_referencia" type="text" class="validate">
                            <label for="ponto_referencia">@lang('Ponto de Referência')</label>
                        </div>
                    </div>


                    <div hidden id="select-unidade" class="input-field col s12">
                        <div id="conteudoUnidade"></div>
                        <div hidden id="loadUnidade">
                            <div class="progress">
                                <div class="indeterminate"></div>
                            </div>
                        </div>
                    </div>

                    <div hidden id="cartaoSusConteudo" class="input-field col s12">
                        <input name="cartao_sus" id="cartao_sus" type="text" class="validate">
                        <label for="cartao_sus">Cartão do SUS</label>
                    </div>

                    <div class="input-field col s12">
                        <textarea placeholder="Exemplo: Existe um buraco na rua 18 próximo ao semáforo."
                                  name="descricao" id="descricao" class="materialize-textarea"></textarea>
                        <label for="textarea1">@lang('Relate aqui o ocorrido')</label>
                    </div>


                    <div class="input-field col s1">
                        <a class="btn-floating waves-effect waves-light z-depth-0 transparent modal-trigger tooltipped"
                           data-position="bottom" data-delay="50" data-tooltip="Anexar Imagens"
                           href="#modalAnexoImagem">
                            <i class="material-icons grey-text">insert_photo</i>
                        </a>
                    </div>

                    <div class="input-field col s12 offset-m10 m2 offset-l8 l3" style="margin-bottom: 20px;">
                        <button onclick="passo5()" class="btn waves-effect waves-light col s12"
                                type="button">@lang('Enviar')
                            <i class="material-icons right">send</i>
                        </button>
                    </div>

                </div>
            </div>

        </div>


        <div hidden id="passo5">

            <div class="row" style="margin-bottom: 15%;">
            </div>

            <div class="row">
                <div id="input-reclamacao" class="col offset-s1 s10 offset-m2 m8 offset-l2 l8">

                    <div class="row">

                        <div class="col offset-s1 s10" style="margin-bottom: 20px;">
                            <h5 class="center-align font-weight-600 titulos_genericos">@lang('Estamos enviando a sua ocorrência.')</h5>
                        </div>

                    </div>

                    <div class="row">

                        <div class="col s1">
                            <i class="material-icons orange-text" style="font-size: 30px;">send</i>
                        </div>

                        <div class="col s10">
                            <div class="progress" style="height: 15px;">
                                <div class="determinate" id="loadDeterminada"></div>
                            </div>
                        </div>

                        <div class="col s1">
                            <i class="material-icons light-green-text" style="font-size: 30px;">check</i>
                        </div>

                    </div>

                </div>
            </div>

        </div>

        <div hidden id="passo6">

            <div class="row" style="margin-bottom: 5%;">
            </div>

            <div class="row">
                <div id="input-reclamacao" class="col offset-s1 s10 offset-m2 m8 offset-l2 l8">

                    <div class="row">

                        <div class="col offset-s1 s10">
                            <h5 class="center-align font-weight-600 titulos_genericos">@lang('Recebemos a sua ocorrência.')</h5>
                        </div>

                        <div class="col offset-s1 s10">
                            <h5 class="center-align font-weight-600 titulos_genericos"
                                style="font-size: 18px;"
                            >Seu protocolo de atendimento
                                é:</h5>
                            <h5 class="center-align font-weight-600 titulos_genericos"
                                id="protocoloPosAbertura"
                                style="font-size: 18px;"
                            ></h5>
                        </div>

                    </div>

                    <div class="row">

                        <div class="col offset-s1 s10">
                            <p class="center-align">
                                <i class="material-icons light-green-text" style="font-size: 120px;">check_circle</i>
                            </p>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col offset-s1 s10" style="margin-bottom: 8%;">
                            <h5 class="center-align grey-text font-weight-600"
                                style="font-size: 15px;">@lang('Realizaremos uma verificação da sua ocorrência para podermos encontrar a melhor solução.')</h5>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col s12 offset-m5 m2 offset-l5 l2">
                            <a href="/home" class="waves-effect waves-light btn col s12 m0 l0">@lang('Home')</a>
                        </div>
                    </div>

                </div>
            </div>

        </div>


        <div hidden id="passo7">

            <div class="row" style="margin-bottom: 11%;">
            </div>

            <div class="row">
                <div id="input-reclamacao" class="col offset-s1 s10 offset-m2 m8 offset-l2 l8">

                    <div class="row">

                        <div class="col offset-s1 s10">
                            <h5 class="center-align font-weight-600 titulos_genericos">@lang('Não conseguimos receber a sua ocorrência.')</h5>
                        </div>

                    </div>

                    <div class="row">

                        <div class="col offset-s1 s10">
                            <p class="center-align">
                                <i class="material-icons red-text" style="font-size: 120px;">error</i>
                            </p>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col offset-s1 s10" style="margin-bottom: 5%;">
                            <h5 class="center-align grey-text font-weight-600"
                                style="font-size: 15px;">@lang('Ocorreu uma falha ao enviar sua ocorrência, caso queira tentar novamente clique no botão abaixo.')</h5>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col s12 offset-m4 m4 offset-l4 l4" style="margin-bottom: 35px;">
                            <a onclick="passo5()"
                               class="light-green waves-effect waves-light btn col s12 m0 l0">Tentar Novamente</a>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col s12 offset-m5 m2 offset-l5 l2">
                            <a href="/" class="waves-effect waves-light btn col s12 m0 l0">@lang('Home')</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>


        <div id="modalAnexoImagem" class="modal">
            <div class="modal-content">

                <P class="grey-text font-weight-600">Escolha uma foto para ser anexado</P>

                <br>
                <div class="file-field input-field">

                    <div class="file-field input-field">
                        <div id="div-files" class="btn">
                            <span>@lang('Imagem')</span>
                            <input hidden type="text" id="quantidade" name="quantidade">
                            <input multiple onchange="encodeImageBase64(this)" id="pic" name="pic" type="file"
                                   accept="image/png, image/jpg, image/jpeg">
                        </div>
                        <div class="file-path-wrapper">
                            <input multiple name="file_imagens_txt" class="file-path validate" type="text"
                                   placeholder="Imagem">
                        </div>

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

@endsection
@section('specific-scripts')
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/script-custom/abri-reclamacao.js') }}"></script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/script-custom/multiplo-base64.js') }}"></script>
    <script>

        const scrollValue = 220;
        const scrollValueInvert = -220;
        const animationValue = 300;

        $('.titulo_pagina').text('@lang('Abrir Ocorrência')');

        function loginArirReclamacao() {

            abriModalLogin('abrir_reclamacaoa');

        }

        function mudarCorLabelSwitch(id) {

            if ($('#switch-input').is(':checked')) {
                $('#' + id).addClass('orange-text');
            } else {
                $('#' + id).removeClass('orange-text');
            }
        }


    </script>

@stop