@extends('customer-service.layout.master')
@section('ptitle','Customer Service')
@section('page_title', 'Customers & Subscribers')
@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 a { color: #636363 !important; }
		.ui-tabs .ui-tabs-nav li a:hover { color: #212121 !important; }
		.ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: #2E6B9B !important; }
		.ui-widget-content a { color: #fff; }
	</style>

	<!-- <div class="widget grid12">		
		<div class="whead"><h6>Search/Filter Submmition Form</h6></div>
		<div id="dyn1" class="responsive shownpars cuss">
			<div class="grid4">
				<div class="formRow">
					<div class="grid2">&nbsp;</div>
					<div class="grid4"><label><b>Primary Number<small style="color: red"> * </small>: </b></label><input type="text" name="phone1" id="phone1" required=""></div>
					<div class="grid4"><label><b>Secondary Number : </b></label><input type="text" name="phone2" id="phone2"></div>
					<div class="grid2">&nbsp;</div>
				</div>
			</div>
			<div class="grid4">
				<div class="formRow">
					<div class="grid2">&nbsp;</div>
					<div class="grid4"><label><b>Primary Number<small style="color: red"> * </small>: </b></label><input type="text" name="phone1" id="phone1" required=""></div>
					<div class="grid4"><label><b>Secondary Number : </b></label><input type="text" name="phone2" id="phone2"></div>
					<div class="grid2">&nbsp;</div>
				</div>
			</div>
			<div class="grid4">
				<div class="formRow">
					<div class="grid2">&nbsp;</div>
					<div class="grid4"><label><b>Primary Number<small style="color: red"> * </small>: </b></label><input type="text" name="phone1" id="phone1" required=""></div>
					<div class="grid4"><label><b>Secondary Number : </b></label><input type="text" name="phone2" id="phone2"></div>
					<div class="grid2">&nbsp;</div>
				</div>
			</div>
		</div> 				
	</div> -->

	<!-- Table dealer -->
	<div class="widget leftTabs tableTabs">
        <div class="whead"><h6>Subscriber's List  ( Resident & Business )</h6></div>
		<div class="cuss shownpars">
			<div class="tabs">
				<ul>
					<li><a href="#recs">Rectifications <small style="color:#B35D7E">( {{ $rec }} )</small></a></li>
					<li><a href="#subs">Subscribers <small style="color:#B35D7E">( {{ $re }} )</small></a></li>
					<li><a href="#buss">Business <small style="color:#B35D7E">( {{ $bu }} )</small></a></li>
				</ul>
				
				<div id="recs">
					<table id="rectification" cellpadding="0" cellspacing="0" border="0" width="100%" class="dTable tMedia">
						<thead>
							<tr>
								<th>#</th>
								<th>Submission</th>
								<th>Type Application</th>
								<th>Customer Name</th>
								<th>Contact No.</th>
								<th>Unit No.</th>
								<th>Building</th>
								<th>Street</th>
								<th>Postcode</th>
								<th>City</th>
								<th width="30">PDF</th>
								<th width="30">W/O</th>
								<th width="30">Docket</th>
							</tr>
						</thead>
					</table>
				</div>
				<div id="subs">
					<table id="residential" cellpadding="0" cellspacing="0" border="0" width="100%" class="dTable tMedia">
						<thead>
							<tr>
								<th>#</th>
								<th>Submission</th>
								<th>Type Application</th>
								<th>Customer Name</th>
								<th>Contact No.</th>
								<th>Unit No.</th>
								<th>Building</th>
								<th>Street</th>
								<th>Postcode</th>
								<th>City</th>
								<th width="30">PDF</th>
								<th width="30">W/O</th>
								<th width="30">Docket</th>
							</tr>
						</thead>
					</table>
				</div>
				<div id="buss">
					<table id="business" cellpadding="0" cellspacing="0" border="0" width="100%" class="dTable tMedia">
						<thead>
							<tr>
								<th>#</th>
								<th>Submission</th>
								<th>Type Application</th>
								<th>Customer Name</th>
								<th>Contact No.</th>
								<th>Unit No.</th>
								<th>Building</th>
								<th>Street</th>
								<th>Postcode</th>
								<th>City</th>
								<th width="30">PDF</th>
								<th width="30">W/O</th>
								<th width="30">Docket</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
    </div> 
@endsection

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

		var origin   = window.location.origin; 

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

			var table1 = $('#rectification').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('/customer-service/get-all-rectification/null/null/null') }}",
				"columns": [
					{ "data": "formT","name": "formT"},
					{ "data": "submittion","name": "submittion"},
					{ "data": "type","name": "type"},
					{ "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": "action1","name": "action1"}, 
					{ "data": "action2","name": "action2"},
					{ "data": "action3","name": "action3"}, 
				],	
				 "columnDefs": [
				 	{
						"render": function ( data, type, row ) {
							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 ) {
							if (data.indexOf("D/") >= 0) {
								var split = data.split('/');
								return '<small class="label label-purple">'+split[0]+'</small> &nbsp;'+split[1];
							}else {
								return data;
							}
						},
						"targets": 3
					},
					{
						"render": function ( data, type, row ) {
							if (data.indexOf("R/") >= 0) {
								var split = data.split('/');
								var link = "{{ url('/customer-service/residential/generate-pdf') }}"+"/"+split[1];
								return '<a href="'+link+'" target="_blank" class="tablectrl_medium bPurple tipS" title="View Subscribers"><span class="iconb" data-icon=""></span></a>';
							}else if (data.indexOf("B/") >= 0){
								var split = data.split('/');
								var link = "{{ url('/customer-service/business/generate-pdf') }}"+"/"+split[1];
								return '<a href="'+link+'" target="_blank" class="tablectrl_medium bPurple tipS" title="View Subscribers"><span class="iconb" data-icon=""></span></a>';
							}
						},
						"targets": 10
					},
					{
						"render": function ( data, type, row ) {
							if (data != 'null') {
								var link = "{{ url('/customer-service/work-order/generate-pdf') }}"+"/"+data;
								return '<a href="'+link+'" target="_blank" class="tablectrl_medium bGold tipS" title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}else {
								return '';
							}
						},
						"targets": 11
					},
					{
						"render": function ( data, type, row ) {
							if (data != 'null') {
								var link = "{{ url('/customer-service/docket/generate-pdf') }}"+"/"+data;
								return '<a href="'+link+'" target="_blank" class="tablectrl_medium bGreen tipS" title="View Docket PDF"><span class="iconb" data-icon=""></span></a>';
							}else {
								return '';
							}
						},
						"targets": 12
					}
				],			
			});	

			var table2 = $('#residential').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('/customer-service/get-all-residential/null/null/null') }}",
				"columns": [
					{ "data": "formT","name": "formT"},
					{ "data": "submittion","name": "submittion"},
					{ "data": "type","name": "type"},
					{ "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": "action1","name": "action1"}, 
					{ "data": "action2","name": "action2"},
					{ "data": "action3","name": "action3"}, 
				],	
				 "columnDefs": [
				 	{
						"render": function ( data, type, row ) {
							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 ) {
							if (data.indexOf("D/") >= 0) {
								var split = data.split('/');
								return '<small class="label label-purple">'+split[0]+'</small> &nbsp;'+split[1];
							}else {
								return data;
							}
						},
						"targets": 3
					},
					{
						"render": function ( data, type, row ) {
							if (data.indexOf("R/") >= 0) {
								var split = data.split('/');
								var link = "{{ url('/customer-service/residential/generate-pdf') }}"+"/"+split[1];
								return '<a href="'+link+'" target="_blank" class="tablectrl_medium bPurple tipS" title="View Subscribers"><span class="iconb" data-icon=""></span></a>';
							}else if (data.indexOf("B/") >= 0){
								var link = "{{ url('/customer-service/business/generate-pdf') }}"+"/"+data;
								return '<a href="'+link+'" target="_blank" class="tablectrl_medium bPurple tipS" title="View Subscribers"><span class="iconb" data-icon=""></span></a>';
							}
						},
						"targets": 10
					},
					{
						"render": function ( data, type, row ) {
							if (data != 'null') {
								var link = "{{ url('/customer-service/work-order/generate-pdf') }}"+"/"+data;
								return '<a href="'+link+'" target="_blank" class="tablectrl_medium bGold tipS" title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}else {
								return '';
							}
						},
						"targets": 11
					},
					{
						"render": function ( data, type, row ) {
							if (data != 'null') {
								var link = "{{ url('/customer-service/docket/generate-pdf') }}"+"/"+data;
								return '<a href="'+link+'" target="_blank" class="tablectrl_medium bGreen tipS" title="View Docket PDF"><span class="iconb" data-icon=""></span></a>';
							}else {
								return '';
							}
						},
						"targets": 12
					}
				],			
			});	

			var table3 = $('#business').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('/customer-service/get-all-business/null/null/null') }}",
				"columns": [
					{ "data": "formT","name": "formT"},
					{ "data": "submittion","name": "submittion"},
					{ "data": "type","name": "type"},
					{ "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": "action1","name": "action1"}, 
					{ "data": "action2","name": "action2"},
					{ "data": "action3","name": "action3"}, 
				],	
				 "columnDefs": [
				 	{
						"render": function ( data, type, row ) {
							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 ) {
							if (data.indexOf("D/") >= 0) {
								var split = data.split('/');
								return '<small class="label label-purple">'+split[0]+'</small> &nbsp;'+split[1];
							}else {
								return data;
							}
						},
						"targets": 3
					},
					{
						"render": function ( data, type, row ) {
							if (data.indexOf("R/") >= 0) {
								var split = data.split('/');
								var link = "{{ url('/customer-service/residential/generate-pdf') }}"+"/"+split[1];
								return '<a href="'+link+'" target="_blank" class="tablectrl_medium bPurple tipS" title="View Subscribers"><span class="iconb" data-icon=""></span></a>';
							}else if (data.indexOf("B/") >= 0){
								var split = data.split('/');
								var link = "{{ url('/customer-service/business/generate-pdf') }}"+"/"+split[1];
								return '<a href="'+link+'" target="_blank" class="tablectrl_medium bPurple tipS" title="View Subscribers"><span class="iconb" data-icon=""></span></a>';
							}
						},
						"targets": 10
					},
					{
						"render": function ( data, type, row ) {
							if (data != 'null') {
								var link = "{{ url('/customer-service/work-order/generate-pdf') }}"+"/"+data;
								return '<a href="'+link+'" target="_blank" class="tablectrl_medium bGold tipS" title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}else {
								return '';
							}
						},
						"targets": 11
					},
					{
						"render": function ( data, type, row ) {
							if (data != 'null') {
								var link = "{{ url('/customer-service/docket/generate-pdf') }}"+"/"+data;
								return '<a href="'+link+'" target="_blank" class="tablectrl_medium bGreen tipS" title="View Docket PDF"><span class="iconb" data-icon=""></span></a>';
							}else {
								return '';
							}
						},
						"targets": 12
					}
				],			
			});	

			/*** Filter ***/
			$('#fbtype,#fbbuilding,#fbdealer').on('change', function() {
				var link1 = "{{ url('/customer-service/get-all-rectification') }}" +"/"+$('#fbtype').val()+"/"+$('#fbbuilding').val()+"/"+$('#fbdealer').val();
				table1.ajax.url( link1 ).load();

				var link2 = "{{ url('/customer-service/get-all-residential') }}" +"/"+$('#fbtype').val()+"/"+$('#fbbuilding').val()+"/"+$('#fbdealer').val();
				table2.ajax.url( link2 ).load();

				var link3 = "{{ url('/customer-service/get-all-business') }}" +"/"+$('#fbtype').val()+"/"+$('#fbbuilding').val()+"/"+$('#fbdealer').val();
				table2.ajax.url( link3 ).load();
			});
		});
	</script>
@endsection