{% extends 'base.html' %}
{% load static %}

{% block title %}
    <title>Registration</title>
{% endblock %}

{% block css %}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="{% static 'build/css/intlTelInput.css' %}">
    <link rel="stylesheet" href="{% static 'assets/vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/vendors/css/vendor.bundle.base.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
    <link rel="shortcut icon" href="{% static 'assets/images/favicon.png' %}" />
{% endblock %}


{% block content %}
  <div class="container-scroller login-1  login-2 reg-45">
      <div class="container-fluid page-body-wrapper full-page-wrapper">
        <div class="content-wrapper d-flex align-items-center auth">
          <div class="row flex-grow">
            <div class="col-lg-4 mx-auto">
              <div class="auth-form-light text-left p-3">
                <div class="brand-logo">
                  <img src="{% static 'images/logo1.png' %}">
                </div>
                <h4 class="hello-text"> New here?</h4>
                <h6 class="sign-text">Signing up is easy. It only takes a few steps</h6>
                  
                   <h3 class="sign-text"> Signup as : </h3>  

                   <div class="form-group text-center-all">
                        <input type="radio" id="customer" name="userrole" value="customer" >
                        <label for="customer">Customer</label>
                        <input type="radio" id="company" name="userrole" value="company">
                        <label for="company">Company</label>
                        <input type="radio" id="driver" name="userrole" value="driver">
                        <label for="driver">Driver</label>
                      
                  </div>

                    <span class="text-danger chek-errors" id="userrole_txt"></span>
                  <div class="form-group">
                    <!-- <label for="firstname" >First Name:</label> -->
          <input id="name" class="form-control form-control-lg" placeholder="Enter Name">
          <span class="text-danger" id="name_txt"></span>
                  </div>

                  
                  <div class="form-group">
                    <!-- <label for="firstname" >First Name:</label> -->
          <input id="email" class="form-control form-control-lg" placeholder="Email Address">
          <span class="text-danger" id="email_txt"></span>
                  </div>


                  <div class="form-group driver-profile-n">
                    <!-- <label for="firstname" >First Name:</label> -->
          <input id="phone" class="form-control form-control-lg" placeholder="Phone Number">
          <span class="text-danger" id="phone_txt"></span>
                  </div>

                  <div class="form-group">
                    <!-- <label for="firstname" >First Name:</label> -->
          <input id="password" type="password" class="form-control form-control-lg" placeholder="Password">
          <span class="text-danger" id="password_txt"></span>
                  </div>

                  
                  <div class="mb-4">
                    <div class="form-check">
                      <label class="form-check-label text-muted">
                        <input type="checkbox" name="chk" class="form-check-input"> I agree to all Terms & Conditions </label>
                        <span class="text-danger" id="terms_txt"></span>
                    </div>
                  </div>
                  <div class="mt-3">
                    <button class="btn btn-block btn-gradient-primary btn-lg font-weight-medium auth-form-btn" href="" id="register-btn">SIGN UP</button>
                  </div>
                  <div class="text-center mt-4 font-weight-light"> Already have an account? <a href="/login" class="text-primary">Login</a>
                  </div>
                <!-- </form> -->
              </div>
            </div>
          </div>
        </div>
        <!-- content-wrapper ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>

    <div id="SubmitOTPModal" class="modal fade success_modal" data-backdrop="static" data-keyboard="false" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content bg-transparent">
          <div class="modal-header">
            <h3 class="modal-title">Verify OTP</h3>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body bg-white rounded-bottom">
            <div class="container">
              <div class="row">
                <div class="col-12">
                  {% csrf_token %} 
                  <div class="row">
                    <div class="otp_message">
                      <h5 id="otp-message">We have sent OTP on your phone.</h5>
                      <div class="optOuter">
                        <div class="otpInner">
                          <input type="number" id="otp" placeholder="Enter OTP" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))" onKeyPress="if(this.value.length==5) return false;" />
                          <label for="otp">Enter OTP</label>
                        </div>
                      </div>
                      <span id="otp-error" class="text-danger" style="color: red;"></span>
                      <div class="d-flex w-100 justify-content-end verify">
                        <input name="data" id="otpon" hidden/ >
                        <button type="button" id="submit-otp-btn" class="mx-0 ml-auto d-block"> Verify</button>
                        <button class="btn-theme" id="resend-otp-btn">Resend OTP</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade notification-popup" id="NotificationMessageModal" role="dialog" >
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header border-0">
           <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
         </div>
         <div class="modal-body">
           <h3 id="notification-msg"></h3>
           <button type="button"  id="verification-msg-btn">Ok</button>
         </div>          
       </div>
     </div>
    </div>


    <div class="modal fade error-popup" id="ErrorMessageModal" role="dialog" >
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header border-0">
           <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
         </div>
         <div class="modal-body">
           <h3 id="error-msg"></h3>
           <button type="button"  id="close-btn">Ok</button>
         </div>          
       </div>
     </div>
    </div>



<div class="modal fade popup-all credits" id="CompanyDetailModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Company Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="form-group col-md-12">
             <label for="job_title">Job Title</label>
             <input type="text" class="form-control" id="job_title">
             <span class="text-danger" id="job_title_txt"></span>
          </div>
          <div class="form-group col-md-12">
             <label for="company_name">Company Name<span class="text-danger"> *</span></label>
             <input type="text" class="form-control" id="company_name">
             <span class="text-danger" id="company_name_txt"></span>
          </div>
          <div class="form-group col-md-12">
             <label for="company_website">Company Website</label>
             <input type="text" class="form-control" id="company_website">
             <span class="text-danger" id="company_website_txt"></span>
          </div>
          <div class="form-group col-md-12">
             <label for="monthly_delivery_volume">Monthly Delivery Volume</label>
             <select class="form-control" id="monthly_delivery_volume">
               <option value="">Select Any option</option>
               <option value="1-10">1-10</option>
               <option value="11-20">11-20</option>
               <option value="50-100">50-100</option>
               <option value="100+">100+</option>
             </select>
             <span class="text-danger" id="monthly_delivery_volume_txt"></span>
          </div>
          <div class="form-group col-md-12">
             <label for="registration_number">Registration Number<span class="text-danger"> *</span></label>
             <input type="text" class="form-control" id="registration_number" >
             <span class="text-danger" id="registration_number_txt"></span>
          </div>
          <div class="form-group col-md-12">
             <label for="industry">Industry<span class="text-danger"> *</span></label>
             <input type="text" class="form-control" id="industry" >
             <span class="text-danger" id="industry_txt"></span>
          </div>
          <div class="w-100 d-flex justify-content-center px-3">
            <button id="company-register-btn" class="btn-5" >Register</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


{% endblock %}

{% block js %}
    <script src="{% static 'assets/vendors/js/vendor.bundle.base.js' %}"></script>
    <script src="{% static 'assets/js/off-canvas.js' %}"></script>
    <script src="{% static 'assets/js/hoverable-collapse.js' %}"></script>
    <script src="{% static 'assets/js/misc.js' %}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="{% static 'build/js/intlTelInput.js' %}"></script>
  <script>
    var input = document.querySelector("#phone");
    // window.intlTelInput(input);
    window.intlTelInput(input, {
      autoPlaceholder: "off",
      initialCountry: "gb",
      formatOnDisplay: false,
      utilsScript: "{% static 'js/utils.js' %}",
    });

  </script>
  <script src="{% static 'js/customer/customer_registration.js' %}"></script>

{% endblock %}