@php($configuration = session('configuration'))
<form method="post" id="formAbrirOcorrencia" action="/ocorrencia/criar/via/operador" enctype="multipart/form-data">
    {{ csrf_field() }}

    <div class="row padding-2">

        <div class="col s12">

            <div class="row">
                <div class="col s12">
                    <p class="font-weight-900 grey-text"><i class="material-icons">person</i> Tipo
                    </p>
                </div>
            </div>

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

                    <p>
                        <input onclick="setAutenticada()" value="autenticada" class="with-gap" name="tipo_ocorrencia"
                               type="radio"
                               id="tipoOcorrencia1" checked/>
                        <label for="tipoOcorrencia1">Autenticada</label>
                    </p>
                    @if(!isset(session('configuration')['anonimo']))
                        <p>
                            <input onclick="setAnonima()" value="anonima" class="with-gap" name="tipo_ocorrencia"
                                   type="radio" id="tipoOcorrencia2"/>
                            <label for="tipoOcorrencia2">Anonima</label>
                        </p>
                    @endif

                </div>
            </div>

            <br>

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

            <br>

            <div id="divDadosUser" class="row">

                <div class="row">
                    <div class="input-field col s12">
                        <p class="font-weight-900 grey-text"><i class="material-icons">person</i> Usuário
                        </p>
                    </div>
                </div>

                <div hidden id="loadGetUser">

                    <div class="row">
                        <div class="col s12">
                            <div class="progress">
                                <div class="indeterminate"></div>
                            </div>
                        </div>
                    </div>

                </div>

                <div hidden id="msgUsuarioExistente" class="col s12 card z-depth-2 padding-2 border-radius-10">
                    <input hidden value="" name="user_id_existente" id="user_id_existente">

                    <div class="row">

                        <div class="col s12" style="margin-bottom: 40px;">
                            <p class="font-weight-900 red-text">Já existe um usuario cadastrado com esses dados</p>
                            <p class="font-weight-400 red-text">A ocorrência será automaticamente associada a este
                                usuário informado.</p>
                            <i onclick="fecharMsgUsuarioExistente()"
                               class="material-icons grey-text modal-full-move-bottom-custom1"
                               style="cursor: pointer">close</i>
                        </div>

                        <div class="row">

                            <div class="input-field col s4">
                                <input id="user_existente_email" name="user_existente_email" type="text"
                                       class="validate">
                                <label for="user_existente_email">Email</label>
                            </div>

                            <div class="input-field col s2">
                                <input id="user_existente_telefone" name="user_existente_telefone" type="text"
                                       class="validate">
                                <label for="user_existente_telefone">Telefone</label>
                            </div>

                            <div class="input-field col s2">
                                <input name="user_existente_celular" id="user_existente_celular" type="text"
                                       class="validate">
                                <label for="user_existente_celular">Celular</label>
                            </div>

                            <div class="input-field col s2">
                                <input name="user_existente_cpf" id="user_existente_cpf" type="text" class="validate">
                                <label for="user_existente_cpf">CPF</label>
                            </div>

                        </div>


                        <div class="row">

                            <div class="input-field col s4">
                                <input id="user_existente_nome" name="user_existente_nome" type="text" class="validate">
                                <label for="user_existente_nome">Nome</label>
                            </div>

                            <div class="input-field col s4">
                                <input id="user_existente_data_nacimento" name="user_existente_data_nacimento"
                                       type="date">
                            </div>

                            <div class="input-field col s4">
                                <select id="user_existente_sexo" name="user_existente_sexo">
                                    <option value="0">Feminino</option>
                                    <option value="1">Masculino</option>
                                    <option value="2">Outros</option>

                                </select>
                                <label>Sexo</label>
                            </div>

                        </div>


                        <div class="row">
                            <div class="input-field col s4">
                                <select id="user_existente_bairro_id" name="user_existente_bairro_id">
                                    <option value="" disabled selected>Escolha um Bairro</option>

                                    @foreach($bairros->data as $bairro)
                                        <option value="{{ $bairro->id }}">{{ $bairro->nome }}</option>
                                    @endforeach

                                </select>
                                <label>Bairro</label>
                            </div>

                            <div class="input-field col s1">
                                <input id="user_existente_cep" name="user_existente_cep" type="text" class="validate">
                                <label for="user_existente_cep">CEP</label>
                            </div>

                            <div class="input-field col s3">
                                <input id="user_existente_rua" name="user_existente_rua" type="text"
                                       class="validate">
                                <label for="user_existente_rua">Rua</label>
                            </div>

                            <div class="input-field col s1">
                                <input id="user_existente_numero" name="user_existente_numero" type="text"
                                       class="validate">
                                <label for="user_existente_numero">Numero</label>
                            </div>

                            <div class="input-field col s3">
                                <input id="user_existente_complemento" name="user_existente_complemento" type="text"
                                       class="validate">
                                <label for="user_existente_complemento">Complemento</label>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col s12">
                                <a class="waves-effect waves-light btn" onclick="enviarFormEditarUser()">Editar</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="cadsatroUser">
                    <div class="row">
                        <div class="input-field col s8">
                            <input onchange="getUser('all')" id="new_user_all" name="all" type="text"
                                   class="validate">
                            <label for="new_user_all">Buscar por E-mail, Telefone, Celular e CPF</label>
                        </div>
                    </div>

                    <div hidden id="conteudoAposUserNaoExistir">

                        <div class="row">

                            <div class="input-field col s3">
                                <input id="new_user_email" name="new_user_email" type="text" class="validate">
                                <label for="new_user_email">Email</label>
                            </div>

                            <div class="input-field col s3">
                                <input id="new_user_celular" name="new_user_celular" type="text" class="validate">
                                <label for="new_user_celular">Celular</label>
                            </div>

                            <div class="input-field col s3">
                                <input id="new_user_telefone" name="new_user_telefone" type="text" class="validate">
                                <label for="new_user_telefone">Telefone</label>
                            </div>


                            <div class="input-field col s3">
                                <input id="new_user_cpf" name="new_user_cpf" type="text" class="validate">
                                <label for="new_user_cpf">CPF</label>
                            </div>
                        </div>

                        <div class="row">

                            <div class="input-field col s4">
                                <input id="new_user_nome" name="name" type="text" class="validate">
                                <label for="new_user_nome">Nome</label>
                            </div>


                            <div class="input-field col s4">
                                <input id="new_user_data_nascimento" name="new_user_data_nascimento" type="text">
                                <label for="new_user_data_nascimento">Nascimento</label>
                            </div>

                            <div class="input-field col s4">
                                <select name="user_sexo">
                                    <option value="0">Feminino</option>
                                    <option value="1">Masculino</option>
                                    <option value="2">Outros</option>
                                </select>
                                <label>Sexo</label>
                            </div>

                        </div>


                        <div class="row">
                            <div class="input-field col s4">
                                <select name="bairro_id_user">
                                    <option value="" disabled selected>Escolha um Bairro</option>

                                    @foreach($bairros->data as $bairro)
                                        <option value="{{ $bairro->id }}">{{ $bairro->nome }}</option>
                                    @endforeach

                                </select>
                                <label>Bairro</label>
                            </div>

                            <div class="input-field col s1">
                                <input id="new_user_cep" name="cep" type="text" class="validate">
                                <label for="new_user_cep">CEP</label>
                            </div>

                            <div class="input-field col s3">
                                <input id="new_user_rua" name="user_rua" type="text" class="validate">
                                <label for="new_user_rua">Rua</label>
                            </div>

                            <div class="input-field col s1">
                                <input id="new_user_numero" name="user_numero" type="text" class="validate">
                                <label for="new_user_numero">Numero</label>
                            </div>

                            <div class="input-field col s3">
                                <input id="new_user_complemento" name="user_complemento" type="text" class="validate">
                                <label for="new_user_complemento">Complemento</label>
                            </div>

                        </div>
                    </div>

                </div>


            </div>

            <br>

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

            <br>

            <div class="row">

                <div class="row">
                    <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 ocorrencia privada. (Ocorrência privadas não são visualizadas por outros
                                usuários)
                            </label>
                        </div>
                    </div>

                    <br>
                </div>

                @if($configuration['tem_orcamento'] === 1)
                    <div class="row" style="
                border-width: 1px;
                border-style: solid;
                padding: 20px;
                border-radius: 10px;
">
                        <div class="col s12" style="margin-bottom: 30px;">
                            <div class="switch">
                                <label id="switch-privada">
                                    <input name="privada" value="1" type="checkbox" id="possui-orcamento"
                                           onchange="possuiOrcamento()">
                                    <span class="lever"></span>
                                    Orçamento participativo
                                </label>
                            </div>
                        </div>

                        <div class="row" hidden id="conteudo-orcamento">
                            <div class="col s12">
                                <div onclick="abrirModal(this)" class="input-field col s4">
                                    <select onchange="getSubcategorias(this.value)" name="associacao_id"
                                            id="associacao_id">
                                        <option value="" disabled selected>Escolha uma associação</option>

                                        @foreach($associacoes->data as $associacao)
                                            <option value="{{ $associacao->id }}">{{ $associacao->nome }}</option>
                                        @endforeach

                                    </select>
                                    <label>Associações</label>
                                </div>

                                <div class="input-field col s4">
                                    <input id="valor_orcamento" name="valor_orcamento" type="text"
                                           class="validate dinheiro">
                                    <label for="valor_orcamento">Valor Orçamento</label>
                                </div>

                                <div class="input-field col s4">
                                    <select id="orcamento_categorias_id" name="orcamento_categorias_id">
                                        <option value="" disabled selected>Secretaria</option>

                                        @foreach($categorias->data as $categoria)
                                            <option value="{{ $categoria->id }}">{{ $categoria->nome }}</option>
                                        @endforeach

                                    </select>
                                    <label>Secretarias</label>
                                </div>
                            </div>
                            <div class="input-field col s12">
                               <textarea id="texto" name="orcamento_descricao" type="text"
                                         class="materialize-textarea validate"></textarea>
                                <label for="orcamento_descricao">Detalhes</label>
                            </div>
                        </div>

                        <br>
                    </div>

                @endif

                <div class="row">
                    <div class="input-field col s12">
                        <p class="font-weight-900 grey-text">
                            <i class="material-icons">place</i>
                            Localização
                        </p>
                    </div>
                    <div class="input-field col s4">
                        <input id="lat" name="lat" type="text"
                               class="validate">
                        <label for="lat">Lat e Long Ex.: -22.518981, -44.106699</label>
                    </div>
                </div>

                <div class="row">
                    <div class="input-field col s12">
                        <p class="font-weight-900 grey-text"><i class="material-icons">description</i> Descrição
                        </p>
                    </div>
                </div>

                <div class="row">
                    <div class="input-field col s12">
                                <textarea id="texto" name="texto" type="text"
                                          class="materialize-textarea validate"></textarea>
                    </div>
                </div>

            </div>

            <div class="row">

                <div class="row" style="margin-bottom: 30px;">
                    <div class="input-field col s2">
                        <p class="font-weight-900 grey-text"><i class="material-icons">location_city</i> Orgão
                        </p>
                    </div>
                </div>

                <div class="row">
                    <div id="divOrgao">

                        <div onclick="abrirModal(this)" class="input-field col s4">
                            <select onchange="getSubcategorias(this.value)" id="categoria_id">
                                <option value="" disabled selected>Escolha uma secretaria</option>

                                @foreach($categorias->data as $categoria)
                                    <option value="{{ $categoria->id }}">{{ $categoria->nome }}</option>
                                @endforeach

                            </select>
                            <label>Secretarias</label>
                        </div>


                        <div id="conteudoSubCategorias" class="col s4">

                        </div>


                        <div id="conteudoUnidade">

                        </div>

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

                    </div>

                    <div hidden id="loadOrgao" class="col s12">
                        <div class="progress">
                            <div class="indeterminate"></div>
                        </div>
                    </div>

                </div>

            </div>

            <div class="row">

                <div class="row" style="margin-bottom: 30px;">
                    <div class="input-field col s12">
                        <p class="font-weight-900 grey-text"><i class="material-icons">my_location</i> Endereço
                        </p>
                    </div>
                </div>

                <div class="row">
                    <div id="divEndereco">
                        <div class="input-field col s4">
                            <select onchange="getRuas(this.value)" id="bairro_id" name="bairro_id">
                                <option value="" disabled selected>Escolha um Bairro</option>

                                @foreach($bairros->data as $bairro)
                                    <option value="{{ $bairro->id }}">{{ $bairro->nome }}</option>
                                @endforeach

                            </select>
                            <label>Bairros</label>
                        </div>

                        <div id="conteudoRua">

                        </div>

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

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

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

                            <div class="col s4">

                                <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 hidden id="loadEndereco" class="col s12">
                            <div class="progress">
                                <div class="indeterminate"></div>
                            </div>
                        </div>

                    </div>

                </div>


            </div>


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

<script type="text/javascript"
        src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/jquery.mask.min.js') }}"></script>
<script>
    $('#new_user_telefone').mask('(99) 99999999');
    $('#new_user_celular').mask('(99) 99999-9999');
    $('#new_user_cpf').mask('999.999.999-99');
    $('#user_existente_cpf').mask('999.999.999-99');
    $('#new_user_data_nascimento').mask('99/99/9999');
    $('.dinheiro').mask('#.##0,00', {reverse: true});
    $('#user_existente_telefone').mask('(99) 99999-9999');
    $('#user_existente_celular').mask('(99) 99999-9999');
    $('#user_existente_cpf').val('999.999.999-99');

    function setAutenticada() {

        $('#divDadosUser').removeAttr('hidden', 'hiddem');

    }

    function setAnonima() {

        $('#divDadosUser').attr('hidden', 'hiddem');

    }

    function fecharMsgUsuarioExistente() {

        $('#loadGetUser').attr('hidden', 'hidden');
        $('#msgUsuarioExistente').attr('hidden', 'hidden');
        $('#cadsatroUser').removeAttr('hidden', 'hidden');

        $('#new_user_email').val('');
        $('#new_user_celular').val('');
        $('#new_user_nome').val('');
        $('#new_user_telefone').val('');
        $('#user_id_existente').val('');

    }

    function enviarFormEditarUser() {

        data = $('#formAbrirOcorrencia').serialize();

        $.ajax({
            type: 'POST',
            dataType: 'html',
            url: '/usuario/editar/ocorrencia',
            data: {'_token': '{{ csrf_token() }}', data: data},
            beforeSend: function () {


            },
            success: function (data) {

                Materialize.toast('Usuário alterado com sucesso', 3000);
                $('#new_user_' + ultimoTipoSalvo).val(ultimoDatoSalvo);
                getUser('all');

            },
            error: function (xhr) {

            }
        });

    }

    ultimoTipoSalvo = null;
    ultimoDatoSalvo = null;

    function getUser(tipo) {

        dado = $('#new_user_' + tipo).val();
        $('#user_id_existente').val('');

        if (dado.length === 0) {
            return;
        }

        ultimoTipoSalvo = tipo;
        ultimoDatoSalvo = dado;

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/usuario/verificar/existe',
            data: {dado: dado, tipo: tipo},
            beforeSend: function () {

                $('#loadGetUser').removeAttr('hidden', 'hidden');
                $('#msgUsuarioExistente').attr('hidden', 'hidden');
                $('#cadsatroUser').attr('hidden', 'hidden');

            },
            success: function (data) {

                data = JSON.parse(data);

                if (data.data !== null) {

                    $('#user_id_existente').val(data.data.id);
                    $('#user_existente_nome').val(data.data.name);
                    $('#user_existente_email').val(data.data.email);
                    $('#user_existente_telefone').val(data.data.telefone);
                    $('#user_existente_celular').val(data.data.celular);
                    $('#user_existente_cpf').val(data.data.cpf);
                    $('#user_existente_data_nacimento').val(data.data.data_nascimento);
                    $('#user_existente_sexo').val(data.data.sexo);
                    $('#user_existente_bairro_id').val(data.data.bairro_id);
                    $('#user_existente_cep').val(data.data.cep);
                    $('#user_existente_rua').val(data.data.rua);
                    $('#user_existente_numero').val(data.data.numero);
                    $('#user_existente_complemento').val(data.data.complemento)


                    $('#new_user_email').val('');
                    $('#new_user_celular').val('');
                    $('#new_user_nome').val('');
                    $('#new_user_telefone').val('');

                    Materialize.updateTextFields();

                    $('#msgUsuarioExistente').removeAttr('hidden', 'hidden');
                    $('#loadGetUser').attr('hidden', 'hidden');
                    $('#cadsatroUser').attr('hidden', 'hidden');
                    $('#conteudoAposUserNaoExistir').attr('hidden', 'hidden');

                    $(document).ready(function () {
                        $('select').material_select();
                    });

                    return;

                }

                $('#msgUsuarioExistente').attr('hidden', 'hidden');
                $('#loadGetUser').attr('hidden', 'hidden');
                $('#cadsatroUser').removeAttr('hidden', 'hidden');
                $('#conteudoAposUserNaoExistir').removeAttr('hidden', 'hidden');


            },
            error: function (xhr) {

                fecharMsgUsuarioExistente();

            }
        });

    }


    function getSubcategorias(data, tipo1, tipo2) {

        getUnidades(data, tipo2);

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/gerenciar/ocorrencia/trocar/categoria/subcategoria/get/subcategoria',
            data: {data: data, tamanho: 12},
            beforeSend: function () {

                $('#divOrgao').attr('hidden', 'hidden');
                $('#loadOrgao').removeAttr('hidden', 'hidden');

                $('#conteudoSubCategorias').empty();

            },
            success: function (data) {

                $('#conteudoSubCategorias').append(data);

                Materialize.updateTextFields();

                $(document).ready(function () {
                    $('select').material_select();
                });


                if (typeof tipo1 != 'undefined') {
                    $('#subcategoria_id').val(tipo1)
                }

                $(document).ready(function () {
                    $('select').material_select();
                });


                $('#divOrgao').removeAttr('hidden', 'hidden');
                $('#loadOrgao').attr('hidden', 'hidden');


            },
            error: function (xhr) {

            }
        });

    }

    function getUnidades(data, tipo2) {

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/gerenciar/componente/unidade',
            data: {data: data, tamanho: 4},
            beforeSend: function () {

                $('#conteudoUnidade').empty();
                $('#cartao_sus').attr('hidden', 'hidden');

            },
            success: function (data) {

                $('#conteudoUnidade').append(data);
                $('#cartao_sus').removeAttr('hidden', 'hidden');

                Materialize.updateTextFields();

                $(document).ready(function () {
                    $('select').material_select();
                });

                if (typeof tipo2 != 'undefined') {
                    $('#unidade_id').val(tipo2);
                }

                $(document).ready(function () {
                    $('select').material_select();
                });

            },
            error: function (xhr) {

            }
        });

    }

    function getRuas(data, tipo) {

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/gerenciar/componente/ruas/abrir',
            data: {data: data, tamanho: 4},
            beforeSend: function () {

                $('#divEndereco').attr('hidden', 'hidden');
                $('#loadEndereco').removeAttr('hidden', 'hidden');
                $('#conteudoRua').empty();

            },
            success: function (data) {

                $('#conteudoRua').append(data);
                $('#conteudoComplemento').removeAttr('hidden', 'hidden');

                Materialize.updateTextFields();

                $(document).ready(function () {
                    $('select').material_select();
                });

                if (typeof tipo != 'undefined') {
                    $('#rua_id').val(tipo);
                }

                $(document).ready(function () {
                    $('select').material_select();
                });

                $('#divEndereco').removeAttr('hidden', 'hidden');
                $('#loadEndereco').attr('hidden', 'hidden');

            },
            error: function (xhr) {

            }
        });

    }

    function mudarCorLabelSwitch(id) {

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

    function possuiOrcamento() {
        if ($('#possui-orcamento').is(':checked')) {
            $('#conteudo-orcamento').removeAttr('hidden', 'hidden');
            return;
        }

        $('#conteudo-orcamento').attr('hidden', 'hidden');
    }


    $("#formAbrirOcorrencia").validate({
        rules: {
            name: {
                required: true,
            },
            texto: {
                required: true
            },
            subcategoriaId: {
                required: true
            },
            user_existente_sexo: {
                required: true
            },
            associacao_id: {
                required: true,
            },
            new_user_email: {
                required: true,
            },
            new_user_cpf: {
                required: true,
            },
        },
        //For custom messages
        messages: {
            name: {
                required: "Campo obrigatorio"
            },
            texto: {
                required: "Campo obrigatorio"
            },
            subcategoriaId: {
                required: "Campo obrigatorio"
            },
            user_existente_sexo: {
                required: 'Escolha um sexo'
            },
            associacao_id: {
                required: 'Campo obrigatória casa possua um ocamento participativo'
            },
            new_user_email: {
                required: "Campo obrigatorio"
            },
            new_user_cpf: {
                required: "Campo obrigatorio"
            },
        },
        errorElement: 'div',
        errorPlacement: function (error, element) {
            var placement = $(element).data('error');
            if (placement) {
                $(placement).append(error)
            } else {
                error.insertAfter(element);
            }
        }
    });

</script>