@extends('form.corpo')
@section('corpo')

    <style type="text/css">
        a.btn:hover {
            text-decoration: none !important;
        }
    </style>

    <link rel="stylesheet" href="{{ url('') }}/wizzard/css/jquery.steps.css">

    <script src="{{ url('') }}/wizzard/js/jquery.cookie-1.3.1.js"></script>
    <script src="{{ url('') }}/wizzard/js/jquery.steps.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.js"></script>

    @php
        $estados = [
            'AC' => 'Acre', 'AL' => 'Alagoas', 'AP' => 'Amapá', 'AM' => 'Amazonas',
            'BA' => 'Bahia', 'CE' => 'Ceará', 'DF' => 'Distrito Federal', 'ES' => 'Espírito Santo',
            'GO' => 'Goiás', 'MA' => 'Maranhão', 'MS' => 'Mato Grosso do Sul', 'MT' => 'Mato Grosso',
            'MG' => 'Minas Gerais', 'PA' => 'Pará', 'PB' => 'Paraíba', 'PR' => 'Paraná',
            'PE' => 'Pernambuco', 'PI' => 'Piauí', 'RJ' => 'Rio de Janeiro', 'RN' => 'Rio Grande do Norte',
            'RS' => 'Rio Grande do Sul', 'RO' => 'Rondônia', 'RR' => 'Roraima', 'SC' => 'Santa Catarina',
            'SP' => 'São Paulo', 'SE' => 'Sergipe', 'TO' => 'Tocantins'
        ];
        $ufSelecionado = old('uf', $dados->uf ?? '');
    @endphp

    <div class="content">
        <script type="text/javascript" src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>

        <form method="POST" action="{{ $route }}" enctype="multipart/form-data" class="formvalidator" id="form" >
            @csrf
            @method($method)

            <input type="hidden" name="tipo" value="{{ $tipo }}">
            <input type="hidden" name="is_edit" value="{{ isset($dados) ? 1 : 0}}">

            <script>
                function submitform() {

                    $("#form").submit();
                }
                $(document).ready(function() {
                    var formBasico = $("#form");
                    formBasico.validate({

                        highlight: function(element) {
                            $(element).parents().addClass('error_div');
                        },
                        unhighlight: function(element) {
                            $(element).parents().removeClass('error_div');
                        },

                        ignore: ":disabled,:hidden",
                        onkeyup: false,
                        rules: {
                            //PASSO 1
                            'tipo_interessado': {
                                required: true
                            },
                            'assunto': {
                            required: true,
                            maxlength: 254,
                            minlength: 4
                            },
                            'cnpj_cpf': {
                            required: true,
                            maxlength: 19,
                            minlength: 14
                            },
                            'razao_nome': {
                                required: true,
                                maxlength: 190
                            },
                            'endereco': {
                                required: true,
                                maxlength: 190
                            },
                            'numero_casa_km': {
                                required: true,
                                maxlength: 254
                            },
                            'bairro_localidade': {
                                required: true,
                                maxlength: 49
                            },
                            'municipio': {
                                required: true,
                                maxlength: 190
                            },
                            'uf': {
                                required: true,
                                maxlength: 9
                            },
                            'cep': {
                                required: true,
                                maxlength: 14,
                                minlength: 9,
                            },
                            'numero_processo': {
                                required: true,
                                maxlength: 50
                            },
                            'email': {
                                required: true,
                                maxlength: 59,
                                email: true
                            },
                            'emailConfirm': {
                                required: true,
                                equalTo: '#email'
                            },
                            'telefone_1': {
                                required: true,
                                maxlength: 15,
                                minlength: 14,
                            },
                            'telefone_2': {
                                maxlength: 15,
                                minlength: 14,
                            },

                             // PASSO 2
                            'documento_de_identificacao_do_requerente_do_pedido_de_vista': {
                                required: true,
                            },
                        }
                    });

                    jQuery.extend(jQuery.validator.messages, {
                        required: "Este campo &eacute; requerido.",
                        remote: "Por favor, corrija este campo.",
                        email: "Por favor, forne&ccedil;a um endere&ccedil;o eletr&ocirc;nico v&aacute;lido.",
                        url: "Por favor, forne&ccedil;a uma URL v&aacute;lida.",
                        date: "Por favor, forne&ccedil;a uma data v&aacute;lida.",
                        dateISO: "Por favor, forne&ccedil;a uma data v&aacute;lida (ISO).",
                        number: "Por favor, forne&ccedil;a um n&uacute;mero v&aacute;lido.",
                        digits: "Por favor, forne&ccedil;a somente d&iacute;gitos.",
                        creditcard: "Por favor, forne&ccedil;a um cart&atilde;o de cr&eacute;dito v&aacute;lido.",
                        equalTo: "Por favor, forne&ccedil;a o mesmo valor novamente.",
                        accept: "Por favor, forne&ccedil;a um valor com uma extens&atilde;o v&aacute;lida.",
                        maxlength: jQuery.validator.format(
                            "Por favor, forne&ccedil;a n&atilde;o mais que {0} caracteres."),
                        minlength: jQuery.validator.format("Por favor, forne&ccedil;a ao menos {0} caracteres."),
                        rangelength: jQuery.validator.format(
                            "Por favor, forne&ccedil;a um valor entre {0} e {1} caracteres de comprimento."),
                        range: jQuery.validator.format("Por favor, forne&ccedil;a um valor entre {0} e {1}."),
                        max: jQuery.validator.format("Por favor, forne&ccedil;a um valor menor ou igual a {0}."),
                        min: jQuery.validator.format("Por favor, forne&ccedil;a um valor maior ou igual a {0}.")
                    });


                    $("#wizard").steps({
                        headerTag: "h2",
                        bodyTag: "section",
                        transitionEffect: "slideLeft",
                        stepsOrientation: "vertical",
                        enableAllSteps: true,
                        enableContentCache: false,

                        labels: {
                            cancel: "Cancelar",
                            current: "Atual:",
                            pagination: "Paginação",
                            finish: "Finalizar",
                            next: "Próximo",
                            previous: "Anterior",
                            loading: "Carregando ..."
                        },
                        onStepChanging: function(event, currentIndex, newIndex) {
                            if(($('#peso').val()) >= 1 ){
                                $('.actions').css("display", "none");
                                abrirModalAviso();
                            }
                            function topTop() {

                                $('html, body').animate({
                                    scrollTop: 0
                                }, 1000, 'easeInOutCirc');
                            }
                            topTop();
                            return $("#form").valid();
                        },
                        onStepChanged: function(event, currentIndex, priorIndex) {
                            $(".done .number").html("");
                            $(".done .number").append('<i class="fa fa-check" style="margin:0 3px;"> </i>');
                        },

                        onFinished: function(event, currentIndex) {
                            if (!$('#confirm-delete').length) {
                                $('body').append(
                                    '<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" ' +
                                    'aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog">' +
                                    '<div class="modal-content"><div class="modal-header  text-white" style="background-color:{{ $portal->headercor }}; color:#FFF;">Cadastrar Processo' +
                                    '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                                    '<span aria-hidden="true">&times;</span></button></div><div class="modal-body">' +
                                    'Tem certeza de que deseja Cadastrar o Processo ?</div><div class="modal-footer">' +
                                    '<button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar' +
                                    '</button><a class="btn btn-primary text-white" onclick="submitform()" id="dataComfirmOK">Cadastrar</a><' +
                                    '/div></div></div></div>');
                            }
                            $('#confirm-delete').modal({
                                show: true
                            });
                            return false;
                        },

                    });
                });

                 // Esconde o botão "Finalizar" ao visualizar os dados
                $(document).ready(function () {
                    if ({{ $is_show ? 'true' : 'false' }}) {
                        $('.actions a[href="#finish"]').hide(); 
                    }
                });
            </script>
            {{-- <script>
                document.addEventListener("DOMContentLoaded", function() {
                    var ufSelecionado = document.getElementById("uf").value;
                    var municipioSelecionado = "{{ old('municipio') }}";
            
                    if (ufSelecionado && municipioSelecionado != '') {
                        buscarCidades('', municipioSelecionado);
                    }
                });
            </script> --}}

            <div id="wizard">
                <h2>{{ $passo1 }}</h2>
                <section>
                    @include('form.anexos-solicitacoes.passo1')
                </section>

                @if(!isset($dados)) 
                    <h2> {{ $passo2 }}</b></h2>
                    <section>
                        @include('form.anexos-solicitacoes.passo2')
                    </section>
                @endif
            </div>
        </div>

        </div>
    </form>
@endsection