@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">Присоединяйтесь к {{config('variables.templateName')}} 🚀</h4>
    <p class="auth-subtitle">Сделайте управление вашим бизнесом проще!</p>

    @include('_partials.errors')

    <form id="form" action="{{ route('register') }}" method="POST">
      @csrf()
      
      <div class="mb-4">
        <label for="name" class="form-label">Имя (ФИО)</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="Введите ваше имя" autofocus value="{{ old('name') }}" required>
      </div>
      
      <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" value="{{ old('email') }}" 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="mb-4">
        <div class="form-check mb-0">
          <input class="form-check-input" type="checkbox" id="agree" name="agree" value="1" required>
          <label class="form-check-label" for="agree" style="color: #64748b; font-size: 0.9rem;">
              Я согласен с
            <a href="javascript:void(0);" class="auth-link">правилами и политикой конфиденциальности</a>
          </label>
        </div>
      </div>

      <button class="btn btn-auth d-grid w-100" type="submit">Зарегистрироваться</button>
    </form>

    <p class="text-center mt-4 mb-0" style="color: #64748b; font-size: 0.9rem;">
        Уже есть аккаунт?
        <a href="{{ route('login') }}" class="auth-link">
            Войти в систему
        </a>
    </p>
  </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