@php
    use App\Helpers\RouteHelper;
@endphp

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

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

@section('content-wrapper')

    <div class="b2b_auth b2b_auth--signin">
        <div class="container-xl">
            <div class="b2b_auth__wrapper">
                <!-- Header -->
                <div class="b2b_auth__header">
                    <img class="img" src="{{ asset('shop/images/logo.svg') }}"
                         alt="{{ trans('b2b_shop-verify.logo_alt') }}">
                </div>

              <div style="display: flex; justify-content: space-between;">
                  <ul class="nav__list__locale justify-start">
                      <a class="header__actions-link" href="{{ config('app.url') }}" title="{{ trans('b2b_shop-verify.home_url') }}">
                          {{ trans('b2b_shop-verify.home_url') }}
                      </a>
                  </ul>

                  <!-- Language Switcher -->
                  <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('b2b.verify', [], false)) }}"
                                 title="{{ $locale['name'] }}">
                                  <img class="img" src="{{ asset('shop/images/flags/' . $iso . '.svg') }}"
                                       alt="{{ $iso }}">
                              </a>
                          </li>
                      @endforeach

                      <li>
                          <a class="header__actions-link" href="#"
                             onclick="$('#logout-form').submit();"
                             title="{{ trans('shop-header.logout') }}">
                              <img class="img logout-icon" src="{{ asset('shop/images/logout.svg') }}"
                                   alt="{{ trans('shop-header.logo_alt') }}">
                              <div style="margin-left: 5px">
                                  Iziet
                              </div>
                          </a>
                          <form id="logout-form" method="POST" action="{{ route('logout') }}" class="d-none">
                              @csrf
                          </form>
                      </li>
                  </ul>
              </div>

                <!-- Main Content -->
                <div class="b2b_auth__main" style="max-width: 100%;">
                    <div class="section__header text-center">
                        <h3>
                            {!! trans('b2b_shop-verify.greeting', ['full_name' => auth()->user()->full_name]) !!}
                        </h3>
                    </div>

                    <!-- Verification Message -->
                    <div class="b2b_auth__greeting text-center">
                        <p class="greeting-message">
                            {!! trans('b2b_shop-verify.message') !!}
                        </p>
                    </div>

                    <!-- Contact Block -->
                    <div class="b2b_auth__contact-info">
                        <h2 class="contact-title">{{ trans('b2b_shop-verify.help') }}</h2>
                        <div class="contact-info__item">
                            <img src="{{ asset('shop/images/header-tel.svg') }}" alt="Phone" class="contact-info__icon">
                            <a href="{{ trans('b2b_shop-verify.phone_link') }}" class="contact-info__link"
                               title="{{ trans('b2b_shop-verify.phone_label') }}">
                                {{ trans('b2b_shop-verify.phone_label') }}
                            </a>
                        </div>
                        <div class="contact-info__item">
                            <img src="{{ asset('shop/images/header-email.svg') }}" alt="Email"
                                 class="contact-info__icon">
                            <a href="{{ trans('b2b_shop-verify.email_link') }}" class="contact-info__link"
                               title="{{ trans('b2b_shop-verify.email_label') }}">
                                {{ trans('b2b_shop-verify.email_label') }}
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Footer -->
                <div class="b2b_auth__footer text-center mt-4">
                    <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;
            gap: 10px;
            padding: 10px 20px 0 0;
        }

        .nav__item--flag img {
            width: 28px;
            height: auto;
            transition: transform 0.2s;
        }

        .nav__item--flag img:hover {
            transform: scale(1.1);
        }

        .b2b_auth__greeting,
        .b2b_auth__contact-info {
            background-color: #fff;
            padding: 20px 25px;
            border-radius: 10px;
            margin-top: 20px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }

        .greeting-message {
            font-size: 1.3rem;
            color: #444;
            line-height: 1.6;
        }

        .contact-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #222;
            margin-bottom: 12px;
        }

        .contact-info__item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .contact-info__icon {
            width: 22px;
            height: 22px;
            margin-right: 12px;
            opacity: 0.8;
        }

        .contact-info__link {
            font-size: 1.05rem;
            color: #0056b3;
            text-decoration: none;
            transition: color 0.2s;
        }

        .contact-info__link:hover {
            color: #003f88;
            text-decoration: underline;
        }

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

            .contact-info__link {
                font-size: 1rem;
            }

            .greeting-message {
                font-size: 1rem;
            }
        }
    </style>
@endpush