@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')
<div class="wrapper">	<!-- 6 + 6 -->
	<div class="fluid">
		<div class="grid12">
			<fieldset>
				<div class="widget grid2 widgetH"></div>
				<div class="widget grid8">
					<div class="whead"><h6>Subscriber / Customer Detail</h6></div>
					
					<div class="formRow cussPayment">
						<div class="grid3"><label><b>Select customer / subscriber detail: </b></label></div>
						<div class="grid9">
							<select class="styled" id="type_customer" name="type_customer">
								<option value=''>Please Customer / Subscriber Detail</option>
								<option value="formR">Fill The New Form ( Rectification )</option>
							</select>
						</div>
					</div>
					
					<div class="formRow noBorderB">
						<div class="grid12">
							<input type="submit" name="refresh" id="refresh" class="buttonM bPurple" value="Refresh Selection">
						</div>
					</div>
					
				</div>
				<div class="widget grid2 widgetH"></div>
			</fieldset>
		</div>
		
		<div id="formR">
			<form action="{{ url('/customer-service/business/create-rectification') }}" class="main cussPayment" method="POST" enctype="multipart/form-data" id="rectificationForm" name="rectificationForm">
				<input type="hidden" name="_token" value="{{ csrf_token() }}">
				<input type="hidden" name="formT" value="B">
				<fieldset>
					<div class="widget grid2 widgetH"></div>
					<div class="widget grid8">
						<div class="whead"><h6>Customer Details</h6></div>
						
						<div class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid2"><label><b>Company Name<small style="color: red"> * </small>: </b></label></div>
							<div class="grid6"><input type="text" name="cname" id="cname" required /></div>
							<div class="grid2">&nbsp;</div>
						</div>
						
						<div class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid2"><label><b>Company Address<small style="color: red"> * </small>: </b></label></div>
							<div class="grid6">
								<textarea rows="3" cols="" name="caddress" id="caddress" class="auto" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 70px;"></textarea>
							</div>
							<div class="grid2">&nbsp;</div>
						</div>

						<div class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid2"><label><b>Unit No<small style="color: red"> * </small>: </b></label></div>
							<div class="grid6"><input type="text" name="unit_no" id="unit_no" required /></div>
							<div class="grid2">&nbsp;</div>
						</div>
						
						<!-- <div class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid4">
								<label><b>Postcode<small style="color: red"> * </small>: </b></label>
								<input type="text" name="postcode" id="postcode" required />
							</div>
							<div class="grid4">
								<label><b>City<small style="color: red"> * </small>: </b></label>
								<input type="text" name="city" id="city" required />
							</div>
							<div class="grid2">&nbsp;</div>
						</div>
						
						<div class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid2"><label><b>State<small style="color: red"> * </small>: </b></label></div>
							<div class="grid6"><input type="text" name="state" id="state" required /></div>
							<div class="grid2">&nbsp;</div>
						</div> -->
						
						<!-- <div class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid2"><label><b>Company Reg.No<small style="color: red"> * </small>: </b></label></div>
							<div class="grid6"><input type="text" name="creg" id="creg" required /></div>
							<div class="grid2">&nbsp;</div>
						</div> -->
						
						<!-- <div class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid4"><label><b>Company Number<small style="color: red"> * </small>: </b></label><input type="text" name="cnumber" id="cnumber" required /></div>
							<div class="grid4"><label><b>Company Fax : </b></label><input type="text" name="cfax" id="cfax" /></div>
							<div class="grid2">&nbsp;</div>
						</div> -->
						
						<div class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid2"><label><b>Full Name<small style="color: red"> * </small>: </b></label></div>
							<div class="grid6"><input type="text" name="name" id="name" required /></div>
							<div class="grid2">&nbsp;</div>
						</div>
						
						<!-- <div class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid2"><label><b>NRIC<small style="color: red"> * </small>: </b></label></div>
							<div class="grid6"><input type="text" name="ic" id="ic" required /></div>
							<div class="grid2">&nbsp;</div>
						</div> -->
						
						<!-- <div class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid2"><label><b>Designation<small style="color: red"> * </small>: </b></label></div>
							<div class="grid6"><input type="text" name="designation" id="designation" required /></div>
							<div class="grid2">&nbsp;</div>
						</div> -->
						
						<!-- <div class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid2"><label><b>Email<small style="color: red"> * </small>: </b></label></div>
							<div class="grid6"><input type="email" name="email" id="email" required /></div>
							<div class="grid2">&nbsp;</div>
						</div> -->
						
						<div class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid2"><label><b>Primary Number<small style="color: red"> * </small>: </b></label></div>
							<div class="grid6"><input type="text" name="phone1" id="phone1" required /></div>
							<div clas="grid2">&nbsp;</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 class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid2"><label><b>Package<small style="color: red"> * </small>: </b></label></div>
							<div class="grid6">
								<select class="styled" id="package" name="package" required>
									<option value="">Choose package</option>
									<option value="10">10 Mbps</option>
									<option value="30">30 Mbps</option>
									<option value="50">50 Mbps</option>
									<option value="100">100 Mbps</option>
									<option value="300">300 Mbps</option>
									<option value="500">500 Mbps</option>
									<option value="1">1 Gbps</option>
								</select>
							</div>	
							<div class="grid2">&nbsp;</div>
						</div>-->

						<div class="formRow">
							<div class="grid2">&nbsp;</div>
							<div class="grid2"><label><b>Package<small style="color: red"> * </small>: </b></label></div>
							<div class="grid6">
								<select class="styled" id="package" name="package" required>
									<option value="">Choose package</option>
									<option value="NA">NA</option>
									@foreach($product as $c)
										<option value="{{ $c->speed }}">{{ $c->package_name }}</option>
									@endforeach
								</select>
							</div>	
							<div class="grid2">&nbsp;</div>
						</div>
						
						<div class="formRow noBorderB">
							<div class="grid12">
								<input type="submit" name="rectification" id="rectification" class="buttonM bPurple formSubmit" value="Add New Customer Detail">
							</div>
						</div>
					</div>
					<div class="widget grid2 widgetH"></div>
				</fieldset>
			</form>
		</div>
	</div>
</div>

@endsection

@section('external_js')
<script>
		$(document).ready(function() {
		
			var formR = document.getElementById("formR");
			
			formR.style.display = "none";
			
			$('#type_customer').on('change',function(){
				
				if ($('#type_customer').val() == "formR"){
					
					formR.style.display = "";
					
					$.getJSON('http://cbb.swisslink.com.my/v2/dashboard/php/customer-service/country.json', function( data ) {
						$.each(data, function (key, entry) {
							$('#citizenss').append($('<option></option>').attr('value', entry.name).text(entry.name));
						});
					});
					
					$.ajax({
						type: "GET",
						url: "http://cbb.swisslink.com.my/v2/dashboard/php/customer-service/work-order/get-all-building.php",
						data: { },
						dataType: "json",
						success:function(data){
							$.each(data, function (key, entry) {
								$('#buildingsss').append($('<option></option>').attr('value', entry.name).text(entry.name));
							});
						}
					});				
						
					//$(".styled, input:radio, input:checkbox, .dataTables_length select").uniform();
					
				}
			});
	
			$('#refresh').on('click',function(){
				window.location.reload();
			});
			
		});
	</script>
@endsection