@extends('frontend.layouts.auth')

@section('title', 'Create Your Account')

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/auth.css') }}">
@endpush

@section('content')
<section class="ht-auth-section">
  <!-- =========================================
       HERO BANNER
  ========================================== -->
  <div class="auth-hero">
    <!-- Brand Header -->
    <div class="container auth-hero__header">
      <a href="{{ route('home') }}" class="auth-brand">
        <div class="auth-brand__logo">
          <i class="fas fa-graduation-cap"></i>
        </div>
        <div class="auth-brand__text">
          <span class="brand-name">HI-TECH</span>
          <span class="brand-sub">PATHSHALA</span>
        </div>
      </a>
    </div>

    <!-- Background Pattern Dots -->
    <div class="auth-hero__bg-dots left" aria-hidden="true"></div>
    <div class="auth-hero__bg-dots right" aria-hidden="true"></div>

    <div class="container auth-hero__container">
      <!-- Top Pill Badge -->
      <div class="auth-hero__badge">
        <i class="fas fa-user-plus" aria-hidden="true"></i>
        <span>Start Your Journey Today!</span>
      </div>

      <!-- Main Title -->
      <h1 class="auth-hero__title">Create Your Account</h1>

      <!-- Decorative Divider -->
      <div class="auth-hero__divider" aria-hidden="true">
        <span class="line"></span>
        <span class="diamond">◆</span>
        <span class="line"></span>
      </div>

      <!-- Subtitle -->
      <p class="auth-hero__subtitle">
        Join Hi-Tech Pathshala and take the first step towards achieving your dreams.
      </p>

      <!-- Graphic 3D Illustration overlay -->
      <div class="auth-hero__illustration" aria-hidden="true">
        <div class="hero-clipboard-card">
          <div class="clipboard-top-clip"></div>
          <div class="clipboard-avatar">
            <i class="fas fa-user"></i>
          </div>
          <div class="clipboard-line"></div>
          <div class="clipboard-line short"></div>
          <div class="hero-shield-badge">
            <i class="fas fa-shield-alt"></i>
          </div>
        </div>
        <div class="hero-books-stack">
          <div class="grad-cap">
            <i class="fas fa-graduation-cap"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- =========================================
       MAIN CONTENT CARD (2 COLUMNS)
  ========================================== -->
  <div class="container auth-content">
    <div class="ht-card auth-main-card">
      <div class="auth-grid">
        
        <!-- LEFT COLUMN: Success Pitch & Preview -->
        <div class="auth-benefits-col">
          <h2 class="benefits-title">Your <span class="text-gold">Success</span> Starts Here</h2>
          <div class="benefits-divider" aria-hidden="true">
            <span class="line"></span>
            <span class="diamond">◆</span>
            <span class="line"></span>
          </div>
          <p class="benefits-subtitle">Create your account and unlock a world of learning, practice and performance tracking.</p>

          <!-- Dashboard Laptop Graphic Visual -->
          <div class="dashboard-preview-wrapper">
            <div class="preview-dots-bg" aria-hidden="true"></div>
            <div class="laptop-graphic">
              <div class="laptop-screen">
                <div class="laptop-top-bar">
                  <span class="dot red"></span>
                  <span class="dot yellow"></span>
                  <span class="dot green"></span>
                </div>
                <div class="laptop-screen-content">
                  <div class="screen-chart-box">
                    <svg viewBox="0 0 100 40" class="chart-svg">
                      <path d="M0,35 Q20,25 40,30 T80,10 T100,5" fill="none" stroke="#1a73e8" stroke-width="3" />
                      <circle cx="80" cy="10" r="3" fill="#dfa218" />
                    </svg>
                  </div>
                  <div class="screen-pie-box"></div>
                </div>
              </div>
              <div class="laptop-keyboard"></div>
            </div>
            <div class="preview-accessories">
              <div class="plant-pot"><i class="fas fa-seedling"></i></div>
              <div class="pencil-stand"><i class="fas fa-pen-nib"></i></div>
              <div class="stacked-books-mini"></div>
            </div>
          </div>

          <!-- Feature Bullets -->
          <ul class="benefits-list">
            <li>
              <div class="benefit-icon benefit-icon--blue">
                <i class="fas fa-graduation-cap"></i>
              </div>
              <span>Access test series and premium courses</span>
            </li>
            <li>
              <div class="benefit-icon benefit-icon--gold">
                <i class="fas fa-chart-line"></i>
              </div>
              <span>Track performance and daily progress</span>
            </li>
            <li>
              <div class="benefit-icon benefit-icon--green">
                <i class="fas fa-cloud-download-alt"></i>
              </div>
              <span>Download study material and notes</span>
            </li>
            <li>
              <div class="benefit-icon benefit-icon--purple">
                <i class="fas fa-star"></i>
              </div>
              <span>Get personalized recommendations</span>
            </li>
          </ul>
        </div>

        <!-- RIGHT COLUMN: Registration Form -->
        <div class="auth-form-col">
          <div class="auth-card-header">
            <div class="auth-card-icon">
              <i class="fas fa-user-plus"></i>
            </div>
            <div>
              <h3 class="auth-card-title">Create Your Account</h3>
              <p class="auth-card-desc">Fill in the details below to get started</p>
            </div>
          </div>

          <form class="auth-form" action="{{ route('register') }}" method="POST">
            @csrf

            <!-- 2-Column Row: Full Name & Email -->
            <div class="form-row-2col">
              <div class="ht-form-group">
                <label for="name" class="ht-label">Full Name</label>
                <div class="input-icon-wrapper">
                  <i class="far fa-user input-icon"></i>
                  <input 
                    type="text" 
                    id="name" 
                    name="name" 
                    class="ht-input @error('name') is-invalid @enderror" 
                    value="{{ old('name') }}" 
                    placeholder="Enter your full name" 
                    required 
                    autofocus 
                  />
                </div>
                @error('name')
                  <span class="ht-form-error">{{ $message }}</span>
                @enderror
              </div>

              <div class="ht-form-group">
                <label for="email" class="ht-label">Email Address</label>
                <div class="input-icon-wrapper">
                  <i class="far fa-envelope input-icon"></i>
                  <input 
                    type="email" 
                    id="email" 
                    name="email" 
                    class="ht-input @error('email') is-invalid @enderror" 
                    value="{{ old('email') }}" 
                    placeholder="you@example.com" 
                    required 
                  />
                </div>
                @error('email')
                  <span class="ht-form-error">{{ $message }}</span>
                @enderror
              </div>
            </div>

            <!-- 2-Column Row: Phone & Password -->
            <div class="form-row-2col">
              <div class="ht-form-group">
                <label for="phone" class="ht-label">Phone Number <span class="optional-text">(Optional)</span></label>
                <div class="input-icon-wrapper">
                  <i class="fas fa-phone-alt input-icon"></i>
                  <input 
                    type="tel" 
                    id="phone" 
                    name="phone" 
                    class="ht-input @error('phone') is-invalid @enderror" 
                    value="{{ old('phone') }}" 
                    placeholder="+91 98765 43210" 
                  />
                </div>
                @error('phone')
                  <span class="ht-form-error">{{ $message }}</span>
                @enderror
              </div>

              <div class="ht-form-group">
                <label for="password" class="ht-label">Password</label>
                <div class="input-icon-wrapper">
                  <i class="fas fa-lock input-icon"></i>
                  <input 
                    type="password" 
                    id="password" 
                    name="password" 
                    class="ht-input @error('password') is-invalid @enderror" 
                    placeholder="Create a password" 
                    required 
                  />
                  <i class="far fa-eye-slash toggle-password" id="togglePassword"></i>
                </div>
                @error('password')
                  <span class="ht-form-error">{{ $message }}</span>
                @enderror
              </div>
            </div>

            <!-- Full-Width: Confirm Password -->
            <div class="ht-form-group">
              <label for="password_confirmation" class="ht-label">Confirm Password</label>
              <div class="input-icon-wrapper">
                <i class="fas fa-lock input-icon"></i>
                <input 
                  type="password" 
                  id="password_confirmation" 
                  name="password_confirmation" 
                  class="ht-input" 
                  placeholder="Confirm your password" 
                  required 
                />
                <i class="far fa-eye-slash toggle-password" id="toggleConfirmPassword"></i>
              </div>
            </div>

            <!-- Terms & Conditions Checkbox -->
            <div class="ht-form-group checkbox-group">
              <label class="ht-checkbox-label">
                <input type="checkbox" name="terms" required {{ old('terms') ? 'checked' : '' }}>
                <span class="checkbox-text">
                  I agree to the <a href="{{ route('terms') }}" target="_blank">Terms & Conditions</a> and <a href="{{ route('privacy') }}" target="_blank">Privacy Policy</a>
                </span>
              </label>
              @error('terms')
                <span class="ht-form-error">{{ $message }}</span>
              @enderror
            </div>

            <!-- Submit Button -->
            <button type="submit" class="ht-btn-primary">
              <i class="fas fa-user-plus"></i> Create Account
            </button>

            <!-- Social Divider -->
            <div class="auth-divider">
              <span>or sign up with</span>
            </div>

            <!-- Social Login Buttons -->
            <div class="social-login-grid">
              <a href="#" class="social-btn google-btn">
                <svg width="18" height="18" viewBox="0 0 24 24">
                  <path fill="#4285F4" d="M23.745 12.27c0-.7-.06-1.4-.19-2.07H12v4.51h6.6c-.29 1.52-1.14 2.82-2.4 3.68v3.05h3.88c2.27-2.09 3.665-5.17 3.665-9.17z"/>
                  <path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.88-3.05c-1.08.72-2.45 1.16-4.05 1.16-3.12 0-5.77-2.1-6.72-4.93H1.28v3.15C3.26 21.3 7.35 24 12 24z"/>
                  <path fill="#FBBC05" d="M5.28 14.27c-.25-.72-.38-1.49-.38-2.27s.13-1.55.38-2.27V6.58H1.28C.46 8.21 0 10.05 0 12s.46 3.79 1.28 5.42l4-3.15z"/>
                  <path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.35 0 3.26 2.7 1.28 6.58l4 3.15c.95-2.83 3.6-4.98 6.72-4.98z"/>
                </svg>
                Continue with Google
              </a>

              <a href="#" class="social-btn facebook-btn">
                <i class="fab fa-facebook-f"></i> Continue with Facebook
              </a>
            </div>

            <!-- Switch to Login -->
            <p class="auth-footer-text">
              Already have an account? 
              <a href="{{ route('login') }}" class="login-link">Sign In</a>
            </p>
          </form>
        </div>

      </div>
    </div>

    <!-- =========================================
         BOTTOM TRUST FEATURES BAR (4 COLUMNS)
  ========================================== -->
    <div class="ht-card auth-features-bar">
      <div class="feature-col">
        <div class="feature-icon feature-icon--blue">
          <i class="fas fa-shield-alt"></i>
        </div>
        <div class="feature-info">
          <h4>Secure & Safe</h4>
          <p>Your data is protected with top security</p>
        </div>
      </div>

      <div class="feature-col">
        <div class="feature-icon feature-icon--gold">
          <i class="fas fa-headset"></i>
        </div>
        <div class="feature-info">
          <h4>24/7 Support</h4>
          <p>We're here to help you anytime</p>
        </div>
      </div>

      <div class="feature-col">
        <div class="feature-icon feature-icon--green">
          <i class="fas fa-users"></i>
        </div>
        <div class="feature-info">
          <h4>Trusted by Students</h4>
          <p>Join thousands of successful aspirants</p>
        </div>
      </div>

      <div class="feature-col">
        <div class="feature-icon feature-icon--purple">
          <i class="far fa-heart"></i>
        </div>
        <div class="feature-info">
          <h4>Made for Aspirants</h4>
          <p>Designed to help you achieve your dreams</p>
        </div>
      </div>
    </div>

  </div>
</section>
@endsection

@push('scripts')
<script>
  // Simple password visibility toggle
  document.addEventListener('DOMContentLoaded', function() {
    function setupPasswordToggle(inputId, toggleId) {
      const input = document.getElementById(inputId);
      const toggle = document.getElementById(toggleId);
      if (input && toggle) {
        toggle.addEventListener('click', function() {
          const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
          input.setAttribute('type', type);
          this.classList.toggle('fa-eye');
          this.classList.toggle('fa-eye-slash');
        });
      }
    }

    setupPasswordToggle('password', 'togglePassword');
    setupPasswordToggle('password_confirmation', 'toggleConfirmPassword');
  });
</script>
@endpush