@extends('admin.layouts.auth_layout')
@section('login_content')
<div class="login-card animate__animated animate__fadeIn">
  @if ($errors->any())
      <div class="alert alert-danger text-center">
            @foreach ($errors->all() as $error)
                {{ $error }}
            @endforeach
      </div>
  @endif
  <form method="POST" action="{{ route('admin.login') }}">
    @csrf
    <div class="text-center mb-3">
      <a href="{{ route('admin.login-board') }}">
        @if($portal && $portal=='HMC')
        <img src="/images/hmc-logo.png" alt="Logo" class="logo" style="max-height:200px;">
        @endif
         @if($portal && $portal=='SUDA')
        <img src="/images/admin-logo.png" alt="Logo" class="logo">
        @endif
      </a>
      <h4 class="mt-2">{{ config('constants.APP_NAME_SHORT') }}</h4>
      <h5 class="text-muted">{{ $portal ?? '' }} Login</h5>
    </div>

    <div class="mb-3">
      <input type="email" name="email" class="form-control" placeholder="Email" required>
    </div>

    <div class="mb-3 position-relative">
      <input type="password" name="password" id="password" class="form-control" placeholder="Password" required>
      <i class="fa fa-eye-slash eye-icon" id="togglePassword"></i>
    </div>

    <div class="d-grid">
      <button class="btn btn-success" type="submit">Log in</button>
    </div>

    <div class="separator">
      <h6>{{ config('constants.APP_NAME') }}</h6>
      <p class="small">© Codydea Softech 2026 All Rights Reserved.</p>
    </div>
  </form>
</div>

<script>
  // Toggle password visibility with eye icon toggle
  document.getElementById('togglePassword').addEventListener('click', function () {
    const password = document.getElementById('password');
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    this.classList.toggle('fa-eye-slash');
    this.classList.toggle('fa-eye');
  });
</script>
@endsection