@extends('dealer.layout.master')
@section('page_title', 'Invoice/Claim (Residential)')
@section('subpage', 'Graph & Summary Report')
@section('img_profile', asset($userDetails->user_pic))
@section('login_name', $userDetails->name )
@section('last_login', $user->last_login_at )

@section('content')
	<style>
		.ui-tabs .ui-tabs-panel {
			padding: 0px !important;
		}
	</style>
	<!-- Table dealer -->
	<div class="fluid">
		<div class="widget grid12 widgetBg rightTabs">
			<div class="whead"><h6>Take Note: </h6></div>
			<div style="padding:10px; font-size: 14px; text-align: center">
				<p>Please choose <b>Year</b> & <b>Month</b> to calculate the incentives</p>
				<p style="color: red">** All the form that been activated by today, will be updated after midnight **</p>
			</div>
		</div>
	</div>

	<div class="fluid">
		<div class="widget grid12 widgetBg rightTabs">
			<div class="whead"><h6>Data Table</h6></div>
			<div class="tabs">
                <ul>
                    <li><a href="#tabs-11">Activated Form</a></li>
                </ul>

                <div id="tabs-11">
                    <ul class="tToolbar">
						<div id="link2"></div>
					</ul>
					<div id="dyn2" class="shownpars cuss">
						<a class="tOptions" title="Options"><img src="{{ url('assets/img/icons/options') }}" alt="" /></a>
						<table id="claim" cellpadding="0" cellspacing="0" border="0" class="dTable tMedia" width="100%">
							<thead>
								<tr>
									<th>#</th>
									<th>Contract</th>
									<th>W/O</th>
									<th>Activation.</th>
									<th>Name</th>
									<th>Address</th>
									<th>Package</th>
									<th>Retail Price</th>
									<th>Incentives (%)</th>
									<th>Incentives (RM)</th>
									<th>Total Incentives</th>
									<th>Claimed</th>
								</tr>
							</thead>
						</table>
					</div>
                </div>

			</div>
		</div>
	</div>
@endsection
@section('external_js')
<script>
	$(document).ready(function(){

		var origin   = window.location.origin; 
		var curr = '<?php echo $userDetails->_id ?>';
		var year = null;
		var month = null;

		var url = origin+'/Dealer/claim-residential/'+year+'/'+month;

		var tableClaim = $('#claim').DataTable({
			"bJQueryUI": false,
			"bAutoWidth": true,
			"bSort": false,
			"sPaginationType": "full_numbers",
			"sDom": '<"tablePars"fl>t<"tableFooter"ip>',
			"oLanguage": {
				"sLengthMenu": "<span class='showentries'>Show entries:</span> _MENU_"
			},
			"ordering": false,
			"serverSide": true,
			"processing": true,
			"ajax": url,
			"columns": [
				{ "data": "index","name": "index"},
				{ "data": "contract","name": "contract"},
				{ "data": "wo","name": "wo"},
				{ "data": "activation","name": "activation"},
				{ "data": "name","name": "name"},
				{ "data": "address","name": "address"},
				{ "data": "package","name": "package"}, 
				{ "data": "retail_price","name": "retail_price"}, 
				{ "data": "incentives1","name": "incentives1"}, 
				{ "data": "incentives2","name": "incentives2"}, 
				{ "data": "total","name": "total"}, 
				{ "data": "claim","name": "claim"}, 
			],	
			"columnDefs": [
			{
				"render": function ( data, type, row ) {

					if (data.indexOf("-You") >= 0) {
						var split = data.split('-');
						return '<small class="label label-info">'+split[1]+'</small>&nbsp;'+split[0];
					}else if (data.indexOf("New/") >= 0) {
						var split = data.split('/');
						return '<small class="label label-warning">'+split[0]+'</small>&nbsp;'+split[1];
					}else {
						return data;
					}
				},
				"targets": 0
			},
			{
				"render": function ( data, type, row ) {
					// return '<a class="tablectrl_medium bGold tipS ml10 modal_open" title="View Status Form" data-cid="'+data+'" onclick="showHistory(\''+data+'\')"><span class="iconb" data-icon="&#xe157;"></span></a>';
					return data;
				},
				"targets": 10
			},
			],				
		});	

		// Filter by Year & Month
		$('#fbyear,#fbmonth').on('change',function(){
			if($('#fbyear').val() != '' && $('#fbmonth').val() != ''){
				tableClaim.ajax.url( origin+'/Dealer/claim-residential/'+$('#fbyear').val()+'/'+$('#fbmonth').val() ).load();
			}else if($('#fbyear').val() == '' && $('#fbmonth').val() == ''){
				tableClaim.ajax.url( origin+'/Dealer/claim-residential/null/null' ).load();
			}
		});

	});
</script>
@endsection