@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('Recover Account')</h3>
              
            </div>

            <div class="login-wrapper__body">

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

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

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

              <form method="POST"
                    action="{{ route('admin.forgot.send') }}"
                    class="login-form"
                    id="forgotForm"
                    autocomplete="on"
                    novalidate>
                @csrf

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

                <div class="d-flex flex-wrap justify-content-between align-items-center">
                  <a href="{{ route('admin.login') }}" class="forget-text no-underline">@lang('Login Here')</a>
                  <a href="{{ route('admin.reset') }}" class="forget-text no-underline">Already have an OTP?</a>
                </div>

                <button type="submit" class="btn cmn-btn w-100 mt-3" id="sendBtn">
                  <span class="btn-text">Send OTP</span>
                  <span class="btn-spin" style="display:none;">
                    <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                    Sending…
                  </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; }
#sendBtn,#sendBtn:hover,#sendBtn:focus,#sendBtn:active{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  filter:none!important;
}
#sendBtn .btn-text,#sendBtn .btn-spin,#sendBtn .btn-spin *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  filter:none!important;
}
</style>
@endpush

@push('script')
<script>
(function(){
  const form = document.getElementById('forgotForm');
  const btn  = document.getElementById('sendBtn');
  if(!form || !btn) return;

  form.addEventListener('submit', function(e){
    const email = form.querySelector('input[name="email"]');
    if(email && !/^\S+@\S+\.\S+$/.test((email.value || '').trim())){
      e.preventDefault();
      email.focus();
      email.reportValidity();
      return;
    }
    btn.disabled = true;
    const text = btn.querySelector('.btn-text');
    const spin = btn.querySelector('.btn-spin');
    if(text) text.style.display = 'none';
    if(spin) spin.style.display = 'inline-flex';
  });
})();
</script>
@endpush

@endsection