@extends('template')


@section('content')
<div class="page-content">
    <div class="container-fluid">
        <div class="page-content-inner">
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet light">
                        <div class="portlet-body">
                            <div class="row">
                                    <div class="col-md-12">
                                        <span class="font-blue-madison title"><i class="fa fa-search"></i>
                                         Pesquisa de Satisfação {!!$pesquisa->titulo!!}
                                     </span>
                                     <a href="{{ route('admin.pesquisa.satisfacao.view',['id'=>$pesquisa->id]) }}" class="right btn red popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Voltar para pesquisa"><i class="fa fa-arrow-circle-left"></i>  Voltar</a>
                                     <hr>
                                 </div>
                             </div>
                            
                            {!! Form::open(['route' => $action->route, 'method' => $action->method, 'id'=>'pesquisa']) !!} 
                                {!! Form::hidden('pesquisa_satisfacao_id', $pesquisa->id) !!}
                                <div class="row">

                                    <div class="col-xs-12" >
                                        <span class="font-blue-madison title">
                                            <span class="fa fa-plus"></span> Adicionar 
                                        </span>
                                    </div>
                                    <div class="col-xs-12">
                                        <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                            {!! Form::textarea('enunciado','', ['class' => 'form-control', 'id'=>'enunciado', 'autocomplete' => 'off','style'=>'max-height:100px;resize:none']) !!}
                                            {!! Form::label('name', 'Pergunta') !!} 
                                        </div>
                                        <div class="form-group">
                                            <span class="font-blue-madison subtitle" >
                                                Tipo de Resposta
                                            </span>
                                        </div>
                                        <div class="form-group col-xs-12">
                                            <div class="row">
                                                <ul class="nav nav-tabs">
                                                    <li class="active">
                                                        <a href="#respostaEscrita" class="tipoResposta" data-tipo="escrita" data-toggle="tab">
                                                            Escrita
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#respostaAlternativa" class="tipoResposta" data-tipo="alternativas" data-toggle="tab">
                                                            Alternativas
                                                        </a>
                                                    </li>
                                                </ul>
                                                <div class="tab-content">
                                                    <div class="tab-pane fade active in" id="respostaEscrita">
                                                        <div class="md-checkbox has-info right">
                                                            <input name="obrigatorio" type="checkbox" id="checkboxObrigatorio" value="true" class="md-check">
                                                            <label for="checkboxObrigatorio">
                                                                <span class="inc"></span>
                                                                <span class="check"></span>
                                                                <span class="box"></span> Campo obrigatório  </label>
                                                            </div>
                                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                                {!! Form::textarea('','', ['class' => 'form-control', 'autocomplete' => 'off' ,'disabled'=>'' ,'style'=>'max-height:100px;resize:none']) !!}
                                                                {!! Form::label('name', 'Resposta') !!} 
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane fade" id="respostaAlternativa">
                                                            <div id='template'>
                                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label" >
                                                                    <div class="input-group left-addon">
                                                                        <span class="input-group-btn btn-left">
                                                                            <div class="md-radio">
                                                                               {!! Form::radio('','' ,''  , ['id'=>'po','class'=>'md-radiobtn idChanger']) !!}
                                                                               <label for="po" class="forChanger">
                                                                                <span></span>
                                                                                <span class="check has-personalizado"></span>
                                                                                <span class="box"></span>
                                                                                <br>
                                                                            </label>
                                                                        </div>
                                                                    </span>
                                                                    <div class="input-group-control">
                                                                        {!! Form::text('alternativa[]', '', ['class' => 'form-control opcao', 'autocomplete' => 'off','data-validation'=>'required']) !!}
                                                                        {!! Form::label('name', 'Opção') !!}
                                                                    </div>
                                                                    <span class="input-group-btn btn-right btn-listener">
                                                                        <a class="btn green-haze cloneOption" type="button">
                                                                            <span class="fa fa-plus"></span>
                                                                        </a>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div id='options'></div>
                                                    </div>
                                                    {!! Form::hidden('tipoResposta','escrita',['id'=>'tipoResposta']) !!}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <button type="submit"  class="btn green-jungle popovers"  data-container="body" data-trigger="hover" data-placement="top" id='salvar' data-content="Salvar pergunta na pesquisa">
                                                <i class=" fa fa-save"></i> Adicionar Pergunta
                                            </button>
                                        </div>
                                    </div>  
                                </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END PAGE CONTENT INNER -->
    </div>
</div>
@stop()

@section('js-admin-user')
<script src="{{ asset('/assets/global/scripts/app.min.js') }}" type="text/javascript"></script>

<script>

    $(document).ready( function() { 

/*         $("body").on('submit', 'form', function(event){
            let form = this;
                $.post($(form).attr('action'), $(form).serialize(), function(data){
                    if(data.tipo == 'error'){ 
                        swal({"title":"Ops","text":data.mensagem,"showConfirmButton":true,"type":"error","html":true});
                    }else{ 
                        swal({
                          title: "Realizado com sucesso!",
                          type: "success",
                          showCancelButton: false,
                          confirmButtonText: "OK",
                          closeOnConfirm: true,
                          closeOnCancel: true
                      },
                      function(isConfirm) {
                        location.href = data.redirect;
                    }); 
                    } 
                });
            event.preventDefault();
        });*/

        /* Selecionar tipo de resposta de acordo com a tab */
        $('.tipoResposta').on('click', function() {
            $('#tipoResposta').val($(this).data('tipo'));
        });

        /*Clona Campos, troca id js, troca botão de adicionar para excluir */
        $('.cloneOption').on('click', function() {
            let buttonPlus = $(this);
            let line = buttonPlus.parent().parent().parent();
            let lineClone = line.clone();
            let idChanger = line.find('.idChanger');
            let forChanger = line.find('.forChanger');

            let idC = $(idChanger[0]).attr('id');
            $(idChanger[0]).attr('id',idC+'1');
            let forC = $(forChanger[0]).attr('for');
            $(forChanger[0]).attr('for',forC+'1');

            let conteiner =$('#options');
            let buttonMinus = $("<span class='input-group-btn btn-right'><a class='btn blue cloneOption' type='button'><span class='fa fa-minus'></span></a></span>");
            let btnContainer =  lineClone.find('.btn-listener');
            buttonMinus.on('click', function() {
                let buttonMinus = $(this);
                let lined = buttonMinus.parent().parent().parent();
                lined.remove();
            });
            btnContainer.html(buttonMinus);
            conteiner.append(lineClone);

        });  


        $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') } });

        @if (count($errors) > 0)

        var text = '';
        var type = 'error';
        var title = 'Ops';

        type = '{{ $errors->all()[0] }}';
        text += '{{ $errors->all()[1] }} <br>';

        if(type!='error'){ title = 'Sucesso';  }

        swal({"title":title,"text": text  ,"showConfirmButton":true,"type": type ,"html":true});
        @endif
        
    });
</script>
@stop