<!-- 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>
<!-- 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="frmSubkategori" id="frmSubkategori" method="post" class="form-horizontal">
				<input type="hidden" name="f_subkategori_id" id="f_subkategori_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
						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;">Nama <span class="text-red">*</span></label>
					<div class="col-md-6"><input type="text" name="f_subkategori_name" id="f_subkategori_name" class="form-control" placeholder="Nama ..." value="" required></div>
				</div>
				<div class="form-group">
					<label class="col-md-2" style="padding-top:7px;">Description <span class="text-red">*</span></label>
					<div class="col-md-6"><input type="text" name="f_subkategori_desc" id="f_subkategori_desc" class="form-control" placeholder="Description ..." value="" required></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_subkategori_active',$dataTes,1,'id="f_subkategori_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;
$(document).ready(function(){
	$('#frmSubkategori').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_active = $('#f_subkategori_active'); 
    $f_subkategori_active.select2(/*{
		placeholder: "-- Pilih ..",
		ajax: {
			url 		: "<?php echo site_url('subkategori/fnSubkategoriComboData');?>", // << 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('subkategori/fnSubkategoriDataId?id='.$fId);?>",function(data){
		if(data)
		{
			$('#f_subkategori_id').val(data.f_subkategori_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');
			$('#f_subkategori_name').val(data.f_subkategori_name);
			$('#f_subkategori_desc').val(data.f_subkategori_desc);
			$('#f_subkategori_active').val(data.f_subkategori_active).trigger('change');
			$('#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('subkategori/fnSubkategoriUpdate?id='.$fId);?>";
<?php } ?>

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

	// Menyimpan data
	$('#frmSubkategori').submit(function(e){
		var oForm = $('#frmSubkategori');
		var rec = $('#frmSubkategori').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('subkategori');?>";
				}
				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 fnBack()
{
	window.location.href = "<?php echo site_url('subkategori');?>";
}

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>



