@extends('layout')


@section('content')

<div class="page-header page-header-default">
	<div class="breadcrumb-line">
		<ul class="breadcrumb">
			<li><a href="#"><i class="icon-home2 position-left"></i> Master</a></li>
			<li class="active"> Motif</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Form Input Motif</h5>
			<div class="heading-elements">
				<ul class="icons-list">
		      		<li><a data-action="collapse"></a></li>
		      	</ul>
	       	</div>
	    </div>
	    <div class="panel-body">
	    	<form class="form-horizontal" method="post" action="{{ url('motif/simpan') }}" autocomplete="off" >
	    	<input type="hidden" name="_token" value="{{ csrf_token() }}">
	    	<input type="hidden" name="id_motif" value="{{ $data['data']['id_motif'] }}">
        	
        	<div class="col-sm-6">
        		<div class="form-group">
        			<label class="control-label col-sm-4">Nama Motif</label>
        			<div class="col-sm-8">
        				<input type="text" name="nama_motif" class="form-control" value="{{ $data['data']['nama_motif'] }}" required>
        			</div>
        		</div>
        		<div class="form-group">
        			<label class="control-label col-sm-4">Inisial motif</label>
        			<div class="col-sm-8">
        				<input type="text" name="inisial_motif" class="form-control text-uppercase" value="{{ $data['data']['kode_motif'] }}" required>
        			</div>
        		</div>
        		
        		
        	</div>

        	<div class="col-sm-12 form-group">
        	<h5 class="panel-title">Detail</h5>
        	<br><a href="#" class="btn btn-success" style="margin-bottom: 1%;" id="btn_tambah_item">Tambah</a></div>
        	<div class="col-sm-12">
        		
        	<table class="table table-stripped" id="table_barang">
	    	<thead>
				<tr>
					<th>No</th>
					<th>Keterangan</th>
					<th class="text-center">Aksi</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
	    	</table>
	    	<div class="form-group pull-right">
             	<button class="btn btn-primary" type="submit">Simpan</button>
             </div>
	    </form>
	</div>
</div>

<!---Modal--->
<div class="modal fade" id="exampleModal"  role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" 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">
	      			<input type="hidden" name="popup_id_table">
	      			<input type="hidden" name="popup_list">
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Nama</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_nama" 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>


<!----Modal---->
<script type="text/javascript">
	$("#btn_tambah_item").click(function(){
		$("[name=popup_id_table]").val('');
		$("[name=popup_list]").val('');
		$("[name=popup_nama]").val('');

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

	
	var id_motif;
	var table_barang;
	var tb_no = parseInt(10000);
	$(document).ready(function(){
		table_barang = $("#table_barang").DataTable({
			"paging": false
		});

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

		id_motif = '{{ $data['data']['id_motif'] }}';
		if(id_motif != ''){
			get_edit(id_motif);
		}
		// get_barang();
		// get_satuan();
	})

	$("#btn_popup_simpan").click(function(){
		var id = $("[name=popup_id_table]").val();
		var id_list = $("[name=popup_list]").val();
		var nama = $("[name=popup_nama]").val();

		// console.log(id+id_list+nama);

		if(nama != ''){
			if(id_list == ''){
				table_barang.row.add(['<div></div>',
					'<div id="list_ket'+tb_no+'">'+nama.toUpperCase()+'</div>',
					'<div><button type="button" class="btn bg-warning-400" onclick="edit_table('+tb_no+')"><i class="icon-pencil"></i> </button><button class="btn bg-danger-800" type="button" onclick="hapus($(this))"><i class="icon-eraser"></i></button></div>'+
					'<input type="hidden" name="tabel_id[]" id="tabel_id'+tb_no+'" value="">'+
					'<input type="hidden" name="tabel_nama[]" id="tabel_nama'+tb_no+'" value="'+nama.toUpperCase()+'">'
					]).draw(false);
			}else{
				$("#tabel_id"+id_list+"").val(id);
				$("#tabel_nama"+id_list+"").val(nama.toUpperCase());
				$("#list_ket"+id_list+"").text(nama.toUpperCase());
			}

			tb_no++;
		}

		$("#exampleModal").modal('hide');
	})

	function edit_table(id){
		var tabel_id = $("#tabel_id"+id+"").val();
		var tabel_list = id;
		var nama = $("#tabel_nama"+id+"").val();

		// console.log(tabel_id+tabel_list+nama);

		$("[name=popup_id_table]").val(tabel_id);
		$("[name=popup_list]").val(tabel_list);
		$("[name=popup_nama]").val(nama);

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

	function hapus(d){
		table_barang.row(d.parents('tr')).remove().draw();
	
	}

	function get_edit(id){
		$.ajax({
			url: '{{ url('motif/get_edit') }}',
			type: 'post',
			dataType: 'json',
			data: {id : id},
			headers : {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			success: function(respon){
				if(respon.length > 0){
					for(i in respon){
						table_barang.row.add(['<div></div>',
							'<div id="list_ket'+respon[i].id_motif_barang+'">'+respon[i].motif_keterangan.toUpperCase()+'</div>',
							'<div><button type="button" class="btn bg-warning-400" onclick="edit_table('+respon[i].id_motif_barang+')"><i class="icon-pencil"></i> </button><button class="btn bg-danger-800" type="button" onclick="hapus($(this))"><i class="icon-eraser"></i></button></div>'+
							'<input type="hidden" name="tabel_id[]" id="tabel_id'+respon[i].id_motif_barang+'" value="'+respon[i].id_motif_barang+'">'+
							'<input type="hidden" name="tabel_nama[]" id="tabel_nama'+respon[i].id_motif_barang+'" value="'+respon[i].motif_keterangan.toUpperCase()+'">'
							]).draw(false);	
					}
				}
			}
		})
	}


</script>

@endsection