@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">Konversi Satuan</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Konversi Satuan</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_satuan"><i class=""></i>Tambah</button>
	    </div>
	    <div class="table-responsive">
	    <table class="table datatable-basic table-stripped table_konversi">
	    	<thead>
				<tr>
					<th>No</th>
					<th>Kode Barang</th>
					<th>Nama Barang</th>
					<th>Satuan Awal</th>
					<th>Satuan Akhir</th>{{-- 
                    <th>Nilai Awal</th>
                    <th>Nilai Aakhir</th> --}}
					<th class="text-center">Aksi</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
	    </table>
	    </div>
	</div>
</div>

<div class="modal fade" id="exampleModal" 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">
	      		<input type="hidden" name="popup_id">
                <div class="form-group">
	      				<label class="control-label col-sm-4">Kode Barang</label>
	      				<div class="col-sm-8">
	      					<select name="popup_kode" class="form-control select-search">
	      						
	      					</select>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Satuan Awal</label>
	      				<div class="col-sm-8">
	      					<select name="popup_satuan_awal" class="form-control select-search">
	      						
	      					</select>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Nilai Awal</label>
	      				<div class="col-sm-8">
	      					<input type="number" name="popup_nilai_awal" class="form-control">
	      				</div>
	      			</div>
                    <div class="form-group">
	      				<label class="control-label col-sm-4">Satuan Akhir</label>
	      				<div class="col-sm-8">
	      					<select name="popup_satuan_akhir" class="form-control select-search">
	      						
	      					</select>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Nilai Akhir</label>
	      				<div class="col-sm-8">
	      					<input type="number" name="popup_nilai_akhir" class="form-control">
	      				</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;

	$(document).ready(function(){
		tb = $(".table_konversi").DataTable({
			processing: true,
	        serverSide: true,
	        ajax: '{{ url('konversi/tampil') }}',
	        columns: [
	            {data: 'rownum', name: 'rownum', orderable: false, searchable: false, render : function(data, type, row, meta){
			  		return meta.row+1;
			  	}},
	            {data: 'kode_barang', name: 'kode_barang'},
	            {data: 'nama_barang', name: 'nama_barang'},
	            {data: 'satuan_awal', name: 'ms.nama_satuan'},
	            {data: 'satuan_akhir', name: 'ms2.nama_satuan'},
	            {data: 'aksi', name: 'aksi', orderable: false, searchable: false}
	        ],
	        columnDefs: [
	        	{
	        		target: 1,
	        		visible: true,
	        		render: function ( data, type, row ) {
			        	return data.kode_barang+' '+data.nama_barang;
			        }
	        	}
	        ]
		});

		// 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_barang();
		get_satuan();
	})

	$("#btn_tambah_satuan").click(function(){
		$("[name=popup_id]").val('');
		$("[name=popup_kode]").val(null).trigger('change');
		$("[name=popup_nama]").val('');
		$("[name=popup_satuan_awal]").val(null).trigger('change');
		$("[name=popup_satuan_akhir]").val(null).trigger('change');
		$("[name=popup_nilai_awal]").val('');
		$("[name=popup_nilai_akhir]").val('');

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

	/*$("[name=popup_kode]").change(function(){
		get_barang();
		
	})*/

	

	function get_konversi(){
		$.ajax({
			url: "{{ url('konversi/tampil')}}  ",
			type: 'get',
			dataType: 'json',
			success: function(respon){
				tb.clear().draw();
				for(i in respon){
					tb.row.add(['<div></div>',
						'<div><center>'+respon[i].barang+'</center></div>',
						'<div><center>'+respon[i].nm_satuan_awal+'</center></div>',
						'<div><center>'+respon[i].nm_satuan_akhir+'</center></div>',
						// '<div><center>'+respon[i].nilai_awal+'</center></div>',
						// '<div><center>'+respon[i].nilai_akhir+'</center></div>',
						'<div><center>'+respon[i].aksi+'</center></div>'+
						'<input type="hidden" id="table_id'+respon[i].id_konversi+'" value="'+respon[i].id_konversi+'">'+
						'<input type="hidden" id="table_kode'+respon[i].id_konversi+'" value="'+respon[i].kode+'">'+
						'<input type="hidden" id="table_nama'+respon[i].id_konversi+'" value="'+respon[i].nama+'">'+
						'<input type="hidden" id="table_satuan_awal'+respon[i].id_konversi+'" value="'+respon[i].satuan_awal+'">'+
						'<input type="hidden" id="table_satuan_akhir'+respon[i].id_konversi+'" value="'+respon[i].satuan_akhir+'">'+
						'<input type="hidden" id="table_nilai_awal'+respon[i].id_konversi+'" value="'+respon[i].nilai_awal+'">'+
						'<input type="hidden" id="table_nilai_akhir'+respon[i].id_konversi+'" value="'+respon[i].nilai_akhir+'">'	
						]).draw(false);
				}
			}
		})
	}



	function get_barang(){
		$.ajax({
			url: "{{ url('konversi/get_barang') }}",
			type: 'get',
			dataType: 'json',
			success: function(result){
					$("[name=popup_kode]").html('');
					$("[name=popup_kode]").append('<option value="">--- Pilih Barang ---</option>');
					for(i in result){
						$("[name=popup_kode]").append('<option value="'+result[i].id_barang+'" barang="'+result[i].nama_barang+'" kode="'+result[i].kode_barang+'" satuan="'+result[i].id_satuan+'">'+result[i].kategori+' - '+result[i].nama_sub+' - '+result[i].kode_barang+' - '+result[i].nama_barang+'</option>');
					}
			}
		})
	}

	$("[name=popup_kode]").change(function(){
		var id_satuan = $("[name=popup_kode] :selected").attr('satuan');

		$("[name=popup_satuan_awal]").val(id_satuan).trigger('change');
	})


	function get_satuan(){
		$.ajax({
			url: "{{ url('konversi/get_satuan') }}",
			type: 'get',
			dataType: 'json',
			success: function(result){
					$("[name=popup_satuan_awal]").html('');
					$("[name=popup_satuan_akhir]").html('');
					for(i in result){
						$("[name=popup_satuan_awal]").append('<option value="'+result[i].id_satuan+'">'+result[i].nama_satuan+'</option>');
						$("[name=popup_satuan_akhir]").append('<option value="'+result[i].id_satuan+'">'+result[i].nama_satuan+'</option>');
					}
			}
		})
	}
	

	function edit(id){
		var id = $("#table_id"+id).val();
		var kode = $("#table_kode"+id).val();
		var nama = $("#table_nama"+id).val();
		var satuan_awal = $("#table_satuan_awal"+id).val();
		var satuan_akhir = $("#table_satuan_akhir"+id).val();
		var nilai_awal = $("#table_nilai_awal"+id).val();
		var nilai_akhir = $("#table_nilai_akhir"+id).val();
		

		$("[name=popup_id]").val(id);
		$("[name=popup_kode]").val(kode).trigger('change');
		$("[name=popup_nama]").val(nama);
		$("[name=popup_satuan_awal]").val(satuan_awal).trigger('change');
		$("[name=popup_satuan_akhir]").val(satuan_akhir).trigger('change');
		$("[name=popup_nilai_awal]").val(nilai_awal);
		$("[name=popup_nilai_akhir]").val(nilai_akhir);

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

	}

	function hapus(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('konversi/hapus')}} ",
					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 = $("[name=popup_id]").val();
		var kode = $("[name=popup_kode]").val();
		var satuan_awal = $("[name=popup_satuan_awal]").val();
		var satuan_akhir = $("[name=popup_satuan_akhir]").val();
		var nilai_awal = $("[name=popup_nilai_awal]").val();
		var nilai_akhir = $("[name=popup_nilai_akhir]").val();

		if(kode != '' && satuan_awal != '' && satuan_akhir != '' && nilai_awal != '' && nilai_akhir != ''){
			disabled('#btn_popup_simpan', true);
			$.ajax({
				url: "{{ url('konversi/simpan')}} ",
				type: 'post',
				data: {id : id, kode : kode, satuan_awal:satuan_awal, satuan_akhir:satuan_akhir, nilai_awal:nilai_awal, nilai_akhir:nilai_akhir},
				headers : {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				success: function(respon){
					tb.ajax.reload();
					disabled('#btn_popup_simpan', false);
					$("#exampleModal").modal('hide');
				}
			})
		}
	})
</script>

@endsection