@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>
        <span>Careers &amp; Job Board</span>
      </nav>
      <h1 class="page-hero-title">Discover Your Next <span class="text-gradient">Career Milestone</span></h1>
      <p class="page-hero-desc text-muted">Browse verified vacancies across 36 Maharashtra districts. Filter by domain, statutory qualification, or employment exchange scheme and apply directly with your candidate profile.</p>
    </div>
  </section>

  <!-- Job Board & Filters -->
  <section class="section">
    <div class="container">
      <!-- Filter Controls -->
      <div class="job-filter-bar reveal" style="background: var(--bg-surface); padding: 1.5rem; border-radius: var(--radius-xl); border: 1px solid var(--border-light); margin-bottom: 2rem;">
        <form id="jobSearchForm" method="GET" action="{{ route('jobs.index') }}">
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem;">
            
            <!-- Search Keyword Bar -->
            <div class="search-input-box" style="position: relative;">
              <i class="fas fa-search" aria-hidden="true" style="position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-light);"></i>
              <input type="text" name="search" id="jobSearchInput" value="{{ $filters['search'] ?? '' }}" placeholder="Job title, skill (React, Java)..." class="filter-input" style="width: 100%; padding: 0.7rem 1rem 0.7rem 2.5rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);" aria-label="Search job title or keywords">
            </div>

            <!-- District Filter -->
            <div>
              <select name="district" id="jobDistrictFilter" class="filter-select" style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
                <option value="all">All Maharashtra Districts</option>
                @foreach($districts as $district)
                  <option value="{{ $district->name }}" {{ ($filters['district'] ?? '') === $district->name ? 'selected' : '' }}>
                    {{ $district->name }}
                  </option>
                @endforeach
              </select>
            </div>

            <!-- Qualification Filter -->
            <div>
              <select name="qualification" id="jobQualificationFilter" class="filter-select" style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
                <option value="all">All Qualification Levels</option>
                @foreach($qualifications as $qual)
                  <option value="{{ $qual }}" {{ ($filters['qualification'] ?? '') === $qual ? 'selected' : '' }}>
                    {{ $qual }}
                  </option>
                @endforeach
              </select>
            </div>

            <!-- Sector Filter -->
            <div>
              <select name="sector" id="jobSectorFilter" class="filter-select" style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
                <option value="all">All Industry Sectors</option>
                @foreach($sectors as $sec)
                  <option value="{{ $sec }}" {{ ($filters['sector'] ?? '') === $sec ? 'selected' : '' }}>
                    {{ $sec }}
                  </option>
                @endforeach
              </select>
            </div>

            <!-- Job Type Filter -->
            <div>
              <select name="type" id="jobTypeFilter" class="filter-select" style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
                <option value="all" {{ ($filters['type'] ?? 'all') === 'all' ? 'selected' : '' }}>All Job Types</option>
                <option value="fulltime" {{ ($filters['type'] ?? '') === 'fulltime' ? 'selected' : '' }}>Full-Time</option>
                <option value="contract" {{ ($filters['type'] ?? '') === 'contract' ? 'selected' : '' }}>Contract</option>
                <option value="hybrid" {{ ($filters['type'] ?? '') === 'hybrid' ? 'selected' : '' }}>Hybrid</option>
                <option value="remote" {{ ($filters['type'] ?? '') === 'remote' ? 'selected' : '' }}>Remote</option>
              </select>
            </div>

          </div>

          <!-- Secondary Filter Row: Scheme Filter & Reset -->
          <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--border-light);">
            <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
              <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; color: var(--text-heading); font-weight: 500;">
                <input type="checkbox" name="scheme_only" id="schemeFilter" value="1" {{ !empty($filters['scheme_only']) ? 'checked' : '' }} style="accent-color: var(--accent); width: 18px; height: 18px;">
                <i class="fas fa-landmark" style="color: var(--accent);"></i> MahaSwayam Government Schemes Only
              </label>

              <button type="button" id="resetFiltersBtn" class="btn btn-outline btn-sm" title="Clear all active filters" style="padding: 0.35rem 0.85rem; font-size: 0.82rem;">
                <i class="fas fa-undo"></i> Reset Filters
              </button>
            </div>

            <div class="filter-meta">
              <span id="jobCountBadge" class="badge badge-primary">Showing {{ $jobs->total() }} open position{{ $jobs->total() === 1 ? '' : 's' }}</span>
              <span style="font-size: 0.85rem; color: var(--text-light); margin-left: 0.5rem;">
                <i class="fas fa-check-circle text-success"></i> 100% Verified Openings
              </span>
            </div>
          </div>
        </form>
      </div>

      <!-- Loading Spinner Indicator -->
      <div id="filterLoadingIndicator" style="display: none; text-align: center; padding: 2rem 0;">
        <i class="fas fa-spinner fa-spin" style="font-size: 2rem; color: var(--accent);"></i>
        <p style="color: var(--text-light); font-size: 0.9rem; margin-top: 0.5rem;">Filtering matching vacancies...</p>
      </div>

      <!-- Job Cards List Container -->
      <div id="jobCardsContainer" class="job-cards-list">
        @include('partials.job-cards-list', ['jobs' => $jobs])
      </div>

      <!-- Pagination Container -->
      <div id="jobPaginationContainer" style="margin-top: 3rem; display: flex; justify-content: center;">
        {{ $jobs->links() }}
      </div>
    </div>
  </section>

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

<script>
document.addEventListener('DOMContentLoaded', function () {
  const searchInput = document.getElementById('jobSearchInput');
  const districtFilter = document.getElementById('jobDistrictFilter');
  const qualificationFilter = document.getElementById('jobQualificationFilter');
  const sectorFilter = document.getElementById('jobSectorFilter');
  const typeFilter = document.getElementById('jobTypeFilter');
  const schemeFilter = document.getElementById('schemeFilter');
  const resetBtn = document.getElementById('resetFiltersBtn');
  const container = document.getElementById('jobCardsContainer');
  const countBadge = document.getElementById('jobCountBadge');
  const paginationContainer = document.getElementById('jobPaginationContainer');
  const loadingIndicator = document.getElementById('filterLoadingIndicator');

  let debounceTimer = null;

  function performSearch() {
    const params = new URLSearchParams();

    if (searchInput && searchInput.value.trim()) params.set('search', searchInput.value.trim());
    if (districtFilter && districtFilter.value !== 'all') params.set('district', districtFilter.value);
    if (qualificationFilter && qualificationFilter.value !== 'all') params.set('qualification', qualificationFilter.value);
    if (sectorFilter && sectorFilter.value !== 'all') params.set('sector', sectorFilter.value);
    if (typeFilter && typeFilter.value !== 'all') params.set('type', typeFilter.value);
    if (schemeFilter && schemeFilter.checked) params.set('scheme_only', '1');

    const url = '{{ route('jobs.index') }}' + (params.toString() ? '?' + params.toString() : '');

    // Sync URL in address bar without reload
    window.history.pushState(null, '', url);

    if (loadingIndicator) loadingIndicator.style.display = 'block';

    fetch(url, {
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Accept': 'application/json'
      }
    })
    .then(res => res.json())
    .then(data => {
      if (loadingIndicator) loadingIndicator.style.display = 'none';
      if (container && data.html) {
        container.innerHTML = data.html;
      }
      if (countBadge && data.count !== undefined) {
        countBadge.textContent = `Showing ${data.count} open position${data.count === 1 ? '' : 's'}`;
      }
      if (paginationContainer && data.pagination !== undefined) {
        paginationContainer.innerHTML = data.pagination;
      }
    })
    .catch(err => {
      if (loadingIndicator) loadingIndicator.style.display = 'none';
      console.error('Job filter request error:', err);
    });
  }

  function debouncedSearch() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(performSearch, 300);
  }

  if (searchInput) searchInput.addEventListener('input', debouncedSearch);
  if (districtFilter) districtFilter.addEventListener('change', performSearch);
  if (qualificationFilter) qualificationFilter.addEventListener('change', performSearch);
  if (sectorFilter) sectorFilter.addEventListener('change', performSearch);
  if (typeFilter) typeFilter.addEventListener('change', performSearch);
  if (schemeFilter) schemeFilter.addEventListener('change', performSearch);

  if (resetBtn) {
    resetBtn.addEventListener('click', function () {
      if (searchInput) searchInput.value = '';
      if (districtFilter) districtFilter.value = 'all';
      if (qualificationFilter) qualificationFilter.value = 'all';
      if (sectorFilter) sectorFilter.value = 'all';
      if (typeFilter) typeFilter.value = 'all';
      if (schemeFilter) schemeFilter.checked = false;
      performSearch();
    });
  }

  // Handle Save / Bookmark Job via AJAX
  document.addEventListener('click', function (e) {
    const saveBtn = e.target.closest('.btn-save-job-toggle');
    if (!saveBtn) return;

    e.preventDefault();
    const jobId = saveBtn.getAttribute('data-job-id');
    const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

    saveBtn.disabled = true;

    fetch(`/jobs/${jobId}/save`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': token,
        'X-Requested-With': 'XMLHttpRequest',
        'Accept': 'application/json'
      }
    })
    .then(res => res.json())
    .then(data => {
      saveBtn.disabled = false;
      if (data.success) {
        const icon = saveBtn.querySelector('i');
        if (data.saved) {
          icon.className = 'fas fa-bookmark';
          saveBtn.style.color = 'var(--accent)';
          saveBtn.setAttribute('title', 'Remove Bookmark');
        } else {
          icon.className = 'far fa-bookmark';
          saveBtn.style.color = 'var(--text-light)';
          saveBtn.setAttribute('title', 'Save Vacancy');
        }

        if (window.showToast) {
          window.showToast(data.message, 'success');
        }
      }
    })
    .catch(err => {
      saveBtn.disabled = false;
      console.error('Error toggling save job:', err);
    });
  });
});
</script>
@endsection