@php
$site_path = "https://www.onlinelegalindia.com/";
@endphp  
@extends('layouts.master')
@section("content")
<section class="advocate_banner">
   <div class="container">
      <div class="row">
         <div class="col-md-5 col-sm-12">
            <div class="row">
               <div class="banner_image_text">
                  <img src="images/banner.svg" alt="banner" />
               </div>
               <div class="col-md-12 india_text">
                  <h4>India’s leading online legal service platform </h4>
               </div>
            </div>
         </div>
         <div class="col-md-7 col-sm-12">
            <div class="banner_image_text">
               <h4><span> Biggest opportunity for lawyers in India </span></h4>
               <h4>Let’s resolve legal cases together! Join as a verified advocate with Online Legal India</h4>
            </div>
            <div class="col-md-12 gstComp">
               <div class="row">
                  <div class="col-md-6">
                     <i><img src="https://www.onlinelegalindia.com/images/tick_gst.svg"></i>
                     <p>Generate more clients & cases of your area</p>
                  </div>
                  <div class="col-md-6">
                     <i><img src="https://www.onlinelegalindia.com/images/tick_gst.svg"></i>
                     <p>Display your specialty, experience and achievements</p>
                  </div>
                  <div class="col-md-12">
                     <i><img src="https://www.onlinelegalindia.com/images/tick_gst.svg"></i>
                     <p># Build your trust in the market by showcasing your Legal Abilities</p>
                  </div>
               </div>
            </div>
            <div class="col-md-12"> 
               <button class="coolBeans" onclick="resetFormdata()" data-toggle="modal" data-target="#myModal">Register Now</button>
            </div>
         </div>
      </div>
   </div>
</section>
<section id="whatDsc">
   <div class="container">
      <div class="row">
         <div class="whatdsc">
            <div class="col-md-6 col-sm-12 ">
               <div class="whatdsc_inner">
                  <div class="block_heading">
                     <h2>Online Legal India™ </h2>
                  </div>
                  <p>Online Legal India™ is the India’s best legal technology platform for lawyers & clients to connect in just a few clicks. You can enhance your profile by building up a relationship between you and your client by connecting directly and answering their queries and supporting them in the field of litigation.</p>
               </div>
            </div>
            <div class="col-md-6 col-sm-12 pull-right">
               <div class="subjectUser_img">
                  <img src="/images/law.jpg" alt="Digital Signature" />
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<section id="howWework" class="block_padding">
   <div class="container">
      <div class="row">
         <div class="block_heading">
            <h2 style="color: black" class="benifts-heading">How We Work?</h2>
         </div>
         <div class="col-sm-12 col-md-12">
            <div class="row">
               <div class="col-md-3 col-md-12">
                  <div class="process_section">
                     <i>1</i>
                     <h3>Complete Registration</h3>
                     <p>Fill the form &amp; Make the Payment</p>
                     <p>⟶</p>
                  </div>
               </div>
               <div class="col-md-3 col-md-12">
                  <div class="process_section">
                     <i>2</i>
                     <h3>Create Your Profile</h3>
                     <p>Create your profile with name, contact details, images, practice area & specialties etc.</p>
                     <p>⟶</p>
                  </div>
               </div>
               <div class="col-md-3 col-md-12">
                  <div class="process_section">
                     <i>3</i>
                     <h3>Waiting for Approval</h3>
                     <p>After submitting all the details you will be verified by Online Legal India.</p>
                     <p>⟶</p>
                  </div>
               </div>
               <div class="col-md-3 col-md-12">
                  <div class="process_section">
                     <i>4</i>
                     <h3>Get Connected With Clients</h3>
                     <p>Connect and communicate with potential clients online.</p>
                     <p>👍</p>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-sm-12 col-md-12">
            <div class="row">
            </div>
         </div>
      </div>
   </div>
</section>
<section id="whyUs" class="block_padding">
   <div class="container">
      <div class="row">
         <div class="block_heading">
            <h2>Why Us?</h2>
         </div>
         <div class="col-md-12 col-sm-12">
            <div class="row">
               <div class="col-md-4 col-sm-12">
                  <div class="hexagon_box">
                     <div class="hexagon">
                        <i>
                        <img src="services/include/image/recognized.svg" alt="recognized" />
                        </i>
                        <p>Recognized by Govt. of India</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 col-sm-12">
                  <div class="hexagon_box">
                     <div class="hexagon">
                        <i>
                        <img src="services/include/image/happy_customers.svg" alt="recognized" />
                        </i>
                        <p>1 Lakh+ Happy Customers Across India</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 col-sm-12">
                  <div class="hexagon_box">
                     <div class="hexagon iso_sign">
                        <i>
                        <img src="services/include/image/iso-mark.png" alt="recognized" />
                        </i>
                        <p>ISO Certified</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 col-sm-12">
                  <div class="hexagon_box">
                     <div class="hexagon">
                        <i>
                        <img src="services/include/image/data_security.svg" alt="recognized" />
                        </i>
                        <p>Data Security & Trust</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 col-sm-12">
                  <div class="hexagon_box">
                     <div class="hexagon">
                        <i>
                        <img src="services/include/image/experts.svg" alt="recognized" />
                        </i>
                        <p>Trained & Professional Experts</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 col-sm-12">
                  <div class="hexagon_box">
                     <div class="hexagon">
                        <i>
                        <img src="services/include/image/on-time.svg" alt="recognized" />
                        </i>
                        <p>On Time Service </p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 col-sm-12">
                  <div class="hexagon_box">
                     <div class="hexagon">
                        <i>
                        <img src="services/include/image/quick.svg" alt="recognized" />
                        </i>
                        <p>Super Fast Service</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 col-sm-12">
                  <div class="hexagon_box">
                     <div class="hexagon">
                        <i>
                        <img src="services/include/image/24h.svg" alt="recognized" />
                        </i>
                        <p>24x7 Platform</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 col-sm-12">
                  <div class="hexagon_box">
                     <div class="hexagon affordable_sign">
                        <i>
                        <img src="services/include/image/affordable.svg" alt="recognized" />
                        </i>
                        <p>Affordable Than Other Professionals</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<!--modal start-->
<div id="register">
   <div class="modal fade" id="myModal" data-backdrop="static" role="dialog">
      <div class="modal-dialog ">
         <div class="modal-content">
            <div class="modal-body">
               <button type="button" class="close" data-dismiss="modal">&times;</button>    
               <div class="col-md-12 col-sm-12 register_form dsc_form">
                  <form id="contact" onsubmit="return ValidateFirstStep(event)" method="post" enctype="multipart/form-data">
                     @csrf 
                     <h3>Register Now</h3>
                     <!--<h4>Submit Your Complaint Here</h4>-->
                     <section id="first_step">
                        <div class="row">
                           <div class="col-md-12 col-sm-12">
                              <div class="alert alert-danger" style="display:none"></div>
                              <fieldset>
                                 <label>Name</label>
                                 <input  placeholder="Name" id="name" class="form-control" name="name" value="{{ old('name') }}" required autocomplete="false" autofocus type="text">
                              </fieldset>
                           </div>
                           <div class="col-md-12 col-sm-12">
                              <fieldset>
                                 <label>Email</label>
                                 <input  placeholder="Email" id="email" class="form-control" name="email" value="{{ old('email') }}" required autocomplete="false" type="email">
                              </fieldset>
                           </div>
                           <div class="col-md-12 col-sm-12">
                              <fieldset class="areacode">
                                 <label>Mobile</label>
                                 <span>+91</span>  <input placeholder="Phone Number" id="mobile" class="form-control" name="mobile" value="{{ old('mobile') }}" required autocomplete="false"  type="text">
                              </fieldset>
                           </div>
                           <div class="col-md-12 col-sm-12">
                              <fieldset>
                                 <label>Password</label>
                                 <input  placeholder="Password" id="password" class="form-control" name="password" required type="password">
                              </fieldset>
                           </div>
                           <div class="col-md-12 col-sm-12">
                              <fieldset>
                                 <label>Confirmed Password</label>
                                 <input  placeholder="Confirmed Password" id="password-confirm" class="form-control" name="password_confirmation" required type="password">
                              </fieldset>
                           </div>
                           <div class="col-md-12 col-sm-12">
                              <fieldset class="button_box">
                                 <button class="btn btn-success pull-right" >Submit</button>
                              </fieldset>
                           </div>
                        </div>
                     </section>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!--modal end-->
<div id="register">
   <div class="modal fade" id="myModalotp" data-backdrop="static" role="dialog">
      <div class="modal-dialog ">
         <div class="modal-content">
            <div class="modal-body">
               <button type="button" class="close" data-dismiss="modal">&times;</button>    
               <div class="col-md-12 col-sm-12 register_form dsc_form">
                  <form id="contact" onsubmit="return Validateotp(event)"  method="post"  enctype="multipart/form-data">
                     @csrf 
                     <h3>Account Verification</h3>
                     <section id="first_step">
                        <div class="row">
                           <div class="col-md-12 col-sm-12">
                              <div class="alert alert-danger" style="display:none"></div>
                              <fieldset>
                                 <label>OTP</label>
                                 <input  placeholder="OTP" id="otp" class="form-control" name="otp"  required autocomplete="false" autofocus type="text">
                              </fieldset>
                              <input type="hidden" name="email" id="emailotp">
                           </div>
                           <div class="col-md-12 col-sm-12">
                              <fieldset class="button_box">
                                 <button class="btn btn-success pull-right" >Submit</button>
                              </fieldset>
                           </div>
                        </div>
                     </section>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>


<script type = 'text/javascript'src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js' > </script>
<script type = 'text/javascript'src = 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js'> </script>
<script type = 'text/javascript'src = "{{asset('js/header.js')}}" ></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" > </script>
<script src = "http://jqueryvalidation.org/files/dist/jquery.validate.min.js" > </script> 
<script src = "http://jqueryvalidation.org/files/dist/additional-methods.min.js" > </script> 
<script >
	$('.collapsed').click(function () {
		var id_show = $(this).attr('data-port');
		location.href = "#" + id_show;
		$('#' + id_show).addClass('in');
		$('.custom_close').removeClass('in');

   }); 
</script>
<script >
	function SearchAvailableTrademark() {
		var keyword_search = $("#TrademarkKeyword").val();
		if (keyword_search == "") {
			alert("Please type your Trademark Name");
		} else {
			$('#Covid19').modal('hide');
			$("#trmk_name").text(keyword_search);
			$('#TrademarkPopup').modal('show');
		}
	}

function CloseTmrPopup() {
	$('#TrademarkPopup').modal('hide');
	location.href = "#contact";
}

function SkipPopupBox() {
	$('#Covid19').modal('hide');
} 
</script>
<!--Start of Tawk.to Script-->
<script type = "text/javascript" >
	var Tawk_API = Tawk_API || {},
		Tawk_LoadStart = new Date();
(function () {
	var s1 = document.createElement("script"),
		s0 = document.getElementsByTagName("script")[0];
	s1.async = true;
	s1.src = 'https://embed.tawk.to/5d7c8e839f6b7a4457e1a085/default';
	s1.charset = 'UTF-8';
	s1.setAttribute('crossorigin', '*');
	s0.parentNode.insertBefore(s1, s0);
})();

</script> 
<script >
	function resetFormdata() {
		$("#contact").trigger("reset");
	}
$(document).ready(function () {
	$("#mobile").keypress(function (e) {
		if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
			return false;
		}
	});
});

function ValidateFirstStep(event) {
	event.preventDefault();
	var email = $("#email").val();
	var name = $("#name").val();
	var mobile = $("#mobile").val();
	var password = $("#password").val();
	var confirmpassword = $("#password-confirm").val();
	var _token = "{{ csrf_token() }}";
	var mobilelen = mobile.length;
	var errorflag = true;
	if (name == "") {
		$("#name").css('border-color', 'red');
		return errorflag = false;
	}
	if (mobile == "" || mobilelen != 10) {
		$("#mobile").css('border-color', 'red');
		return errorflag = false;
	}
	if (password != confirmpassword) {
		$("#password").css('border-color', 'red');
		$("#password-confirm").css('border-color', 'red');
		alert('Confirmed Password dose not Match')
		return errorflag = false;
	}
	if (email == "" || IsEmail(email) == false) {
		$("#email").css('border-color', 'red');
		return errorflag = false;
	}
	if (password == "") {
		$("#password").css('border-color', 'red');
		return errorflag = false;
	}

	if (errorflag == true) {
		$(".ajax-loading-class").css('opacity', '0.5');
		$.ajax({
			type: 'POST',
			url: 'form/submit',
			data: {
				name: name,
				mobile: mobile,
				email: email,
				password: password,
				_token: _token
			},
			success: function (data) {
				$.each(data.errors, function (key, value) {
					alert(value);
				});
				if (data.msg != '') {
					alert(data.msg);
					$('#myModal').modal('hide');
					$('#myModalotp').modal('show');
					$("#emailotp").val(data.email);
				}
			}
		});
	}

	function IsEmail(email) {
		var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		if (!regex.test(email)) {
			return false;
		} else {
			return true;
		}
	}
}

function Validateotp(event) {
	event.preventDefault();
	var email = $("#emailotp").val();
	var otp = $("#otp").val();
	var _token = "{{ csrf_token() }}";

	$(".ajax-loading-class").css('opacity', '0.5');
	$.ajax({
		type: 'POST',
		url: 'otp/submit',
		data: {
			otp: otp,
			email: email,
			_token: _token
		},
		success: function (data) {
			if (data.status == 1) {
				alert(data.msg);
				window.location.href = 'detail/registration';
			} else {
				alert(data.msg);
			}
		}
	});
} 
</script>
</html>
@endsection