You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

residential_preview.blade.php 36KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style id="stndz-style"></style>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <style type="text/css">
  8. .step {
  9. height: 15px;
  10. width: 15px;
  11. margin: 0 2px;
  12. background-color: #bbbbbb;
  13. border: none;
  14. border-radius: 50%;
  15. display: inline-block;
  16. opacity: 0.5;
  17. }
  18. </style>
  19. <link rel="profile" href="http://gmpg.org/xfn/11">
  20. <link rel="pingback" href="https://citybroadband.my/xmlrpc.php">
  21. <link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald:400,500|Signika:400,600" rel="stylesheet">
  22. <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  23. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  24. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.css">
  25. <title>Residential Application</title>
  26. <link rel="dns-prefetch" href="//fonts.googleapis.com">
  27. <link rel="dns-prefetch" href="//s.w.org">
  28. <link rel="alternate" type="application/rss+xml" title="Cyberjaya Broadband » Feed" href="https://citybroadband.my/feed/">
  29. <link rel="alternate" type="application/rss+xml" title="Cyberjaya Broadband » Comments Feed" href="https://citybroadband.my/feed/">
  30. <link rel="icon" href="https://citybroadband.my/wp-content/uploads/2018/09/favicon-2.png" type="image/gif">
  31. <link rel="icon" href="https://citybroadband.my/wp-content/uploads/2018/09/favicon-3.png" type="image/png">
  32. <link rel="apple-touch-icon" href="https://citybroadband.my/wp-content/uploads/2018/09/favicon-4.png">
  33. <link rel="stylesheet" href="{{url('css/bootstrap.min.css')}}" type="text/css">
  34. <link rel="stylesheet" href="{{url('css/style.css')}}" type="text/css">
  35. <!-- Custom Signature files -->
  36. <!--<link rel="stylesheet" href="../include/plugins/signature_pad/docs/css/signature-pad.css">-->
  37. <!-- Font Awesome -->
  38. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
  39. <script type="text/javascript">
  40. var _gaq = _gaq || [];
  41. _gaq.push(['_setAccount', 'UA-39365077-1']);
  42. _gaq.push(['_trackPageview']);
  43. (function() {
  44. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  45. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  46. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  47. })();
  48. </script>
  49. <style type="text/css">
  50. input[type="text"], .tab-pane input[type="search"], input[type="email"], input[type="tel"], input[type="file"] {
  51. height: 40px !important;
  52. border: 1px solid #ccc !important;
  53. border-radius: 4px;
  54. margin-bottom: 0px;
  55. background: #f5f5f5;
  56. }
  57. footer {
  58. padding: 40px 0 !important;
  59. }
  60. .inner-pane-white{
  61. background-color: #fff !important;
  62. border: 1px solid #ccc;
  63. padding: 20px;
  64. }
  65. #preview{
  66. padding: 0px !important;
  67. }
  68. </style>
  69. </head>
  70. <body>
  71. <div id="page" class="site">
  72. <a class="skip-link screen-reader-text" href="#content">Skip to content</a>
  73. <header id="masthead" class="site-header" role="banner">
  74. <div class="fixed-portal-login"><a href="http://userportal.citybroadband.my/login" target="_blank">User Portal Login</a></div></div>
  75. <div class="nav-container">
  76. <nav id="site-navigation" class="main-navigation" role="navigation">
  77. <div class="container nav-bar">
  78. <div class="row">
  79. <div class="module left site-title-container">
  80. <a href="https://citybroadband.my">
  81. <img class="bigLogo" src="{{ url('assets/logo.png') }}" width="106" height="auto">
  82. <img class="smallLogo" src="{{ url('assets/logo.png') }}" width="106" height="auto">
  83. </a>
  84. </div>
  85. <div class="bigLogo module widget-handle search-widget-handle right hidden-xs">
  86. <div class="search">
  87. <form role="search" method="get" class="search-form" action="https://citybroadband.my/">
  88. <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
  89. </form>
  90. </div>
  91. </div>
  92. <div class="module widget-handle mobile-toggle right visible-xs">
  93. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
  94. <span class="sr-only">Toggle navigation</span>
  95. <span class="icon-bar"></span>
  96. <span class="icon-bar"></span>
  97. <span class="icon-bar"></span>
  98. </button>
  99. </div>
  100. <div style="clear: both;" class="module-group right menuholder">
  101. <div class="module left">
  102. <div class="collapse navbar-collapse navbar-ex1-collapse">
  103. <ul id="menu" class="menu">
  104. <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a title="Residential" href="https://citybroadband.my/residential/">Residential</a></li>
  105. <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a title="Business" href="https://citybroadband.my/business/">Business</a></li>
  106. <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a title="Our Story" href="https://citybroadband.my/our-story/">Our Story</a></li>
  107. <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a title="Support" href="https://citybroadband.my/support/">Support</a></li>
  108. <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a title="Coverage Map" href="https://citybroadband.my/support/coverage-map/">Coverage Map</a></li>
  109. <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11"><a title="Contact Us" href="https://citybroadband.my/contact-us/">Contact Us</a></li>
  110. </ul>
  111. </div>
  112. </div>
  113. <div class="smallLogo module right">
  114. <form role="search" method="get" class="search-form" action="https://citybroadband.my/">
  115. <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
  116. </form>
  117. </div>
  118. <!--end of menu module-->
  119. </div>
  120. <!--end of module group-->
  121. </div>
  122. </div>
  123. </nav><!-- #site-navigation -->
  124. </div>
  125. </header><!-- #masthead -->
  126. <div id="content" class="main-container">
  127. <section class="content-area">
  128. <div id="main" role="main">
  129. <div class="bg-white splash-text" style="padding-bottom: 0">
  130. <div class="container">
  131. <h1 class="black text-center">Residential Application</h1>
  132. <p class="text-center">
  133. Please follow the steps below to complete your application. We will get back to you shortly.
  134. </p>
  135. </div>
  136. </div>
  137. <div class="container">
  138. <div class="row">
  139. <div class="col-md-8 col-md-offset-2">
  140. <section class="form-box">
  141. <div class="row">
  142. <div class="col-md-12">
  143. <!-- Wizard container -->
  144. <div class="wizard-container">
  145. <div class="card wizard-card">
  146. <div class="wizard-navigation">
  147. <div>
  148. <ul class="nf-breadcrumbs nav nav-pills">
  149. <li style="width: 25%;"><a href="#address" class="nf-breadcrumb" data-toggle="tab" data-index="0" aria-expanded="true">Installation Address</a></li>
  150. <li style="width: 25%;"><a href="#information" class="nf-breadcrumb" data-toggle="tab" data-index="1">Application Information</a></li>
  151. <li style="width: 25%;"><a href="#service" class="nf-breadcrumb" data-toggle="tab" data-index="2">Service and Package Details</a></li>
  152. <li class="active" style="width: 25%;"><a href="#signaturess" class="nf-breadcrumb" data-toggle="tab" data-index="3">Preview</a></li>
  153. </ul>
  154. </div>
  155. </div>
  156. @foreach($data as $a)
  157. <form method="post" action="{{ url('/residential/application-form/store/'.$a['dealer_id']) }}" enctype="multipart/form-data" name="registerForm" novalidate="novalidate">
  158. <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
  159. <input type="hidden" name="dealer_id" value="{{ $a['dealer_id'] }}">
  160. <input type="hidden" name="coverage" value="{{$a['coverage']}}">
  161. <input type="hidden" name="unit" value="{{$a['unit']}}">
  162. <input type="hidden" name="street" value="{{$a['street']}}">
  163. <input type="hidden" name="package" value="{{ $a['package'] }}">
  164. <input type="hidden" name="application" value="{{$a['application']}}">
  165. <input type="hidden" name="name" value="{{$a['name']}}">
  166. <input type="hidden" name="nric_passport" value="{{$a['nric_passport']}}">
  167. <input type="hidden" name="race" value="{{$a['race']}}">
  168. <input type="hidden" name="contact_primary" value="{{$a['contact_primary']}}">
  169. <input type="hidden" name="contact_secondary" value="{{$a['contact_secondary']}}">
  170. <input type="hidden" name="citizenship" value="{{$a['citizenship']}}">
  171. <input type="hidden" name="email" value="{{$a['email']}}">
  172. <input type="hidden" name="gender" value="{{$a['gender']}}">
  173. <input type="hidden" name="subscription" value="{{$a['subscription']}}">
  174. <input type="hidden" name="voice" value="{{$a['voice']}}">
  175. <input type="hidden" name="rfs" value="{{$a['thedate']}}">
  176. <input type="hidden" name="postcode" value="{{ $coverage->postcode }}">
  177. <input type="hidden" name="city" value="{{ $coverage->city }}">
  178. <input type="hidden" name="state" value="{{ $coverage->state }}">
  179. <input type="hidden" name="deposit" value="{{ $deposit }}">
  180. <input type="hidden" name="otc" value="{{ $otc_st }}">
  181. <input type="hidden" name="gst" value="{{ $gst }}">
  182. <input type="hidden" name="promo_st" value="{{ $promo_st }}">
  183. <input type="hidden" name="total_monthly" value="{{ $total_monthly }}">
  184. <div class="tracking-process"></div>
  185. <div>
  186. <div class="inner-pane-white">
  187. <!-- Preview -->
  188. <div class="row">
  189. <div class="col-md-12">
  190. <div id="preview">
  191. <label><b>Subscription Details</b></label>
  192. <table class="table table-sm table-bordered">
  193. <tbody>
  194. <tr><th width="50%">Application Type</th>
  195. <td>{{$a['application']}}</td>
  196. </tr>
  197. <tr><th width="50%">Package</th>
  198. <td>City Broadband Residential {{$a['package']}}</td>
  199. </tr>
  200. @if ($a['subscription']==24 && ($a['package']=='50Mbps' || $a['package']=='100Mbps' || $a['package']=='300Mbps' || $a['package']=='500Mbps'))
  201. <tr><th width="50%">Promotion</th>
  202. <td>Year End Promotion (RM10 off for 24 months)</td>
  203. </tr>
  204. @endif
  205. <tr><th width="50%">Contract Term</th>
  206. <td>{{$a['subscription']}} Months</td>
  207. </tr>
  208. <tr><th width="50%">Preferred Installation Date</th>
  209. <td>{{$a['thedate']}}</td>
  210. </tr>
  211. </tbody>
  212. </table>
  213. <hr><label><b>Add-On(s)</b></label>
  214. <table class="table table-sm table-bordered">
  215. <tbody>
  216. <tr><th width="50%">Home Voice Plan</th>
  217. <td>{{$a['voice']}}</td>
  218. </tr>
  219. </tbody>
  220. </table>
  221. <hr><label><b>Personal Details</b></label>
  222. <table class="table table-sm table-bordered">
  223. <tbody>
  224. <tr><th width="50%">Full Name</th>
  225. <td>{{$a['name']}}</td>
  226. </tr>
  227. <tr><th width="50%">MyKad/Passport</th>
  228. <td>{{$a['nric_passport']}}</td>
  229. </tr>
  230. <tr><th width="50%">Gender</th>
  231. <td>{{ucfirst($a['gender'])}}</td>
  232. </tr>
  233. <tr><th width="50%">Nationality</th>
  234. <td>{{$a['citizenship']}}</td>
  235. </tr>
  236. <tr><th width="50%">Primary Phone Number</th>
  237. <td>{{$a['contact_primary']}}</td>
  238. </tr>
  239. <tr><th width="50%">Secondary Phone Number</th>
  240. <td>{{$a['contact_secondary']}}</td>
  241. </tr>
  242. <tr><th width="50%">Email Address</th>
  243. <td>{{$a['email']}}</td>
  244. </tr>
  245. </tbody>
  246. </table>
  247. <hr><label><b>Service Installation Address</b></label>
  248. <table class="table table-sm table-bordered">
  249. <tbody>
  250. <tr><th width="50%">Unit Number</th>
  251. <td>{{$a['unit']}}</td>
  252. </tr>
  253. <tr><th width="50%">Building</th>
  254. <td>{{$coverage->building_name}}</td>
  255. </tr>
  256. <tr><th width="50%">Street</th>
  257. <td>{{ucwords($a['street'])}}</td>
  258. </tr>
  259. <tr><th width="50%">Postcode</th>
  260. <td>{{$coverage->postcode}}</td>
  261. </tr>
  262. <tr><th width="50%">City</th>
  263. <td>{{$coverage->city}}</td>
  264. </tr>
  265. <tr><th width="50%">State</th>
  266. <td>{{$coverage->state}}</td>
  267. </tr>
  268. </tbody>
  269. </table>
  270. <hr><label><b>Monthly Recurring Charges</b></label>
  271. <table class="table table-sm table-bordered">
  272. <tbody>
  273. <tr>
  274. <th>Description</th>
  275. <th>Price exclude ST</th>
  276. <th>Total*</th>
  277. </tr>
  278. <tr><th>City Broadband Residential - {{$a['package']}}</th>
  279. @if($a['package']!='1Gbps' && $a['subscription']=='24')
  280. <td><span style="text-decoration: line-through;">RM{{ $product->retail_price }}</span> RM{{ $promo_price}}</td>
  281. <td>RM{{ $promo_st }}</td>
  282. @else
  283. <td>RM{{ $product->retail_price }}</td>
  284. <td>RM{{ $gst }}</td>
  285. @endif
  286. </tr>
  287. @if($a['voice']=='Yes')
  288. <tr><th>Home Voice Plan</th>
  289. <td>
  290. RM20
  291. </td>
  292. <td>
  293. RM21.20
  294. </td>
  295. </tr>
  296. @endif
  297. <tr><th colspan="2">Total Charges</th>
  298. <td><b>RM{{ $total_monthly }}</b></td>
  299. </tr>
  300. </tbody>
  301. </table>
  302. <small>*Price subject to 6% Service Tax (if applicable).</small><br>
  303. @if ($upfront_total != 0)
  304. <hr><label><b>Upfront Charges</b></label>
  305. <table class="table table-sm table-bordered">
  306. <tbody>
  307. <tr>
  308. <th>Description</th>
  309. <th>Price exclude ST</th>
  310. <th>Total*</th>
  311. </tr>
  312. @if ($otc_st != 0)
  313. <tr><th>One Time Charges</th>
  314. <td>RM{{ $otc }}</td>
  315. <td>RM{{ $otc_st }}</td>
  316. </tr>
  317. @endif
  318. @if ($deposit != 0)
  319. <tr><th colspan="2">Deposit</th></th>
  320. <td>RM{{ $deposit}}</td>
  321. </tr>
  322. @endif
  323. <tr><th colspan="2">Total Charges</th>
  324. <td><b>RM{{ $upfront_total }}</b></td>
  325. </tr>
  326. </tbody>
  327. </table>
  328. <small>*Price subject to 6% Service Tax (if applicable).</small><br>
  329. <small>All upfront charges will need to be paid prior installation. You will receive an email once your application has been processed.</small>
  330. @endif
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335. <!-- Document -->
  336. <div class="inner-pane">
  337. <h3>Declaration and Signature</h3>
  338. <div class="row">
  339. <div class="col-md-12" id="document">
  340. <label><b>Document &amp; Declaration </b><small style="color: red">*</small></label>
  341. <div class="form-group">
  342. <div class="checkbox">
  343. <label>
  344. <input type="checkbox" name="photocopy" id="photocopy" value="24" required="" aria-required="true"> <p>Photocopy of MyKad (front and back) or passport for Non-Malaysian (minimum 12 months validity) and visa (minimum 6 months validity)</p>
  345. </label>
  346. </div>
  347. <div class="checkbox">
  348. <label>
  349. <input type="checkbox" name="consent" id="consent" value="24" required="" aria-required="true"> <p>I hereby consent to the collection, use,
  350. disclosure of my personal information in accordance with the <b> <a href="https://www.citybroadband.my/privacy-policy-2/" >Privacy Policy</a> </b> available on www.citybroadband.my.</p>
  351. </label>
  352. </div>
  353. <div class="checkbox">
  354. <label>
  355. <input type="checkbox" name="declare" id="declare" value="24" required="" aria-required="true"> <p>I hereby declare that the above information, documents, and
  356. any appendices attached are true and valid. I have read and understood the contents of this form and agreed to be bound by <b> <a href="https://www.citybroadband.my/terms-conditions/">Terms &amp; Condition </a> </b>
  357. as stated on the next page of this form which accompany the subscription of product(s) and/ or service(s). Allo Technology Sdn Bhd reserve the rights
  358. to refuse any application at any given time should any of the information is incorrect.
  359. </p>
  360. </label>
  361. </div>
  362. </div>
  363. </div>
  364. </div>
  365. <h3>Upload Documents</h3>
  366. <small><b>Acceptable formats: jpg , jpeg , png , pdf</b></small>
  367. <div class="row">
  368. <div class="col-md-12">
  369. <div class="form-group">
  370. <label><b>MyKad/Passport (Front)</b> <small style="color: red">*</small></label>
  371. <input type="file" id="front_ic" accept="image/*" capture="camera" name="front_ic" multiple="" onchange="validateImage1()" class="form-control" required="" aria-required="true">
  372. </div>
  373. </div>
  374. <div class="col-md-12">
  375. <div class="form-group">
  376. <label><b>MyKad/Passport (Back)</b> <small style="color: red">*</small></label>
  377. <input type="file" id="back_ic" accept="image/*" capture="camera" name="back_ic" multiple="" onchange="validateImage2()" class="form-control" required="" aria-required="true">
  378. </div>
  379. </div>
  380. <div class="col-md-12">
  381. <div class="form-group">
  382. <label><b>Visa (Front)</b> <small style="color: red">* Non-Malaysian</small></label>
  383. <input type="file" id="visaF" accept="image/*" capture="camera" name="visaF" multiple="" onchange="validateImage3()" class="form-control" aria-required="true">
  384. </div>
  385. </div>
  386. <div class="col-md-12">
  387. <div class="form-group">
  388. <label><b>Visa (Back)</b> <small style="color: red">* Non-Malaysian</small></label>
  389. <input type="file" id="visaB" accept="image/*" capture="camera" name="visaB" multiple="" onchange="validateImage4()" class="form-control" aria-required="true">
  390. </div>
  391. </div>
  392. <div class="col-md-12">
  393. <div class="form-group">
  394. <label><b>Upfront Payment Receipt</b></label>
  395. <input type="file" id="payment_receipt" accept="image/*" capture="camera" name="payment_receipt" multiple="" onchange="validateImage5()" class="form-control">
  396. </div>
  397. </div>
  398. <div class="col-md-12">
  399. <div class="form-group">
  400. <label><b>Service Order Form</b></label>
  401. <input type="file" id="so_form" accept="image/*" capture="camera" name="so_form" multiple="" onchange="validateImage6()" class="form-control">
  402. </div>
  403. </div>
  404. </div>
  405. <!-- Signature -->
  406. <div class="row">
  407. <div class="col-md-12">
  408. <div class="form-group">
  409. <label><b>Signature </b><small style="color: red">*</small></label>
  410. <small>After you save your signature, the submit button will automatic be display.</small>
  411. <div class="wrapper">
  412. <canvas id="signature-pad" class="signature-pad" width="885" height="375" style="touch-action: none;"></canvas>
  413. </div>
  414. <div class="signature-pad--footer">
  415. <center>
  416. <div class="description">Sign above</div>
  417. </center>
  418. <div class="signature-pad--actions">
  419. <div>
  420. <center><button type="button" class="btn btn-clear" id="clear">Clear</button></center>
  421. <center><button type="button" class="btn btn-clear" id="save-signature">Save Signature</button></center>
  422. </div>
  423. </div>
  424. </div>
  425. <input type="text" name="cuss_signature" value="" id="cuss_signature" style="display:none" required>
  426. </div>
  427. </div>
  428. </div>
  429. </div>
  430. </div>
  431. <!-- Wizard Footer -->
  432. <div class="wizard-footer height-wizard">
  433. <div class="wizard-footer-inner">
  434. <div class="pull-right">
  435. <!-- <a href="{{url('Residential/form2')}}"> -->
  436. <!-- <button type="submit" class="btn btn-next" name="next" value="Next" style="background-color: orangered; display: inline-block;">Next</button> -->
  437. <!-- <input type="button" id="save-data" class="btn btn-finish" data-loading-text="Please Wait..." name="finish" value="Submit" style="display: none;"> -->
  438. <div id="showB">
  439. <input type="submit" class="btn btn-finish" data-loading-text="Please Wait..." name="finish" value="Submit" style="display: none;">
  440. <!-- </a> -->
  441. </div>
  442. </div>
  443. <!-- <div class="pull-left">
  444. <a href="{{url('/application-form/residential/address/step1')}}">
  445. <input type="button" class="btn btn-previous" name="previous" value="Previous" style="background-color: grey;">
  446. </a>
  447. </div> -->
  448. <div class="clearfix"></div>
  449. </div>
  450. </div>
  451. </form>
  452. @endforeach
  453. </div>
  454. </div>
  455. </div>
  456. </div>
  457. </section>
  458. </div>
  459. </div>
  460. </div>
  461. <div class="nonstick-footer padding bg-blue" align="center">
  462. <span class="medium-title text-centeryellow" style="color: yellow;">Got A Question?</span>
  463. <div align="center">
  464. <a class="nomargin btn btn-default" href="https://www.citybroadband.my/support/faqs/residential/year-end-promo/" style="width: 230px;">
  465. Read FAQ
  466. </a>
  467. <a style="width:230px" href="#" class="nomargin btn btn-default">
  468. Write to us
  469. </a>
  470. </div>
  471. </div>
  472. </div>
  473. </section>
  474. </div>
  475. <div class="footer-callout"></div>
  476. <footer id="colophon" class="site-footer footer" role="contentinfo">
  477. <div class="container footer-inner">
  478. <div class="row">
  479. <div class="footer-widget-area">
  480. <div class="col-md-6 col-md-3 footer-widget" role="complementary">
  481. <div class="widget widget_nav_menu" id="nav_menu-3">
  482. <h2 class="widget-title">Overview</h2>
  483. <div class="menu-main-container">
  484. <ul id="menu-main" class="menu">
  485. <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16">
  486. <a href="https://citybroadband.my/residential/">Residential</a>
  487. </li>
  488. <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15">
  489. <a href="https://citybroadband.my/business/">Business</a>
  490. </li>
  491. <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14">
  492. <a href="https://citybroadband.my/our-story/">Our Story</a>
  493. </li>
  494. <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13">
  495. <a href="https://citybroadband.my/support/">Support</a>
  496. </li>
  497. <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13">
  498. <a href="https://citybroadband.my/support/coverage-map/">Coverage Map</a>
  499. </li>
  500. <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12">
  501. <a href="https://citybroadband.my/contact-us/">Contact Us</a>
  502. </li>
  503. </ul>
  504. </div>
  505. </div>
  506. </div>
  507. <div class="col-md-3 col-sm-6 footer-widget" role="complementary">
  508. <div id="nav_menu-2" class="widget widget_nav_menu">
  509. <h2 class="widget-title">Legal</h2>
  510. <div class="menu-footer-2-container">
  511. <ul id="menu-footer-2" class="menu">
  512. <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22">
  513. <a href="https://citybroadband.my/terms-conditions/">Terms &amp; Conditions</a>
  514. </li>
  515. <li id="menu-item-373" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-373">
  516. <a href="https://citybroadband.my/privacy-policy/">Privacy Policy</a>
  517. </li>
  518. <li id="menu-item-373" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-373">
  519. <a href="https://citybroadband.my/refund-policy/">Refund Policy</a>
  520. </li>
  521. </ul>
  522. </div>
  523. </div>
  524. </div>
  525. <div class="col-md-3 col-sm-6 footer-widget" role="complementary">
  526. <div id="text-2" class="widget widget_text">
  527. <h2 class="widget-title">Hotline</h2>
  528. <div class="textwidget"><span class="number-big yellow">1300-38-8000</span></div>
  529. </div>
  530. </div>
  531. <div class="col-md-3 col-sm-6 footer-widget" role="complementary">
  532. <div id="text-4" class="widget widget_text">
  533. <h2 class="widget-title">We Accept</h2>
  534. <div class="textwidget"><img src="https://citybroadband.my/wp-content/themes/cb1g/assets/images/weaccept.png"></div>
  535. </div>
  536. </div>
  537. </div>
  538. </div>
  539. </div>
  540. <div class="container">
  541. <div class="lowerfooter">
  542. <img width="50px" src="{{url('assets/logo/footerlogo.png')}}" align="left">
  543. <span class="lower-disclaimer">Copyright © 2019 Allo Technology Sdn Bhd. All rights reserved.</span>
  544. </div>
  545. <a class="btn btn-sm fade-half back-to-top inner-link" href="#top"><i class="fa fa-angle-up"></i></a>
  546. </div>
  547. </footer>
  548. <script type="text/javascript" src="{{url('js/navigation.js')}}"></script>
  549. <script type="text/javascript" src="{{url('js/skip-link-focus.js')}}"></script>
  550. <!-- Boostrap Wizard -->
  551. <script src="{{url('js/jquery.bootstrap.wizard.js')}}" type="text/javascript"></script>
  552. <!-- Plugin for the Wizard -->
  553. <script src="{{url('js/gsdk.bootstrap.wizard.js')}}" type="text/javascript"></script>
  554. <script src="{{url('js/jquery.validate.min.js')}}" type="text/javascript"></script>
  555. <!-- DatePicker -->
  556. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
  557. <!-- Signature -->
  558. <script src="{{url('js/signature_pad.ums.js')}}" type="text/javascript"></script>
  559. <script type="text/javascript">
  560. function validateImage1() {
  561. var formData = new FormData();
  562. var file = document.getElementById("front_ic").files[0];
  563. formData.append("Filedata", file);
  564. var t = file.type.split('/').pop().toLowerCase();
  565. if (t != "jpeg" && t != "jpg" && t !="png" && t != "pdf") {
  566. alert('Accept jpg, jpeg, png and pdf only');
  567. document.getElementById("front_ic").value = '';
  568. return false;
  569. }
  570. return true;
  571. }
  572. function validateImage2() {
  573. var formData = new FormData();
  574. var file = document.getElementById("back_ic").files[0];
  575. formData.append("Filedata", file);
  576. var t = file.type.split('/').pop().toLowerCase();
  577. if (t != "jpeg" && t != "jpg" && t !="png" && t != "pdf") {
  578. alert('Accept jpg, jpeg, png and pdf only');
  579. document.getElementById("back_ic").value = '';
  580. return false;
  581. }
  582. return true;
  583. }
  584. function validateImage3() {
  585. var formData = new FormData();
  586. var file = document.getElementById("visaF").files[0];
  587. formData.append("Filedata", file);
  588. var t = file.type.split('/').pop().toLowerCase();
  589. if (t != "jpeg" && t != "jpg" && t !="png" && t != "pdf") {
  590. alert('Accept jpg, jpeg, png and pdf only');
  591. document.getElementById("visaF").value = '';
  592. return false;
  593. }
  594. return true;
  595. }
  596. function validateImage4() {
  597. var formData = new FormData();
  598. var file = document.getElementById("visaB").files[0];
  599. formData.append("Filedata", file);
  600. var t = file.type.split('/').pop().toLowerCase();
  601. if (t != "jpeg" && t != "jpg" &&t !="png" && t != "pdf") {
  602. alert('Accept jpg, jpeg, png and pdf only');
  603. document.getElementById("visaB").value = '';
  604. return false;
  605. }
  606. return true;
  607. }
  608. function validateImage5() {
  609. var formData = new FormData();
  610. var file = document.getElementById("payment_receipt").files[0];
  611. formData.append("Filedata", file);
  612. var t = file.type.split('/').pop().toLowerCase();
  613. if (t != "jpeg" && t != "jpg" && t !="png" && t != "pdf") {
  614. alert('Accept jpg, jpeg, png and pdf only');
  615. document.getElementById("payment_receipt").value = '';
  616. return false;
  617. }
  618. return true;
  619. }
  620. function validateImage6() {
  621. var formData = new FormData();
  622. var file = document.getElementById("soorm").files[0];
  623. formData.append("Filedata", file);
  624. var t = file.type.split('/').pop().toLowerCase();
  625. if (t != "jpeg" && t != "jpg" && t !="png" && t != "pdf") {
  626. alert('Accept jpg, jpeg, png and pdf only');
  627. document.getElementById("so_form").value = '';
  628. return false;
  629. }
  630. return true;
  631. }
  632. $(document).ready(function(){
  633. var needV = "{{ $a['citizenship'] }}";
  634. if(needV == 'Malaysia'){
  635. $("input[name='citizenship']").prop('required',false);
  636. }else{
  637. $("input[name='citizenship']").prop('required',true);
  638. }
  639. var subscription = '';
  640. var canvas = document.getElementById('signature-pad');
  641. // Adjust canvas coordinate space taking into account pixel ratio,
  642. // to make it look crisp on mobile devices.
  643. // This also causes canvas to be cleared.
  644. function resizeCanvas() {
  645. // When zoomed out to less than 100%, for some very strange reason,
  646. // some browsers report devicePixelRatio as less than 1
  647. // and only part of the canvas is cleared then.
  648. var ratio = Math.max(window.devicePixelRatio || 1, 1);
  649. canvas.width = canvas.offsetWidth * ratio;
  650. canvas.height = canvas.offsetHeight * ratio;
  651. canvas.getContext("2d").scale(ratio, ratio);
  652. }
  653. window.onresize = resizeCanvas;
  654. var signaturePad;
  655. /**** Signature ****/
  656. resizeCanvas();
  657. var signaturePad = new SignaturePad(canvas, {
  658. backgroundColor: 'rgb(255, 255, 255)'
  659. });
  660. var clearButton = document.getElementById('clear');
  661. var saveButton = document.getElementById('save-data');
  662. var saveSignature = document.getElementById('save-signature');
  663. clearButton.addEventListener("click", function (event) {
  664. signaturePad.clear();
  665. });
  666. $("#showB").hide();
  667. /**** Button click For Resident ****/
  668. saveSignature.addEventListener("click", function (event) {
  669. if (signaturePad.isEmpty()) {
  670. alert("Please provide a signature first.");
  671. }else {
  672. var dataUrl = signaturePad.toDataURL("image/jpeg");
  673. document.getElementById('cuss_signature').value = dataUrl;
  674. $("#showB").show();
  675. }
  676. });
  677. // saveButton.addEventListener("click", function (event) {
  678. // if (signaturePad.isEmpty()) {
  679. // alert("Please provide a signature first.");
  680. // } else {
  681. // var $this = $(this);
  682. // $this.button('loading');
  683. // /*** Store to Database ***/
  684. // var dataUrl = signaturePad.toDataURL("image/jpeg");
  685. // document.getElementById('cuss_signature').value = dataUrl;
  686. // var registerForm = new FormData(document.forms["registerForm"]);
  687. // if(document.getElementById('declare').checked && document.getElementById('consent').checked && document.getElementById('photocopy').checked
  688. // && document.getElementById("front_ic").files.length == 0 && document.getElementById("back_ic").files.length == 0) {
  689. // var xhr = new XMLHttpRequest();
  690. // xhr.open('POST','upload_resident.php',true);
  691. // xhr.upload.onprogress = function(e) {
  692. // if (e.lengthComputable){}
  693. // }
  694. // xhr.onreadystatechange = function() {
  695. // if(xhr.readyState == 4 && xhr.status == 200) {
  696. // var return_data = xhr.responseText;
  697. // $this.button('reset');
  698. // window.location.href = "http://cbb.swisslink.com.my/v2/application-form/residential/success-submit.php";
  699. // }/*else {
  700. // alert("Your Residential form already cant be submitted. Please call 1300-38-8000");
  701. // }*/
  702. // }
  703. // xhr.send(registerForm);
  704. // } else {
  705. // $this.button('reset');
  706. // alert("Please tick all the checkbox to proceed");
  707. // }
  708. // }
  709. // });
  710. });
  711. </script>
  712. </body>
  713. </html>
  714. <script type="text/javascript">
  715. $(window).scroll(function() {
  716. var scroll = $(window).scrollTop();
  717. if (scroll >= 150) {
  718. $(".site-header").addClass("smallHeader");
  719. }
  720. else {
  721. $(".site-header").removeClass("smallHeader");
  722. }
  723. });
  724. $(".header-blue100,.header-blue500,.header-pink, .header-blue-10, .header-blue-30, .header-blue-50, .header-blue-100, .header-blue-500").hover(function () {
  725. $(this).toggleClass("expanded-column");
  726. });
  727. $(window).on("scroll touchmove",function() {
  728. if($('body').height() <= ($(window).height() + $(window).scrollTop())) {
  729. $('footer').addClass('reached-bottom');
  730. } else {
  731. $('footer').removeClass('reached-bottom');
  732. }
  733. });
  734. </script>
  735. <style>
  736. select {
  737. height: 40px !important;
  738. }
  739. #nf-field-21-wrap .nf-field-label {
  740. padding-left: 5px;
  741. }
  742. .nf-field-element p {margin:0;}
  743. div#nf-field-22-container {
  744. margin: 0;
  745. }
  746. </style>