@extends('layouts/blank')

@section('title', 'Вход - ' . config('variables.templateName'))

@section('page-style')
@vite([
  'resources/assets/vendor/scss/pages/page-auth.scss'
])
<link rel="stylesheet" href="{{ asset('css/auth.css') }}">
@endsection

@section('content')
<div class="auth-bg-wrapper">
  <div class="glass-card">
    <!-- Logo -->
    <div class="sc-auth-logo-box">
      <a href="{{ route('home') }}">
        <img src="{{ asset('images/logo_fox.png') }}" alt="Logo" class="sc-auth-logo">
      </a>
    </div>

    <h4 class="auth-title">Добро пожаловать в AdminPanel</h4>
    <p class="auth-subtitle">Войдите в свой аккаунт, чтобы продолжить</p>

    @include('_partials.errors')

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

      <div class="mb-4">
        <label for="email" class="form-label">E-mail</label>
        <input type="email" class="form-control" id="email" name="email" placeholder="Введите ваш e-mail" autofocus required>
      </div>

      <div class="mb-4 form-password-toggle">
        <label class="form-label" for="password">Пароль</label>
        <div class="input-group input-group-merge">
          <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" required />
          <span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>
        </div>
      </div>

      <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="form-check mb-0">
          <input class="form-check-input" type="checkbox" id="remember" name="remember" value="1">
          <label class="form-check-label" for="remember" style="color: #64748b; font-size: 0.9rem;">
              Запомнить меня
          </label>
        </div>
        <a href="{{route('auth.forgot-password')}}" class="auth-link">
            Забыли пароль?
        </a>
      </div>

      <button class="btn btn-auth d-grid w-100" type="submit">Войти</button>
    </form>

  </div>
</div>

<script>
    // Add simple script to handle focus class on input-group for borders
    document.addEventListener('DOMContentLoaded', function() {
        const passwordInput = document.getElementById('password');
        const inputGroup = passwordInput.parentElement;

        passwordInput.addEventListener('focus', () => inputGroup.classList.add('has-focus'));
        passwordInput.addEventListener('blur', () => inputGroup.classList.remove('has-focus'));
    });
</script>
@endsection