@extends('admin.layouts.master')
@section('content')

@php
  $bg = asset('assets/admin/images/login.jpg');
@endphp

<div class="login-main" style="background-image: url('{{ $bg }}')">
  <div class="container custom-container">
    <div class="row justify-content-center">
      <div class="col-xxl-5 col-xl-5 col-lg-6 col-md-8 col-sm-11">
        <div class="login-area">
          <div class="login-wrapper">

            <div class="login-wrapper__top">
              <h3 class="title text-white">
                @lang('Welcome to') <strong>{{ __($general->site_name ?? 'Admin') }}</strong>
              </h3>
              <p class="text-white">
                {{ __($pageTitle ?? 'Login') }} @lang('to') {{ __($general->site_name ?? 'Admin') }} @lang('Dashboard')
              </p>
            </div>

            <div class="login-wrapper__body">

              @if ($errors->any())
                <div class="alert alert-danger mb-3">
                  {{ $errors->first() }}
                </div>
              @endif

              @if (session('status'))
                <div class="alert alert-success mb-3">
                  {{ session('status') }}
                </div>
              @endif

              <form method="POST"
                    action="{{ route('admin.login') }}"
                    class="cmn-form mt-30 login-form"
                    id="loginForm"
                    autocomplete="on"
                    novalidate>
                @csrf

                <div class="form-group">
                  <label>@lang('Email')</label>
                  <input type="email"
                         class="form-control"
                         name="email"
                         value="{{ old('email') }}"
                         placeholder="admin@example.com"
                         autocomplete="username"
                         required
                         autofocus>
                </div>

                <div class="form-group">
                  <label>@lang('Password')</label>
                  <div class="position-relative">
                    <input type="password"
                           class="form-control"
                           name="password"
                           id="password"
                           placeholder="পাসওয়ার্ড"
                           autocomplete="current-password"
                           required>

                    <button type="button"
                            id="eyeBtn"
                            class="password-eye-btn"
                            aria-label="Show or Hide Password"
                            aria-pressed="false">
                      <i class="las la-eye"></i>
                    </button>
                  </div>
                </div>

                <div class="d-flex flex-wrap justify-content-between align-items-center mt-3">
                  <div class="form-check me-3">
                    <input class="form-check-input" name="remember" type="checkbox" id="remember">
                    <label class="form-check-label" for="remember">@lang('Remember Me')</label>
                  </div>

                  <a href="{{ route('admin.forgot') }}" class="forget-text no-underline">
                    @lang('Forgot Password?')
                  </a>
                </div>

                <button type="submit" class="btn cmn-btn w-100 mt-3" id="loginBtn">
                  <span class="btn-text">@lang('LOGIN')</span>
                  <span class="btn-spin" style="display:none;">
                    <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                    লগইন হচ্ছে…
                  </span>
                </button>

              </form>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@push('style')
<style>
.no-underline,.no-underline:hover,.no-underline:focus{ text-decoration:none!important; }

.password-eye-btn{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  height:36px;
  width:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f1f5f9;
  border:1px solid rgba(148,163,184,.55);
  border-radius:10px;
  color:#475569;
  cursor:pointer;
  transition:.2s;
}
.password-eye-btn:hover{
  background:#e2e8f0;
  color:#1d4ed8;
}
.password-eye-btn:focus{
  outline:none;
  box-shadow:0 0 0 .2rem rgba(59,130,246,.25);
}

#loginBtn,
#loginBtn:hover,
#loginBtn:focus,
#loginBtn:active{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  filter:none!important;
}

#loginBtn .btn-text,
#loginBtn .btn-spin,
#loginBtn .btn-spin *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  filter:none!important;
  text-shadow:none!important;
}
</style>
@endpush

@push('script')
<script>
(function(){
  const pw = document.getElementById('password');
  const eyeBtn = document.getElementById('eyeBtn');
  if(pw && eyeBtn){
    eyeBtn.addEventListener('click', function(){
      const show = pw.type === 'password';
      pw.type = show ? 'text' : 'password';
      eyeBtn.setAttribute('aria-pressed', show ? 'true' : 'false');
      eyeBtn.innerHTML = show
        ? '<i class="las la-eye-slash"></i>'
        : '<i class="las la-eye"></i>';
    });
  }

  const form = document.getElementById('loginForm');
  const btn  = document.getElementById('loginBtn');
  if(form && btn){
    form.addEventListener('submit', function(){
      btn.disabled = true;
      btn.querySelector('.btn-text').style.display = 'none';
      btn.querySelector('.btn-spin').style.display = 'inline-flex';
    });
  }
})();
</script>
@endpush

@endsection