@extends('layout')


@section('content')

<div class="page-header page-header-default">
	<div class="breadcrumb-line">
		<ul class="breadcrumb">
			<li><a href="index.html"><i class="icon-home2 position-left"></i> Master</a></li>
			<li class="active">Sub Kategori</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Sub Kategori @php echo $data['d_data']->nama; @endphp</h5>
			<div class="heading-elements">
				<ul class="icons-list">
		      		<li><a data-action="collapse"></a></li>
		      	</ul>
	       	</div>
	    </div>
	    <div class="panel-body">
	    	<button class="btn btn-primary" id="btn_tambah_sub"><i class=""></i>Tambah</button>
	    </div>

	    <table class="table table-stripped table_barang" id="">
	    	<thead>
				<tr>
					<th class="text-center">No</th>
					<th class="text-center">Kategori Barang</th>
					<th class="text-center">Sub Kategori Barang</th>
					<th class="text-center">Inisial</th>
					<th class="text-center">Aksi</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
	    </table>
	</div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
	    <div class="modal-content">
	    	<div class="modal-header">
	    		<h5 class="modal-title" id="exampleModalLabel">Data</h5>
	    		<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
	      	</div>
	      	<div class="modal-body">
	      		<form class="form-horizontal" autocomplete="off" id="form_kb">
	      			<input type="hidden" name="popup_kb">
	      			<input type="hidden" name="popup_idkel" value="{{ $data['d_data']->id_kelompok }}">
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Nama Sub Kategori</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_nama" class="form-control">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Inisial</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_inisial" class="form-control text-uppercase">
	      				</div>
	      			</div>
	      			
	      		</form>
	      	</div>
	      	<div class="modal-footer">
	      		<button type="button" class="btn btn-primary" id="btn_popup_simpan">Simpan</button>
	      	</div>
	    </div>
	</div>
</div>

<script type="text/javascript">
	var tb;
	var kp;
	var id = '@php echo $data['id'] @endphp';

	$(document).ready(function(){
		tb = $(".table_barang").DataTable({
			processing: true,
	        serverSide: true,
	        ajax: {
	        	url: '{{ url('kategori/get_sub') }}',
	        	type: 'post',
	        	data: {id : id},
	        	headers : {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
	        },
	        columns: [
	            {data: 'rownum', name: 'rownum', orderable: false, searchable: false, render : function(data, type, full, meta){
			  		return meta.row+1;
			  	}},
	            {data: 'nama', name: 'nama'},
	            {data: 'nama_sub', name: 'nama_sub'},
	            {data: 'inisial_sub', name: 'inisial_sub'},
	            {data: 'aksi', name: 'aksi', orderable: false, searchable: false}
	        ],
	        drawCallback: function(setting){
	        	
	        	
	        }
		});

		// tb.on( 'order.dt search.dt', function () {
  //           tb.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
  //               cell.innerHTML = i+1;
  //           } );
  //       } ).draw();
  //       tb.clear().draw();

		// get_kb();

		
	})

	$("#btn_tambah_sub").click(function(){
		$("[name=popup_kb]").val('');
		$("[name=popup_nama]").val('');
		$("[name=popup_inisial]").val('');

		$("#exampleModal").modal("show");
	})


	function edit_satuan(){
		$("#exampleModal").modal("show");
	}

	function get_text(){
		var val = tb.cell(0,1).nodes().to$().find('td').text();
		console.log(val);
	}

	function get_kb(){
		$.ajax({
			url: "{{ url('kategori/get_sub')}}  ",
			type: 'post',
			dataType: 'json',
			data: {id : id},
			headers : {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
			success: function(respon){
				tb.clear().draw();
				if(respon.status.status != 0){
					for(i in respon.data){
						var id = tb.row.add(['<div><center></center></div>',
							'<div>'+respon.status.nama+'</a></div>',
							'<div>'+respon.data[i].nama+'</a></div>',
							'<div>'+respon.data[i].inisial+'</div>',
							'<div>'+respon.data[i].aksi+'</div>'+
							'<input type="hidden" id="table_idkb'+respon.data[i].id_kb+'" value="'+respon.data[i].id_kb+'">'+
							'<input type="hidden" id="table_nama'+respon.data[i].id_kb+'" value="'+respon.data[i].nama+'">'+
							'<input type="hidden" id="table_inisial'+respon.data[i].id_kb+'" value="'+respon.data[i].inisial+'">'
							]).draw().node();

					}

				//	$(".panel-title").text('Sub Kategori '+respon.status.nama);
				}
			}
		})
	}


	function edit_kb(id){
		var id_kb = $("#table_idkb"+id).val();
		var nama = $("#table_nama"+id).val();
		var inisial = $("#table_inisial"+id).val();
		var idkel = $("#table_idkel"+id).val();

		$("[name=popup_kb]").val(id_kb);
		$("[name=popup_nama]").val(nama);
		$("[name=popup_inisial]").val(inisial);
		$("[name=popup_idkel]").val(idkel);

		$("#exampleModal").modal('show');

	}

	function hapus_kb(id){
		swal({
			title: 'Anda yakin akan menghapus item ini?',
			type: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Ya',
			cancelButtonText: 'Tidak',
		}).then((result) => {
		 	if(result.value){
		 		$.ajax({
					url: "{{ url('kategori/hapus_kb')}} ",
					type: 'post',
					data: {id : id},
					headers : {
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					},
					success: function(respon){
						tb.ajax.reload();
					}
				})
		 	}
		})
	}

	$("#btn_popup_simpan").click(function(){
		var id_kb = $("[name=popup_kb]").val();
		var nama = $("[name=popup_nama]").val();
		var inisial = $("[name=popup_inisial]").val();
		var id_kel = $("[name=popup_idkel]").val();
		if(nama != ''){
			$.ajax({
				url: "{{ url('kategori/simpan_kb')}} ",
				type: 'post',
				data: {id : id_kb, nama : nama, inisial : inisial, id_kel : id_kel, induk : id},
				headers : {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				success: function(respon){
					tb.ajax.reload();
					$("#exampleModal").modal('hide');
				}
			})
		}
	})
	
</script>

@endsection