{{--
 * LaraClassifier - Classified Ads Web Application
 * Copyright (c) BeDigit. All Rights Reserved
 *
 * Website: https://laraclassifier.com
 *
 * LICENSE
 * -------
 * This software is furnished under a license and may be used and copied
 * only in accordance with the terms of such license and with the inclusion
 * of the above copyright notice. If you Purchased from CodeCanyon,
 * Please read the full License from here - http://codecanyon.net/licenses/standard
--}}
@extends('layouts.master')

@section('content')
    @if (!(isset($paddingTopExists) and $paddingTopExists))
        <div class="p-0 mt-lg-4 mt-md-3 mt-3"></div>
    @endif
    <div class="main-container">
        <div class="container">
            <div class="row">
                @if (isset($errors) && $errors->any())
                    <div class="col-12">
                        <div class="alert alert-danger alert-dismissible">
                            <button type="button" class="btn-close" data-bs-dismiss="alert"
                                aria-label="{{ t('Close') }}"></button>
                            <h5><strong>{{ t('oops_an_error_has_occurred') }}</strong></h5>
                            <ul class="list list-check">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                @if (session()->has('flash_notification'))
                    <div class="col-12">
                        @include('flash::message')
                    </div>
                @endif

                <div class="col-md-8 page-content">
                    <div class="inner-box">
                        <h2 class="title-2">
                            <strong><i class="fas fa-user-plus"></i> {{ t('create_your_account_it_is_quick') }}</strong>
                        </h2>

                        @includeFirst([
                            config('larapen.core.customizedViewPath') . 'auth.login.inc.social',
                            'auth.login.inc.social',
                        ])

                        @php
                            $mtAuth = !socialLoginIsEnabled() ? ' mt-5' : ' mt-4';
                        @endphp
                        <div class="row{{ $mtAuth }}">
                            <div class="col-12">
                                <form id="signupForm" class="form-horizontal" method="POST"
                                    action="{{ url()->current() }}">
                                    {!! csrf_field() !!}
                                    <fieldset>
                                        {{-- username --}}
                                        @php
                                            $usernameIsEnabled = !config('larapen.core.disable.username');
                                        @endphp
                                        @if ($usernameIsEnabled)
                                                                                        <div class="row mb-3 required">
                                                <label class="col-md-3 col-form-label{{ $usernameError }}"
                                                    for="username">{{ t('Username') }} <sup>*</sup></label>
                                                <div class="col-md-9 col-lg-6">
                                                    <div class="input-group">
                                                        <span class="input-group-text"><i class="far fa-user"></i></span>
                                                        <input id="username" name="username" type="text"
                                                            class="form-control{{ $usernameError }}"
                                                            placeholder="{{ t('Username') }}"
                                                            value="{{ old('username') }}">
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        {{-- country_code --}}
                                        @if (empty(config('country.code')))
                                            @php
                                                $countryCodeError =
                                                    isset($errors) && $errors->has('country_code') ? ' is-invalid' : '';
                                                $countryCodeValue = !empty(config('ipCountry.code'))
                                                    ? config('ipCountry.code')
                                                    : 0;
                                            @endphp
                                            <div class="row mb-3 required">
                                                <label class="col-md-3 col-form-label{{ $countryCodeError }}"
                                                    for="country_code">
                                                    {{ t('your_country') }} <sup>*</sup>
                                                </label>
                                                <div class="col-md-9 col-lg-6">
                                                    <select id="countryCode" name="country_code"
                                                        class="form-control large-data-selecter{{ $countryCodeError }}">
                                                        <option value="0" @selected(empty(old('country_code')))>
                                                            {{ t('Select') }}
                                                        </option>
                                                        @foreach ($countries as $code => $item)
                                                            <option value="{{ $code }}"
                                                                @selected(old('country_code', $countryCodeValue) == $code)>
                                                                {{ $item->get('name') }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        @else
                                            <input id="countryCode" name="country_code" type="hidden"
                                                value="{{ config('country.code') }}">
                                        @endif

                                        {{-- auth_field (as notification channel) --}}
                                        @php
                                            $authFields = getAuthFields(true);
                                            $authFieldError =
                                                isset($errors) && $errors->has('auth_field') ? ' is-invalid' : '';
                                            $usersCanChooseNotifyChannel = isUsersCanChooseNotifyChannel();
                                            $authFieldValue = $usersCanChooseNotifyChannel
                                                ? old('auth_field', getAuthField())
                                                : getAuthField();
                                        @endphp
                                        @if ($usersCanChooseNotifyChannel)
                                            <div class="row mb-3 required">
                                                <label class="col-md-3 col-form-label"
                                                    for="auth_field">{{ t('notifications_channel') }} <sup>*</sup></label>
                                                <div class="col-md-9">
                                                    @foreach ($authFields as $iAuthField => $notificationType)
                                                        <div class="form-check form-check-inline pt-2">
                                                            <input name="auth_field" id="{{ $iAuthField }}AuthField"
                                                                value="{{ $iAuthField }}"
                                                                class="form-check-input auth-field-input{{ $authFieldError }}"
                                                                type="radio">
                                                            <label class="form-check-label mb-0"
                                                                for="{{ $iAuthField }}AuthField">
                                                                {{ $notificationType }}
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                    <div class="form-text text-muted">
                                                        {{ t('notifications_channel_hint') }}
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <input id="{{ $authFieldValue }}AuthField" name="auth_field" type="hidden"
                                                value="{{ $authFieldValue }}">
                                        @endif

                                        @php
                                            $forceToDisplay = isBothAuthFieldsCanBeDisplayed()
                                                ? ' force-to-display'
                                                : '';
                                        @endphp

                                        <div class="row auth-field-item required{{ $forceToDisplay }}">
                                            {{-- email --}}
                                            @php
                                                $emailError =
                                                    isset($errors) && $errors->has('email') ? ' is-invalid' : '';
                                            @endphp
                                            <div class="col-md-6 mb-3">
                                                <label for="email" class="{{ $emailError }}">{{ t('email') }}
                                                    @if (getAuthField() == 'email')
                                                        <sup>*</sup>
                                                    @endif
                                                </label>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="far fa-envelope"></i></span>
                                                    <input id="email" name="email" type="email"
                                                        class="form-control{{ $emailError }}"
                                                        placeholder="{{ t('email_address') }}" value="{{ old('email') }}"
                                                        oninput="this.value = this.value.toUpperCase()">
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                {{-- phone --}}
                                                @php
                                                    $phoneError =
                                                        isset($errors) && $errors->has('phone') ? ' is-invalid' : '';
                                                    $phoneCountryValue = config('country.code');
                                                @endphp
                                                <label for="phone" class="{{ $phoneError }}">{{ t('phone_number') }}
                                                    {{-- @if (getAuthField() == 'phone') --}}
                                                    <sup>*</sup>
                                                    {{-- @endif --}}
                                                </label>
                                                <input id="phone" name="phone"
                                                    class="form-control input-md{{ $phoneError }}" type="tel"
                                                    value="{{ phoneE164(old('phone'), old('phone_country', $phoneCountryValue)) }}"
                                                    autocomplete="off">
                                                <input name="phone_country" type="hidden"
                                                    value="{{ old('phone_country', $phoneCountryValue) }}">
                                            </div>
                                        </div>
                                        <div class="row required">
                                            <div class="col-md-6 mb-3">
                                                {{-- password --}}
                                                                                                <label for="password" class="{{ $passwordError }}">{{ t('password') }}
                                                    <sup>*</sup></label>
                                                <div class="input-group show-pwd-group mb-2">
                                                    <input id="password" name="password" type="password"
                                                        class="form-control{{ $passwordError }}"
                                                        value="{{ old('password') }}" placeholder="{{ t('password') }}"
                                                        autocomplete="new-password">
                                                    <span class="icon-append show-pwd">
                                                        <button type="button" class="eyeOfPwd">
                                                            <i class="far fa-eye-slash"></i>
                                                        </button>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                {{-- password_confirmation --}}
                                                <label for="password_confirmation_input"
                                                    class="{{ $passwordError }}">{{ t('Confirm Password') }}
                                                    <sup>*</sup></label>
                                                <div class="input-group show-pwd-group mb-2">
                                                    <input id="password_confirmation_input" name="password_confirmation"
                                                        type="password" class="form-control{{ $passwordError }}"
                                                        value="{{ old('password_confirmation') }}"
                                                        placeholder="{{ t('Password Confirmation') }}"
                                                        autocomplete="off">
                                                    <span class="icon-append show-pwd">
                                                        <button type="button" class="eyeOfPwdConf"
                                                            data-target="#password_confirmation_input">
                                                            <i class="far fa-eye-slash"></i>
                                                        </button>
                                                    </span>
                                                </div>
                                                <div class="form-text text-muted">
                                                    {{ t('at_least_num_characters', ['num' => config('settings.security.password_min_length', 6)]) }}
                                                </div>
                                            </div>
                                        </div>
                                        <hr size="1">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                {{-- firstname --}}
                                                                                                <label for="name" class="{{ $nameError }}">{{ t('first_name') }}
                                                    <sup>*</sup></label>
                                                <input name="name" placeholder="{{ t('first_name') }}"
                                                    class="form-control input-md{{ $nameError }}" type="text"
                                                    value="{{ old('name') }}"
                                                    oninput="this.value = this.value.toUpperCase()">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                {{-- middlename --}}
                                                                                                <label for="middlename"
                                                    class="{{ $middlenameError }}">{{ t('Middle') }}
                                                </label>
                                                <input name="middlename" type="text"
                                                    class="form-control{{ $middlenameError }}"
                                                    placeholder="{{ t('Middle') }}" value="{{ old('middlename') }}"
                                                    oninput="this.value = this.value.toUpperCase()">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                {{-- lastname --}}
                                                                                                <label for="lastname" class="{{ $surnameError }}">{{ t('last_name') }}
                                                    <sup>*</sup></label>
                                                <input name="lastname" placeholder="{{ t('last_name') }}"
                                                    class="form-control input-md{{ $surnameError }}" type="text"
                                                    value="{{ old('lastname') }}"
                                                    oninput="this.value = this.value.toUpperCase()">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                {{-- suffix --}}
                                                                                                <label for="suffix" class="{{ $suffixError }}">
                                                    {{ t('Suffix') }}
                                                </label>
                                                <input name="suffix" type="text"
                                                    class="form-control{{ $suffixError }}"
                                                    placeholder="{{ t('Suffix') }}" value="{{ old('suffix') }}"
                                                    oninput="this.value = this.value.toUpperCase()">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                {{-- user_gender --}}