@extends('layouts.admin')

@section('title', 'Candidate Registry & Profiles')
@section('page-title', 'Employment Exchange Candidate Registry')

@section('content')
<!-- Metric Summary Cards -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(0, 102, 255, 0.15); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
      <i class="fas fa-users"></i>
    </div>
    <div>
      <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600;">Total Candidates</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); display: block; color: var(--accent);">{{ $totalJobseekers }}</strong>
    </div>
  </div>

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(16, 185, 129, 0.15); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
      <i class="fas fa-id-card"></i>
    </div>
    <div>
      <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600;">Aadhaar Verified</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); display: block; color: var(--success);">{{ $verifiedJobseekers }}</strong>
    </div>
  </div>

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(14, 165, 233, 0.15); color: #0284c7; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
      <i class="fas fa-user-check"></i>
    </div>
    <div>
      <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600;">Placement Ready (&ge;80%)</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); display: block; color: #0284c7;">{{ $readyToApply }}</strong>
    </div>
  </div>

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(239, 68, 68, 0.15); color: #ef4444; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
      <i class="fas fa-user-slash"></i>
    </div>
    <div>
      <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600;">Suspended Accounts</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); display: block; color: #ef4444;">{{ $suspendedCount }}</strong>
    </div>
  </div>

</div>

<!-- Filter Toolbar & Table Card -->
<div class="admin-card">

  <form method="GET" action="{{ route('admin.jobseekers.index') }}" style="margin-bottom: 1.5rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
      
      <!-- Status Tabs -->
      <div style="display: flex; gap: 0.4rem; flex-wrap: wrap;">
        <a href="{{ route('admin.jobseekers.index', array_merge(request()->query(), ['status' => 'all'])) }}" class="btn {{ $currentStatus === 'all' ? 'btn-primary' : 'btn-outline' }} btn-sm">
          All Candidates
        </a>
        <a href="{{ route('admin.jobseekers.index', array_merge(request()->query(), ['status' => 'active'])) }}" class="btn {{ $currentStatus === 'active' ? 'btn-primary' : 'btn-outline' }} btn-sm">
          Active
        </a>
        <a href="{{ route('admin.jobseekers.index', array_merge(request()->query(), ['status' => 'suspended'])) }}" class="btn {{ $currentStatus === 'suspended' ? 'btn-primary' : 'btn-outline' }} btn-sm">
          Suspended ({{ $suspendedCount }})
        </a>
      </div>

      <!-- Search & District Filter Controls -->
      <div style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
        <input type="hidden" name="status" value="{{ $currentStatus }}">

        <!-- Completion Filter -->
        <select name="completion" class="form-control" onchange="this.form.submit()" style="padding: 0.4rem 0.75rem; font-size: 0.85rem; max-width: 170px;">
          <option value="all" {{ $currentCompletion === 'all' ? 'selected' : '' }}>All Completion</option>
          <option value="complete" {{ $currentCompletion === 'complete' ? 'selected' : '' }}>Complete (&ge;80%)</option>
          <option value="incomplete" {{ $currentCompletion === 'incomplete' ? 'selected' : '' }}>Incomplete (&lt;80%)</option>
        </select>

        <!-- District Filter -->
        <select name="district" class="form-control" onchange="this.form.submit()" style="padding: 0.4rem 0.75rem; font-size: 0.85rem; max-width: 180px;">
          <option value="">All Districts</option>
          @foreach($districts as $d)
            <option value="{{ $d->name }}" {{ $currentDistrict === $d->name ? 'selected' : '' }}>
              {{ $d->name }}
            </option>
          @endforeach
        </select>

        <!-- Keyword Search -->
        <div style="position: relative; display: flex; align-items: center;">
          <input type="text" name="search" value="{{ $search }}" placeholder="Search name, ID, phone..." class="form-control" style="padding: 0.4rem 2rem 0.4rem 0.75rem; font-size: 0.85rem; width: 200px;">
          <button type="submit" style="position: absolute; right: 0.5rem; background: none; border: none; color: var(--text-light); cursor: pointer;">
            <i class="fas fa-search"></i>
          </button>
        </div>

        @if($search || $currentDistrict || $currentStatus !== 'all' || $currentCompletion !== 'all')
          <a href="{{ route('admin.jobseekers.index') }}" class="btn btn-outline btn-sm" title="Reset Filters" style="padding: 0.4rem 0.6rem;">
            <i class="fas fa-times"></i>
          </a>
        @endif
      </div>

    </div>
  </form>

  <!-- Jobseekers Table -->
  <div class="table-responsive">
    <table class="admin-table">
      <thead>
        <tr>
          <th>Candidate Details</th>
          <th>Registration ID</th>
          <th>District / Domicile</th>
          <th>Aadhaar KYC</th>
          <th>Profile Status</th>
          <th>Account</th>
          <th style="text-align: right;">Action</th>
        </tr>
      </thead>
      <tbody>
        @forelse($jobseekers as $js)
          @php
            $profile = $js->jobseekerProfile;
            $completion = $js->profile_completion ?? ($profile ? $profile->calculateCompletionPercentage() : 0);
            $isAadhaarVerified = $profile && ($profile->aadhaar_verified_at || $profile->is_aadhaar_verified);
          @endphp
          <tr>
            <td>
              <div style="display: flex; align-items: center; gap: 0.75rem;">
                <div style="width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 102, 255, 0.12); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; flex-shrink: 0;">
                  {{ strtoupper(substr($js->name, 0, 1)) }}
                </div>
                <div>
                  <strong style="font-size: 0.95rem; display: block; color: var(--text-heading);">{{ $js->name }}</strong>
                  <span style="font-size: 0.8rem; color: var(--text-light); display: block;">
                    {{ $js->email }} • {{ $js->phone ?? 'No Phone' }}
                  </span>
                </div>
              </div>
            </td>
            <td>
              @if($js->registration_id)
                <strong style="font-family: monospace; font-size: 0.88rem; color: var(--text-heading); display: block;">
                  {{ $js->registration_id }}
                </strong>
                <span style="font-size: 0.75rem; color: var(--text-light);">
                  Issued: {{ $js->registration_date ? $js->registration_date->format('d M Y') : 'N/A' }}
                </span>
              @else
                <span class="badge" style="background: rgba(100, 116, 139, 0.15); color: #64748b;">
                  Draft Candidate
                </span>
              @endif
            </td>
            <td>
              <strong style="font-size: 0.88rem; color: var(--text-heading);">
                {{ $profile?->district ?? $js->assigned_district ?? 'Maharashtra' }}
              </strong>
              @if($profile?->taluka)
                <span style="font-size: 0.75rem; color: var(--text-light); display: block;">
                  {{ $profile->taluka }}, {{ $profile->pincode ?? '' }}
                </span>
              @endif
            </td>
            <td>
              @if($isAadhaarVerified)
                <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); font-weight: 600;">
                  <i class="fas fa-check-circle"></i> Verified
                </span>
                @if($profile?->aadhaar_last4)
                  <span style="font-size: 0.75rem; color: var(--text-light); display: block; font-family: monospace;">
                    •••• {{ $profile->aadhaar_last4 }}
                  </span>
                @endif
              @else
                <span class="badge" style="background: rgba(245, 158, 11, 0.15); color: #b45309; font-weight: 600;">
                  <i class="fas fa-hourglass-half"></i> Pending
                </span>
              @endif
            </td>
            <td>
              <div style="min-width: 110px;">
                <div style="display: flex; justify-content: space-between; font-size: 0.78rem; margin-bottom: 0.25rem;">
                  <span style="font-weight: 600; color: {{ $completion >= 80 ? 'var(--success)' : '#d97706' }};">
                    {{ $completion }}%
                  </span>
                  <span style="color: var(--text-light); font-size: 0.72rem;">
                    {{ $completion >= 80 ? 'Ready' : 'Incomplete' }}
                  </span>
                </div>
                <div style="width: 100%; height: 6px; background: rgba(0,0,0,0.06); border-radius: 3px; overflow: hidden;">
                  <div style="width: {{ min(100, $completion) }}%; height: 100%; background: {{ $completion >= 80 ? 'var(--success)' : 'var(--accent)' }}; border-radius: 3px;"></div>
                </div>
              </div>
            </td>
            <td>
              @if($js->status === 'active')
                <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); font-weight: 600;">
                  <i class="fas fa-circle" style="font-size: 0.5rem; vertical-align: middle;"></i> Active
                </span>
              @elseif($js->status === 'suspended')
                <span class="badge" style="background: rgba(239, 68, 68, 0.15); color: #ef4444; font-weight: 600;" title="{{ $js->status_reason ?? 'Suspended by admin' }}">
                  <i class="fas fa-ban"></i> Suspended
                </span>
              @else
                <span class="badge" style="background: rgba(100, 116, 139, 0.15); color: #64748b;">
                  {{ ucfirst($js->status) }}
                </span>
              @endif
            </td>
            <td style="text-align: right; white-space: nowrap;">
              <a href="{{ route('admin.jobseekers.show', $js->id) }}" class="btn btn-outline btn-sm">
                View Full Profile <i class="fas fa-arrow-right"></i>
              </a>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="7" style="text-align: center; padding: 2.5rem; color: var(--text-light);">
              <i class="fas fa-user-friends" style="font-size: 2.5rem; margin-bottom: 0.75rem; display: block; opacity: 0.35;"></i>
              <strong style="font-size: 1rem; display: block; margin-bottom: 0.25rem; color: var(--text-heading);">No Candidates Found</strong>
              <span>No jobseeker records match the specified search parameters or district filter.</span>
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  @if($jobseekers->hasPages())
    <div style="margin-top: 1.5rem; border-top: 1px solid var(--border-light); padding-top: 1rem;">
      {{ $jobseekers->links() }}
    </div>
  @endif

</div>
@endsection