@php
  $loginPortal = $loginPortal ?? 'student';
  $loginTitle = $loginTitle ?? 'Student Login';
  $loginLabel = $loginLabel ?? 'Enter Admission Number';
  $loginAction = $loginAction ?? route('login');
  $setting = generalSetting();
  $schoolName = $setting && $setting->school_name ? $setting->school_name : config('app.name', 'Student Portal');
@endphp
<!doctype html>
<html class="no-js" lang="en" data-theme="dark">

<head>
  <meta charset="utf-8">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>{{ $schoolName }} | Login</title>
  <meta name="description" content="{{ $schoolName }} portal login">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Favicon -->
  <link rel="shortcut icon" type="image/x-icon" href="{{ asset('public/new_login/img/favicon.png') }}">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="{{ asset('public/new_login/css/bootstrap.min.css') }}">
  <!-- Fontawesome CSS -->
  <link rel="stylesheet" href="{{ asset('public/new_login/css/fontawesome-all.min.css') }}">
  <!-- Flaticon CSS -->
  <link rel="stylesheet" href="{{ asset('public/new_login/font/flaticon.css') }}">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
  <!-- Custom CSS -->
  <link rel="stylesheet" href="{{ asset('public/new_login/css/style.css') }}">
  <x-root-css />
  <link rel="stylesheet" href="{{ asset('public/backEnd/assets/css/global-theme.css') }}">
  <style>
    .spinner-border {
      width: 1rem;
      height: 1rem;
      border-width: 2px;
    }
  </style>
  <script>
    (function () {
      try {
        var savedTheme = localStorage.getItem('app-theme-mode') || 'dark';
        document.documentElement.setAttribute('data-theme', savedTheme === 'light' ? 'light' : 'dark');
        document.documentElement.classList.add(savedTheme === 'light' ? 'theme-light' : 'theme-dark');
      } catch (error) {
        document.documentElement.setAttribute('data-theme', 'dark');
      }
    })();
  </script>
</head>

<body class="admin login theme-dark premium-login-page" data-theme="dark">
  <div id="preloader" class="preloader">
    <div class='inner'>
      <div class='line1'></div>
      <div class='line2'></div>
      <div class='line3'></div>
    </div>
  </div>

  <section class="fxt-template-animation fxt-template-layout26">
    <div class="starfield"></div>
    <div class="fxt-content">
      <div class="fxt-header">
        <a href="{{url('/')}}" class="fxt-logo">
          <img src="{{ generalSetting() && generalSetting()->logo ? asset(generalSetting()->logo) : asset('public/new_login/img/logo.png') }}" width="200" alt="Logo">
        </a>
      </div>

      <div class="fxt-form">
        <div class="fxt-transformY-50 fxt-transition-delay-1">
          <p>{{ $loginTitle }}</p>
        </div>

        <form id="loginForm" method="POST" action="{{ $loginAction }}">
          @csrf
          <input type="hidden" name="login_portal" value="{{ $loginPortal }}">

          <div class="form-group">
            <div class="fxt-transformY-50 fxt-transition-delay-2">
              <input type="text" id="admission_number" class="form-control" name="admission_number" value="{{ old('admission_number', old('email')) }}" placeholder="{{ $loginPlaceholder ?? $loginLabel }}" maxlength="50" autocomplete="username" style="text-transform: uppercase;" oninput="this.value = this.value.toUpperCase()" @if(!empty($loginPattern)) pattern="{{ $loginPattern }}" title="{{ $loginHint ?? $loginPlaceholder ?? $loginLabel }}" @endif required autofocus>
              @error('admission_number')
              <small class="text-danger d-block mt-1">{{ $message }}</small>
              @enderror
              @error('email')
              <small class="text-danger d-block mt-1">{{ $message }}</small>
              @enderror
            </div>
          </div>

          <div class="form-group">
            <div class="fxt-transformY-50 fxt-transition-delay-3">
              <input id="password" type="password" class="form-control" name="password" placeholder="Enter Password" required>
              <i toggle="#password" class="fa fa-fw fa-eye toggle-password field-icon"></i>
              @error('password')
              <small class="text-danger d-block mt-1">{{ $message }}</small>
              @enderror
            </div>
          </div>

          <div class="form-group">
            <div class="fxt-transformY-50 fxt-transition-delay-4">
              <div class="fxt-checkbox-area">
                <div class="checkbox">
                  <input id="remember" type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}>
                  <label for="remember">Keep me logged in</label>
                </div>
                <a href="{{ url('/recovery/password?type=' . ($loginPortal ?? 'student')) }}" id='forget'>Forgot Password</a>
              </div>
            </div>
          </div>

          <div class="form-group text-center">
            <div class="fxt-transformY-50 fxt-transition-delay-5">
              <button id="loginBtn" type="submit" class="fxt-btn-fill d-flex justify-content-center align-items-center gap-2" style="min-width: 100px;">
                <span id="loginText">Log in</span>
                <span id="loginSpinner" class="spinner-border text-light d-none" role="status" aria-hidden="true"></span>
              </button>
            </div>
          </div>
        </form>
      </div>

      <div class="fxt-style-line">
        <div class="fxt-transformY-50 fxt-transition-delay-6">
          <h3>{{ $schoolName }}</h3>
        </div>
      </div>
    </div>
  </section>

  <!-- Scripts -->
  <script src="{{ asset('public/new_login/js/jquery-3.5.0.min.js') }}"></script>
  <script src="{{ asset('public/new_login/js/bootstrap.min.js') }}"></script>
  <script src="{{ asset('public/new_login/js/imagesloaded.pkgd.min.js') }}"></script>
  <script src="{{ asset('public/new_login/js/starfield.js') }}"></script>
  <script src="{{ asset('public/new_login/js/validator.min.js') }}"></script>
  <script src="{{ asset('public/new_login/js/main.js') }}"></script>
  <script src="{{ asset('public/backEnd/js/global-theme.js') }}"></script>

  <!-- Login Button Spinner Script -->
  <script>
    const loginForm = document.getElementById('loginForm');
    const loginBtn = document.getElementById('loginBtn');
    const loginSpinner = document.getElementById('loginSpinner');
    const loginText = document.getElementById('loginText');

    loginForm.addEventListener('submit', function (e) {
      loginBtn.disabled = true;
      loginSpinner.classList.remove('d-none');
      loginText.textContent = 'Logging in...';
    });
  </script>
</body>

</html>
