@extends('landing.layouts.app')

@section('content')
    <div class="container">

        <div class="container py-5">
            <div class="row">
                <div class="card col-md-5  mb-0 border-0">
                    <div class="card-body text-start">
                        <div>
                            <img class="img-fluid" src="{{ asset('landing/login-img.png') }}" alt="login image" width="450"
                                height="450">
                        </div>
                    </div>
                </div>
                <div class="card col-md-7  mb-0 border-light">
                    <div class="card-body">

                        <h3 class="mb-3 fw-semibold text-dark border-bottom pb-3">{{ __('Setup New Account') }}</h3>

                        <form method="POST" action="{{ route('register') }}">
                            @csrf
                            <input type="hidden" value="{{ request('referral_by') }}" name="referral_by" />
                            <div class="input-group mb-3"><span class="input-group-text">
                                    <svg class="icon">
                                        <use xlink:href="{{ asset('icons/coreui.svg#cil-user') }}"></use>
                                    </svg></span>
                                <input class="form-control  @error('name') is-invalid @enderror" type="text"
                                       value="{{old('name')}}"
                                    name="name" placeholder="{{ __('Name') }}" required autocomplete="name" autofocus>
                                @error('name')
                                    <span class="invalid-feedback">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>

                            <div class="input-group mb-3"><span class="input-group-text">
                                    <svg class="icon">
                                        <use xlink:href="{{ asset('icons/coreui.svg#cil-envelope-open') }}"></use>
                                    </svg></span>
                                <input class="form-control @error('email') is-invalid @enderror" type="text"  value="{{old('email')}}"
                                    name="email" placeholder="{{ __('Email') }}" required autocomplete="email">
                                @error('email')
                                    <span class="invalid-feedback">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>

                            <div x-data="{ show: false }" class="input-group mb-4">
                                <span class="input-group-text">
                                    <svg class="icon">
                                        <use xlink:href="{{ asset('icons/coreui.svg#cil-lock-locked') }}"></use>
                                    </svg>
                                </span>
                                <input class="form-control @error('password') is-invalid @enderror"  value="{{old('password')}}"
                                    :type="show ? 'text' : 'password'" name="password" placeholder="{{ __('Password') }}"
                                    required>

                                <a href="#" @click.prevent="show = !show" class="input-group-text bg-white">
                                    <i x-show="!show" class="bi bi-eye-slash"></i>
                                    <i x-show="show" class="bi bi-eye"></i>
                                </a>
                            </div>

                            <div x-data="{ show: false }" class="input-group"><span class="input-group-text ">
                                    <svg class="icon">
                                        <use xlink:href="{{ asset('icons/coreui.svg#cil-lock-locked') }}"></use>
                                    </svg></span>
                                <input class="form-control @error('password_confirmation') is-invalid @enderror"
                                       value="{{old('password_confirmation')}}"
                                    :type="show ? 'text' : 'password'" name="password_confirmation"
                                    placeholder="{{ __('Confirm Password') }}" required autocomplete="new-password">

                                <a href="#" @click.prevent="show = !show" class="input-group-text bg-white">
                                    <i x-show="!show" class="bi bi-eye-slash"></i>
                                    <i x-show="show" class="bi bi-eye"></i>
                                </a>
                            </div>

                            @error('password')
                            <div class="text-danger ">
                                <p class="mb-0"><small> Password must be at least 8 characters in length.</small></p>
                                <p class="mb-0"> <small>Password must contain at least one lowercase letter.</small></p>
                                <p class="mb-0"><small>Password must contain at least one uppercase letter.</small></p>
                                <p class="mb-0"><small>Password must contain at least one digit.</small></p>
                                <p class="mb-0"><small>Password must contain a special character.</small></p>
                            </div>
                            @enderror


                            <label class="form-check mt-4">
                                <input  type="checkbox" name="agree_to_terms" class="form-check-input" value="1" required>
                                <span class="form-check-label">Agree the <a href="{{ route('landing.terms-conditions') }}" tabindex="-1" target="_blank">terms and
                                        policy</a>.</span>
                            </label>

                            <div class="d-flex align-items-center justify-content-between">
                                <h6>{{ __('Already have an account ? ') }}<a href="{{ route('login') }}"
                                        class="text-danger" style="text-decoration: none">{{ __('Sign In') }}</a>
                                </h6>

                                <button class="btn btn-block btn-dark px-5 text-white"
                                    type="submit">{{ __('Create Account') }}</button>
                            </div>


                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection