@extends('web.layouts.layout')

@section('content')

    <main class="mt-100">
        <!-- contact section-->
        <section class="section_padding contact-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 wow slow fadeInUp">
                        <h3 class="d-flex fw-bold orange-color mb-2">
                            {{ __('main.welcome_message') }}
                            <img data-src="{{ asset('assets/web/images/icons/welcome.svg') }}"
                                 src="{{ asset('assets/web/images/icons/welcome.svg') }}"
                                 width="20px"
                                 height="25px"
                                 class="img_contain lazyloaded ms-1 mt-1 slide_left_right"
                                 alt="{{ $title ?? '' }}"/>
                        </h3>
                        <p class="fs-4">{{ __('users::users.create_account2') }}</p>
                        <form action="{{ route('web.users.add_user', ['hashed_code' => $hashed_code]) }}"
                              method="post" enctype="multipart/form-data" id="register-form"
                              class="add-asterisk ajax-form">
                            @csrf
                            <div class="row mt-4">
                                @if(in_array('name', $moduleFields))
                                    <div class="col-md-12 col-lg-12 col-sm-12 col-x-12">
                                        <div class="input-group mb-3">
                                            <input type="text"
                                                   name="name" value="{{ old('name') }}" required
                                                   class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}"
                                                   placeholder="{{ __('users::users.name') }}"
                                                   aria-label="{{ __('users::users.name') }}">
                                            <span class="input-group-text orange-color" id="basic-addon1">
                                                <i class="fa-light fa-user"></i>
                                            </span>
                                        </div>
                                    </div>
                                @endif
                                {{-- @if(in_array('username', $moduleFields))
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <input type="text"
                                                   name="username" value="{{ old('username') }}" required
                                                   class="form-control real-time-validation {{ $errors->has('username') ? 'is-invalid' : '' }}"
                                                   data-role="user"
                                                   data-user-id=""
                                                   placeholder="{{ __('users::users.username') }} ({{ __('users::users.used_for_login') }})"/>
                                            <span class="icon"> <i class="fa-light fa-user"></i> </span>
                                        </div>
                                    </div>
                                @endif --}}
                                <div class="col-md-12 col-lg-12 col-sm-12 col-x-12">
                                    <div class="input-group mb-3">
                                        <input type="email" name="email" required
                                               value="{{ old('email') }}"
                                               class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}"
                                               placeholder="{{ __('users::users.email') }}"
                                               aria-label="{{ __('users::users.email') }}">
                                        <span class="input-group-text orange-color" id="basic-addon1">
                                            <i class="fa-light fa-envelope"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-12 col-lg-12 col-sm-12 col-x-12">
                                    <div class="input-group mb-3">
                                        {{-- value="{{ old('phone') }}" --}}
                                        <input type="number"
                                               name="phone"
                                               required
                                               value="{{ $field_value ?? null }}"
                                               class="form-control {{ $errors->has('phone') ? 'is-invalid' : '' }} read-only"
                                               readonly
                                               placeholder="{{ __('users::users.phone') }}"
                                               aria-label="{{ __('users::users.phone') }}">
                                        <span class="input-group-text orange-color" id="basic-addon1">
                                            <i class="fa-light fa-mobile"></i>
                                        </span>
                                        {{-- <select name="country_code" class="code_select pe-none">
                                            @if(isset($countries))
                                                @foreach($countries as $country)
                                                    <option
                                                        value="{{ $country->iso2 }}" @selected(old('country_code') == $country->iso2)>
                                                        {{ $country->country_code }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select> --}}
                                    </div>
                                </div>
                                <div class="col-md-12 col-lg-12 col-sm-12 col-x-12">
                                    <div class="input-group mb-3">
                                        <input type="password"
                                            name="password"
                                            required
                                            class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}"
                                            id="newPassword"
                                            placeholder="{{ __('users::users.password') }}"
                                            aria-label="{{ __('users::users.password') }}"/>
                                        {{-- <small>{{ __('users::users.password_must_be') }}</small> --}}
                                        <span class="input-group-text orange-color"
                                                id="toggleNewPassword"
                                                style="cursor: pointer">
                                            <i class="fa-light fa-eye-slash" id="newPasswordIcon"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-12 col-lg-12 col-sm-12 col-x-12">
                                    <div class="input-group mb-3">
                                        <input type="password"
                                            name="password_confirmation"
                                            required
                                            class="form-control {{ $errors->has('password_confirmation') ? 'is-invalid' : '' }}"
                                            id="confirmPassword"
                                            placeholder="{{ __('users::users.password_confirmation') }}"
                                            aria-label="{{ __('users::users.password_confirmation') }}"/>
                                        <span class="input-group-text orange-color"
                                              id="toggleConfirmPassword"
                                              style="cursor: pointer">
                                            <i class="fa-light fa-eye-slash" id="confirmPasswordIcon"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                                    <div class="form-check text-grey">
                                        <label class="form-check-label grey-text fs-6"
                                               for="flexCheckDefault">
                                            <input class="form-check-input"
                                                type="checkbox"
                                                name="confirm"
                                                required
                                                id="flexCheckDefault"/>
                                            {{ __('main.agreeing_to') }}
                                            <a href="{{ route('web.pages.show', $termsPage->id ?? null) }}"
                                               target="_blank"
                                               class="underline-text">
                                                {{ __('main.terms_conditions') }}
                                            </a>
                                            {{ __('general.and') }}
                                            <a href="{{ route('web.pages.show', $privacyPage->id ?? null) }}"
                                               target="_blank"
                                               class="underline-text">
                                                {{ __('main.privacy_policy') }}
                                            </a>
                                        </label>
                                        @error('confirm')
                                            <div class="text-danger small">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            {{-- <p class="another_opt text-center mt-4">
                                {{ __('users::users.have_account') }}
                                <a href="{{ route('web.users.login_form') }}" class="color-primary">
                                    {{ __('users::users.login2') }}
                                </a>
                            </p> --}}
                            <div class="nav_btns d-inline mt-4">
                                <button type="submit" class="btn btn-primary half-rounded hvr-txt-trans">
                                    <div class="txt" data-text="{{ __('users::users.new_registration') }}">
                                        <span class="fs-7">
                                            {{-- __('users::users.create_account') --}}
                                            {{-- __('users::users.sign_up') --}}
                                            {{ __('users::users.new_registration') }}
                                            <img data-src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                              src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                              alt="arrows"
                                              class="lazyload img_contain ms-2"/>
                                        </span>
                                    </div>
                                </button>
                            </div>
                            <input type="hidden" name="role" value="{{ $role ?? '' }}"/>
                        </form>
                    </div>
                    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 wow slow fadeInUp">
                        <img
                            data-src="{{ asset('assets/web/images/login/register2.svg') }}"
                            src="{{ asset('assets/web/images/login/register2.svg') }}"
                            width="784px"
                            height="522px"
                            class="img_contain lazyloaded slide_up_down"
                            alt="..."/>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection

@push('stack_scripts')

@endpush