@extends('layouts.app')

@section('content')
<main id="mainContent">
  <!-- Page Hero -->
  <section class="page-hero">
    <div class="container">
      <nav class="breadcrumbs" aria-label="Breadcrumb">
        <a href="{{ route('home') }}">Home</a>
        <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
        <a href="{{ route('jobs.index') }}">Careers</a>
        <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
        <span>{{ $job->title }}</span>
      </nav>
      
      <div style="max-width: 860px; margin: 0 auto; text-align: left;">
        <div style="display: flex; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center;">
          <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 }} 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 Government 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 Opening
            </span>
          @endif
        </div>

        <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;">
          <h1 style="font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.25;">{{ $job->title }}</h1>
          
          @auth
            @if(auth()->user()->isJobseeker())
              <button type="button" 
                      id="jobDetailBookmarkBtn"
                      class="btn-save-job-toggle" 
                      data-job-id="{{ $job->id }}" 
                      title="{{ $hasSaved ? 'Remove Bookmark' : 'Save Vacancy' }}"
                      style="background: var(--bg-card); border: 1px solid var(--border-light); width: 44px; height: 44px; 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: 1.2rem;"></i>
              </button>
            @endif
          @endauth
        </div>

        <div class="job-card-meta" style="font-size: 0.95rem; margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem;">
          <span><i class="fas fa-map-marker-alt" style="color: var(--accent);"></i> {{ $job->location }}</span>
          <span><i class="fas fa-briefcase" style="color: var(--accent);"></i> {{ $job->experience_level }}</span>
          @if($job->qualification_required)
            <span><i class="fas fa-graduation-cap" style="color: var(--accent);"></i> {{ $job->qualification_required }}</span>
          @endif
          @if($job->salary_display)
            <span><i class="fas fa-money-bill-wave" style="color: var(--accent);"></i> {{ $job->salary_display }}</span>
          @endif
          <span><i class="far fa-clock" style="color: var(--accent);"></i> Posted {{ $job->created_at ? $job->created_at->diffForHumans() : 'recently' }}</span>
        </div>

        <!-- Application Action Bar on Hero -->
        <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
          @guest
            <a href="{{ route('login', ['redirect' => url()->full()]) }}" class="btn btn-primary btn-lg">
              <i class="fas fa-sign-in-alt"></i> Log in to Apply for this Vacancy
            </a>
            <a href="{{ route('register') }}" class="btn btn-outline btn-lg">
              <i class="fas fa-user-plus"></i> Register as Jobseeker
            </a>
          @else
            @if(auth()->user()->isJobseeker())
              @if($hasApplied)
                <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
                  <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); font-size: 0.95rem; padding: 0.6rem 1.2rem; border-radius: 999px;">
                    <i class="fas fa-check-circle"></i> Applied on {{ $userApplication->created_at->format('d M Y') }} ({{ $userApplication->statusLabel() }})
                  </span>
                  <a href="{{ route('jobseeker.applications.show', $userApplication->id) }}" class="btn btn-outline">
                    <i class="fas fa-history"></i> View Application Timeline
                  </a>
                </div>
              @elseif(!$isEligible)
                @if($user->isExpired())
                  <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); padding: 0.75rem 1.25rem; border-radius: var(--radius-md); color: #ef4444;">
                    <i class="fas fa-exclamation-circle"></i> Your registration expired on {{ $user->expiry_date?->format('d M Y') }}. Please renew to apply.
                  </div>
                @else
                  <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
                    <a href="{{ route('jobseeker.wizard') }}" class="btn btn-primary">
                      <i class="fas fa-user-check"></i> Complete Profile ({{ $profileCompletion }}%) to Apply
                    </a>
                    <span style="font-size: 0.85rem; color: var(--text-light);">
                      Minimum 80% completion required by Employment Exchange
                    </span>
                  </div>
                @endif
              @else
                <button type="button" class="btn btn-primary btn-lg" onclick="document.getElementById('oneClickApplyModal').style.display='flex'">
                  <i class="fas fa-paper-plane"></i> 1-Click Apply with Profile
                </button>
              @endif
            @else
              <span class="badge" style="background: rgba(0, 102, 255, 0.1); color: var(--accent); padding: 0.6rem 1rem;">
                <i class="fas fa-info-circle"></i> Logged in as {{ ucfirst(auth()->user()->role) }} Console
              </span>
            @endif
          @endguest
        </div>

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

  <!-- Job Details Content Section -->
  <section class="section">
    <div class="container">
      <div class="hero-grid" style="align-items: flex-start; gap: 3.5rem;">
        <!-- Left: Full Details -->
        <div>
          <h2 style="font-size: 1.5rem; margin-bottom: 1rem;">Role Overview &amp; Mandate</h2>
          <div style="font-size: 1rem; line-height: 1.8; color: var(--text-main); margin-bottom: 2rem;">
            {!! nl2br(e($job->description)) !!}
          </div>

          @php
            $responsibilities = is_array($job->responsibilities) ? $job->responsibilities : (json_decode($job->responsibilities, true) ?: []);
            $requirements = is_array($job->requirements) ? $job->requirements : (json_decode($job->requirements, true) ?: []);
            $skills = is_array($job->skills) ? $job->skills : (json_decode($job->skills, true) ?: []);
          @endphp

          @if(count($responsibilities) > 0)
            <h3 style="font-size: 1.3rem; margin-bottom: 1rem;">Key Responsibilities</h3>
            <ul style="list-style: none; padding: 0; margin-bottom: 2rem;">
              @foreach($responsibilities as $resp)
                <li style="margin-bottom: 0.75rem; display: flex; align-items: flex-start; gap: 0.75rem;">
                  <i class="fas fa-check" style="color: var(--accent); margin-top: 0.25rem;"></i>
                  <span>{{ $resp }}</span>
                </li>
              @endforeach
            </ul>
          @endif

          @if(count($requirements) > 0)
            <h3 style="font-size: 1.3rem; margin-bottom: 1rem;">Candidate Requirements &amp; Qualifications</h3>
            <ul style="list-style: none; padding: 0; margin-bottom: 2rem;">
              @foreach($requirements as $req)
                <li style="margin-bottom: 0.75rem; display: flex; align-items: flex-start; gap: 0.75rem;">
                  <i class="fas fa-certificate" style="color: var(--success); margin-top: 0.25rem;"></i>
                  <span>{{ $req }}</span>
                </li>
              @endforeach
            </ul>
          @endif

          @if(count($skills) > 0)
            <h3 style="font-size: 1.3rem; margin-bottom: 1rem;">Desired Tech Stack &amp; Competencies</h3>
            <div class="job-tags" style="margin-bottom: 3rem;">
              @foreach($skills as $skill)
                <span class="job-tag" style="padding: 0.4rem 0.85rem; font-size: 0.9rem;">{{ $skill }}</span>
              @endforeach
            </div>
          @endif

          <!-- Bottom Application Callout -->
          <div style="background: var(--bg-surface); padding: 2.5rem; border-radius: var(--radius-xl); border: 1px solid var(--border-light); text-align: center;">
            <h3 style="font-size: 1.5rem; margin-bottom: 0.5rem;">Ready to Take the Next Step?</h3>
            <p style="color: var(--text-muted); margin-bottom: 1.5rem;">Applications are screened directly by verified employer HR teams and the Maharashtra Employment Exchange.</p>
            
            @guest
              <a href="{{ route('login', ['redirect' => url()->full()]) }}" class="btn btn-primary btn-lg">
                <i class="fas fa-sign-in-alt"></i> Log in to Apply
              </a>
            @else
              @if(auth()->user()->isJobseeker())
                @if($hasApplied)
                  <a href="{{ route('jobseeker.applications.show', $userApplication->id) }}" class="btn btn-primary btn-lg">
                    <i class="fas fa-history"></i> View Application Status Timeline
                  </a>
                @elseif($isEligible)
                  <button type="button" class="btn btn-primary btn-lg" onclick="document.getElementById('oneClickApplyModal').style.display='flex'">
                    <i class="fas fa-paper-plane"></i> 1-Click Apply with Profile
                  </button>
                @else
                  <a href="{{ route('jobseeker.wizard') }}" class="btn btn-primary btn-lg">
                    <i class="fas fa-user-edit"></i> Complete Profile to Apply ({{ $profileCompletion }}%)
                  </a>
                @endif
              @endif
            @endguest
          </div>
        </div>

        <!-- Right: Summary Sidebar -->
        <aside style="background: var(--bg-surface); padding: 2rem; border-radius: var(--radius-xl); border: 1px solid var(--border-light);">
          <h3 style="font-size: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-light);">
            Position Snapshot
          </h3>

          <div style="display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem;">
            <div>
              <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Department</span>
              <strong style="color: var(--text-main);">{{ $job->category ? $job->category->name : 'General' }}</strong>
            </div>

            @if($job->sector)
              <div>
                <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Sector</span>
                <strong style="color: var(--text-main);">{{ $job->sector }}</strong>
              </div>
            @endif

            <div>
              <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Placement Location</span>
              <strong style="color: var(--text-main);">{{ $job->location }}</strong>
            </div>

            <div>
              <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Experience</span>
              <strong style="color: var(--text-main);">{{ $job->experience_level }}</strong>
            </div>

            @if($job->qualification_required)
              <div>
                <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Statutory Qualification</span>
                <strong style="color: var(--accent);">{{ $job->qualification_required }}</strong>
              </div>
            @endif

            @if($job->vacancies_count > 1)
              <div>
                <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Open Vacancies</span>
                <strong style="color: var(--text-main);">{{ $job->vacancies_count }} Posts</strong>
              </div>
            @endif

            @if($job->salary_display)
              <div>
                <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Compensation Scale</span>
                <strong style="color: var(--accent);">{{ $job->salary_display }}</strong>
              </div>
            @endif

            <div>
              <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Job Reference</span>
              <span style="font-family: monospace; font-size: 0.9rem; color: var(--text-muted);">ZH-{{ str_pad($job->id, 5, '0', STR_PAD_LEFT) }}</span>
            </div>
          </div>

          @if(count($relatedJobs) > 0)
            <h4 style="font-size: 1.1rem; margin-bottom: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-light);">
              Similar Opportunities
            </h4>
            <div style="display: flex; flex-direction: column; gap: 1rem;">
              @foreach($relatedJobs as $rel)
                <a href="{{ route('jobs.show', $rel->slug) }}" style="text-decoration: none; color: inherit; padding: 0.75rem; background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border-light); display: block;">
                  <strong style="display: block; font-size: 0.95rem; margin-bottom: 0.25rem;">{{ $rel->title }}</strong>
                  <span style="font-size: 0.8rem; color: var(--text-muted);"><i class="fas fa-map-marker-alt"></i> {{ $rel->city }}</span>
                </a>
              @endforeach
            </div>
          @endif
        </aside>
      </div>
    </div>
  </section>

  <!-- 1-Click Profile Application Modal (for verified Jobseekers) -->
  @auth
    @if(auth()->user()->isJobseeker() && $isEligible && !$hasApplied)
      <div id="oneClickApplyModal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 9999; align-items: center; justify-content: center; padding: 1.5rem; backdrop-filter: blur(4px);">
        <div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); max-width: 560px; width: 100%; padding: 2rem; box-shadow: 0 20px 40px rgba(0,0,0,0.3); position: relative;">
          
          <button type="button" onclick="document.getElementById('oneClickApplyModal').style.display='none'" style="position: absolute; right: 1.25rem; top: 1.25rem; background: transparent; border: none; font-size: 1.25rem; color: var(--text-light); cursor: pointer;">
            <i class="fas fa-times"></i>
          </button>

          <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
            <div style="width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 102, 255, 0.15); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.2rem;">
              <i class="fas fa-id-card"></i>
            </div>
            <div>
              <h3 style="font-size: 1.25rem; margin: 0; font-family: var(--font-heading);">1-Click Profile Application</h3>
              <span style="font-size: 0.85rem; color: var(--text-light);">MahaSwayam Employment Exchange Verification</span>
            </div>
          </div>

          <p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem;">
            Applying for <strong>{{ $job->title }}</strong>. Your verified candidate credentials will be submitted directly to the employer.
          </p>

          <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1.25rem; font-size: 0.88rem;">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
              <div><span style="color: var(--text-light);">Candidate:</span> <strong>{{ auth()->user()->name }}</strong></div>
              <div><span style="color: var(--text-light);">Registration ID:</span> <strong style="color: var(--accent);">{{ auth()->user()->registration_id ?? 'VERIFIED' }}</strong></div>
            </div>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
              <div><span style="color: var(--text-light);">Mobile:</span> <strong>{{ auth()->user()->phone }}</strong></div>
              <div><span style="color: var(--text-light);">District:</span> <strong>{{ auth()->user()->assigned_district ?? 'Maharashtra' }}</strong></div>
            </div>
            <div><span style="color: var(--text-light);">Email:</span> <strong>{{ auth()->user()->email }}</strong></div>
          </div>

          <form id="oneClickApplyForm" method="POST" action="{{ route('jobs.apply', $job->id) }}">
            @csrf
            <div style="margin-bottom: 1.25rem;">
              <label for="coverNote" style="display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-heading); margin-bottom: 0.35rem;">
                Optional Note / Statement of Interest for Hiring Manager
              </label>
              <textarea name="cover_letter" id="coverNote" rows="3" placeholder="Briefly highlight relevant experience, skills, or notice period..." style="width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading); font-size: 0.9rem;"></textarea>
            </div>

            <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
              <button type="button" class="btn btn-outline btn-sm" onclick="document.getElementById('oneClickApplyModal').style.display='none'">
                Cancel
              </button>
              <button type="submit" id="submitApplyBtn" class="btn btn-primary btn-sm">
                <i class="fas fa-paper-plane"></i> Confirm &amp; Submit Application
              </button>
            </div>
          </form>

        </div>
      </div>
    @endif
  @endauth

  <!-- CTA Banner -->
  @include('partials.cta-banner')
</main>
@endsection