<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<link rel="stylesheet" type="text/css" href="<?=base_url('assets/css/contact-us.css');?>">


<?php
$conatctus_data = getWebSyncsData('Contactus Settings', 'contactusSettings', '');
?>
<main id="main"  style="background-image: url(<?=base_url('assets/img/elegant-background-with-mandala.png');?>);background-size: auto;" class="pt-4">
	<section class="">

		<div class="container my-0">
			<!--Section heading-->

			<div class="row m-0 px-2 py-4">
				<!--Grid column-->
				<div class="col-md-4 p-0">
					<center> <h2 id="temple-services" class="text-center bottomborder">	Get In Touch</h2> </center><br>
					<div class="row m-0 p-0">
						<div class="col-md-12  py-2">
							<div class="row">
								<div class="col-md-12">
									<div class="row mx-4">
										<div class="col-md-12"><h4><b><?=GetProjectName();?></b></h4></div>
									</div>
									<div class="row m-4">
										<div class="col-md-2 px-0"><i class="contact-icons fa fa-map-marker"></i></div>
										<div class="col-md-9 px-0"><?= (isset($conatctus_data[0]['refDataName']) && $conatctus_data[0]['refDataName']) != '' ? $conatctus_data[0]['refDataName'] : ''?></div>
									</div>
									<div class="row m-4">
										<div class="col-md-2 px-0"><i class="contact-icons fa fa-phone"></i></div>
										<div class="col-md-9 px-0"><?= (isset($conatctus_data[0]['templePhone']) && $conatctus_data[0]['templePhone']) != '' ? '+1 '.formatPhoneNumber($conatctus_data[0]['templePhone']) : ''; ?></div>
									</div>
									<div class="row m-4">
										<div class="col-md-2 px-0"><i class="contact-icons fa fa-envelope"></i></div>
										<div class="col-md-9 px-0"><?= (isset($conatctus_data[0]['templeEmail']) && $conatctus_data[0]['templeEmail']) != '' ? $conatctus_data[0]['templeEmail'] : ''?></div>
									</div>
									<div class="row m-4">
										<div class="col-md-12"><h4><b>For Priest Services</b></h4></div>
									</div>
									<div class="row m-4">
										<div class="col-md-3 my-2"><i class="contact-icons fa fa-phone"></i></div>
										<div class="col-md-9"><span class="fw-bold"><?= (isset($conatctus_data[0]['priestName1']) && $conatctus_data[0]['priestName1']) != '' ? $conatctus_data[0]['priestName1'] : ''?></span><br> 
											<a href="tel:<?= (isset($conatctus_data[0]['priestPhone1']) && $conatctus_data[0]['priestPhone1']) != '' ? '+1 '.formatPhoneNumber($conatctus_data[0]['priestPhone1']) : ''?>"><?= (isset($conatctus_data[0]['priestPhone1']) && $conatctus_data[0]['priestPhone1']) != '' ? '+1 '.formatPhoneNumber($conatctus_data[0]['priestPhone1']) : ''?></a></div>
										</div>
									</div>

									<div class="col-md-12 mx-2">
										<h4><b>Follow Us</b></h4>
										<span class="" style="position:absolute!important;    margin-top: -12px!important; width: 50px!important;"></span>
										<a href="<?= (isset($conatctus_data[0]['facebookLink']) && $conatctus_data[0]['facebookLink']) != '' ? $conatctus_data[0]['facebookLink'] : 'javascript:void(0)'?>"><i class="contact-icons fa fa-facebook"></i></a>
										
										<a href="<?= (isset($conatctus_data[0]['youtubeLink']) && $conatctus_data[0]['youtubeLink']) != '' ? $conatctus_data[0]['youtubeLink'] : 'javascript:void(0)'?>"><i class="contact-icons fa fa-youtube"></i></a>

										<a href="<?= (isset($conatctus_data[0]['twitterLink']) && $conatctus_data[0]['twitterLink']) != '' ? $conatctus_data[0]['twitterLink'] : 'javascript:void(0)'?>"><i class="contact-icons fa fa-twitter"></i></a>

									</div>
								</div>
							</div>
						</div>

					</div>

					<!--Grid column-->
					<div class="col-md-8 p-0">
						<h2 id="temple-services" class="text-center bottomborder">Contact Us</h2>
						<form id="contact-form" name="contact-form" action="<?=base_url('send/your-query')?>" method="POST">
							<?php 
							if ($this->session->flashdata('failure')) {
								echo "<div class='alert alert-danger alert-dismissible fade show text-center'><strong></strong>".$this->session->flashdata('failure')."<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button></div>";
							}
							if ($this->session->flashdata('success')) {
								echo "<div class='alert alert-success alert-dismissible fade show text-center'><strong></strong>".$this->session->flashdata('success')."<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button></div>";
							}
							?>
							<!--Grid row-->
							<div class="row">
								<!--Grid column-->
								<div class="col-md-6">
									<div class="md-form mb-0">
										<input type="text" id="fname" name="fname" class="form-control" placeholder="First Name*" required>
									</div>
								</div>
								<div class="col-md-6">
									<div class="md-form mb-0">
										<input type="text" id="lname" name="lname" class="form-control" placeholder="Last Name*" required>
									</div>
								</div>

							</div>
							<div class="row">
								<div class="col-md-6">
									<div class="md-form mb-0">
										<input type="email" id="email" name="email" class="form-control" placeholder="Email*" required>
									</div>
								</div>

								<div class="col-md-6">
									<div class="md-form mb-0">
										<input id="phone" type="text" name="phone" class="form-control" placeholder="Phone Number*" required />

									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">

									<div class="md-form mb-0">
										<input type="text" class="form-control" name="address" id="address" placeholder="Address" required />
									</div>

								</div>
							</div>
							<div class="row">
								
								<div class="col-md-4">
									<div class="md-form mb-0">
										
										<select class="form-control form-select " name="state" id="stateSelect">
											<option value="" selected disabled>Select State</option>
											<?php
											$GetState = GetState();
											$keys = array_column($GetState, 'refDataName'); 
											array_multisort($keys, SORT_ASC, $GetState);

											foreach ($GetState as $state) { ?>
												<option value="<?=@$state->refDataName?>"><?=@$state->refDataName?></option>
											<?php } ?>
										</select>

									</div>
								</div>
								<div class="col-md-4">
									
									<div class="md-form mb-0">

										<select class="form-control form-select" name="city" id="city" >
											<option value="" selected disabled>Select City</option>
										</select>
									</div>

								</div>

								<div class="col-md-4">

									<div class="md-form mb-0">

										<input type="text" class="form-control" name="zipcode" placeholder="Zipcode" />
									</div>

								</div>
								<div class="col-md-4">
									<div class="md-form mb-0">
										<select class="form-control form-select " name="regardingTypes" id="regardingTypes">
											<option value=" " selected disabled>Regarding</option>
											<?php
											$RegardingTypes = RegardingTypes();
											$keys = array_column($RegardingTypes, 'refDataName'); 
											array_multisort($keys, SORT_ASC, $RegardingTypes);

											foreach ($RegardingTypes as $regarding) { ?>
												<option value="<?=@$regarding->refDataName?>"><?=@$regarding->refDataName?></option>
											<?php } ?>
										</select>
									</div>

								</div>
							</div>
							
							<div class="row">

								

								<div class="col-md-12">

									<div class="md-form">
										<textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea" placeholder="Your Comments*" required></textarea>
									</div>

								</div>

								<div class="col-md-6">
									<div class="md-form mx-2">
										<div class="g-recaptcha" data-sitekey="6LdJ_7EnAAAAABrUBeevWReokh9uIecIz4zdev0Z"></div>
									</div>
								</div>
							</div>

							<center class="my-3">
								
								<button class="btn text-white submitbtn" type="submit" style="color: #635C81; border-radius: 20px;  border-color: white; background: #008080 !important; box-shadow: 1px 1px 10px #7e455561;padding: 5px 30px;">SUBMIT</button>
								<button class="btn btn-primary text-white clearbtn" type="reset" style="color: black; border-radius: 20px;  border-color: white; background: #B02135; !important; box-shadow: 1px 1px 10px #7e455561;padding: 5px 30px;">CLEAR</button>

							</center>
						</form>
					</div>
					<!--Grid column-->

					<div class="col-md-12" style="margin-top:40px">
							<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3524.037988096472!2d-82.4595160238799!3d27.96212281420721!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c2c4664f4f0e57%3A0xa7c98b9bdbead57b!2sHindu%20Sanatan%20Mandir%20Tampa!5e0!3m2!1sen!2sin!4v1704260395504!5m2!1sen!2sin" width="100%" height="300px" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
					</div>
				</div>
			</div>

		</section>
	</main>

	<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
	async defer>
</script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">

	function phone_formatting(ele,restore) {
		var new_number,
		selection_start = ele.selectionStart,
		selection_end = ele.selectionEnd,
		number = ele.value.replace(/\D/g,'');

  // automatically add dashes
		if (number.length > 2) {
    // matches: 123 || 123-4 || 123-45
			new_number = number.substring(0,3) + '-';
			if (number.length === 4 || number.length === 5) {
      // matches: 123-4 || 123-45
				new_number += number.substr(3);
			}
			else if (number.length > 5) {
      // matches: 123-456 || 123-456-7 || 123-456-789
				new_number += number.substring(3,6) + '-';
			}
			if (number.length > 6) {
      // matches: 123-456-7 || 123-456-789 || 123-456-7890
				new_number += number.substring(6);
			}
		}
		else {
			new_number = number;
		}

  // if value is heigher than 12, last number is dropped
  // if inserting a number before the last character, numbers
  // are shifted right, only 12 characters will show
		ele.value =  (new_number.length > 12) ? new_number.substring(12,0) : new_number;

  // restore cursor selection,
  // prevent it from going to the end
  // UNLESS
  // cursor was at the end AND a dash was added
		document.getElementById('msg').innerHTML='<p>Selection is: ' + selection_end + ' and length is: ' + new_number.length + '</p>';

		if (new_number.slice(-1) === '-' && restore === false
			&& (new_number.length === 8 && selection_end === 7)
			|| (new_number.length === 4 && selection_end === 3)) {
			selection_start = new_number.length;
		selection_end = new_number.length;
	}
	else if (restore === 'revert') {
		selection_start--;
		selection_end--;
	}
	ele.setSelectionRange(selection_start, selection_end);

}

function phone_number_check(field,e) {
	var key_code = e.keyCode,
	key_string = String.fromCharCode(key_code),
	press_delete = false,
	dash_key = 189,
	delete_key = [8,46],
	direction_key = [33,34,35,36,37,38,39,40],
	selection_end = field.selectionEnd;

  // delete key was pressed
	if (delete_key.indexOf(key_code) > -1) {
		press_delete = true;
	}

  // only force formatting is a number or delete key was pressed
	if (key_string.match(/^\d+$/) || press_delete) {
		phone_formatting(field,press_delete);
	}
  // do nothing for direction keys, keep their default actions
	else if(direction_key.indexOf(key_code) > -1) {
    // do nothing
	}
	else if(dash_key === key_code) {
		if (selection_end === field.value.length) {
			field.value = field.value.slice(0,-1)
		}
		else {
			field.value = field.value.substring(0,(selection_end - 1)) + field.value.substr(selection_end)
			field.selectionEnd = selection_end - 1;
		}
	}
  // all other non numerical key presses, remove their value
	else {
		e.preventDefault();
//    field.value = field.value.replace(/[^0-9\-]/g,'')
		phone_formatting(field,'revert');
	}

}

document.getElementById('phone').onkeyup = function(e) {
	phone_number_check(this,e);
}



window.addEventListener('load', () => {
	const $recaptcha = document.querySelector('#g-recaptcha-response');
	if ($recaptcha) {
		$recaptcha.setAttribute('required', 'required');
	}
})

$('#stateSelect').change(function(){

	var stateCode = $(this).val();
	$.ajax({
		url:"<?= base_url('Home/GetCity') ?>",
		type: "POST",
                    // dataType: "json",
		data : {'stateCode':stateCode},
		success: function(data) 
		{
			$("#city").html(data);
		}             
	});

});

// $('#stateSelect, #city, #VolunteerArea').select2()
$(document).ready(function() {
	window.scrollTo({ top: 140, behavior: 'smooth'});
});
</script>

<?php $this->load->view('includes/footer.php') ?>
<?php $this->load->view('includes/script.php') ?>