<!DOCTYPE html>
<html lang="en">
  
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <link rel="icon" href="../../uploads/<%= data[0].site_logo %>" type="image/x-icon">
  <link rel="shortcut icon" href="../../uploads/<%= data[0].site_logo %>" type="image/x-icon">
  <title>Sing Up</title>
  <link rel="preconnect" href="https://fonts.googleapis.com/">
  <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="../../css/vendors/font-awesome.css">
  <!-- ico-font-->
  <link rel="stylesheet" type="text/css" href="../../css/vendors/icofont.css">
  <!-- Themify icon-->
  <link rel="stylesheet" type="text/css" href="../../css/vendors/themify.css">
  <!-- Flag icon-->
  <link rel="stylesheet" type="text/css" href="../../css/vendors/flag-icon.css">
  <!-- Feather icon-->
  <link rel="stylesheet" type="text/css" href="../../css/vendors/feather-icon.css">
  <link rel="stylesheet" type="text/css" href="../../css/vendors/scrollbar.css">
    <link rel="stylesheet" type="text/css" href="../../css/vendors/datatables.css">
    <link rel="stylesheet" type="text/css" href="../../css/vendors/select2.css">
    <link rel="stylesheet" type="text/css" href="../../css/vendors/dropzone.css">
    <link rel="stylesheet" type="text/css" href="../../css/vendors/date-picker.css">
    <link rel="stylesheet" type="text/css" href="../../css/vendors/sweetalert2.css">
  <!-- Bootstrap css-->
  <link rel="stylesheet" type="text/css" href="../../css/vendors/bootstrap.css">
  <!-- App css-->
  <link rel="stylesheet" type="text/css" href="../../css/style.css">
  <link id="color" rel="stylesheet" href="../css/color-1.css" media="screen">
  <!-- Responsive css-->
  <link rel="stylesheet" type="text/css" href="../css/responsive.css">


  <!-- toster jqury link -->
  <link rel="stylesheet" href="../../css/toastr.min.css"/>
  <script src="../../js/tostify/jquery-1.9.1.min.js"></script>
  <script src="../../js/tostify/js-toastr.js"></script>
  </head>
  <body>
    <!-- Loader starts-->
    <div class="loader-wrapper">
      <div class="loader-box">
        <div class="loader-19"></div>
      </div>
    </div>
    <!-- Loader ends-->
    <!-- login page start-->
    <div class="container-fluid">
      <div class="row m-0">
        <div class="col-xl-12 p-0">
          <div class="login-card py-0">
            <div>
              <div><a class="logo" href="/"><img class="img-fluid for-light img-75 m-r-15"
                    src="../../uploads/<%= data[0].site_logo %>" alt="looginpage">
                  <h1 class="f-24 f-w-900 font-dark text-center">
                    <%= data[0].site_title %>
                  </h1>
                </a></div>
              <div class="login-main p-4">
                <form class="theme-form" action="/sign_up" method="post">
                  <h4>Create your account</h4>
                  <p class="my-3">Want to register as Driver ? <a href="/driver_singup">Click here</a></p>
                  <div class="form-group">
                    <label class="col-form-label pt-0">Your Name</label>
                    <div class="row g-2">
                      <div class="col-6">
                        <input class="form-control" type="text" name="first_name" placeholder="First name" required>
                      </div>
                      <div class="col-6">
                        <input class="form-control" type="text" name="last_name" placeholder="Last name" required>
                      </div>
                    </div>
                  </div>
    
                  <div class="row g-2">
                    <div class="col-12">
                      <div class="form-group">
                        <label class="col-form-label">Email</label>
                        <input class="form-control" type="email" name="email" placeholder="Test@gmail.com" required>
                      </div>
                    </div>
                    <div class="col-12">

                      <label class="col-form-label pt-0">Phone No.</label>
                      <div class="row g-2">
                        <div class="col-4">
                          <select class="js-example-basic-single" name="country_code" required>
                            <option value selected disabled>Country</option>
                            <% CountryCode.forEach((data, x) => { %>
                              <option value="<%= data %>"> <%= nameCode[x] %> <%= data %> </option>
                            <% }) %>
                          </select>
                        </div>
                        <div class="col-8">
                          <input class="form-control" type="text" name="phone_no" placeholder="Phone Number" required>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-form-label">Password</label>
                    <div class="form-input position-relative">
                      <input class="form-control" type="password" name="password" placeholder="*********" required>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-form-label">Address</label>
                    <input class="form-control" type="text" name="address" placeholder="Enter Address" required>
                  </div>
    
                  <div class="row">
                    <div class="col-6">
                      <div class="col-form-label">Country</div>
                      <select class="js-example-basic-single" name="country" id="singup_country" required>
                        <option value selected disabled>Search Country</option>
                        <% countries.forEach((data)=> { %>
                          <option value="<%= data.id %>">
                            <%= data.countries_name %>
                          </option>
                          <% }) %>
                      </select>
                    </div>
    
                    <div class="col-6">
                      <div class="col-form-label">Status</div>
                      <select class="js-example-basic-single" name="state" id="singup_state" required>
                        <option value selected disabled>Search State</option>
                        <!-- ajax -->
                      </select>
                    </div>
    
                    <div class="col-6">
                      <div class="col-form-label">City</div>
                      <select class="js-example-basic-single" name="city" id="singup_city" required>
                        <option value selected disabled>Search City</option>
                        <!-- ajax -->
                      </select>
                    </div>
    
                    <div class="col-6">
                      <label class="col-form-label">Zip Code</label>
                      <input class="form-control" type="number" name="zip_code" placeholder="Enter Zip Code" required>
                    </div>
    
                  </div>
    
                  <button class="btn btn-primary btn-block w-100 mt-3" type="submit">Create Account</button>
    
                  <p class="mt-4 mb-0 text-center">Already have an account?<a class="ms-2" href="/">Log in</a></p>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <%- include('./partials/script'); -%>
  </body>
</html>