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

    {{--        {{dd(session('configuration')) }}--}}
    <script>
        Materialize.updateTextFields();
    </script>
    <link href="/css/timeline-materialize.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/vendors/magnific-popup/magnific-popup.css">

    <div class="hide-on-small-only">

        <br><br><br>

        <div class="div-center">

            <div class="row">

                <div class="col s12 offset-l1 l5 card z-depth-3 border-radius-6"
                     style="min-height: 450px; max-height: 450px; padding-left: 24px; padding-right: 24px;">

                    <div class="row">
                        <div class="col s12 center">
                            <img src="{{ custom_system('LOGO') }}"
                                 style="width: 150px; height: 150px; object-fit: cover;">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col s12 center">
                            <span class="font-weight-500 grey-text text-darken-3">{{ custom_system('NOME_SISTEMA') }}</span>
                        </div>
                    </div>

                    <form id="formLogin" method="post" action="/login/with-return">

                        {{ csrf_field() }}

                        <div class="row">
                            <div class="input-field col s12">
                                <input placeholder="" id="username" name="username" type="text" class="validate">
                                <label for="username">E-mail</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="input-field col s12">
                                <input placeholder="" id="password" name="password" type="password" class="validate">
                                <label for="password">Senha</label>
                            </div>
                        </div>

                    </form>

                    <div class="row">
                        <a onclick="sendFormLogin('formLogin')" class="waves-effect waves-light btn col offset-s1 s10">Entrar</a>
                    </div>

                    <br>

                    <div class="row">
                        <div class="col s12">
                            <p class="center-align font-weight-600 grey-text no-padding no-margin">
                                <a class="grey-text" href="/esqueciminhasenha">Esqueceu sua senha?</a>
                            </p>

                            <p class="center-align font-weight-600" style="margin-top: 0;">
                                <a href="/registro" style="color: {{ custom_system('___SECONDARY_COLOR___') }}">Cadastre-se!</a>
                            </p>
                        </div>
                    </div>

                </div>


                <div class="col s12 offset-l1 l5 no-padding"
                     style="min-height: 450px; max-height: 450px; height: 450px; padding-left: 24px; padding-right: 24px; padding-top: 10px;">


                    <div class="row">
                        <div class="col s12 card z-depth-3 border-radius-6">
                            <blockquote>
                                <span class="font-weight-500" style="font-size: 20px;">Funções Rápidas</span>
                            </blockquote>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col s12 card z-depth-3 border-radius-6 center padding-2">

                            <div class="row">
                                <div class="col s12">
                                    <i class="material-icons md-24 white-text center padding-1"
                                       style="border-radius: 40px; background-color: {{ custom_system('___SECONDARY_COLOR___') }}"
                                    >search</i>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12">
                                    <span class="font-weight-500 grey-text text-darken-3">Busca de ocorrência por protocolo</span>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12" style="padding-left: 80px; padding-right: 80px;">

                                    <div class="input-field valign-wrapper margin-bottom-20 center no-margin">
                                        <input id="protocolo" type="text" class="validate center"
                                               placeholder="Ex.: 2019-1234567">
                                    </div>

                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12">
                                    <a onclick="openMoreDetail(null, null, 'protocolo')"
                                       class="waves-effect  btn-flat col offset-s1 s10 font-weight-500"
                                       style="color: {{ custom_system('___SECONDARY_COLOR___') }}"
                                    >Buscar</a>
                                </div>
                            </div>

                        </div>
                    </div>


                    <div class="row">
                        <div class="col s12 card z-depth-3 border-radius-6 center padding-2" style="height: 150px;">

                            <div class="row">
                                <div class="col s12">
                                    <i class="material-icons md-24 white-text center padding-1"
                                       style="border-radius: 40px; background-color: {{ custom_system('___SECONDARY_COLOR___') }}"
                                    >record_voice_over</i>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12">
                                    <p class="font-weight-500 grey-text text-darken-3">Clique no botão abaixo para abrir
                                        uma
                                        ocorrência</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12">
                                    <a href="/reclamacao/abrir"
                                       class="waves-effect btn-flat col offset-s1 s10 font-weight-500"
                                       style="color: {{ custom_system('___SECONDARY_COLOR___') }}"
                                    >Abrir
                                        ocorrência</a>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

            </div>
            @if(isset(session('configuration')['texto_perguntas_frequentes']))
                @php $perguntas = (session('configuration')['texto_perguntas_frequentes']);@endphp
                @foreach($perguntas as $arrays)
                    <div class="row">

                        <div class="col s12 offset-l1 l11 card z-depth-3 border-radius-6"
                             style=" padding-left: 24px; padding-right: 24px; width: 814px">

                            <h5 class="header  font-weight-500 justify-content-center"
                                style="font-size: 20px; padding-left: 9px;">{{$arrays[0]}}</h5>

                            @foreach($arrays[1] as  $texto)

                                <div class="col s12">
                                    <p align="justify"
                                       class="grey-text font-weight-400 text-darken-3 justify-content-center"
                                       style="margin-top: 3px; margin-bottom: 3px">{{$texto}}</p>
                                </div>

                            @endforeach
                        </div>

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

    </div>

    <div class="hide-on-large-only padding-4">

        <div class="row">
            <div class="col s12 card z-depth-3 border-radius-6"
                 style="min-height: 450px; max-height: 450px; padding-left: 24px; padding-right: 24px;">

                <div class="row">
                    <div class="col s12 center">
                        <img src="{{ custom_system('LOGO') }}" style="width: 150px; height: 150px; object-fit: cover;">
                    </div>
                </div>

                <div class="row">
                    <div class="col s12 center">
                        <span class="font-weight-500 grey-text text-darken-3">{{ custom_system('NOME_SISTEMA') }}</span>
                    </div>
                </div>

                <form id="formLogin2" method="post" action="/login/with-return">

                    {{ csrf_field() }}

                    <div class="row">
                        <div class="input-field col s12">
                            <input id="username2" name="username" type="text" class="validate">
                            <label for="username2">E-mail</label>
                        </div>
                    </div>

                    <div class="row">
                        <div class="input-field col s12">
                            <input id="password2" name="password" type="password" class="validate">
                            <label for="password2">Senha</label>
                        </div>
                    </div>

                </form>

                <div class="row">
                    <a onclick="sendFormLogin('formLogin2')" class="waves-effect waves-light btn col offset-s1 s10">Entrar</a>
                </div>

                <br>

                <div class="row">
                    <div class="col s12">
                        <p class="center-align font-weight-600 grey-text no-padding no-margin">
                            <a class="grey-text" href="/esqueciminhasenha">Esqueceu sua senha?</a>
                        </p>

                        <p class="center-align font-weight-600" style="margin-top: 0;">
                            <a href="/registro"
                               style="color: {{ custom_system('___SECONDARY_COLOR___') }}">Cadastre-se!</a>
                        </p>
                    </div>
                </div>

            </div>
        </div>

        <div class="row">

            <div class="col s12"
                 style="min-height: 450px; max-height: 450px; height: 450px;">


                <div class="row">
                    <div class="col s12 card z-depth-3 border-radius-6">
                        <blockquote>
                            <span class="font-weight-500" style="font-size: 20px;">Funções Rápidas</span>
                        </blockquote>
                    </div>
                </div>


                <div class="row">
                    <div class="col s12 card z-depth-3 border-radius-6 center padding-2">

                        <div class="row">
                            <div class="col s12">
                                <i class="material-icons md-24 white-text center padding-1"
                                   style="border-radius: 40px; background-color: {{ custom_system('___SECONDARY_COLOR___') }}"
                                >search</i>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col s12">
                                <span class="font-weight-500 grey-text text-darken-3">Busca de ocorrência por protocolo</span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col s12" style="padding-left: 80px; padding-right: 80px;">

                                <div class="input-field valign-wrapper margin-bottom-20 center no-margin">
                                    <input id="protocolo2" type="text" class="validate center protocoloInput"
                                           placeholder="Ex.: 2019-1234567">
                                </div>

                            </div>
                        </div>

                        <div class="row">
                            <div class="col s12">
                                <a onclick="openMoreDetail(null, null, 'protocolo2')"
                                   class="waves-effect  btn-flat col offset-s1 s10 font-weight-500"
                                   style="color: {{ custom_system('___SECONDARY_COLOR___') }}"
                                >Buscar</a>
                            </div>
                        </div>

                    </div>
                </div>


                <div class="row">
                    <div class="col s12 card z-depth-3 border-radius-6 center padding-2" style="height: 150px;">

                        <div class="row">
                            <div class="col s12">
                                <i class="material-icons md-24 white-text center padding-1"
                                   style="border-radius: 40px; background-color: {{ custom_system('___SECONDARY_COLOR___') }}"
                                >record_voice_over</i>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col s12">
                                <p class="font-weight-500 grey-text text-darken-3">Clique no botão abaixo para abrir
                                    uma
                                    ocorrência</p>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col s12">
                                <a href="/reclamacao/abrir"
                                   class="waves-effect btn-flat col offset-s1 s10 font-weight-500"
                                   style="color: {{ custom_system('___SECONDARY_COLOR___') }}"
                                >Abrir
                                    ocorrência</a>
                            </div>
                        </div>

                    </div>
                </div>

            </div>

        </div>

    </div>



    <div id="modalAtendimento" class="modal bottom-sheet z-depth-5"
         style="
         padding: 0 !important;
         margin: auto;
         max-height: 95%;
         min-height: 95%;
         width: 55%;
         border-bottom-right-radius: 0 !important;
         border-bottom-left-radius: 0 !important;
">
        <h5 onclick="closeModalAtendimento()"
            class="hide-on-large-only"
            style="cursor: pointer;
        position: absolute;
        top: 0;
        right: 10px;
        z-index: 9999999;">
            <i class="material-icons">close</i>
        </h5>

        <div class="modal-content" id="conteudoAtendimentoAdmin" style="padding: 0;">
        </div>

        <div id="divLoadFloactActionButton">
            <a id="floatActionButtonLoad" class="btn-floating btn-large waves-effect waves-light position-absolute"
               style="bottom: 0; right: 45%;"
            >
                <i class="material-icons">add</i>
            </a>
        </div>
    </div>

@endsection
@section('specific-scripts')
    <script src="https://maps.googleapis.com/maps/api/js?key={{ custom_system('MAPS_KEY') }}"></script>

    <script>

        $(document).ready(function () {
            $('#navBusca').removeAttr('hidden', 'hidden');

            if ($(window).width() <= 600) {
                $('#modalAtendimento').css('width', '100%');
            }

        });

        $('.titulo_pagina').text('Entrar');

        function sendFormLogin(form) {

            $('#' + form).submit();

        }

        var intervalId;
        var controlAnimation = false;

        function floatActionButtonLoad() {

            intervalId = setInterval(function () {

                if (controlAnimation === false) {
                    $('#floatActionButtonLoad').css('bottom', '140px');
                    controlAnimation = true;
                } else {
                    $('#floatActionButtonLoad').css('bottom', '0');
                    controlAnimation = false;
                }

            }, 350);

        }

        function closeModalAtendimento() {

            $('#modalAtendimento').modal('close');

        }

        function openMoreDetail(param1, param2, input) {
            protocolo = $('#' + input).val();

            $('#floatActionButtonLoad').css('bottom', '0');
            controlAnimation = false;

            floatActionButtonLoad();

            $.ajax({
                type: 'GET',
                dataType: 'html',
                url: '/home/ocorrencia/more/detail',
                data: {
                    searchCode: protocolo
                },
                beforeSend: function () {

                    $('#conteudoAtendimentoAdmin').empty();
                    $('#divLoadFloactActionButton').removeAttr('hidden', 'hidden');
                    $('#modalAtendimento').css('min-height', '40%');
                    $('#modalAtendimento').modal('open');

                },
                success: function (data) {

                    $('#divLoadFloactActionButton').attr('hidden', 'hidden');
                    $('#modalAtendimento').css('min-height', '95%');
                    $('#conteudoAtendimentoAdmin').append(data);
                    clearInterval(intervalId)

                },
                error: function (xhr) {
                    $('#modalAtendimento').modal('close');
                    clearInterval(intervalId)

                    Materialize.toast('Não foi possível encontrar esse protocolo');

                }
            });

        }

        @if(session('msg'))

        Materialize.toast('{{ session('msg') }}');

        @endif

    </script>

@stop