<html>
    <meta name= "viewport" content= "width = device-width, initial-scale=1, maximum-scale=1, user-scalable=1">
    <body>
        <form>
            <h3>Whatsapp chat starter</h3>
            Phone number: <input type="text" id="phone" value="+65 "><br><br>
            💬 Message:<br>
            <textarea id="message" rows="10" cols="40">👋 Hi! This is AloRide support. </textarea>
            <br><br>
            Tips:<br>
            <textarea id="message_footer" rows="2" cols="40">Tip: Most of questions can be answered at aloride.com/faq ☺️</textarea>
        </form>
		<br>
        <button onclick="sendWhatsapp()">▶ Send</button>
		<div class="tooltip">
        	<button onclick="copyToClipBoard()" onmouseout="tooltipOutFunc()">
		    	<span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
				📋Copy
			</button>
		</div>
        <button onclick="clearText()">Clear Message</button>
        <button onclick="clearTip()">Clear Tips</button>
        <!-- <button onclick="love()">&lt;3</button> -->
        <br><br>
        <div id="js-buttons">
			<button onclick="availabilityText()">🛵BIKES</button>
        </div>
        <br>
        <br>
        Made with ♥ by phil@aloride.com<br>
        <script>
			// Mapping from button name ==> text
			// ONLY CHANGE THIS PART
			var templates = {
				"👋HI": `👋 Hi! This is AloRide support. `,
				"RATE": `The rental rate depends on rental duration (weeks, months, etc) and bike model. Rent longer for cheaper rate. Generally, it ranges from $330-450 per month, or $150-180 per week, or $35-50 per day.

May I know long do you want to rent? 🙏
`,
				"SUPPORT": `
From now on, I will be your *_point of contact_* during your rental period with AloRide. If you need any support for any issue related to the bike, payment, breakdown, ... Please Whatsapp me here. I will try my best to reply you ASAP, normally in <10 minutes during working hours.
				
We also have a FAQ, just in case sometimes I'm not responsive, at aloride.com/faq

Please save my contact, and I'm happy to serve you! 🙏
`,
				"BREAKDOWN": `
In case of bike breakdown:

1. Properly park the bike (avoid parking ticket)
2. Put keys inside the box (unlocked) 🔑
3. Send us the location of the bike for towing by Whatsapp using aloride.com/locator 📍
4. If you are on a highway: Call EMAS at 1800 2255 582 to get free towing to the nearest parking place.

Please do not panic. We are experienced with this situation. You can leave the bike after finishing all the above steps. We will then arrange a replacement bike for you in the next working hour. Hope that you are safe and sound, and sorry for any inconvenience 🙏
`,
				"❗Reminder": `
❗Just a gentle reminder that your rental payment due date is *_today_*.

Pls help to transfer to our DBS Current Account: 100-904205-2 or PayNow (UEN) to 201629994W, or 💳 online at aloride.com/pay.

Thank you! 🙏
`,
				"📍Loc": `
📍We have only 1 collection location: HKL at 1008 Bukit Merah Lane 3 #01-24.

🕑 Our collection time is Mon-Sat 10am-6pm. Please *confirm* the time with us before coming.
`,
				"💵Pay": `
Upfront payment includes a Security Deposit ($200 for monthly rental, $100 for short term - refundable in 1 business day after you return the bike), plus the 1st rental payment.

Payment methods (NO ~CASH~): Bank transfer to our DBS account 1009042052 / NETS / PayNow (UEN: 201629994W) or 💳 online at aloride.com/pay.
`,
				"Collect": `Please look for James at HKL Lim to collect the bike. Pls remember to bring:

1. Your IC/NRIC/passport with proof of address
2. Your 2B driving license
3. 1st payment plus deposit ($200 for monthly rental, $100 for < 1 month rental)
				
Thank you! 🙏
`,
				"Terms": `
Please read carefully and agree with the below key terms summary before we proceed to book for bike collection:

  1. You have to pay all fines. For repair, unless it’s your fault, we cover for all servicing.
  2. In the case of ACCIDENT: You have to pay for all repair costs and excess liability upfront. You may later claim back this amount if the accident is caused by a 3rd-party. We will hold your deposit until the case is resolved.
  3. Late/non-payment is a serious violation of the contract. Rental term is counted until the bike is returned. Please contact us before the end date to extend the rental or to return the bike.
  4. Food delivery is allowed. Malaysia usage is allowed, but you will not get support outside Singapore.
  5. DO NOT MODIFY THE BIKE WITHOUT OUR CONSENT.
  6. In case of bike breakdown: • Properly park the bike (avoid parking ticket) • Put all keys inside the box (unlocked) • Send us the location of the bike for towing. We will then arrange a replacement bike for you. • If you are on a highway: Call EMAS at 1800 2255 582 to get free towing to the nearest parking place.
  7. If you rent for > 1 month: The penalty for early termination is equal to the 1 month rate.

Let me know if you agree with all of the above. Thank you! 🙏
`,
				"Return": `
Just a gentle reminder that your rental term is coming to an end. Believe that you like our rental service so far 😊 Do you want to extend your rental term? 

If yes, pls let me know. Else, please help return the bike to our shop: https://aloride.com/faq/return-bike

Thanks a lot for supporting AloRide! 🙏
`,
				"Reserve": `
If you want to get it, please transfer at least $100 to reserve the bike. The money will be deducted from the upfront payment. Otherwise, first come first serve.

Please note that you will need to collect the bike within 3 days. Else, the reservation money will be forfeited.

If you don't want to reserve then it's also ok. Before you come, please let me know so I can check the bike's availability. Thank you! 🙏
`,
				"Accident": `
In case of an accident:

1. Get the plate numbers, NRICs, phone numbers of all vehicles involved, and witnesses. Take photos.
2. If this is likely your fault, we recommend you to do a Private Settlement directly with the 3rd party to save time and money on insurance excess. Instructions at aloride.com/faq/accident ✊️
3. Call 999 to make a police report.
4. Send us your exact location through Whatsapp using aloride.com/locator 📍
5. Call James (HKL) at +65 9242 3895. He will instruct you on the next steps.

Please do not panic. We are experienced with this situation. Hope that you are safe and sound 😊
`,
				"Inspect": `
The annual inspection for your bike is due soon in 1 week. Could you help to bring the bike to any STA inspection centre soon? It costs under $20 and 10 minutes and we will pay you $25.

Recommended inspection centre: STA - 302 Sin Ming Rd. Also, we recommend you to bring the bike to our shop for a quick check before the inspection.

Thank you for your support! 🙏
`,
				"Logcard": `
You can download extra documents for food/delivery partner application at: https://aloride.com/resources/

Please follow the instructions there to download the logcard and insurance certificate.

Thank you! 🙏
`,
				"Emerg 👤": `
I got your contact from [xxxx] as he listed you as an emergency contact when signing the motorbike rental agreement.

I could not contact [xxxx] and he is owing to us [amount] on motorbike rental service.

Could you help me to reach him? Thanks for your help and sorry for any inconvenience caused! 🙏
`,
				"⭐️Review": `
Dear _,

Thank you for choosing AloRide for your motorcycle rental needs. Your satisfaction is important to us and we value your feedback ☺️ If you feel that we have met or exceeded your expectations, we would be grateful if you could leave us a good review on our social media pages:

Facebook: http://fb.com/aloride/reviews
Google: https://g.page/r/CZ9X5_d82tVTEAg/review

On completing your review with 5⭐, we would love to offer you $10 discount on your next rental as our sincere appreciation for your kind action, helping us to build a stronger network with our customers. Thank you again for your support!🙏
`,
				"Sorry!": `
Thank you for your feedback. We do truly apologise for the bad experience you had with AloRide. 😔

Please be assured that we will take your feedback seriously to improve our service. 🙏
`,
				"🛵Order": `
📣 *New bike collection request*

Model/plate: 
Contact: 
Collection 🕑: 
Period: from  to 
Rate:  per 
Deposit: $
💲Total: 
Customer paid: YES/NO

Thank you! 🙏
`,
				"🛵Exchange": `
📣 *Bike exchange request*

From plate no: 
⏩To plate no: 
Contact: 
Exchange 🕑: 

Thank you! 🙏
`,
				"🛵Tow": `
📣 *Towing request*

Model/plate: 
📍Location: 
Customer contact: 
Destination: HKL
Key: 

Thank you! 🙏
`,
				"📣Referral": `
We are running a referral program with AloRide motorbike rental!

For each successful referral with at least 1-month rental, we will send *$30* to your Paynow number. We can discuss more if your friends want to rent on a weekly basis.

Feel free to share this referral program with all of your networks. Thank you! 🙏
`,
				"🌟Promotion": `
We are running a special promotion this month for AloRide motorbike rental!

Rent a motorbike for only $300 per month if you sign up for a new rental. Available for a limited time only.

Guaranteed to be the cheapest in Singapore with legal commercial insurance for delivery/leisure. All purposes motorbike. It doesn't make sense to buy a new bike right? Just rent from us 🙏
`,
			};
			
			// DO NOT CHANGE CODE BELOW
			
			function injectButtons() {
				var jsButtons = document.getElementById("js-buttons");
				
				for (var title in templates) {
					var button = document.createElement("button");
					button.innerHTML = title;
					button.setAttribute('data-text', templates[title]);
					jsButtons.appendChild(button);
					button.addEventListener ("click", function() {
						document.getElementById("message").value = document.getElementById("message").value + this.getAttribute('data-text');
					});	
				}
			}
			
            function sendWhatsapp() {
                var phone = document.getElementById("phone").value;
            	phone = phone.replace(/[^0-9]/g, '');
                var text = document.getElementById("message").value + "%0A%0A" + document.getElementById("message_footer").value;
            	text = text.replace(/\n/g, '%0A');
				
				if (text.includes('[') && text.includes(']')) {
					alert('Please fill in the [bracket].');
					return;
				}
            	
            	window.open("https://wa.me/" + phone + "?text=" + text,"_self")
            }
			
			function availabilityText() {
	        	fetch('/aloride/availability.txt?v', { cache: "no-store"})
	        	  .then(function(response) {
	        	    response.text().then(function(availability) {
					  document.getElementById("message").value = document.getElementById("message").value 
  						+ "We have the following bike models available for rent now: " + availability + 
`.

May I know which *model* and *how long* do you want to rent? 🙏
`;
	        	    });
	        	 });
				 wpTracking("wsAvailability");
			}

			function clearText() {
			  document.getElementById("message").value = "";
			}
			
			function clearTip() {
			  document.getElementById("message_footer").value = "";
			}
			
            function love() {
            	alert("With lots of love from AloRide ♥");
            }
			
			function copyToClipBoard() {
				var copyText = document.getElementById("message");
				copyText.select();
				copyText.setSelectionRange(0, 99999);
				document.execCommand("copy");

				var tooltipReminder = "";
				var text = document.getElementById("message").value;
				if (text.includes('[') && text.includes(']')) {
					tooltipReminder = "\nRemember to fill in the [bracket]";
				}

				var tooltip = document.getElementById("myTooltip");
				tooltip.innerHTML = "Copied to clipboard!" + tooltipReminder;
			}

			function tooltipOutFunc() {
			  var tooltip = document.getElementById("myTooltip");
			  tooltip.innerHTML = "Copy to clipboard";
			}
			
			// Execute
			injectButtons();
			
			// Read inputs from request
			var phone = findGetParameter("phone");
			var send = findGetParameter("send");
			var template = findGetParameter("template");
			var message = findGetParameter("message");
			var customerName = findGetParameter("customerName");
			
			if (phone != null) {
				document.getElementById("phone").value = phone;
			}
			if (message != null) {
				document.getElementById("message").value = message;
			}
			if (template != null) {
				document.getElementById("message").value = templates[template];
			}
			if (customerName != null) {
				document.getElementById("message").value = "Hi " + customerName + " 👋\n" + document.getElementById("message").value;
			}
			if (send != null) {
				setTimeout(function(){
					sendWhatsapp(); 
				}, 1000); // 0.2 sec
			}
			
			// If send is set
			
			// If template is set
			
			function wpTracking(val) {
				// Tracking using WP Redirection
		       	fetch('/tracking/' + val + '?v', { cache: "no-store"});
			}

			function findGetParameter(parameterName) {
			    var result = null,
			        tmp = [];
			    location.search
			        .substr(1)
			        .split("&")
			        .forEach(function (item) {
			          tmp = item.split("=");
			          if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
			        });
			    return result;
			}
        </script>
        <style>
            body {
				background-color: #272e57;
				font-family: verdana;
				color: white;
            }
            button {
            	font-weight: bold;
				margin-right: 5px;
				height: 30px;
			}
            button:hover {
            }
			
			.tooltip {
			  position: relative;
			  display: inline-block;
			}

			.tooltip .tooltiptext {
			  visibility: hidden;
			  width: 140px;
			  background-color: #555;
			  color: #fff;
			  text-align: center;
			  border-radius: 6px;
			  padding: 5px;
			  position: absolute;
			  z-index: 1;
			  bottom: 150%;
			  left: 50%;
			  margin-left: -75px;
			  opacity: 0;
			  transition: opacity 0.3s;
			}

			.tooltip .tooltiptext::after {
			  content: "";
			  position: absolute;
			  top: 100%;
			  left: 50%;
			  margin-left: -5px;
			  border-width: 5px;
			  border-style: solid;
			  border-color: #555 transparent transparent transparent;
			}

			.tooltip:hover .tooltiptext {
			  visibility: visible;
			  opacity: 1;
			}
        </style>
    </body>
	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-83161526-1"></script>
	<script>
	  window.dataLayer = window.dataLayer || [];
	  window.dataLayer.push({
	   'formLocation': 'ws',
	   'event': 'ws_form_render'
	  });
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());

	  gtag('config', 'UA-83161526-1');
	</script>
</html>