@php
$site_path = "https://www.onlinelegalindia.com/";
@endphp  
@extends('layouts.master')
@section("content")    
<section class="advocate_banner_inner">
   <div class="container">
      <div class="row">
         <div class="col-md-12 col-sm-12">
            <div class="advocateBanner_inner_heading">
               <h4><span> Biggest opportunity for lawyers in India </span></h4>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="advocate_details_form">
   <div class="container">
      <div class="row">
         <div class="col-md-12 col-sm-12 register_form">
            <div id="register">
               <form id="contact" onsubmit="return ValidCaptcha();" action="{{route('registration-submit')}}" method="post" enctype="multipart/form-data">
                    @csrf  
                <h3>Advance opptions</h3>
                  <section id="first_step">
                     <div class="row">
                        <div class="col-md-4 col-sm-12">
                           <fieldset>
                              <label>State</label>
                              <select name="state" required="">
                                 <option value="">State</option>
                                 @foreach ($states as $state)
                                 <option value="{{$state->id}}">{{$state->state_name}}</option>   
                                 @endforeach                                 
                              </select>
                           </fieldset>
                        </div>
                        <div class="col-md-4 col-sm-12">
                           <fieldset>
                              <label>City</label>
                              <input placeholder="city" name="city" type="text" required="">
                              @error('city') {{$message}} @enderror
                           </fieldset>
                        </div>
                        <div class="col-md-4 col-sm-12">
                           <fieldset>
                              <label>Pincode</label>
                              <input placeholder="Pincode" name="pincode" type="text" required="">
                              @error('pincode') {{$message}} @enderror
                           </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset>
                              <label>Address</label>
                              <textarea placeholder="Full Address" autocomplete="off" id="address" name="address"></textarea>
                              @error('address') {{$message}} @enderror
                           </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset>
                              <label>Languages</label>
                              <input class="multiselect-element" name="languages" placeholder="Languages" type="text">
                           </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset>
                              <label>Practice areas</label>
                              <input class="multiselect-element" name="practice_area" placeholder="Practice areas" type="text">
                           </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset>
                              <label>SPECIALIZATION (Up to 5)</label>
                              <input class="multiselect-element" name="specialization" placeholder="Specialization (Up to 5)" type="text">
                           </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset>
                              <label>COURTS</label>
                              <input class="multiselect-element" name="courts"  placeholder="Courts" type="text">
                           </fieldset>
                        </div>
                        <div class="col-md-3 col-sm-12">
                           <fieldset>
                              <label>Experience In Year</label>
                              <input placeholder="Experience In Year " name="Experience" type="text" required="">
                              @error('Experience') {{$message}} @enderror
                           </fieldset>
                        </div>
                        <div class="col-md-3 col-sm-12">
                           <fieldset>
                              <label>Hours </label>  
                              <input placeholder="Hours" name="hours" type="number" required="">
                              @error('hours') {{$message}} @enderror
                           </fieldset>
                        </div>
                        <div class="col-md-3 col-sm-12">
                           <fieldset>
                              <label>Phone Consultation Fees </label>  
                              <input placeholder="Phone Consultation Fees " name="phone consultation" type="number" required="">
                              @error('phone_consultation') {{$message}} @enderror
                           </fieldset>
                        </div>
                        <div class="col-md-3 col-sm-12">
                           <fieldset>
                              <label>Meeting Consultation Fees </label>  
                              <input placeholder="Meeting Consultation Fees " name="meeting consultation" type="number" required="">
                              @error('meeting_consultation') {{$message}} @enderror
                            </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset>
                              <label>Bar Council ID</label>
                              <input placeholder="Bar Council ID" name="barCouncilID " type="text" required="">
                              @error('barCouncilID_') {{$message}} @enderror
                           </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset>
                              <label>About</label>
                              <textarea placeholder="About" autocomplete="off" id="about" name="about"></textarea>
                              @error('about') {{$message}} @enderror
                           </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset>
                              <label>Academic Qualification</label>
                              <div id="academicQualification" tagname="academicQualification"></div>
                           </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset>
                              <label>Service Areas/Cities</label>
                              <div id="serviceAreas" tagname="serviceAreas"></div>
                           </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset>
                              <label>Bar Council ID</label>
                              <input type="file" id="img" name="img" accept="image/*">
                           </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset>
                              <label>How did you hear about us?</label>
                              <select name="add_from">
                                 <option value="">--Select--</option>
                                 <option value="Zee News">Zee News</option>
                                 <option value="Republic TV">Republic TV</option>
                                 <option value="Google">Google</option>
                                 <option value="Facebook">Facebook</option>
                                 <option value="Newspaper">Newspaper</option>
                                 <option value="Others">Others</option>
                              </select>
                           </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset>
                              <input type="text" id="txtCaptcha" 
                                 style="background-color:#CDCDCD; color:#181E49; text-align:left; border:none;
                                 font-weight:bold; font-size: 20px; max-width: 40%; font-family:Modern" readonly />
                              <!-- <input type="button" id="btnrefresh" value="Refresh" onclick="DrawCaptcha();" /> -->
                              <img src="https://www.onlinelegalindia.com/payment/images/capta.png" id="btnrefresh" onclick="DrawCaptcha();">
                              <input type="text" autocomplete="off" name="captcha_code" id="captcha_code" class="pull-right" style="width: 50%" placeholder="Enter the captcha here..">
                           </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset class="check_box">
                              <input type="checkbox" id="checbox_advocateSignup" name="horns">
                              <label  for="horns">If you dont have any documents</label>
                           </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12">
                           <fieldset class="button_box">
                              <button class="btn btn-success pull-right" type="submit" >Submit</button>
                           </fieldset>
                        </div>
                     </div>
                  </section>
               </form>
            </div>
         </div>
         <div class="col-md-12 col-sm-12">
            <div class="row">
               <div class="col-md-12 col-sm-12">
                  <div class="advocate_steps">
                     <h3>Simple Steps</h3>
                     <ul>
                        <li>
                           <i>1</i>
                           <h4>Complete Registration</h4>
                           <p>Fill the form & Make the Payment</p>
                        </li>
                        <li>
                           <i>2</i>
                           <h4>Create Your Profile</h4>
                           <p>Create your profile with name, contact details, images, practice area & specialties etc.</p>
                        </li>
                        <li>
                           <i>3</i>
                           <h4>Waiting for Approval</h4>
                           <p>After submitting all the details you will be verified by Online Legal India.</p>
                        </li>
                        <li>
                           <i>4</i>
                           <h4>Get Connected With Clients</h4>
                           <p>Connect and communicate with potential clients online.</p>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<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>
   $('.accordaion-main-div').click(function () {
      var show_id = $(this).attr('data-port-id');
      $('.child-ans-div-1').hide();
      $('#'+show_id).show();
      
   });
</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>
<!--End of Tawk.to Script-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-154577425-1"></script>
<script>
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   
   gtag('config', 'UA-154577425-1');
</script>
<!--   <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>    -->     
<!--owel Carousel2       -->             
<script>
   $('#associated_carousal').owlCarousel({
           loop:true,
           margin:0,
           dots:false,
           nav:false,
           autoplay:true,
           autoplayTimeout:1800,
           autoplayHoverPause:true,   
   
           responsive:{
               0:{
                   items:1,
                   nav:false
               },
               600:{
                   items:3,
               },
               1000:{
                   items:6,
               }
           }
       }); 
    
     $('#linkUl').owlCarousel({
               loop:true,
               margin:20,
               dots:false,
               nav:false,
               autoplay:true,
               autoWidth:true,
               autoplayTimeout:2000,
               autoplayHoverPause:true,   
   
               responsive:{
                   0:{
                       items:1,
                       nav:false
                   },
                   600:{
                       items:3,
                   },
                   1000:{
                       items:7,
                   }
               }
           }); 
    
    $('#associated_carousal_home').owlCarousel({
               loop:true,
               margin:30,
               dots:false,
               nav:false,
               autoplay:true,
               autoWidth:true,
               autoplayTimeout:2000,
               autoplayHoverPause:true,   
   
               responsive:{
                   0:{
                       items:1,
                       nav:false
                   },
                   600:{
                       items:3,
                   },
                   1000:{
                       items:7,
                   }
               }
           }); 
</script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="https://code.jquery.com/ui/1.8.16/jquery-ui.min.js" integrity="sha256-ctmDClJZfVNK6PR+q7Ne7yDTQxgKLgZBe3qpeE/I5Aw=" crossorigin="anonymous"></script>
<script>
   var data = [
   "ActionScript",
   "AppleScript",
   "Asp",
   "BASIC",
   "C++",
   "Clojure",
   "COBOL",
   "ColdFusion"
   ];
   
   function split(val) {
   return val.split(/,\s*/);
   }
   
   function extractLast(term) {
   return split(term).pop();
   }
   
   function bindAutoComplete(ele, options) {
   var text = ele.val();
   text = text == null || text == undefined ? "" : text;
   $(ele).autocomplete(options).data("autocomplete")._renderItem = function(ul, item) {
   var checked = (text.indexOf(item.label + ', ') > -1 ? 'checked' : '');
   return $("<li></li>")
   .data("item.autocomplete", item)
   .append('<a href="javascript:;"><input type="checkbox"' + checked + '/>' + item.label + '</a>')
   .appendTo(ul);
   };
   }
   $(function() {
   var $this;
   var multiSelectOptions = {
   minLength: 0,
   source: function(request, response) {
   response($.map(data, function(item) {
   
   return {
     label: item
   }
   }));
   },
   focus: function() {
   // prevent value inserted on focus
   //$($this).autocomplete("search");
   return false;
   },
   select: function(event, ui) {
   var text = $this.val();
   text = text == null || text == undefined ? "" : text;
   var checked = (text.indexOf(ui.item.value + ', ') > -1 ? 'checked' : '');
   if (checked == 'checked') {
   this.value = this.value.replace(ui.item.value + ', ', '')
   } else {
   var terms = split(this.value);
   // remove the current input
   terms.pop();
   // add the selected item
   terms.push(ui.item.value);
   // add placeholder to get the comma-and-space at the end
   terms.push("");
   this.value = terms.join(", ");
   }
   return false;
   },
   open: function() {
   $("ul.ui-menu").width($(this).innerWidth());
   }
   }
   $(document).find('input[class*="multiselect-element"]').live('keydown', function() {
   bindAutoComplete($this, multiSelectOptions);
   }).live('focus', function() {
   $this = $(this);
   var text = $this.val();
   bindAutoComplete($this, multiSelectOptions);
   $($this).autocomplete("search");
   })
   })  
 
   function DrawCaptcha()
   {
       var a = Math.ceil(Math.random() * 9)+ '';
       var b = Math.ceil(Math.random() * 9)+ '';       
       var c = Math.ceil(Math.random() * 9)+ '';  
       var d = Math.ceil(Math.random() * 9)+ '';  
       var code = a + '' + b + '' + '' + c + '' + d;
       document.getElementById("txtCaptcha").value = code;
   }
   
    $(document).ready(function(){
       var a = Math.ceil(Math.random() * 9)+ '';
       var b = Math.ceil(Math.random() * 9)+ '';       
       var c = Math.ceil(Math.random() * 9)+ '';  
       var d = Math.ceil(Math.random() * 9)+ '';  
       var code = a + '' + b + '' + '' + c + '' + d;
       document.getElementById("txtCaptcha").value = code;
   });
   function ValidCaptcha() {
    var captcha_code = Number($("#captcha_code").val());
    var txtCaptcha = Number($("#txtCaptcha").val());
    if(captcha_code!=txtCaptcha){
        alert('Please Enter the Captcha Code Correctly');
        $("#captcha_code").css('border-color','red');
       return errorflag = false;
    }



}


</script>
</html>
@endsection