@extends('market.layout.master')
@section('ptitle', 'Marketing')
@section('page_title', 'Dashboard')
@section('subpage', 'Graph & Summary Report')
@section('img_profile', asset($user->staffDetail->user_pic))
@section('login_name', $user->staffDetail->name )
@section('last_login', $user->last_login_at )

@section('content')	
	<style>
		.ui-tabs .ui-tabs-panel {
			padding: 0px !important;
		}
		.dt-buttons
		{
			background: -webkit-linear-gradient(top, #F8F8F8 0%, #EFEFEF 100%);
		}
		.icos-download
		{
			padding-top: 0px;
		}
		.buttons-excel
		{
			padding: 7px 12px;
			display: block;
			color: #808080;
			font-size: 11px;
		}
	</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 forms that have 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="link1"></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 Date</th>
									<th>Claim</th>
								</tr>
							</thead>
						</table>
					</div>
					<div class="dialog-delete" title="Enter Date & Time For Form That Already Been Claim">
				        <p id="inner-delete"></p>
				    </div>	
                </div>

			</div>
		</div>
	</div>
@endsection

@section('external_js')
<script>

	function claimA(cid,name,email) {
		var cid = cid;
		var name = name;		

		var html = '<form method="" action="';
		html   += '<table cellpadding="0" cellspacing="0" width="100%" border="0" class="tDefault tMedia" id="checkAll">';
		html   += '<tr><td><label>Date picker:</label></td>';
		html   += '<td><input type="text" name="date" class="datepicker" style="display: block; margin-left: 80px; margin-bottom: 20px;"/>';
		html   += '<tr><td><label>Time Picker:</label></td>';
		html   += '<td><input type="text" name="time" class="timepicker" size="10" style="display: inline-block; margin-top: 0px; margin-left: 12px;"/><span class="ui-datepicker-append">Use mousewheel and keyboard</span></td></tr>';
		/*html   += '<tr><td colspan="2"><input type="submit" name="submit" /></td></tr>';*/
		html   += '</table></form>';

		$('.dialog-delete').attr('data-id' , cid);
		document.getElementById("inner-delete").innerHTML = html;

		$( ".datepicker" ).datepicker({ 
			defaultDate: +7,
			showOtherMonths:true,
			autoSize: true,
			appendText: '(dd-mm-yyyy)',
			dateFormat: 'dd-mm-yy'
		});	

		$('.timepicker').timeEntry({
			show24Hours: true, // 24 hours format
			showSeconds: true, // Show seconds?
			spinnerImage: '{{url("assets/spinner.png")}}', // Arrows image
			spinnerSize: [19, 26, 0], // Image size
			spinnerIncDecOnly: true // Only up and down arrows
		});

		$('.dialog-delete').dialog('open');
		return false;
	};

	$(document).ready(function(){
		var company = '{{ $company }}';
		var origin   = window.location.origin; 
		var curr = '{{ $user->_id }}';
		var year = 'null';
		var month = 'null';

			//===== Dynamic table toolbars =====//		
			
			$('#dyn1 .tOptions').click(function () {
				$('#dyn .tablePars').slideToggle(200);
			});	
			
			$('.tOptions').click(function () {
				$(this).toggleClass("act");
			});
			
			//======= Filter data table ========//

			var table = $('#claim').DataTable({
				// "dom": 'Br<"tablePars"fl>t<"tableFooter"ip>',
		  //       "buttons": [
		  //       	{
		  //       		extend:'excel',
		  //       		name: 'excel',
		  //       		text:'<span class="icos-download"></span>Download as Excel',
		  //       		exportOptions: 
		  //       		{
		  //                   modifier: {
		  //                       sLengthMenu: 'all'
		  //                   }
		  //               }
		  //           // 'copyHtml5', 'csv', 'excelHtml5', 'pdf', 'print'
		  //       	}
		  //       ],					
				"bJQueryUI": false,
				"bAutoWidth": true,
				"bSort": false,
				"sPaginationType": "full_numbers",
				"dom": '<"tablePars"fl>t<"tableFooter"ip>',
				"oLanguage": {
					"sLengthMenu": "<span class='showentries'>Show entries:</span> _MENU_"
				},
				"ordering": false,
				"serverSide": false,
				"processing": true,
				"ajax": {
					type: 'get',
					url: "{{ url('/marketing/agent/get-claim-list') }}"+'/'+company
				},
				"columns": [				
				{ "data": "index","name": "index"},
				{ "data": "contract","name": "contract"},
				{ "data": "wo","name": "wo"},
				{ "data": "activated_dt","name": "activated_dt"},
				{ "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": "claimed","name": "claimed"},
				{ "data": "action","name": "action"},
				],	
				"columnDefs": [
				{
					"render": function ( data, type, row, meta ) {
						if (data.indexOf("New/") >= 0) {
							var split = data.split('/');
							return '<small class="label label-warning">'+split[0]+'</small>&nbsp;'+(meta.row+1)+split[1];
						}else {
							return (meta.row+1)+data;
						}
					},
					"targets": 0
				},
				 {		
					"render": function ( data, type, row ) {
						if(data != 'null' || row.claimed == ''){
							return '<a class="tablectrl_medium bLightBlue tipS" onclick="claimA(\''+data+'\',\'' + row.name + '\',\'' + row.email + '\', )" title="Claim"><span class="iconb" data-icon="&#xe003;"></span></a>'
						}else {
							return '';
						}

						return data;
						
					},
					"targets": 12
				 }
				],
			});

			$('.dialog-delete').dialog({
				autoOpen: false, 
				width: 455,
				modal: true,
				buttons: {
					"Claim": function () {
						var id = $(this).data('id');
						var date = $('.datepicker').val();
						var time = $('.timepicker').val();
						window.alert(id+" "+date+" "+time);
						$.ajax({
							type: "POST",
							url: "{{ url('/marketing/agent/update-claimdate') }}",
							data: { "_token": "{{ csrf_token() }}", id: id, date:date, time:time },
							success:function(data)
							{
								if(data == "true"){
									window.location.reload();
								}else if(data == "false"){
									alert("ERROR!! Cant Delete Agent !");
								}
							}
						});
					},

					"Cancel": function () {
						$(this).dialog("close");
						$('.dialog-delete').removeData('id');
						$('.dialog-delete').removeAttr('data-id'); 										
					}
				}
			});

			$('#fbyear,#fbmonth,#fbapps').change(function() 
			{
				if($('#fbyear').val() != '' && $('#fbmonth').val() != '' && $('#fbapps').val() == '')
				{
					var link = origin+'/marketing/download/claim/'+company+'/'+$('#fbyear').val()+'/'+$('#fbmonth').val()+'/null/pdf';
					table.ajax.url( origin+'/marketing/agent/filter/'+company+'/'+$('#fbyear').val()+'/'+$('#fbmonth').val()+'/null' ).load();
					$('#link1').html('<li><a target="_blank" href="'+link+'" title=""><span class="icos-download"></span>Download PDF</a></li>');
				}
				else if($('#fbyear').val() == 'null' && $('#fbmonth').val() == 'null' && $('#fbapps').val() == 'null')
				{
					table.ajax.url( origin+'/marketing/agent/get-claim-list/'+company ).load();
				}

				else if($('#fbyear').val() != '' && $('#fbmonth').val() != '' && $('#fbapps').val() != '')
				{
					var link = origin+'/marketing/download/claim/'+company+'/'+$('#fbyear').val()+'/'+$('#fbmonth').val()+'/'+$('#fbapps').val()+'/pdf';
					table.ajax.url( origin+'/marketing/agent/filter/'+company+'/'+$('#fbyear').val()+'/'+$('#fbmonth').val()+'/'+$('#fbapps').val() ).load();
					$('#link1').html('<li><a target="_blank" href="'+link+'" title=""><span class="icos-download"></span>Download PDF</a></li>');	
				}

				else if($('#fbyear').val() == '' && $('#fbmonth').val() == '' && $('#fbapps').val() != '')
				{
					table.ajax.url( origin+'/marketing/agent/filter/'+company+'/null/null/'+$('#fbapps').val() ).load();
				}

			$('.tipS').tipsy({gravity: 's',fade: true, html:true});
			});
		
	});

</script>
@endsection