@extends('layouts.app')

@section('content')
<main id="mainContent">
  <section class="section" style="padding: 4rem 0;">
    <div class="container" style="max-width: 600px;">
      
      <!-- Card Container -->
      <div class="service-card reveal" style="padding: 2.5rem; background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-lg);">
        
        <!-- Header -->
        <div style="text-align: center; margin-bottom: 2rem;">
          <span class="section-badge" style="margin-bottom: 0.75rem;">
            <i class="fas fa-user-plus"></i> Citizen &amp; Employer Enrollment
          </span>
          <h1 style="font-size: 1.85rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin-bottom: 0.5rem;">
            Create Your Portal Account
          </h1>
          <p style="color: var(--text-light); font-size: 0.95rem;">
            Unified registration workflow modelled on Maharashtra Employment Exchange (MahaSwayam).
          </p>
        </div>

        @if ($errors->any())
          <div style="padding: 0.85rem 1.25rem; background: rgba(239, 68, 68, 0.12); border-left: 4px solid #ef4444; border-radius: var(--radius-sm); margin-bottom: 1.5rem; color: #ef4444; font-size: 0.9rem;">
            <ul style="list-style: none; margin: 0; padding: 0;">
              @foreach ($errors->all() as $error)
                <li><i class="fas fa-exclamation-circle" style="margin-right: 0.4rem;"></i> {{ $error }}</li>
              @endforeach
            </ul>
          </div>
        @endif

        <!-- Google OAuth Button -->
        <div style="margin-bottom: 1.5rem;">
          <a href="{{ route('auth.google') }}" class="btn btn-outline" style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem 1rem; border-color: var(--border-light); font-weight: 600; text-decoration: none; color: var(--text-body); background: var(--bg-surface);">
            <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.616z" fill="#4285F4"/>
              <path d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.836.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z" fill="#34A853"/>
              <path d="M3.964 10.707c-.18-.54-.282-1.117-.282-1.707s.102-1.167.282-1.707V4.961H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.039l3.007-2.332z" fill="#FBBC05"/>
              <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.961L3.964 7.293C4.672 5.166 6.656 3.58 9 3.58z" fill="#EA4335"/>
            </svg>
            Sign up with Google
          </a>
        </div>

        <div style="display: flex; align-items: center; margin: 1.5rem 0; color: var(--text-light); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px;">
          <span style="flex: 1; border-bottom: 1px solid var(--border-light);"></span>
          <span style="padding: 0 0.75rem;">Or register with details</span>
          <span style="flex: 1; border-bottom: 1px solid var(--border-light);"></span>
        </div>

        <!-- Registration Form -->
        <form method="POST" action="{{ route('register') }}" data-ajax="true" novalidate id="registerForm">
          @csrf

          <!-- Role Selector Tabs -->
          <div style="margin-bottom: 1.5rem;">
            <label style="display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.6rem; color: var(--text-heading);">
              Select Registration Category <span style="color: #ef4444;">*</span>
            </label>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
              <label style="border: 2px solid {{ old('role', $defaultRole) === 'jobseeker' ? 'var(--accent)' : 'var(--border-light)' }}; border-radius: var(--radius-sm); padding: 1rem; cursor: pointer; text-align: center; background: {{ old('role', $defaultRole) === 'jobseeker' ? 'rgba(0, 102, 255, 0.05)' : 'var(--bg-surface)' }}; transition: all 0.2s;" id="label-role-jobseeker">
                <input type="radio" name="role" value="jobseeker" {{ old('role', $defaultRole) === 'jobseeker' ? 'checked' : '' }} style="display: none;" onchange="updateRoleUi('jobseeker')">
                <i class="fas fa-user-graduate" style="font-size: 1.4rem; color: var(--accent); margin-bottom: 0.4rem; display: block;"></i>
                <span style="font-weight: 700; font-size: 0.95rem; display: block; color: var(--text-heading);">Jobseeker</span>
                <span style="font-size: 0.78rem; color: var(--text-light); display: block;">Candidate / Career Seeker</span>
              </label>

              <label style="border: 2px solid {{ old('role', $defaultRole) === 'employer' ? 'var(--accent)' : 'var(--border-light)' }}; border-radius: var(--radius-sm); padding: 1rem; cursor: pointer; text-align: center; background: {{ old('role', $defaultRole) === 'employer' ? 'rgba(0, 102, 255, 0.05)' : 'var(--bg-surface)' }}; transition: all 0.2s;" id="label-role-employer">
                <input type="radio" name="role" value="employer" {{ old('role', $defaultRole) === 'employer' ? 'checked' : '' }} style="display: none;" onchange="updateRoleUi('employer')">
                <i class="fas fa-building" style="font-size: 1.4rem; color: var(--accent); margin-bottom: 0.4rem; display: block;"></i>
                <span style="font-weight: 700; font-size: 0.95rem; display: block; color: var(--text-heading);">Employer</span>
                <span style="font-size: 0.78rem; color: var(--text-light); display: block;">Corporate / Recruiter</span>
              </label>
            </div>
            @error('role')
              <span style="color: #ef4444; font-size: 0.85rem; display: block; margin-top: 0.35rem;">{{ $message }}</span>
            @enderror
          </div>

          <!-- Full Name / Org Name -->
          <div style="margin-bottom: 1.25rem;">
            <label for="name" id="nameLabel" style="display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--text-heading);">
              Full Name (as per Aadhaar / Official ID) <span style="color: #ef4444;">*</span>
            </label>
            <input type="text" id="name" name="name" value="{{ old('name') }}" required
                   placeholder="e.g. Rahul Ramesh Sharma"
                   class="filter-select"
                   style="width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-body); font-size: 0.95rem; height: 46px; padding: 0 1rem;">
            @error('name')
              <span style="color: #ef4444; font-size: 0.85rem; display: block; margin-top: 0.35rem;">{{ $message }}</span>
            @enderror
          </div>

          <!-- Username & Email Grid -->
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem;">
            <div>
              <label for="username" style="display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--text-heading);">
                Portal Username <span style="color: #ef4444;">*</span>
              </label>
              <input type="text" id="username" name="username" value="{{ old('username') }}" required
                     placeholder="e.g. rahul_sharma"
                     class="filter-select"
                     style="width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-body); font-size: 0.95rem; height: 46px; padding: 0 1rem;">
              @error('username')
                <span style="color: #ef4444; font-size: 0.85rem; display: block; margin-top: 0.35rem;">{{ $message }}</span>
              @enderror
            </div>

            <div>
              <label for="email" style="display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--text-heading);">
                Email Address <span style="color: #ef4444;">*</span>
              </label>
              <input type="email" id="email" name="email" value="{{ old('email') }}" required
                     placeholder="name@example.com"
                     class="filter-select"
                     style="width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-body); font-size: 0.95rem; height: 46px; padding: 0 1rem;">
              @error('email')
                <span style="color: #ef4444; font-size: 0.85rem; display: block; margin-top: 0.35rem;">{{ $message }}</span>
              @enderror
            </div>
          </div>

          <!-- Phone Number -->
          <div style="margin-bottom: 1.25rem;">
            <label for="phone" style="display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--text-heading);">
              Mobile Number (Linked with Aadhaar / Official) <span style="color: #ef4444;">*</span>
            </label>
            <div style="display: flex; gap: 0.5rem;">
              <span style="padding: 0 0.85rem; display: flex; align-items: center; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; color: var(--text-light);">
                +91
              </span>
              <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" required
                     placeholder="98220 12345"
                     class="filter-select"
                     style="width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-body); font-size: 0.95rem; height: 46px; padding: 0 1rem;">
            </div>
            @error('phone')
              <span style="color: #ef4444; font-size: 0.85rem; display: block; margin-top: 0.35rem;">{{ $message }}</span>
            @enderror
          </div>

          <!-- Password & Confirm Password -->
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem;">
            <div>
              <label for="password" style="display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--text-heading);">
                Password <span style="color: #ef4444;">*</span>
              </label>
              <input type="password" id="password" name="password" required
                     placeholder="Min. 8 characters"
                     class="filter-select"
                     style="width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-body); font-size: 0.95rem; height: 46px; padding: 0 1rem;">
              @error('password')
                <span style="color: #ef4444; font-size: 0.85rem; display: block; margin-top: 0.35rem;">{{ $message }}</span>
              @enderror
            </div>

            <div>
              <label for="password_confirmation" style="display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--text-heading);">
                Confirm Password <span style="color: #ef4444;">*</span>
              </label>
              <input type="password" id="password_confirmation" name="password_confirmation" required
                     placeholder="Re-enter password"
                     class="filter-select"
                     style="width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-body); font-size: 0.95rem; height: 46px; padding: 0 1rem;">
            </div>
          </div>

          <!-- Password Rules Hint -->
          <div style="font-size: 0.8rem; color: var(--text-light); margin-bottom: 1.5rem; line-height: 1.4;">
            <i class="fas fa-info-circle" style="color: var(--accent);"></i> Password must contain at least 8 characters with mixed case letters (A-Z, a-z) and at least one number (0-9).
          </div>

          <!-- Terms & Privacy Consent -->
          <div style="margin-bottom: 1.5rem;">
            <label style="display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--text-body); cursor: pointer; line-height: 1.45;">
              <input type="checkbox" name="terms" id="terms" required style="accent-color: var(--accent); width: 18px; height: 18px; margin-top: 2px;">
              <span>
                I agree to the <a href="{{ route('terms') }}" target="_blank" style="color: var(--accent); text-decoration: underline;">Terms of Service</a>, <a href="{{ route('privacy') }}" target="_blank" style="color: var(--accent); text-decoration: underline;">Privacy Policy</a>, and consent to identity verification under Digital Personal Data Protection guidelines.
              </span>
            </label>
            @error('terms')
              <span style="color: #ef4444; font-size: 0.85rem; display: block; margin-top: 0.35rem;">{{ $message }}</span>
            @enderror
          </div>

          <!-- Submit Button -->
          <button type="submit" class="btn btn-primary btn-lg" style="width: 100%; justify-content: center;">
            <i class="fas fa-check-circle"></i> Create Account &amp; Proceed
          </button>
        </form>

        <!-- Footer Link -->
        <div style="text-align: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-light); font-size: 0.92rem; color: var(--text-light);">
          Already have an account? 
          <a href="{{ route('login') }}" style="color: var(--accent); font-weight: 600; text-decoration: none; margin-left: 0.25rem;">
            Sign In Here <i class="fas fa-arrow-right" style="font-size: 0.8rem;"></i>
          </a>
        </div>

      </div>
    </div>
  </section>
</main>

<script>
function updateRoleUi(role) {
  const jobseekerLabel = document.getElementById('label-role-jobseeker');
  const employerLabel = document.getElementById('label-role-employer');
  const nameLabel = document.getElementById('nameLabel');

  if (role === 'employer') {
    employerLabel.style.borderColor = 'var(--accent)';
    employerLabel.style.background = 'rgba(0, 102, 255, 0.05)';
    jobseekerLabel.style.borderColor = 'var(--border-light)';
    jobseekerLabel.style.background = 'var(--bg-surface)';
    if (nameLabel) nameLabel.innerHTML = 'Organization / Enterprise Name <span style="color: #ef4444;">*</span>';
  } else {
    jobseekerLabel.style.borderColor = 'var(--accent)';
    jobseekerLabel.style.background = 'rgba(0, 102, 255, 0.05)';
    employerLabel.style.borderColor = 'var(--border-light)';
    employerLabel.style.background = 'var(--bg-surface)';
    if (nameLabel) nameLabel.innerHTML = 'Full Name (as per Aadhaar / Official ID) <span style="color: #ef4444;">*</span>';
  }
}
</script>
@endsection