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

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Form Pembayaran</h5>
			<div class="heading-elements">
				<ul class="icons-list">
		      		<li><a data-action="collapse"></a></li>
		      	</ul>
	       	</div>
	    </div>
	    <div class="panel-body">
	    	<table class="table table-striped">
	    		<tr>
	    			<td width="15%">No. Faktur</td>
	    			<td width="5%">:</td>
	    			<td width="30%" id="tb_nofaktur"></td>

	    			<td width="15%">Cara Bayar</td>
	    			<td width="5%">:</td>
	    			<td width="30%" id="tb_carabayar"></td>
	    		</tr>
	    		<tr>
	    			<td width="15%">Jenis Transaksi</td>
	    			<td width="5%">:</td>
	    			<td id="tb_jenistran"></td>

	    			<td width="15%">Penyedia</td>
	    			<td width="5%">:</td>
	    			<td id="tb_penyedia"></td>
	    		</tr>
	    		<tr>
	    			<td width="15%">Total</td>
	    			<td width="5%">:</td>
	    			<td id="tb_total"></td>
	    			
	    			<td width="15%">Sisa Pembayaran</td>
	    			<td width="5%">:</td>
	    			<td id="tb_sisa"></td>
	    		</tr>
	    	</table>
	    	
	    	{{-- <h5>Tambah Pembayaran</h5>
	    	<form class="form-horizontal" autocomplete="off" id="form_simpan">
	    		<input type="hidden" name="id_pembelian" value="{{ $data['id'] }}">
	    		<input type="hidden" name="id_belibayar" value="">
	    		<div class="form-group">
	    			<label class="control-label col-sm-2">Tanggal</label>
	    			<div class="col-sm-4">
	    				<input type="text" name="tanggal" class="form-control datepicker">
	    			</div>
	    		</div>
	    		<div class="form-group">
	    			<label class="control-label col-sm-2">Jumlah</label>
	    			<div class="col-sm-4">
	    				<input type="text" name="jumlah" class="form-control number-only text-right" onkeyup="maksimal($(this))">
	    				<p class="help-block pull-right" id="help_jumlah"></p>
	    			</div>
	    		</div>
	    		<div class="form-group">
	    			<div class="col-sm-6 pull-right">
	    				<button type="button" class="btn btn-primary" id="btn_simpan">Simpan</button>
	    			</div>
	    		</div>
	    	</form> --}}
	</div>
	<table class="table table_ table-stripped">
	    <thead>
			<tr>
				<th>No</th>
				<th>Tanggal</th>
				<th>Jumlah</th>
				
			</tr>
		</thead>
		<tbody>
			
		</tbody>
		<tfoot>
			<tr>
				<th colspan="2" class="text-right">Total</th>
				<th colspan="1" id="td_totalbayar" class="text-right"></th>
				
			</tr>
		</tfoot>
	</table>
</div>

<input type="hidden" name="store_id" value="{{ $data['id'] }}">
<input type="hidden" name="store_total" value="">
<input type="hidden" name="store_bayar" value="">
<input type="hidden" name="store_sisa" value="">
<!----Modal---->
<script type="text/javascript">
	

	var table_;
	var tb_no = parseInt(10000);
	var id_pembelian;


	$(document).ready(function(){
		table_ = $(".table_").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();


		id_pembelian = $("[name=store_id]").val();
		if(id_pembelian != ''){
			get_bayar(id_pembelian);
		}
		
	})

	function get_detail(id){
		var sisa = parse_float(0);
		$.ajax({
			url: '{{ url('pembelian/get_detailbayar') }}'+'/'+id,
			type: 'get',
			dataType: 'json',
			success: function(respon){
				clear();
				if(respon.detail.status == 1){
					var ttl = (parse_float(respon.detail.total_barang)-parse_float(respon.detail.potongan))+parse_float(respon.detail.bunga);
					
					$("#tb_nofaktur").text(respon.detail.no_faktur);
					$("#tb_carabayar").text(respon.detail.cara_bayar+' - '+respon.detail.tipe_bayar);
					$("#tb_jenistran").text(respon.detail.nama_transaksi+' - '+respon.detail.tipe_transaksi);
					$("#tb_penyedia").text(respon.detail.nama_penyedia+' - '+respon.detail.pic);
					$("#tb_total").text(curr(ttl));
					$("#tb_sisa").text('');

					$("[name=store_total]").val(ttl);
					// $("[name=store_bayar]").val('');

					var sisa = parse_float($("[name=store_total]").val())-parse_float($("[name=store_bayar]").val());
					$("[name=store_sisa]").val(sisa);
					$("#tb_sisa").text(curr(sisa));

					$("[name=jumlah]").attr('min', '0');
					$("[name=jumlah]").attr('max', sisa);
				}
			}
		})
	}

	function get_bayar(id){
		var jum_bayar = parse_float(0);
		$.ajax({
			url: '{{ url('pembelian/get_bayar') }}'+'/'+id,
			type: 'get',
			dataType: 'json',
			success: function(respon){
				table_.clear().draw();
				if(respon.bayar.length > 0){
					for(i in respon.bayar){
						table_.row.add(['<div></div>',
							'<div id="list_kode'+respon.bayar[i].id_belibayar+'">'+respon.bayar[i].tgl_bayar+'</div>',
							'<div id="list_kode'+respon.bayar[i].id_belibayar+'" class="text-right">'+curr(respon.bayar[i].jum_bayar)+'</div>'+
							'<input type="hidden" name="tabel_id[]" id="tabel_id'+respon.bayar[i].id_belibayar+'" value="'+respon.bayar[i].id_belibayar+'">'+
							'<input type="hidden" name="tabel_jum[]" id="tabel_jum'+respon.bayar[i].id_belibayar+'" value="'+respon.bayar[i].jum_bayar+'">'+
							'<input type="hidden" name="tabel_tanggal[]" id="tabel_tanggal'+respon.bayar[i].id_belibayar+'" value="'+respon.bayar[i].tgl_bayar+'">'
							]).draw(false);
						jum_bayar += parse_float(respon.bayar[i].jum_bayar);
					}

					$("#td_totalbayar").text(curr(jum_bayar));
					$("[name=store_bayar]").val(jum_bayar);


				}else{
					$("#td_totalbayar").text(curr(jum_bayar));
					$("[name=store_bayar]").val(jum_bayar);					
				}

				get_detail(id);
			}
		})
	}

	function clear(){
		$("#tb_nofaktur").text('');
		$("#tb_carabayar").text('');
		$("#tb_jenistran").text('');
		$("#tb_penyedia").text('');
		$("#tb_total").text('');
		$("#tb_sisa").text('');
	}

	function clear2(){
		$("[name=id_belibayar]").val('');
		$("[name=tanggal]").val('');
		$("[name=jumlah]").val('');
		$("#help_jumlah").text('');
	}

	$("[name=jumlah]").keyup(function(){
		var jum = parse_float($("[name=jumlah]").val());
		if(isNaN(jum) || jum == 0 || jum == ''){
			jum = parse_float(0);
		}

		$("#help_jumlah").text(curr(jum));
	})

	function set_jumlah(){
		var jum = parse_float($("[name=jumlah]").val());
		if(isNaN(jum) || jum == 0 || jum == ''){
			jum = parse_float(0);
		}

		$("#help_jumlah").text(curr(jum));
	}



	$("#btn_simpan").click(function(){
		var id_belibayar = $("[name=id_belibayar]").val();
		var id_beli = id_pembelian;
		var tanggal = $("[name=tanggal]").val();
		var jum_bayar = $("[name=jumlah]").val();

		if(tanggal != '' && jum_bayar != '' && jum_bayar > 0){
			$.ajax({
				url: '{{ url('pembelian/simpan_bayar') }}',
				type: 'post',
				dataType: 'json',
				data: {id_belibayar : id_belibayar, id_beli : id_pembelian, tanggal : tanggal, jum_bayar : jum_bayar},
				headers : {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				success: function(respon){
					clear2();
					get_bayar(id_pembelian);
				}
			})
		}
	})

	function edit_table(id){
		var id_belibayar = $("#tabel_id"+id).val();
		var tanggal = $("#tabel_tanggal"+id).val();
		var jum = parse_float($("#tabel_jum"+id).val());
		var sisa = parse_float($("[name=store_sisa]").val());

		$("[name=id_belibayar]").val(id_belibayar);
		$("[name=tanggal]").val(tanggal);
		$("[name=jumlah]").val(jum);

		set_jumlah();

		$("[name=jumlah]").attr('min', '0');
		$("[name=jumlah]").attr('max', jum+sisa);
	}

	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('pembelian/hapus_bayar')}} ",
					type: 'post',
					data: {id : id},
					headers : {
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					},
					success: function(respon){
						get_bayar(id_pembelian);
					}
				})
		 	}
		})
	}

	// function reload(){
	// 	var FunctionOne = function () {
	// 	  var r = $.Deferred();

	// 	  get_bayar(id_pembelian);

	// 	  setTimeout(function () {
	// 	    r.resolve();
	// 	  }, 1500);
	// 	  return r;
	// 	};

	// 	var FunctionTwo = function () {
	// 	  get_detail(id_pembelian);
	// 	};

	// 	FunctionOne().done(FunctionTwo);
	// }
</script>

@endsection