@extends('layouts.master')
@section('content')
    @push('css')
        <link rel="stylesheet" type="text/css" href="{{ asset('js/plugins/icheck-1.x/skins/all.css') }}">
    @endpush

    @include('layouts.header')

    <section id="cadastro">
        @component('_components.title')
            {{ $title }}
        @endcomponent

        <div class="container py-3 py-md-5">
            @if ($errors->has('password'))                        
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ $errors->first('password') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>                        
            @endif     

            @if ($errors->has('email'))                        
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ $errors->first('email') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>                        
            @endif

            <div class="row">
                <div class="col-lg-6 pb-5">
                    {{ Form::open(['route' => 'register', 'id' => 'form']) }}
                        <div class="form-group">
                            {{ Form::label('name', 'Nome') }} 
                            {{ Form::text('name', @session('name'), ['class' => 'form-control', 'required' => 'required', 'autofocus' => 'autofocus']) }}                            
                        </div>

                        <div class="form-group">
                            {{ Form::label('email', 'E-mail') }} 
                            {{ Form::email('email', @session('email'), ['id' => 'email', 'class' => 'form-control', 'required' => 'required']) }}
                            <div id="email-indisponivel" class="invalid-feedback fs-sm d-none">E-mail indisponível</div>                            
                            <div id="email-invalido" class="invalid-feedback fs-sm d-none">E-mail inválido</div>
                            <div class="valid-feedback fs-sm d-none">E-mail disponível</div>                            
                        </div> 

                        <div class="form-group">
                            <div class="form-row">
                                <div class="col"> 
                                    {{ Form::label('telefone', 'Telefone') }} 
                                    {{ Form::text('telefone', old('telefone'), ['id' => 'telefone','class' => 'form-control']) }}
                                </div>
                                <div class="col">
                                    {{ Form::label('data-nascimento', 'Data de nascimento') }} 
                                    {{ Form::text('data_nascimento', old('nasc'), ['id' => 'data-nascimento','class' => 'form-control', 'placeholder' => 'dd/mm/aaaa']) }}
                                    <div id="data-invalida" class="invalid-feedback fs-sm d-none">Data inválida</div>
                                </div>
                            </div>
                        </div> 

                        <div class="form-group"> 
                            {{ Form::label('sexo', 'Sexo') }}
                            <p class="mb-0">
                                <label class="icheck cursor-pointer">
                                    {{ Form::radio('sexo', 'masculino', true, ['id' => 'sexo-masculino']) }} <span class="ml-2">Masculino</span>
                                </label>
                            </p>                            
                            <p class="mb-0">
                                <label class="icheck cursor-pointer">
                                    {{ Form::radio('sexo', 'feminino', false, ['id' => 'sexo-feminino']) }} <span class="ml-2">Feminino</span>
                                </label>
                            </p>                            
                        </div>

                        <h2 class="fs-md font-weight-bold mt-0 mb-4">Endereço</h2>   

                        <div class="form-group">
                            <div class="form-row"> 
                                <div class="col-sm-6 mb-3 mb-sm-0">
                                    {{ Form::label('estado', 'Estado') }}
                                    {{ Form::select('estado', $estados->pluck('nome', 'id'), 19, ['id' => 'estados', 'class' => 'form-control', 'required' => 'required']) }}
                                </div>
                                <div class="col-sm-6">
                                    {{ Form::label('cidade', 'Cidade') }}
                                    {{ Form::select('cidade', $cidades->pluck('nome', 'id'), 6993, ['id' => 'cidades', 'class' => 'form-control', 'required' => 'required']) }}
                                </div>
                            </div>
                        </div>

                        <div class="form-group">                            
                            {{ Form::label('bairro', 'Bairro') }}
                            {{ Form::select('bairro', $bairros->pluck('nome', 'id'), null, ['id' => 'bairros', 'class' => 'form-control', 'required' => 'required', 'placeholder' => 'Selecione...']) }}                                
                        </div>                 

                        <div class="form-group">
                            <div class="row"> 
                                <div class="col-md-6">
                                    {{ Form::label('password', 'Senha') }}
                                    {{ Form::password('password', ['id' => 'password','class' => 'form-control', 'required' => 'required']) }}
                                    <div id="senha-invalida" class="invalid-feedback fs-sm d-none">Mínimo de 6 caracteres</div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row"> 
                                <div class="col-md-6">
                                    {{ Form::label('password_confirmation', 'Confirme a senha') }}
                                    {{ Form::password('password_confirmation', ['id' => 'password_confirmation','class' => 'form-control', 'required' => 'required']) }}
                                    <div id="confirmar-senha-invalida" class="invalid-feedback fs-sm d-none">Confirmação de senha incorreta</div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            @if (session('avatar'))
                                {{ Form::hidden('avatar', session('avatar')) }}
                            @endif

                            {{ Form::submit('Cadastrar', ['class' => 'button button-md fs-md font-weight-light bg-gradient text-white text-uppercase rounded btn-block btn-md-inline-block']) }}
                        </div>
                    </form>
                </div>

                <div class="col-lg-6 d-none d-lg-flex align-items-end justify-content-center">
                    <img class="img-fluid" src="{{ asset('images/skin/img-04.jpg') }}" alt="Cadastra-se">
                </div>                                          
            </div>
        </div>
    </section>  

    @include('layouts.footer')    
@endsection

@push('scripts')
    <script type="text/javascript" src="{{ asset('js/jquery.mask.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/plugins/icheck-1.x/icheck.min.js') }}"></script>
    <script type="text/javascript">
        verify_email = ({{ session()->has('email') ? 'true' : 'false' }});

        $('#email').blur(function(){
            verify_email = false;

            $(this).removeClass('is-valid is-invalid');
            $(this).next('.valid-feedback').addClass('d-none');
            $('#email-invalido').addClass('d-none');
            $('#email-indisponivel').addClass('d-none');

            email = $(this).val();
            
            if (email.length){
                if (is_email(email)){
                    $.getJSON('{{ url('json/email-exists') }}/' + email, function(data) {
                        if (data.status){
                            verify_email = false; 
                            $('#email').addClass('is-invalid');
                            $('#email-indisponivel').removeClass('d-none');
                        } else {
                            verify_email = true;
                            $('#email').addClass('is-valid');
                            $('#email').siblings('.valid-feedback').removeClass('d-none');
                        }
                    });  
                } else {
                    $('#email').addClass('is-invalid');
                    $('#email-invalido').removeClass('d-none');
                }
            }    
        });

        $('#estados').change(function(){
            eid = $(this).val();
            $.getJSON('{{ url('json/cidades') }}/' + eid, function(data) {
              var items = [];
              items.push('<option>Selecione...</option>');
              $.each(data, function(key, val) {
                items.push('<option value="' + val.id + '">' + val.nome + '</option>');
              });
             
              $('#cidades').html(items.join(''));
              $('#bairros').html('<option>Selecione uma cidade...</option>');
            });
        });

        $('#cidades').change(function(){
            cidades_change();
        });

        function cidades_change(){
            cid = $('#cidades').val();
            $.getJSON('{{ url('json/bairros') }}/' + cid, function(data) {
              var items = [];
              items.push('<option>Selecione...</option>');
              $.each(data, function(key, val) {
                items.push('<option value="' + val.id + '">' + val.nome + '</option>');
              });
             
              $('#bairros').html(items.join(''));
            });
        }        

        verify_date = true;
        $('#data-nascimento').blur(function(){
            verify_date = false;
            $('#data-invalida').addClass('d-none');
            $(this).removeClass('is-invalid');

            data = $(this).val();
            if (!data.length || is_date(data)){
               verify_date = true;                
            } else {
                verify_date = false; 
                $(this).addClass('is-invalid');
                $('#data-invalida').removeClass('d-none');
            }
        })

        verify_password = false;
        $('#password').blur(function(){
            verify_password = false;
            $('#senha-invalida').addClass('d-none');
            $(this).removeClass('is-invalid');

            senha = $(this).val();
            if (senha.length >= 6){
               verify_password = true;                
            } else {
                verify_password = false; 
                $(this).addClass('is-invalid');
                $('#senha-invalida').removeClass('d-none');
            }
        })

        verify_password_confirmation = false;
        $('#password_confirmation').blur(function(){
            verify_password_confirmation = false;
            $('#confirmar-senha-invalida').addClass('d-none');
            $(this).removeClass('is-invalid');

            senha = $('#password').val();
            csenha = $(this).val();

            if (csenha.length && (csenha == senha)){
               verify_password_confirmation = true;                
            } else {
                verify_password_confirmation = false; 
                $(this).addClass('is-invalid');
                $('#confirmar-senha-invalida').removeClass('d-none');
            }
        })

        $('#telefone').mask(phoneMask, phoneMaskOptions);
        $('#data-nascimento').mask('99/99/9999');

        $('#form').submit(function(){
            return verify_email && verify_date && verify_password && verify_password_confirmation;
        })

        $('.icheck').iCheck({
            checkboxClass: 'icheckbox_flat-blue',
            radioClass: 'iradio_square-blue'
        });
    </script>
@endpush