@extends('layouts.app')

@section('title', 'Disable 2FA - ' . config('app.name', 'Laravel 2FA'))

@section('content')
  <div class="min-h-screen flex items-center justify-center px-4">
    <div class="max-w-md w-full">
      <!-- Disable Card -->
      <div class="glass-effect rounded-2xl shadow-2xl p-8">
        <!-- Header -->
        <div class="text-center mb-8">
          <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
            <i class="fas fa-shield-alt text-white text-2xl"></i>
          </div>
          <h2 class="text-3xl font-bold text-white mb-2 text-shadow">
            Disable Two-Factor Authentication
          </h2>
          <p class="text-white text-shadow-sm">
            Enter your password and current 2FA code to disable
          </p>
        </div>

        <!-- Security Warning -->
        <div class="bg-red-50 bg-opacity-20 rounded-lg p-4 mb-6 border border-red-200 border-opacity-30">
          <div class="flex items-start space-x-3">
            <div class="flex-shrink-0">
              <i class="fas fa-exclamation-triangle text-red-400 text-xl"></i>
            </div>
            <div class="text-sm text-white text-shadow-sm">
              <p class="font-medium mb-1">Security Warning</p>
              <p>Disabling 2FA will reduce your account security. Make sure this is what you want to do.</p>
            </div>
          </div>
        </div>
        <!-- Disable Form -->
        <form method="POST" action="{{ route('2fa.disable.post') }}" class="space-y-6">
          @csrf

          <!-- Error Display -->
          @if ($errors->any())
            <div class="bg-red-50 bg-opacity-20 rounded-lg p-4 border border-red-200 border-opacity-30">
              <div class="flex items-start space-x-3">
                <div class="flex-shrink-0">
                  <svg class="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                      clip-rule="evenodd"></path>
                  </svg>
                </div>
                <div class="text-sm text-white text-shadow-sm">
                  <p class="font-medium mb-1">Verification Failed</p>
                  <ul class="list-disc list-inside space-y-1">
                    @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                    @endforeach
                  </ul>
                </div>
              </div>
            </div>
          @endif

          <div>
            <label for="password" class="block text-sm font-medium text-white mb-2 text-shadow-sm">
              Current Password
            </label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                  </path>
                </svg>
              </div>
              <input id="password" name="password" type="password" required
                class="input-glass block w-full pl-10 pr-3 py-4 rounded-lg text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 focus:border-transparent transition-all duration-200 @error('password') border-red-300 focus:ring-red-300 @enderror"
                placeholder="Enter your password" autocomplete="current-password">
            </div>
          </div>

          <div>
            <label for="code" class="block text-sm font-medium text-white mb-2 text-shadow-sm">
              Authentication Code
            </label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                  </path>
                </svg>
              </div>
              <input id="code" name="code" type="text" required maxlength="6" pattern="[0-9]{6}"
                class="input-glass block w-full pl-10 pr-3 py-4 rounded-lg text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 focus:border-transparent transition-all duration-200 text-center text-3xl tracking-widest font-mono @error('code') border-red-300 focus:ring-red-300 @enderror"
                placeholder="000000" autocomplete="off" value="{{ old('code') }}">
            </div>
            <p class="text-xs text-white text-shadow-sm mt-2 text-center">
              Enter the 6-digit code from your authenticator app
            </p>
          </div>

          <button type="submit"
            class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <i class="fas fa-times-circle text-red-200 group-hover:text-red-100"></i>
            </span>
            Disable 2FA
          </button>
        </form>

        <!-- Back to Dashboard -->
        <div class="mt-6 text-center">
          <a href="{{ route('dashboard') }}"
            class="text-white text-shadow-sm hover:text-purple-200 transition-colors duration-200">
            <i class="fas fa-arrow-left mr-2"></i>Back to Dashboard
          </a>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.getElementById('code').addEventListener('input', function(e) {
      this.value = this.value.replace(/[^0-9]/g, '');

      // Auto-submit when 6 digits are entered
      if (this.value.length === 6) {
        this.form.submit();
      }
    });

    // Focus on password input when page loads
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('password').focus();
    });
  </script>
@endsection