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

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

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

    <div class="container mt-20 max-1180:px-5 max-md:mt-12">
        <!-- Form Container -->
        <div class="bg-white 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">

            {!! view_render_event('bagisto.shop.customers.login.logo.before') !!}

            <!-- Company Logo -->
            <div class="flex items-center gap-x-14 max-[1180px]:gap-x-9">
                <a href="{{ route('yas_member.member.session.index') }}" class="m-[0_auto_20px_auto]" aria-label="@lang('member::app.member.login-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.login.logo.after') !!}

            <h1 class="font-dmserif text-4xl text-header max-md:text-3xl max-sm:text-xl">
                @lang('member::app.member.login-form.page-title')
            </h1>

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

            {!! view_render_event('bagisto.shop.customers.login.before') !!}

            <div class="mt-14 max-sm:mt-8">
                <x-yas_member::form :action="route('yas_member.member.session.create')">

                    {!! view_render_event('bagisto.shop.customers.login_form_controls.before') !!}

                    <!-- Email -->
                    <x-yas_member::form.control-group>
                        <x-yas_member::form.control-group.label class="required">
                            @lang('member::app.member.login-form.email')
                        </x-yas_member::form.control-group.label>

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

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

                    <!-- Password -->
                    <x-yas_member::form.control-group>
                        <x-yas_member::form.control-group.label class="required">
                            @lang('member::app.member.login-form.password')
                        </x-yas_member::form.control-group.label>

                        <x-yas_member::form.control-group.control type="password" class="px-6 py-4 text-input max-md:py-3 max-sm:py-2" id="password" name="password" rules="required" value="" :label="trans('member::app.member.login-form.password')" :placeholder="trans('member::app.member.login-form.password')" :aria-label="trans('member::app.member.login-form.password')" aria-required="true" />

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

                    <div class="flex justify-between">
                        <div class="flex select-none items-center gap-1.5">
                            <input type="checkbox" id="show-password" class="peer hidden" onchange="switchVisibility()" />

                            <label class="icon-uncheck peer-checked:icon-check-box cursor-pointer text-2xl text-primarymain peer-checked:text-primarymain max-sm:text-xl" for="show-password"></label>

                            <label class="cursor-pointer select-none text-base text-highlight max-sm:text-sm ltr:pl-0 rtl:pr-0" for="show-password">
                                @lang('member::app.member.login-form.show-password')
                            </label>
                        </div>

                        <div class="block">
                            <a href="{{ route('yas_member.member.forgot_password.create') }}" class="cursor-pointer text-base text-highlight max-sm:text-sm">
                                <span>
                                    @lang('member::app.member.login-form.forgot-pass')
                                </span>
                            </a>
                        </div>
                    </div>

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

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

                        {!! view_render_event('bagisto.shop.customers.login_form_controls.after') !!}
                    </div>
                </x-yas_member::form>
            </div>

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

            @php /*
            <p class="mt-5 font-medium text-primarymain max-sm:text-center max-sm:text-sm">
                @lang('member::app.member.login-form.new-customer')

                <a class="text-highlight" href="{{ route('yas_member.member.register.index') }}">
                    @lang('member::app.member.login-form.create-your-account')
                </a>
            </p> */
            @endphp
        </div>

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

    @push('scripts')
        {!! Captcha::renderJS() !!}

        <script>
            function switchVisibility() {
                let passwordField = document.getElementById("password");

                passwordField.type = passwordField.type === "password" ?
                    "text" :
                    "password";
            }

            document.body.className += "bg-secondary";
            document.getElementById("main").className += "bg-secondary";
        </script>
    @endpush
</x-yas_member::layouts>