@extends('shop::layout.b2b_main')

@section('title', trans('b2b_shop-login.page_login'))

@section('content-wrapper')

    <div class="b2b_auth b2b_auth--b2c_signin">
        <div class="container-xl">
            <div class="b2b_auth__wrapper">
                <div class="b2b_auth__header">
                    <a href="{{ \App\Helpers\RouteHelper::getMainDomainUrl('home') }}">
                        <img class="img" src="{{ asset('shop/images/logo.svg') }}"
                             alt="{{ trans('shop-header.logo_alt') }}">
                    </a>
                </div>
                <ul class="nav__list__locale justify-end">
                    @foreach($supportedLocales as $iso => $locale)
                        <li class="nav__item  nav__item--flag">
                            <a class="nav__link"
                               href="{{ LaravelLocalization::getLocalizedURL($iso, route('login', [], false)) }}"
                               title="{{ $locale['name'] }}">
                                <img class="img flag" src="{{ asset('shop/images/flags/' . $iso . '.svg') }}"
                                     alt="{{ $iso }}">
                            </a>
                        </li>
                    @endforeach
                </ul>
                <div class="b2b_auth__main">
                    <div class="section__header  text-center">
                        <h1 class="section__title  section__title--lg">
                            {{ trans('shop-login.page_login') }}
                        </h1>
                        <div class="section__text">
                            {{ trans('shop-login.page_welcome_back') }}
                        </div>
                        <div class="section__text">
                            {{ trans('shop-login.page_b2b_title') }}
                            <a style="color: #233998; font-weight: 500;" href="mailto:{{ trans('shop-login.page_b2b_link') }}">
                                {{ trans('shop-login.page_b2b_link') }}
                            </a>
                        </div>
                    </div>

                    <form action="{{ route('login') }}" method="POST" id="login-form">

                        @method('post')
                        @csrf

                        <div class="form__group  form__group--md">
                            <input class="form-control @error('email') error @enderror" type="email" name="email"
                                   id="email"
                                   value="{{ old('email') }}" autocomplete="email">
                            <label class="form-label" for="email">
                                {{ trans('shop-login.attribute_email') }}
                                @error('email')
                                - <span class="error__message">{{ $message }}</span>
                                @enderror
                            </label>
                            <svg class="form-control-icon">
                                <use href="#form-email"></use>
                            </svg>
                        </div><!-- Email -->

                        <div class="form__group  form__group--md">
                            <input class="form-control @error('password') error @enderror" type="password"
                                   name="password"
                                   id="password"
                                   autocomplete="new-password"
                            >
                            <label class="form-label" for="password">
                                {{ trans('shop-login.attribute_password') }}
                                @error('password')
                                - <span class="error__message">{{ $message }}</span>
                                @enderror
                            </label>
                            <svg class="form-control-icon">
                                <use href="#form-lock"></use>
                            </svg>
                            <button class="form-control-showhide" data-target="#password" type="button">
                                {{ trans('shop-login.attribute_show_hide')}}
                            </button>
                        </div><!-- Password -->

                        <div class="auth__actions">
                            <div class="checkbox">
                                <input class="checkbox__input" type="checkbox" name="remember"
                                       id="remember" {{ old('remember') ? 'checked' : '' }}>
                                <label class="checkbox__label" for="remember">
                                    {{ trans('shop-login.page_remember_me') }}
                                </label>
                            </div>
                            <div class="auth__hint">
                                <a class="link  link--gray" href="{{ route('password.request') }}"
                                   title="{{ trans('shop-login.page_forgot_password') }}">
                                    {{ trans('shop-login.page_forgot_password') }}
                                </a>
                            </div>
                        </div><!-- Password confirmation -->

                        @include('shop::pages.components.recaptcha', ['action' => 'login_action'])

                        <div>
                            <button class="btn  btn--green  btn--md  btn--block" type="submit">
                                {{ trans('shop-login.page_login') }}
                            </button>
                        </div>

                        @error('g-recaptcha-response')
                        <span class="error__message">{{ $message }}</span>
                        @enderror

                    </form>

                    <div class="auth__footer">
                        {{ trans('shop-login.page_dont_have_profile') }}
                        <a class="link  link--primary" href="{{ route('register') }}"
                           title="{{ trans('shop-login.page_register') }}">
                            <b>{{ trans('shop-login.page_register') }}</b>
                        </a>
                    </div>
                </div>
                <div class="b2b_auth__footer">
                    <p>{{ trans('shop-footer.page_copyright', ['year' => date('Y')]) }}</p>
                </div>
            </div>
        </div>
    </div><!-- /.container -->

@endsection

@push('css')
    <style>
        .nav__list__locale {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-wrap: nowrap;
            gap: 10px;
        }

        .nav__item--flag {
            white-space: nowrap;
        }

        .nav__link img {
            width: 24px;
            height: auto;
        }

        .nav__link img {
            width: 30px;
        }

        @media (max-width: 768px) {
            .nav__item {
                padding: 0;
            }

            .nav__list__locale {
                padding-right: 10px;
            }
        }

    </style>
@endpush