@extends('layouts.default')

@section('page_css')
      @include('includes.portal-css')
@stop

@section('content')


<!-- Breadcroumbs start -->
<div class="wshipping-content-block wshipping-breadcroumb inner-bg-1">
  <div class="container">
    <div class="row">
        <div class="col-12 col-lg-6">
          <h1>Customer Registration</h1>
          <a href="{{URL('/')}}" title="Home">Home</a> / Customer Registration
        </div>
        <div class="col-12 col-lg-6 text-right">
          <h4>We move freight to all over the world,  
            The best logistic company, <span>FAST</span> and <span>SAFELY!</span></h4>
        </div>
    </div>
  </div>
</div>
<!-- Breadcroumbs end -->

<!-- Customer Registration Start -->
<div class="wshipping-content-block">
  <div class="container">
    <div class="customer-login">
      <div class="row">
        <div class="col-12 col-md-6 col-lg-6">
          <div class="customer-login-left">
              <div class="login-icon"><i class="fa fa-unlock-alt"></i></div>
              <h4 class="mb-3">Welcome To new account</h4>
              
              <a href="{{ route('customer-portal') }}">If you have account already, please login in</a>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-6">
          <div class="customer-login-block">
            <h2>Registration</h2>

              <form method="POST" action="{{ route('register') }}" id="signup" data-parsley-validate>
                    @csrf
                  @include('includes.ajax-call-responce-message-block')
                <div class="form-group">
                  <div class="row">
                    <div class="col-12 col-md-6 col-lg-6">
                      <label>First Name:</label>
                      <input name="fname"  type="text"  value="{{ old('fname') }}"  data-parsley-required
                          class="form-control" data-parsley-length="[3,255]" data-parsley-pattern="[a-zA-Z ]+$" data-parsley-trigger="keyup">

                      @if ($errors->has('fname'))
                        <span class="invalid-feedback">
                          <strong>{{ $errors->first('fname') }}</strong>
                        </span>
                      @endif
                    </div>
                    <div class="col-12 col-md-6 col-lg-6">
                      <label>Last Name:</label>
                      <input name="lname"  type="text"  value="{{ old('lname') }}"
                          class="form-control" data-parsley-required data-parsley-length="[3,255]"  data-parsley-pattern="[a-zA-Z ]+$" data-parsley-trigger="keyup">

                      @if ($errors->has('lname'))
                        <span class="invalid-feedback">
                          <strong>{{ $errors->first('lname') }}</strong>
                        </span>
                      @endif
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="row">
                    <div class="col-12 col-md-6 col-lg-6">
                      <label>Email:</label>
                      <input name="email" value="{{ old('email') }}"
                        class="form-control" data-parsley-required data-parsley-type="email" data-parsley-trigger="keyup" >

                      @if ($errors->has('email'))
                        <span class="invalid-feedback">
                          <strong>{{ $errors->first('email') }}</strong>
                        </span>
                      @endif
                    </div>
                    <div class="col-12 col-md-6 col-lg-6">
                      <label>Phone:</label>
                      <input name="phone"  type="text"  value="{{ old('phone') }}"
                          class="form-control" data-parsley-required data-parsley-length="[10,15]" data-parsley-pattern="^[0-9-]*$"  data-parsley-maxlength="15"  minlength="10"  maxlength="15" data-parsley-trigger="keyup">

                      @if ($errors->has('phone'))
                        <span class="invalid-feedback">
                          <strong>{{ $errors->first('phone') }}</strong>
                        </span>
                      @endif
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="row">
                    <div class="col-12 col-md-6 col-lg-6">
                      <label>Password:</label>
                      <input name="password" required type="password" id="password"
                      class="form-control{{ $errors->has('password') ? ' is-invalid': '' }}" data-parsley-group="first-step" data-parsley-required data-parsley-length="[6,20]" data-parsley-trigger="keyup">

                      @if ($errors->has('password'))
                      <span class="invalid-feedback">
                        <strong>{{ $errors->first('password') }}</strong>
                      </span>
                      @endif
                    </div>
                    <div class="col-12 col-md-6 col-lg-6">
                      <label>Confirm Password:</label>
                      <input type="password" class="form-control" name="password_confirmation" data-parsley-required data-parsley-group="first-step"  data-parsley-equalto="#password"  data-parsley-trigger="keyup"/>
                    </div>
                </div>
                </div>
                    <div class="form-group">
                  <div class="row">
                    <div class="col-12 col-md-6 col-lg-6">
                      <label>Origin Country: </label>
                      <select class="form-control" name="country"  id="OriginCountry" data-parsley-required>
                        <option value=''>Select Country</option>
                        @foreach($countries as $key => $value)
                          @if($value != '')
                          <option value="{{ $value->id }}">{{ $value->name }}</option>
                        @endif
                        @endforeach
                      </select>
                    </div>
                    <div class="col-12 col-md-6 col-lg-6">
                      <label>Origin State:</label>
                      <select class="form-control" name="state" id="state">
                        <option value=''>Select State</option>
                      </select>
                    </div>
                  </div>
                </div>
                  <div class="form-group">
                    <div class="row">
                      <div class="col-12 col-md-6 col-lg-6">
                      <label>Origin City:</label>
                      <select class="form-control" name="city" id="city">
                        <option value=''>Select City</option>
                      </select>
                    </div>
                  </div>
                </div>
                <button type="submit" class="btn btn-submit btn-1" id="submit">Registration</button>
              </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Customer Registration end -->


@section('javascript')
@include('includes.portal-script')
<script type="text/javascript" src="{{ APP_ROOT.'js/get-data.js' }}"></script>
<script type="text/javascript" src="{{ FECUSTOMER_URL.'js/signup.js'}}"></script>
@stop
@endsection