@extends('layouts.jobseeker')

@section('title', 'Smart Job Matches | Candidate Portal')

@section('content')
<div class="jobseeker-matching-jobs">
  <!-- Top Banner -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
    <div>
      <h1 style="font-size: 1.75rem; font-family: var(--font-heading); margin-bottom: 0.25rem;">Recommended & Matching Vacancies</h1>
      <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">Vacancies matched to your educational qualifications, preferred districts, and career sectors.</p>
    </div>
    <div style="display: flex; gap: 0.75rem;">
      <a href="{{ route('jobs.index') }}" class="btn btn-outline" target="_blank">
        <i class="fas fa-search"></i> Browse All Vacancies
      </a>
    </div>
  </div>

  <!-- Profile Criteria Summary Card -->
  <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem 1.75rem; margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
    <div style="display: flex; gap: 2rem; flex-wrap: wrap;">
      <div>
        <span style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; display: block;">YOUR QUALIFICATION</span>
        <strong style="font-size: 0.95rem; color: #38bdf8;">
          <i class="fas fa-graduation-cap"></i> {{ $profile?->highestQualification()?->stream_degree ?: 'Not Specified' }} ({{ $profile?->highestQualification()?->level ?: 'Pending' }})
        </strong>
      </div>

      <div>
        <span style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; display: block;">PREFERRED DISTRICT</span>
        <strong style="font-size: 0.95rem; color: var(--text-primary);">
          <i class="fas fa-map-marker-alt"></i> {{ $profile?->preferred_district ?: ($profile?->district ?: 'Maharashtra') }}
        </strong>
      </div>

      <div>
        <span style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; display: block;">PREFERRED SECTOR</span>
        <strong style="font-size: 0.95rem; color: var(--text-primary);">
          <i class="fas fa-briefcase"></i> {{ $profile?->preferred_sector ?: 'Any Sector' }}
        </strong>
      </div>
    </div>

    <div>
      <a href="{{ route('jobseeker.wizard.step', 4) }}" class="btn btn-outline btn-sm" style="font-size: 0.82rem;">
        <i class="fas fa-sliders-h"></i> Update Preferences
      </a>
    </div>
  </div>

  <!-- Matched Vacancies Grid -->
  @if($matchedJobs->isEmpty())
    <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 4rem 2rem; text-align: center;">
      <div style="width: 64px; height: 64px; border-radius: 50%; background: var(--bg-surface); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 1rem;">
        <i class="fas fa-search-location"></i>
      </div>
      <h3 style="font-size: 1.25rem; margin-bottom: 0.5rem;">No direct matching vacancies found</h3>
      <p style="color: var(--text-muted); font-size: 0.9rem; max-width: 480px; margin: 0 auto 1.5rem;">Complete more qualification steps or expand your district and sector preferences in your MahaSwayam profile.</p>
      <a href="{{ route('jobs.index') }}" class="btn btn-primary btn-sm">Explore All Open Vacancies</a>
    </div>
  @else
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1.5rem;">
      @foreach($matchedJobs as $job)
        <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; transition: transform 0.2s, box-shadow 0.2s;">
          <!-- Top Row: Match Score & Category -->
          <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
            <span class="badge" style="background: rgba(255,255,255,0.06); color: var(--text-muted); font-size: 0.78rem;">
              {{ $job->category?->name ?? 'General' }}
            </span>

            <!-- Match Score Badge -->
            <div style="background: {{ $job->match_badge_color }}22; border: 1px solid {{ $job->match_badge_color }}66; color: {{ $job->match_badge_color }}; padding: 0.25rem 0.65rem; border-radius: 20px; font-weight: 800; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.35rem;">
              <i class="fas fa-bolt"></i> {{ $job->match_score }}% Match
            </div>
          </div>

          <!-- Job Details -->
          <div style="margin-bottom: 1.25rem;">
            <h3 style="font-size: 1.15rem; font-family: var(--font-heading); margin: 0 0 0.5rem 0;">
              <a href="{{ route('jobs.show', $job->slug) }}" target="_blank" style="color: var(--text-primary); text-decoration: none;">
                {{ $job->title }}
              </a>
            </h3>

            <div style="font-size: 0.88rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.85rem;">
              <span><i class="fas fa-building" style="width: 16px;"></i> {{ $job->location ?: 'Maharashtra Corporate Hub' }}</span>
              <span><i class="fas fa-map-marker-alt" style="width: 16px;"></i> {{ $job->district ?: 'Maharashtra' }} • {{ $job->job_type ?? 'Full Time' }}</span>
              @if($job->min_salary || $job->max_salary)
                <span style="color: #10b981; font-weight: 600;">
                  <i class="fas fa-indian-rupee-sign" style="width: 16px;"></i> ₹{{ number_format($job->min_salary) }} - ₹{{ number_format($job->max_salary) }}
                </span>
              @endif
            </div>

            <!-- Match Reasons Tags -->
            <div style="display: flex; flex-wrap: wrap; gap: 0.35rem;">
              @foreach($job->match_reasons as $reason)
                <span style="font-size: 0.72rem; background: var(--bg-surface); color: var(--text-muted); border: 1px solid var(--border-light); padding: 0.15rem 0.5rem; border-radius: 4px;">
                  <i class="fas fa-check" style="color: #10b981; font-size: 0.65rem; margin-right: 0.2rem;"></i> {{ $reason }}
                </span>
              @endforeach
            </div>
          </div>

          <!-- Action Buttons -->
          <div style="display: flex; gap: 0.5rem; border-top: 1px solid var(--border-light); padding-top: 1rem; margin-top: auto;">
            <a href="{{ route('jobs.show', $job->slug) }}" class="btn btn-primary btn-sm" style="flex: 1; text-align: center;">
              View & Apply <i class="fas fa-arrow-right" style="margin-left: 0.25rem;"></i>
            </a>
            <button type="button" class="btn btn-outline btn-sm" onclick="saveJob({{ $job->id }})" title="Save Vacancy">
              <i class="far fa-bookmark"></i>
            </button>
          </div>
        </div>
      @endforeach
    </div>
  @endif
</div>

<script>
function saveJob(jobId) {
  fetch(`/jobs/${jobId}/save`, {
    method: 'POST',
    headers: {
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
      'Accept': 'application/json'
    }
  }).then(r => r.json()).then(data => {
    alert(data.message || 'Job saved successfully');
  }).catch(() => {
    alert('Action completed.');
  });
}
</script>
@endsection