@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-graduation-cap"></i> Academic & Technical Credentials</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 3: Educational Qualifications
  </h2>
  <p style="color: var(--text-light); font-size: 0.92rem; margin: 0;">
    Record your educational qualifications in chronological order. At least one qualification (such as 10th / SSC or above) is required. You can attach supporting marksheets or certificates.
  </p>
</div>

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

  <div id="qualificationsContainer" style="display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem;">
    
    @php
      $displayQuals = old('qualifications', $qualifications->count() > 0 ? $qualifications->toArray() : [[]]);
    @endphp

    @foreach($displayQuals as $index => $qual)
      <div class="qual-row-card" data-index="{{ $index }}" style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.5rem; position: relative;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;">
          <h4 style="margin: 0; font-size: 1.05rem; font-family: var(--font-heading); color: var(--text-heading); display: flex; align-items: center; gap: 0.5rem;">
            <span class="badge" style="background: var(--accent); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem;">
              {{ $loop->iteration }}
            </span>
            Qualification Details
          </h4>
          <button type="button" class="btn btn-outline btn-sm remove-qual-btn" style="color: #ef4444; border-color: rgba(239,68,68,0.3); padding: 0.25rem 0.65rem;" title="Remove this qualification">
            <i class="fas fa-trash-alt"></i> Remove
          </button>
        </div>

        @if(isset($qual['id']))
          <input type="hidden" name="qualifications[{{ $index }}][id]" value="{{ $qual['id'] }}">
        @endif

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem;">
          
          <!-- Level -->
          <div class="form-group">
            <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
              Qualification Level <span style="color: #ef4444;">*</span>
            </label>
            <select name="qualifications[{{ $index }}][level]" class="form-control" required>
              <option value="">-- Select Level --</option>
              @foreach(['10th / SSC', '12th / HSC', 'ITI / Certificate', 'Diploma', 'Graduate / Bachelor', 'Post Graduate / Master', 'Doctorate / PhD'] as $lvl)
                <option value="{{ $lvl }}" {{ (isset($qual['level']) && $qual['level'] === $lvl) ? 'selected' : '' }}>{{ $lvl }}</option>
              @endforeach
            </select>
          </div>

          <!-- Stream / Degree -->
          <div class="form-group">
            <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
              Degree / Stream / Trade <span style="color: #ef4444;">*</span>
            </label>
            <input type="text" 
                   name="qualifications[{{ $index }}][stream_degree]" 
                   class="form-control" 
                   placeholder="e.g. Science, B.Com, Mechanical, Computer Engg" 
                   value="{{ $qual['stream_degree'] ?? '' }}" 
                   required>
          </div>

        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem;">
          
          <!-- Board / University -->
          <div class="form-group">
            <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
              Board / University Name <span style="color: #ef4444;">*</span>
            </label>
            <input type="text" 
                   name="qualifications[{{ $index }}][board_university]" 
                   class="form-control" 
                   placeholder="e.g. Maharashtra State Board / Pune University" 
                   value="{{ $qual['board_university'] ?? '' }}" 
                   required>
          </div>

          <!-- Passing Year -->
          <div class="form-group">
            <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
              Passing Year <span style="color: #ef4444;">*</span>
            </label>
            <input type="number" 
                   name="qualifications[{{ $index }}][passing_year]" 
                   class="form-control" 
                   placeholder="2022" 
                   min="1970" 
                   max="{{ date('Y') }}" 
                   value="{{ $qual['passing_year'] ?? '' }}" 
                   required>
          </div>

        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem;">
          
          <!-- Percentage -->
          <div class="form-group">
            <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
              Percentage / CGPA <span style="color: #ef4444;">*</span>
            </label>
            <input type="number" 
                   step="0.01" 
                   name="qualifications[{{ $index }}][percentage]" 
                   class="form-control" 
                   placeholder="75.50" 
                   min="35" 
                   max="100" 
                   value="{{ $qual['percentage'] ?? '' }}" 
                   required>
          </div>

          <!-- Grade -->
          <div class="form-group">
            <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
              Division / Grade
            </label>
            <select name="qualifications[{{ $index }}][grade]" class="form-control">
              <option value="">-- Select Division --</option>
              @foreach(['Distinction', 'First Class', 'Second Class', 'Pass Class'] as $grade)
                <option value="{{ $grade }}" {{ (isset($qual['grade']) && $qual['grade'] === $grade) ? 'selected' : '' }}>{{ $grade }}</option>
              @endforeach
            </select>
          </div>

          <!-- Certificate Upload -->
          <div class="form-group">
            <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
              Certificate / Marksheet (Max 2MB)
            </label>
            <input type="file" 
                   name="qualifications[{{ $index }}][certificate]" 
                   class="form-control" 
                   accept=".pdf,.jpg,.jpeg,.png">
            @if(!empty($qual['certificate_path']))
              <span style="font-size: 0.78rem; color: var(--success); display: block; margin-top: 0.25rem;">
                <i class="fas fa-check-circle"></i> File uploaded: <a href="{{ asset('storage/' . $qual['certificate_path']) }}" target="_blank" style="color: var(--accent); text-decoration: underline;">View Current File</a>
              </span>
            @endif
          </div>

        </div>
      </div>
    @endforeach

  </div>

  <!-- Add Repeater Row Button -->
  <div style="margin-bottom: 2rem;">
    <button type="button" id="addQualBtn" class="btn btn-outline" style="border-style: dashed; width: 100%; padding: 0.85rem; font-weight: 600;">
      <i class="fas fa-plus-circle"></i> Add Another Educational Qualification
    </button>
  </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', 2) }}" class="btn btn-outline">
      <i class="fas fa-arrow-left"></i> Previous (Personal)
    </a>
    <button type="submit" class="btn btn-primary" id="submitStep3Btn">
      Save & Continue to Residential Details <i class="fas fa-arrow-right"></i>
    </button>
  </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('qualificationsContainer');
  const addBtn = document.getElementById('addQualBtn');

  function updateRowNumbers() {
    const rows = container.querySelectorAll('.qual-row-card');
    rows.forEach((row, i) => {
      row.dataset.index = i;
      const badge = row.querySelector('.badge');
      if (badge) badge.textContent = i + 1;

      // Update input names
      row.querySelectorAll('input, select').forEach(input => {
        const name = input.getAttribute('name');
        if (name) {
          input.setAttribute('name', name.replace(/qualifications\[\d+\]/, `qualifications[${i}]`));
        }
      });

      // Show/hide remove button based on count
      const removeBtn = row.querySelector('.remove-qual-btn');
      if (removeBtn) {
        removeBtn.style.display = rows.length > 1 ? 'inline-block' : 'none';
      }
    });
  }

  // Add Row
  if (addBtn && container) {
    addBtn.addEventListener('click', function() {
      const rows = container.querySelectorAll('.qual-row-card');
      const newIndex = rows.length;

      const template = `
        <div class="qual-row-card" data-index="${newIndex}" style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.5rem; position: relative;">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;">
            <h4 style="margin: 0; font-size: 1.05rem; font-family: var(--font-heading); color: var(--text-heading); display: flex; align-items: center; gap: 0.5rem;">
              <span class="badge" style="background: var(--accent); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem;">
                ${newIndex + 1}
              </span>
              Qualification Details
            </h4>
            <button type="button" class="btn btn-outline btn-sm remove-qual-btn" style="color: #ef4444; border-color: rgba(239,68,68,0.3); padding: 0.25rem 0.65rem;" title="Remove this qualification">
              <i class="fas fa-trash-alt"></i> Remove
            </button>
          </div>

          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem;">
            <div class="form-group">
              <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
                Qualification Level <span style="color: #ef4444;">*</span>
              </label>
              <select name="qualifications[${newIndex}][level]" class="form-control" required>
                <option value="">-- Select Level --</option>
                <option value="10th / SSC">10th / SSC</option>
                <option value="12th / HSC">12th / HSC</option>
                <option value="ITI / Certificate">ITI / Certificate</option>
                <option value="Diploma">Diploma</option>
                <option value="Graduate / Bachelor">Graduate / Bachelor</option>
                <option value="Post Graduate / Master">Post Graduate / Master</option>
                <option value="Doctorate / PhD">Doctorate / PhD</option>
              </select>
            </div>

            <div class="form-group">
              <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
                Degree / Stream / Trade <span style="color: #ef4444;">*</span>
              </label>
              <input type="text" name="qualifications[${newIndex}][stream_degree]" class="form-control" placeholder="e.g. Science, B.Com, Mechanical" required>
            </div>
          </div>

          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem;">
            <div class="form-group">
              <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
                Board / University Name <span style="color: #ef4444;">*</span>
              </label>
              <input type="text" name="qualifications[${newIndex}][board_university]" class="form-control" placeholder="e.g. Maharashtra State Board" required>
            </div>

            <div class="form-group">
              <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
                Passing Year <span style="color: #ef4444;">*</span>
              </label>
              <input type="number" name="qualifications[${newIndex}][passing_year]" class="form-control" placeholder="${new Date().getFullYear()}" min="1970" max="${new Date().getFullYear()}" required>
            </div>
          </div>

          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem;">
            <div class="form-group">
              <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
                Percentage / CGPA <span style="color: #ef4444;">*</span>
              </label>
              <input type="number" step="0.01" name="qualifications[${newIndex}][percentage]" class="form-control" placeholder="75.50" min="35" max="100" required>
            </div>

            <div class="form-group">
              <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
                Division / Grade
              </label>
              <select name="qualifications[${newIndex}][grade]" class="form-control">
                <option value="">-- Select Division --</option>
                <option value="Distinction">Distinction</option>
                <option value="First Class">First Class</option>
                <option value="Second Class">Second Class</option>
                <option value="Pass Class">Pass Class</option>
              </select>
            </div>

            <div class="form-group">
              <label class="form-label" style="font-weight: 600; font-size: 0.88rem; color: var(--text-heading); margin-bottom: 0.35rem; display: block;">
                Certificate (Max 2MB)
              </label>
              <input type="file" name="qualifications[${newIndex}][certificate]" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
            </div>
          </div>
        </div>
      `;

      container.insertAdjacentHTML('beforeend', template);
      updateRowNumbers();
    });
  }

  // Remove Row delegation
  if (container) {
    container.addEventListener('click', function(e) {
      const removeBtn = e.target.closest('.remove-qual-btn');
      if (removeBtn) {
        const rows = container.querySelectorAll('.qual-row-card');
        if (rows.length <= 1) {
          alert('At least one qualification is required.');
          return;
        }
        removeBtn.closest('.qual-row-card').remove();
        updateRowNumbers();
      }
    });
    updateRowNumbers();
  }
});
</script>
@endsection