{{-- resources/views/auth/login.blade.php --}}
@extends('layouts.app')

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

@section('content')

<section class="section dark-background" style="padding-top: 140px; padding-bottom: 80px;">
  <div class="container text-center" data-aos="fade-in">
    <h1 class="fw-bold mb-0">Login Sistem</h1>
    <p class="mb-0">
      SMP Al Idrus
    </p>
  </div>
</section>

<section class="contact section light-background">

  <div class="container section-title" data-aos="fade-up">
    <h2>Login</h2>
    <p>
      Silakan login untuk mengakses sistem<br>
    </p>
  </div>

  <div class="container" data-aos="fade-up" data-aos-delay="100">
    <div class="row gy-4 justify-content-center">
      <div class="col-lg-6">

        @if ($errors->any())
          <div class="alert alert-danger">
            @foreach ($errors->all() as $err)
              <div>{{ $err }}</div>
            @endforeach
          </div>
        @endif

        <form method="POST"
              action="{{ route('login') }}"
              class="php-email-form">
          @csrf

          <div class="mb-4">
            <label class="form-label fw-semibold">
              Email
            </label>
            <input type="text"
                   name="login"
                   value="{{ old('login') }}"
                   class="form-control @error('login') is-invalid @enderror"
                   placeholder="Email atau PPDBxxxxxxx"
                   required
                   autofocus>
          </div>

          <div class="mb-4">
            <label class="form-label fw-semibold">
              Password
            </label>

            <div class="input-group">
              <input type="password"
                     name="password"
                     id="password"
                     class="form-control @error('password') is-invalid @enderror"
                     placeholder="Password"
                     required>

              <span class="input-group-text bg-white"
                    id="togglePassword"
                    style="cursor:pointer">
                <i class="fa fa-eye" id="iconPassword"></i>
              </span>
            </div>
          </div>

          <div class="mb-4 form-check">
            <input type="checkbox"
                   class="form-check-input"
                   name="remember"
                   id="remember">
            <label class="form-check-label" for="remember">
              Ingat Saya
            </label>
          </div>

          <div class="text-center">
            <button type="submit" class="btn btn-primary">
              Login
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

</section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const oldForm = document.querySelector('.php-email-form');
    if (oldForm) {
        const newForm = oldForm.cloneNode(true);
        newForm.setAttribute('action', oldForm.getAttribute('action'));
        newForm.setAttribute('method', oldForm.getAttribute('method'));
        oldForm.parentNode.replaceChild(newForm, oldForm);
    }

    const toggle  = document.getElementById('togglePassword');
    const input   = document.getElementById('password');
    const icon    = document.getElementById('iconPassword');

    if (toggle && input) {
        toggle.addEventListener('click', function () {
            const type = input.getAttribute('type') === 'password'
                ? 'text'
                : 'password';

            input.setAttribute('type', type);
            icon.classList.toggle('fa-eye');
            icon.classList.toggle('fa-eye-slash');
        });
    }

});
</script>
@endpush