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

$content = content('breadcrumb.content');

@endphp

@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-10">
    
    <div class="w-full flex justify-center mb-10">
      <a href="{{ config('app.homepage') }}" class="transition-opacity hover:opacity-80">
        <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-3xl shadow-xl p-8 md:p-10">
      <div class="text-center mb-8">
        <h3 class="text-2xl md:text-3xl font-extrabold text-gray-900 mb-2">{{ __('Verify Your Account') }}</h3>
        <p class="text-sm text-gray-500">{{ __('Please enter the 6-digit code sent to your device.') }}</p>
      </div>

      <form action="" method="POST" class="space-y-6">
        @csrf

        <div>
          <label class="block text-sm font-bold text-gray-700 mb-2 ml-1">{{ __('Verification Code') }}</label>
          <input 
            type="text" 
            name="code" 
            placeholder="000000"
            class="w-full p-4 rounded-xl bg-gray-50 border border-gray-300 text-gray-900 text-center text-xl font-bold tracking-[0.5em] focus:outline-none focus:ring-2 focus:ring-[#0CA24B] focus:border-transparent transition-all placeholder:text-gray-300 placeholder:tracking-normal"
          >
        </div>

        @if (@$general->allow_recaptcha)
          <div class="flex justify-center py-2">
            <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-xs mt-2 font-medium"></div>
          </div>
        @endif

        <button 
          type="submit"
          class="w-full py-4 rounded-xl bg-[#0CA24B] text-white font-bold text-lg hover:bg-[#e85a12] shadow-lg shadow-orange-200 hover:shadow-orange-300 transition-all active:scale-[0.98] flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-[#0CA24B] focus:ring-offset-2"
        >
          {{ __('Verify Now') }}
        </button>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-gray-500">
          {{ __("Didn't receive the code?") }}
          <a href="#" class="text-[#0CA24B] font-bold hover:underline ml-1">{{ __('Resend Code') }}</a>
        </p>
      </div>
    </div>

    <div class="mt-10 text-center text-gray-400 text-xs font-medium uppercase tracking-widest">
      @if (@$general->copyright)
        &copy; {{ date('Y') }} {{ __(@$general->copyright) }}
      @endif
    </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-gradient-to-tr from-white/40 to-transparent"></div>
    <div class="relative z-10 flex justify-center items-center w-full h-full p-16">
      <div class="relative">
         <div class="absolute -inset-4 bg-[#0CA24B]/10 rounded-3xl blur-2xl"></div>
        <img 
          src="{{ getFile('frontendlogin', @$general->frontend_login_image) }}" 
          alt="Verification Illustration" 
          class="relative max-w-sm lg:max-w-md rounded-3xl shadow-2xl transform transition-transform hover:scale-[1.02] duration-500"
        >
      </div>
    </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
