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


@section('content2')
<div class="dashboard-body-part py-8">
  <div class="flex justify-center">
    <div class="w-full max-w-2xl">

      <!-- Card -->
      <div class="bg-white rounded-2xl shadow-md overflow-hidden">

        <!-- Card Header -->
        <div class="bg-gray-100 px-6 py-4 border-b">
          <h4 class="text-lg font-semibold text-gray-800">{{ __('Two Factor Authentication') }}</h4>
        </div>

        <!-- Card Body -->
        <div class="px-6 py-6 space-y-4 text-gray-700 text-sm">

          <p>
            {{ __('Two factor authentication (2FA) strengthens access security by requiring two methods (also referred to as factors) to verify your identity. Two factor authentication protects against phishing, social engineering and password brute force attacks and secures your logins from attackers exploiting weak or stolen credentials.') }}
          </p>

          <!-- Validation Errors -->
          @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
              <ul class="list-disc pl-5">
                @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
                @endforeach
              </ul>
            </div>
          @endif

          <p>{{ __('Enter the pin from Google Authenticator app') }}:</p>

          <!-- Form -->
          <form action="{{ route('user.2faVerify') }}" method="POST" class="space-y-4">
            @csrf
            <div class="space-y-1">
              <label for="one_time_password" class="block text-gray-700 font-medium">{{ __('One Time Password') }}</label>
              <input id="one_time_password" name="one_time_password" type="text" required
                     class="w-full px-4 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#2FE6DE] focus:border-transparent"/>
            </div>

            <button type="submit"
                    class="w-full bg-[#3C7EC1] text-white font-semibold px-4 py-2 rounded-xl hover:bg-[#22c9c2] transition-colors">
              {{ __('Authenticate') }}
            </button>
          </form>

        </div>
      </div>

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

@endsection
