@include('plantillas.header')
<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Subheader-->
  
    <!--end::Subheader-->
    <!--begin::Entry-->
    <form action="{{url('cuestionariosstore')}}" method="POST" enctype="multipart/form-data">
                                @csrf  
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <!--begin::Dashboard-->
            <!--begin::Row-->
            <div class="row">
                <div class="col-xl-12">
                    <!--begin::Tiles Widget 1-->
                    <div class="card card-custom gutter-b card-stretch">
                        <!--begin::Header-->
                        <div class="card-header border-0 pt-5">
                            <div class="card-title">
                                <div class="card-label">
                                    <div class="font-weight-bolder">{{ __('message.cuestionario_page_title_create') }}</div>

                                </div>
                            </div>
                          
                            <div class="card-toolbar">
                                <!--begin::Button-->
                                <a href="/" style="background:#008AA7;border-color:#008AA7;position: relative;right: 4%;" class="btn btn-primary font-weight-bolder">
                                    <span class="svg-icon svg-icon-md">
                                        <!--begin::Svg Icon | path:/metronic/theme/html/demo2/dist/assets/media/svg/icons/Design/Flatten.svg-->
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px"
                                            viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24"></rect>
                                                <circle fill="#000000" cx="9" cy="15" r="6"></circle>
                                                <path
                                                    d="M8.8012943,7.00241953 C9.83837775,5.20768121 11.7781543,4 14,4 C17.3137085,4 20,6.6862915 20,10 C20,12.2218457 18.7923188,14.1616223 16.9975805,15.1987057 C16.9991904,15.1326658 17,15.0664274 17,15 C17,10.581722 13.418278,7 9,7 C8.93357256,7 8.86733422,7.00080962 8.8012943,7.00241953 Z"
                                                    fill="#000000" opacity="0.3"></path>
                                            </g>
                                        </svg>
                                        <!--end::Svg Icon-->
                                    </span>{{ __('message.boton_regresar') }} </a>
                                    
                                <!--end::Button-->
                                
                                <button type="submit" style="background:#008AA7;border-color:#008AA7;" class="btn btn-primary font-weight-bolder">
                
                
             
                        <span class="svg-icon svg-icon-md">
                    <!--begin::Svg Icon | path:/metronic/theme/html/demo2/dist/assets/media/svg/icons/Design/Flatten.svg-->
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <rect x="0" y="0" width="24" height="24"></rect>
                            <circle fill="#000000" cx="9" cy="15" r="6"></circle>
                            <path d="M8.8012943,7.00241953 C9.83837775,5.20768121 11.7781543,4 14,4 C17.3137085,4 20,6.6862915 20,10 C20,12.2218457 18.7923188,14.1616223 16.9975805,15.1987057 C16.9991904,15.1326658 17,15.0664274 17,15 C17,10.581722 13.418278,7 9,7 C8.93357256,7 8.86733422,7.00080962 8.8012943,7.00241953 Z" fill="#000000" opacity="0.3"></path>
                        </g>
                    </svg>
                    <!--end::Svg Icon-->
                </span>{{ __('message.boton_guardar') }}  
                
                
                  </button>

                            </div>
                            
                        
    
                        </div>
                        <!--end::Header-->
                        <!--begin::Body-->

                        <div class="card-body">
                            <div class="col-sm col-md col-lg col-xs" style="align:center;">
                                
                                 <div class="col col-xs-12 row" style="margin:0 0 20px 0 !important;background-color: whitesmoke;padding: 10px;">
			<div class="col-lg-1 col-xs-12">			
          <i style="font-size: 25px; margin-top: 50%;" class="fas fa-file-signature"></i>
          </div>	
          <div class="col-lg-11 col-xs-12">
         
    {{ __('message.cuestionario_text_1') }}

          </div>
        </div>
        <br>
         <br>                     
                                <div class="col-lg-12 col-sm-12 col-md col-xs-12 col-12 m-auto">
                                   <div class="row">
                                    
                                
                                
                                
                                <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                  <div class="form-group">
                                <label><strong> {{ __('message.cuestionario_label_1')}}</strong> </label>
                                <input type="text"  name="nombre_cuestionario" id='nombre_cuestionario'  class="form-control" required tabindex="1">
                                </div>  
                                </div>
                                
                                <!--div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
                                  <div class="form-group">
                                <label><strong> {{ __('message.cuestionario_label_2')}} </strong></label>
                                <input type="text"  name="descripcion_cuestionario" id='descripcion_cuestionario'  class="form-control"   tabindex="2">
                                </div>  
                                </div-->
                                
                                 
                                
                                <!--div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
                                <label for="periodo"><strong>*Periodo</strong></label>
                                <div class="input-group date form-group" id="startdate" data-date-orientation= "bottom" data-date-start-date="default" data-date-autoclose= true data-provide="datepicker" data-date-format="dd-mm-yyyy">
                                <input required placeholder= "Inicio" class="form-control"  type="text"  name="inicio" id= 'inicio' class="form-control datepicker inicio" tabindex="3"><div class="input-group-addon">
                                <span class="glyphicon glyphicon-th"></span>
                                </div>
                                </div>
                                </div>

                                <div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
                                <label style="color:transparent;" for="periodo"><strong>Termina</strong></label>
                                <div class="input-group date form-group " id="enddate" data-date-orientation= "bottom" data-date-autoclose= true data-provide="datepicker" data-date-start-date="default" data-date-format="dd-mm-yyyy">
                                <input required class="form-control fechaFin " placeholder= "Fin"  type="text"  name="fin" id= 'fin' class="form-control form_datetime" tabindex="3"><div class="input-group-addon">
                                <span class="glyphicon glyphicon-th"></span>
                                </div>
                                </div>
                                </div-->
                                
                                <div class="col-lg-12 col-sm-12 col-md col-xs-12">
                                  <div class="form-group">
                                <label> {{ __('message.cuestionario_label_3') }} </label>
                                <textarea class="form-control"  name="bienvenida_cuestionario" id="body2" tabindex="3"></textarea>
                                </div>  
                                </div>
                                
                                <div class="col-lg-12 col-sm-12 col-md col-xs-12">
                                  <div class="form-group">
                                <label> {{ __('message.cuestionario_label_4') }} </label>
                                <textarea class="form-control"  name="texto_capturar_nombre" tabindex="4"></textarea>
                                </div>  
                                </div>
                                
                                <div class="col-lg-12 col-sm-12 col-md col-xs-12">
                                  <div class="form-group">
                                <label> {{ __('message.cuestionario_label_5') }} </label>
                                <textarea class="form-control"  name="texto_capturar_email" tabindex="5"></textarea>
                                </div>  
                                </div>
                                
                                <div class="col-lg-12 col-sm-12 col-md col-xs-12">
                                  <div class="form-group">
                                <label> {{ __('message.cuestionario_label_10') }} </label>
                                <textarea class="form-control"  name="texto_agradecimiento" tabindex="6"></textarea>
                                </div>  
                                </div>
                          
                                <!--div  class= "col-lg-6 col-sm-6 col-md col-xs-12" >
                                <div class= "col-lg-6 col-sm-6 col-md col-xs-12" id="image-preview3" >
                                <label style='width: 0px;' for="imagenportada"><strong></strong></label>
                                <img   title="{{ __('message.cuestionario_label_9') }}" src ="" id="mostrarImagen3" class="img-responsive">
                                </div>
                                <label for="subir_imagen"  class="btn btn-primary pull-left">{{ __('message.cuestionario_label_6') }} <br>{{ __('message.cuestionario_label_8') }}</label>
                                <input  type="file" style="visibility:hidden;"  name="imagenbienvenida" id="subir_imagen" tabindex="7" />
                                </div>
                                
                                <div  class= "col-lg-6 col-sm-6 col-md col-xs-12" >
                                <div class= "col-lg-6 col-sm-6 col-md col-xs-12" id="image-preview3" >
                                <label style='width: 0px;' for="imagenportada"><strong></strong></label>
                                <img title="{{ __('message.cuestionario_label_9') }}" src="" id= "mostrarImagen_bg" class=img-responsive >

                                </div>
                                <label for="subir_imagen_bg"  class="btn btn-primary pull-left">{{ __('message.cuestionario_label_7') }} <br>{{ __('message.cuestionario_label_8') }}</label>
                                <input  type="file" style="visibility:hidden;"  name="imagencuestionario" id="subir_imagen_bg" tabindex="8" />
                                </div-->
                                
                                

                                <div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
                                  <div class="form-group">
                                <label><strong> {{ __('message.cuestionario_label_11')}} </strong></label>
                                <input type="email"  name="enviar_correo" id='enviar_correo'  class="form-control"   tabindex="9">
                                </div>  
                                </div>
                                
                                <div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
                                  <div class="form-group">
                                <label><strong> {{ __('message.cuestionario_label_12')}} </strong></label>
                                <select name="peguntas" id="reactivos" class="form-control">
                                    <option value="">{{ __('message.cuestionario_label_12')}}</option>
                                    @foreach($preguntas as $preguntas)
                                    <option value="{{$preguntas->id}}">{{$preguntas->pregunta}}</option>
                                    @endforeach()
                                </select>
                                </div>  
                                </div>
                                
                               <div class='col-lg-12 col-sm-12 col-md-12 col-xs-12'>
                                <table id='table_banco_reactivos' class="table table-hover table-bordered table-striped">

                                <tr>
                                <th width=80%>Reactivo</th>
                                <th width=20%>Opciones</th>
                                </tr>
                                <tr id='tr_banco_reactivos'><td class="text-center" colspan="3"> Aún no ha seleccionado ninguna pregunta </td> </tr>
                                </table>
                                </div>
                                
                                        
           
                                </div> 
                                </div>
                                

                            </div>
                        </div>

                        <!--end::Body-->
                    </div>
                    <!--end::Tiles Widget 1-->
                </div>

            </div>

            <!--end::Dashboard-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
    </form>    
</div>
<!--end::Content-->



@include('plantillas.footer')

<script>
    $("#tipo_pegunta").change(function() {
    var tipo_pegunta= $("#tipo_pegunta").val();  
    if(tipo_pegunta=='3'){
        $('#opciones').hide();
        }
    if(tipo_pegunta==''){
        $('#opciones').hide();
        }
    if(tipo_pegunta=='1' || tipo_pegunta=='2' ){
        $('#opciones').show();
        }    
});
    
</script>

<script>
 $(document).ready(function() {
     $('#opciones').hide();
 $( '#btnAdd' ).click( function() {
     
		var num = $( '.clonedInput' ).length;		// how many "duplicatable" input fields we currently have
		var newNum	= new Number( num + 1 );		// the numeric ID of the new input field being added
		var newElem = $( '#input' + num ).clone().attr( 'id', 'input' + newNum );
		console.log(num);
		newElem.children( ':first' ).attr( 'id', 'name' + newNum ).attr( 'name', 'name' + newNum );
		$( '#input' + num ).after( newElem );
		$( '#btnDel' ).attr( 'disabled', false );
		if ( newNum == 10 )
			$( '#btnAdd' ).attr( 'disabled', 'disabled' ); 
	});
	
	$( '#btnDel' ).click( function() {
		var num = $( '.clonedInput' ).length;		// how many "duplicatable" input fields we currently have
		$( '#input' + num ).remove();				// remove the last element
		$( '#btnAdd' ).attr( 'disabled', false );	// enable the "add" button
		
		// if only one element remains, disable the "remove" button
		if ( num-1 == 1 )
			$( '#btnDel' ).attr( 'disabled', 'disabled' );
	});
			
	$( '#btnDel' ).attr( 'disabled', 'disabled' );

});
</script>
 <script>
            
            CKEDITOR.replace( document.querySelector( '#body2' ), {
    toolbar: [
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
    '/',
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
    //{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
    { name: 'about', items: [ 'About' ] }
]
});
</script>