@extends('jobseeker.wizard.layout')

@section('wizard-step')
<div class="step-header" style="margin-bottom: 2rem;">
  <span class="section-badge" style="margin-bottom: 0.5rem;"><i class="fas fa-id-badge"></i> Candidate Demographics</span>
  <h2 style="font-size: 1.5rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin: 0 0 0.5rem;">
    Step 2: Personal Details & Photograph
  </h2>
  <p style="color: var(--text-light); font-size: 0.92rem; margin: 0;">
    Enter your personal information as registered on your official government documents. All fields marked with <span style="color: #ef4444;">*</span> are mandatory.
  </p>
</div>

<form action="{{ route('jobseeker.wizard.save-step2') }}" method="POST" enctype="multipart/form-data" class="wizard-step-form" id="step2Form">
  @csrf

  <!-- Full Name (Synced from User Account) -->
  <div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.75rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
    <div>
      <span style="font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-light); font-weight: 600;">Registered Candidate Name</span>
      <h3 style="margin: 0.2rem 0 0; font-size: 1.2rem; color: var(--text-heading); font-family: var(--font-heading);">
        {{ $user->name }}
      </h3>
      <span style="font-size: 0.82rem; color: var(--text-light);">
        Email: {{ $user->email }} • Phone: {{ $user->phone ?? 'Not specified' }}
      </span>
    </div>
    <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); font-weight: 600; padding: 0.4rem 0.8rem;">
      <i class="fas fa-check-circle"></i> Verified Account
    </span>
  </div>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;">
    
    <!-- Date of Birth -->
    <div class="form-group">
      <label for="dob" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        Date of Birth <span style="color: #ef4444;">*</span>
      </label>
      <input type="date" 
             name="dob" 
             id="dob" 
             class="form-control" 
             value="{{ old('dob', $profile->dob ? $profile->dob->format('Y-m-d') : '') }}" 
             max="{{ now()->subYears(14)->format('Y-m-d') }}" 
             required>
      <span style="font-size: 0.78rem; color: var(--text-light); margin-top: 0.25rem; display: block;">
        Minimum age is 14 years under Employment Exchange norms.
      </span>
      @error('dob')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

    <!-- Gender -->
    <div class="form-group">
      <label for="gender" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        Gender <span style="color: #ef4444;">*</span>
      </label>
      <select name="gender" id="gender" class="form-control" required>
        <option value="">-- Select Gender --</option>
        <option value="male" {{ old('gender', $profile->gender) === 'male' ? 'selected' : '' }}>Male</option>
        <option value="female" {{ old('gender', $profile->gender) === 'female' ? 'selected' : '' }}>Female</option>
        <option value="other" {{ old('gender', $profile->gender) === 'other' ? 'selected' : '' }}>Transgender / Other</option>
      </select>
      @error('gender')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

  </div>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;">
    
    <!-- Father / Husband Name -->
    <div class="form-group">
      <label for="father_name" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        Father's / Husband's Full Name <span style="color: #ef4444;">*</span>
      </label>
      <input type="text" 
             name="father_name" 
             id="father_name" 
             class="form-control" 
             placeholder="e.g. Ramesh Sharma" 
             value="{{ old('father_name', $profile->father_name) }}" 
             required>
      @error('father_name')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

    <!-- Mother Name -->
    <div class="form-group">
      <label for="mother_name" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        Mother's Full Name <span style="color: #ef4444;">*</span>
      </label>
      <input type="text" 
             name="mother_name" 
             id="mother_name" 
             class="form-control" 
             placeholder="e.g. Sunita Sharma" 
             value="{{ old('mother_name', $profile->mother_name) }}" 
             required>
      @error('mother_name')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

  </div>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.75rem;">
    
    <!-- Social Category -->
    <div class="form-group">
      <label for="category" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        Social Category / Caste <span style="color: #ef4444;">*</span>
      </label>
      <select name="category" id="category" class="form-control" required>
        <option value="">-- Select Reservation Category --</option>
        <option value="General/Open" {{ old('category', $profile->category) === 'General/Open' ? 'selected' : '' }}>General / Open</option>
        <option value="OBC" {{ old('category', $profile->category) === 'OBC' ? 'selected' : '' }}>Other Backward Classes (OBC)</option>
        <option value="SC" {{ old('category', $profile->category) === 'SC' ? 'selected' : '' }}>Scheduled Caste (SC)</option>
        <option value="ST" {{ old('category', $profile->category) === 'ST' ? 'selected' : '' }}>Scheduled Tribe (ST)</option>
        <option value="EWS" {{ old('category', $profile->category) === 'EWS' ? 'selected' : '' }}>Economically Weaker Section (EWS)</option>
        <option value="VJ/NT" {{ old('category', $profile->category) === 'VJ/NT' ? 'selected' : '' }}>Vimukta Jati / Nomadic Tribes (VJ/NT)</option>
        <option value="SBC" {{ old('category', $profile->category) === 'SBC' ? 'selected' : '' }}>Special Backward Category (SBC)</option>
      </select>
      @error('category')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

    <!-- Marital Status -->
    <div class="form-group">
      <label for="marital_status" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        Marital Status <span style="color: #ef4444;">*</span>
      </label>
      <select name="marital_status" id="marital_status" class="form-control" required>
        <option value="">-- Select Marital Status --</option>
        <option value="Single" {{ old('marital_status', $profile->marital_status) === 'Single' ? 'selected' : '' }}>Single</option>
        <option value="Married" {{ old('marital_status', $profile->marital_status) === 'Married' ? 'selected' : '' }}>Married</option>
        <option value="Divorced" {{ old('marital_status', $profile->marital_status) === 'Divorced' ? 'selected' : '' }}>Divorced</option>
        <option value="Widowed" {{ old('marital_status', $profile->marital_status) === 'Widowed' ? 'selected' : '' }}>Widowed</option>
      </select>
      @error('marital_status')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

  </div>

  <!-- Person with Benchmark Disability (PwBD) Section -->
  <div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.75rem;">
    <div style="display: flex; align-items: center; gap: 0.75rem;">
      <input type="checkbox" 
             name="is_disabled" 
             id="is_disabled" 
             value="1" 
             {{ old('is_disabled', $profile->is_disabled) ? 'checked' : '' }} 
             style="width: 18px; height: 18px; accent-color: var(--accent);">
      <label for="is_disabled" style="font-weight: 600; color: var(--text-heading); margin: 0; cursor: pointer;">
        Person with Benchmark Disability (PwBD)?
      </label>
    </div>

    <!-- Collapsible Disability Details -->
    <div id="disabilityFields" style="display: {{ old('is_disabled', $profile->is_disabled) ? 'grid' : 'none' }}; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.25rem; border-top: 1px dashed var(--border-light); padding-top: 1rem;">
      <div class="form-group">
        <label for="disability_type" class="form-label" style="font-size: 0.88rem; font-weight: 600; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
          Disability Category
        </label>
        <select name="disability_type" id="disability_type" class="form-control">
          <option value="">-- Select Disability Type --</option>
          <option value="Locomotor Disability" {{ old('disability_type', $profile->disability_type) === 'Locomotor Disability' ? 'selected' : '' }}>Locomotor Disability (Orthopedic)</option>
          <option value="Visual Impairment" {{ old('disability_type', $profile->disability_type) === 'Visual Impairment' ? 'selected' : '' }}>Visual Impairment (Blindness/Low Vision)</option>
          <option value="Hearing Impairment" {{ old('disability_type', $profile->disability_type) === 'Hearing Impairment' ? 'selected' : '' }}>Hearing Impairment (Deaf/Hard of Hearing)</option>
          <option value="Speech & Language" {{ old('disability_type', $profile->disability_type) === 'Speech & Language' ? 'selected' : '' }}>Speech & Language Disability</option>
          <option value="Mental Illness / Intellectual" {{ old('disability_type', $profile->disability_type) === 'Mental Illness / Intellectual' ? 'selected' : '' }}>Mental Illness / Intellectual</option>
          <option value="Multiple Disabilities" {{ old('disability_type', $profile->disability_type) === 'Multiple Disabilities' ? 'selected' : '' }}>Multiple Disabilities</option>
        </select>
      </div>

      <div class="form-group">
        <label for="disability_percentage" class="form-label" style="font-size: 0.88rem; font-weight: 600; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
          Disability Percentage (Min 40%)
        </label>
        <input type="number" 
               name="disability_percentage" 
               id="disability_percentage" 
               class="form-control" 
               placeholder="40" 
               min="40" 
               max="100" 
               value="{{ old('disability_percentage', $profile->disability_percentage) }}">
      </div>
    </div>
  </div>

  <!-- Passport Photograph Upload -->
  <div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 2rem;">
    <label class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.5rem; display: block;">
      Passport-Size Photograph <span style="color: #ef4444;">*</span>
    </label>
    <p style="color: var(--text-light); font-size: 0.85rem; margin-top: 0; margin-bottom: 1rem;">
      Upload a recent passport-size photograph with white background. Max size: 1MB (JPG, JPEG, PNG). This will appear on your official Employment Registration Card.
    </p>

    <div style="display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;">
      <div style="width: 100px; height: 120px; border: 2px dashed var(--border-light); border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-card); position: relative;">
        @if($profile->photo_path)
          <img src="{{ asset('storage/' . $profile->photo_path) }}" id="photoPreview" alt="Candidate Photo" style="width: 100%; height: 100%; object-fit: cover;">
        @else
          <img src="" id="photoPreview" alt="Preview" style="width: 100%; height: 100%; object-fit: cover; display: none;">
          <div id="photoPlaceholder" style="text-align: center; color: var(--text-light); font-size: 0.75rem; padding: 0.5rem;">
            <i class="fas fa-camera" style="font-size: 1.5rem; margin-bottom: 0.25rem; display: block;"></i>
            Photo
          </div>
        @endif
      </div>

      <div style="flex: 1; min-width: 240px;">
        <input type="file" 
               name="photo" 
               id="photoInput" 
               class="form-control" 
               accept="image/jpeg,image/png,image/jpg" 
               {{ $profile->photo_path ? '' : 'required' }}>
        @error('photo')
          <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.4rem;">{{ $message }}</span>
        @enderror
      </div>
    </div>
  </div>

  <!-- Form Actions -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; border-top: 1px solid var(--border-light); padding-top: 1.5rem; flex-wrap: wrap; gap: 1rem;">
    <a href="{{ route('jobseeker.wizard.step', 1) }}" class="btn btn-outline">
      <i class="fas fa-arrow-left"></i> Previous (Identity)
    </a>
    <button type="submit" class="btn btn-primary" id="submitStep2Btn">
      Save & Continue to Qualifications <i class="fas fa-arrow-right"></i>
    </button>
  </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // PwBD toggle
  const disabledCheckbox = document.getElementById('is_disabled');
  const disabilityFields = document.getElementById('disabilityFields');
  if (disabledCheckbox && disabilityFields) {
    disabledCheckbox.addEventListener('change', function() {
      disabilityFields.style.display = this.checked ? 'grid' : 'none';
    });
  }

  // Live photo preview
  const photoInput = document.getElementById('photoInput');
  const photoPreview = document.getElementById('photoPreview');
  const photoPlaceholder = document.getElementById('photoPlaceholder');

  if (photoInput) {
    photoInput.addEventListener('change', function(e) {
      const file = e.target.files[0];
      if (file) {
        if (file.size > 1024 * 1024) {
          alert('Photo file size exceeds 1MB limit. Please choose a smaller file.');
          photoInput.value = '';
          return;
        }

        const reader = new FileReader();
        reader.onload = function(event) {
          photoPreview.src = event.target.result;
          photoPreview.style.display = 'block';
          if (photoPlaceholder) photoPlaceholder.style.display = 'none';
        };
        reader.readAsDataURL(file);
      }
    });
  }
});
</script>
@endsection