@extends('base.layout')

@section('content')
<div class="wrapper">
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-12">
				<div class="page-title-box">
					<div class="btn-group pull-right">
						<ol class="breadcrumb hide-phone p-0 m-0">
							<li class="breadcrumb-item active">SIM Barang Habis Pakai</li>
						</ol>
					</div>
					<h4 class="page-title">SIMBHP</h4>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12">
				<div class="profile-user-box card-box bg-custom">
					<div class="row">
						<div class="col-sm-4">
							<span class="pull-left mr-3">
							<a href="#" class="btnubahfoto">
								<img src="{{ Session('photo') }}" alt="" class="thumb-lg rounded-circle">
							</a>
							</span>
							<div class="media-body text-white">
								<h4 class="mt-1 mb-1 font-18">{{ Session('nama') }}</h4>
								<p class="font-13 text-light">{{ Session('previlage') }}</p>
								<p class="text-light mb-0">{{ config('global.Title') }} | {{ config('global.namaapps') }}</p>
							</div>
						</div>
						<div class="col-sm-8">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="card-box bg-info widget-flat border-info text-white">
                                        <i class="icon-layers"></i>
                                        <h3 class="m-b-10">{{ $masuk ?? 0 }}</h3>
                                        Barang Masuk<br />
                                        <a href="#" id="topbtnpemasukan"><span class="badge badge-primary pull-right"> Add</span></a>
                                    </div>
                                </div><!-- end col -->
                                <div class="col-sm-4">
                                    <div class="card-box bg-success widget-flat border-info text-white">
                                        <i class="icon-paypal"></i>
                                        <h3 class="m-b-10">{{ $keluar ?? 0 }}</h3>
                                        Barang keluar<br />
                                        <a href="#" id="topbtnpengeluaran"><span class="badge badge-primary pull-right"> Add</span></a>
                                    </div>
                                </div><!-- end col -->
                                <div class="col-sm-4">
                                    <div class="card-box bg-danger widget-flat border-info text-white">
                                        <i class="icon-rocket"></i>
                                        <h3 class="m-b-10">{{ $rusak ?? 0 }}</h3>
                                        Barang Rusak/Hilang<br />
                                        <!-- <a href="#" id="topbtnhapus"><span class="badge badge-primary pull-right"> Add</span></a> -->
                                    </div>
                                </div><!-- end col -->
                            </div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-8">
                <div class="card-box ribbon-box">
                    <div class="ribbon ribbon-primary">Data Bulan {{date("m")}} Tahun {{date("Y")}}</div>
                    <p class="m-b-0"></p>
                    <div class="form-group">
						<div class="row">
							<div class="col-lg-4">
								<select id="cekbln" class="form-control">
									<option value="ALL">ALL</option>
									<option value="01">Jan</option>
									<option value="02">Feb</option>
									<option value="03">Mar</option>
									<option value="04">Apr</option>
									<option value="05">May</option>
									<option value="06">Jun</option>
									<option value="07">Jul</option>
									<option value="08">Aug</option>
									<option value="09">Sep</option>
									<option value="10">Oct</option>
									<option value="11">Nov</option>
									<option value="12">Dec</option>
								</select>
							</div>
							<div class="col-lg-4">
								<input type="text" class="form-control" id="cekthn" value="{{ $tahunne }}">
							</div>
							<div class="col-lg-4">
								<button class="btn btn-warning btn-flat" type="button" id="btnviewdata">View Report</button>
							</div>
						</div>
					</div>
                    <div class="form-group">
					    <div id="gridreportblnini"></div>
                    </div>
                </div>
			</div>
            <div class="col-md-4">
                <div class="card-box ribbon-box">
                    <div class="ribbon ribbon-primary">Sisa Barang</div>
                    <p class="m-b-0"></p>
                    <div class="form-group">
                        <a href="#" id="topbtntambahjenis" class="btn btn-block btn-social btn-flickr">
                            <i class="fa fa-database"></i> Tambah Jenis
                        </a>
					</div>
                    <div class="form-group">
					    <div id="gridjenis"></div>
                    </div>
                </div>
			</div>
		</div>
	</div> <!-- end container -->
</div>
<!-- TOKEN -->
<div id="modaltambahjenisbrg" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="myModalLabel">Input Jenis Barang</h4>
			</div>
			<div class="modal-body">
                <div class="form-group">
                    <label>Jenis Barang</label>
                    <input type="text" id="jenis_deskripsi" name="jenis_deskripsi" class="form-control">			  
                </div>
                <div class="form-group">
                    <label>Satuan </label>
                    <input type="text" id="jenis_satuan" name="jenis_satuan" class="form-control">			  
                </div>
                <div class="form-group account-btn text-center m-t-10">
					<div class="col-12">
                        <input type="hidden" id="jenis_idne" name="jenis_idne" class="form-control">
						<button class="btn w-lg btn-custom waves-effect waves-light" type="button" id="btnsimpanjenis">Tambahkan</button>
					</div>
				</div>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div>
<div id="modalpemasukan" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="myModalLabel">Input Data Penerimaan</h4>
			</div>
			<div class="modal-body">
                <div class="form-group">
                    <label>Tanggal Masuk</label>
                    <input type="text" id="in_tanggal" name="in_tanggal" class="form-control" value="{{$tanggal}}">
                </div>
                <div class="form-group">
                    <label>Jenis Barang</label>
                    <select id="in_pos" name="in_pos" class="form-control" >
                        @foreach($jjenis as $rjenis)
                            <option value="{{ $rjenis['jenis'] }}">{{ $rjenis['jenis'] }} ( {{ $rjenis['satuan'] }} )</option>
                        @endforeach
                    </select>			  
                </div>
                <div class="form-group">
                    <label>Supplier</label>
                    <input type="text" id="in_deskripsi" name="in_deskripsi" class="form-control">
                </div>
                <div class="form-group">
                    <label>Jumlah</label>
                    <input type="text" id="in_total" name="in_total" class="form-control">
                </div>
				<div class="form-group account-btn text-center m-t-10">
					<div class="col-12">
						<button class="btn w-lg btn-custom waves-effect waves-light" type="button" id="btnsimpanpemasukan">Simpan</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="modalpengeluaran" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="myModalLabel">Input Data Pengeluaran</h4>
			</div>
			<div class="modal-body">
                <div class="form-group">
                    <label>Tanggal</label>
                    <input type="text" id="out_tanggal" name="out_tanggal" class="form-control" value="{{$tanggal}}">
                </div>
                <div class="form-group">
                    <label>Barang yang diminta</label>
                    <select id="out_pos" name="out_pos" class="form-control" >
                        @foreach($jjenis as $rjenis)
                            <option value="{{ $rjenis['jenis'] }}">{{ $rjenis['jenis'] }} ( {{ $rjenis['satuan'] }} )</option>
                        @endforeach
                    </select>			  
                </div>
                <div class="form-group">
                    <label>Peminta</label>
                    <select id="out_deskripsi" name="out_deskripsi" class="form-control" >
                        @foreach($pegawai as $rpegawai)
                            <option value="{{ $rpegawai['id'] }}">{{ $rpegawai['nama'] }} ( {{ $rpegawai['previlege'] }} )</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>Total</label>
                    <input type="text" id="out_total" name="out_total" class="form-control">
                </div>
				<div class="form-group account-btn text-center m-t-10">
					<div class="col-12">
						<button class="btn w-lg btn-custom waves-effect waves-light" type="button" id="btnsimpanpengeluaran">Simpan</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="modaleditor" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="myModalLabel">Editor Data</h4>
			</div>
			<div class="modal-body">
                <div class="form-group">
                    <label>Tanggal</label>
                    <input type="text" id="edit_tanggal" name="edit_tanggal" class="form-control" value="{{$tanggal}}">
                </div>
                <div class="form-group">
                    <label>Jenis barang</label>
                    <select id="edit_pos" name="edit_pos" class="form-control" >
                        @foreach($jjenis as $rjenis)
                            <option value="{{ $rjenis['jenis'] }}">{{ $rjenis['jenis'] }} ( {{ $rjenis['satuan'] }} )</option>
                        @endforeach
                    </select>			  
                </div>
                <div class="form-group">
                    <label>Deskripsi</label>
                    <input type="text" id="edit_deskripsi" name="edit_deskripsi" class="form-control">
                </div>
                <div class="form-group">
                    <label>Total</label>
                    <input type="text" id="edit_total" name="edit_total" class="form-control">			  
                </div>
                <div class="form-group">
                    <label>Alasan Di Edit / Di Hapus</label>
                    <input type="text" id="edit_alasan" name="edit_alasan" class="form-control">			  
                </div>
				<div class="form-group account-btn text-center m-t-10">
					<div class="col-12">
                        <button class="btn w-lg btn-danger waves-effect waves-light" type="button" id="btnsimpanhapus">Delete</button>
                        <input type="hidden" id="edit_id" name="edit_id" class="form-control">
						<button class="btn w-lg btn-custom waves-effect waves-light" type="button" id="btnsimpanedit">Simpan</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="tempatctk" style="overflow: hidden; display: none;">
	<div id="tabel_cetak"></div>
</div>
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

@endsection
@push('script')
<script type="text/javascript">
    $(function () {
        $("#in_tanggal").datepicker({format: 'dd-mm-yyyy'});
        $("#out_tanggal").datepicker({format: 'dd-mm-yyyy'});
        $("#edit_tanggal").datepicker({format: 'dd-mm-yyyy'});
    });
    function openedpage( jQuery ){
		var set01=document.getElementById('cekbln').value;
		var set02=document.getElementById('cekthn').value;
		var token=document.getElementById('token').value;
		var source = {
			datatype: "json",
			datafields: [
                { name: 'id',type: 'text'},	
                { name: 'tanggal',type: 'text'},
                { name: 'bulan',type: 'text'},
                { name: 'tahun',type: 'text'},
                { name: 'deskripsi',type: 'text'},
                { name: 'pemasukan',type: 'text'},
                { name: 'pengeluaran',type: 'text'},
                { name: 'jenis',type: 'text'},
                { name: 'keterangan',type: 'text'},
                { name: 'tgllengkap',type: 'text'},
                { name: 'total',type: 'text'},
			],
			type: 'POST',
			data: {val01: set01, val02: set02, _token: token},
			url: 'simbhp/reportbhp',
		};
		var dataAdapter = new $.jqx.dataAdapter(source);
		$("#gridreportblnini").jqxGrid({
            width: '100%',
            showfilterrow: true,
            filterable: true,
            columnsresize: true,
            autoshowfiltericon: true,
            pageable: true,
            autoheight: true,
            theme: "energyblue",
            source: dataAdapter,
            selectionmode: 'multiplecellsextended',
            columns: [
                { text: 'dd', columngroup: 'tglinput', filtertype: 'checkedlist', datafield: 'tanggal', width: '5%', cellsalign: 'center', align: 'center' },
                { text: 'mm', columngroup: 'tglinput', filtertype: 'checkedlist', datafield: 'bulan', width: '5%', cellsalign: 'center', align: 'center' },
                { text: 'yy', columngroup: 'tglinput', filtertype: 'checkedlist', datafield: 'tahun', width: '5%', cellsalign: 'center', align: 'center' },
                { text: 'Jenis', datafield: 'jenis', filtertype: 'checkedlist', width: '10%', cellsalign: 'center', align: 'center' },
                { text: 'Deskripsi', datafield: 'deskripsi', width: '25%', cellsalign: 'left', align: 'center' },
                { text: 'MASUK', datafield: 'pemasukan', width: '10%', cellsalign: 'right', align: 'center' },
                { text: 'KELUAR', datafield: 'pengeluaran', width: '10%', cellsalign: 'right', align: 'center' },
                { text: 'Keterangan', datafield: 'keterangan', width: '20%', cellsalign: 'right', align: 'center' },
                { text: 'Edit', columntype: 'button', width: '10%', cellsrenderer: function () { return "Edit";
                    }, buttonclick: function (row) {	
						editrow 		= row;
						var offset 		= $("#gridreportblnini").offset();
						var dataRecord 	= $("#gridreportblnini").jqxGrid('getrowdata', editrow);
						var tanggal 	= dataRecord.tanggal;
						var bulan 		= dataRecord.bulan;
						var tahun 		= dataRecord.tahun;
						var tulis 		= tahun+'-'+bulan+'-'+tanggal;
						$("#edit_deskripsi").val(dataRecord.deskripsi);
						$("#edit_id").val(dataRecord.id);
						$("#edit_pos").val(dataRecord.jenis);
						$("#edit_total").val(dataRecord.total);
						$("#edit_tanggal").val(tulis);
						$("#modaleditor").modal('show');
                    }
                },		
            ],
            columngroups: 
            [
                { text: 'Tanggal', align: 'center', name: 'tglinput' },                
            ]
        });
    }
$(document).ready(function() {
    openedpage();
	var token=document.getElementById('token').value;
	$("#topbtntambahjenis").click(function(){ $("#modaltambahjenisbrg").modal('show'); $("#jenis_idne").val('new'); });
    $("#topbtnpemasukan").click(function(){ $("#modalpemasukan").modal('show'); });
	$("#topbtnpengeluaran").click(function(){ $("#modalpengeluaran").modal('show'); });
	$("#topbtnhapus").click(function(){ $("#modaleditor").modal('show'); $("#edit_id").val('delete'); });

	$("#btnsimpanjenis").click(function(){
		var val01=document.getElementById('jenis_idne').value;
		var val02=document.getElementById('jenis_deskripsi').value;
		var val03=document.getElementById('jenis_satuan').value;
		var val04='';
		var val05='jenis';
		var val06='';
		var val07='';
		var val08='';
		$("#modaltambahjenisbrg").modal('hide');
		$.post('simbhp/exaddbarang', { _token: token, set01: val01, set02: val02, set03: val03, set04: val04, set05: val05, set06: val06, set07: val07, set08: val08 },
		function(data){
            var status  = data.status;
			var message = data.message;
			$.toast({
				heading: status,
				text: message,
				position: 'top-right',
				loaderBg: data.warna,
				icon: data.icon,
				hideAfter: 3000,
				stack: 1
			});
            var uri = window.location.href.split("#")[0];
            setTimeout(function () { window.location=uri;}, 2000);
			return false;
		});	
	});
    $("#btnsimpanpemasukan").click(function(){
		var val01=document.getElementById('in_deskripsi').value;
		var val02=document.getElementById('in_pos').value;	
		var val03=document.getElementById('in_tanggal').value;
		var val04=document.getElementById('in_total').value;
		var val05='pemasukan';
		var val06='';
		var val07='';
		var val08='';
		$.post('simbhp/exaddbarang', { _token: token, set01: val01, set02: val02, set03: val03, set04: val04, set05: val05, set06: val06, set07: val07, set08: val08 },
		function(data){			
			$("#modalpemasukan").modal('hide');	
			var status  = data.status;
			var message = data.message;
			$.toast({
				heading: status,
				text: message,
				position: 'top-right',
				loaderBg: data.warna,
				icon: data.icon,
				hideAfter: 5000,
				stack: 1
			});
            openedpage();
			$("#gridjenis").jqxGrid('updatebounddata', 'filter');
            $("#gridjenis").on('bindingcomplete', function (event) {
				$("#gridjenis").jqxGrid('sortby', 'tlsjenis', 'asc');
			});
			return false;
		});	
	});
    $("#btnsimpanpengeluaran").click(function(){
		var val01=document.getElementById('out_deskripsi').value;
		var val02=document.getElementById('out_pos').value;	
		var val03=document.getElementById('out_tanggal').value;
		var val04=document.getElementById('out_total').value;
		var val05='pengeluaran';
		var val06='';
		var val07='';
		var val08='';
		$.post('simbhp/exaddbarang', { _token: token, set01: val01, set02: val02, set03: val03, set04: val04, set05: val05, set06: val06, set07: val07, set08: val08 },
		function(data){			
			$("#modalpengeluaran").modal('hide');	
			var status  = data.status;
			var message = data.message;
			$.toast({
				heading: status,
				text: message,
				position: 'top-right',
				loaderBg: data.warna,
				icon: data.icon,
				hideAfter: 5000,
				stack: 1
			});
            openedpage();
			$("#gridjenis").jqxGrid('updatebounddata', 'filter');
            $("#gridjenis").on('bindingcomplete', function (event) {
				$("#gridjenis").jqxGrid('sortby', 'tlsjenis', 'asc');
			});
			return false;
		});	
	});
    $("#btnsimpanedit").click(function(){
		var val01=document.getElementById('edit_deskripsi').value;
		var val02=document.getElementById('edit_pos').value;	
		var val03=document.getElementById('edit_tanggal').value;
		var val04=document.getElementById('edit_total').value;
		var val05='editor';
		var val06=document.getElementById('edit_id').value;
		var val07=document.getElementById('edit_alasan').value;
		var val08='';
		$.post('simbhp/exaddbarang', { _token: token, set01: val01, set02: val02, set03: val03, set04: val04, set05: val05, set06: val06, set07: val07, set08: val08 },
		function(data){			
			$("#modaleditor").modal('hide');	
			var status  = data.status;
			var message = data.message;
			$.toast({
				heading: status,
				text: message,
				position: 'top-right',
				loaderBg: data.warna,
				icon: data.icon,
				hideAfter: 5000,
				stack: 1
			});
            openedpage();
			$("#gridjenis").jqxGrid('updatebounddata', 'filter');
            $("#gridjenis").on('bindingcomplete', function (event) {
				$("#gridjenis").jqxGrid('sortby', 'tlsjenis', 'asc');
			});
			return false;
		});	
	});
    $("#btnsimpanhapus").click(function(){
		var val01=document.getElementById('edit_deskripsi').value;
		var val02=document.getElementById('edit_pos').value;	
		var val03=document.getElementById('edit_tanggal').value;
		var val04=document.getElementById('edit_total').value;
		var val05='hapus';
		var val06=document.getElementById('edit_id').value;
		var val07=document.getElementById('edit_alasan').value;
		var val08='';
		$.post('simbhp/exaddbarang', { _token: token, set01: val01, set02: val02, set03: val03, set04: val04, set05: val05, set06: val06, set07: val07, set08: val08 },
		function(data){			
			$("#modaleditor").modal('hide');	
			var status  = data.status;
			var message = data.message;
			$.toast({
				heading: status,
				text: message,
				position: 'top-right',
				loaderBg: data.warna,
				icon: data.icon,
				hideAfter: 5000,
				stack: 1
			});
            openedpage();
			$("#gridjenis").jqxGrid('updatebounddata', 'filter');
            $("#gridjenis").on('bindingcomplete', function (event) {
				$("#gridjenis").jqxGrid('sortby', 'tlsjenis', 'asc');
			});
			return false;
		});	
	});
    $("#btnviewdata").click(function(){
		openedpage();
	});
	$("#in_total").autoNumeric(	'init', {aSep: ',', mDec: '0', vMax: '99999999999999999999999999'} );
	$("#out_total").autoNumeric( 'init', {aSep: ',', mDec: '0', vMax: '99999999999999999999999999'} );
	var sourcerekap = {
		datatype: "json",
		datafields: [
			{ name: 'id',type: 'text'},	
			{ name: 'tlsjenis',type: 'text'},
			{ name: 'jenis',type: 'text'},
			{ name: 'saldo',type: 'text'},
			{ name: 'satuan',type: 'text'},	
		],
		url: 'simbhp/rekapbhp',
		cache: false,
	};
	var datasaldo = new $.jqx.dataAdapter(sourcerekap);
	$("#gridjenis").jqxGrid({
		width			: '100%',		            
		columnsresize	: true,		
		pageable		: false,
		sortable		: true,
		autoheight		: true,
		theme			: "energyblue",
		source			: datasaldo,
		columns			: [			
			{ text: 'Jenis', datafield: 'tlsjenis', width: '45%', cellsalign: 'left', align: 'center' },
			{ text: 'Satuan', datafield: 'satuan', width: '20%', cellsalign: 'center', align: 'center' },
			{ text: 'Sisa', datafield: 'saldo', width: '35%', cellsalign: 'right', align: 'center' },			
		],
	});
	$("#gridjenis").on('bindingcomplete', function (event) {
		$("#gridjenis").jqxGrid('sortby', 'tlsjenis', 'asc');
	});
    $('#export').click(function(){			
		var gridContent = $("#gridreportblnini").jqxGrid('exportdata', 'json');
		data = $.parseJSON(gridContent);
		var noOfContacts = data.length;
		if(noOfContacts>0){
			var table = document.createElement("table");
				table.style.width = '100%';
				table.setAttribute('border', '1');
				table.setAttribute('cellspacing', '0');
				table.setAttribute('cellpadding', '5');
				table.setAttribute('id', 'tabelcetak');
				table.setAttribute('class', 'text');
			var col = [];
			for (var i = 0; i < noOfContacts; i++) {
				for (var key in data[i]) {
					if (col.indexOf(key) === -1) {
						col.push(key);
					}
				}
			}
			var tHead = document.createElement("thead");
			var hRow = document.createElement("tr");
			for (var i = 0; i < col.length; i++) {
					var th = document.createElement("th");
					th.innerHTML = col[i];
					hRow.appendChild(th);
			}
			tHead.appendChild(hRow);
			table.appendChild(tHead);
			var tBody = document.createElement("tbody");
			for (var i = 0; i < noOfContacts; i++) {
				var bRow = document.createElement("tr");
				for (var j = 0; j < col.length; j++) {
					var td 		= document.createElement("td");
					var isi 	= data[i][col[j]];
					var isi2 	= isi.toString();
					var pjg 	= isi2.length;
					if (pjg > 8){
						if (pjg == 9 || pjg == 10){
							if( isi2.indexOf(',') != -1 ){
								var res = isi2.replace(/,/g, "");
								td.innerHTML = res;
							}
							else {
								var res = isi2;
								td.setAttribute('style', 'mso-number-format: "\@";');
								td.innerHTML = res;
							}
						}
						else { 
							var res = isi2;
							td.setAttribute('style', 'mso-number-format: "\@";');
							td.innerHTML = res;
						}						
					}
					else {
						var res = isi2.replace(/,/g, "");
						td.innerHTML = res;
					}
						
					bRow.appendChild(td);
				}
				tBody.appendChild(bRow)
			}
			table.appendChild(tBody);
			var divContainer = document.getElementById("tabel_cetak");
				divContainer.innerHTML = "";
				divContainer.appendChild(table);
		}
		
		$("#tabel_cetak").btechco_excelexport({
			containerid: "tabel_cetak"
			, datatype: $datatype.Table
		});
		return false;
	});
});
</script>
@endpush