@extends('layouts.auth')

@section('title', 'Login')

@section('content')

<div class="row">
  <div class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">

    <div class="login-brand">
      <img src="{{ asset('assets_app/images/andusEdu-logo.png') }}"
     class="img-fluid"  style="width:30%!important;"
     alt="Logo">
    </div>

    <div class="card card-primary">
      <div class="card-header"><h4>Login</h4></div>

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

          <div class="form-group">
  <label>Username / Email</label>
  <input type="text"
         name="login"
         value="{{ old('login') }}"
         class="form-control @error('login') is-invalid @enderror"
         required>
  @error('login')
    <small class="text-danger">{{ $message }}</small>
  @enderror
</div>

<div class="form-group">
  <label>Password</label>
  <div class="input-group">
    <input type="password"
           name="password"
           id="password"
           class="form-control"
           required>

    <div class="input-group-append">
      <span class="input-group-text" id="togglePassword" style="cursor:pointer;">
        <i class="fas fa-eye"></i>
      </span>
    </div>
  </div>

  @error('password')
    <small class="text-danger">{{ $message }}</small>
  @enderror
</div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg btn-block">
              Login
            </button>
          </div>
        </form>
      </div>
    </div>

    <div class="mt-5 text-muted text-center">
      Belum punya akun? <a href="{{ route('register') }}">Daftar</a>
    </div>

    <div class="simple-footer">
      © {{ date('Y') }} Yayasan Andus Edukasi Indonesia
    </div>

  </div>
</div>

@endsection
@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function () {

    const password = document.getElementById("password");
    const toggle = document.getElementById("togglePassword");
    const icon = toggle.querySelector("i");

    toggle.addEventListener("click", function () {

        if (password.type === "password") {
            password.type = "text";
            icon.classList.remove("fa-eye");
            icon.classList.add("fa-eye-slash");
        } else {
            password.type = "password";
            icon.classList.remove("fa-eye-slash");
            icon.classList.add("fa-eye");
        }

    });

});
</script>
@endpush