@php
  $title = "Register";
@endphp

@extends('layouts.main')

@section('page-id', '6037c2fd29e3f56d5c25bafc')

@section('content')
  <div class="section transparent basket">
    <div class="wide-container">
      <div class="sheet sign-in">
        <div class="text-center text-left-md">
          <h1 class="h1-2 mt-0 mb-20">Create an account</h1>
          <a href="{{ route('login') }}" class="orange-link">I already have an account</a>
        </div>
        <div class="pt-80 pt-md-40">
          <h2 class="mt-0 mb-60 hide-tablet">Register</h2>
          <div class="register-form w-form">
            <form method="POST" action="{{ route('register') }}">
              @csrf

              <div class="form-row">
                <div class="form-column">
                  <div class="form-item half">
                    <label for="first_name">First Name*</label>
                    <input type="text" class="text-field _2 w-input @error('first_name') is-invalid @enderror" maxlength="256" name="first_name" value="{{ old('first_name') }}" autocomplete="first_name">
                    @error('first_name')
                      <div class="error-message">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="form-item half">
                    <label for="last_name">Last Name*</label>
                    <input type="text" class="text-field _2 w-input @error('last_name') is-invalid @enderror" maxlength="256" name="last_name" value="{{ old('last_name') }}" autocomplete="last_name">
                    @error('last_name')
                      <div class="error-message">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="form-item half">
                    <label for="email">Email*</label>
                    <input type="email" class="text-field _2 w-input @error('email') is-invalid @enderror" maxlength="256" name="email" value="{{ old('email') }}" autocomplete="email">
                    @error('email')
                      <div class="error-message">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="form-item half">
                    <label for="phone">Telephone*</label>
                    <input type="tel" class="text-field _2 w-input @error('phone') is-invalid @enderror" maxlength="256" name="phone" value="{{ old('phone') }}" autocomplete="tel">
                    @error('phone')
                      <div class="error-message">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="form-item">
                    <label for="password">Create Password*</label>
                    <input type="password" class="text-field _2 w-input @error('password') is-invalid @enderror" maxlength="256" name="password" autocomplete="new-password">
                    @error('password')
                      <div class="error-message">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="form-item">
                    <label for="password-confirm">Confirm Password*</label>
                    <input type="password" class="text-field _2 w-input" maxlength="256" name="password_confirmation" id="password-confirm" autocomplete="new-password">
                  </div>
                  <div class="form-item">
                    <div class="password-help">
                      <p>Password must contain</p>
                      <ul role="list">
                        <li>
                          <p>Minimum 8 characters (Letters, numbers and special characters)</p>
                        </li>
                        <li>
                          <p>One of the special characters (! @ # $ % ^ &amp; *)</p>
                        </li>
                        <li>
                          <p>At least one digit</p>
                        </li>
                        <li>
                          <p>One capital letter</p>
                        </li>
                        <li>
                          <p>One lower case letter</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="form-column">
                  <div class="form-item">
                    <label for="line_1">Address Line 1*</label>
                    <input type="text" class="text-field _2 w-input @error('line_1') is-invalid @enderror" maxlength="256" name="line_1" autocomplete="address-line1" placeholder="Company Name, Street Address, etc." value="{{ old('line_1') }}">
                    @error('line_1')
                      <div class="error-message">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="form-item">
                    <label for="line_2">Address Line 2</label>
                    <input type="text" class="text-field _2 w-input @error('line_2') is-invalid @enderror" maxlength="256" name="line_2" autocomplete="address-line2" placeholder="Apartment, suite, unit, building, floor, etc." value="{{ old('line_2') }}">
                    @error('line_2')
                      <div class="error-message">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="form-item">
                    <label for="line_3">Address Line 3</label>
                    <input type="text" class="text-field _2 w-input @error('line_3') is-invalid @enderror" maxlength="256" name="line_3" autocomplete="address-line3" value="{{ old('line_3') }}">
                    @error('line_3')
                      <div class="error-message">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="form-item half">
                    <label for="city">City/Town*</label>
                    <input type="text" class="text-field _2 w-input @error('city') is-invalid @enderror" maxlength="256" name="city" value="{{ old('city') }}">
                    @error('city')
                      <div class="error-message">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="form-item half">
                    <label for="county">County*</label>
                    <input type="text" class="text-field _2 w-input @error('county') is-invalid @enderror" maxlength="256" name="county" value="{{ old('county') }}">
                    @error('county')
                      <div class="error-message">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="form-item half">
                    <label for="country">Country*</label>
                    <input type="text" class="text-field _2 w-input @error('country') is-invalid @enderror" maxlength="256" name="country" value="{{ old('country') }}">
                    @error('country')
                      <div class="error-message">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="form-item half">
                    <label for="postcode">Postcode*</label>
                    <input type="text" class="text-field _2 w-input @error('postcode') is-invalid @enderror" maxlength="256" name="postcode" value="{{ old('postcode') }}">
                    @error('postcode')
                      <div class="error-message">{{ $message }}</div>
                    @enderror
                  </div>
                  <div class="form-item"><label for="enterprise_type">Enterprise Type</label>
                    <div class="checkbox-row">
                      <div class="checkbox-column">
                        <label class="w-checkbox custom-checkbox-field">
                          <div class="w-checkbox-input w-checkbox-input--inputType-custom custom-checkbox"></div>
                          <input type="checkbox" name="enterprise_type[]" value="mixed-farm" style="opacity:0;position:absolute;z-index:-1"><span class="w-form-label">Mixed Farm</span>
                        </label>
                      </div>
                      <div class="checkbox-column">
                        <label class="w-checkbox custom-checkbox-field">
                          <div class="w-checkbox-input w-checkbox-input--inputType-custom custom-checkbox"></div>
                          <input type="checkbox" name="enterprise_type[]" value="dairy" style="opacity:0;position:absolute;z-index:-1"><span class="w-form-label">Dairy</span>
                        </label>
                      </div>
                      <div class="checkbox-column">
                        <label class="w-checkbox custom-checkbox-field">
                          <div class="w-checkbox-input w-checkbox-input--inputType-custom custom-checkbox"></div>
                          <input type="checkbox" name="enterprise_type[]" value="arable" style="opacity:0;position:absolute;z-index:-1"><span class="w-form-label">Arable</span>
                        </label>
                      </div>
                      <div class="checkbox-column">
                        <label class="w-checkbox custom-checkbox-field">
                          <div class="w-checkbox-input w-checkbox-input--inputType-custom custom-checkbox"></div>
                          <input type="checkbox" name="enterprise_type[]" value="equestrian" style="opacity:0;position:absolute;z-index:-1"><span class="w-form-label">Equestrian</span>
                        </label>
                      </div>
                      <div class="checkbox-column">
                        <label class="w-checkbox custom-checkbox-field">
                          <div class="w-checkbox-input w-checkbox-input--inputType-custom custom-checkbox"></div>
                          <input type="checkbox" name="enterprise_type[]" value="beef" style="opacity:0;position:absolute;z-index:-1"><span class="w-form-label">Beef</span>
                        </label>
                      </div>
                      <div class="checkbox-column">
                        <label class="w-checkbox custom-checkbox-field">
                          <div class="w-checkbox-input w-checkbox-input--inputType-custom custom-checkbox"></div>
                          <input type="checkbox" name="enterprise_type[]" value="lawns" style="opacity:0;position:absolute;z-index:-1"><span class="w-form-label">Lawns</span>
                        </label>
                      </div>
                      <div class="checkbox-column">
                        <label class="w-checkbox custom-checkbox-field">
                          <div class="w-checkbox-input w-checkbox-input--inputType-custom custom-checkbox"></div>
                          <input type="checkbox" name="enterprise_type[]" value="sheep" style="opacity:0;position:absolute;z-index:-1"><span class="w-form-label">Sheep</span>
                        </label>
                      </div>
                      <div class="checkbox-column">
                        <label class="w-checkbox custom-checkbox-field">
                          <div class="w-checkbox-input w-checkbox-input--inputType-custom custom-checkbox"></div>
                          <input type="checkbox" name="enterprise_type[]" value="landscaping" style="opacity:0;position:absolute;z-index:-1"><span class="w-form-label">Landscaping</span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="agreement-block"><label class="w-checkbox agreement-checkbox-field mb-20">
                  <div class="w-checkbox-input w-checkbox-input--inputType-custom agreement-checkbox"></div><input type="checkbox" name="confirm_terms" style="opacity:0;position:absolute;z-index:-1"><span class="w-form-label @error('confirm_terms') is-invalid @enderror">* I agree to the website&#x27;s <a href="#" class="orange-link non-italic">Terms &amp; Conditions</a></span>
                </label><label class="w-checkbox agreement-checkbox-field mb-0">
                  <div class="w-checkbox-input w-checkbox-input--inputType-custom agreement-checkbox"></div><input type="checkbox" name="marketing_opt_in" style="opacity:0;position:absolute;z-index:-1"><span class="w-form-label">I agree to receive communication from Watson Seeds Ltd who will handle my data in accordance with their <a href="#" class="orange-link non-italic">Privacy Policy</a>.</span>
                </label></div>
              <div class="text-center"><input type="submit" value="Register" class="button basket w-button"></div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection