@extends('layouts.jobseeker')

@section('content')
<main id="mainContent">
  <!-- Portal Header Banner -->
  <header class="page-header" style="padding: 3rem 0 2rem; background: var(--bg-surface); border-bottom: 1px solid var(--border-light);">
    <div class="container">
      <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem;" class="reveal">
        <div>
          <span class="section-badge" style="margin-bottom: 0.5rem;">
            <i class="fas fa-user-circle"></i> Candidate Portal • Maharashtra Employment Exchange Model
          </span>
          <h1 style="font-size: 2rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin-bottom: 0.35rem;">
            Welcome, {{ $user->name }}
          </h1>
          <p style="color: var(--text-light); font-size: 0.95rem; margin: 0;">
            Registration ID: <strong style="color: var(--accent); letter-spacing: 0.5px;">{{ $user->registration_id ?? 'PENDING' }}</strong>
            <span style="margin: 0 0.5rem; color: var(--border-light);">|</span>
            Validity: <span>{{ $user->expiry_date ? $user->expiry_date->format('d M Y') : '1 Year' }}</span>
            @if($user->isExpired())
              <span class="badge" style="background: rgba(239, 68, 68, 0.15); color: #ef4444; margin-left: 0.5rem;">Expired</span>
            @else
              <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); margin-left: 0.5rem;">Active</span>
            @endif
          </p>
        </div>

        <div style="display: flex; gap: 0.75rem; align-items: center;">
          <a href="{{ route('jobs.index') }}" class="btn btn-primary">
            <i class="fas fa-search"></i> Search Open Vacancies
          </a>
          <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" class="btn btn-outline" title="Log Out">
              <i class="fas fa-sign-out-alt"></i>
            </button>
          </form>
        </div>
      </div>
    </div>
  </header>

  <!-- Profile Completion Bar -->
  <section style="background: var(--bg-card); border-bottom: 1px solid var(--border-light); padding: 1.25rem 0;">
    <div class="container">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
        <span style="font-size: 0.9rem; font-weight: 600; color: var(--text-heading);">
          <i class="fas fa-tasks" style="color: var(--accent); margin-right: 0.4rem;"></i> Profile Completion: {{ $user->profile_completion ?? 20 }}%
        </span>
        <span style="font-size: 0.82rem; color: var(--text-light);">
          @if(($user->profile_completion ?? 20) < 80)
            <span style="color: #ef4444; font-weight: 600;"><i class="fas fa-exclamation-triangle"></i> Complete at least 80% to submit direct applications</span>
          @else
            <span style="color: var(--success); font-weight: 600;"><i class="fas fa-check-circle"></i> Eligible for instant 1-click application</span>
          @endif
        </span>
      </div>
      <div style="width: 100%; height: 8px; background: var(--bg-surface); border-radius: 999px; overflow: hidden;">
        <div style="width: {{ $user->profile_completion ?? 20 }}%; height: 100%; background: linear-gradient(90deg, var(--accent), #00D4FF); border-radius: 999px; transition: width 0.5s ease;"></div>
      </div>
    </div>
  </section>

  <!-- Annual Renewal Banner (If Eligible or Expired) -->
  @if($user->isRenewalEligible())
    <section style="background: {{ $user->isExpired() ? 'rgba(239, 68, 68, 0.08)' : 'rgba(245, 158, 11, 0.08)' }}; border-bottom: 1px solid {{ $user->isExpired() ? 'rgba(239, 68, 68, 0.25)' : 'rgba(245, 158, 11, 0.25)' }}; padding: 1.25rem 0;">
      <div class="container">
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
          <div style="display: flex; gap: 1rem; align-items: center;">
            <div style="width: 36px; height: 36px; border-radius: 50%; background: {{ $user->isExpired() ? 'rgba(239, 68, 68, 0.15)' : 'rgba(245, 158, 11, 0.15)' }}; color: {{ $user->isExpired() ? '#ef4444' : '#f59e0b' }}; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;">
              <i class="fas {{ $user->isExpired() ? 'fa-exclamation-triangle' : 'fa-calendar-alt' }}"></i>
            </div>
            <div>
              <strong style="color: {{ $user->isExpired() ? '#b91c1c' : '#b45309' }}; font-size: 0.95rem;">
                {{ $user->isExpired() ? 'Registration Expired' : 'Annual Renewal Window Open' }}
              </strong>
              <p style="margin: 0; font-size: 0.85rem; color: var(--text-body);">
                @if($user->isExpired())
                  Your candidate registration expired on {{ $user->expiry_date?->format('d M Y') }}. Renew today to restore 1-click apply eligibility.
                @else
                  Your registration expires in {{ $user->daysUntilExpiry() }} days ({{ $user->expiry_date?->format('d M Y') }}). Re-verify your credentials to extend for 1 year.
                @endif
              </p>
            </div>
          </div>
          <a href="{{ route('jobseeker.renew') }}" class="btn btn-primary btn-sm">
            <i class="fas fa-sync-alt"></i> Renew Registration Now
          </a>
        </div>
      </div>
    </section>
  @endif

  <!-- Portal Dashboard Content -->
  <section class="section" style="padding: 2.5rem 0;">
    <div class="container">
      
      <!-- Metrics Grid -->
      <div class="stats-grid" style="margin-bottom: 2.5rem;">
        <a href="{{ route('jobseeker.applications.index') }}" class="stat-card reveal" style="text-decoration: none; color: inherit; display: block; transition: transform 0.2s ease;">
          <div class="stat-icon"><i class="fas fa-paper-plane"></i></div>
          <div class="stat-number"><span>{{ $applicationsCount ?? 0 }}</span></div>
          <p class="stat-label">Applications Submitted</p>
        </a>

        <a href="{{ route('jobseeker.saved-jobs') }}" class="stat-card reveal" style="text-decoration: none; color: inherit; display: block; transition: transform 0.2s ease;">
          <div class="stat-icon"><i class="fas fa-bookmark"></i></div>
          <div class="stat-number"><span>{{ $savedJobsCount ?? 0 }}</span></div>
          <p class="stat-label">Saved Job Vacancies</p>
        </a>

        <div class="stat-card reveal">
          <div class="stat-icon"><i class="fas fa-calendar-check"></i></div>
          <div class="stat-number">
            <span>{{ $user->expiry_date ? now()->diffInDays($user->expiry_date, false) : 365 }}</span>
          </div>
          <p class="stat-label">Days Until Renewal</p>
        </div>

        <a href="{{ route('jobseeker.registration-card') }}" class="stat-card reveal" style="text-decoration: none; color: inherit; display: block; transition: transform 0.2s ease;">
          <div class="stat-icon"><i class="fas fa-id-card"></i></div>
          <div class="stat-number"><span style="font-size: 1.4rem;">VIEW</span></div>
          <p class="stat-label">Employment Card</p>
        </a>
      </div>

      <!-- Quick Action Cards Grid -->
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-bottom: 3rem;">
        
        <!-- Action 1: Multi-Step Registration Wizard -->
        <div class="service-card reveal" style="padding: 1.75rem;">
          <div class="service-icon-box" style="margin-bottom: 1rem;">
            <i class="fas fa-user-edit"></i>
          </div>
          <h3 class="service-title" style="font-size: 1.2rem; margin-bottom: 0.5rem;">MahaSwayam Registration Wizard</h3>
          <p class="service-desc" style="font-size: 0.9rem; margin-bottom: 1.25rem;">
            Complete your 5-step government-style profile: Aadhaar verification, personal details, educational qualifications, certificates, and district preferences.
          </p>
          <a href="{{ route('jobseeker.wizard') }}" class="btn btn-primary btn-sm">
            <i class="fas fa-edit"></i> {{ ($user->profile_completion ?? 0) >= 100 ? 'View / Edit Profile' : 'Resume Profile Wizard' }} <i class="fas fa-arrow-right"></i>
          </a>
        </div>

        <!-- Action 2: Printable Registration Card -->
        <div class="service-card reveal" style="padding: 1.75rem;">
          <div class="service-icon-box" style="margin-bottom: 1rem;">
            <i class="fas fa-address-card"></i>
          </div>
          <h3 class="service-title" style="font-size: 1.2rem; margin-bottom: 0.5rem;">Employment Registration Card</h3>
          <p class="service-desc" style="font-size: 0.9rem; margin-bottom: 1.25rem;">
            Download and print your official registration certificate bearing your unique Registration ID ({{ $user->registration_id ?? 'PENDING' }}), validity date, and QR code.
          </p>
          <a href="{{ route('jobseeker.registration-card') }}" class="btn btn-outline btn-sm">
            <i class="fas fa-print"></i> View / Print Registration Card
          </a>
        </div>

        <!-- Action 3: Annual Renewal -->
        <div class="service-card reveal" style="padding: 1.75rem;">
          <div class="service-icon-box" style="margin-bottom: 1rem;">
            <i class="fas fa-sync-alt"></i>
          </div>
          <h3 class="service-title" style="font-size: 1.2rem; margin-bottom: 0.5rem;">Annual Registration Renewal</h3>
          <p class="service-desc" style="font-size: 0.9rem; margin-bottom: 1.25rem;">
            Registrations remain valid for 1 year. Renewals can be initiated within 60 days before expiry or post-expiry to update credentials and keep applications active.
          </p>
          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
            @if($user->isRenewalEligible())
              <a href="{{ route('jobseeker.renew') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-sync-alt"></i> Renew Now
              </a>
            @else
              <a href="{{ route('jobseeker.renew') }}" class="btn btn-outline btn-sm">
                Check Status ({{ $user->daysUntilExpiry() }}d)
              </a>
            @endif
            <a href="{{ route('jobseeker.renew.history') }}" class="btn btn-outline btn-sm">
              <i class="fas fa-history"></i> History
            </a>
          </div>
        </div>

      </div>

      <!-- Recent Applications Status Section -->
      @if(isset($recentApplications) && count($recentApplications) > 0)
        <div class="reveal" style="margin-bottom: 3rem;">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;">
            <div>
              <span class="section-badge"><i class="fas fa-stream"></i> Real-Time Status</span>
              <h2 style="font-size: 1.4rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin-top: 0.25rem;">
                Recent Application Tracking
              </h2>
            </div>
            <a href="{{ route('jobseeker.applications.index') }}" class="btn btn-outline btn-sm">
              View All Applications <i class="fas fa-arrow-right"></i>
            </a>
          </div>

          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem;">
            @foreach($recentApplications as $app)
              <div class="card" style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between;">
                <div>
                  <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; gap: 0.5rem;">
                    <span style="font-family: monospace; font-size: 0.8rem; color: var(--accent);">#ZH-APP-{{ $app->id }}</span>
                    <span class="badge {{ $app->statusBadgeClass() }}" style="font-size: 0.78rem;">
                      {{ $app->statusLabel() }}
                    </span>
                  </div>
                  <h4 style="font-size: 1.05rem; margin-bottom: 0.25rem; color: var(--text-heading);">
                    {{ $app->applied_role }}
                  </h4>
                  <p style="font-size: 0.82rem; color: var(--text-light); margin: 0 0 1rem 0;">
                    {{ $app->job?->employer?->name ?? 'Zhelhire Corporate Client' }} • {{ $app->created_at->format('d M Y') }}
                  </p>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-light); padding-top: 0.75rem;">
                  <span style="font-size: 0.8rem; color: var(--text-muted);">
                    @if($app->status === 'interview_scheduled' && $app->interview_scheduled_at)
                      <i class="fas fa-calendar-alt text-primary"></i> {{ $app->interview_scheduled_at->format('d M, h:i A') }}
                    @else
                      <i class="fas fa-clock"></i> Updated {{ $app->updated_at->diffForHumans() }}
                    @endif
                  </span>
                  <a href="{{ route('jobseeker.applications.show', $app->id) }}" class="btn btn-outline btn-sm" style="font-size: 0.78rem; padding: 0.3rem 0.65rem;">
                    Timeline <i class="fas fa-chevron-right"></i>
                  </a>
                </div>
              </div>
            @endforeach
          </div>
        </div>
      @endif

      <!-- Recommended Jobs Section -->
      @if(isset($recommendedJobs) && count($recommendedJobs) > 0)
        <div class="reveal" style="margin-top: 2rem;">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
            <div>
              <span class="section-badge"><i class="fas fa-sparkles"></i> AI Matching</span>
              <h2 style="font-size: 1.5rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin-top: 0.25rem;">
                Recommended Openings for You
              </h2>
            </div>
            <a href="{{ route('jobs.index') }}" class="btn btn-outline btn-sm">View All Jobs <i class="fas fa-arrow-right"></i></a>
          </div>

          <div class="job-cards-list">
            @foreach($recommendedJobs as $job)
              <x-job-card :job="$job" />
            @endforeach
          </div>
        </div>
      @endif

    </div>
  </section>
</main>
@endsection