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

    <link href="/vendors/dropify/css/dropify.min.css" type="text/css" rel="stylesheet">

    <div class="row">
        <div class="col s12 card z-depth-2">
            <ul class="tabs">
                <li class="tab col s6"><a class="active" href="#basico">Basico</a></li>
                <li class="tab col s6"><a href="#personalizacao">Personalização</a></li>
            </ul>
        </div>
        <div id="basico" class="col s12">

            <br>

            <form id="form_configuracao" method="post" action="/configuracao">

                {{csrf_field()}}

                <div class="row">
                    <div class="col offset-s1 s10 font-weight-600 grey-text no-padding"><p>Ocorrência</p></div>
                    <div class="col offset-s1 s10 card z-depth-2 border-radius-5">

                        <div class="row">
                            <div class="col s11" style="margin-top: 22px;">
                                <span class="font-weight-400">Quantos dias para traz uma ocorrência sem atualização de status passa ser considerada atrasada</span>
                            </div>
                            <div class="col s1">
                                <input id="notify_back_day"
                                       value="{{ (isset($configuracao->data[0]->notify_back_day) ? $configuracao->data[0]->notify_back_day : '') }}"
                                       name="notify_back_day" type="number" class="center-align">
                            </div>
                        </div>

                    </div>


                </div>

                <div class="row">
                    <div class="col offset-s1 s10 font-weight-600 grey-text no-padding"><p>Personalizar Sistema</p>
                    </div>
                    <div class="col offset-s1 s10 card z-depth-2 border-radius-5">
                        <div class="row border-bottom-2">
                            <div class="col s6" style="margin-top: 22px;">
                                <span class="font-weight-400">Nome do sistema:</span>
                            </div>
                            <div class="col s6">
                                <input id="nome_sistema"
                                       value="{{ (isset($configuracao->data[0]->nome_sistema) ? $configuracao->data[0]->nome_sistema : '') }}"
                                       name="nome_sistema" type="text" class="center-align">
                            </div>
                        </div>

                        <div class="row border-bottom-2">
                            <div class="col s5" style="margin-top: 22px;">
                                <span class="font-weight-400">Url do App:</span>
                            </div>
                            <div class="col s1" style="margin-top: 25px;">
                                <i onclick="setUrl()" class="material-icons grey-text"
                                   style="cursor: pointer">get_app</i>
                            </div>
                            <div class="col s6">
                                <input id="url_sistema"
                                       value="{{ (isset($configuracao->data[0]->url_sistema) ? $configuracao->data[0]->url_sistema : '') }}"
                                       name="url_sistema" type="text" class="center-align">
                            </div>
                        </div>

                        <div class="row border-bottom-2">
                            <div class="col s11" style="margin-top: 22px;">
                                <span class="font-weight-400">Período de busca dos dados para apresentação nos gráficos da DashBoard (em dias)</span>
                            </div>
                            <div class="col s1">
                                <input id="dia_para_traz"
                                       value="{{ (isset($configuracao->data[0]->dia_para_traz) ? $configuracao->data[0]->dia_para_traz : '') }}"
                                       name="dia_para_traz" type="number" class="center-align">
                            </div>
                        </div>

                        <div class="row border-bottom-2 valign-wrapper">
                            <div class="col s11" style="margin-top: 22px; margin-bottom: 22px;">
                                <span class="font-weight-400">Bloquear o acesso a tela inicial com as corrências da cidade.</span>
                            </div>
                            <div class="col s1">
                                <div class="switch">
                                    <label>
                                        <input
                                                @if($configuracao->data[0]->bloquear_acesso_home == 1)
                                                checked
                                                @endif
                                                name="bloquear_acesso_home" value="1" type="checkbox">
                                        <span class="lever"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row border-bottom-2 valign-wrapper">
                            <div class="col s11" style="margin-top: 22px; margin-bottom: 22px;">
                                <span class="font-weight-400">Exigir CPF no cadastro.</span>
                            </div>
                            <div class="col s1">
                                <div class="switch">
                                    <label>
                                        <input
                                                @if($configuracao->data[0]->exigir_cpf == 1)
                                                checked
                                                @endif
                                                name="exigir_cpf" value="1" type="checkbox">
                                        <span class="lever"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row border-bottom-2 valign-wrapper">
                            <div class="col s11" style="margin-top: 22px; margin-bottom: 22px;">
                                <span class="font-weight-400">Bloquear menu "Trocar de Prefeitura".</span>
                            </div>
                            <div class="col s1">
                                <div class="switch">
                                    <label>
                                        <input
                                                @if($configuracao->data[0]->bloquear_menu_trocar_prefeitura == 1)
                                                checked
                                                @endif
                                                name="bloquear_menu_trocar_prefeitura" value="1" type="checkbox">
                                        <span class="lever"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row border-bottom-2 valign-wrapper">
                            <div class="col 11" style="margin-top: 22px; margin-bottom: 22px;">
                                <span class="font-weight-400">Bloquear botões de compartilhamento nas ocorrências.</span>
                            </div>
                            <div class="col s1">
                                <div class="switch">
                                    <label>
                                        <input
                                                @if($configuracao->data[0]->bloquear_compartilhamento == 1)
                                                checked
                                                @endif
                                                name="bloquear_compartilhamento" value="1" type="checkbox">
                                        <span class="lever"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row border-bottom-2 valign-wrapper">
                            <div class="col 11" style="margin-top: 22px; margin-bottom: 22px;">
                                <span class="font-weight-400">Bloquear abertura de ocorrências anônimas.</span>
                            </div>
                            <div class="col s1">
                                <div class="switch">
                                    <label>
                                        <input
                                                @if($configuracao->data[0]->anonimo == 1)
                                                checked
                                                @endif
                                                name="anonimo" value="1" type="checkbox">
                                        <span class="lever"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row border-bottom-2 valign-wrapper">
                            <div class="col 11" style="margin-top: 22px; margin-bottom: 22px;">
                                <span class="font-weight-400">Habilitar nova tela de grupos na abertura de ocorrência.</span>
                            </div>
                            <div class="col s1">
                                <div class="switch">
                                    <label>
                                        <input
                                                @if($configuracao->data[0]->grupo_telas == 1)
                                                checked
                                                @endif
                                                name="grupo_telas" value="1" type="checkbox">
                                        <span class="lever"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row border-bottom-2 valign-wrapper">
                            <div class="col 11" style="margin-top: 22px; margin-bottom: 22px;">
                                <span class="font-weight-400">Bloquear abertura de ocorrências</span>
                            </div>
                            <div class="col s1">
                                <div class="switch">
                                    <label>
                                        <input
                                                @if($configuracao->data[0]->block_open_occurence === 1)
                                                checked
                                                @endif
                                                name="block_open_occurence" value="1" type="checkbox">
                                        <span class="lever"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row border-bottom-2">
                            <div class="col s6" style="margin-top: 22px;">
                                <span class="font-weight-400">Motivo do bloqueio da abertura de ocorrências:</span>
                            </div>
                            <div class="col s6">
                                <textarea id="block_open_occurrence_text"
                                          name="block_open_occurrence_text"
                                          class="materialize-textarea">{{ (isset($configuracao->data[0]->block_open_occurrence_text) ? $configuracao->data[0]->block_open_occurrence_text : '') }}</textarea>
                            </div>
                        </div>

                        <div class="row border-bottom-2 valign-wrapper">
                            <div class="col 11" style="margin-top: 22px; margin-bottom: 22px;">
                                <span class="font-weight-400">Permitir orçamento participativo na abertura de ocorrências</span>
                            </div>
                            <div class="col s1">
                                <div class="switch">
                                    <label>
                                        <input
                                                @if($configuracao->data[0]->tem_orcamento === 1)
                                                checked
                                                @endif
                                                name="tem_orcamento" value="1" type="checkbox">
                                        <span class="lever"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row border-bottom-2 valign-wrapper">
                            <div class="col 11" style="margin-top: 22px; margin-bottom: 22px;">
                                <span class="font-weight-400">Desabilitar auto criação de ruas</span>
                            </div>
                            <div class="col s1">
                                <div class="switch">
                                    <label>
                                        <input
                                                @if($configuracao->data[0]->rua_auto_create_disabled === 1)
                                                    checked
                                                @endif
                                                name="rua_auto_create_disabled" value="1" type="checkbox">
                                        <span class="lever"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row border-bottom-2 valign-wrapper">
                            <div class="col 11" style="margin-top: 22px; margin-bottom: 22px;">
                                <span class="font-weight-400">Desabilitar a validação por email na criação de usuários</span>
                            </div>
                            <div class="col s1">
                                <div class="switch">
                                    <label>
                                        <input
                                                @if($configuracao->data[0]->cre_user_validation === 1)
                                                    checked
                                                @endif
                                                name="cre_user_validation" value="1" type="checkbox">
                                        <span class="lever"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row border-bottom-2">
                            <div class="col s12" style="margin-top: 22px;">
                                <span class="font-weight-400">Nome dos status da ocorrências:</span>
                                <p class="no-margin grey-text">São necessario 6 status para o funcionamento do sistema
                                    que são eles:</p>
                                <p class="grey-text no-margin">1º - Processo de moderação</p>
                                <p class="grey-text no-margin">2º - Validação pela secretaria</p>
                                <p class="grey-text no-margin">3º - Ocorrência pronta para ser atendida</p>
                                <p class="grey-text no-margin">4º - Ocorrência esta sendo atendida, mas ainda falta
                                    algumas ações para serem
                                    concluidas</p>
                                <p class="grey-text no-margin">5º - Ocorrência finalizada, teve todas as suas ações
                                    concluidas</p>
                                <p class="grey-text no-margin">6º - Não pode ser atendida (Recusada)</p>
                                <p class="grey-text">Fique avontade para alterar o nome desses 6 status, mas tenha em
                                    mente que a função de
                                    cada status não será alterada.</p>
                            </div>
                            <div class="col s12" style="margin-top: 20px;">
                                <div class="chips chips-initial"></div>
                            </div>

                            <input hidden name="status" id="status">

                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col offset-s1 s10 font-weight-600 grey-text no-padding"><p>Privacidade</p></div>
                    <div class="col offset-s1 s10 card z-depth-2 border-radius-5">
                        <div class="row border-bottom-2 valign-wrapper">
                            <div class="col s11" style="margin-top: 22px; margin-bottom: 22px;">
                                <span class="font-weight-400">Permitir que na tela inicial (Home) as ocorrência
                                    contenham o nome e foto do solicitante ?</span>
                            </div>
                            <div class="col s1">
                                <div class="switch">
                                    <label>
                                        <input
                                                @if($configuracao->data[0]->dados_user_home == 1)
                                                checked
                                                @endif
                                                name="dados_user_home" value="1" type="checkbox">
                                        <span class="lever"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col offset-s1 s10 font-weight-600 grey-text no-padding"><p>Informação</p></div>
                    <div class="col offset-s1 s10 card z-depth-2 border-radius-5">
                        <div class="row border-bottom-2 valign-wrapper">
                            <div class="col s11" style="margin-top: 22px; margin-bottom: 22px;">
                                <span class="font-weight-400">Perguntas Frequentes </span>
                            </div>
                            <div class="col s1">
                                <div class="switch">
                                    <label>
                                        <input
                                                @if($configuracao->data[0]->perguntas_frequentes == 1)
                                                checked
                                                @endif
                                                name="perguntas_frequentes" value="1" type="checkbox" id="pergunta">
                                        <span class="lever"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div id="pInfo">
                            <div class="border-bottom-2 valign-wrapper">
                                <br>
                                <div onclick="adicionarTxt(0)" class="chip" id="titulo" style="cursor: pointer">
                                    Titulo
                                    <i class="material-icons mdi-navigation-close"></i>
                                </div>
                                <div onclick="adicionarTxt(1)" class="chip" id="texto" style="cursor: pointer">
                                    Texto
                                    <i class="material-icons mdi-navigation-close"></i>
                                </div>

                            </div>
                            <div class="row border-bottom-2">
                                <div class="col s12">
                        <textarea id="txt-pergutas" name="texto_perguntas_frequentes"
                                  class="materialize-textarea">{{
                                  (isset($configuracao->data[0]->texto_perguntas_frequentes) ? $configuracao->data[0]->texto_perguntas_frequentes : '')
                                  }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col offset-s1 s10 font-weight-600 grey-text no-padding"><p>Termo de uso e
                            privacidade</p></div>
                    <div class="col offset-s1 s10 card z-depth-2 border-radius-5">
                        <div class="row border-bottom-2">
                            <div class="col s12">
                        <textarea id="termo" name="termo"
                                  class="materialize-textarea">{{ (isset($termo->data) ? $termo->data : '') }}</textarea>
                            </div>
                        </div>

                    </div>
                </div>


            </form>

            <div class="fixed-action-btn" style="bottom: 40px; right: 20px;">
                <a onclick="enviarForm()"
                   class="btn-floating z-depth-3 btn-large waves-effect waves-light scale-transition">
                    <i class="material-icons">save</i>
                </a>
            </div>


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

            <br>

            <div class="row">

                <form id="form_pesonalizacao" enctype="multipart/form-data" method="post"
                      action="/configuracao/personalizacao/app">

                    {{ csrf_field() }}

                    <div class="col s6">

                        <div class="input-field col s12">
                            <input name="nomeApp" onkeyup="setTexto('#nomeApp', this.value)" id="last_name" type="text"
                                   class="validate"
                                   value="{{ $personalizacao->data->text->NomeSistema }}"
                                   data-length="20"
                                   maxlength="20"
                            >
                            <label for="last_name">Nome App</label>
                        </div>

                        <div class="input-field col s6">
                            <input name="latitude" id="latidude" type="text"
                                   class="validate"
                                   value="{{ $personalizacao->data->maps->latitude }}"
                            >
                            <label for="latidude">Latitude</label>
                        </div>

                        <div class="input-field col s6">
                            <input name="longitude" id="longitude" type="text"
                                   class="validate"
                                   value="{{ $personalizacao->data->maps->longitude }}"
                            >
                            <label for="longitude">Longitude</label>
                        </div>

                        <div class="col s6" style="margin-bottom: 10px;">
                            <label class="col s12 no-padding" for="cor">ToolBar</label>
                            <input name="toolbar" onchange="setColor('#toolbar', this.value)" type="color"
                                   class="validate input-color"
                                   value="{{ $personalizacao->data->color->toolbar }}"
                            >
                        </div>

                        <div class="col s6" style="margin-bottom: 10px;">
                            <label class="col s12 no-padding" for="cor">ToolBar Texto</label>
                            <input name="toolbarTextoColor" onchange="setColorText('#nomeApp', this.value)" type="color"
                                   class="validate input-color"
                                   value="{{ $personalizacao->data->color->headerTitulo }}"
                            >
                        </div>

                        <div class="col s6" style="margin-bottom: 10px;">
                            <label class="col s12 no-padding" for="cor">ToolBar Icon</label>
                            <input onchange="setColor('#toolbarIcon', this.value)" name="toolbarIconColor" type="color"
                                   class="validate input-color"
                                   value="{{ $personalizacao->data->color->headerIconColor }}"
                            >
                        </div>

                        <div class="col s6" style="margin-bottom: 10px;">
                            <label class="col s12 no-padding" for="cor">Ações</label>
                            <input name="acao" onchange="setColor('.acao', this.value)" type="color"
                                   class="validate input-color"
                                   value="{{ $personalizacao->data->color->action }}"
                            >
                        </div>

                        <div class="row">

                            <div class="col s6">
                                <label for="cor">Logo Primaria</label>
                                <input name="fileLogoPrimaria" type="file" class="dropify" data-height="200"
                                       data-max-width="600"
                                       data-allowed-file-extensions="png jpg"
                                       data-default-file="{{ $personalizacao->data->img->logo }}"
                                />
                            </div>

                            <div class="col s6">
                                <label for="cor">Logo Toolbar</label>
                                <input name="fileLogoToolbar" type="file" class="dropify" data-height="200"
                                       data-max-width="600"
                                       data-allowed-file-extensions="png jpg"
                                       data-default-file="{{ $personalizacao->data->img->logoToolbar }}"
                                />
                            </div>

                        </div>

                    </div>

                </form>

                <div class="col offset-s1 s4 card z-depth-2 no-padding" style="min-height: 500px;">

                    <div id="toolbar" class="col s12 card z-depth-2 no-padding no-margin"
                         style="min-height: 50px; background: {{ $personalizacao->data->color->toolbar }}">

                        <div>
                            <img class="vertical-align-center" src="{{ $personalizacao->data->img->logoToolbar }}"
                                 style="height: 45px;">
                        </div>

                        <div id="nomeApp"
                             class="col s10 vertical-align-center font-weight-700"
                             style="left: 40px; font-size: 16px; color: {{ $personalizacao->data->color->headerTitulo }}"
                        >
                            {{ $personalizacao->data->text->NomeSistema }}
                        </div>

                        <div class="col offset-s11 s1"
                             style=" margin-top: 10px;">

                            <div id="toolbarIcon" class="card z-depth-2"
                                 style="height: 20px; width: 20px; border-radius: 50%; right: 15px; background: {{ $personalizacao->data->color->headerIconColor }};">
                            </div>


                        </div>

                    </div>
                    <div style="margin-left: 10px; margin-right: 10px;">

                        <br>

                        <div class="col s12 card z-depth-2 no-padding border-radius-10"
                             style="min-height: 150px; margin-top: 30px;">

                            <div class="card acao z-depth-2 position-absolute"
                                 style="height: 20px; width: 50px;height: 12px;
                                         width: 70px;
                                         bottom: 0;
                                         left: 10px;
                                         background: {{ $personalizacao->data->color->action }};
                                         ">

                            </div>

                        </div>

                        <div class="col s12 card z-depth-2 no-padding border-radius-10"
                             style="min-height: 150px; margin-top: 30px;">

                            <div class="card acao z-depth-2 position-absolute"
                                 style="height: 20px; width: 50px;height: 12px;
                                         width: 70px;
                                         bottom: 0;
                                         left: 10px;
                                         background: {{ $personalizacao->data->color->action }};
                                         ">

                            </div>

                        </div>

                        <div class="col offset-s10 s1 card z-depth-4 acao"
                             style="height: 50px; width: 50px; border-radius: 50%;
                                     background: {{ $personalizacao->data->color->action }};
                                     ">

                        </div>

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

            <br>

            <div class="fixed-action-btn" style="bottom: 40px; right: 20px;">
                <a onclick="enviarFormPersonalizacao()"
                   class="btn-floating z-depth-3 btn-large waves-effect waves-light scale-transition">
                    <i class="material-icons">style</i>
                </a>
            </div>

        </div>
    </div>

    <div id="modalAlert" class="modal" style="width: 30%;">
        <div class="modal-content">

            <i class="material-icons grey-text modal-close modal-full-move-bottom-custom1 md-24">close</i>
            <h6 class="center font-weight-700 grey-text text-darken-2">Personalização salva</h6>
            <p>Algumas alterações podem entrar em vigor apenas apos o logout do usuário e consequentemente com o seu
                login.</p>
        </div>
    </div>


@endsection
@section('specific-scripts')
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('../../vendors/dropify/js/dropify.min.js') }}"></script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/jquery.mask.min.js') }}"></script>
    <script>

        $('.titulo_pagina').text('Configuração');

        $('#tempo_status_2').mask('99');
        $('#tempo_status_3').mask('99');

        $('.chips-initial').material_chip({

            data: [

                    @foreach($status as $statu)

                {
                    tag: '{{ $statu->nome }}',
                },

                @endforeach
            ]
        });


        var statusChips = '';
        $('.chips-initial').on('chip.add', function (e, chip) {

            validationMaxChipsStatus();

        });

        function validationMaxChipsStatus() {

            statusChips = $('.chips-initial').material_chip('data');

            if (statusChips.length !== 6) {

                alert('É preciso ter 6 status cadastrado.');

                return false;

            }

            return true;

        }


        function setColorText(id, value) {

            $(id).css('color', value);

        }

        function setColor(id, value) {

            $(id).css('background', value);

        }

        function setTexto(id, value) {

            $(id).text(value);

        }

        function enviarForm() {

            result = validationMaxChipsStatus();

            if (!result) {
                return;
            }

            $('#status').val(JSON.stringify($('.chips-initial').material_chip('data')));

            $('#form_configuracao').submit();

        }

        function enviarFormPersonalizacao() {

            $('#form_pesonalizacao').submit();

        }

        function setUrl() {

            $('#url_sistema').val('{{ explode('/configuracao', url()->current())[0] }}')

        }

        $('.dropify').dropify({
            messages: {
                'default': '',
                'replace': '',
                'remove': 'Remover',
                'error': 'Ooops, Erro'
            }
        });

        $(document).ready(function () {
            $('ul.tabs').tabs();
        });

        @if (session('status'))

        Materialize.toast('{{ session('status') }}', 3000);

        $(document).ready(function () {

            $('#modalAlert').modal('open');

        });

        @endif

        function adicionarTxt(data) {
            titulo = 'seu titulo aqui';
            texto = 'seu texto aqui';
            txt_existente = document.getElementById('txt-pergutas').value;
            if (data == 0) {
                document.getElementById('txt-pergutas').value = txt_existente + "[ti]" + titulo + "(&)";
            }
            if (data == 1) {

                document.getElementById('txt-pergutas').value = txt_existente + "[te]" + texto + "(&)";
            }
        }

    </script>

@stop