<!-- load css dan js -->
<script src="<?php echo ASSETS_URL;?>plugins/form/jquery.validate.js"></script>
<link rel="stylesheet" href="<?php echo ASSETS_URL;?>plugins/select2/select2.min.css" rel="stylesheet" type="text/css"/>
<script src="<?php echo ASSETS_URL;?>plugins/select2/select2.min.js"></script>
<script src="<?php echo ASSETS_URL;?>plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="<?php echo ASSETS_URL;?>plugins/bootstrap-wysihtml5/parser_rules/advanced_and_extended.js"></script>
	
<!-- end load css dan js -->

<section class="content-header">
	<h1>
		<?php echo $app_title;?>
		<small><?php echo $app_desc;?></small>
	</h1>
</section>

<section class="content">
	<div class="box box-info"> <!-- start .box -->
		<div class="box-header"> <!-- start .box-header -->
			<?php echo $form_header;?>
		</div> <!-- end .box-header -->
		
		<div class="box-body"> <!-- start .box-body -->
			<form name="frmSoal" id="frmSoal" method="post" class="form-horizontal">
				<input type="hidden" name="f_soal_id" id="f_soal_id" value="" >
				<div class="form-group">
					<label class="col-md-2" style="padding-top:7px;">Kategori <span class="text-red">*</span></label>
					<div class="col-md-6">
					<?php
						//$dataTes = array(1=>'Satu',2=>'Dua',3=>'Tiga',4=>'Empat',);
						echo form_dropdown('f_kategori_id',false,false,'id="f_kategori_id" class="form-control select" style="width: 100%" required');
					?>
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-2" style="padding-top:7px;">Sub Kategori <span class="text-red">*</span></label>
					<div class="col-md-6">
					<?php
						//$dataTes = array(1=>'Satu',2=>'Dua',3=>'Tiga',4=>'Empat',);
						echo form_dropdown('f_subkategori_id',false,false,'id="f_subkategori_id" class="form-control select" style="width: 100%" required');
					?>
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-2" style="padding-top:7px;">Soal <span class="text-red">*</span></label>
					<div class="col-md-6">
<!--
						<input type="text" name="f_soal_name" id="f_soal_name" class="form-control" placeholder="Soal ..." value="" required>
-->
						<div id="toolbar" class="btn-group">
							<a data-wysihtml5-command="bold" class="btn btn-default btn-sm"><i class="fa fa-bold" aria-hidden="true"></i></a>
							<a data-wysihtml5-command="italic" class="btn btn-default btn-sm"><i class="fa fa-italic" aria-hidden="true"></i></a>
						</div>
						<textarea name="f_soal_name" id="f_soal_name" placeholder="Soal ..." rows="3" class="form-control textarea" required></textarea>
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-2" style="padding-top:7px;">Type <span class="text-red">*</span></label>
					<div class="col-md-6">
					<?php
						$pilihan = array('text'=>'Text','textarea'=>'Textarea','checkbox'=>'Checkbox','radio'=>'Radio',);
						echo form_dropdown('f_soal_type',$pilihan,'text','id="f_soal_type" class="form-control select" style="width: 100%" required');
					?>
					</div>
				</div>
				<div class="pilihan" class="table-responsive">
					<a class="btn btn-sm btn-primary" onClick="addRow()"><i class="fa fa-plus"></i> Add</a>
					<br/>
					<table id="tablePilihan" class="table datares table-bordered" style="max-width:100%;width:68%">
						<tr>
							<th>Value</th>
							<th>Keterangan</th>
							<th>#</th>
						</tr>
						<?php if($fAct =='Add') { ?>
						<tr>
							<td>
								<input type="text" name="value[]" id="value" class="form-control val1" placeholder="Value ..." required >
							</td>
							<td>
								<input type="text" name="keterangan[]" id="keterangan" class="form-control ket1" placeholder="Keterangan ..." required >
							</td>
							<td></td>
						</tr>
						<?php } ?>
					</table>						
<!--
					<div class="form-group">
						<label class="col-md-2" style="padding-top:7px;">Pilihan <span class="text-red">*</span></label>
						<div class="col-md-6"><input type="text" name="f_soal_array" id="f_soal_array" class="form-control" placeholder="Pilihan ..." value="" required></div>
					</div>
-->					
				</div>
				<div class="form-group">
					<label class="col-md-2" style="padding-top:7px;">Active <span class="text-red">*</span></label>
					<div class="col-md-6">
					<?php
						$dataTes = array(1=>'Aktif',0=>'Non Aktif',);
						echo form_dropdown('f_soal_active',$dataTes,1,'id="f_soal_active" class="form-control select" style="width: 100%" required');
					?>
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-2" style="padding-top:7px;">Created</label>
					<div class="col-md-3"><input type="text" name="f_created_on" id="f_created_on" class="form-control" placeholder="Created Date ..." value="" readonly></div>
					<div class="col-md-3"><input type="text" name="f_created_by" id="f_created_by" class="form-control" placeholder="Created By ..." value="" readonly></div>
				</div>
				<div class="form-group">
					<label class="col-md-2" style="padding-top:7px;">Updated</label>
					<div class="col-md-3"><input type="text" name="f_updated_on" id="f_updated_on" class="form-control" placeholder="Updated Date ..." value="" readonly></div>
					<div class="col-md-3"><input type="text" name="f_updated_by" id="f_updated_by" class="form-control" placeholder="Updated By ..." value="" readonly></div>
				</div>	
				<div class="col-md-8" align="center" id="fnButton">
		<?php 	
			if($fAct == 'Add')	echo '<input type="submit" name="submit" value="Save" id="btnSave" class="btn btn-success" />';

			if($fAct == 'Edit')	echo '<input type="submit" name="submit" value="Ubah" id="btnUpdate" class="btn btn-warning" />';
		?>
				&nbsp;&nbsp;&nbsp;
				<a onClick="fnBack()" class="btn btn-danger"> Cancel</a>
				</div>
			</form>

		</div> <!-- end .box-body -->
		<div class="box-footer" align="right"> <!-- start box-footer -->
		  <p>Page rendered in <strong>{elapsed_time}</strong> seconds</p>
		</div> <!-- end .box-footer-->
	</div> <!-- end .box -->
</section><!-- /.content -->

<script>
var oTable = $("#tablePilihan");
var $f_soal_name 		= new wysihtml5.Editor("f_soal_name", {
    toolbar: 'toolbar',
    parserRules:  wysihtml5ParserRules, 		
	});

$(document).ready(function(){
	$('.pilihan').hide();
	$('#frmSoal').validate({
		highlight: function(element, errorClass, validClass) {
			$(element).parents('.form-group').removeClass('has-success').addClass('has-error');
		},
		unhighlight: function(element, errorClass, validClass) {
			$(element).parents('.form-group').removeClass('has-error').addClass('has-success');
		}		
	});
	

	var $f_kategori_id = $('#f_kategori_id'); 
    $f_kategori_id.select2({
		placeholder: "-- Pilih ..",
		ajax: {
			url 		: "<?php echo site_url('subkategori/fnKategoriComboData');?>", // << Example
			dataType	: 'json',
			delay		: 250,
			processResults		: function(data,params) {
				return {
				        results: data.result,
					}
			},
			cache: true
		},
		minimumInputLength: 0,
		//escapeMarkup: function (markup) { return markup; },
		//templateResult: formatAccount,
	});


	var $f_subkategori_id = $('#f_subkategori_id'); 
    $f_subkategori_id.select2({
		placeholder: "-- Pilih ..",
		ajax: {
			url 		: "<?php echo site_url('subkategori/fnSubkategoriComboData');?>", // << Example
			dataType	: 'json',
			delay		: 250,
			data: function (params) {
			  return {
				term: params.term, // search term
				f_kategori_id : $f_kategori_id.val(),
			  };
			},
			processResults		: function(data,params) {
				return {
				        results: data.result,
					}
			},
			cache: true
		},
		minimumInputLength: 0,
		//escapeMarkup: function (markup) { return markup; },
		//templateResult: formatAccount,
	});


	var $f_soal_type = $('#f_soal_type'); 
    $f_soal_type.select2(/*{
		placeholder: "-- Pilih ..",
		ajax: {
			url 		: "<?php echo site_url('soal/fnSoalComboData');?>", // << Example
			dataType	: 'json',
			delay		: 250,
			processResults		: function(data,params) {
				return {
				        results: data.result,
					}
			},
			cache: true
		},
		minimumInputLength: 0,
		//escapeMarkup: function (markup) { return markup; },
		//templateResult: formatAccount,
	}*/).on("select2:select", function (e) {
		if(e.params.data.id == 'checkbox' || e.params.data.id == 'radio')
		{
			$('.pilihan').show();
		}
		else
		{
			$('.pilihan').hide();
		}
	});

	var $f_soal_active = $('#f_soal_active'); 
    $f_soal_active.select2(/*{
		placeholder: "-- Pilih ..",
		ajax: {
			url 		: "<?php echo site_url('soal/fnSoalComboData');?>", // << Example
			dataType	: 'json',
			delay		: 250,
			processResults		: function(data,params) {
				return {
				        results: data.result,
					}
			},
			cache: true
		},
		minimumInputLength: 0,
		//escapeMarkup: function (markup) { return markup; },
		//templateResult: formatAccount,
	}*/);

<?php if($fAct == 'Edit') { ;?>
	$.get("<?php echo site_url('soal/fnSoalDataId?id='.$fId);?>",function(data){
		if(data)
		{
			$('#f_soal_id').val(data.f_soal_id);

			var $opt_kategori_id = $('<option value="'+data.f_kategori_id+'" selected>'+data.f_kategori_name+'</option>');
			$('#f_kategori_id').append($opt_kategori_id).trigger('change');

			var $opt_subkategori_id = $('<option value="'+data.f_subkategori_id+'" selected>'+data.f_subkategori_name+'</option>');
			$('#f_subkategori_id').append($opt_subkategori_id).trigger('change');

			$f_soal_name.setValue(data.f_soal_name);

			$('#f_soal_type').val(data.f_soal_type).trigger('change');

			if(data.f_soal_type == 'checkbox' || data.f_soal_type == 'radio')
			{
				$('.pilihan').show();
			}
			
			var no = 1;
			$.each(data.f_soal_array,function(a,b){
				var valu = "<input type=\"text\" name=\"value[]\" id=\"value\" class=\"form-control value"+no+"\" placeholder=\"Value ...\" value=\""+b.value+"\"  required>";
				var kete = "<input type=\"text\" name=\"keterangan[]\" id=\"keterangan\" class=\"form-control ket"+no+"\" placeholder=\"Keterangan ...\" value=\""+b.keterangan+"\"  required>";
				var sampah = '<a class="tip" title="Hapus" onClick="hideRow('+no+')"><i class="text-red glyphicon glyphicon-trash"></i></a>';
				oTable.children().append("<tr id='row"+no+"'><td>"+valu+"</td><td>"+kete+"</td><td class=\"center\">"+sampah+"</td></tr>");
				no++;
			});
			
			$('#f_soal_array').val(data.f_soal_array);
			$('#f_soal_active').val(data.f_soal_active);
			$('#f_created_on').val(data.f_created_on);
			$('#f_created_by').val(data.f_created_by);
			$('#f_updated_on').val(data.f_updated_on);
			$('#f_updated_by').val(data.f_updated_by);
		}
	}, "json");

	var url = "<?php echo site_url('soal/fnSoalUpdate?id='.$fId);?>";
<?php } ?>

<?php if($fAct == 'Add') { ;?>
	var url = "<?php echo site_url('soal/fnSoalSave');?>";
<?php } ?>

	// Menyimpan data
	$('#frmSoal').submit(function(e){
		var oForm = $('#frmSoal');
		var rec = $('#frmSoal').serializeArray();
		rec.push({name: '<?php echo $this->security->get_csrf_token_name(); ?>',value:'<?php echo $this->security->get_csrf_hash();?>'});
		e.preventDefault();
		if(oForm[0].checkValidity()) {
			$.post(url, rec, function(msg){
				if(msg.msg)
				{
					window.location.href = "<?php echo site_url('soal');?>";
				}
				else
				{
					infoDialog.realize();
					infoDialog.setTitle('Info').setMessage('<center>Gagal !!</center>').setType(BootstrapDialog.TYPE_DANGER).open();
				}
			}, 'json').fail(function(e){
				infoDialog.realize();
				infoDialog.setTitle('Info').setMessage('<center>'+e.status+'</center>').setType(BootstrapDialog.TYPE_DANGER).open();
			});
		}
	});
});

function addRow()
{
	var lastRow = oTable.find("tr").length;
	var nextRow = lastRow;// - 1;
	var emptyrows = 0;
	for (i=1; i<lastRow; i++) {
		if ($(".val"+i).val() == '' || $(".ket"+i).val() == '') {
			emptyrows += 1;
		}
	}
	
	if (emptyrows == 0 )
	{
		var valu = "<input type=\"text\" name=\"value[]\" id=\"value\" class=\"form-control value"+lastRow+"\" placeholder=\"Value ...\" value=\"\"  required>";
		var kete = "<input type=\"text\" name=\"keterangan[]\" id=\"keterangan\" class=\"form-control ket"+lastRow+"\" placeholder=\"Keterangan ...\" value=\"\"  required>";
		var sampah = '<a class="tip" title="Hapus" onClick="hideRow('+lastRow+')"><i class="text-red glyphicon glyphicon-trash"></i></a>';
		oTable.children().append("<tr id='row"+lastRow+"'><td>"+valu+"</td><td>"+kete+"</td><td class=\"center\">"+sampah+"</td></tr>");
	}
	else
	{
		BootstrapDialog.alert("Silahkan mengisi data pada baris yang tersedia terlebih dahulu, sebelum menambah baris.");
	}
}

function hideRow(x)
{
	$("#tablePilihan tr#row"+x).html('');
}

function fnBack()
{
	window.location.href = "<?php echo site_url('soal');?>";
}

function formatAccount(result)
{
	if (result.loading) return result.text;
	
	var markup = "<span>"+result.text+"<br/>"+result.contact+" ("+result.phone+" - "+result.email+")</span>";
	return markup;
}
</script>



