@extends('layouts.app')

@section('content')
<main id="mainContent">
  <!-- 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>
          <nav class="breadcrumbs" aria-label="Breadcrumb" style="margin-bottom: 0.5rem;">
            <a href="{{ route('home') }}">Home</a>
            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
            <a href="{{ route('employer.dashboard') }}">Employer Portal</a>
            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
            <span>Vacancies</span>
          </nav>
          <h1 style="font-size: 2rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin-bottom: 0.35rem;">
            Job Vacancy Requisitions
          </h1>
          <p style="color: var(--text-light); font-size: 0.95rem; margin: 0;">
            Publish, edit, and track hiring requisitions across Maharashtra employment exchanges.
          </p>
        </div>

        <div style="display: flex; gap: 0.75rem; align-items: center;">
          @if($profile?->isVerified())
            <a href="{{ route('employer.vacancies.create') }}" class="btn btn-primary">
              <i class="fas fa-plus"></i> Post New Vacancy
            </a>
          @else
            <button class="btn btn-primary" onclick="alert('Your organization is pending statutory verification by the District Employment Exchange. You cannot publish vacancies until verified.');">
              <i class="fas fa-shield-alt"></i> Post Vacancy (Verification Required)
            </button>
          @endif
          <a href="{{ route('employer.dashboard') }}" class="btn btn-outline">
            <i class="fas fa-arrow-left"></i> Dashboard
          </a>
        </div>
      </div>
    </div>
  </header>

  <!-- Vacancy List Section -->
  <section class="section" style="padding: 2.5rem 0;">
    <div class="container">
      
      @if(session('success'))
        <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success); color: var(--success); padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 2rem;">
          <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
      @endif

      @if(session('error'))
        <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #ef4444; padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 2rem;">
          <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
        </div>
      @endif

      <div class="card reveal" style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); overflow: hidden; padding: 0;">
        <div style="overflow-x: auto;">
          <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.92rem;">
            <thead>
              <tr style="background: var(--bg-card); border-bottom: 1px solid var(--border-light); color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;">
                <th style="padding: 1rem 1.25rem;">Title &amp; Scheme</th>
                <th style="padding: 1rem 1.25rem;">District / Location</th>
                <th style="padding: 1rem 1.25rem;">Sector &amp; Qual.</th>
                <th style="padding: 1rem 1.25rem;">Posts</th>
                <th style="padding: 1rem 1.25rem;">Applicants</th>
                <th style="padding: 1rem 1.25rem;">Status</th>
                <th style="padding: 1rem 1.25rem; text-align: right;">Actions</th>
              </tr>
            </thead>
            <tbody>
              @forelse($vacancies as $vac)
                <tr style="border-bottom: 1px solid var(--border-light); transition: background 0.2s ease;">
                  <td style="padding: 1rem 1.25rem;">
                    <strong style="color: var(--text-heading); display: block; font-size: 0.95rem;">
                      {{ $vac->title }}
                    </strong>
                    <div style="display: flex; gap: 0.4rem; margin-top: 0.25rem; align-items: center; flex-wrap: wrap;">
                      <span class="badge badge-primary" style="font-size: 0.75rem;">
                        {{ $vac->category ? $vac->category->name : 'General' }}
                      </span>
                      @if($vac->is_scheme_vacancy)
                        <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); font-size: 0.72rem;">
                          <i class="fas fa-landmark"></i> Scheme
                        </span>
                      @endif
                    </div>
                  </td>
                  <td style="padding: 1rem 1.25rem; color: var(--text-body);">
                    <i class="fas fa-map-marker-alt" style="color: var(--text-light); font-size: 0.85rem;"></i>
                    {{ $vac->district ?: $vac->city }}
                  </td>
                  <td style="padding: 1rem 1.25rem; color: var(--text-muted); font-size: 0.88rem;">
                    <div>{{ $vac->sector ?: 'General' }}</div>
                    <span style="font-size: 0.78rem; color: var(--text-light);">{{ $vac->qualification_required ?: 'Any' }}</span>
                  </td>
                  <td style="padding: 1rem 1.25rem; font-weight: 600;">
                    {{ $vac->vacancies_count }}
                  </td>
                  <td style="padding: 1rem 1.25rem;">
                    <a href="{{ route('employer.vacancies.applicants', $vac->id) }}" class="badge badge-info" style="text-decoration: none; font-size: 0.82rem; padding: 0.35rem 0.7rem;">
                      <i class="fas fa-users"></i> {{ $vac->applications_count }} Candidate{{ $vac->applications_count === 1 ? '' : 's' }}
                    </a>
                  </td>
                  <td style="padding: 1rem 1.25rem;">
                    @if($vac->is_active)
                      <span class="badge badge-success" style="font-size: 0.78rem;">Active / Open</span>
                    @else
                      <span class="badge badge-secondary" style="font-size: 0.78rem;">Closed</span>
                    @endif
                  </td>
                  <td style="padding: 1rem 1.25rem; text-align: right;">
                    <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
                      <a href="{{ route('employer.vacancies.applicants', $vac->id) }}" class="btn btn-outline btn-sm" style="font-size: 0.8rem; padding: 0.35rem 0.65rem;" title="View Pipeline">
                        <i class="fas fa-user-friends"></i>
                      </a>
                      <a href="{{ route('employer.vacancies.edit', $vac->id) }}" class="btn btn-outline btn-sm" style="font-size: 0.8rem; padding: 0.35rem 0.65rem;" title="Edit Vacancy">
                        <i class="fas fa-edit"></i>
                      </a>
                      <form method="POST" action="{{ route('employer.vacancies.toggle-status', $vac->id) }}" style="display: inline;">
                        @csrf
                        <button type="submit" class="btn btn-outline btn-sm" style="font-size: 0.8rem; padding: 0.35rem 0.65rem;" title="{{ $vac->is_active ? 'Close Vacancy' : 'Re-open Vacancy' }}">
                          <i class="{{ $vac->is_active ? 'fas fa-pause' : 'fas fa-play' }}"></i>
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="7" style="padding: 3.5rem 1rem; text-align: center; color: var(--text-light);">
                    <i class="fas fa-bullhorn" style="font-size: 3rem; color: var(--border-light); margin-bottom: 1rem; display: block;"></i>
                    <h3 style="font-size: 1.2rem; color: var(--text-heading); margin-bottom: 0.5rem;">No Vacancies Published Yet</h3>
                    <p style="font-size: 0.9rem; max-width: 450px; margin: 0 auto 1.5rem auto;">
                      Publish your corporate job requisitions to source pre-screened talent across Maharashtra districts.
                    </p>
                    @if($profile?->isVerified())
                      <a href="{{ route('employer.vacancies.create') }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus"></i> Post Your First Vacancy
                      </a>
                    @else
                      <a href="{{ route('employer.profile.edit') }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-shield-alt"></i> Complete Verification to Post
                      </a>
                    @endif
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

      <!-- Pagination -->
      <div style="margin-top: 2rem; display: flex; justify-content: center;">
        {{ $vacancies->links() }}
      </div>
    </div>
  </section>
</main>
@endsection