@props(['job'])

@php
  $skills = is_array($job->skills) ? $job->skills : (json_decode($job->skills, true) ?: []);
  $skillString = implode(' ', array_map('strtolower', $skills));
  $categorySlug = $job->category ? strtolower($job->category->slug) : 'general';
  $locationKey = strtolower($job->city ?: ($job->district ?: $job->location));
  $user = auth()->user();
  $hasSaved = $user && $user->isJobseeker() ? $user->hasSavedJob($job->id) : false;
  $hasApplied = $user && $user->isJobseeker() ? $user->hasAppliedTo($job->id) : false;
@endphp

<article class="job-card reveal" 
         data-title="{{ $job->title }}" 
         data-category="{{ $categorySlug }}" 
         data-location="{{ $locationKey }}" 
         data-district="{{ strtolower($job->district ?? '') }}"
         data-qualification="{{ strtolower($job->qualification_required ?? '') }}"
         data-sector="{{ strtolower($job->sector ?? '') }}"
         data-type="{{ strtolower($job->job_type) }}" 
         data-tags="{{ strtolower($job->title) }} {{ $skillString }} {{ strtolower($job->district ?? '') }} {{ strtolower($job->qualification_required ?? '') }}">
  <div class="job-card-details">
    <div class="job-card-header" style="display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap;">
      <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
        <h3 class="job-card-title" style="margin: 0;">
          <a href="{{ route('jobs.show', $job->slug) }}" style="color: inherit; text-decoration: none;">
            {{ $job->title }}
          </a>
        </h3>
        <span class="badge badge-success">{{ ucfirst($job->job_type) }}</span>
        @if($job->category)
          <span class="badge badge-primary">{{ $job->category->name }}</span>
        @endif
        @if($job->district)
          <span class="badge" style="background: rgba(0, 102, 255, 0.1); color: var(--accent);">
            <i class="fas fa-map-pin"></i> {{ $job->district }}
          </span>
        @endif
        @if($job->is_scheme_vacancy)
          <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); font-weight: 600;">
            <i class="fas fa-landmark"></i> MahaSwayam Scheme
          </span>
        @endif
        @if($job->is_featured)
          <span class="badge" style="background: rgba(255, 107, 53, 0.15); color: var(--accent-warm);">
            <i class="fas fa-bolt"></i> Featured
          </span>
        @endif
      </div>

      @auth
        @if($user->isJobseeker())
          <button type="button" 
                  class="btn-save-job-toggle" 
                  data-job-id="{{ $job->id }}" 
                  title="{{ $hasSaved ? 'Remove Bookmark' : 'Save Vacancy' }}"
                  style="background: transparent; border: 1px solid var(--border-light); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: {{ $hasSaved ? 'var(--accent)' : 'var(--text-light)' }}; transition: all 0.2s ease;">
            <i class="{{ $hasSaved ? 'fas fa-bookmark' : 'far fa-bookmark' }}" style="font-size: 0.95rem;"></i>
          </button>
        @endif
      @endauth
    </div>

    <div class="job-card-meta" style="margin-top: 0.5rem;">
      <span><i class="fas fa-map-marker-alt"></i> {{ $job->location }}</span>
      <span><i class="fas fa-briefcase"></i> {{ $job->experience_level }}</span>
      @if($job->qualification_required)
        <span><i class="fas fa-graduation-cap"></i> {{ $job->qualification_required }}</span>
      @endif
      @if($job->salary_display)
        <span><i class="fas fa-money-bill-wave"></i> {{ $job->salary_display }}</span>
      @endif
      <span><i class="far fa-clock"></i> {{ $job->created_at ? $job->created_at->diffForHumans() : 'Recently' }}</span>
    </div>

    <p class="job-card-desc">
      {{ Str::limit(strip_tags($job->description), 160) }}
    </p>

    @if(count($skills) > 0)
      <div class="job-tags">
        @foreach(array_slice($skills, 0, 5) as $skill)
          <span class="job-tag">{{ $skill }}</span>
        @endforeach
      </div>
    @endif
  </div>

  <div style="display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; min-width: 140px; justify-content: center;">
    @if($hasApplied)
      <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); font-size: 0.82rem; padding: 0.45rem 0.8rem; border-radius: 999px;">
        <i class="fas fa-check-circle"></i> Applied
      </span>
      <a href="{{ route('jobs.show', $job->slug) }}" class="btn btn-outline btn-sm" style="font-size: 0.8rem; padding: 0.4rem 0.8rem;">
        Track Status
      </a>
    @else
      <a href="{{ route('jobs.show', $job->slug) }}" class="btn btn-primary btn-sm">
        <i class="fas fa-paper-plane"></i> Apply Now
      </a>
      <a href="{{ route('jobs.show', $job->slug) }}" class="btn btn-outline btn-sm" style="font-size: 0.8rem; padding: 0.4rem 0.8rem;">
        View Details
      </a>
    @endif
  </div>
</article>