@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-clipboard-check"></i> Final Verification</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 5: Final Review & Submission
  </h2>
  <p style="color: var(--text-light); font-size: 0.92rem; margin: 0;">
    Please carefully review all the details you have provided across previous steps before final submission. Upon confirmation, your official Employment Registration Number will be generated.
  </p>
</div>

<!-- Section 1 Review: Aadhaar & Identity -->
<div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.5rem;">
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
    <h4 style="margin: 0; font-size: 1rem; color: var(--text-heading); font-family: var(--font-heading);">
      <i class="fas fa-shield-alt" style="color: var(--success); margin-right: 0.4rem;"></i> Step 1: Aadhaar Identity
    </h4>
    <a href="{{ route('jobseeker.wizard.step', 1) }}" class="btn btn-outline btn-sm" style="font-size: 0.78rem; padding: 0.2rem 0.5rem;">
      <i class="fas fa-edit"></i> Edit
    </a>
  </div>
  <div style="display: flex; gap: 2rem; flex-wrap: wrap; font-size: 0.9rem;">
    <div>
      <span style="color: var(--text-light); display: block; font-size: 0.8rem;">Aadhaar Number</span>
      <strong style="color: var(--text-heading); font-family: monospace; font-size: 1rem;">
        XXXX-XXXX-{{ $profile->aadhaar_last4 ?? '----' }}
      </strong>
    </div>
    <div>
      <span style="color: var(--text-light); display: block; font-size: 0.8rem;">Verification Status</span>
      <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); font-weight: 600;">
        <i class="fas fa-check-circle"></i> UIDAI Verhoeff Verified
      </span>
    </div>
  </div>
</div>

<!-- Section 2 Review: Personal Details & Photo -->
<div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.5rem;">
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
    <h4 style="margin: 0; font-size: 1rem; color: var(--text-heading); font-family: var(--font-heading);">
      <i class="fas fa-user" style="color: var(--accent); margin-right: 0.4rem;"></i> Step 2: Personal Details
    </h4>
    <a href="{{ route('jobseeker.wizard.step', 2) }}" class="btn btn-outline btn-sm" style="font-size: 0.78rem; padding: 0.2rem 0.5rem;">
      <i class="fas fa-edit"></i> Edit
    </a>
  </div>
  
  <div style="display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap;">
    <div style="width: 80px; height: 95px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-light); background: #eee; flex-shrink: 0;">
      @if($profile->photo_path)
        <img src="{{ asset('storage/' . $profile->photo_path) }}" alt="Candidate" style="width: 100%; height: 100%; object-fit: cover;">
      @else
        <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-light);">
          <i class="fas fa-user" style="font-size: 1.5rem;"></i>
        </div>
      @endif
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; flex: 1; font-size: 0.88rem;">
      <div>
        <span style="color: var(--text-light); display: block; font-size: 0.78rem;">Full Name</span>
        <strong style="color: var(--text-heading);">{{ $user->name }}</strong>
      </div>
      <div>
        <span style="color: var(--text-light); display: block; font-size: 0.78rem;">Date of Birth</span>
        <strong style="color: var(--text-heading);">{{ $profile->dob ? $profile->dob->format('d M Y') : 'N/A' }}</strong>
      </div>
      <div>
        <span style="color: var(--text-light); display: block; font-size: 0.78rem;">Gender / Marital Status</span>
        <strong style="color: var(--text-heading);">{{ ucfirst($profile->gender ?? 'N/A') }} • {{ $profile->marital_status ?? 'N/A' }}</strong>
      </div>
      <div>
        <span style="color: var(--text-light); display: block; font-size: 0.78rem;">Father's Name</span>
        <strong style="color: var(--text-heading);">{{ $profile->father_name ?? 'N/A' }}</strong>
      </div>
      <div>
        <span style="color: var(--text-light); display: block; font-size: 0.78rem;">Mother's Name</span>
        <strong style="color: var(--text-heading);">{{ $profile->mother_name ?? 'N/A' }}</strong>
      </div>
      <div>
        <span style="color: var(--text-light); display: block; font-size: 0.78rem;">Category / PwBD</span>
        <strong style="color: var(--text-heading);">
          {{ $profile->category ?? 'General' }}
          @if($profile->is_disabled)
            <span class="badge" style="background: rgba(239,68,68,0.15); color: #ef4444; margin-left: 0.35rem;">PwBD: {{ $profile->disability_percentage }}%</span>
          @endif
        </strong>
      </div>
    </div>
  </div>
</div>

<!-- Section 3 Review: Qualifications -->
<div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.5rem;">
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
    <h4 style="margin: 0; font-size: 1rem; color: var(--text-heading); font-family: var(--font-heading);">
      <i class="fas fa-graduation-cap" style="color: var(--accent); margin-right: 0.4rem;"></i> Step 3: Educational Qualifications ({{ $qualifications->count() }})
    </h4>
    <a href="{{ route('jobseeker.wizard.step', 3) }}" class="btn btn-outline btn-sm" style="font-size: 0.78rem; padding: 0.2rem 0.5rem;">
      <i class="fas fa-edit"></i> Edit
    </a>
  </div>

  <div style="overflow-x: auto;">
    <table style="width: 100%; border-collapse: collapse; font-size: 0.88rem;">
      <thead>
        <tr style="border-bottom: 2px solid var(--border-light); text-align: left; color: var(--text-light); font-size: 0.8rem;">
          <th style="padding: 0.5rem;">Level</th>
          <th style="padding: 0.5rem;">Stream / Degree</th>
          <th style="padding: 0.5rem;">Board / University</th>
          <th style="padding: 0.5rem;">Year</th>
          <th style="padding: 0.5rem;">Percentage</th>
          <th style="padding: 0.5rem;">Certificate</th>
        </tr>
      </thead>
      <tbody>
        @forelse($qualifications as $q)
          <tr style="border-bottom: 1px solid var(--border-light);">
            <td style="padding: 0.5rem; font-weight: 600; color: var(--text-heading);">{{ $q->level }}</td>
            <td style="padding: 0.5rem;">{{ $q->stream_degree }}</td>
            <td style="padding: 0.5rem;">{{ $q->board_university }}</td>
            <td style="padding: 0.5rem;">{{ $q->passing_year }}</td>
            <td style="padding: 0.5rem; font-weight: 600; color: var(--accent);">{{ $q->percentage }}%</td>
            <td style="padding: 0.5rem;">
              @if($q->certificate_path)
                <a href="{{ asset('storage/' . $q->certificate_path) }}" target="_blank" style="color: var(--accent); font-size: 0.8rem;">
                  <i class="fas fa-file-alt"></i> View
                </a>
              @else
                <span style="color: var(--text-light); font-size: 0.8rem;">Not uploaded</span>
              @endif
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="6" style="padding: 1rem; text-align: center; color: var(--text-light);">No qualifications entered yet.</td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

<!-- Section 4 Review: Address & Placement Preferences -->
<div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 2rem;">
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
    <h4 style="margin: 0; font-size: 1rem; color: var(--text-heading); font-family: var(--font-heading);">
      <i class="fas fa-map-marked-alt" style="color: var(--accent); margin-right: 0.4rem;"></i> Step 4: Domicile & Preferences
    </h4>
    <a href="{{ route('jobseeker.wizard.step', 4) }}" class="btn btn-outline btn-sm" style="font-size: 0.78rem; padding: 0.2rem 0.5rem;">
      <i class="fas fa-edit"></i> Edit
    </a>
  </div>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; font-size: 0.88rem;">
    <div>
      <span style="color: var(--text-light); display: block; font-size: 0.78rem;">Residential Address</span>
      <strong style="color: var(--text-heading);">{{ $profile->address_line ?? 'N/A' }}</strong>
    </div>
    <div>
      <span style="color: var(--text-light); display: block; font-size: 0.78rem;">District & Taluka</span>
      <strong style="color: var(--text-heading);">{{ $profile->district ?? 'N/A' }} ({{ $profile->taluka ?? 'N/A' }})</strong>
    </div>
    <div>
      <span style="color: var(--text-light); display: block; font-size: 0.78rem;">PIN Code</span>
      <strong style="color: var(--text-heading);">{{ $profile->pincode ?? 'N/A' }}</strong>
    </div>
    <div>
      <span style="color: var(--text-light); display: block; font-size: 0.78rem;">Preferred Working District</span>
      <strong style="color: var(--text-heading);">{{ $profile->preferred_district ?? 'Anywhere in Maharashtra' }}</strong>
    </div>
    <div>
      <span style="color: var(--text-light); display: block; font-size: 0.78rem;">Preferred Sector</span>
      <strong style="color: var(--text-heading);">{{ $profile->preferred_sector ?? 'N/A' }}</strong>
    </div>
    <div>
      <span style="color: var(--text-light); display: block; font-size: 0.78rem;">Expected Monthly Salary</span>
      <strong style="color: var(--text-heading);">
        @if($profile->expected_salary_min || $profile->expected_salary_max)
          ₹{{ number_format($profile->expected_salary_min ?? 0) }} - ₹{{ number_format($profile->expected_salary_max ?? 0) }}
        @else
          Negotiable
        @endif
      </strong>
    </div>
  </div>
</div>

<form action="{{ route('jobseeker.wizard.save-step5') }}" method="POST" class="wizard-step-form" id="step5Form">
  @csrf

  <!-- Statutory Applicant Declaration Box -->
  <div style="background: rgba(0, 212, 255, 0.05); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 2rem;">
    <div style="display: flex; align-items: flex-start; gap: 0.85rem;">
      <input type="checkbox" name="declaration" id="declaration" value="1" required style="margin-top: 0.25rem; width: 18px; height: 18px; accent-color: var(--accent);">
      <label for="declaration" style="font-size: 0.88rem; color: var(--text-body); line-height: 1.5; margin: 0; cursor: pointer;">
        <strong>Statutory Declaration:</strong> I hereby solemnly declare that all statements made and certificates uploaded in this application are true, genuine, complete and correct to the best of my knowledge and belief. In the event of any information being found false, fraudulent or incorrect at any stage, my employment exchange registration shall be liable to immediate cancellation and revocation under applicable Maharashtra state employment regulations.
      </label>
    </div>
    @error('declaration')
      <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.5rem; font-weight: 500;">
        <i class="fas fa-exclamation-circle"></i> {{ $message }}
      </span>
    @enderror
  </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', 4) }}" class="btn btn-outline">
      <i class="fas fa-arrow-left"></i> Previous (Address)
    </a>
    <button type="submit" class="btn btn-primary" id="submitStep5Btn" style="padding: 0.75rem 1.75rem; font-size: 1.05rem;">
      <i class="fas fa-check-circle"></i> Complete Registration & Generate Card
    </button>
  </div>
</form>
@endsection