@extends('layouts.app')

@section('content')
<main id="mainContent">
  <!-- Stepper Breadcrumb / Banner -->
  <header class="page-header" style="padding: 2.5rem 0 1.5rem; background: var(--bg-surface); border-bottom: 1px solid var(--border-light);">
    <div class="container">
      <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
        <div>
          <span class="section-badge" style="margin-bottom: 0.4rem;">
            <i class="fas fa-landmark"></i> Maharashtra Employment Exchange Model (Mahaswayam)
          </span>
          <h1 style="font-size: 1.85rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin: 0;">
            Candidate Registration Wizard
          </h1>
          <p style="color: var(--text-light); font-size: 0.9rem; margin-top: 0.25rem;">
            Complete your official employment registration to access verified corporate vacancies and government placement drives.
          </p>
        </div>

        <div style="display: flex; gap: 0.75rem; align-items: center;">
          <button type="button" id="saveDraftBtn" class="btn btn-outline btn-sm" title="Save current progress without submitting">
            <i class="fas fa-save"></i> Save Draft
          </button>
          <a href="{{ route('jobseeker.dashboard') }}" class="btn btn-outline btn-sm">
            <i class="fas fa-arrow-left"></i> Dashboard
          </a>
        </div>
      </div>
    </div>
  </header>

  <!-- Multi-Step Stepper Navigation -->
  <section style="background: var(--bg-card); border-bottom: 1px solid var(--border-light); padding: 1.25rem 0;">
    <div class="container">
      <div class="wizard-stepper" style="display: flex; justify-content: space-between; align-items: center; position: relative; max-width: 900px; margin: 0 auto; padding: 0 1rem;">
        
        <!-- Step 1 -->
        <a href="{{ $profile->isStepAccessible(1) ? route('jobseeker.wizard.step', 1) : '#' }}" 
           class="step-item {{ $step === 1 ? 'active' : '' }} {{ $profile->step_completed >= 1 ? 'completed' : '' }}"
           style="text-decoration: none; text-align: center; z-index: 2; flex: 1; pointer-events: {{ $profile->isStepAccessible(1) ? 'auto' : 'none' }};">
          <div class="step-circle" style="width: 38px; height: 38px; border-radius: 50%; margin: 0 auto 0.4rem; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; 
               background: {{ $step === 1 ? 'var(--accent)' : ($profile->step_completed >= 1 ? 'var(--success)' : 'var(--bg-surface)') }}; 
               color: {{ ($step === 1 || $profile->step_completed >= 1) ? '#ffffff' : 'var(--text-light)' }};
               border: 2px solid {{ $step === 1 ? 'var(--accent)' : ($profile->step_completed >= 1 ? 'var(--success)' : 'var(--border-light)') }};">
            @if($profile->step_completed >= 1 && $step !== 1)
              <i class="fas fa-check"></i>
            @else
              1
            @endif
          </div>
          <div class="step-label" style="font-size: 0.78rem; font-weight: 600; color: {{ $step === 1 ? 'var(--accent)' : ($profile->step_completed >= 1 ? 'var(--text-heading)' : 'var(--text-light)') }};">
            Identity & Aadhaar
          </div>
        </a>

        <!-- Step 2 -->
        <a href="{{ $profile->isStepAccessible(2) ? route('jobseeker.wizard.step', 2) : '#' }}" 
           class="step-item {{ $step === 2 ? 'active' : '' }} {{ $profile->step_completed >= 2 ? 'completed' : '' }}"
           style="text-decoration: none; text-align: center; z-index: 2; flex: 1; pointer-events: {{ $profile->isStepAccessible(2) ? 'auto' : 'none' }};">
          <div class="step-circle" style="width: 38px; height: 38px; border-radius: 50%; margin: 0 auto 0.4rem; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; 
               background: {{ $step === 2 ? 'var(--accent)' : ($profile->step_completed >= 2 ? 'var(--success)' : 'var(--bg-surface)') }}; 
               color: {{ ($step === 2 || $profile->step_completed >= 2) ? '#ffffff' : 'var(--text-light)' }};
               border: 2px solid {{ $step === 2 ? 'var(--accent)' : ($profile->step_completed >= 2 ? 'var(--success)' : 'var(--border-light)') }};">
            @if($profile->step_completed >= 2 && $step !== 2)
              <i class="fas fa-check"></i>
            @else
              2
            @endif
          </div>
          <div class="step-label" style="font-size: 0.78rem; font-weight: 600; color: {{ $step === 2 ? 'var(--accent)' : ($profile->step_completed >= 2 ? 'var(--text-heading)' : 'var(--text-light)') }};">
            Personal Details
          </div>
        </a>

        <!-- Step 3 -->
        <a href="{{ $profile->isStepAccessible(3) ? route('jobseeker.wizard.step', 3) : '#' }}" 
           class="step-item {{ $step === 3 ? 'active' : '' }} {{ $profile->step_completed >= 3 ? 'completed' : '' }}"
           style="text-decoration: none; text-align: center; z-index: 2; flex: 1; pointer-events: {{ $profile->isStepAccessible(3) ? 'auto' : 'none' }};">
          <div class="step-circle" style="width: 38px; height: 38px; border-radius: 50%; margin: 0 auto 0.4rem; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; 
               background: {{ $step === 3 ? 'var(--accent)' : ($profile->step_completed >= 3 ? 'var(--success)' : 'var(--bg-surface)') }}; 
               color: {{ ($step === 3 || $profile->step_completed >= 3) ? '#ffffff' : 'var(--text-light)' }};
               border: 2px solid {{ $step === 3 ? 'var(--accent)' : ($profile->step_completed >= 3 ? 'var(--success)' : 'var(--border-light)') }};">
            @if($profile->step_completed >= 3 && $step !== 3)
              <i class="fas fa-check"></i>
            @else
              3
            @endif
          </div>
          <div class="step-label" style="font-size: 0.78rem; font-weight: 600; color: {{ $step === 3 ? 'var(--accent)' : ($profile->step_completed >= 3 ? 'var(--text-heading)' : 'var(--text-light)') }};">
            Qualifications
          </div>
        </a>

        <!-- Step 4 -->
        <a href="{{ $profile->isStepAccessible(4) ? route('jobseeker.wizard.step', 4) : '#' }}" 
           class="step-item {{ $step === 4 ? 'active' : '' }} {{ $profile->step_completed >= 4 ? 'completed' : '' }}"
           style="text-decoration: none; text-align: center; z-index: 2; flex: 1; pointer-events: {{ $profile->isStepAccessible(4) ? 'auto' : 'none' }};">
          <div class="step-circle" style="width: 38px; height: 38px; border-radius: 50%; margin: 0 auto 0.4rem; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; 
               background: {{ $step === 4 ? 'var(--accent)' : ($profile->step_completed >= 4 ? 'var(--success)' : 'var(--bg-surface)') }}; 
               color: {{ ($step === 4 || $profile->step_completed >= 4) ? '#ffffff' : 'var(--text-light)' }};
               border: 2px solid {{ $step === 4 ? 'var(--accent)' : ($profile->step_completed >= 4 ? 'var(--success)' : 'var(--border-light)') }};">
            @if($profile->step_completed >= 4 && $step !== 4)
              <i class="fas fa-check"></i>
            @else
              4
            @endif
          </div>
          <div class="step-label" style="font-size: 0.78rem; font-weight: 600; color: {{ $step === 4 ? 'var(--accent)' : ($profile->step_completed >= 4 ? 'var(--text-heading)' : 'var(--text-light)') }};">
            Residential & Preferences
          </div>
        </a>

        <!-- Step 5 -->
        <a href="{{ $profile->isStepAccessible(5) ? route('jobseeker.wizard.step', 5) : '#' }}" 
           class="step-item {{ $step === 5 ? 'active' : '' }} {{ $profile->is_submitted ? 'completed' : '' }}"
           style="text-decoration: none; text-align: center; z-index: 2; flex: 1; pointer-events: {{ $profile->isStepAccessible(5) ? 'auto' : 'none' }};">
          <div class="step-circle" style="width: 38px; height: 38px; border-radius: 50%; margin: 0 auto 0.4rem; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; 
               background: {{ $step === 5 ? 'var(--accent)' : ($profile->is_submitted ? 'var(--success)' : 'var(--bg-surface)') }}; 
               color: {{ ($step === 5 || $profile->is_submitted) ? '#ffffff' : 'var(--text-light)' }};
               border: 2px solid {{ $step === 5 ? 'var(--accent)' : ($profile->is_submitted ? 'var(--success)' : 'var(--border-light)') }};">
            @if($profile->is_submitted)
              <i class="fas fa-check"></i>
            @else
              5
            @endif
          </div>
          <div class="step-label" style="font-size: 0.78rem; font-weight: 600; color: {{ $step === 5 ? 'var(--accent)' : ($profile->is_submitted ? 'var(--text-heading)' : 'var(--text-light)') }};">
            Review & Submit
          </div>
        </a>

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

  <!-- Step Content Wrapper -->
  <section class="section" style="padding: 2.5rem 0;">
    <div class="container" style="max-width: 820px;">
      
      <!-- Notifications -->
      @if(session('success'))
        <div class="alert alert-success" style="padding: 1rem 1.25rem; background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success); border-radius: var(--radius-md); color: var(--success); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem;">
          <i class="fas fa-check-circle" style="font-size: 1.2rem;"></i>
          <span>{{ session('success') }}</span>
        </div>
      @endif

      @if(session('warning'))
        <div class="alert alert-warning" style="padding: 1rem 1.25rem; background: rgba(245, 158, 11, 0.1); border: 1px solid #f59e0b; border-radius: var(--radius-md); color: #f59e0b; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem;">
          <i class="fas fa-exclamation-triangle" style="font-size: 1.2rem;"></i>
          <span>{{ session('warning') }}</span>
        </div>
      @endif

      @if($errors->any())
        <div class="alert alert-danger" style="padding: 1rem 1.25rem; background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; border-radius: var(--radius-md); color: #ef4444; margin-bottom: 1.5rem;">
          <div style="font-weight: 600; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.5rem;">
            <i class="fas fa-times-circle"></i> Please resolve the following errors:
          </div>
          <ul style="margin: 0; padding-left: 1.5rem; font-size: 0.9rem;">
            @foreach($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif

      <!-- Step Main Card -->
      <div class="service-card reveal" style="padding: 2.5rem; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);">
        @yield('wizard-step')
      </div>

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

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Save Draft Handler
  const saveDraftBtn = document.getElementById('saveDraftBtn');
  if (saveDraftBtn) {
    saveDraftBtn.addEventListener('click', function () {
      const activeForm = document.querySelector('form.wizard-step-form');
      if (!activeForm) return;

      const formData = new FormData(activeForm);
      saveDraftBtn.disabled = true;
      saveDraftBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving Draft...';

      fetch('{{ route("jobseeker.wizard.draft") }}', {
        method: 'POST',
        headers: {
          'X-CSRF-TOKEN': '{{ csrf_token() }}',
          'Accept': 'application/json'
        },
        body: formData
      })
      .then(res => res.json())
      .then(data => {
        saveDraftBtn.disabled = false;
        saveDraftBtn.innerHTML = '<i class="fas fa-save"></i> Save Draft';
        if (typeof window.showToast === 'function') {
          window.showToast(data.message || 'Draft saved successfully.', 'success');
        } else {
          alert(data.message || 'Draft saved successfully.');
        }
      })
      .catch(err => {
        saveDraftBtn.disabled = false;
        saveDraftBtn.innerHTML = '<i class="fas fa-save"></i> Save Draft';
        if (typeof window.showToast === 'function') {
          window.showToast('Failed to save draft. Please try again.', 'error');
        } else {
          alert('Failed to save draft.');
        }
      });
    });
  }
});
</script>
@endsection