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

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Pelanggan</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" type="button" id="btn_tambah_pelanggan">Tambah</button>
	    </div>
	    <table class="table table-striped table_pelanggan">
	    	<thead>
				<tr>
					<th>No</th>
					<th>Nama</th>
					<th>Alamat</th>
					<th class="text-center">Aksi</th>
				</tr>
			</thead>
			
	    </table>
	</div>
</div>

<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
	    <div class="modal-content">
	    	<div class="modal-header">
	    		<h5 class="modal-title" id="exampleModalLabel">Data Pelanggan</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="" autocomplete="off">
	      			<div class="row">
	      				<div class="col-sm-6 col-md-6">
	      			<input type="hidden" name="popup_id">
	      			<!-- <div class="form-group">
	      				<label class="control-label col-sm-4">Kode Pelanggan </label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_kode" class="form-control">
	      				</div>
	      			</div> -->
	      			<div class="form-group">
	      				<label class="control-label">Nama Toko </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">PIC </label>
	      				<!-- <div class="col-sm-8"> -->
	      					<input type="text" name="popup_pic" class="form-control">
	      				<!-- </div> -->
	      			</div>
	      			
	      			<div class="form-group">
	      				<label class="control-label">Alamat</label>
	      				<!-- <div class="col-sm-8"> -->
	      					<textarea class="form-control" name="popup_alamat"></textarea>
	      				<!-- </div> -->
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label">Kota</label>
	      				<!-- <div class="col-sm-8"> -->
	      					<select class="form-control selectize" name="popup_kota" >
	      						<option value="">--- Pilih Kota ---</option>
	      						@foreach($kabupaten->get() as $kabupaten)
	      						<option value="{{ $kabupaten->nama}}">{{ $kabupaten->nama}}</option>
	      						@endforeach
	      					</select>
	      				<!-- </div> -->
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label">Status</label>
	      				<!-- <div class="col-sm-8"> -->
	      					<select class="form-control" name="popup_status">
	      						<option value="1">Agen / Distributor</option>
	      						<option value="2">Pelanggan Biasa</option>
	      					</select>
	      				<!-- </div> -->
	      			</div>

		      		</div>

		      		<div class="col-sm-6 col-md-6">
		      			<div class="form-group">
		      				<label class="control-label">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">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">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">No.Rek</label>
		      				<!-- <div class="col-sm-8"> -->
		      					<textarea name="popup_norek" class="form-control"></textarea>
		      				<!-- </div> -->
		      			</div>
		      		</div>
		      	</div> <!-- end .row -->

					<hr />
				<div class="row">
					
					<div class="col-sm-6 col-md-6">
						<div class="form-group">
							{{ Form::label("Akun Piutang", "", ['class'=>'control-label']) }}
							{{ Form::select("popup_id_akun_piutang", $akun, [], ['class'=>'control-label select-search']) }}
						</div>
					</div>

				</div> <!-- end .row -->
	      			
	      		</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 tb;

	$(document).ready(function(){
		tb = $(".table_pelanggan").DataTable({
			processing: true,
	        serverSide: true,
	        ajax: '{{ url('pelanggan/tampil') }}',
	        columns: [
	            {data: 'rownum', name: 'rownum', orderable: false, searchable: false, render : function(data, type, row, meta){
			  		return meta.row+1;
			  	}},
	            {data: 'nama', name: 'nama'},
	            {data: 'alamat', name: 'alamat'},
	            {data: 'aksi', name: 'aksi', orderable: false, searchable: false}
	        ],
		});

		
	})

	$("#btn_tambah_pelanggan").click(function(){
		$("[name=popup_id]").val('');
		$("[name=popup_kode]").val('');
		$("[name=popup_nama]").val('');
		$("[name=popup_pic]").val('');
		$("[name=popup_npwp]").val('');
		$("[name=popup_email]").val('');
		$("[name=popup_telepon]").val('');
		$("[name=popup_alamat]").val('');
		/*var $select = $("[name=popup_kota]").selectize();
		var selectize = $select[0].selectize;
		selectize.setValue('');*/
		$("[name=popup_kota]").selectize()[0].selectize.setValue('');
		$("[name=popup_norek]").val('');
		$("select[name=popup_id_akun_piutang]").val('').change();

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

	

	function get_pelanggan(){
		$.ajax({
			url: "{{ url('pelanggan/tampil')}}  ",
			type: 'get',
			dataType: 'json',
			success: function(respon){
				tb.clear().draw();
				for(i in respon){
					tb.row.add(['<div></div>',
						'<div><center>'+respon[i].nama+'</center></div>',
						'<div><center>'+respon[i].alamat+'</center></div>',
						'<div><center>'+respon[i].aksi+'</center></div>'+
						'<input type="hidden" id="table_id'+respon[i].id_pelanggan+'" value="'+respon[i].id_pelanggan+'">'+
						'<input type="hidden" id="table_kode'+respon[i].id_pelanggan+'" value="'+respon[i].kode+'">'+
						'<input type="hidden" id="table_nama'+respon[i].id_pelanggan+'" value="'+respon[i].nama+'">'+
						'<input type="hidden" id="table_pic'+respon[i].id_pelanggan+'" value="'+respon[i].pic+'">'+
						'<input type="hidden" id="table_npwp'+respon[i].id_pelanggan+'" value="'+respon[i].npwp+'">'+
						'<input type="hidden" id="table_email'+respon[i].id_pelanggan+'" value="'+respon[i].email+'">'+
						'<input type="hidden" id="table_telepon'+respon[i].id_pelanggan+'" value="'+respon[i].telepon+'">'+
						'<input type="hidden" id="table_alamat'+respon[i].id_pelanggan+'" value="'+respon[i].alamat+'">'+
						'<input type="hidden" id="table_kota'+respon[i].id_pelanggan+'" value="'+respon[i].id_kab+'">'+
						'<input type="hidden" id="table_no_rek'+respon[i].id_pelanggan+'" value="'+respon[i].no_rek+'">'+
						'<input type="hidden" id="table_status'+respon[i].id_pelanggan+'" value="'+respon[i].status+'">'+
						'<input type="hidden" id="table_id_akun_piutang'+respon[i].id_akun_piutang+'" value="'+respon[i].status+'">'
						]).draw(false);
				}
			}
		})
	}

	

	function edit_pelanggan(id){
		var id = $("#table_id"+id).val();
		// var kode = $("#table_kode"+id).val();
		var nama = $("#table_nama"+id).val();
		var pic = $("#table_pic"+id).val();
		var npwp = $("#table_npwp"+id).val();
		var email = $("#table_email"+id).val();
		var telepon = $("#table_telepon"+id).val();
		var alamat = $("#table_alamat"+id).val();
		var kota = $("#table_kota"+id).val();
		var norek = $("#table_no_rek"+id).val();
		var status = $("#table_status"+id).val();
		var id_akun_piutang = $("#table_id_akun_piutang"+id).val();
		$("[name=popup_id]").val(id);
		/*$("[name=popup_kode]").val(kode);*/
		$("[name=popup_nama]").val(nama);
		$("[name=popup_pic]").val(pic);
		$("[name=popup_npwp]").val(npwp);
		$("[name=popup_email]").val(email);
		$("[name=popup_telepon]").val(telepon);
		$("[name=popup_alamat]").val(alamat);

		// $("[name=popup_kota]").val(kota);
		
		var $popkota = $("select[name=popup_kota]").selectize();
		var popupkota = $popkota[0].selectize;
		popupkota.setValue(kota);
		

		$("[name=popup_norek]").val(norek);
		$("[name=popup_status]").val(status);
		$("select[name=popup_id_akun_piutang]").val(id_akun_piutang).change();

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

	}

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

	$("#btn_popup_simpan").click(function(){
		var id = $("[name=popup_id]").val();
		/*var kode = $("[name=popup_kode]").val();*/
		var nama = $("[name=popup_nama]").val();
		var pic = $("[name=popup_pic]").val();
		var npwp = $("[name=popup_npwp]").val();
		var email = $("[name=popup_email]").val();
		var telp = $("[name=popup_telepon]").val();
		var norek = $("[name=popup_norek]").val();
		var alamat = $("[name=popup_alamat]").val();
		var status = $("[name=popup_status]").val();
		var kota = $("[name=popup_kota]").val();
		var id_akun_piutang = $("select[name=popup_id_akun_piutang]").val();

		if(nama != '' && kota != '' && status != ''){
			$.ajax({
				url: "{{ url('pelanggan/simpan')}} ",
				type: 'post',
				data: {id : id, nama : nama, pic:pic, npwp:npwp, email:email, telp:telp, norek:norek, alamat:alamat, status:status, kota:kota, id_akun_piutang:id_akun_piutang},
				headers : {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				success: function(respon){
					tb.ajax.reload();
					$("#exampleModal").modal('hide');
				}
			})
		}
	})
</script>

@endsection