@extends('merchbay_main')
@section('main-content')
<style>
  .error {
    color: red;
  }

  .g-recaptcha {
    width: 100%;
  }
</style>

<div class="wrapper bg-white pb-5">
  <div class="main__content">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col col-lg-5 pt-5 text-center text-lg-start">
          <h4>Register</h4>
          <p> <strong>Please fill in registration form to complete purchase.</strong></p>
          <hr class="custom-hr" />
        </div>
      </div>
      <div class="row justify-content-center">
        <div class="col col-lg-5">
          <div id="register-response-msg"></div>
          <form role="form" id="frm-register">
            <input type="hidden" name="redirect" value="{{ Request::get('redirectUrl')  }}">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">

            <div class="text-center my-3 clearfix">
              <strong>Personal Information</strong>
            </div>

            <div class="mb-3">
              <label class="control-label">First name</label>
              <input type="text" class="form-control" name="firstname" placeholder="First name">
            </div>

            <div class="mb-3">
              <label class="control-label">Last name</label>
              <input type="text" class="form-control" name="lastname" placeholder="Last name">
            </div>

            <div class="mb-3">
              <label class="control-label">Email Address</label>
              <input type="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="Email Address">
            </div>

            <div class="mb-3">
              <label class="control-label">Phone Number</label>
              <input type="text" class="form-control" name="mobilenumber" placeholder="Phone Number">
            </div>


            <div class="mb-3">
              <label class="control-label">Password</label>
              <input type="password" class="form-control" name="password" id="password" required placeholder="Password">
            </div>

            <div class="mb-3">
              <label class="control-label">Confirm Password</label>
              <input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password" data-rule-equalTo="#password" required>
            </div>

            <!-- <div class="mb-3">
										<label class="control-label">Username</label>
										<input type="text" class="form-control" name="username" value="{{ old('username') }}" placeholder="Username">
									</div> -->

            <div class="text-center my-3 clearfix">
              <strong>Address Information</strong>
            </div>

            <div class="mb-3">
              <label class="control-label">Select Country</label>
              <select name="countryCode" id="select_country" class="form-control" onchange="selectCountry(this)">
                <option value="">Select Country</option>
                <option value="US">United States</option>
                <option value="CA">Canada</option>
              </select>
            </div>

            <div class="mb-3">
              <label class="control-label">State / Province</label>
              <label></label>
              <select class="form-control" name="state" id="lst-states">
                <option value="">Select State</option>
              </select>
            </div>

            <div class="mb-3">
              <label class="control-label">City</label>
              <select class="form-control" name="city" id="lst-cities">
                <option value="">Select City</option>
              </select>
            </div>

            <div class="mb-3">
              <label class="control-label">Address 1</label>
              <!-- <textarea type="text" class="form-control" name="address" placeholder="Please enter your House Number, Building and Street Name"></textarea> -->
              <input type="text" class="form-control" name="address"  placeholder="Address 1">
            </div>

            <div class="mb-3">
              <label class="control-label">Address 2</label>
              <!-- <textarea type="text" class="form-control" name="address" placeholder="Please enter your House Number, Building and Street Name"></textarea> -->
              <input type="text" class="form-control" name="address2"  placeholder="Address 2">
            </div>

            <div class="mb-3">
              <label class="control-label">Zip Code</label>
              <input type="text" class="form-control" name="zipcode" placeholder="Please enter your zip code">
            </div>

            <div class="mb-3">
              <div class="g-recaptcha text-center" data-sitekey="{{ env('CAPTCHA_SITE_KEY') }}"></div>
            </div>
            <button type="submit" class="btn btn-black btn-sm w-100 mt-3">
              Register
            </button>
          </form>
          <hr class="custom-hr" />
          <div class="py-3 text-start">
            Have already an account?
            <a href="{{ url('./auth/login') }}" class="btn btn-green btn-sm w-100">Login here</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection