@extends('layout')

@section('content')
<style type="text/css">
/*.table_td_align_top > tbody > tr > td{
	vertical-align : top;
}*/

.scrollable {
	display:block;
  overflow:auto;
  height:500px;
}

.highlighted {
  background-color: yellow;
}
</style>
<div class="page-header page-header-default">
	<div class="breadcrumb-line">
		<ul class="breadcrumb">
			<li><a href="{{ url('hutang') }}"><i class="icon-home2 position-left"></i> Hutang</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">Pembayaran Tagihan</h5>
			<div class="heading-elements">
				<ul class="icons-list">
		      		<li><a href="{{ url('hutang') }}" class="text-warning"><i class="icon-circle-left2 warning"></i> Kembali</a></li>
		      	</ul>
	       	</div>
	    </div>

    	<form class="" method="post" action="{{ url('order_service/simpan_bayar_tagihan') }}">
    		{{ csrf_field() }}

	    <div class="panel-body">
    		<div class="row">
	    		<div class="col-sm-3 col-md-3">
	    			<div class="form-group">
	    				{{ Form::label("Penyedia", "", ["class"=>"control-label"]) }}
	    				{{ Form::hidden("id_penyedia", $orderserviceById->id_penyedia) }}
	    				{{ Form::text("nama_penyedia", $orderserviceById->nama_penyedia, ["class"=>"form-control", "disabled"=>"disabled"]) }}
	    			</div>
	    		</div>
	    		<div class="col-sm-4 col-md-4">
	    			<div class="form-group">
	    				{{ Form::label("Akun Bayar", "", ["class"=>"control-label"]) }}
	    				{{ Form::select("id_akun", $akunBayar, [null], ["class"=>"form-control set_selected"]) }}
	    			</div>
	    		</div>
    		</div>

    		<div class="row">
    			<div class="col-sm-3 col-md-3">
	    			<div class="form-group">
	    				{{ Form::label("No. Pembayaran", "", ["class"=>"control-label"]) }}
	    				{{ Form::text("no_transaksi_bayar", 0, ["class"=>"form-control"]) }}
	    			</div>
    			</div>
    			<div class="col-sm-3 col-md-3">
	    			<div class="form-group">
	    				{{ Form::label("Tanggal Bayar", "", ["class"=>"control-label"]) }}
	    				{{ Form::text("tgl_bayar", date("d/m/Y"), ["class"=>"form-control set_datepicker"]) }}
	    			</div>
    			</div>
    		</div>

    		<div class="col-md-6">
	    		<input type="text" id="myInput" class="form-control" placeholder="Cari nomor tagihan...">
	    	</div>

		    <div class="col-md-12 scrollable" id="scrollable">
	    		<div class="data-list">
	    			<table class="table" id="myTable">
	    				<thead>
	    					<tr>
	    						<th>No. Tagihan</th>
	    						<th>Keterangan</th>
	    						<th>Total</th>
	    						<th>Sisa Tagihan</th>
	    						<th>Pembayaran</th>
	    					</tr>
	    				</thead>
	    				<tbody>
	    					@php($sisa_tagihan = $orderserviceById->nominal_netto-$orderserviceById->nominal_bayar)
	    					<tr class="info">
	    						<td>{{ $orderserviceById->no_nota."".$orderserviceById->sufix_no_nota }}</td>
	    						<td>{{ $orderserviceById->keterangan }}</td>
	    						<td class="text-right">{{ "Rp ".rupiah2($orderserviceById->nominal_netto, 2) }}</td>
	    						<td class="text-right">{{ "Rp ".rupiah2($sisa_tagihan, 2) }}</td>
	    						<td>
	    							{{ Form::number("jml_bayar[$orderserviceById->id]", 0, ["class"=>"form-control text-right", "max"=>$sisa_tagihan, "min"=>0, "step"=>0.01, "onkeyup"=>"setFormatMoney($(this), 'td'), set_total_bayar($(this))"]) }}
	    							<span class="help-block text-nominal text-right" style="font-weight: bold;">Rp 0</span>
	    						</td>
	    					</tr>
	    					@foreach($orderserviceBySupplier AS $key=>$value)
	    					@php 
	    						$sisa_tagihan = $value->nominal_netto-$value->nominal_bayar; 
	    						if($sisa_tagihan==0) continue;
	    					@endphp
	    					<tr>
	    						<td>{{ $value->no_nota."".$value->sufix_no_nota }}</td>
	    						<td>{{ $value->keterangan }}</td>
	    						<td class="text-right">{{ "Rp ".rupiah2($value->nominal_netto, 2) }}</td>
	    						<td class="text-right">{{ "Rp ".rupiah2($sisa_tagihan, 2) }}</td>
	    						<td>
	    							{{ Form::number("jml_bayar[$value->id]", 0, ["class"=>"form-control text-right", "max"=>$sisa_tagihan, "min"=>0, "step"=>0.01, "onkeyup"=>"setFormatMoney($(this), 'td'), set_total_bayar($(this))"]) }}
	    							<span class="help-block text-nominal text-right" style="font-weight: bold;">Rp 0</span>
	    						</td>
	    					</tr>
	    					@endforeach
	    				</tbody>
	    			</table>
	    		</div>
	    	</div>
	    </div>
		
		<div class="panel-footer">
			<div class="col-sm-12 col-md-12 text-right">
				<div class="form-group">
					<p class="form-control-static" style="font-size: 25px" id="total_bayar">Rp 0</p>
				</div>
			</div>
			<div class="col-sm-12 col-md-12 text-right">
				<a href="{{ url('hutang') }}" class="btn btn-md btn-default">Batal</a>
				<button type="submit" class="btn btn-md btn-success">Simpan</button>
			</div>
		</div>

	    </form>
	</div>
</div> <!-- end : .content -->

<!----Modal---->
<script type="text/javascript">
$(document).ready(function () {
	$(".set_selected").select2();

	$("#myInput").keyup(function() {

	    if ($(this).val() == "") {
	      // $("#myTable").find("tr").not("tr:first").find("td").removeClass('highlighted');
	      // $("#myTable").find("tr").not("tr:first").find("td").find(".inputType").removeClass('highlighted');
	      $("#myTable").find("tr").not("tr:first").removeClass('highlighted');
	      return false;
	    }
	    var data = this.value.toUpperCase().split(" ");
	    $("#myTable").find("tr").not("tr:first").each(function(index, elem) {
	      var $elem = $(elem);
	      for (var d = 0; d < data.length; ++d) {
	        // Highlight
	        if ($elem.text().toUpperCase().indexOf(data[d]) != -1) {
	          $elem.addClass('highlighted');
	          var $container = $('#scrollable'),
                    $scrollTo = $elem;
                $container.scrollTop(
				    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
				);
	        } else {
	          $elem.removeClass('highlighted');
	        }
	        //console.log();

	        // if ($elem.find(".inputType").length == 1) {

	        //   if ($elem.find(".inputType").val().toUpperCase().indexOf(data[d]) != -1) {
	        //     $elem.addClass('highlighted');
	        //     $elem.find(".inputType").addClass('highlighted');
	        //   } else {
	        //     $elem.removeClass('highlighted');
	        //     $elem.find(".inputType").removeClass('highlighted');
	        //   }
	        // }

	      }
	    })
	  })
});

function set_total_bayar(this_) {
	var temp_jml_bayar = 0;
	var input_jml_bayar = $("input[name^='jml_bayar']");
	var temp_item;
	$.each(input_jml_bayar, function (id, item) {
		temp_item = (item.value==null)||(item.value==NaN)||(item.value=="") ? 0 : item.value;
		temp_jml_bayar += parseFloat(temp_item);
	});

	$("#total_bayar").html(curr(temp_jml_bayar));
}


function setFormatMoney(this_, p) {
	var div = this_.parents(p);
	var data = this_.val();
	if(data==""){
		data = 0;
	}
	div.find(".help-block").html(curr(data));
}

$(function() {

	var search = $('.data-search'),
		content = $('.data-list'),
		matches = $(), index = 0;

	// Listen for the text input event
	search.on('input', function(e) {

		// Only search for strings 2 characters or more
		if (search.val().length >= 2) {
			
            
            
			// Use the highlight plugin
			content.highlight(search.val(), function(found) {                
                found.parent().parent().css('background','yellow');
                var $container = $('#scrollable'),
                    $scrollTo = found.parent().parent();
                $container.scrollTop(
				    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
				);
			});
		}
		else {
			content.highlightRestore();
		}

	});
	
});

(function($) {

	var termPattern;

	$.fn.highlight = function(term, callback) {

		return this.each(function() {

			var elem = $(this);

			if (!elem.data('highlight-original')) {
				
				// Save the original element content
				elem.data('highlight-original', elem.html());
				
			} else {
				
				// restore the original content
				elem.highlightRestore();
				
			}

			termPattern = new RegExp('(' + term + ')', 'ig');

			// Search the element's contents
			walk(elem);

			// Trigger the callback
			callback && callback(elem.find('.match'));

		});
	};

	$.fn.highlightRestore = function() {
		
		return this.each(function() {
			var elem = $(this);
			elem.html(elem.data('highlight-original'));
		});
		
	};

	function walk(elem) {

		elem.contents().each(function() {

			if (this.nodeType == 3) { // text node

				if (termPattern.test(this.nodeValue)) {
					$(this).replaceWith(this.nodeValue.replace(termPattern, '<span class="match">$1</span>'));
				}
			} else {
				walk($(this));
			}
		});
	}

})(jQuery);
</script>

@endsection