<!--MAIN CONTENT-->
<?php

$merchantInfo = $this->session->userdata('merchantInfo');
if (isset($merchantInfo['merchant_photo_bg']) &&  $merchantInfo['merchant_photo_bg']) {
     $bg_img = $merchantInfo['merchant_photo_bg'];
} else {
    $bg_img = 'https://www.loveeatery.co.nz/assets/images/banner.jpg';
}
$resturantInfo = $this->session->userdata('resturantInfo');
//p($resturantInfo);
?>

<!--?= @$this->session->merchantInfo['recaptcha_site_key']; ?>-->
<!--?= @$this->session->merchantInfo['recaptcha_secret_key']; ?>-->

<div class="mobile-banner-wrap relative">
	<div class="layer"></div>
	<!--<img class="mobile-banner" src="<?php echo base_url(''); ?>assets/images/top_bg.jpg" style="height: 200px; object-fit: cover;">-->
	<img class="mobile-banner" src="<?= $bg_img; ?>" style="height: 200px; object-fit: cover;">
</div>

    <!--<div id="parallax-wrap" class="parallax-search" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="<?php echo base_url(''); ?>assets/images/top_bg.jpg">-->
    <div id="parallax-wrap" style= "background-image: url(<?= $bg_img; ?>)" class="parallax-search" data-parallax="scroll" data-position="top" data-bleed="10">



	<div class="search-wraps">
		<h1>Login &amp; Signup</h1>
		<p>sign up to start ordering</p>
	</div> <!--search-wraps-->

</div> <!--parallax-container-->
<input type="hidden" value="PH" name="mobile_country_code" id="mobile_country_code">
<div class="sections section-grey2 section-checkout">

	<div class="container">

		<div class="row">
			<!--LEFT CONTENT-->
			<?php if($this->session->flashdata('success')){ ?>
				<div class="alert alert-success">
					<?php 
					echo $this->session->flashdata('success'); ?>
				</div>
				<?php unset($_SESSION['success']);
					?>.
			<?php } ?>
			<?php if($this->session->flashdata('error')){ ?>
				<div class="alert alert-danger">
					<?php 
					echo $this->session->flashdata('error'); ?>.
				</div>
				<?php unset($_SESSION['error']);
					?>.
			<?php } ?>
            <?php if($this->session->flashdata('form_msg')){ ?>
                <div class="alert alert-danger">
                    <?php 
					echo $this->session->flashdata('form_msg'); ?>.
                </div>
                <?php unset($_SESSION['form_msg']);
					?>.
            <?php } ?>
			<div class="col-md-6 border">

				<div class="box-grey rounded">
					<div class="section-label bottom20">
						<a class="section-label-a">
							<i class="ion-android-contact i-big"></i>
							<span class="bold" style="background:#fff;">
			  Log in to your account</span>
							<b></b>
						</a>
					</div>



					<form id="forms-1" class="needs-validation forms has-validation-callback" method="POST" action="<?php echo base_url('site/login') ?>" novalidate>
						<input type="hidden" value="" name="http_referer" id="http_referer">
						<div class="row top10">
							<div class="col-md-12 ">
								<input class="grey-fields" placeholder="Mobile number or email" type="text" value="" name="username" id="username" required>
								<div class="invalid-feedback">
									Mobile number or email field is required.
								</div>
							</div>
						</div>
						<!--row-->
						<div class="row top10">
							<div class="col-md-12 ">
								<input  class="grey-fields" placeholder="Password" type="password" value="" name="password" id="login-password" required>
								<div class="invalid-feedback">
									Password field is required.
								</div>
							</div>
						</div>
						<!--row-->
						<div class="row top15">
							<div class="col-md-6">
								<a href="javascript:;" class="forgot-pass-link2 block orange-text text-center">
									Forgot Password <i class="ion-help"></i>
								</a>
							</div>
							<div class="col-md-6">
								<input  type="submit" value="Login"  class="green-button medium full-width">
							</div>
						</div>
					</form>
				</div> <!--box-grey-->

				<form id="forms-2" class="needs-validation forms has-validation-callback" method="POST" action="<?php echo base_url('site/forgotpassword') ?>" novalidate>
					<div class="section-forgotpass">
						<div class="box-grey rounded">
							<div class="section-label bottom20">
								<a class="section-label-a">
									<i class="ion-unlocked i-big"></i>
									<span class="bold" style="background:#fff;">
									  Forgot Password</span>
									<b></b>
								</a>
							</div>
							<div class="row top15">
								<div class="col-md-12 ">
									<input class="grey-fields" placeholder="Email address" type="text" value="" name="username-email" id="username-email" required>
									<div class="invalid-feedback">
										Email address field is required.
									</div>
								</div>
							</div> <!--row-->
							<input type="submit" value="Retrieve Password" class="top10 green-button medium full-width">

							<div class="top10">
								<a href="javascript:;" class="back-link  orange-text text-center">
									Close			   </a>
							</div>


						</div> <!--box-grey-->
					</div> <!--section-forgotpass-->
				</form>


			</div> <!--col-->
			<!--END LEFT CONTENT-->

			<!--RIGHT CONTENT-->
			<div class="col-md-6 border">

				<div class="box-grey rounded top-line-green">

					<form id="forms-3" class="needs-validation forms has-validation-callback" method="POST" action="<?php echo base_url('site/signup') ?>" novalidate>

						<div class="section-label bottom20">
							<a class="section-label-a">
								<i class="ion-compose i-big green-color"></i>
								<span class="bold" style="background:#fff;">
			  Sign up</span>
								<b></b>
							</a>
						</div>

						<div class="row top10">
							<div class="col-md-12 ">
								<input class="grey-fields" placeholder="First Name" required="required" type="text" value="" name="first_name" id="first_name">
								
							</div>
						</div> <!--row-->

						<div class="row top10">
							<div class="col-md-12 ">
								<input class="grey-fields" placeholder="Last Name" required="required" type="text" value="" name="last_name" id="last_name">
								
							</div>
						</div> <!--row-->

						<div class="row top10">
							<div class="col-md-12 ">
								<div class="intl-tel-input"><input class="grey-fields mobile_inputs" placeholder="Mobile" required="required" type="tel" pattern="[0-9]{10}" value="" name="contact_phone" id="contact_phone" autocomplete="off">
									

									
                                </div>
                            </div>
                        </div> <!--row-->

						<div class="row top10">
							<div class="col-md-12 ">
								<input class="grey-fields" placeholder="Email address" required="required" type="email" value="" name="email_address" id="email_address">
								
							</div>
						</div> <!--row-->

						<div class="row top10">
							<div class="col-md-12 ">
								<input class="grey-fields" placeholder="Password" required="required" type="password" value="" name="password" id="signup_password">
								
							</div>
						</div> <!--row-->

						<div class="row top10">
							<div class="col-md-12 ">
								<input class="grey-fields" placeholder="Confirm Password" required="required" type="password" value="" name="cpassword" id="cpassword">
								
							</div>
						</div> <!--row-->

						<p class="text-muted">
							By creating an account, you agree to receive sms from vendor.         </p>
							
           <input type="hidden" name="recaptcha_response" value="" id="recaptchaResponse">

						<div class="row top10">
							<div class="col-md-12 ">
								<input type="submit" value="Create Account" class="orange-button medium block full-width">
							</div>
						</div>

					</form>
				</div> <!--box-grey-->


			</div> <!--col-->
			<!--END RIGHT CONTENT-->

		</div> <!--row-->

	</div> <!--container-->

</div> <!--section-grey-->

<script>
	    grecaptcha.ready(function () {
               grecaptcha.execute('<?= @$this->session->merchantInfo['recaptcha_site_key']; ?>', { action: 'frm1' }).then(function (token) {
                   var recaptchaResponse = document.getElementById('recaptchaResponse');
                
                   recaptchaResponse.value = token;
               });
	        
	    });
	    
	</script>
<script>

		$(document).on("click", ".forgot-pass-link2", function () {
			$(".section-forgotpass").fadeIn();
		});

		$( document ).on( "click", ".back-link", function() {
			$(".section1").fadeIn();
			$(".section2").hide();
			$(".section3").hide();
			$(".section-forgotpass").hide();
		});

		$(function () {
			$(".mobile_inputs").intlTelInput({
				autoPlaceholder: false,
				defaultCountry: $("#mobile_country_code").val(),
				autoHideDialCode: false,
				nationalMode: false,
				autoFormat: false,
				//onlyCountries: ["ph"],
				utilsScript: "assets/js/util.js"
			});
		})


</script>
