<?php

require('constant.php');

?>

<!DOCTYPE html>

<html lang="en">

<link href="css/mdb.css" rel="stylesheet">

<link href="css/font-awesome.css" rel="stylesheet">

<link href="style.css" type="text/css" rel="stylesheet" />



<head>

	<title>Synapse</title>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="component/jquery/jquery-3.2.1.min.js"></script>



	<script>

	$(document).ready(function (e){

		$("#frmContact").on('submit',(function(e){

			e.preventDefault();

			$("#mail-status").hide();

			$('#send-message').hide();

			$('#loader-icon').show();

			$.ajax({

				url: "contact.php",

				type: "POST",

				dataType:'json',

				data: {

				"senderid":$('input[name="senderid"]').val(),

				"phone":$('input[name="phone"]').val(),

				"g-recaptcha-response":$('textarea[id="g-recaptcha-response"]').val()},				

				success: function(response){

				$("#mail-status").show();

				$('#loader-icon').hide();

				if(response.type == "error") {

					$('#send-message').show();

					$("#mail-status").attr("class","error");				

				} else if(response.type == "message"){

					$('#send-message').hide();

					$("#mail-status").attr("class","success");

					setTimeout(function(){

                    location.reload();

                    }, 5000);							

				}

				$("#mail-status").html(response.text);	

				},

				error: function(){} 

			});

		}));

	});

	</script>



	<style>

	.label {margin: 2px 0;}

	.field {margin: 0 0 20px 0;}	

		.content {width: 600px;margin: 0 auto; background:#ffffff; padding:20px;}

		h1, h2 {font-family:"Helvetica", Times, serif;font-weight: normal;}

		div#central {margin: 40px 0px 100px 0px;}

		@media all and (min-width: 768px) and (max-width: 979px) {

		.content {width: 750px;}

		body {background-image:url(img/bg.jpg); -webkit-background-size: cover;

		-moz-background-size: cover;

		-o-background-size: cover;

		background-size: cover;

		 height: 100%;

overflow: hidden;

	   }

   }

		@media all and (max-width: 767px) {

		html{ height:100%; overflow:auto;}

			body {margin: 0 auto;word-wrap:break-word; background-image:url(img/bg.jpg); -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover; height:100%; overflow:auto;

   }

   

   

			.content {width:auto; padding:20px;}

			div#central {	margin: 40px 20px 100px 20px;}

			.g-recaptcha {margin: 0 0 25px 0;}

			}

			

			

		body {font-family: 'Helvetica',Arial,sans-serif;background:#ffffff;margin: 0 auto;-webkit-font-smoothing: antialiased;  font-size: initial;line-height: 1.7em;

		background-image:url(img/bg.jpg); background-size:cover; background-attachment:fixed;background-repeat: no-repeat; height:100%}	

		

		

		input, textarea {width:100%;padding: 15px;font-size:1em;border: 1px solid #A1A1A1;	}

		button {

			padding: 12px 60px;

			background: #5BC6FF;

			border: none;

			color: rgb(40, 40, 40);

			font-size:1em;

			font-family: "Helvetica", Times, serif;

			cursor: pointer;	

		}

		#message {  padding: 30px 40px 0px 25px; }

		#mail-status {

			padding: 12px 20px;

			width: 100%;

			display:none; 

			font-size: 1em;

			font-family: "Helvetica", Times, serif;

			color: #000000;

			margin-bottom: 20px;

		}

	  .error{background-color: #ffffff;  margin-bottom: 40px; color:#ff0000 !important;}

	  .success{background-color: #48e0a4; color:#000000 !important }

		.g-recaptcha {margin: 0 0 25px 0;}	  

	</style>

	<script src='https://www.google.com/recaptcha/api.js'></script>	

</head>

<body>

<div  id="central" class="col-md-6 col-sm-6 mb-4 cnt" style="margin:0 auto;">

<div class="card">

<h5 class="card-header info-color white-text text-center py-4">

                   <div align="center"><strong>Optout of promotional SMS</strong></div>

                </h5>

				<div id="message" class="card-body px-lg-5">

				<form id="frmContact" action="" method="POST" novalidate="novalidate">

				

				<div class="md-form mt-3">

                            <input type="text" id="phone" name="phone" class="form-control" maxlength="12" placeholder="971445356247" autocomplete="off" required title="Mobile Number should only contain numbers e.g. 971445356247">

                            <label for="phone">Mobile Number <span class="text-danger">*</span> </label>

                        </div></br>

	<div class="md-form mt-3">

                            <input type="text" id="senderid" name="senderid" class="form-control" placeholder="VM999" autocomplete="off" maxlength="11" title="Sender ID should only contain alphanumeric & - e.g. Sender-& 45">

                            <label for="senderid">Sender ID </label>

                        </div>



		<!-- <div class="g-recaptcha" data-sitekey="<?php echo SITE_KEY; ?>"></div>		-->

		<div id="mail-status"></div>			

			<button id="send-message" class="btn btn-info btn my-4 waves-effect z-depth-0" type="submit">Submit</button>

		</form>

				

				</div>



</div>

</div>



	<script src="js/jquery.min.js"></script>

    <script src="js/bootstrap.js"></script>

    <script src="js/mdb.js"></script>



</body>

</html>