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

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Hutang</h5>

			<div class="heading-elements">
		    	<div class="btn-group">
	            	<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
	            		<i class="icon-files-empty2"></i> Laporan<span class="caret"></span>
	            	</button>
	            	<ul class="dropdown-menu dropdown-menu-right">
						<li><a href="{{ url('hutang/laporan_hutang_pembelian') }}">Hutang Pembelian</a></li>
						<li><a href="{{ url('hutang/laporan_hutang_orderservice') }}">Hutang Order Service</a></li>
					</ul>
				</div>
	       	</div>
	    </div>
	    <div class="panel-body">
	    	@if(Session::has('flash_message_error'))
	    	<div class="alert alert-danger no-border">
				<button type="button" class="close" data-dismiss="alert"><span>×</span><span class="sr-only">Close</span></button>
				{!! session('flash_message_error') !!}
				<!-- <span class="text-semibold">Well done!</span> You successfully read <a href="#" class="alert-link">this important</a> alert message. -->
		    </div>
		    @elseif(Session::has('flash_message_success'))
		    <div class="alert alert-success no-border">
				<button type="button" class="close" data-dismiss="alert"><span>×</span><span class="sr-only">Close</span></button>
				{!! session('flash_message_success') !!}
				<!-- <span class="text-semibold">Well done!</span> You successfully read <a href="#" class="alert-link">this important</a> alert message. -->
		    </div>
		    @endif

    	<div class="tabbable">
			<ul class="nav nav-tabs nav-tabs-highlight">
				<li class="active"><a href="#basic-tab1" data-toggle="tab">Pembelian</a></li>
				<li><a href="#basic-tab2" data-toggle="tab">Order Service</a></li>
				<li><a href="#basic-tab3" data-toggle="tab">Sewa</a></li>
			</ul>

			<div class="tab-content">
				<div class="tab-pane active" id="basic-tab1">
					<!-- Hutang : Tagihan Pembelian -->
				    <table class="table table_beli table-stripped">
				    	<thead>
							<tr>
								<th>No</th>
								<th>Tanggal</th>
								<th>No. Faktur</th>
								<th>Supplier</th>
								<th>Jatuh Tempo</th>
			                    <th>Tagihan</th> 
			                    <th>Pembayaran</th> 
			                    <th>Status</th>
								<th class="text-center"></th>
							</tr>
						</thead>
						<tbody>
						
						</tbody>
				    </table>

				</div>

				<div class="tab-pane" id="basic-tab2">
					<!-- Hutang : Tagihan Order Service -->
				    <table class="table table_service table-stripped">
				    	<thead>
							<tr>
								<th>No</th>
								<th>Tanggal</th>
								<th>No. Order</th>
								<th>Penyedia</th>
			                    <th>Tagihan</th> 
			                    <th>Pembayaran</th> 
			                    <th>Status</th>
								<th class="text-center"></th>
							</tr>
						</thead>
						<tbody>
						
						</tbody>
				    </table>

				</div>

				<div class="tab-pane" id="basic-tab3">
					<!-- Hutang : Tagihan Order Service -->
				    <table class="table table_sewa table-stripped">
				    	<thead>
							<tr>
								<th>No</th>
								<th>Tanggal</th>
								<th>No. Faktur</th>
								<th>Penyedia/Pemilik</th>
			                    <th>Tagihan</th> 
			                    <th>Pembayaran</th> 
			                    <th>Status</th>
								<th class="text-center"></th>
							</tr>
						</thead>
						<tbody>
						
						</tbody>
				    </table>

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

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

<script type="text/javascript">
	var tb_pembelian;
	var tb_orderservice;
	var tb_ordersewa;
	var os;

	$(document).ready(function(){
		loadTabelPembelian();
		loadTabelOrderservice();
		loadTabelOrdersewa();
	})

	function loadTabelPembelian() {
		tb_pembelian = $(".table_beli").DataTable({
			processing: true,
	        serverSide: true,
			defferRender : true,
			searchDelay : 2000,
	        ajax: '{{ url('hutang/get_data') }}',
	        columns: [
	            {data: 'id_pembelian', name: 'id_pembelian', orderable: false, searchable: false, render : function(data, type, row, meta){
			  		return meta.row+1;
			  	}},
	            {data: 'tanggal_faktur', name: 'tanggal_faktur', render : function(tanggal_faktur){
	            	return moment(tanggal_faktur, "YYYY-MM-DD").format("DD-MM-YYYY");
	            }},
	            {data: 'no_faktur', name: 'nomor_faktur'},
	            {data: 'nama_penyedia', name: 'nama_penyedia'},
	            {data: 'tanggal_tempo', name: 'tanggal_tempo', render : function(tanggal_tempo){
	            	return moment(tanggal_tempo, "YYYY-MM-DD").format("DD-MM-YYYY");
	            }},
	            {data: 'tagihan', name: 'tagihan', searchable: false},
	            {data: 'pembayaran', name: 'pembayaran', searchable: false},
	            {data: 'status', name: 'status', orderable: false, searchable: false},
	            {data: 'aksi', name: 'aksi', orderable: false, searchable: false},
	        ],
	        createdRow: function(row, data, index) {
                $('td', row).eq(5).html(accounting.formatMoney(data.tagihan)).attr('align','right'); // 6 is index of column
                $('td', row).eq(6).html(accounting.formatMoney(data.pembayaran)).attr('align','right'); // 6 is index of column
                $('td', row).eq(8).attr('nowrap','');
                    
            },
            
		});
	}

	function loadTabelOrderservice() {
		tb_orderservice = $(".table_service").DataTable({
			processing: true,
	        serverSide: true,
			defferRender : true,
			searchDelay : 2000,
	        ajax: '{{ url('hutang/get_data_service') }}',
	        columns: [
	            {data: 'id', name: 'id', orderable: false, searchable: false, render : function(data, type, row, meta){
			  		return meta.row+1;
			  	}},
	            {data: 'tanggal_nota_formated', name: 'tanggal_nota'},
	            {data: 'no_nota', name: 'nomor_nota'},
	            {data: 'nama_penyedia', name: 'nama_penyedia'},
	            {data: 'tagihan', name: 'tagihan', searchable: false},
	            {data: 'pembayaran', name: 'pembayaran', searchable: false},
	            {data: 'status', name: 'status', orderable: false, searchable: false},
	            {data: 'aksi', name: 'aksi', orderable: false, searchable: false}
	        ],
	        createdRow: function(row, data, index) {
                $('td', row).eq(4).html(accounting.formatMoney(data.tagihan)).attr('align','right'); // 6 is index of column
                $('td', row).eq(5).html(accounting.formatMoney(data.pembayaran)).attr('align','right'); // 6 is index of column
                $('td', row).eq(7).attr('nowrap','');
                    
            },
		});
	}

	function loadTabelOrdersewa() {
		tb_ordersewa = $(".table_sewa").DataTable({
			processing: true,
	        serverSide: true,
			defferRender : true,
			searchDelay : 2000,
	        ajax: '{{ url('hutang/get_data_sewa') }}',
	        columns: [
	            {data: 'id', name: 'id', orderable: false, searchable: false, render : function(data, type, row, meta){
			  		return meta.row+1;
			  	}},
	            {data: 'tanggal_faktur_formated', name: 'tanggal_faktur'},
	            {data: 'no_faktur', name: 'no_faktur'},
	            {data: 'nama_penyedia', name: 'nama_penyedia'},
	            {data: 'tagihan', name: 'tagihan', searchable: false},
	            {data: 'pembayaran', name: 'pembayaran', searchable: false},
	            {data: 'status', name: 'status', orderable: false, searchable: false},
	            {data: 'aksi', name: 'aksi', orderable: false, searchable: false}
	        ],
	        createdRow: function(row, data, index) {
                $('td', row).eq(4).html(accounting.formatMoney(data.tagihan)).attr('align','right'); // 6 is index of column
                $('td', row).eq(5).html(accounting.formatMoney(data.pembayaran)).attr('align','right'); // 6 is index of column
                $('td', row).eq(7).attr('nowrap','');
                    
            },
		});
	}

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

@endsection