@extends('layouts.app')
@section('metades')
    <meta name="description" content="Want to become a partner? Please contact us and add your sports groud to our website. We will get back to you with all the details.">
    <meta name="author" content="Millennial turf">
    <meta name="keywords" content="Millennial turf">
@endsection
@section('title')
    <title>Become a Partner - Sports Ground Online Booking at MillennialTurf</title>
@endsection
@section('css')
@endsection
@section('content')
    <div class="ipBanner innerbanner012">
        <div class="bannerImage"><img src="{{asset('images/eventbanner01.jpg')}}" alt="eventbanner01.jpg" style="width:100%; height:auto;">

        </div>
    </div>
    <section class="contactsection15">
        <div class="titleBox my-3">
            <h3>Become a Partner </h3>
        </div>
        <div class="container">
            <div class="main-box mb-5">
                <div class="contact_left58 half01" style="background: url({{ asset('images/contact02.jpg') }})no-repeat 0 0; background-size: cover;">
                    
                    <div class="contleftinfo15">
                        <h3>Why Should be the part of us</h3>
                        <p>The whole ground is covered with Astro-turf, floodlights and bleachers. The roof is covered with a high dense net to protect anything from falling down. It has security cameras capturing from all sides to have a fair game and peaceful atmosphere. Kits for all the games are available at the venue and are provided to the gamers.
                        </p>
                    </div>
                </div>
                <div class="contact_right58 half01">
                    <form action="{{route('become-partner-save')}}" method="post">
                    @csrf
                    <div class="contactform15 row">
                        <div class="logfield15 col-md-12">
                            <label>First Name</label>
                            <input type="text" id="fname" name="fname" placeholder="">
							<span id="nameErr" style="color:red"></span>
                        </div>
                        <div class="logfield15 col-md-12">
                            <label>Last Name</label>
                            <input type="text" id="lname" name="lname" placeholder="">
							<span id="lnameErr" style="color:red"></span>
                        </div>                       
                        <div class="logfield15 col-md-12">
                            <label>Email Address</label>
                            <input type="text" id="emailId" name="email" placeholder="">
							 <span id="emailErr" style="color:red"></span>
                        </div>
                        <div class="logfield15 col-md-12">
                            <label>Phone Number</label>
                            <input type="text" id="phone" name="phone" placeholder="">
							<span id="mobileErr" style="color:red"></span>
                        </div>
                         <div class="logfield15 col-md-12">
                            <label>Address</label>
                            <textarea id="address" name="address" rows="4" cols="50"></textarea>
							 <span id="messageErr" style="color:red"></span>
                        </div>
						<div class="col-md-12">
                            <div class="Field">
                                <div class="g-recaptcha" required="required" id="rcaptcha"
                                    data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}" data-callback="recaptchaCallback">
                                </div>
                                @if ($errors->has('g-recaptcha-response'))
                                <span class="text-danger"
                                    required="required">{{ $errors->first('g-recaptcha-response') }}</span>
                                @endif 
								

                            </div>
                        </div>
						<script src="https://www.google.com/recaptcha/api.js"></script>
                        <div class="logfield15 text-left col-md-12">
                           <button type="button" id="submitBtn" class="acceptBtn">{{ __('Submit') }}</button>	
                        </div>
                    </div>
					</form>
                </div>
            </div>
        </div>
		
		
		
		<div class="turfPopup" id="turfAllPopup">
    <div class="tpHead">Choose Your Venue </div>
    <span class="closePopup">X</span>
    @if (!empty($propertyDetails) && count($propertyDetails) > 0)
    <div class="booklist5879">
        <ul class="turfsList">
            @foreach ($propertyDetails as $ik => $dynamicSection)
            <li>
                <a href="{{route('booking')}}/{{$dynamicSection['slug']}}">
                    <img src="{{ $dynamicSection['icon'] }}">
                    <p class="taddress">{{ $dynamicSection['name'] }}</p>
                </a>
            </li>
            @endforeach
        </ul>
    </div>
    @endif
</div>
		
		
    </section>
<script>
  $(document).ready(function () {
      $("#nameErr").hide();
      err_name = true;
	  $("#lnameErr").hide();
      err_lname = true;
      $("#mobileErr").hide();
      err_mobile = true;
      $("#emailErr").hide();
      err_email = true;
	  $("#messageErr").hide();
      err_message = true;

      $("#fname").keyup(function () {
          name_check_fun();
      });
       $("#lname").keyup(function () {
          name_check_fun();
      });
      $("#emailId").keyup(function () {
          email_check_fun();
      });

      $("#phone").keyup(function () {
          mobile_check_fun();
      });
	  
	  $("#address").keyup(function () {
          message_check_fun();
      });

      function name_check_fun() {
		  
          let k = $("#fname").val();
          let val = k.trim();
          if (val.length == "") {
              $("#nameErr").show();
              $("#nameErr").html("First Name is required");
              err_name = false;
              return false;
          }
          else {
              err_name = true;
              $("#nameErr").html("");
              $("#nameErr").hide();
          }
      }
       function lname_check_fun() {
		  
          let k = $("#lname").val();
          let val = k.trim();
          if (val.length == "") {
              $("#lnameErr").show();
              $("#lnameErr").html("Last Name is required");
              err_lname = false;
              return false;
          }
          else {
              err_lname = true;
              $("#lnameErr").html("");
              $("#lnameErr").hide();
          }
      }

      function mobile_check_fun() {
		  const regex = /^(\+\d{1,3}[- ]?)?\d{10}$/
          let k = $("#phone").val();
          let val = k.trim();
          if (val.length == ""  ) {
              $("#mobileErr").show();
              $("#mobileErr").html("Phone No is required");
              err_mobile = false;
              return false;
          }else if (!regex.test(val)) {
			  $("#mobileErr").show();
			  $("#mobileErr").html("Phone No must be a valid number");
			  err_mobile = false;
              return false;
		  }else {
              err_mobile = true;
              $("#mobileErr").html("");
              $("#mobileErr").hide();

          }
      }

      function email_check_fun() {
		  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
          let k = $("#emailId").val();
          let val = k.trim();
          if (val.length == ""  ) {
              $("#emailErr").show();
              $("#emailErr").html("Email is required");
              err_email = false;
              return false;
          }else if (!regex.test(val)) {
			  $("#emailErr").show();
			  $("#emailErr").html("Email must be a valid email");
			  err_email = false;
              return false;
		  }else {
              err_email = true;
              $("#emailErr").html("");
              $("#emailErr").hide();
          }
      }

	  function message_check_fun() {
          let k = $("#address").val();
          let val = k.trim();
          if (val.length == ""  ) {
              $("#messageErr").show();
              $("#messageErr").html("Address is required");
              err_message = false;
              return false;
          }else {
              err_message = true;
              $("#messageErr").html("");
              $("#messageErr").hide();

          }
      }

      $("#submitBtn").click(function () {
          err_name = true;
		  err_lname=true;
          err_email = true;
          err_mobile = true;
		 
		  err_message = true;
          name_check_fun();
		  lname_check_fun();
          mobile_check_fun();
          email_check_fun();
		  
		  message_check_fun();
		
          if ((err_name == true) && (err_lname == true) && (err_email == true) && (err_mobile == true) &&  (err_message == true)) {
              return true;
          }
          else {
              return false;

          }

      });


  });

</script>
<script>
function recaptchaCallback(){
	$("#submitBtn").attr("type","submit")
}


</script>
@endsection
@push('scripts')

@endpush