@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>
            <a href="{{ route('employer.vacancies.index') }}">Vacancies</a>
            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
            <span>Applicants</span>
          </nav>
          <h1 style="font-size: 2rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin-bottom: 0.35rem;">
            Applicant Pipeline: {{ $vacancy->title }}
          </h1>
          <p style="color: var(--text-light); font-size: 0.95rem; margin: 0;">
            Location: <strong>{{ $vacancy->district ?: $vacancy->city }}</strong>
            <span style="margin: 0 0.5rem; color: var(--border-light);">|</span>
            Vacancies: <strong>{{ $vacancy->vacancies_count }} Posts</strong>
            <span style="margin: 0 0.5rem; color: var(--border-light);">|</span>
            Total Applicants: <strong>{{ $applicants->total() }}</strong>
          </p>
        </div>

        <div style="display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;">
          <a href="{{ route('employer.vacancies.export-csv', $vacancy->id) }}" class="btn btn-outline" title="Download applicant list as CSV">
            <i class="fas fa-file-csv text-success"></i> Export CSV Roster
          </a>
          <a href="{{ route('employer.vacancies.index') }}" class="btn btn-outline">
            <i class="fas fa-arrow-left"></i> All Vacancies
          </a>
        </div>
      </div>
    </div>
  </header>

  <!-- Applicants Table & Pipeline 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

      <!-- Status Filter Tabs -->
      <div style="display: flex; gap: 0.5rem; margin-bottom: 1.5rem; overflow-x: auto; padding-bottom: 0.5rem;" class="reveal">
        @php
          $tabs = [
            'all' => 'All Applicants',
            'applied' => 'New / Applied',
            'viewed' => 'Reviewed',
            'shortlisted' => 'Shortlisted',
            'interview_scheduled' => 'Interview Scheduled',
            'offered' => 'Offered',
            'joined' => 'Joined',
            'rejected' => 'Rejected',
          ];
        @endphp
        @foreach($tabs as $tabKey => $tabLabel)
          <a href="{{ route('employer.vacancies.applicants', ['id' => $vacancy->id, 'status' => $tabKey]) }}" 
             class="btn btn-sm {{ $currentStatus === $tabKey ? 'btn-primary' : 'btn-outline' }}" 
             style="border-radius: 999px; font-size: 0.82rem; white-space: nowrap;">
            {{ $tabLabel }}
          </a>
        @endforeach
      </div>

      <!-- Applicant Roster Card -->
      <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;">Candidate</th>
                <th style="padding: 1rem 1.25rem;">Verification &amp; Reg. ID</th>
                <th style="padding: 1rem 1.25rem;">Contact Details</th>
                <th style="padding: 1rem 1.25rem;">District Domicile</th>
                <th style="padding: 1rem 1.25rem;">Applied Date</th>
                <th style="padding: 1rem 1.25rem;">Status</th>
                <th style="padding: 1rem 1.25rem; text-align: right;">Action</th>
              </tr>
            </thead>
            <tbody>
              @forelse($applicants as $applicant)
                <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;">
                      {{ $applicant->name }}
                    </strong>
                    <span style="color: var(--text-light); font-size: 0.8rem;">
                      Ref: #ZH-APP-{{ $applicant->id }}
                    </span>
                  </td>
                  <td style="padding: 1rem 1.25rem;">
                    @if($applicant->user?->registration_id)
                      <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); font-size: 0.78rem;">
                        <i class="fas fa-id-card"></i> {{ $applicant->user->registration_id }}
                      </span>
                    @else
                      <span class="badge badge-secondary" style="font-size: 0.78rem;">Direct Portal Application</span>
                    @endif
                  </td>
                  <td style="padding: 1rem 1.25rem; font-size: 0.88rem;">
                    <div><i class="fas fa-envelope" style="color: var(--text-light); font-size: 0.8rem;"></i> {{ $applicant->email }}</div>
                    <div><i class="fas fa-phone" style="color: var(--text-light); font-size: 0.8rem;"></i> {{ $applicant->phone }}</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.82rem;"></i>
                    {{ $applicant->current_location ?: 'Maharashtra' }}
                  </td>
                  <td style="padding: 1rem 1.25rem; color: var(--text-light); font-size: 0.88rem;">
                    {{ $applicant->created_at->format('d M Y') }}
                  </td>
                  <td style="padding: 1rem 1.25rem;">
                    <span class="badge {{ $applicant->statusBadgeClass() }}" style="font-size: 0.82rem;">
                      {{ $applicant->statusLabel() }}
                    </span>
                    @if($applicant->interview_scheduled_at)
                      <span style="display: block; font-size: 0.76rem; color: var(--accent); margin-top: 0.25rem;">
                        <i class="fas fa-calendar-check"></i> {{ $applicant->interview_scheduled_at->format('d M, h:i A') }}
                      </span>
                    @endif
                  </td>
                  <td style="padding: 1rem 1.25rem; text-align: right;">
                    <button type="button" 
                            class="btn btn-primary btn-sm" 
                            style="font-size: 0.8rem; padding: 0.35rem 0.75rem;"
                            onclick="openStatusModal({{ $applicant->id }}, '{{ addslashes($applicant->name) }}', '{{ $applicant->status }}', '{{ $applicant->interview_scheduled_at ? $applicant->interview_scheduled_at->format('Y-m-d\TH:i') : '' }}', '{{ addslashes($applicant->interview_location ?? '') }}')">
                      <i class="fas fa-user-check"></i> Update Status
                    </button>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="7" style="padding: 3.5rem 1rem; text-align: center; color: var(--text-light);">
                    <i class="fas fa-user-friends" 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 Applicants Under This Status</h3>
                    <p style="font-size: 0.9rem; max-width: 450px; margin: 0 auto;">
                      Candidates applying for this vacancy through the MahaSwayam exchange will appear here immediately.
                    </p>
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

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

  <!-- Modal for Updating Applicant Status & Scheduling Interviews -->
  <div id="applicantStatusModal" 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: 520px; width: 100%; padding: 2rem; position: relative;">
      
      <button type="button" onclick="document.getElementById('applicantStatusModal').style.display='none'" style="position: absolute; right: 1.25rem; top: 1.25rem; background: transparent; border: none; font-size: 1.2rem; color: var(--text-light); cursor: pointer;">
        <i class="fas fa-times"></i>
      </button>

      <h3 style="font-size: 1.25rem; margin-bottom: 0.25rem; color: var(--text-heading);">
        Update Applicant Status
      </h3>
      <p style="font-size: 0.88rem; color: var(--text-light); margin-bottom: 1.25rem;" id="modalCandidateSubtitle">
        Candidate: Ramesh Patil
      </p>

      <form id="applicantStatusForm" method="POST" action="">
        @csrf
        <div style="margin-bottom: 1.25rem;">
          <label for="statusSelect" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
            New Recruitment Milestone <span style="color: #ef4444;">*</span>
          </label>
          <select name="status" id="statusSelect" required onchange="toggleInterviewFields(this.value)" 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="viewed">Profile Viewed by Employer</option>
            <option value="shortlisted">Shortlisted for Next Round</option>
            <option value="interview_scheduled">Schedule Interview Appointment</option>
            <option value="offered">Job Offer Extended</option>
            <option value="joined">Candidate Joined Organization</option>
            <option value="rejected">Not Selected / Closed</option>
          </select>
        </div>

        <!-- Conditional Interview Fields -->
        <div id="interviewFieldsContainer" style="display: none; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1.25rem;">
          <div style="margin-bottom: 0.75rem;">
            <label for="interviewDate" style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem;">
              Interview Date &amp; Time
            </label>
            <input type="datetime-local" name="interview_scheduled_at" id="interviewDate" style="width: 100%; padding: 0.6rem; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-heading);">
          </div>
          <div>
            <label for="interviewLocation" style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem;">
              Venue / Meeting Link
            </label>
            <input type="text" name="interview_location" id="interviewLocation" placeholder="e.g. Google Meet link or Plot 4, Mihan SEZ, Nagpur" style="width: 100%; padding: 0.6rem; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-heading);">
          </div>
        </div>

        <div style="margin-bottom: 1.5rem;">
          <label for="statusRemarks" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
            Employer Remarks / Instructions (Notified to Candidate)
          </label>
          <textarea name="remarks" id="statusRemarks" rows="3" placeholder="Please prepare portfolio, arrive 15 minutes early, or bring original qualification certificates..." 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('applicantStatusModal').style.display='none'">
            Cancel
          </button>
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="fas fa-check"></i> Save Status &amp; Notify Candidate
          </button>
        </div>
      </form>
    </div>
  </div>
</main>

<script>
function openStatusModal(applicationId, candidateName, currentStatus, interviewDate, interviewLocation) {
  const form = document.getElementById('applicantStatusForm');
  form.action = `/employer/applicants/${applicationId}/status`;

  document.getElementById('modalCandidateSubtitle').textContent = `Candidate: ${candidateName}`;
  const select = document.getElementById('statusSelect');
  select.value = currentStatus || 'viewed';

  document.getElementById('interviewDate').value = interviewDate || '';
  document.getElementById('interviewLocation').value = interviewLocation || '';

  toggleInterviewFields(select.value);

  document.getElementById('applicantStatusModal').style.display = 'flex';
}

function toggleInterviewFields(status) {
  const container = document.getElementById('interviewFieldsContainer');
  if (status === 'interview_scheduled') {
    container.style.display = 'block';
  } else {
    container.style.display = 'none';
  }
}
</script>
@endsection