@extends('customer-service.layout.master')
@section('ptitle','Customer Service')
@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-nav li.ui-tabs-active a { color: #EA5730 !important; }
		.ui-widget-content .bRed { color: #fff !important; }
		.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; }
		.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 work order -->
	<div class="widget">
        <div class="whead"><h6>Important Note</h6></div>
		<div class="formRow cussPayment">
			<div class="grid-12">
				<label style="font-size: 14px;">To create the <b>Appointment Date</b> for customer in <b>Success Non Prelaid</b>, just click the <b>Button</b> color <b>Blue</b></label>
			</div>
		</div>
    </div> 
    <div class="widget leftTabs tableTabs">
        <div class="whead"><h6>Work Order's Data Table</h6></div>
		<div class="cuss shownpars responsive">
			<div class="tabs">
				<ul>
					<li><a href="#nwo">Pending Contractor <small style="color:#B35D7E">({{ $pc }})</small></a></li>
					<li><a href="#pps">Pending Non Prelaid <small style="color:#B35D7E">({{ $pp }})</small></a></li>
					<li><a href="#sps">Success Non Prelaid <small style="color:#B35D7E">({{ $sp }})</small></a></li>
					<li><a href="#pending">Pending Installer <small style="color:#B35D7E">({{ $pi }})</small></a></li>
					<li><a href="#resc">Reschedule <small style="color:#B35D7E">({{ $rs }})</small></a></li>
					<li><a href="#suspend">Suspend <small style="color:#B35D7E">({{ $ss }})</small></a></li>
					<li><a href="#completed">Completed <small style="color:#B35D7E">({{ $cm }})</small></a></li>
					<li><a href="#cancel">Cancelled <small style="color:#B35D7E">({{$cance}})</small></a></li>
				</ul>
				
				<div id="nwo">
					<table id="cont" cellpadding="0" cellspacing="0" border="0" width="100%" class="dTable tMedia">
						<thead>
							<tr>
								<th>#</th>
								<th width="40">Service</th>
								<th width="40">W/O</th>
								<th width="60">Cust.Name</th>
								<th width="100">Contact No.</th>
								<th width="60">Unit No.</th>
								<th>Building</th>
								<th>City</th>
								<th>Package</th>
								<th>Contractor</th>
								<th>Installer</th>
								<th>Date</th>
								<th width="60">Time</th>
								<th>Status</th>
								<th width="120">Actions</th>
							</tr>
						</thead>
					</table>
				</div>
				<div id="pps">
					<table id="pnon" cellpadding="0" cellspacing="0" border="0" width="100%" class="dTable tMedia">
						<thead>
							<tr>
								<th>#</th>
								<th width="40">Service</th>
								<th width="40">W/O</th>
								<th width="60">Cust.Name</th>
								<th width="100">Contact No.</th>
								<th>Unit No.</th>
								<th>Building</th>
								<th>City</th>
								<th>Package</th>
								<th>Contractor</th>
								<th>Installer</th>
								<th>Date</th>
								<th width="60">Time</th>
								<th>Status</th>
								<th width="100">Actions</th>
							</tr>
						</thead>
					</table>
				</div>
				<div id="sps">
					<table id="snon" cellpadding="0" cellspacing="0" border="0" width="100%" class="dTable tMedia">
						<thead>
							<tr>
								<th>#</th>
								<th width="40">Service</th>
								<th width="40">W/O</th>
								<th width="60">Cust.Name</th>
								<th width="100">Contact No.</th>
								<th width="60">Unit No.</th>
								<th>Building</th>
								<th>City</th>
								<th>Package</th>
								<th>Contractor</th>
								<th>Installer</th>
								<th>Date</th>
								<th width="60">Time</th>
								<th>Status</th>
								<th width="120">Actions</th>
							</tr>
						</thead>
					</table>
				</div>
				<div id="pending">
					<table id="pinst" cellpadding="0" cellspacing="0" border="0" width="100%" class="dTable tMedia">
						<thead>
							<tr>
								<th>#</th>
								<th width="40">Service</th>
								<th width="40">W/O</th>
								<th width="60">Cust.Name</th>
								<th width="100">Contact No.</th>
								<th width="60">Unit No.</th>
								<th>Building</th>
								<th>City</th>
								<th>Package</th>
								<th>Contractor</th>
								<th>Installer</th>
								<th>Date</th>
								<th width="60">Time</th>
								<th>Status</th>
								<th width="120">Actions</th>
							</tr>
						</thead>
					</table>
				</div>
				<div id="resc">
					<table id="sche" cellpadding="0" cellspacing="0" border="0" width="100%" class="dTable tMedia">
						<thead>
							<tr>
								<th>#</th>
								<th width="40">Service</th>
								<th width="40">W/O</th>
								<th width="60">Cust.Name</th>
								<th width="100">Contact No.</th>
								<th width="60">Unit No.</th>
								<th>Building</th>
								<th>City</th>
								<th>Package</th>
								<th>Contractor</th>
								<th>Installer</th>
								<th>Date</th>
								<th width="60">Time</th>
								<th>Installer's Remark</th>
								<th width="100">Actions</th>
							</tr>
						</thead>
					</table>
				</div>
				<div id="suspend">
					<table id="susp" cellpadding="0" cellspacing="0" border="0" width="100%" class="dTable tMedia">
						<thead>
							<tr>
								<th>#</th>
								<th width="40">Service</th>
								<th width="40">W/O</th>
								<th width="60">Cust.Name</th>
								<th width="100">Contact No.</th>
								<th width="60">Unit No.</th>
								<th>Building</th>
								<th>City</th>
								<th>Package</th>
								<th>Contractor</th>
								<th>Installer</th>
								<th>Date</th>
								<th width="60">Time</th>
								<th>Installer's Remark</th>
								<th width="100">Actions</th>
							</tr>
						</thead>
					</table>
				</div>
				<div id="completed">
					<table id="comp" cellpadding="0" cellspacing="0" border="0" width="100%" class="dTable tMedia">
						<thead>
							<tr>
								<th>#</th>
								<th width="40">Service</th>
								<th width="40">W/O</th>
								<th width="60">Cust.Name</th>
								<th width="100">Contact No.</th>
								<th width="60">Unit No.</th>
								<th>Building</th>
								<th>City</th>
								<th>Package</th>
								<th>Contractor</th>
								<th>Installer</th>
								<th>Date</th>
								<th width="60">Time</th>
								<th>Status</th>
								<th>Docket</th>
								<th width="40">Actions</th>
							</tr>
						</thead>
					</table>
				</div>
				<div id="cancel">
					<table id="canc" cellpadding="0" cellspacing="0" border="0" width="100%" class="dTable tMedia">
						<thead>
							<tr>
								<th>#</th>
								<th width="40">Service</th>
								<th width="40">W/O</th>
								<th width="60">Cust.Name</th>
								<th width="100">Contact No.</th>
								<th width="60">Unit No.</th>
								<th>Building</th>
								<th>City</th>
								<th>Package</th>
								<th>Contractor</th>
								<th>Installer</th>
								<th>Date</th>
								<th width="60">Time</th>
								<th>Status</th>
								<th width="100">Actions</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
		
		<div class="dialog-delete" title="Delete Work Order">
            <p id="inner-delete"></p>
        </div>
    </div> 
@endsection

@section('external_js')
<script>
	function deleteA(cid,wo) {
		var cid = cid;
		var wo = wo;

		$('.dialog-delete').attr('data-id' , cid); 
		document.getElementById("inner-delete").innerHTML = "<p>Are you sure want to delete this W/O ( " + wo + " )?</p>";

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

	//===== Modal =====//
	$('.dialog-delete').dialog({
		autoOpen: false, 
		width: 400,
		modal: true,
		buttons: {
			"Yes!": function () {
			var id = $(this).data('id');
			// window.alert(email);
			$.ajax({
				type: "POST",
				url: "{{ url('/customer-service/delete-work-order') }}",
				// "_token": "{{ csrf_token() }}",
				data: { "_token": "{{ csrf_token() }}", id: id },
					success:function(data)
					{
						if(data == "true"){
							window.location.reload();
						}else if(data == "false"){
							alert("ERROR!! Cant Delete W/O !");
						}
					}
				});
			},
			"Cancel": function () {
				$(this).dialog("close");
				$('.dialog-delete').removeAttr('data-id'); 
			}
		}
	});	

	$(document).ready(function(){

		var origin   = window.location.origin; 
		var positionRoles = '{{ $user->StaffDetail->position }}';

			//===== Dynamic table toolbars =====//		
			
			$('#dyn1 .tOptions').click(function () {
				$('#dyn .tablePars').slideToggle(200);
			});	
			
			$('.tOptions').click(function () {
				$(this).toggleClass("act");
			});
			
			//======= Filter data table ========//
			var table1 = $('#cont').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-pending-contractor/null/null/null') }}",
				"columns": [
					{ "data": "formT","name": "formT"},
					{ "data": "service","name": "service"},
					{ "data": "wo","name": "wo"},
					{ "data": "name","name": "name"},
					{ "data": "phone","name": "phone"},
					{ "data": "unit","name": "unit"},
					{ "data": "building","name": "building"},
					{ "data": "city","name": "city"},
					{ "data": "package", "name": "package"},
					{ "data": "contractor","name": "contractor"},
					{ "data": "installer","name": "installer"}, 
					{ "data": "date","name": "date"},
					{ "data": "time","name": "time"}, 
					{ "data": "status","name": "status"}, 
					{ "data": "action","name": "action"}, 
				],	
				 "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
					},
					{
						"width":"60px",
						"targets": 2
					},
					{
						"render": function ( data, type, row ) {
							var link1 = "{{ url('/customer-service/work-order/edit') }}"+"/"+data;
							var link2 = "{{ url('/customer-service/work-order/reschedule') }}"+"/"+data;
							var link3 = "{{ url('/customer-service/work-order/generate-pdf') }}"+"/"+data;
							if(positionRoles == 'Customer Service'){
							return '<a href="'+link1+'" class="tablectrl_medium bGreen tipS" original-title="Edit Detail W/O"><span class="iconb" data-icon=""></span></a> <a href="'+link2+'" class="tablectrl_medium bBlue tipS" original-title="Reassign/Change Datetime W/O"><span class="iconb" data-icon=""></span></a> <a target="_blank" href="'+link3+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a> <a class="tablectrl_medium bRed tipS delModule" onclick="deleteA(\''+row.wo+'\',\'' + row.wo + '\', )" title="Delete W/O"><span class="iconb" data-icon="&#xe136;"></span></a>';
							}else {
								return '<a target="_blank" href="'+link3+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}
						},
						"targets": 14
					}
				],			
			});	

			var table2 = $('#pnon').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-pending-non/null/null/null') }}",
				"columns": [
					{ "data": "formT","name": "formT"},
					{ "data": "service","name": "service"},
					{ "data": "wo","name": "wo"},
					{ "data": "name","name": "name"},
					{ "data": "phone","name": "phone"},
					{ "data": "unit","name": "unit"},
					{ "data": "building","name": "building"},
					{ "data": "city","name": "city"},
					{ "data": "package", "name": "package"},
					{ "data": "contractor","name": "contractor"},
					{ "data": "installer","name": "installer"}, 
					{ "data": "date","name": "date"},
					{ "data": "time","name": "time"}, 
					{ "data": "status","name": "status"}, 
					{ "data": "action","name": "action"}, 
				],	
				 "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 ) {
							var link1 = "{{ url('/customer-service/work-order/edit') }}"+"/"+data;
							var link2 = "{{ url('/customer-service/work-order/generate-pdf') }}"+"/"+data;
							if(positionRoles == 'Customer Service'){
								return '<a href="'+link1+'" class="tablectrl_medium bGreen tipS" original-title="Edit Detail W/O"><span class="iconb" data-icon=""></span></a> <a target="_blank" href="'+link2+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}else {
								return '<a target="_blank" href="'+link2+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}
						},
						"targets": 14
					}
				],			
			});	

			var table3 = $('#snon').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-success-non/null/null/null') }}",
				"columns": [
					{ "data": "formT","name": "formT"},
					{ "data": "service","name": "service"},
					{ "data": "wo","name": "wo"},
					{ "data": "name","name": "name"},
					{ "data": "phone","name": "phone"},
					{ "data": "unit","name": "unit"},
					{ "data": "building","name": "building"},
					{ "data": "city","name": "city"},
					{ "data": "package", "name": "package"},
					{ "data": "contractor","name": "contractor"},
					{ "data": "installer","name": "installer"}, 
					{ "data": "date","name": "date"},
					{ "data": "time","name": "time"}, 
					{ "data": "status","name": "status"}, 
					{ "data": "action","name": "action"}, 
				],	
				 "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 ) {
							var link1 = "{{ url('/customer-service/work-order/edit') }}"+"/"+data;
							var link2 = "{{ url('/customer-service/work-order/reschedule') }}"+"/"+data;
							var link3 = "{{ url('/customer-service/work-order/generate-pdf') }}"+"/"+data;
							if(positionRoles == 'Customer Service'){
							return '<a href="'+link1+'" class="tablectrl_medium bGreen tipS" original-title="Edit Detail W/O"><span class="iconb" data-icon=""></span></a> <a href="'+link2+'" class="tablectrl_medium bBlue tipS" original-title="Reassign/Change Datetime W/O"><span class="iconb" data-icon=""></span></a> <a target="_blank" href="'+link3+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}else{
								return '<a target="_blank" href="'+link3+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}
						},
						"targets": 14
					}
				],			
			});	

			var table4 = $('#pinst').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-pending-installer/null/null/null') }}",
				"columns": [
					{ "data": "formT","name": "formT"},
					{ "data": "service","name": "service"},
					{ "data": "wo","name": "wo"},
					{ "data": "name","name": "name"},
					{ "data": "phone","name": "phone"},
					{ "data": "unit","name": "unit"},
					{ "data": "building","name": "building"},
					{ "data": "city","name": "city"},
					{ "data": "package", "name": "package"},
					{ "data": "contractor","name": "contractor"},
					{ "data": "installer","name": "installer"}, 
					{ "data": "date","name": "date"},
					{ "data": "time","name": "time"}, 
					{ "data": "status","name": "status"}, 
					{ "data": "action","name": "action"}, 
				],	
				 "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 ) {
							var link1 = "{{ url('/customer-service/work-order/edit') }}"+"/"+data;
							var link2 = "{{ url('/customer-service/work-order/reschedule') }}"+"/"+data;
							var link3 = "{{ url('/customer-service/work-order/generate-pdf') }}"+"/"+data;
							if(positionRoles == 'Customer Service'){
							return '<a href="'+link1+'" class="tablectrl_medium bGreen tipS" original-title="Edit Detail W/O"><span class="iconb" data-icon=""></span></a> <a href="'+link2+'" class="tablectrl_medium bBlue tipS" original-title="Reassign/Change Datetime W/O"><span class="iconb" data-icon=""></span></a> <a target="_blank" href="'+link3+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}else{
								return '<a target="_blank" href="'+link3+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}
						},
						"targets": 14
					}
				],			
			});	


			var table5 = $('#sche').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-reschedule/null/null/null') }}",
				"columns": [
					{ "data": "formT","name": "formT"},
					{ "data": "service","name": "service"},
					{ "data": "wo","name": "wo"},
					{ "data": "name","name": "name"},
					{ "data": "phone","name": "phone"},
					{ "data": "unit","name": "unit"},
					{ "data": "building","name": "building"},
					{ "data": "city","name": "city"},
					{ "data": "package", "name": "package"},
					{ "data": "contractor","name": "contractor"},
					{ "data": "installer","name": "installer"}, 
					{ "data": "date","name": "date"},
					{ "data": "time","name": "time"}, 
					{ "data": "status","name": "status"}, 
					{ "data": "action","name": "action"}, 
				],	
				 "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 ) {
							var link1 = "{{ url('/customer-service/work-order/edit') }}"+"/"+data;
							var link2 = "{{ url('/customer-service/work-order/reschedule') }}"+"/"+data;
							var link3 = "{{ url('/customer-service/work-order/generate-pdf') }}"+"/"+data;
							if(positionRoles == 'Customer Service'){
							return '<a href="'+link1+'" class="tablectrl_medium bGreen tipS" original-title="Edit Detail W/O"><span class="iconb" data-icon=""></span></a> <a href="'+link2+'" class="tablectrl_medium bBlue tipS" original-title="Reassign/Change Datetime W/O"><span class="iconb" data-icon=""></span></a> <a target="_blank" href="'+link3+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}else{
								return '<a target="_blank" href="'+link3+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}
						},
						"targets": 14
					}
				],			
			});	

			var table6 = $('#susp').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-suspend/null/null/null') }}",
				"columns": [
					{ "data": "formT","name": "formT"},
					{ "data": "service","name": "service"},
					{ "data": "wo","name": "wo"},
					{ "data": "name","name": "name"},
					{ "data": "phone","name": "phone"},
					{ "data": "unit","name": "unit"},
					{ "data": "building","name": "building"},
					{ "data": "city","name": "city"},
					{ "data": "package", "name": "package"},
					{ "data": "contractor","name": "contractor"},
					{ "data": "installer","name": "installer"}, 
					{ "data": "date","name": "date"},
					{ "data": "time","name": "time"}, 
					{ "data": "status","name": "status"}, 
					{ "data": "action","name": "action"}, 
				],	
				 "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 ) {
							var link1 = "{{ url('/customer-service/work-order/edit') }}"+"/"+data;
							var link2 = "{{ url('/customer-service/work-order/reschedule') }}"+"/"+data;
							var link3 = "{{ url('/customer-service/work-order/generate-pdf') }}"+"/"+data;
							if(positionRoles == 'Customer Service'){
							return '<a href="'+link1+'" class="tablectrl_medium bGreen tipS" original-title="Edit Detail W/O"><span class="iconb" data-icon=""></span></a> <a href="'+link2+'" class="tablectrl_medium bBlue tipS" original-title="Reassign/Change Datetime W/O"><span class="iconb" data-icon=""></span></a> <a target="_blank" href="'+link3+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}else{
								return '<a target="_blank" href="'+link3+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}
						},
						"targets": 14
					}
				],			
			});	

			var table7 = $('#comp').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-completed/null/null/null') }}",
				"columns": [
					{ "data": "formT","name": "formT"},
					{ "data": "service","name": "service"},
					{ "data": "wo","name": "wo"},
					{ "data": "name","name": "name"},
					{ "data": "phone","name": "phone"},
					{ "data": "unit","name": "unit"},
					{ "data": "building","name": "building"},
					{ "data": "city","name": "city"},
					{ "data": "package", "name": "package"},
					{ "data": "contractor","name": "contractor"},
					{ "data": "installer","name": "installer"}, 
					{ "data": "date","name": "date"},
					{ "data": "time","name": "time"}, 
					{ "data": "status","name": "status"}, 
					{ "data": "docket","name": "docket"}, 
					{ "data": "action","name": "action"}, 
				],	
				 "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 ) {
							var link = "{{ url('/customer-service/work-order/generate-pdf') }}"+"/"+data;
							return '<a target="_blank" href="'+link+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
						},
						"targets": 15
					}
				],			
			});

			var table6 = $('#canc').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-cancelled/null/null/null') }}",
				"columns": [
					{ "data": "formT","name": "formT"},
					{ "data": "service","name": "service"},
					{ "data": "wo","name": "wo"},
					{ "data": "name","name": "name"},
					{ "data": "phone","name": "phone"},
					{ "data": "unit","name": "unit"},
					{ "data": "building","name": "building"},
					{ "data": "city","name": "city"},
					{ "data": "package", "name": "package"},
					{ "data": "contractor","name": "contractor"},
					{ "data": "installer","name": "installer"}, 
					{ "data": "date","name": "date"},
					{ "data": "time","name": "time"}, 
					{ "data": "status","name": "status"}, 
					{ "data": "action","name": "action"}, 
				],	
				 "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 ) {
							var link1 = "{{ url('/customer-service/work-order/edit') }}"+"/"+data;
							var link2 = "{{ url('/customer-service/work-order/reschedule') }}"+"/"+data;
							var link3 = "{{ url('/customer-service/work-order/generate-pdf') }}"+"/"+data;
							if(positionRoles == 'Customer Service'){
							return '<a href="'+link1+'" class="tablectrl_medium bGreen tipS" original-title="Edit Detail W/O"><span class="iconb" data-icon=""></span></a> <a href="'+link2+'" class="tablectrl_medium bBlue tipS" original-title="Reassign/Change Datetime W/O"><span class="iconb" data-icon=""></span></a> <a target="_blank" href="'+link3+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}else{
								return '<a target="_blank" href="'+link3+'" class="tablectrl_medium bGold tipS" original-title="View W/O"><span class="iconb" data-icon=""></span></a>';
							}
						},
						"targets": 14
					}
				],			
			});		

			//===== Modal =====//		

			// $('#fbyear,#fbmonth').change(function() {
			// 	var link1 = "{{ url('/customer-service/get-all-pending-contractor') }}" +"/"+$('#fbyear').val()+"/"+$('#fbmonth').val()+"/null";
			// 	table1.ajax.url( link1 ).load();

			// 	var link2 = "{{ url('/customer-service/get-all-pending-non') }}" +"/"+$('#fbyear').val()+"/"+$('#fbmonth').val()+"/null";
			// 	table2.ajax.url( link2 ).load();

			// 	var link3 = "{{ url('/customer-service/get-all-success-non') }}" +"/"+$('#fbyear').val()+"/"+$('#fbmonth').val()+"/null";
			// 	table3.ajax.url( link3 ).load();

			// 	var link4 = "{{ url('/customer-service/get-all-pending-installer') }}" +"/"+$('#fbyear').val()+"/"+$('#fbmonth').val()+"/null";
			// 	table4.ajax.url( link3 ).load();

			// 	var link5 = "{{ url('/customer-service/get-all-reschedule') }}" +"/"+$('#fbyear').val()+"/"+$('#fbmonth').val()+"/null";
			// 	table5.ajax.url( link3 ).load();

			// 	var link6 = "{{ url('/customer-service/get-all-suspend') }}" +"/"+$('#fbyear').val()+"/"+$('#fbmonth').val()+"/null";
			// 	table6.ajax.url( link3 ).load();

			// 	var link7 = "{{ url('/customer-service/get-all-completed') }}" +"/"+$('#fbyear').val()+"/"+$('#fbmonth').val()+"/null";
			// 	table7.ajax.url( link3 ).load();
			// });
		});
	</script>
@endsection