@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('preguntasstore')}}" method="POST">
                                @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.pregunta_page_title_create') }}</div>

                                </div>
                            </div>
                          
                            <div class="card-toolbar">
                                <!--begin::Button-->
                                <a href="/preguntas" 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">
          <span>
          Text de prueba para explicar el shortcode
          <br>
          <br>
          Text de prueba para explicar el shortcode
          <br>
          <br>
          Text de prueba para explicar el shortcode
        
          </span> 
          </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-6 col-sm-6 col-md-6 col-xs-12">
                                  <div class="form-group">
                                <label> {{ __('message.pregunta_label_2') }} </label>
                                <select name="tipo_pegunta" id="tipo_pegunta" required class="form-control">
                                    <option value="">Selecciona el tipo de pregunta</option>
                                    @foreach($tipo_pregunta as $tipo_pregunta)
                                    <option value="{{$tipo_pregunta->id}}">{{$tipo_pregunta->nombre}}</option>
                                    @endforeach()
                                </select>
                                </div>  
                                </div>
                                
                                <div class="col-lg-12 col-sm-12 col-md col-xs-12">
                                  <div class="form-group">
                                <label> {{ __('message.pregunta_label_1') }} </label>
                                <textarea class="form-control"  placeholder="{{ __('message.pregunta_label_place') }}" name="pregunta"></textarea>
                                </div>  
                                </div>
                                
                                <div id="opciones" class="col-xs-12 col-lg-12 col-sm-12 col-md-12">
                	<div class="col-xs-12 col-lg-12 col-sm-12 col-md-12">
     	    <h6>{{ __('message.pregunta_label_3') }}</h6>
     	    </div>
     <div class="col-xs-12 col-lg-6 col-sm-6 col-md-6">
         
   <fieldset id="input1" class="clonedInput">
      
      <label>{{ __('message.pregunta_label_4') }}</label>
      <input type="text" name="name1[]" class="form-control" id="name1"  />
      <br>
    
   </fieldset>
    
      
   <fieldset>
      <label>{{ __('message.pregunta_label_5') }}</label>
      <input type="button" id="btnAdd" value="+" />
      <input type="button" id="btnDel" value="-" />
   </fieldset>
    </div> 
    </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>