@extends('dashboard.authBase') @section('content')
<style>
.error {
  color: #000;
}

* {
  box-sizing: border-box;
  z-index: 9999999% !important;
}

span {
  color: red;
}

.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px;
  /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  z-index: 999999%;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #eee;
}

.panel {
  padding: 0 10px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>
<!-- main app container -->
<!-- <div class="readersack"> -->
<div class="container" style="background-color:#F8F8F8;  color: #000; box-shadow: 20px 20px 50px 15px grey; margin-bottom: 30px; margin-top: 50px; ">
  <div class="row">
    <div class="col-md-10 offset-md-1"> <img src="../images/pec_logo.png" style="margin-top: 40px; width: 100%; , margin-left: 10px;">
      @if(Session::has('otp_error'))
      <div class="alert alert-danger">
        <li>{{Session::get('otp_error')}}</li> 
      </div> 
      @endif

      <h3 style="margin-top: 40px; margin-bottom: 30px; text-align: center; "> Client Sign Up </h3> @if ($errors->any())
      
      <div class="alert alert-danger">
        <ul> @foreach ($errors->all() as $error)
          <li>{{ $error }}</li> @endforeach </ul>
      </div> @endif
      <form id="handleAjax" action="{{route('clients.store')}}" name="postform" method="post" enctype="multipart/form-data"> @csrf
        @csrf
        <div class="m-4" >
          <div class="accordion active" id="myAccordion"  >
            <div class="accordion-item" >
              <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" style="background-color: #004e1e !important;color:white">Step1 - Basic Information</button>
              <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
                <div class="card-body">
                    
                      <div class="form-group row">
                        <label  class="col-sm-3 text-right col-form-label"><span class="text-red">*</span> Focal person</label>
                        <div class="col-sm-8">
                          <input type="text" name="fname" class="form-control"  placeholder="Enter focal person name...." required="true">
                        </div>
                      </div>
                      <div class="form-group row">
                        <label  class="col-sm-3 text-right col-form-label">Company Name</label>
                        <div class="col-sm-8">
                          <input type="text" name="lname" class="form-control"  placeholder="Enter company name....">
                        </div>
                      </div>
                      <div class="form-group row">
                        <label  class="col-sm-3 text-right col-form-label"> Website url</label>
                        <div class="col-sm-8">
                          <input type="text" name="website_url" class="form-control"  placeholder="Website URL...." >
                        </div>
                      </div>
                      <div class="form-group row">
                        <label  class="col-sm-3 text-right col-form-label"> WhatsApp Number</label>
                        <div class="col-sm-8">
                          <input type="text" name="whatsapp_no" class="form-control"  placeholder="Enter your whatsApp account number...." >
                        </div>
                      </div>
                      <div class="form-group row">
                        <label  class="col-sm-3 text-right col-form-label"> Linkedin</label>
                        <div class="col-sm-8">
                          <input type="text" name="fax_number" class="form-control"  placeholder="Enter Linkedin account...." >
                        </div>
                      </div>

                      <!-- acount information -->
                      <div class="form-group row">
                        <label  class="col-sm-3 text-right col-form-label"><span class="text-red">*</span> Email</label>
                        <div class="col-sm-8">
                          <input type="email" name="email" class="form-control"  placeholder="Enter your email...." required="true">
                        </div>
                      </div>
                      <div class="form-group row">
                        <label  class="col-sm-3 text-right col-form-label"><span class="text-red">*</span> Mobile No</label>
                        <div class="col-sm-6">
                          <input type="text" name="contact_number" class="form-control" id="mobile_no"  placeholder="Enter mobile no with country code...." required="true" > 
                          <span class="text-muted"><small>Enter your mobile number with country code.The mobile number will be used to login to your account.</small></span>
                        </div>
                        <div class="col-sm-3">
                          <button type="button" class="btn btn-green" onclick="sendOTP()" style="background-color: #004E1E; color: #fff;" >Send OTP</button>
                          
                        </div>
                      </div>
                      <div class="form-group row">
                        <label  class="col-sm-3 text-right col-form-label"><span class="text-red">*</span> OTP</label>
                        <div class="col-sm-4">
                          <input type="number" name="otp" class="form-control" id="otp" placeholder="Enter 4 digit OTP..." required="true">
                          <span class="text-success" id="otp_text" style="display: none">A four digit otp code has been sent to your contact number.</span>
                        </div>
                        
                      </div>

                      <div class="form-group row">
                        <label  class="col-sm-3 text-right col-form-label"><span class="text-red">*</span> Password</label>
                        <div class="col-sm-8">
                          <input type="password" name="password" class="form-control"  placeholder="Enter password...." required="true">
                        </div>
                      </div>

                      <div class="form-group row">
                        <label  class="col-sm-3 text-right col-form-label"><span class="text-red">*</span> Confirm Password</label>
                        <div class="col-sm-8">
                          <input type="password" name="password_confirmation" class="form-control"  placeholder="Confirm your password...." required="true">
                        </div>
                      </div>
                     
                     
                  
                </div>
              </div>
            </div>
      </div>





        </diV>
        <div class="form-group" style="text-align: center;">
          <button type="submit" class="btn"  style="margin-top: 20px; background-color: #004E1E; color: #fff; margin-bottom: 30px;">Sign Up</button>
        </div>
      </form>
    </div>
  </div>
</div>
  <script>
  // Add the following code if you want the name of the file appear on select
  $(".custom-file-input").on("change", function() {
    var fileName = $(this).val().split("\\").pop();
    $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
  });

  function myFunction() {
    alert("Request has been send to PEC for Approval");
  }
  </script>
  <script>
  function sendOTP() {
      var mobile_no = $("#mobile_no").val();
      if(mobile_no == ''){
          alert("Please enter mobile number first");
          return false;
      }

      // send OTP 
      $.ajax({
          type:"GET",
          url: "{{ route('otp.client')}}",
          data:{_token:"{{ csrf_token() }}",mobile_no:mobile_no},
          cache:false,
          dataType: "json",
          success:function(response)
          {
            $("#otp_text").show();
          }
          
      });
  






  }





  var acc = document.getElementsByClassName("accordion");
  var i;
  for(i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      
    });
  }

  

  </script>
  <script>
  $(document).ready(function() {
    // Hide the additional photo uploads
    var $additionals = $("#accordion, #accordion1, #accordion2,  #accordion3, #accordion4,  #accordion5, #accordion6, #accordion7,#accordion8,#accordion9,#accordion10,#accordion11,#accordion12,#accordion13,#accordion14");
    $additionals.hide();
    // Show more photo uploaders when we click
    $("#add-more").on("click", function() {
      $additionals.show();
    });
  });
  </script> @endsection