<!-- SEO Meta Content -->
@push('meta')
<meta name="description" content="@lang('shop::app.customers.signup-form.page-title')" />

<meta name="keywords" content="@lang('shop::app.customers.signup-form.page-title')" />
@endPush

<x-shop::layouts :has-header="false" :has-feature="false" :has-footer="false">
    <!-- Page Title -->
    <x-slot:title>
        @lang('shop::app.customers.signup-form.page-title')
        </x-slot>

        <div class="container mt-20 max-1180:px-5 max-md:mt-12">
            {!! view_render_event('bagisto.shop.customers.sign-up.logo.before') !!}

            <!-- Company Logo -->
            <div class="flex items-center gap-x-14 max-[1180px]:gap-x-9">
                <a href="{{ route('shop.home.index') }}" class="m-[0_auto_20px_auto]" aria-label="@lang('shop::app.customers.signup-form.bagisto')">
                    <img src="{{ core()->getCurrentChannel()->logo_url ?? bagisto_asset('images/logo.svg') }}" alt="{{ config('app.name') }}" width="250" height="100">
                </a>
            </div>

            {!! view_render_event('bagisto.shop.customers.sign-up.logo.before') !!}

            <!-- Form Container -->
            <div class="m-auto w-full max-w-[870px]  border border-divider p-16 px-[90px] max-md:px-8 max-md:py-8 max-sm:border-none max-sm:p-0">
                <h1 class="font-dmserif text-header text-4xl max-md:text-3xl max-sm:text-xl">
                    @lang('shop::app.customers.signup-form.page-title')
                </h1>

                <p class="mt-4 text-xl text-description max-sm:mt-0 max-sm:text-sm">
                    @lang('shop::app.customers.signup-form.form-signup-text')
                </p>

                <div class="mt-14 max-sm:mt-8">
                    <x-shop::form :action="route('shop.customers.register.store')">
                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.before') !!}

                        <x-shop::form.control-group>
                            <x-shop::form.control-group.label class="required">
                                @lang('shop::app.customers.signup-form.first-name')
                            </x-shop::form.control-group.label>

                            <x-shop::form.control-group.control type="text" class="px-6 py-4 max-md:py-3 max-sm:py-2" name="first_name" rules="required" :value="old('first_name')" :label="trans('shop::app.customers.signup-form.first-name')" :placeholder="trans('shop::app.customers.signup-form.first-name')" :aria-label="trans('shop::app.customers.signup-form.first-name')" aria-required="true" />

                            <x-shop::form.control-group.error control-name="first_name" />
                        </x-shop::form.control-group>

                        {!! view_render_event('bagisto.shop.customers.signup_form.first_name.after') !!}

                        <x-shop::form.control-group>
                            <x-shop::form.control-group.label class="required">
                                @lang('shop::app.customers.signup-form.last-name')
                            </x-shop::form.control-group.label>

                            <x-shop::form.control-group.control type="text" class="px-6 py-4 max-md:py-3 max-sm:py-2" name="last_name" rules="required" :value="old('last_name')" :label="trans('shop::app.customers.signup-form.last-name')" :placeholder="trans('shop::app.customers.signup-form.last-name')" :aria-label="trans('shop::app.customers.signup-form.last-name')" aria-required="true" />

                            <x-shop::form.control-group.error control-name="last_name" />
                        </x-shop::form.control-group>

                        {!! view_render_event('bagisto.shop.customers.signup_form.last_name.after') !!}

                        <x-shop::form.control-group>
                            <x-shop::form.control-group.label class="required">
                                @lang('shop::app.customers.signup-form.email')
                            </x-shop::form.control-group.label>

                            <x-shop::form.control-group.control type="email" class="px-6 py-4 max-md:py-3 max-sm:py-2" name="email" rules="required|email" :value="old('email')" :label="trans('shop::app.customers.signup-form.email')" placeholder="email@example.com" :aria-label="trans('shop::app.customers.signup-form.email')" aria-required="true" />

                            <x-shop::form.control-group.error control-name="email" />
                        </x-shop::form.control-group>

                        {!! view_render_event('bagisto.shop.customers.signup_form.email.after') !!}

                        <!-- <x-shop::form.control-group>
                        <x-shop::form.control-group.label>
                        {{ __('Company ') }}
                        </x-shop::form.control-group.label>

                        <x-shop::form.control-group.control
                            type="text"
                            class="px-6 py-4 max-md:py-3 max-sm:py-2"
                            name="company"
                            :value="old('company')"
                            :label="trans('shop::app.customers.signup-form.email')"
                            placeholder="Abc technologies"
                            :aria-label="trans('shop::app.customers.signup-form.email')"
                            aria-required="true"
                        />

                        <x-shop::form.control-group.error control-name="company" />
                    </x-shop::form.control-group> -->

                        <x-shop::form.control-group class="mb-6">
                            <x-shop::form.control-group.label class="required">
                                @lang('shop::app.customers.signup-form.password')
                            </x-shop::form.control-group.label>

                            <x-shop::form.control-group.control type="password" class="px-6 py-4 max-md:py-3 max-sm:py-2" name="password" rules="required|min:6" :value="old('password')" :label="trans('shop::app.customers.signup-form.password')" :placeholder="trans('shop::app.customers.signup-form.password')" ref="password" :aria-label="trans('shop::app.customers.signup-form.password')" aria-required="true" />

                            <x-shop::form.control-group.error control-name="password" />
                        </x-shop::form.control-group>

                        {!! view_render_event('bagisto.shop.customers.signup_form.password.after') !!}

                        <x-shop::form.control-group>
                            <x-shop::form.control-group.label>
                                @lang('shop::app.customers.signup-form.confirm-pass')
                            </x-shop::form.control-group.label>

                            <x-shop::form.control-group.control type="password" class="px-6 py-4 max-md:py-3 max-sm:py-2" name="password_confirmation" rules="confirmed:@password" value="" :label="trans('shop::app.customers.signup-form.password')" :placeholder="trans('shop::app.customers.signup-form.confirm-pass')" :aria-label="trans('shop::app.customers.signup-form.confirm-pass')" aria-required="true" />

                            <x-shop::form.control-group.error control-name="password_confirmation" />
                        </x-shop::form.control-group>

                        {!! view_render_event('bagisto.shop.customers.signup_form.password_confirmation.after') !!}

                        @if (core()->getConfigData('customer.captcha.credentials.status'))
                        <div class="mb-5 flex">
                            {!! Captcha::render() !!}
                        </div>
                        @endif

                        @if (core()->getConfigData('customer.settings.create_new_account_options.news_letter'))
                        <div class="flex select-none items-center gap-1.5">
                            <input type="checkbox" name="is_subscribed" id="is-subscribed" class="peer hidden" onchange="switchVisibility()" />

                            <label class="icon-uncheck peer-checked:icon-check-box cursor-pointer text-2xl text-navyBlue peer-checked:text-navyBlue max-sm:text-xl" for="is-subscribed"></label>

                            <label class="cursor-pointer select-none text-base text-zinc-500 max-sm:text-sm ltr:pl-0 rtl:pr-0" for="is-subscribed">
                                @lang('shop::app.customers.signup-form.subscribe-to-newsletter')
                            </label>
                        </div>
                        @endif

                        {!! view_render_event('bagisto.shop.customers.signup_form.newsletter_subscription.after') !!}

                        <div class="mt-8 flex flex-wrap items-center gap-9 max-sm:justify-center max-sm:gap-5">
                            <button class="primary-button m-0 mx-auto block w-full max-w-[374px]  px-11 py-4 text-center text-base max-md:max-w-full  max-md:py-3 max-sm:py-1.5 ltr:ml-0 rtl:mr-0" type="submit">
                                @lang('shop::app.customers.signup-form.button-title')
                            </button>

                            <div class="flex flex-wrap gap-4">
                                {!! view_render_event('bagisto.shop.customers.login_form_controls.after') !!}
                            </div>
                        </div>

                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.after') !!}

                    </x-shop::form>
                </div>

                <p class="mt-5 font-medium text-primarymain max-sm:text-center max-sm:text-sm">
                    @lang('shop::app.customers.signup-form.account-exists')

                    <a class="text-highlight" href="{{ route('shop.customer.session.index') }}">
                        @lang('shop::app.customers.signup-form.sign-in-button')
                    </a>
                </p>
            </div>

            <p class="mb-4 mt-8 text-center text-xs text-zinc-500">
                @lang('shop::app.customers.signup-form.footer', ['current_year'=> date('Y') ])
            </p>
        </div>

        @push('scripts')
        {!! Captcha::renderJS() !!}
        @endpush
</x-shop::layouts>