@extends('layouts.auth')

@section('title', 'Sign in')

@push('styles')
  <link href="{{ asset('assets/css/pages/login.css') }}" rel="stylesheet">
@endpush

@section('content')
  <a class="visually-hidden-focusable" href="#login-form">Skip to sign in</a>

  <div class="auth-page">
    @include('partials.auth-visual', [
      'headline' => 'Run every branch from one command center.',
      'copy' => 'Fast checkout, live inventory, and multi-warehouse insights — built for high-volume restaurants and retail.',
      'stats' => [
        ['value' => '10k+', 'label' => 'Concurrent sessions'],
        ['value' => '99.9%', 'label' => 'Uptime target'],
        ['value' => 'SaaS', 'label' => 'Multi-tenant ready'],
      ],
    ])

    <main class="auth-panel">
      <div class="auth-card">
        <div class="d-flex align-items-center gap-2 mb-4 d-lg-none">
          <div class="brand-mark" aria-hidden="true">N</div>
          <strong>Nexus POS</strong>
        </div>

        <header class="auth-card__header">
          <h1 class="auth-card__title">Welcome back</h1>
          <p class="auth-card__subtitle">Sign in to your workspace to continue.</p>
        </header>

        @if ($errors->any())
          <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">
            {{ $errors->first() }}
          </x-alert>
        @endif

        <form id="login-form" method="post" action="{{ route('login.attempt') }}" novalidate>
          @csrf

          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input
              type="email"
              class="form-control form-control-lg @error('email') is-invalid @enderror"
              id="email"
              name="email"
              placeholder="you@company.com"
              autocomplete="username"
              required
              value="{{ old('email') }}"
            >
            @error('email')
              <div class="form-error">{{ $message }}</div>
            @enderror
          </div>

          <div class="mb-3">
            <div class="d-flex justify-content-between align-items-center">
              <label for="password" class="form-label mb-0">Password</label>
              <a href="#" class="fs-sm">Forgot password?</a>
            </div>
            <div class="input-password mt-2">
              <input
                type="password"
                class="form-control form-control-lg @error('password') is-invalid @enderror"
                id="password"
                name="password"
                placeholder="Enter your password"
                autocomplete="current-password"
                required
              >
              <button
                type="button"
                class="input-password__toggle"
                data-password-toggle="#password"
                aria-label="Show password"
              >
                <i class="bi bi-eye" aria-hidden="true"></i>
              </button>
            </div>
            @error('password')
              <div class="form-error">{{ $message }}</div>
            @enderror
          </div>

          <div class="auth-meta">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="remember" name="remember" value="1" @checked(old('remember', true))>
              <label class="form-check-label" for="remember">Remember me</label>
            </div>
          </div>

          <button type="submit" class="btn btn-primary btn-lg-custom w-100">
            Sign in
            <i class="bi bi-arrow-right" aria-hidden="true"></i>
          </button>
        </form>

        <p class="auth-card__footer mb-0 mt-4">
          Need a workspace? <a href="#">Contact sales</a>
        </p>
      </div>
    </main>
  </div>
@endsection

@push('scripts')
  <script src="{{ asset('assets/js/pages/login.js') }}"></script>
@endpush