@extends(theme()->layout())

@section('content')

    <section class="breadcrumb-section pt-0">
        <div class="container-fluid-lg">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-contain">
                        <h1>{{ __('register.join_us') }}</h1>
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item">
                                    <a href="/">
                                        <i class="fa-solid fa-house"></i>
                                    </a>
                                </li>
                                <li class="breadcrumb-item active">{{ __('register.join_us') }}</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- register section start -->
    <section class="floral-auth-section">
        <div class="floral-auth-container">
            <!-- Left Panel - Illustration -->
            <div class="floral-auth-left-panel">
                <div class="floral-auth-shape floral-auth-shape-1"></div>
                <div class="floral-auth-shape floral-auth-shape-2"></div>
                <div class="floral-auth-shape floral-auth-shape-3"></div>

                <div class="floral-auth-illustration">
                    <img src="{{ theme()->publicPath('images/auth/floral-logo.svg') }}" alt="Florial" class="floral-auth-logo">

                    <h2>{{ __('register.join_us') }}</h2>
                    <p>{{ __('register.register_description') }}</p>
                </div>
            </div>

            <!-- Right Panel - Form -->
            <div class="floral-auth-right-panel">
                <div class="floral-auth-form-wrapper">
                    <div class="floral-auth-header">
                        <h1>{{ __('template.welcome_message') }}</h1>
                        <p>{{ __('account.create_new') }}</p>
                    </div>

                    <form method="POST" action="{{ app_route('web.register.index') }}">
                        @csrf

                        <div class="floral-auth-form-group">
                            <label class="floral-auth-label" for="name">{{ __('auth.full_name') }}</label>
                            <input type="text"
                                   class="floral-auth-input @error('name') is-invalid @enderror"
                                   id="name"
                                   name="name"
                                   value="{{ old('name') }}"
                                   placeholder="{{ __('auth.full_name') }}">
                            @error('name')
                            <div class="floral-auth-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="floral-auth-form-group">
                            <label class="floral-auth-label" for="email">{{ __('auth.email_address') }}</label>
                            <input type="email"
                                   class="floral-auth-input @error('email') is-invalid @enderror"
                                   id="email"
                                   name="email"
                                   value="{{ old('email') }}"
                                   placeholder="{{ __('auth.email_address') }}">
                            @error('email')
                            <div class="floral-auth-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="floral-auth-form-group">
                            <label class="floral-auth-label" for="password">{{ __('auth.password') }}</label>
                            <input type="password"
                                   class="floral-auth-input @error('password') is-invalid @enderror"
                                   id="password"
                                   name="password"
                                   placeholder="{{ __('auth.password') }}">
                            @error('password')
                            <div class="floral-auth-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="floral-auth-form-group">
                            <label class="floral-auth-label" for="password_confirmation">{{ __('auth.password_confirmation') }}</label>
                            <input type="password"
                                   class="floral-auth-input @error('password_confirmation') is-invalid @enderror"
                                   id="password_confirmation"
                                   name="password_confirmation"
                                   placeholder="{{ __('auth.password_confirmation') }}">
                            @error('password_confirmation')
                            <div class="floral-auth-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="floral-auth-checkbox">
                            <input type="checkbox" id="terms" name="terms">
                            <label for="terms">
                                {{ __('auth.agree_with') }} <a href="#">{{ __('auth.terms') }}</a> {{ __('auth.and') }} <a href="#">{{ __('auth.privacy') }}</a>
                            </label>
                        </div>
                        @error('terms')
                        <div class="floral-auth-error">{{ $message }}</div>
                        @enderror

                        <button type="submit" class="floral-auth-btn">
                            {{ __('auth.sign_up') }}
                        </button>
                    </form>

                    <div class="floral-auth-divider"></div>

                    <div class="floral-auth-footer">
                        <span>{{ __('auth.already_have_an_account') }}</span>
                        <a href="{{ app_route(\ViartasCore\Core\Facades\Viartas::driver()->app()->login()) }}">{{ __('auth.login') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- register section end -->
@endsection
