@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> --}}
<section class="login">
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <div class="row gx-5 justify-content-center align-items-center">
          <div class="col-lg-8 text-start">
            <h3>Create free account and start designing merch.</h3>
            <!-- <div class="horizontal-divider bg-yellow"></div> -->
          </div>

          <div class="col-lg-8 mt-5">
            <form action="">
              <div class="mb-3">
                <input
                  type="text"
                  class="form-control form-control-lg contact-input-custom"
                  placeholder="Email Address*"
                  required
                />
              </div>
              <div class="mb-3">
                <input
                  type="password"
                  class="form-control form-control-lg contact-input-custom"
                  required
                  placeholder="Password*"
                />
              </div>
              <div class="mb-3">
                <input
                  type="password"
                  class="form-control form-control-lg contact-input-custom"
                  required
                  placeholder="Confirm Password*"
                />
              </div>
              <!-- <div class="mb-3">
            <input
              type="text"
              class="form-control form-control-lg contact-input-custom"
              id="exampleFormControlInput1"
              placeholder="Phone Number*"
            />
          </div>
          <div class="mb-3">
            <textarea
              class="form-control form-control-lg contact-input-custom"
              required
              rows="5"
              placeholder="What can we help you with?"
            ></textarea>
          </div> -->

              <div class="mb-3">
                <button class="btn btn-lg btn-contact w-100">Submit</button>
              </div>

              <p class="text-start">
                Already have an account?
                <router-link to="/login">Login</router-link>
              </p>
            </form>
          </div>
        </div>
      </div>
      <div class="col login-page-right"></div>
    </div>
  </div>
</section>
@endsection