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

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Form Input Rekanan</h5>
			<div class="heading-elements">
				<ul class="icons-list">
		      		<li><a href="{{ url('rekanan') }}" class="text-warning"><i class="icon-circle-left2 warning"></i> Kembali</a></li>
		      	</ul>
	       	</div>
	    </div>
	    <div class="panel-body">
	    	<form class="form-horizontal form-validate-jquery" method="post" action="{{ url('rekanan/simpan') }}" autocomplete="off">
	    	<input type="hidden" name="_token" value="{{ csrf_token() }}">
	    	<input type="hidden" name="id_kelompok" value="{{ $data['tabel']['id_kelompok'] }}">
	    	<div class="row">
	    		<div class="col-sm-12 col-md-12">
        	<div class="form-group">
        		<label class="control-label col-sm-2">Nama</label>
        		<div class="col-sm-4">
        			<input type="text" name="nama" class="form-control" value="{{ $data['tabel']['nama'] }}" required="">
        		</div>

        		<label class="control-label col-sm-2">NPWP</label>
        		<div class="col-sm-4">
        			<input type="text" name="npwp" class="form-control" value="{{ $data['tabel']['npwp'] }}">
        		</div>
        	</div>

        	<div class="form-group">
        		<label class="control-label col-sm-2">Email</label>
        		<div class="col-sm-4">
        			<input type="text" name="email" class="form-control" value="{{ $data['tabel']['email'] }}">
        		</div>

        		<label class="control-label col-sm-2">Telepon</label>
        		<div class="col-sm-4">
        			<input type="text" name="telepon" class="form-control" value="{{ $data['tabel']['telepon'] }}">
        		</div>
        	</div>

        	<div class="form-group">

        		<label class="control-label col-sm-2">Kota</label>
        		<div class="col-sm-4"> @php $kota = $data['tabel']['kota']; @endphp
        			<select class="form-control selectize" name="kota">
	      				@foreach($data['kabupaten'] as $kabupaten)
	      				<option value="{{ $kabupaten->nama}}" {{ ($kabupaten->nama == $kota) ? "selected":"" }}>{{ $kabupaten->nama}}</option>
	      				@endforeach

	      			</select>
        		</div>
        	</div>

        	<div class="form-group">
        		<label class="control-label col-sm-2">No. Rekening</label>
        		<div class="col-sm-4">
        			<textarea class="form-control" name="norek" rows="3">{{ $data['tabel']['no_rek'] }}</textarea>
        		</div>

        		<label class="control-label col-sm-2">Alamat</label>
        		<div class="col-sm-4">
        			<textarea class="form-control" name="alamat" rows="3">{{ $data['tabel']['alamat'] }}</textarea>
        		</div>
        	</div>

		        </div> <!--- col-sm-12 col-md-12 -->
		    </div> <!--- row -->

		    <div class="row">
		    	<hr>
		    	<div class="col-sm-12 col-md-12">
		    		<div class="form-group">
		    			<label class="control-label col-sm-12 col-md-2">Akun Hutang</label>
		    			<div class="col-sm-12 col-md-4">
			    			<select name="id_akun_hutang" class="form-control set-selected" required="">
			    				@foreach($data['akun_hutang'] AS $key=>$value)
			    				<option value="{{ $value->id }}" {{ ($data['tabel']['id_akun_hutang']==$value->id) ? "selected=''" : "''" }}>{{ format_akun_perkiraan($value) }}</option>
			    				@endforeach
			    			</select>
		    			</div>
		    		</div>
		    	</div>
		    	<div class="col-sm-12 col-md-12">
		    		<div class="form-group">
		    			<label class="control-label col-sm-12 col-md-2">Akun Piutang</label>
		    			<div class="col-sm-12 col-md-4">
			    			<select name="id_akun_piutang" class="form-control set-selected" required="">
			    				@foreach($data['akun_piutang'] AS $key=>$value)
			    				<option value="{{ $value->id }}" {{ ($data['tabel']['id_akun_piutang']==$value->id) ? "selected=''" : "''" }}>{{ format_akun_perkiraan($value) }}</option>
			    				@endforeach
			    			</select>
		    			</div>
		    		</div>
		    	</div>
		    </div>

        	<div class="col-sm-12 form-group">
        		<button class="btn btn-success" type="button" id="btn_petenun">Tambah</button>
	        	<h5 class="panel-title">Karyawan</h5>
		        	<table class="table table-stripped" id="table_rekanan">
				    	<thead>
							<tr>
								<th>No</th>
								<th>Nomor Urut</th>
								<th>Nama</th>
								<th>No. Rekening</th>
								<th>Telepon</th>
								<th>Kota</th>
								<th>Aksi</th>
							</tr>
						</thead>
			    	</table>
        	</div>

        	<div class="col-sm-12">
        	{{-- <a href="{{url('barangmasuk')}}" class="btn bg-warning-400">Kembali</a> --}}
            <div class="form-group pull-right">
             	<button type="submit" class="btn btn-primary">Simpan</button>
            </div>
            </div>
	    </div>
	    </form>
	</div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" 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="id_rekanan">
	      			<input type="hidden" name="id_list">

	      			<div class="form-group">
	      				<label class="control-label col-sm-4">No. Urut</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_urut" class="form-control number-only">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Nama</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_nama" class="form-control">
	      				</div>
	      			</div>

	      			<div class="form-group">
	      				<label class="control-label col-sm-4">No.Rek</label>
	      				<div class="col-sm-8">
	      					<textarea name="popup_norek" class="form-control"></textarea>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">NPWP</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_npwp" class="form-control">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Email</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_email" class="form-control">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Telepon</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_telepon" class="form-control">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Kota</label>
	      				<div class="col-sm-8">
	      					<select class="form-control selectize" name="popup_kota" >
	      						@foreach($data['kabupaten'] as $kabupaten)
	      						<option value="{{ $kabupaten->nama}}">{{ $kabupaten->nama}}</option>
	      						@endforeach
	      					</select>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Alamat</label>
	      				<div class="col-sm-8">
	      					<textarea class="form-control" name="popup_alamat"></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>

<script type="text/javascript">
	var table_rekanan;
	var tb_no = parseInt(10000);
	var id_kelompok = '';
	var validator;

	$(document).ready(function(){
		table_rekanan = $("#table_rekanan").DataTable({
			"paging": false
		});

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

		id_kelompok = '{{ $data['tabel']['id_kelompok'] }}';
		if(id_kelompok != ''){
			get_rekanan(id_kelompok);
		}

		$(".set-selected").select2();

		validator = $(".form-validate-jquery").validate({
	        ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
	        errorClass: 'validation-error-label',
	        successClass: 'validation-valid-label',
	        highlight: function(element, errorClass) {
	            $(element).removeClass(errorClass);
	        },
	        unhighlight: function(element, errorClass) {
	            $(element).removeClass(errorClass);
	        },// Different components require proper error label placement
	        errorPlacement: function(error, element) {

				if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) {
	                error.appendTo( element.parent() );
	            }

	            else {
	                error.insertAfter(element);
	            }
	        },
	        validClass: "validation-valid-label",
	        success: function(label) {
	            label.addClass("validation-valid-label").text("Success")
	        },
	        rules: {
	            // password: {
	            //     minlength: 5
	            // },
	        },
	        messages: {
	            // custom: {
	            //     required: 'This is a custom error message'
	            // },
	            id_akun_hutang : {
	            	required: 'Default : Hutang Usaha'
	            },
	            id_akun_piutang : {
	            	required: 'Default : Piutang Usaha'
	            },
	        }
	    });

	})

	$("#btn_petenun").click(function(){
		$("[name=popup_urut]").val('');
		$("[name=id_rekanan]").val('');
		$("[name=id_list]").val('');
		$("[name=popup_nama]").val('');
		$("[name=popup_npwp]").val('');
		$("[name=popup_email]").val('');
		$("[name=popup_telepon]").val('');
		$("[name=popup_alamat]").val('');
		$("[name=popup_norek]").val('');
		

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

	$("#btn_popup_simpan").click(function(){
		var id_rekanan = $("[name=id_rekanan]").val();
		var id_list = $("[name=id_list]").val();
		var no_urut = $("[name=popup_urut]").val();
		var nama = $("[name=popup_nama]").val();
		var npwp = $("[name=popup_npwp]").val();
		var email = $("[name=popup_email]").val();
		var telepon = $("[name=popup_telepon]").val();
		var alamat = $("[name=popup_alamat]").val();
		var norek = $("[name=popup_norek]").val();
		var kota = $("[name=popup_kota]").val();
		
		if(nama != '' && kota != ''){
			if(id_list == ''){
				table_rekanan.row.add(['<div></div>',
					'<div id="list_urut'+tb_no+'">'+no_urut+'</div>',
					'<div id="list_nama'+tb_no+'">'+nama+'</div>',					
					'<div id="list_norek'+tb_no+'">'+norek+'</div>',
					'<div id="list_telepon'+tb_no+'">'+telepon+'</div>',
					'<div id="list_kota'+tb_no+'">'+kota+'</div>',
					'<div><button type="button" id="btnedit'+tb_no+'" class="btn bg-warning-400" onclick="edit_table('+tb_no+')"><i class="icon-pencil"></i> </button> <button class="btn bg-danger-800" type="button" onclick="hapus($(this))"><i class="icon-eraser"></i></button></div>'+
					'<input type="hidden" id="tabel_idtable'+tb_no+'" name="tabel_idtable[]" value="">'+
					'<input type="hidden" id="tabel_urut'+tb_no+'" name="tabel_urut[]" value="'+no_urut+'">'+
					'<input type="hidden" id="tabel_nama'+tb_no+'" name="tabel_nama[]" value="'+nama+'">'+
					'<input type="hidden" id="tabel_npwp'+tb_no+'" name="tabel_npwp[]" value="'+npwp+'">'+
					'<input type="hidden" id="tabel_email'+tb_no+'" name="tabel_email[]" value="'+email+'">'+
					'<input type="hidden" id="tabel_telepon'+tb_no+'" name="tabel_telepon[]" value="'+telepon+'">'+
					'<input type="hidden" id="tabel_alamat'+tb_no+'" name="tabel_alamat[]" value="'+alamat+'">'+
					'<input type="hidden" id="tabel_norek'+tb_no+'" name="tabel_norek[]" value="'+norek+'">'+
					'<input type="hidden" id="tabel_kota'+tb_no+'" name="tabel_kota[]" value="'+kota+'">'
					]).draw(false);
				tb_no++;
			}else{
				$("#list_urut"+id_list).text(no_urut);
				$("#list_nama"+id_list).text(nama);
				$("#list_telepon"+id_list).text(telepon);
				$("#list_norek"+id_list).text(norek);
				$("#list_kota"+id_list).text(kota);

				$("#tabel_idtable"+id_list).val(id_rekanan);
				$("#tabel_urut"+id_list).val(no_urut);
				$("#tabel_nama"+id_list).val(nama);
				$("#tabel_npwp"+id_list).val(npwp);
				$("#tabel_email"+id_list).val(email);
				$("#tabel_telepon"+id_list).val(telepon);
				$("#tabel_alamat"+id_list).val(alamat);
				$("#tabel_norek"+id_list).val(norek);
				$("#tabel_kota"+id_list).val(kota);
			}

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

	function edit_table(id){
		$("[name=id_rekanan]").val($("#tabel_idtable"+id).val());
		$("[name=id_list]").val(id);
		$("[name=popup_urut]").val($("#tabel_urut"+id).val());
		$("[name=popup_nama]").val($("#tabel_nama"+id).val());
		$("[name=popup_npwp]").val($("#tabel_npwp"+id).val());
		$("[name=popup_email]").val($("#tabel_email"+id).val());
		$("[name=popup_telepon]").val($("#tabel_telepon"+id).val());
		$("[name=popup_alamat]").val($("#tabel_alamat"+id).val());
		$("[name=popup_norek]").val($("#tabel_norek"+id).val());
		$("[name=popup_kota]")[0].selectize.setValue($("#tabel_kota"+id).val());

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

	function hapus(d){
		table_rekanan.row(d.parents('tr')).remove().draw();
	}

	function get_rekanan(id){
		$.ajax({
			url: '{{ url('rekanan/get_rekanan') }}',
			type: 'post',
			dataType: 'json',
			data: {id_kelompok : id},
			headers : {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			success: function(respon){
				if(respon.length > 0){
					for(i in respon){
						table_rekanan.row.add(['<div></div>',
						'<div id="list_urut'+respon[i].id_rekanan+'">'+respon[i].no_urut+'</div>',					
						'<div id="list_nama'+respon[i].id_rekanan+'">'+respon[i].nama+'</div>',					
						'<div id="list_norek'+respon[i].id_rekanan+'">'+respon[i].no_rek+'</div>',
						'<div id="list_telepon'+respon[i].id_rekanan+'">'+respon[i].telepon+'</div>',
						'<div id="list_kota'+respon[i].id_rekanan+'">'+respon[i].kota+'</div>',
						'<div><button type="button" id="btnedit'+respon[i].id_rekanan+'" class="btn bg-warning-400" onclick="edit_table('+respon[i].id_rekanan+')"><i class="icon-pencil"></i> </button> <button class="btn bg-danger-800" type="button" onclick="hapus($(this))"><i class="icon-eraser"></i></button></div>'+
						'<input type="hidden" id="tabel_idtable'+respon[i].id_rekanan+'" name="tabel_idtable[]" value="'+respon[i].id_rekanan+'">'+
						'<input type="hidden" id="tabel_urut'+respon[i].id_rekanan+'" name="tabel_urut[]" value="'+respon[i].no_urut+'">'+
						'<input type="hidden" id="tabel_nama'+respon[i].id_rekanan+'" name="tabel_nama[]" value="'+respon[i].nama+'">'+
						'<input type="hidden" id="tabel_npwp'+respon[i].id_rekanan+'" name="tabel_npwp[]" value="'+respon[i].npwp+'">'+
						'<input type="hidden" id="tabel_email'+respon[i].id_rekanan+'" name="tabel_email[]" value="'+respon[i].email+'">'+
						'<input type="hidden" id="tabel_telepon'+respon[i].id_rekanan+'" name="tabel_telepon[]" value="'+respon[i].telepon+'">'+
						'<input type="hidden" id="tabel_alamat'+respon[i].id_rekanan+'" name="tabel_alamat[]" value="'+respon[i].alamat+'">'+
						'<input type="hidden" id="tabel_norek'+respon[i].id_rekanan+'" name="tabel_norek[]" value="'+respon[i].no_rek+'">'+
						'<input type="hidden" id="tabel_kota'+respon[i].id_rekanan+'" name="tabel_kota[]" value="'+respon[i].kota+'">'
						]).draw(false);
					}
				}
			}
		})
	}
</script>

@endsection