@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> Inventori</a></li>
			<li class="active">Persediaan</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Persediaan Barang dalam Proses</h5>
			<div class="heading-elements">
				<ul class="icons-list">
		      		<li><a data-action="collapse"></a></li>
		      	</ul>
	       	</div>
	    </div>
	    <div class="panel-body">
	    </div>

	    <table class="table table-stripped" id="tabel_persediaan">
	    	<thead>
				<tr>
					<th>No</th>
					<th>No. Order</th>
					<th>Tanggal Keluar</th>
					<th>Posisi</th>
                    <th>Proses</th>
                    <th>Lokasi</th>
                    <th></th>
				</tr>
			</thead>
			<tbody>

			</tbody>
	    </table>
	</div>
</div>


<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">
	    		<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
	      	</div>
	      	<div class="modal-body">
	      		<div class="col-sm-12 table-responsive">
	      		<h4>Barang Masuk</h4>
	      		<table class="table table-stripped" id="tabel_keluar">
	      			<thead>
						<tr>
							<th>No</th>
							<th>Kode Barang</th>
							<th>Nama Barang</th>
		                    <th>Jumlah</th>
		                    <th>Satuan</th>
		                    <th>Satuan Konversi</th>
		                    <th>Satuan</th>
		                    <th>Gudang</th>
		                    <th>Warna</th>
		                    <th>Corak</th>
							<th>Motif</th>
							<th>Kualitas</th>
							<th>Dudulan</th>
							<th>Label</th>
							<th>Cap</th>
							<th>Kemasan</th>
							<th>Kemasan Satuan</th>
							<th>Kemasan 10 Potong</th>
							<th>Kemasan Dus Ball</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
	      		</table>
	      		</div>

	      		<div class="col-sm-12 table-responsive">
	      			<h4>Barang Keluar</h4>
	      			<table class="table table-stripped" id="tabel_masuk">
	      			<thead>
						<tr>
							<th>No</th>
							<th>Kode Barang</th>
							<th>Nama Barang</th>
		                    <th>Jumlah</th>
		                    <th>Satuan</th>
		                    <th>Satuan Konversi</th>
		                    <th>Satuan</th>
		                    <th>Gudang</th>
		                    <th>Warna</th>
		                    <th>Corak</th>
							<th>Motif</th>
							<th>Kualitas</th>
							<th>Dudulan</th>
							<th>Label</th>
							<th>Cap</th>
							<th>Kemasan</th>
							<th>Kemasan Satuan</th>
							<th>Kemasan 10 Potong</th>
							<th>Kemasan Dus Ball</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
	      			</table>
	      		</div>

	      		<div class="col-sm-12 table-responsive">
	      			<h4>Barang Belum Disetor</h4>
	      			<table class="table table-stripped" id="tabel_setor">
	      			<thead>
						<tr>
							<th>No</th>
							<th>Kode Barang</th>
							<th>Nama Barang</th>
		                    <th>Jumlah</th>
		                    <th>Satuan</th>
		                    <th>Satuan Konversi</th>
		                    <th>Satuan</th>
		                    <th>Gudang</th>
		                    <th>Warna</th>
		                    <th>Corak</th>
							<th>Motif</th>
							<th>Kualitas</th>
							<th>Dudulan</th>
							<th>Label</th>
							<th>Cap</th>
							<th>Kemasan</th>
							<th>Kemasan Satuan</th>
							<th>Kemasan 10 Potong</th>
							<th>Kemasan Dus Ball</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
	      			</table>
	      		</div>
	      	</div>
	      	<div class="modal-footer">
	        	<button type="button" class="btn bg-warning-400" data-dismiss="modal" aria-label="Close">Tutup</button>
	      	</div>
	    </div>
	</div>
</div>

<script type="text/javascript">
	var tp;
	var table_persediaan;
	var tabel_masuk;
	var tabel_setor;

	$(document).ready(function(){
		tp = $("#tabel_persediaan").DataTable({
			processing: true,
	        serverSide: true,
	        ajax: '{{ url('persediaan/get_rekanan') }}',
	        columns: [
	            {data: 'posisi', name: 'posisi', orderable: false, searchable: false, render : function(data, type, row, meta){
			  		return meta.row+1;
			  	}},
			  	{data: 'workorder_barang', name: 'workorder_barang'},
			  	{data: 'tanggal', name: 'tanggal'},
	            {data: 'posisi', name: 'posisi'},
	            {data: 'nama_proses', name: 'nama_proses'},
	            {data: 'nama_lokasi', name: 'nama_lokasi'},
	            {data: 'aksi', name: 'aksi'},
	        ],
		});

		table_persediaan = $("#tabel_keluar").DataTable();
		table_persediaan.on( 'order.dt search.dt', function () {
            table_persediaan.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                cell.innerHTML = i+1;
            } );
        } ).draw();

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

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

	})

	function detail(id, jenis){
		get_keluar(id, jenis);
		get_masuk(id, jenis);
		get_sisa(id, jenis);

	//	console.log(id+' | '+jenis);
		$("#exampleModal").modal('show');

	}

	function get_keluar(id, jenis){
		$.ajax({
			url: "{{ url('persediaan/get_rekanan_detail')}} ",
			type: 'post',
			data: {id : id, jenis : jenis},
			headers : {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			success: function(respon){
				if(respon.status == 1){
					table_persediaan.clear().draw();
					for(i in respon.data){
					
						table_persediaan.row.add(['<div><center></center></div>',
							'<div>'+respon.data[i].kode_barang+'</div>',
							'<div>'+respon.data[i].nama_barang+'</div>',
							'<div>'+respon.data[i].jumlah+'</div>',
							'<div>'+respon.data[i].nama_satuan+'</div>',
							'<div>'+respon.data[i].jumlah_rencana+'</div>',
							'<div>'+respon.data[i].nama_perubahansatuan+'</div>',
							'<div>'+respon.data[i].nama_gudang+'</div>',
							'<div>'+respon.data[i].nama_komposisi+'</div>',
							'<div>'+respon.data[i].nama_corak+'</div>',
							'<div>'+respon.data[i].nama_motif+'</div>',
							'<div>'+respon.data[i].nama_kualitas+'</div>',
							'<div>'+respon.data[i].kualitas_dudul+'</div>',
							'<div>'+respon.data[i].nama_label+'</div>',
							'<div>'+respon.data[i].nama_cap+'</div>',
							'<div>'+respon.data[i].nama_kemasan+'</div>',
							'<div>'+respon.data[i].nama_kemasansatuan+'</div>',
							'<div>'+respon.data[i].nama_kemasansepuluh+'</div>',
							'<div>'+respon.data[i].nama_kemasanseratus+'</div>'
							]).draw(false);
					}

				}else{
					table_persediaan.clear().draw();
				}
				
			}
		})
	}

	function get_masuk(id, jenis){
		$.ajax({
			url: "{{ url('persediaan/get_rekanan_masuk')}} ",
			type: 'post',
			data: {id : id, jenis : jenis},
			headers : {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			success: function(respon){
				if(respon.status == 1){
					tabel_masuk.clear().draw();					
						for( i in respon.data){
							tabel_masuk.row.add(['<div><center></center></div>',
							'<div>'+respon.data[i].kode_barang+'</div>',
							'<div>'+respon.data[i].nama_barang+'</div>',
							'<div>'+respon.data[i].jumlah+'</div>',
							'<div>'+respon.data[i].nama_satuan+'</div>',
							'<div>'+respon.data[i].jumlah_rencana+'</div>',
							'<div>'+respon.data[i].nama_perubahansatuan+'</div>',
							'<div>'+respon.data[i].nama_gudang+'</div>',
							'<div>'+respon.data[i].nama_komposisi+'</div>',
							'<div>'+respon.data[i].nama_corak+'</div>',
							'<div>'+respon.data[i].nama_motif+'</div>',
							'<div>'+respon.data[i].nama_kualitas+'</div>',
							'<div>'+respon.data[i].kualitas_dudul+'</div>',
							'<div>'+respon.data[i].nama_label+'</div>',
							'<div>'+respon.data[i].nama_cap+'</div>',
							'<div>'+respon.data[i].nama_kemasan+'</div>',
							'<div>'+respon.data[i].nama_kemasansatuan+'</div>',
							'<div>'+respon.data[i].nama_kemasansepuluh+'</div>',
							'<div>'+respon.data[i].nama_kemasanseratus+'</div>'
							]).draw(false);
						}
					

				}else{
					tabel_masuk.clear().draw();
				}
				
			}
		})
	}


	function get_sisa(id, jenis){
		$.ajax({
			url: "{{ url('persediaan/get_sisa') }}",
			type: 'get',
			data: {id : id, jenis : jenis},
			success: function(respon){
				if(respon.status == 1){
					tabel_setor.clear().draw();					
						for( i in respon.data){
							tabel_setor.row.add(['<div><center></center></div>',
							'<div>'+respon.data[i].kode_barang+'</div>',
							'<div>'+respon.data[i].nama_barang+'</div>',
							'<div>'+respon.data[i].stok+'</div>',
							'<div>'+respon.data[i].nama_satuan+'</div>',
							'<div>'+respon.data[i].jumlah_rencana+'</div>',
							'<div>'+respon.data[i].nama_perubahansatuan+'</div>',
							'<div>'+respon.data[i].nama_gudang+'</div>',
							'<div>'+respon.data[i].nama_komposisi+'</div>',
							'<div>'+respon.data[i].nama_corak+'</div>',
							'<div>'+respon.data[i].nama_motif+'</div>',
							'<div>'+respon.data[i].nama_kualitas+'</div>',
							'<div>'+respon.data[i].kualitas_dudul+'</div>',
							'<div>'+respon.data[i].nama_label+'</div>',
							'<div>'+respon.data[i].nama_cap+'</div>',
							'<div>'+respon.data[i].nama_kemasan+'</div>',
							'<div>'+respon.data[i].nama_kemasansatuan+'</div>',
							'<div>'+respon.data[i].nama_kemasansepuluh+'</div>',
							'<div>'+respon.data[i].nama_kemasanseratus+'</div>'
							]).draw(false);
						}
					

				}else{
					tabel_setor.clear().draw();
				}
			}
		})
	}
	
</script>
@endsection