allo/resources/views/sales/application-form-list.blade.php

@extends('sales.layout.master')
@section('page_title', 'Subscription Form List')
@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-nav li.ui-tabs-active a { color: #EA5730 !important; }
		.ui-widget-content .bRed { color: #fff !important; }
		.ui-tabs .ui-tabs-panel{padding:0px;}
		.modal_open{color: #fff !important;}
	</style>
	<!-- Table dealer -->
	<div class="fluid">
		<div class="widget grid12">
			<div class="whead"><h6>Subscription Form List</h6></div>
			<div id="dyn1" class="cuss shownpars">
				
				<div class="tabs">
					<ul>
						<li><a href="#new">New</a></li>
						<li><a href="#pending">Pending</a></li>
						<li><a href="#completed">Completed<a></li>
					</ul>
					
					<div id="new" class="table=-responsive">
						<table id="newList" cellpadding="0" cellspacing="0" border="0" class="dTable tMedia" width="100%">
							<thead>
								<tr>
									<th>#</th>
									<th>Cust.Name</th>
									<th>Contact No.</th>
									<th width="80">Unit No.</th>
									<th>Building</th>
									<th>Street</th>
									<th>Postcode</th>
									<th>City</th>
									<th>Agent</th>
									<th width="40">Actions</th>
								</tr>
							</thead>
						</table>
					</div>
					<div id="pending">
						<table id="pendingList" cellpadding="0" cellspacing="0" border="0" class="dTable tMedia" width="100%">
							<thead>
								<tr>
									<th>#</th>
									<th>Cust.Name</th>
									<th>Contact No.</th>
									<th width="80">Unit No.</th>
									<th>Building</th>
									<th>Street</th>
									<th>Postcode</th>
									<th>City</th>
									<th>Agent</th>
									<th width="40">Actions</th>
								</tr>
							</thead>
						</table>
					</div>
					<div id="completed">
						<table id="completeList" cellpadding="0" cellspacing="0" border="0" class="dTable tMedia" width="100%">
							<thead>
								<tr>
									<th>#</th>
									<th>W/O</th>
									<th>Docket</th>
									<th>Activated</th>
									<th>Cust.Name</th>
									<th>Contact No.</th>
									<th>Unit No.</th>
									<th>Building</th>
									<th>Street</th>
									<th>Postcode</th>
									<th>City</th>
									<th>Agent</th>
									<th>Actions</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div> 
		
		<!-- Dialog content -->    
        <div id="customDialog" class="customDialog" title="Status Form">
			<div id="data-history"></div>
        </div>
	</div>
@endsection
@section('external_js')
<script>

	function showHistory(cid) {
		var origin   = window.location.origin; 
		var cid = cid;

		$.ajax({
			type: "GET",
			url: origin+'/sales/history/'+cid,
			dataType: "json",
			success:function(data){
				var table = '<table cellpadding="0" cellspacing="0" width="100%" class="tDefault checkAll tMedia" id="checkAll">';
				table += '<thead><tr>';
				table += '<td width="130" class="sortCol"><div>Date<span></span></div></td>';
				table += '<td width="120">Status</td>';
				table += '<td class="sortCol"><div>Description<span></span></div></td>';
				table += '</tr></thead><tbody></tbody></table>';
				$('#data-history').html(table);
				console.log(data)
				$.each(data, function(index, element) {
					$('#checkAll tbody').append('<tr><td>' + element.date + '</td><td class="textL">' + element.status + '</td><td class="textL">' + element.desc + '</td></tr>');
				});
			}
		});

		$('#customDialog').dialog('open');
		return false;
	};

	$(document).ready(function(){

		var origin   = window.location.origin; 
		var curr = '<?php echo $user->_id ?>';

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

			$('#newList').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('/sales/get-application-list1') }}",
				"columns": [
					{ "data": "index","name": "index"},
					{ "data": "name","name": "name"},
					{ "data": "phone","name": "phone"},
					{ "data": "unit","name": "unit"},
					{ "data": "building","name": "building"},
					{ "data": "street","name": "street"},
					{ "data": "postcode","name": "postcode"}, 
					{ "data": "city","name": "city"}, 
					{ "data": "sales","name": "sales"}, 
					{ "data": "action","name": "action"}, 
				],	
				"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>';
						},
						"targets": 9
					},
				],				
			});	

			$('#pendingList').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('/sales/get-application-list2') }}",
				"columns": [
					{ "data": "index","name": "index"},
					{ "data": "name","name": "name"},
					{ "data": "phone","name": "phone"},
					{ "data": "unit","name": "unit"},
					{ "data": "building","name": "building"},
					{ "data": "street","name": "street"},
					{ "data": "postcode","name": "postcode"}, 
					{ "data": "city","name": "city"}, 
					{ "data": "sales","name": "sales"}, 
					{ "data": "action","name": "action"}, 
				],	
				"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
					},
					{
						"width":"60px",
						"targets": 2
						
					},
					{
						"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>';
						},
						"targets": 9
					},
				],				
			});	

			var completed = $('#completeList').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('/sales/get-application-list3/null/null') }}",
				"columns": [
					{ "data": "index","name": "index"},
					{ "data": "wo","name": "wo"},
					{ "data": "do","name": "do"},
					{ "data": "activated","name": "activated"},
					{ "data": "name","name": "name"},
					{ "data": "phone","name": "phone"},
					{ "data": "unit","name": "unit"},
					{ "data": "building","name": "building"},
					{ "data": "street","name": "street"},
					{ "data": "postcode","name": "postcode"}, 
					{ "data": "city","name": "city"}, 
					{ "data": "sales","name": "sales"}, 
					{ "data": "action","name": "action"}, 
				],	
				"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>';
						},
						"targets": 12
					},
				],				
			});	

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

			// Filter by Year & Month
			$('#fbyear,#fbmonth').on('change',function(){
				if($('#fbyear').val() == '' && $('#fbmonth').val() == ''){

					completed.ajax.url( origin+'/sales/get-application-list3/null/null' ).load();

				}else if($('#fbyear').val() != '' && $('#fbmonth').val() != ''){

					completed.ajax.url( origin+'/sales/get-application-list3/'+$('#fbyear').val()+'/'+$('#fbmonth').val() ).load();

				}
			});

			
			// Dialog
			$('#customDialog').dialog({
				autoOpen: false,
				width: 650,
				modal: true,
				buttons: {
					"Close": function () {
						$(this).dialog("close");
					}
				}
			});
		});
	</script>
@endsection