@extends('layout')
@section('content')
<div class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-6 offset-md-3">
          <div class="theme-box-shadow theme-border-radius theme-bg-white p-4">
            <div class="d-flex align-items-center justify-content-center border-bottom mb-3">
              <span class="fs-4 fw-bold pb-4 text-uppercase">@translate('auth', 'login_title')</span>
            </div>
            <div class="col-12">
              <form class="needs-validation" action="" method="POST" novalidate u-load="
              let i = 0;
              for(let id in window.cartGuestStorage.data){
                document.createElementP('input', {type: 'hidden', name:`cart[${i}][]`, value: id}, null, this);
                document.createElementP('input', {type: 'hidden', name:`cart[${i}][]`, value: window.cartGuestStorage.data[id]}, null, this);
                i++;
              }">
                @csrf
                <div class="mb-3 position-relative">
                  <label class="form-label fw-bold">@translate('auth', 'login_email_or_phone_title')</label>
                  <i class="bi bi-person-circle position-absolute end-1 fs-5 theme-text-accent-one" style="top:45px; @error('auth')right: 32px;@enderror"></i>
                  <input type="text" class="form-control form-control-lg @error('auth') is-invalid @enderror" style="@error('auth')padding-right: 60px;@else padding-right: 45px; @enderror" name="auth"
                    placeholder="@translate('auth', 'login_email_or_phone')" required value="{{ old('auth') }}">
                    @error('auth')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-3 position-relative">
                  <label class="form-label fw-bold">@translate('auth', 'login_password_title')</label>
                  <i class="bi bi-lock-fill position-absolute end-1 fs-5 theme-text-accent-one" style="top:45px;@error('password')right: 32px;@enderror"></i>
                  <input type="password" class="form-control form-control-lg @error('password') is-invalid @enderror" style="@error('password')padding-right: 60px;@else padding-right: 45px; @enderror" name="password"
                    placeholder="@translate('auth', 'login_password')" required value="{{ old('password') }}">
                    @error('password')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-3 form-check">
                  <input type="checkbox" class="form-check-input" name="remember_me" @checked(old('remember_me'))>
                  <label class="form-check-label font-small" for="remember_me">@translate('auth', 'login_remember')</label>
                </div>
                <div class="mb-3 custom-button">
                  <button type="submit" class="custom-btn-primary button-effect px-4">@translate('auth', 'login_button')</button>
                  <div class="d-flex flex-column">
                    <span class="small mt-3">
                      <a href="forgot-password.html" class="ps-1">@translate('auth', 'login_forgot')</a>
                    </span>
                  </div>
                </div>
              </form>
            </div>
            <div class="col-12">
              <span class="ms-1">@translate('auth', 'login_are_new') <a href="@localeUrl('register')?{{ http_build_query(['back' => url()->query('back')]) }}" class="text-reset text-decoration-underline">@translate('auth', 'login_link_to_regiter')</a></span>
            </div>
          </div>
        </div>
        <!-- login page -->
      </div>
    </div>
  </div>
@endsection