@extends(template().'layout.auth')

@section('content')
    @push('seo')
        <meta name='description' content="{{ @$general->seo_description }}">
    @endpush

<section class="min-h-screen flex flex-col md:flex-row bg-gray-50 text-gray-800">

  <div class="flex flex-col justify-center items-center w-full md:w-1/2 px-6 py-12">

    <div class="w-full flex justify-center mb-8">
      <a href="{{ config('app.homepage') }}" class="block">
        <img src="{{ getFile('logo', @$general->logo) }}" alt="logo" class="w-40 md:w-48 object-contain">
      </a>
    </div>

    <div class="w-full max-w-md bg-white border border-gray-200 rounded-2xl shadow-xl p-8">
      <h3 class="text-2xl font-bold text-center text-gray-900 mb-6">{{ __('Request For Password Reset Code') }}</h3>

      <form action="{{ route('user.forgot.password') }}" method="POST" class="space-y-5">
        @csrf

        <div>
          <label class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Email Address') }} <span class="text-red-500">*</span></label>
          <input 
            type="email" 
            name="email" 
            id="email" 
            placeholder="{{ __('Enter Email') }}"
            class="w-full p-3 rounded-lg bg-gray-50 border border-gray-300 text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#0CA24B] focus:border-transparent transition"
          >
        </div>

        @if (@$general->allow_recaptcha == 1)
          <div class="flex justify-center">
            <script src="https://www.google.com/recaptcha/api.js"></script>
            <div class="g-recaptcha" data-sitekey="{{ @$general->recaptcha_key }}" data-callback="verifyCaptcha"></div>
            <div id="g-recaptcha-error" class="text-red-500 text-sm mt-1"></div>
          </div>
        @endif

        <button 
          type="submit" 
          id="recaptcha" 
          class="w-full py-3 rounded-lg bg-[#0CA24B] text-white font-bold hover:bg-[#e85a12] shadow-md transition flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-[#0CA24B] focus:ring-offset-2"
        >
          {{ __('Send Verification Code') }}
        </button>
      </form>

      <p class="mt-6 text-center text-sm text-gray-500">
        {{ __('Back to Login') }}? 
        <a href="{{ route('user.login') }}" class="text-[#0CA24B] font-bold hover:underline">
          {{ __('Login') }}
        </a>
      </p>
    </div>

  </div>

  <div class="hidden md:flex w-1/2 bg-cover bg-center relative" style="background-image: url('{{ asset('asset/theme3/images/bg/plan.jpg') }}')">
    <div class="absolute inset-0 bg-white bg-opacity-10"></div>
    <div class="relative z-10 flex justify-center items-center w-full h-full p-12">
      <img src="{{ getFile('frontendlogin', @$general->frontend_login_image) }}" alt="image" class="max-w-xs md:max-w-md rounded-2xl shadow-2xl">
    </div>
  </div>

</section>


@endsection


@push('script')
    <script>
        "use strict";

        function submitUserForm() {
            var response = grecaptcha.getResponse();
            if (response.length == 0) {
                document.getElementById('g-recaptcha-error').innerHTML =
                    "<span class='sp_text_danger'>{{__('Captcha field is required.')</span>";
                return false;
            }
            return true;
        }

        function verifyCaptcha() {
            document.getElementById('g-recaptcha-error').innerHTML = '';
        }
    </script>
@endpush
