@extends('frontend::layouts.auth')
<style>
    {!! $customCss->css ?? '' !!}
</style>
@section('title')
    {{ __('Register') }}
@endsection
@section('content')
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-6">
                <div class="td-authentication-2-box-left">
                    <div class="td-authentication-2-box-left-content td-authentication-2-box-left-content-signup">
                        <a href="{{ url('/') }}" class="auth-logo">
                            <img src="{{ asset(setting('site_logo')) }}">
                        </a>
                        <h2>{{ $data['title'] }}</h2>
                        <form action="{{ route('register') }}" class="td-authentication-left-box-forms common-form"
                            method="POST">
                            @csrf

                            <div class="row g-2 g-lg-3">
                                <div class="col-lg-6">
                                    <div class="form-floating common-form-item">
                                        <input type="text" class="form-control" id="firstName"
                                            placeholder="{{ __('First Name') }}" name="first_name">
                                        <label for="firstName">{{ __('First Name') }} <span
                                                class="text-danger">*</span></label>
                                    </div>
                                    @error('first_name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-floating common-form-item">
                                        <input type="text" class="form-control" id="lastName"
                                            placeholder="{{ __('Last Name') }}" name="last_name">
                                        <label for="lastName">{{ __('Last Name') }} <span
                                                class="text-danger">*</span></label>
                                    </div>
                                    @error('last_name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                @if (getPageSetting('username_show'))
                                    <div class="col-lg-6">
                                        <div class="form-floating common-form-item">
                                            <input type="text" class="form-control" id="username"
                                                placeholder="{{ __('Username') }}" name="username">
                                            <label for="username">{{ __('Username') }}
                                                @if (getPageSetting('username_validation'))
                                                    <span class="text-danger">*</span>
                                                @endif
                                            </label>
                                        </div>
                                        @error('username')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                @endif
                                @if (getPageSetting('gender_show'))
                                    <div class="col-lg-6">
                                        <div class="single-floating-input">
                                            <div class="custom-select-container">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control custom-select-trigger"
                                                        id="floatingSelectInput" placeholder="{{ __('Gender') }}"
                                                        readonly>
                                                    <label for="floatingSelectInput">{{ __('Gender') }}
                                                        @if (getPageSetting('gender_validation'))
                                                            <span class="text-danger">*</span>
                                                        @endif
                                                    </label>
                                                </div>
                                                <div class="custom-options">
                                                    <div class="custom-option" data-value="male" data-code="male">
                                                        <span>{{ __('Male') }}</span>
                                                    </div>
                                                    <div class="custom-option" data-value="female" data-code="female">
                                                        <span>{{ __('Female') }}</span>
                                                    </div>
                                                    <div class="custom-option" data-value="other" data-code="other">
                                                        <span>{{ __('Other') }}</span>
                                                    </div>
                                                </div>
                                                <input type="hidden" id="floatingSelectValue" name="gender">
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if (getPageSetting('phone_show'))
                                    <div class="col-lg-12">
                                        <div class="form-floating common-form-item">
                                            <input type="text" class="form-control" id="phoneNumber"
                                                placeholder="{{ __('Phone Number') }}" name="phone">
                                            <label for="phoneNumber">{{ __('Phone Number') }}
                                                @if (getPageSetting('phone_validation'))
                                                    <span class="text-danger">*</span>
                                                @endif
                                            </label>
                                        </div>
                                        @error('phone')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                @endif
                                @if (getPageSetting('country_show'))
                                    <div class="col-lg-12">
                                        <div class="form-floating common-form-item">
                                            <input type="text" class="form-control" id="country"
                                                placeholder="{{ __('Country') }}" name="country">
                                            <label for="country">{{ __('Country') }}
                                                @if (getPageSetting('country_validation'))
                                                    <span class="text-danger">*</span>
                                                @endif
                                            </label>
                                        </div>
                                        @error('country')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                @endif
                                @if (getPageSetting('company_name_show'))
                                    <div class="col-lg-12">
                                        <div class="form-floating common-form-item">
                                            <input type="text" class="form-control" id="companyName"
                                                placeholder="{{ __('Company Name') }}" name="company_name">
                                            <label for="companyName">{{ __('Company Name') }}
                                                @if (getPageSetting('company_name_validation'))
                                                    <span class="text-danger">*</span>
                                                @endif
                                            </label>
                                        </div>
                                        @error('company_name"')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                @endif
                                <div class="col-lg-12">
                                    <div class="form-floating common-form-item">
                                        <input type="email" class="form-control" id="floatingInput3"
                                            placeholder="{{ __('Email Address') }}" name="email">
                                        <label for="floatingInput3">{{ __('Email Address') }} <span
                                                class="text-danger">*</span> </label>
                                    </div>
                                    @error('email')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-floating common-form-item">
                                        <input type="password" class="form-control" id="floatingInput4"
                                            placeholder="Password" name="password">
                                        <label for="floatingInput4">{{ __('Password') }} <span
                                                class="text-danger">*</span>
                                        </label>
                                    </div>
                                    @error('password')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-12">
                                    <div class="checkbox-and-forgot-pass">
                                        <div class="form-check">
                                            <input
                                                class="form-check-input custom-form-check-input custom-form-check-input-2 custom-form-check-input-3"
                                                name="i_agree" type="checkbox" value="yes" id="i_agree">
                                            <label
                                                class="form-check-label custom-form-check-label custom-form-check-label-2 custom-form-check-label-3"
                                                for="i_agree">
                                                {{ __('I agree to the') }} <a
                                                    href="{{ url('/terms-and-conditions') }}">{{ __('Terms & Conditions') }}</a>
                                            </label>
                                        @error('i_agree')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                        </div>
                                    </div>
                                    @if ($googleReCaptcha)
                                        <div class="col-lg-12">
                                            <div class="g-recaptcha" id="feedback-recaptcha"
                                                data-sitekey="{{ json_decode($googleReCaptcha->data, true)['site_key'] }}">
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="td-authentication-left-box-forms-button">
                                <button class="td-btn td-btn-xl td-btn-fullWidth td-btn-green" type="submit">
                                    <span class="td-btn-wrap">
                                        <span class="td-btn-y-1">{{ __('Create Account') }}</span>
                                        <span class="td-btn-y-2">{{ __('Create Account') }}</span>
                                    </span>
                                </button>
                            </div>
                        </form>
                        <div class="td-authentication-left-box-button">
                            <p class="td-authentication-left-box-button-authPage">{{ __('Already have an account?') }}
                                <a href="{{ route('login') }}">{{ __('Login') }}</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="td-authentication-2-box-right">
                    <img src="{{ asset($data['banner_image']) }}" alt="">
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    @if ($googleReCaptcha)
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    @endif
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectContainer = document.querySelector('.custom-select-container');
            const selectTrigger = selectContainer.querySelector('.custom-select-trigger');
            const options = selectContainer.querySelectorAll('.custom-option');
            const hiddenInput = document.getElementById('floatingSelectValue');

            // Toggle dropdown visibility
            selectTrigger.addEventListener('click', function(e) {
                selectContainer.classList.toggle('active');
                e.stopPropagation(); // Prevent closing immediately when clicking the trigger
            });

            // Handle option selection
            options.forEach(option => {
                option.addEventListener('click', function(e) {
                    const value = option.getAttribute('data-value');
                    const text = option.querySelector('span').innerText;

                    selectTrigger.value = text;
                    hiddenInput.value = value;

                    options.forEach(option => option.classList.remove('selected'));
                    option.classList.add('selected');

                    selectContainer.classList.remove('active'); // Close after selection
                    e.stopPropagation();
                });
            });

            // Close dropdown when clicking outside
            document.addEventListener('click', function() {
                selectContainer.classList.remove('active');
            });
        });
    </script>
@endpush
