@extends('auth.signup-layout')

@section('title', 'Signup')

@section('header', 'Create Your Account')

@section('content')

<ol class="steps mt-5 pt-2">
  <li class="step  is-active" data-step="1">
    Personal Info
  </li>
  <li class="step " data-step="2">
    Organization Info
  </li>
  <li class="step  " data-step="3">
    Contact Details
  </li>

</ol>

        <form id="signupForm"  method="post" action="{{ route('do_register') }}" class="mt-5 needs-validation" novalidate>
            @csrf
            <div class="form-group">
                <label for="firstname">First Name</label>
                <input type="text" class="form-control py-3 {{ $errors->has('first_name') ? 'is-invalid' : '' }}" required name="first_name" value="{{ old('first_name') }}" placeholder="@lang('auth.first_name')">
                <span class="invalid-feedback">
                    @if ($errors->has('first_name'))
                        <strong>{{ $errors->first('first_name') }}</strong>
                    @else
                        <strong>Please provide a valid first name.</strong>
                    @endif
                </span>
            </div>

            <div class="form-group">
                <label for="lastname">Last Name</label>
                <input type="text" class="form-control py-3 {{ $errors->has('last_name') ? 'is-invalid' : '' }}" required name="last_name" value="{{ old('last_name') }}" placeholder="@lang('auth.last_name')">
                <span class="invalid-feedback">
                    @if ($errors->has('last_name'))
                        <strong>{{ $errors->first('last_name') }}</strong>
                    @else
                        <strong>Please provide a valid last name.</strong>
                    @endif
                </span>
            </div>

            <div class="form-group">
                <label for="phonenumber">Phone Number</label>
                <input type="text" class="form-control py-3 {{ $errors->has('phone_no') ? 'is-invalid' : '' }}" required name="phone_no" value="{{ old('phone_no') }}" placeholder="@lang('models/users.fields.phone_no')">
                <span class="invalid-feedback">
                    @if ($errors->has('phone_no'))
                        <strong>{{ $errors->first('phone_no') }}</strong>
                    @else
                        <strong>Please provide a valid phone number.</strong>
                    @endif
                </span>
            </div>

            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" class="form-control py-3 {{ $errors->has('email') ? 'is-invalid' : '' }}" required name="email" value="{{ old('email') }}" placeholder="@lang('auth.email')">
                <span class="invalid-feedback">
                    @if ($errors->has('email'))
                        <strong>{{ $errors->first('email') }}</strong>
                    @else
                        <strong>Please provide a valid email address.</strong>
                    @endif
                </span>
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control py-3 {{ $errors->has('password') ? 'is-invalid' : '' }}" required name="password" placeholder="@lang('auth.password')">
                <span class="invalid-feedback">
                    @if ($errors->has('password'))
                        <strong>{{ $errors->first('password') }}</strong>
                    @else
                        <strong>Enter a valid password.</strong>
                    @endif
                </span>
            </div>

            <div class="form-group">
                <label for="confirm_password">Confirm Password</label>
                <input type="password" class="form-control py-3" required name="password_confirmation" placeholder="@lang('auth.confirm_password')">
                <span class="invalid-feedback">
                    @if ($errors->has('password_confirmation'))
                        <strong>{{ $errors->first('password_confirmation') }}</strong>
                    @else
                        <strong>Confirm password is required.</strong>
                    @endif
                </span>
            </div>

            <button type="submit" class="mt-3 btn btn-primary text-white col-12 btn-block font-weight-bold">CONTINUE</button>

            <p class="mt-3 text-center">Already have an account? <a class="text-primary" href="{{ route('login') }}">Log in</a></p>
        </form>
        @endsection

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const signupForm = document.getElementById('signupForm');

        signupForm.addEventListener('submit', function(event) {
            if (!signupForm.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            signupForm.classList.add('was-validated');
        });
    });
</script>