@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">Penggunaan Barang</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Form Penggunaan Barang</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" action="{{url('penggunaanbarang/simpan')}}" method="post" autocomplete="off">
	    	<input type="hidden" name="_token" value="{{ csrf_token() }}">
	    	<input type="hidden" name="id_pengeluaran" value="{{ $data['header']['id_pengeluaran'] }}">
        	<div class="col-sm-6">
        		<div class="form-group">
        			<label class="control-label col-sm-4">Tanggal</label>
        			<div class="col-sm-8">
        				<input class="form-control datepicker" type="text" name="tanggal" value="{{ ($data['header']['tanggal'] == '') ? date('d-m-Y'):$data['header']['tanggal'] }}" required/>
        			</div>
        		</div>
        		<div class="form-group">
        			<label class="control-label col-sm-4">Lokasi</label>
        			<div class="col-sm-8"> @php $lokasi = $data['header']['id_lokasi']; @endphp
        				<select class="form-control select-search" name="lokasi" id="lokasi">
        					@foreach($data['lokasi'] as $l){
        						<option value="{{ $l->id_lokasi }}" {{ ($lokasi == $l->id_lokasi) ? "selected":"" }}>{{ $l->nama_lokasi }}</option>
        					}
        					@endforeach
        				</select>
        			</div>
        		</div>
        		<div class="form-group">
        			<label class="control-label col-sm-4">Keterangan</label>
        			<div class="col-sm-8">
        				<textarea class="form-control" rows="2" name="keterangan">{{ $data['header']['keterangan'] }}</textarea>
        			</div>
        		</div>
        		
        	</div>
        	<div class="col-sm-6">
				    		
        	</div>

        	
        	<div class="col-sm-12 form-group">
        	<h5 class="panel-title">Detail Barang</h5>
        	<a class="btn bg-success" id="btn_tambah_item">Tambah</a>
        	<div class="col-ms-12">
        	<table class="table table-stripped" id="tabel_data">
	    	<thead>
				<tr>
					<th>No</th>
					<th>Kode Barang</th>
					<th>Nama Barang</th>
					<th>Gudang</th>
					<th>Jumlah</th>
					<th>Keterangan</th>	
					<th>Aksi</th>			
				</tr>
			</thead>
				<tbody>
					
				</tbody>
	    	</table>
        	</div>
        	
             <div class="col-md-6"></div>
             <br>
             <div class="col-md-12">
             	<a href="{{url('penggunaanbarang')}}" class="btn bg-warning-400">Kembali</a>
             <div class="form-group pull-right">
             	<!-- ($data['data']->status == '0') ?'<button class="btn btn-primary" type="submit">Simpan</button>':'' -->
             	
             	<button class="btn btn-primary" type="submit">Simpan</button>
           
             	<!-- <button class="btn btn-primary" type="submit">Simpan</button> -->
             </div>
         </div>
	    </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">
	      			<input type="hidden" name="popup_idtabel">
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Gudang</label>
	      				<div class="col-sm-8">
	      					<select class="form-control select-search" name="popup_gudang" id="popup_gudang">
	      						<option value=""> -- Pilih Gudang -- </option>
	      						@foreach($data['gudang']->get() as $g){
	      							<option value="{{ $g->id_gudang }}" nama="{{ $g->nama_gudang }}">{{ $g->nama_gudang }}</option>
	      						}
	      						@endforeach
	      					</select>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Nama Barang</label>
	      				<div class="col-sm-8">
	      					<select class="form-control select-search" name="popup_barang" id="popup_barang">

	      					</select>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Jumlah Stok</label>
	      				<div class="col-sm-8">
	      					<label class="control-label" id="popup_stok"></label>
	      				</div>
	      			</div> 
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Jumlah</label>
	      				<div class="col-sm-8">
	      					<input type="text" class="form-control number-only" name="popup_jumlah" id="popup_jumlah" onkeyup="maksimal($(this))"></label>
	      					<p class="help-block pull-right" id="help_jumlah"></p>
	      				</div>
	      			</div> 
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Keterangan</label>
	      				<div class="col-sm-8">
	      					<textarea class="form-control" rows="2" name="popup_ket" id="popup_ket"></textarea>
	      				</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>

<input type="hidden" id="store_barang" name="jum_data" value="">


<script type="text/javascript">
	$("#btn_tambah_item").click(function(){
		$("[name=popup_id]").val('');
		$("[name=popup_idtabel]").val('');
		$("[name=popup_barang]").html('');
		$("[name=popup_gudang]").val(null).trigger('change');
		$("#popup_stok").text('');
		$("[name=popup_jumlah]").val('');
		$("[name=popup_jumlah]").attr('min', 0);
		$("[name=popup_jumlah]").attr('max', 0);
		$("[name=popup_ket]").val('');
		$("[name=jum_data]").val('0');
		$("#help_jumlah").text('');
		$("#exampleModal").modal('show');
	})
	var table;
	var tb_no = parseInt(10000);
	var id_pengeluaran = $("[name=id_pengeluaran]").val();
	$(document).ready(function(){
		table = $("#tabel_data").DataTable({
			"paging": false
		});
		table.on( 'order.dt search.dt', function () {
            table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                cell.innerHTML = i+1;
            } );
        } ).draw();

		if(id_pengeluaran != ''){
			get_edit(id_pengeluaran);
		}

	})

	$("#popup_gudang").change(function(){
		var id_gudang = $(this).val();
		if(id_gudang != ''){
			$.ajax({
				url: '{{ url('penggunaanbarang/get_barang') }}',
				dataType: 'json',
				data: { id_gudang : id_gudang, jenis : '1'},
				success: function(response){
					var jum_data = parseInt(response.length);
					var urut = parseInt(0);
					$("[name=popup_barang]").html('');
					$("#popup_stok").text('');
					
					if(response.length > 0){
						$("[name=popup_barang]").append('<option value="">-- Pilih Barang --</option>');
						for(i in response){
							$("[name=popup_barang]").append('<option value="'+response[i].id_barang+'" id_satuan="'+response[i].id_satuan+'" nama="'+response[i].nama_barang+'" kode="'+response[i].kode_barang+'" satuan="'+response[i].nama_satuan+'"> '+response[i].concat_nama+' </option>');
							urut++;
						}
						
						if(jum_data == urut){
							$("[name=jum_data]").val('1');
						}
					}else{
						$("[name=popup_barang]").append('<option value=""> Stok Kosong </option>');
						$("[name=jum_data]").val('1');
					}
				},
				complete: function(res){
					return '1';
				}
			})
		}else{
			$("[name=popup_barang]").append('<option value=""> Stok Kosong </option>');
			$("[name=jum_data]").val('1');
		}
	})

	$("#popup_barang").change(function(){
		var id = $("[name=popup_id]").val();
		var id_barang = $(this).val();
		var id_gudang = $("#popup_gudang").val();
		var id_satuan = $("#popup_barang :selected").attr("id_satuan");
		var nilai = parseFloat(0);
		if(id_barang != ''){
			$.ajax({
				url: '{{ url('penggunaanbarang/get_barang') }}',
				dataType: 'json',
				data: { id_gudang : id_gudang, id_barang : id_barang, id_satuan : id_satuan},
				success: function(response){

					$("#popup_stok").text('');
					
					if(response.length > 0){
						var nilai = response[0].stok;
						var total = parseFloat(0);

						$('input[id^="tabel_jumlah"]').each(function(){
							var val = ($(this).attr('id'));
				        	val = val.replace('tabel_jumlah', '');

				        	if($("#tabel_idbarang"+val).val() == id_barang && $("#tabel_id"+val).val() == ''){
						      	var jum = $("#tabel_jumlah"+val).val();
						        total += parseFloat(jum);
						    }
						})

						//menambah data baru
						if($("[name=popup_idtabel]").val() == ''){
							nilai = parseFloat(response[0].stok)-total;
						}else{
							var jum = 0;
							if($("[name=popup_jumlah]").val() != ''){
								jum = $("[name=popup_jumlah]").val();
							}
							if(id == ''){
								//masih temporary tabel
								nilai = (parseFloat(response[0].stok)-total)+parseFloat(jum);
							}else{
								//sudah masuk database
								nilai = parseFloat(response[0].stok-total)+(parseFloat(jum));						
							}

							console.log("stok "+response[0].stok+"\nTotal "+total+"\nJumlah "+jum);
						}

						$("#popup_stok").text(nilai+" "+response[0].nama_satuan);
						$("[name=popup_jumlah]").attr('min', 0);
						$("[name=popup_jumlah]").attr('max', nilai);

					}else{
						$("#popup_stok").text('');
						$("[name=popup_jumlah]").attr('min', 0);
						$("[name=popup_jumlah]").attr('max', 0);
					}
				}
			})
		}else{
			$("#popup_stok").text('');
			//$("[name=popup_stok]").text(nilai+' '+respon[0].nama_satuan);
			$("[name=popup_jumlah]").attr('min', 0);
			$("[name=popup_jumlah]").attr('max', 0);
		}
	})
	
	$("#btn_popup_simpan").click(function(){
		var id = $("[name=popup_id]").val();
		var id_tabel = $("[name=popup_idtabel]").val();
		var id_gudang = $("#popup_gudang").val();
		var nama_gudang = $("#popup_gudang :selected").attr('nama');
		var id_barang = $("#popup_barang").val();
		var nama_barang = $("#popup_barang :selected").attr('nama');
		var kode_barang = $("#popup_barang :selected").attr('kode');
		var nama_satuan = $("#popup_barang :selected").attr('satuan');
		var id_satuan = $("#popup_barang :selected").attr('id_satuan');
		var jumlah = $("#popup_jumlah").val();
		var keterangan = $("#popup_ket").val();

		if(jumlah > 0 || id_gudang != '' || id_barang != ''){
			if(id_tabel == ''){
				table.row.add(['<div><center></center></div>',
					'<div id="list_kodebarang'+tb_no+'">'+kode_barang+'</div>',
					'<div id="list_namabarang'+tb_no+'">'+nama_barang+'</div>',
					'<div id="list_namagudang'+tb_no+'">'+nama_gudang+'</div>',
					'<div id="list_jumlah'+tb_no+'">'+jumlah+' '+nama_satuan+'</div>',
					'<div id="list_keterangan'+tb_no+'">'+keterangan+'</div>',
					'<div class="btn-group"><button type="button" class="btn bg-warning-400 btn-xs" onclick="edit_table('+tb_no+')"><i class="icon-pencil"></i> </button><button class="btn bg-danger-800 btn-xs" type="button" onclick="hapus_table($(this))"><i class="icon-eraser"></i></button></div>'+
					'<input type="hidden" id="tabel_id'+tb_no+'" name="tabel_id[]" value="">'+
					'<input type="hidden" id="tabel_idgudang'+tb_no+'" name="tabel_idgudang[]" value="'+id_gudang+'">'+
					'<input type="hidden" id="tabel_idbarang'+tb_no+'" name="tabel_idbarang[]" value="'+id_barang+'">'+
					'<input type="hidden" id="tabel_idsatuan'+tb_no+'" name="tabel_idsatuan[]" value="'+id_satuan+'">'+
					'<input type="hidden" id="tabel_jumlah'+tb_no+'" name="tabel_jumlah[]" value="'+jumlah+'">'+
					'<input type="hidden" id="tabel_keterangan'+tb_no+'" name="tabel_keterangan[]" value="'+keterangan+'">'
					]).draw(false);
			}else{
				$("#list_kodebarang"+id_tabel).text(kode_barang);
				$("#list_namabarang"+id_tabel).text(nama_barang);
				$("#list_namagudang"+id_tabel).text(nama_gudang);
				$("#list_jumlah"+id_tabel).text(jumlah+' '+nama_satuan);
				$("#list_keterangan"+id_tabel).text(keterangan);

				$("#tabel_idgudang"+id_tabel).val(id_gudang);
				$("#tabel_idbarang"+id_tabel).val(id_barang);
				$("#tabel_idsatuan"+id_tabel).val(id_satuan);
				$("#tabel_jumlah"+id_tabel).val(jumlah);
				$("#tabel_keterangan"+id_tabel).val(keterangan);
			}
		}else{

		}

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

	function edit_table(id){
		var id_ = $("#tabel_id"+id).val();
		var id_gudang = $("#tabel_idgudang"+id).val();
		var id_barang = $("#tabel_idbarang"+id).val();
		var jumlah = $("#tabel_jumlah"+id).val();
		var keterangan = $("#tabel_keterangan"+id).val();

		$("[name=popup_id]").val(id_);
		$("[name=popup_idtabel]").val(id);
		var store = $("[name=jum_data]").val();

		var FunctionOne = function () {
		var r = $.Deferred();
		
		$("#popup_gudang").val(id_gudang).trigger('change');
		
		setTimeout(function () {
				r.resolve();
			}, 3000);
		return r;
		};

		var FunctionBet = function() {
			if(id_ != '' && id_pengeluaran != ''){
				$.ajax({
				url: '{{ url('penggunaanbarang/get_barang') }}',
				dataType: 'json',
				data: { id_gudang : id_gudang, id_barang : id_barang },
				success: function(response){
					$("#popup_stok").text('');
					
					var test =	$("[name=popup_barang]").find("option[value='"+ id_barang +"']");
					
					if(test.length == 0){
						for(i in response){
							$("[name=popup_barang]").append('<option value="'+response[i].id_barang+'" id_satuan="'+response[i].id_satuan+'" nama="'+response[i].nama_barang+'" kode="'+response[i].kode_barang+'" satuan="'+response[i].nama_satuan+'"> '+response[i].concat_nama+' </option>');
							
						}
					}
				},
				complete: function(res){
					FunctionTwo();
				}
			})
			}else{
				FunctionTwo();
			}
		}

		var FunctionTwo = function () {
		var r = $.Deferred();
			$("#popup_barang").val(id_barang).trigger('change');
			$("#popup_jumlah").val(jumlah);
			$("#popup_ket").val(keterangan);
			$("#help_jumlah").text(format_angka(jumlah));
		setTimeout(function () {
				r.resolve();
			}, 3000);
		return r;
		};

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

	function get_edit(id){
		$.ajax({
			url: '{{ url('penggunaanbarang/get_edit') }}',
			dataType: 'json',
			data: { id : id },
			success: function(response){
				if(response.length > 0){
					for( i in response ){
						table.row.add(['<div><center></center></div>',
							'<div id="list_kodebarang'+response[i].id_pengeluaran_barang+'">'+response[i].kode_barang+'</div>',
							'<div id="list_namabarang'+response[i].id_pengeluaran_barang+'">'+response[i].nama_barang+'</div>',
							'<div id="list_namagudang'+response[i].id_pengeluaran_barang+'">'+response[i].nama_gudang+'</div>',
							'<div id="list_jumlah'+response[i].id_pengeluaran_barang+'">'+response[i].jumlah+' '+response[i].nama_satuan+'</div>',
							'<div id="list_keterangan'+response[i].id_pengeluaran_barang+'">'+response[i].ket+'</div>',
							'<div class="btn-group"><button type="button" class="btn bg-warning-400 btn-xs" onclick="edit_table('+response[i].id_pengeluaran_barang+')"><i class="icon-pencil"></i> </button><button class="btn bg-danger-800 btn-xs" type="button" onclick="hapus_table($(this))"><i class="icon-eraser"></i></button></div>'+
							'<input type="hidden" id="tabel_id'+response[i].id_pengeluaran_barang+'" name="tabel_id[]" value="'+response[i].id_pengeluaran_barang+'">'+
							'<input type="hidden" id="tabel_idgudang'+response[i].id_pengeluaran_barang+'" name="tabel_idgudang[]" value="'+response[i].id_gudang+'">'+
							'<input type="hidden" id="tabel_idbarang'+response[i].id_pengeluaran_barang+'" name="tabel_idbarang[]" value="'+response[i].id_barang+'">'+
							'<input type="hidden" id="tabel_idsatuan'+response[i].id_pengeluaran_barang+'" name="tabel_idsatuan[]" value="'+response[i].id_satuan+'">'+
							'<input type="hidden" id="tabel_jumlah'+response[i].id_pengeluaran_barang+'" name="tabel_jumlah[]" value="'+response[i].jumlah+'">'+
							'<input type="hidden" id="tabel_keterangan'+response[i].id_pengeluaran_barang+'" name="tabel_keterangan[]" value="'+response[i].ket+'">'
							]).draw(false);
					}
				}else{

				}
			}
		})
	}

	$("[name=popup_jumlah]").keyup(function(){
		$("#help_jumlah").text(format_angka($("[name=popup_jumlah]").val()));
	})

	function hapus_table(d){
		table.row(d.parents('tr')).remove().draw();
		
	}
</script>

@endsection