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

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Persediaan Mutasi</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_carabayar"><i class=""></i>Tambah</button> --}}
	    	<form class="form-horizontal" autocomplete="off" id="form_laporan">
	    		<input type="hidden" name="_token" value="{{ csrf_token() }}">
	    		<div class="form-group">
	    			<label class="control-label col-sm-4">Proses Produkis</label>
	    			<div class="col-sm-8">
	    				<select class="form-control select-search" name="proses">
	    					<option value="">-- Pilih Produksi --</option>
        					@php foreach($data['proses'] as $row){ 
        					if($row->nama_proses2 == ''){

        					echo '<optgroup label="'.$row->nama_proses.'">';
        					} else {
        					@endphp
        					<option value="{{ $row->id_proses }}"> {{ $row->nama_proses2.' - '.$row->nama_proses }}
        					</option>
        					@php
        					}
        					if($row->nama_proses == ''){

        					echo '</optgroup>';
        					}

        					} @endphp
	    				</select>
	    			</div>
	    		</div>
	    		<!-- <div class="form-group">
	    			<label class="control-label col-sm-4">Rekanan</label>
	    			<div class="col-sm-8">
	    				<select class="form-control select-search" name="rekanan">
	    					
	    				</select>
	    			</div>
	    		</div>
	    		<div class="form-group">
	    			<label class="control-label col-sm-4">Pegawai</label>
	    			<div class="col-sm-8">
	    				<select class="form-control select-search" name="pegawai">
	    					
	    				</select>
	    			</div>
	    		</div> -->
	    		<div class="form-group">
	    			<label class="control-label col-sm-4">Tanggal Awal</label>
	    			<div class="col-sm-8">
	    				<input class="form-control date_awal" type="text" name="tanggal_awal" required>
	    			</div>
	    		</div>
	    		<div class="form-group">
	    			<label class="control-label col-sm-4">Tanggal Akhir</label>
	    			<div class="col-sm-8">
	    				<input class="form-control date_akhir" type="text" name="tanggal_akhir" required>
	    			</div>
	    		</div>
	    		<div class="form-group">
	    			<button class="btn btn-primary" type="button" id="btn_tampil">Tampilkan</button>
	    			<button class="btn btn-success" type="submit" id="btn_cetak">Cetak</button>
	    		</div>
	    	</form>
	    </div>


	    <table class="table table-stripped table_barang2">
	    	<thead>
				<tr>
					<th>No</th>
					<th>Barang</th>
                    <th>Masuk</th>
                    <th>Keluar</th>
                    <th>Jumlah</th>
					<th>Gudang</th>
					<th>Keterangan</th>
					<th>Corak</th>
					<th>Motif</th>
				</tr>
			</thead>
			<tbody>

			</tbody>
			<tfoot>
				<tr>
					<th colspan="2">Jumlah</th>
					<th id="total_masuk"></th>
					<th id="total_keluar"></th>
					<th id="total_stok"></th>
					<th></th>
					<th></th>
				</tr>
			</tfoot>
	    </table>
	</div>
</div>
<input type="hidden" name="store_barang">
<input type="hidden" name="store_tglawal">
<input type="hidden" name="store_tglakhir">
<script type="text/javascript">
	var tb;

	$(document).ready(function(){
		tb = $(".table_barang").DataTable();
		th = $(".table_barang2").DataTable();
		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();

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

        get_barang();
	})


	

	function get_barang(){
		$.ajax({
			url: '{{ url('pembelian/get_barang') }}',
			success: function(respon){
				$("[name=barang]").html('');
				// $("[name=barang]").append('<option value="0">Semua Barang</option>');
				if(respon.length > 0){
					for(i in respon){
						$("[name=barang]").append('<option value="'+respon[i].id_barang+'" barang="'+respon[i].nama_barang+'" kode="'+respon[i].kode_barang+'" satuan="'+respon[i].satuan+'">'+respon[i].kategori+' - '+respon[i].nama_sub+' - '+respon[i].kode_barang+' - '+respon[i].nama_barang+'</option>');
					}
				}
			}
		})
	}

	$("#btn_tampil").click(function(){
		var barang = $("[name=barang]").val();
		var tgl_awal = $("[name=tanggal_awal]").val();
		var tgl_akhir = $("[name=tanggal_akhir]").val();

		$("[name=store_barang]").val(barang);
		$("[name=store_tglawal]").val(tgl_awal);
		$("[name=store_tglakhir]").val(tgl_akhir);

		
		if(barang != '' && tgl_awal != '' && tgl_akhir != ''){
			get_detail(barang, tgl_awal, tgl_akhir);
			get_detail_group(barang, tgl_awal, tgl_akhir);
		}
	})

	$("#btn_cetak").click(function(){
		var url = "{{ url('laporan_inventori/cetak') }}";
		$("#form_laporan").attr('action', url);
		$("#form_laporan").attr('method', 'post');
		$("#form_laporan").attr('target', '_blank');
	})

	function get_detail(id_barang, tgl_awal, tgl_akhir){
		$.ajax({
			url: '{{ url('laporan_inventori/get_detail') }}',
			type: 'post',
			data: {id_barang : id_barang, tgl_awal : tgl_awal, tgl_akhir : tgl_akhir},
			headers : {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			success: function(respon){
				if(respon.length > 0){
					tb.clear().draw();
					for(i in respon){
						tb.row.add(['<div></div>',
							'<div>'+respon[i].tanggal+'</div>',
							'<div>'+respon[i].ket_1+'</div>',
							'<div>'+respon[i].nama_barang+'</div>',
							'<div>'+respon[i].ket_3+' : '+respon[i].ket_2+'</div>',
							'<div>'+respon[i].masuk+'</div>',
							'<div>'+respon[i].keluar+'</div>',
							'<div>'+(parseFloat(respon[i].masuk)-parseFloat(respon[i].keluar))+'</div>',
							'<div>'+respon[i].nama_gudang+'</div>',
							'<div>'+respon[i].nama_proses+'</div>',
							'<div>'+respon[i].nama_corak+'</div>',
							'<div>'+respon[i].nama_motif+'</div>',
							]).draw(false);
					}
				}else{
					tb.clear().draw();
				}
			}
		})
	}

	function get_detail_group(id_barang, tgl_awal, tgl_akhir){
		var masuk = parseFloat(0), keluar = parseFloat(0), stok = parseFloat(0);
		$.ajax({
			url: '{{ url('laporan_inventori/get_detail_group') }}',
			type: 'post',
			data: {id_barang : id_barang, tgl_awal : tgl_awal, tgl_akhir : tgl_akhir},
			headers : {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			success: function(respon){

				if(respon.length > 0){
					th.clear().draw();
					for(i in respon){
						th.row.add(['<div></div>',
							'<div>'+respon[i].nama_barang+'</div>',
							'<div>'+respon[i].persediaan_masuk+'</div>',
							'<div>'+respon[i].persediaan_keluar+'</div>',
							'<div>'+respon[i].persediaan+'</div>',
							'<div>'+respon[i].nama_gudang+'</div>',
							'<div>'+respon[i].nama_proses+'</div>',
							'<div>'+respon[i].nama_corak+'</div>',
							'<div>'+respon[i].nama_motif+'</div>',
							]).draw(false);
						masuk += Math.round(parseFloat(respon[i].persediaan_masuk));
						keluar += parseFloat(respon[i].persediaan_keluar);
						stok += parseFloat(respon[i].persediaan);
					}
				}else{
					th.clear().draw();
				}

				$("#total_masuk").text(masuk);
				$("#total_keluar").text(keluar);
				$("#total_stok").text(stok);
			}
		})
	}
</script>


@endsection