@extends('layouts.auth')

@section('title', 'Login Admin')

@section('content')
<link rel="stylesheet" href="{{ asset('css/login-admin.css') }}">

<section id="signin" class="signin-section">
  <div class="signin-container">
    <h1 class="signin-title">SIGN IN ADMIN</h1>

    <form method="POST" action="{{ route('admin.login.submit') }}">
      @csrf
      <div class="form-card">

        {{-- Username --}}
        <div class="input-group">
          <img src="{{ asset('icons/username.svg') }}" alt="Username icon" class="input-icon">
          <input type="text" name="username" class="form-input" placeholder="Username" required>
        </div>

        {{-- Password --}}
        <div class="input-group password-wrapper">
          <img src="{{ asset('icons/password.svg') }}" alt="Password icon" class="input-icon">
          <input type="password" name="password" class="form-input password-input" placeholder="Password" required>

          {{-- Tombol show/hide pakai SVG --}}
          <button type="button" class="toggle-password" aria-label="Toggle password visibility">
            <img src="{{ asset('icons/show.svg') }}" alt="Show password" class="eye-icon">
          </button>
        </div>

      </div>

      <button type="submit" class="submit-btn">SIGN IN</button>
    </form>

    <a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
  </div>
</section>

{{-- SCRIPT INTERAKTIF --}}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const toggleBtn = document.querySelector('.toggle-password');
    const passwordInput = document.querySelector('.password-input');
    const eyeIcon = toggleBtn.querySelector('img');

    toggleBtn.addEventListener('click', () => {
      const isVisible = passwordInput.type === 'text';
      passwordInput.type = isVisible ? 'password' : 'text';
      eyeIcon.src = isVisible
        ? "{{ asset('icons/show.svg') }}"
        : "{{ asset('icons/hide.svg') }}";
      eyeIcon.alt = isVisible ? "Show password" : "Hide password";
    });
  });
</script>
@endsection