<script>
	var inline_editors = [];
</script>
<br>
<div class="panel panel-default">
<div class="panel-heading">
	<?= (isset($form_title))? $form_title:'Create New Question'; ?>
</div>
<div class="panel-body">
<div class="row">
	<div class="col-md-12">
		<?php 	if(isset($form_title)) 
				echo form_open('questions_answers/update'); 
				else
				echo form_open('questions_answers/create'); 
		?>
		<?= (($this->input->post('edit_id')!==null))? hidden_input(array('name'=>'question_id','value'=>$this->input->post('edit_id'))):''; ?>
		<div class="form-group col-sm-2">
		  <label for="exam_standard">Question Standard :</label>
		  <select class="form-control input-sm" id="exam_standard" name="exam_standard">
		  <option value="">Select a Question Standard</option>
		  <?php foreach ($exam_standards as $standard) : ?>
		  <option value="<?= $standard->exam_standard_ID ?>" <?= set_select('exam_standard',$standard->exam_standard_ID,($standard->exam_standard_ID==$this->session->userdata('save_and_new_options')['exam_standard'])?TRUE:FALSE) ?> >
		  		<?= $standard->standard_name ?>
		  </option>
		  <?php endforeach; ?>
		  </select>
		  <span class="error"><?= form_error('exam_standard')?></span>
		</div>

		<div class="form-group col-sm-2">
		  <label for="exam_org">Exam Organisation :</label>
		  <select class="form-control input-sm" id="exam_org" name="exam_org" <?= (!isset($exam_orgs))? 'disabled="disabled"':''?>>
		  <option value="">Select an Exam Organisation</option>
		  <?php
		  	if(isset($exam_orgs)):
		  		foreach ($exam_orgs as $org) : ?>
		  <option value="<?= $org->exam_org_ID ?>" 
		  		<?= set_select('exam_org',$org->exam_org_ID,($org->exam_org_ID==$this->session->userdata('save_and_new_options')['exam_org'])?TRUE:FALSE) ?> >
		  		<?= $org->exam_org_name ?>
		  </option>
		  <?php endforeach;
		  	endif;
		   ?>
		  </select>
		  <span class="error"><?= form_error('exam_org')?></span>
		</div>

		<div class="form-group col-sm-2">
		  <label for="post_level">Post Level :</label>
		  <select class="form-control input-sm" id="post_level" name="post_level" <?= (!isset($post_levels))? 'disabled="disabled"':''?>>
		  <option value="">Select a Post Level</option>
		  <?php
		  	if(isset($post_levels)):
		  		foreach ($post_levels as $post) : ?>
		  <option value="<?= $post->post_level_ID ?>" <?= set_select('post_level',$post->post_level_ID,($post->post_level_ID==$this->session->userdata('save_and_new_options')['post_level'])?TRUE:FALSE) ?> >
		  		<?= $post->post_level_name ?>
		  </option>
		  <?php endforeach;
		  	endif;
		   ?>
		  </select>
		  <span class="error"><?= form_error('post_level')?></span>
		</div>

		<div class="form-group col-sm-2">
		  <label for="ques_level">Question Level :</label>
		  <select class="form-control input-sm" id="ques_level" name="ques_level">
		  <option value="">Select a Question Level</option>
		  <?php foreach ($ques_levels as $id=>$level) : ?>
		  <option value="<?= $id ?>" <?= set_select('ques_level',$id,($id==$this->session->userdata('save_and_new_options')['ques_level'])?TRUE:FALSE) ?> >
		  		<?= $level ?>
		  </option>
		  <?php endforeach; ?>
		  </select>
		  <span class="error"><?= form_error('ques_level')?></span>
		</div>


		<div class="form-group col-sm-2">
		  <label for="subject">Subject :</label>
		  <select class="form-control input-sm" id="subject" name="subject">
		  <option value="">Select a Subject</option>
		  <?php foreach ($subjects as $subject) : ?>
		  <option value="<?= $subject->subject_ID ?>" <?= set_select('subject',$subject->subject_ID,($subject->subject_ID==$this->session->userdata('save_and_new_options')['subject'])?TRUE:FALSE) ?>>
		  		<?= $subject->subject_name ?>
		  </option>
		  <?php endforeach; ?>
		  </select>
		  <span class="error"><?= form_error('subject')?></span>
		</div>

		<?php echo 
			form_input(array(
				'name'	=> 'marks',
				'label'	=> 'Marks :',
				'class'	=> array('form-group'=>'col-sm-2'),
				'value'	=> isset($question)? $question->marks:''
			)); 
		?>

		<fieldset class="col-sm-12">
			<legend>Paragraph Option : </legend>
			<div class="form-group col-sm-12">
			  	<div class="col-sm-2">
			  		<label class="radio-inline"><input type="radio" value="0" name="with_paragraph" 
			  		<?= (isset($with_paragraph) && $with_paragraph==0)? 'checked="checked"':''; ?> >
			  		No Paragraph
			  		</label>
			  	</div>
			  	<div class="col-sm-3">
					<label class="radio-inline"><input type="radio" value="1" name="with_paragraph"
					<?= (isset($with_paragraph) && $with_paragraph==1)? 'checked="checked"':''; ?> >
					With Paragraph <span class="text-success">(New)</span>
					</label>
				</div>
				<div class="col-sm-3">
					<label class="radio-inline"><input type="radio" value="2" name="with_paragraph"
					<?= (isset($with_paragraph) && $with_paragraph==2)? 'checked="checked"':''; ?> >
					With Paragraph <span class="text-success">(Existing)</span>
					</label>
				</div>
			</div>

			<div id="paragraph_options" style="display:<?= ($with_paragraph==2)? 'block':'none'; ?>;">
				<h4>Existing Paragraphs : </h4>
				<div style="padding: 10px; max-height: 300px; overflow-y: scroll; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 30px; ">
					<div class="panel-group" id="accordion">
						<?php foreach($paragraphs as $paragraph): ?>
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<input type="radio" name="paragraph" 
												value="<?= $paragraph->question_resource_ID ?>"
												<?= (isset($question) && $paragraph->question_resource_ID == $question->paragraph_ID)? 'checked="checked"':''; ?> 
										>										
										&nbsp;&nbsp;&nbsp;
							        	<a data-toggle="collapse" data-parent="#accordion" href="#collapse_<?= $paragraph->question_resource_ID; ?>" >
							        		View Paragraph
							        	</a>
							        	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							        	<?php 
							        	$paragraph_edit_url = base_url('').'questions_answers/edit_paragraph/'.$paragraph->question_resource_ID;
							        	if(isset($question)){
							        		$paragraph_edit_url .= '/'.$question->question_ID;
							        	}
							        	 ?>
							        	<a href="<?= $paragraph_edit_url; ?>" >
							        		Edit Paragraph
							        	</a>
							      	</h4>
							    </div>
							    <div id="collapse_<?= $paragraph->question_resource_ID ?>" class="panel-collapse collapse 
							    <?= (isset($question) && $paragraph->question_resource_ID == $question->paragraph_ID)? 'in active':''; ?>" >
							      <div class="panel-body">
							      	<ul class="nav nav-tabs">
									  	<li class="active"><a data-toggle="tab" href="#tab_para_content_en_<?= $paragraph->question_resource_ID ?>">English</a></li>
									  	<li><a data-toggle="tab" href="#tab_para_content_hin_<?= $paragraph->question_resource_ID ?>">Hindi</a></li>
									</ul>
									<div class="tab-content"><br>
									  	<div id="tab_para_content_en_<?= $paragraph->question_resource_ID ?>" class="tab-pane fade in active">
									  		<div id="para_en_<?= $paragraph->question_resource_ID ?>"> 
									  		<?= $paragraph->resource_content_en ?>
									  		</div>
									  	</div>
									  	<div id="tab_para_content_hin_<?= $paragraph->question_resource_ID ?>" class="tab-pane fade">
									  		<div id="para_hin_<?= $paragraph->question_resource_ID ?>">
									  		<?= $paragraph->resource_content_hin ?>
									  		</div>
									  	</div>
									  	<script>
									  		inline_editors.push('para_en_<?= $paragraph->question_resource_ID ?>');
									  		inline_editors.push('para_hin_<?= $paragraph->question_resource_ID ?>');
									  	</script>
									 </div>
									</div>
							    </div>
							   </div>
						<?php endforeach; ?>
					</div>
				</div>
			</div>
				
		</fieldset>

		<ul class="nav nav-tabs">
		  	<li class="active"><a data-toggle="tab" href="#tab_ques_content_en">English</a></li>
		  	<li><a data-toggle="tab" href="#tab_ques_content_hin">Hindi</a></li>
		</ul>
		<div class="tab-content">
		  	<div id="tab_ques_content_en" class="tab-pane fade in active">
		  		<br>

		  		<div class="form-group col-sm-12" id="paragraph_en_content" 
		  		<?= (isset($with_paragraph) && $with_paragraph=='1')? '':'style="display: none;"'; ?> >
		  			<label for="ques_content">Paragraph Content :</label>
				  	<textarea class="form-control" id="paragraph_en" rows="10" name="paragraph_en" 
				  	<?= (isset($with_paragraph) && $with_paragraph=='1')? '':'style="display:none;" disabled="disabled"'; ?> >
				  		<?= set_value('paragraph_en'); ?>
				  	</textarea>
				</div>


		  		<div class="form-group col-sm-12">
		  			<label for="ques_content">Question Content :</label>
		  			<textarea class="form-control" id="ques_content_en" rows="10" name="ques_content_en">
		  				<?= set_value('ques_content_en',isset($question)? $question->question_content_en:''); ?>
		  			</textarea>
		  			<span class="error"><?= form_error('ques_content_en')?></span>
		  		</div>

		  		<fieldset class="col-sm-12">
					<legend>Answers : </legend>
					<?php for($i=0; $i<5; $i++): ?>
					<div class="form-group col-sm-12">
						<label class="control-label col-sm-1" for="option">Option <?= $i+1 ?>:</label>
					  	<div class="col-sm-5">
						  <input type="text" class="form-control input-sm" id="option" name="answers_en[]" 
						  value="<?= (isset($answers) && isset($answers[$i]))? $answers[$i]->answer_content_en:''; ?>" >
					  	</div>
					</div>
					<?php endfor; ?>
				</fieldset>
		  	</div>
		  	<div id="tab_ques_content_hin" class="tab-pane fade">
		  		<br>

		  		<div class="form-group col-sm-12" id="paragraph_hin_content" 
		  		<?= (isset($with_paragraph) && $with_paragraph=='1')? '':'style="display: none;"'; ?> >
		  			<label for="ques_content">Paragraph Content :</label>
				  	<textarea class="form-control" id="paragraph_hin" rows="10" name="paragraph_hin" 
				  	<?= (isset($with_paragraph) && $with_paragraph=='1')? '':'style="display:none;" disabled="disabled"'; ?> >
				  		<?= set_value('paragraph_hin'); ?>
				  	</textarea>
				</div>


		  		<div class="form-group col-sm-12">
		  			<label for="ques_content">Question Content :</label>
		  			<textarea class="form-control" id="ques_content_hin" rows="10" name="ques_content_hin">
				  		<?= set_value('paragraph_hin',isset($question)? $question->question_content_hin:''); ?>
		  			</textarea>
		  		</div>
		  		<fieldset class="col-sm-12">
					<legend>Answers : </legend>
					<?php for($i=0; $i<5; $i++): ?>
					<div class="form-group col-sm-12">
						<label class="control-label col-sm-1" for="option">Option <?= $i+1 ?>:</label>
					  	<div class="col-sm-5">
						  <input style="text-align: left;" type="text" class="form-control input-sm" id="option" name="answers_hin[]" 
						  value="<?= (isset($answers) && isset($answers[$i]))? $answers[$i]->answer_content_hin:''; ?>" >
					  	</div>
					</div>
					<?php endfor; ?>
				</fieldset>
		  	</div>
		 </div>

		<fieldset class="col-sm-12">
			<legend>Correct Answer : </legend>
			<div class="form-group col-sm-12">
			<?php for($i=0; $i<5; $i++): ?>
			  <div class="col-sm-2">
			  	<label class="radio-inline"><input type="radio" value="<?= $i+1 ?>" name="correct_answer"
			  	<?= (isset($answers) && isset($answers[$i]) && $answers[$i]->correct_answer=='1')? 'checked="checked"':'' ?>
			  	>
			  	Option <?= $i+1 ?>
			  	</label>
			  </div>
			<?php endfor; ?>
			</div>
			<span class="error"><?= form_error('correct_answer')?></span>
		</fieldset>

		<fieldset class="col-sm-12">
			<legend>Explanation : </legend>
			<div class="form-group col-sm-12">
			<ul class="nav nav-tabs">
		  		<li class="active"><a data-toggle="tab" href="#tab_explanation_en">English</a></li>
		  		<li><a data-toggle="tab" href="#tab_explanation_hin">Hindi</a></li>
		  	</ul>
		  	<div class="tab-content">
		  		<div id="tab_explanation_en" class="tab-pane fade in active">
		  			<br>
		  			<textarea class="form-control" id="explanation_en" rows="10" name="explanation_en">
		  				<?= set_value('explanation_en',isset($question)? $question->explanation_en:''); ?>
		  			</textarea>
		  		</div>
		  		<div id="tab_explanation_hin" class="tab-pane fade">
			  		<br>
			  		<textarea class="form-control" id="explanation_hin" rows="10" name="explanation_hin">
			  		<?= set_value('explanation_hin',isset($question)? $question->explanation_hin:''); ?>
			  		</textarea>
			  	</div>
			  </div>
			</div>
		</fieldset>
		<div class="col-xs-3 col-xs-offset-9"><br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input class="btn btn-primary btn-sm" type="submit" name="save" value="&nbsp;&nbsp;Save&nbsp;&nbsp;">&nbsp;&nbsp;&nbsp;
			<input class="btn btn-success btn-sm" type="submit" name="save_and_new" value="Save &amp; New">
		</div>
		<br>
		<br>
		<?= form_close(); ?>
	</div>
</div>
</div><!--  .panel-body-close  -->
</div><!-- .panel close-->

<script>
//<![CDATA[
    (function($){
    	$('document').ready(function(){
    		var ckeditor_toolbar_config = [
    			{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
				{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
				{ name: 'forms', groups: [ 'forms' ] },
				{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
				{ name: 'insert', groups: [ 'insert' ] },
				{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
				{ name: 'tools', groups: [ 'tools' ] },
				{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
				{ name: 'links', groups: [ 'links' ] },
				{ name: 'styles', groups: [ 'styles' ] },
				{ name: 'colors', groups: [ 'colors' ] },
				{ name: 'about', groups: [ 'about' ] },
				{ name: 'others', groups: [ 'others' ] }
    		];

    		var remove_buttons = 'Save,NewPage,Preview,Print,Templates,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Link,Unlink,Anchor,PageBreak,Iframe,ShowBlocks,About,Image';

    		var editors = ['ques_content_en','ques_content_hin','explanation_en','explanation_hin'];
    		<?php if((isset($with_paragraph) && $with_paragraph==1)){ ?>
    			editors.push('paragraph_en');
				editors.push('paragraph_hin')
    		<?php }?>
    		$.each(editors, function(id, editor){
    			CKEDITOR.replace( editor, { toolbarGroups: ckeditor_toolbar_config, removeButtons: remove_buttons });
    		});

    		CKEDITOR.disableAutoInline = true;
			$.each(inline_editors,function(index,editor){
				CKEDITOR.inline(editor,{});
			});

			$.each(CKEDITOR.instances, function(index, instance){
				if($.inArray(instance.name,inline_editors) != -1){
					var editor = instance;
					if (editor) {
						 editor.on('focus', function (event) {
			                return false;
			            });
					}
				}
			});


    		$('input[type=radio][name=with_paragraph]').on('change', function(){
    			if($(this).val()=='1'){
    				$('#paragraph_en_content').attr('style','display:block');
    				$('#paragraph_hin_content').attr('style','display:block');
    				$('#paragraph_en').attr('style','display:block').removeProp('disabled');
    				$('#paragraph_hin').attr('style','display:block').removeProp('disabled');
    				CKEDITOR.replace( 'paragraph_en', { toolbarGroups: ckeditor_toolbar_config, removeButtons: remove_buttons });
    				CKEDITOR.replace( 'paragraph_hin', { toolbarGroups: ckeditor_toolbar_config, removeButtons: remove_buttons });
    				if($('#paragraph_options').length == '1'){
    					$('#paragraph_options').css('display','none');
    				}

    			} else if( $(this).val()=='2' ) {
    				$('#paragraph_en_content').attr('style','display:none');
    				$('#paragraph_hin_content').attr('style','display:none');
    				if(CKEDITOR.instances['paragraph_en'])
					{
    					CKEDITOR.instances['paragraph_en'].destroy(true);
					}
					if(CKEDITOR.instances['paragraph_hin'])
					{
    					CKEDITOR.instances['paragraph_hin'].destroy(true);
					}
					$('#paragraph_en').attr('style','display:none').attr('disabled','disabled');
    				$('#paragraph_hin').attr('style','display:none').attr('disabled','disabled');
    				if($('#paragraph_options').length == '1'){
    					$('#paragraph_options').css('display','block');
    				}    				
    			} else {
    				$('#paragraph_en_content').attr('style','display:none');
    				$('#paragraph_hin_content').attr('style','display:none');
					if(CKEDITOR.instances['paragraph_en'])
					{
    					CKEDITOR.instances['paragraph_en'].destroy(true);
					}
					if(CKEDITOR.instances['paragraph_hin'])
					{
    					CKEDITOR.instances['paragraph_hin'].destroy(true);
					}
					$('#paragraph_en').attr('style','display:none').attr('disabled','disabled');
    				$('#paragraph_hin').attr('style','display:none').attr('disabled','disabled');
    				if($('#paragraph_options').length == '1'){
    					$('#paragraph_options').css('display','none');
    				}
    			}
    		});

    		// Selected exam organization list    
    $('#exam_standard').on('change',function(){
      var examStandardID = $(this).find('option:selected').val();  
      var url = '<?php echo base_url('exam_configuration/selectExamOrg/'); ?>'+ examStandardID;
        $.getJSON(url,function(data){
           if(data){
              var options ="<option value=''>Select an Exam Organisation</option>\n";
              $.each(data,function(i,val){
                   
                   options += "<option value='"+val.exam_org_ID +"'>"+val.exam_org_name+"</option>\n";
                   
               });
               
              $('#exam_org').removeProp( "disabled" ).html(options);
           }
        });
    });    
    
     // Selected post level list    
    $('#exam_org').on('change',function(){
      var examOrgID = $(this).find('option:selected').val();  
      var url = '<?php echo base_url('exam_configuration/selectPostLevel/'); ?>'+ examOrgID;
        $.getJSON(url,function(data){
           if(data){
              var options ="<option value=''>Select a Post Level</option>\n";
              $.each(data,function(i,val){
                   
                   options += "<option value='"+val.post_level_ID +"'>"+val.post_level_name+"</option>\n";
                   
               });
               
              $('#post_level').removeProp( "disabled" ).html(options);
           }
        });
    });		
    		
    	});
    })(jQuery);
//]]>
</script>

<style>
	#paragraph_options .cke_editable, 
	#paragraph_options .cke_widget_inline, 
	#paragraph_options .cke_widget_inline:hover .cke_widget_element, 
	#paragraph_options .cke_widget_inline.cke_widget_focused .cke_widget_element{
		outline:none;
	}
	#paragraph_options .cke_widget_drag_handler_container {
		display:none !important;
	}	
	
</style>
