@extends('layouts.employer')

@section('content')
<div class="employer-candidates-index">
  <!-- Header -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
    <div>
      <h1 style="font-size: 1.75rem; font-family: var(--font-heading); margin-bottom: 0.25rem;">Verified Talent Discovery</h1>
      <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">
        Explore registered Maharashtra jobseekers with verified academic records, UIDAI Aadhaar authentication, and skill credentials.
      </p>
    </div>

    <div>
      <a href="{{ route('employer.access-requests.index') }}" class="btn btn-outline" style="display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem;">
        <i class="fas fa-list-check"></i>
        <span>My Talent Access Grants</span>
      </a>
    </div>
  </div>

  @if(session('success'))
    <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #10B981; padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; font-size: 0.92rem; display: flex; align-items: center; gap: 0.75rem;">
      <i class="fas fa-check-circle" style="font-size: 1.1rem;"></i>
      <span>{{ session('success') }}</span>
    </div>
  @endif

  @if(session('info'))
    <div style="background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.3); color: #38BDF8; padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; font-size: 0.92rem; display: flex; align-items: center; gap: 0.75rem;">
      <i class="fas fa-info-circle" style="font-size: 1.1rem;"></i>
      <span>{{ session('info') }}</span>
    </div>
  @endif

  @if(session('warning'))
    <div style="background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: #F59E0B; padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; font-size: 0.92rem; display: flex; align-items: center; gap: 0.75rem;">
      <i class="fas fa-exclamation-triangle" style="font-size: 1.1rem;"></i>
      <span>{{ session('warning') }}</span>
    </div>
  @endif

  <!-- Search & Multi-Filter Toolbar -->
  <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 2rem;">
    <form method="GET" action="{{ route('employer.candidates.index') }}">
      <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 1rem; align-items: flex-end;">
        <div>
          <label style="display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem;">
            Keyword / Degree / Registration ID
          </label>
          <input type="text" name="search" value="{{ request('search') }}" placeholder="e.g. Computer Engineering, Pune, ZH-JS-2026..." class="form-control" style="width: 100%;">
        </div>

        <div>
          <label style="display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem;">
            District
          </label>
          <select name="district" class="form-control" style="width: 100%;">
            <option value="">All Districts</option>
            @foreach($districts as $d)
              <option value="{{ $d->name }}" {{ request('district') === $d->name ? 'selected' : '' }}>{{ $d->name }}</option>
            @endforeach
          </select>
        </div>

        <div>
          <label style="display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem;">
            Qualification Tier
          </label>
          <select name="level" class="form-control" style="width: 100%;">
            <option value="">All Levels</option>
            <option value="Doctorate / PhD" {{ request('level') === 'Doctorate / PhD' ? 'selected' : '' }}>Doctorate / PhD</option>
            <option value="Post Graduate / Master" {{ request('level') === 'Post Graduate / Master' ? 'selected' : '' }}>Post Graduate / Master</option>
            <option value="Graduate / Bachelor" {{ request('level') === 'Graduate / Bachelor' ? 'selected' : '' }}>Graduate / Bachelor</option>
            <option value="Diploma" {{ request('level') === 'Diploma' ? 'selected' : '' }}>Diploma</option>
            <option value="ITI" {{ request('level') === 'ITI' ? 'selected' : '' }}>ITI</option>
            <option value="12th / HSC" {{ request('level') === '12th / HSC' ? 'selected' : '' }}>12th / HSC</option>
            <option value="10th / SSC" {{ request('level') === '10th / SSC' ? 'selected' : '' }}>10th / SSC</option>
          </select>
        </div>

        <div>
          <label style="display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem;">
            Preferred Sector
          </label>
          <input type="text" name="sector" value="{{ request('sector') }}" placeholder="e.g. IT, Manufacturing..." class="form-control" style="width: 100%;">
        </div>

        <div>
          <button type="submit" class="btn btn-primary" style="height: 42px; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 1.25rem;">
            <i class="fas fa-search"></i> Filter
          </button>
        </div>
      </div>
    </form>
  </div>

  <!-- Candidates Grid -->
  @if($candidates->isEmpty())
    <div style="background: var(--bg-card); border: 1px dashed var(--border-light); border-radius: var(--radius-lg); padding: 3rem; text-align: center;">
      <i class="fas fa-users-slash" style="font-size: 2.5rem; color: var(--text-muted); margin-bottom: 1rem; display: block;"></i>
      <h3 style="font-size: 1.15rem; font-family: var(--font-heading); margin-bottom: 0.5rem; color: var(--text-primary);">
        No Matching Candidates Found
      </h3>
      <p style="color: var(--text-muted); font-size: 0.9rem; max-width: 450px; margin: 0 auto;">
        Try broadening your search keywords or clearing filter criteria to discover more registered candidates.
      </p>
    </div>
  @else
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1.5rem;">
      @foreach($candidates as $candidate)
        @php
          $profile = $candidate->jobseekerProfile;
          $highestQual = $profile?->highestQualification();
          $existingReq = $existingRequests[$candidate->id] ?? null;
          $hasAccess = $employer->hasApprovedAccessToCandidate($candidate);
          $candidateRef = $candidate->registration_id ?: "Candidate #{$candidate->id}";
        @endphp

        <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; position: relative;">
          <!-- Top Card Meta -->
          <div>
            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem;">
              <span class="badge" style="background: rgba(56, 189, 248, 0.15); color: #38BDF8; border: 1px solid rgba(56, 189, 248, 0.3); font-family: var(--font-mono, monospace); font-size: 0.8rem; font-weight: 700;">
                #{{ $candidateRef }}
              </span>

              @if($hasAccess)
                <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.3); font-size: 0.75rem;">
                  <i class="fas fa-unlock"></i> Access Approved
                </span>
              @elseif($existingReq && $existingReq->isPending())
                <span class="badge" style="background: rgba(245, 158, 11, 0.15); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.3); font-size: 0.75rem;">
                  <i class="fas fa-clock"></i> Access Pending
                </span>
              @else
                <span class="badge" style="background: rgba(148, 163, 184, 0.15); color: #94A3B8; border: 1px solid rgba(148, 163, 184, 0.3); font-size: 0.75rem;">
                  <i class="fas fa-lock"></i> Masked Profile
                </span>
              @endif
            </div>

            <!-- Candidate Title / Education -->
            <h3 style="font-size: 1.15rem; font-family: var(--font-heading); margin: 0 0 0.5rem 0; color: var(--text-primary);">
              @if($hasAccess)
                {{ $candidate->name }}
              @else
                {{ $highestQual ? $highestQual->stream_degree : 'Registered Candidate' }}
              @endif
            </h3>

            <!-- Academic Info -->
            <div style="font-size: 0.88rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem;">
              @if($highestQual)
                <div>
                  <i class="fas fa-graduation-cap" style="color: var(--accent); width: 16px;"></i>
                  <span><strong>{{ $highestQual->level }}</strong> ({{ $highestQual->passing_year }})</span>
                </div>
                <div>
                  <i class="fas fa-university" style="color: var(--text-muted); width: 16px;"></i>
                  <span>{{ $highestQual->board_university ?: 'Recognized Institution' }}</span>
                </div>
              @else
                <div><i class="fas fa-graduation-cap" style="color: var(--text-muted); width: 16px;"></i> Qualification on file</div>
              @endif

              <div>
                <i class="fas fa-location-dot" style="color: #38BDF8; width: 16px;"></i>
                <span>District: <strong>{{ ucfirst($profile->preferred_district ?: $profile->district ?: 'Maharashtra') }}</strong></span>
              </div>

              @if($profile->preferred_sector)
                <div>
                  <i class="fas fa-briefcase" style="color: #F59E0B; width: 16px;"></i>
                  <span>Sector: <strong>{{ $profile->preferred_sector }}</strong></span>
                </div>
              @endif

              @if($profile->expected_salary_min)
                <div>
                  <i class="fas fa-indian-rupee-sign" style="color: #10B981; width: 16px;"></i>
                  <span>Expected: <strong>₹{{ number_format($profile->expected_salary_min) }}/mo</strong></span>
                </div>
              @endif
            </div>

            <!-- Masked Contact Notice -->
            <div style="background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--border-light); border-radius: var(--radius-md); padding: 0.75rem; margin-bottom: 1rem; font-size: 0.82rem;">
              @if($hasAccess)
                <div style="color: #10B981; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;">
                  <i class="fas fa-check-circle"></i>
                  <strong>Direct Contact Coordinates:</strong>
                </div>
                <div style="color: var(--text-primary); font-family: var(--font-mono, monospace);">
                  <span>Email: {{ $candidate->email }}</span><br>
                  <span>Phone: {{ $candidate->phone }}</span>
                </div>
              @else
                <div style="color: var(--text-muted); display: flex; align-items: center; gap: 0.5rem;">
                  <i class="fas fa-shield-halved" style="color: #38BDF8;"></i>
                  <span>DPDP Protected: <code>{{ substr($candidate->email, 0, 1) }}***@***.com</code> | <code>+91 {{ substr($candidate->phone, 0, 2) }}****{{ substr($candidate->phone, -2) }}</code></span>
                </div>
              @endif
            </div>
          </div>

          <!-- Action Buttons -->
          <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
            @if($hasAccess)
              <a href="{{ route('employer.candidates.resume-stream', $candidate->id) }}" class="btn btn-primary" style="flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem;">
                <i class="fas fa-eye"></i> Stream Resume
              </a>
            @elseif($existingReq && $existingReq->isPending())
              <button disabled class="btn btn-outline" style="flex: 1; opacity: 0.7; justify-content: center; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #F59E0B; border-color: rgba(245, 158, 11, 0.4);">
                <i class="fas fa-clock"></i> Consent Pending
              </button>
            @else
              <button type="button" class="btn btn-outline" onclick="openAccessModal({{ $candidate->id }}, '{{ addslashes($candidateRef) }}', '{{ addslashes($highestQual?->stream_degree ?? 'Registered Candidate') }}')" style="flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem;">
                <i class="fas fa-key"></i> Request Access
              </button>
            @endif

            <a href="{{ route('employer.candidates.show', $candidate->id) }}" class="btn btn-outline btn-sm" style="display: inline-flex; align-items: center; justify-content: center;" title="View Candidate Overview">
              <i class="fas fa-arrow-right"></i>
            </a>
          </div>
        </div>
      @endforeach
    </div>

    <div style="margin-top: 2rem;">
      {{ $candidates->links() }}
    </div>
  @endif
</div>

<!-- Modal: Request Access -->
<div id="accessModal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; padding: 1rem;">
  <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); width: 100%; max-width: 520px; padding: 2rem; box-shadow: 0 20px 40px rgba(0,0,0,0.3);">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
      <h3 style="font-size: 1.25rem; font-family: var(--font-heading); margin: 0; color: var(--text-primary);">
        Request Full Talent Access
      </h3>
      <button type="button" onclick="closeAccessModal()" style="background: none; border: none; font-size: 1.25rem; color: var(--text-muted); cursor: pointer;">&times;</button>
    </div>

    <p style="color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1.25rem;">
      Requesting access for <strong id="modalCandidateRef" style="color: var(--text-primary);"></strong> (<span id="modalCandidateDegree"></span>).
      Under DPDP Act 2023, the candidate must authorize your access request.
    </p>

    <form id="accessForm" method="POST" action="">
      @csrf

      <div style="margin-bottom: 1.25rem;">
        <label style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text-primary);">
          Link with Open Vacancy Requisition (Optional):
        </label>
        <select name="vacancy_id" class="form-control" style="width: 100%;">
          <option value="">General Talent Sourcing (No specific post)</option>
          @foreach($employerVacancies as $vac)
            <option value="{{ $vac->id }}">{{ $vac->title }} ({{ $vac->location }})</option>
          @endforeach
        </select>
      </div>

      <div style="margin-bottom: 1.5rem;">
        <label style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text-primary);">
          Hiring Purpose & Requisition Justification *
        </label>
        <textarea name="hiring_reason" rows="4" class="form-control" placeholder="Specify position title, expected responsibilities, or reasons for candidate sourcing (minimum 10 characters)..." required style="width: 100%; font-size: 0.88rem;"></textarea>
      </div>

      <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
        <button type="button" class="btn btn-outline btn-sm" onclick="closeAccessModal()">Cancel</button>
        <button type="submit" class="btn btn-primary btn-sm">
          <i class="fas fa-paper-plane"></i> Submit Access Request
        </button>
      </div>
    </form>
  </div>
</div>

<script>
  function openAccessModal(id, candidateRef, degree) {
    document.getElementById('modalCandidateRef').innerText = candidateRef;
    document.getElementById('modalCandidateDegree').innerText = degree;
    document.getElementById('accessForm').action = "/employer/candidates/" + id + "/request-access";
    document.getElementById('accessModal').style.display = 'flex';
  }

  function closeAccessModal() {
    document.getElementById('accessModal').style.display = 'none';
  }
</script>
@endsection