@extends('layouts.employer')

@section('content')
<div class="employer-candidate-show">
  <!-- Top Navigation & Actions -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
    <div>
      <a href="{{ route('employer.candidates.index') }}" class="btn btn-outline btn-sm" style="margin-bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem;">
        <i class="fas fa-arrow-left"></i> Back to Candidate Pool
      </a>
      <h1 style="font-size: 1.75rem; font-family: var(--font-heading); margin: 0;">
        @if($hasApprovedAccess)
          {{ $candidate->name }}
        @else
          Candidate #{{ $candidate->registration_id ?: $candidate->id }}
        @endif
      </h1>
      <span style="font-size: 0.88rem; color: var(--text-muted);">
        Registration ID: <strong>#{{ $candidate->registration_id ?: 'PENDING' }}</strong> • District: {{ ucfirst($profile->district) }}
      </span>
    </div>

    <div>
      @if($hasApprovedAccess)
        <a href="{{ route('employer.candidates.resume-stream', $candidate->id) }}" class="btn btn-primary" style="display: inline-flex; align-items: center; gap: 0.5rem;">
          <i class="fas fa-eye"></i> Stream Watermarked Resume
        </a>
      @elseif($existingRequest && $existingRequest->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.88rem; padding: 0.5rem 1rem;">
          <i class="fas fa-clock"></i> Access Request Under Candidate Review
        </span>
      @else
        <button type="button" class="btn btn-primary" onclick="document.getElementById('accessRequestSection').scrollIntoView({ behavior: 'smooth' });">
          <i class="fas fa-key"></i> Request Full Profile & Resume Access
        </button>
      @endif
    </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('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

  <!-- Main Profile Cards Grid -->
  <div style="display: grid; grid-template-columns: 1fr 340px; gap: 2rem;">
    <div style="display: flex; flex-direction: column; gap: 1.5rem;">
      <!-- Academic Qualifications Table -->
      <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.75rem;">
        <h2 style="font-size: 1.2rem; font-family: var(--font-heading); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
          <i class="fas fa-graduation-cap" style="color: var(--accent);"></i>
          <span>Academic Qualifications & Degrees</span>
        </h2>

        @if($profile->qualifications->isEmpty())
          <p style="color: var(--text-muted); font-size: 0.9rem; margin: 0;">No qualifications recorded.</p>
        @else
          <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem;">
            <thead>
              <tr style="border-bottom: 2px solid var(--border-light); text-align: left; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase;">
                <th style="padding: 0.75rem 0.5rem;">Level</th>
                <th style="padding: 0.75rem 0.5rem;">Degree / Course</th>
                <th style="padding: 0.75rem 0.5rem;">Board / University</th>
                <th style="padding: 0.75rem 0.5rem;">Year</th>
                <th style="padding: 0.75rem 0.5rem;">Score</th>
              </tr>
            </thead>
            <tbody>
              @foreach($profile->qualifications as $q)
                <tr style="border-bottom: 1px solid var(--border-light);">
                  <td style="padding: 0.75rem 0.5rem; font-weight: 600; color: #38BDF8;">{{ $q->level }}</td>
                  <td style="padding: 0.75rem 0.5rem; color: var(--text-primary); font-weight: 500;">{{ $q->stream_degree }}</td>
                  <td style="padding: 0.75rem 0.5rem; color: var(--text-muted);">{{ $q->board_university ?: 'Recognized Institution' }}</td>
                  <td style="padding: 0.75rem 0.5rem; color: var(--text-muted);">{{ $q->passing_year }}</td>
                  <td style="padding: 0.75rem 0.5rem; font-weight: 600; color: #10B981;">
                    {{ $q->percentage ? $q->percentage . '%' : ($q->grade ?: 'Passed') }}
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        @endif
      </div>

      <!-- Placement & Career Preferences -->
      <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.75rem;">
        <h2 style="font-size: 1.2rem; font-family: var(--font-heading); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
          <i class="fas fa-briefcase" style="color: var(--accent);"></i>
          <span>Placement & Industry Preferences</span>
        </h2>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; font-size: 0.9rem;">
          <div>
            <span style="font-size: 0.8rem; color: var(--text-muted); display: block; text-transform: uppercase;">Preferred District</span>
            <strong style="color: var(--text-primary);">{{ ucfirst($profile->preferred_district ?: 'Any in Maharashtra') }}</strong>
          </div>

          <div>
            <span style="font-size: 0.8rem; color: var(--text-muted); display: block; text-transform: uppercase;">Preferred Sector</span>
            <strong style="color: var(--text-primary);">{{ $profile->preferred_sector ?: 'Open / Cross-Sector' }}</strong>
          </div>

          <div>
            <span style="font-size: 0.8rem; color: var(--text-muted); display: block; text-transform: uppercase;">Expected Salary</span>
            <strong style="color: #10B981;">
              {{ $profile->expected_salary_min ? '₹' . number_format($profile->expected_salary_min) . '/mo' : 'Negotiable' }}
            </strong>
          </div>

          <div>
            <span style="font-size: 0.8rem; color: var(--text-muted); display: block; text-transform: uppercase;">UIDAI Aadhaar Status</span>
            <strong style="color: #10B981;"><i class="fas fa-circle-check"></i> Verified Digital ID</strong>
          </div>
        </div>
      </div>

      <!-- Submit Access Request Box (if not already approved) -->
      @if(!$hasApprovedAccess)
        <div id="accessRequestSection" style="background: var(--bg-card); border: 2px solid rgba(56, 189, 248, 0.4); border-radius: var(--radius-lg); padding: 2rem;">
          <h2 style="font-size: 1.25rem; font-family: var(--font-heading); margin-bottom: 0.5rem; color: #38BDF8; display: flex; align-items: center; gap: 0.5rem;">
            <i class="fas fa-key"></i>
            <span>Request Full Resume & Contact Information</span>
          </h2>
          <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; line-height: 1.5;">
            In compliance with the Digital Personal Data Protection (DPDP) Act 2023, candidate contact coordinates are restricted. Please provide your hiring requisition details below to submit a formal access request.
          </p>

          <form method="POST" action="{{ route('employer.candidates.request-access', $candidate->id) }}">
            @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);">
                Associated Requisition / Vacancy Post (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 Justification & Position Overview *
              </label>
              <textarea name="hiring_reason" rows="4" class="form-control" placeholder="Specify role requirements, hiring timeline, or reasons for candidate sourcing (minimum 10 characters)..." required style="width: 100%; font-size: 0.88rem;"></textarea>
            </div>

            <button type="submit" class="btn btn-primary" style="display: inline-flex; align-items: center; gap: 0.5rem;">
              <i class="fas fa-paper-plane"></i> Submit Access Request
            </button>
          </form>
        </div>
      @endif
    </div>

    <!-- Right Column: Candidate Security & Contact Card -->
    <div style="display: flex; flex-direction: column; gap: 1.5rem;">
      <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.5rem;">
        <h3 style="font-size: 1.05rem; font-family: var(--font-heading); margin-bottom: 1rem; color: var(--text-primary);">
          Candidate Contact Coordinates
        </h3>

        @if($hasApprovedAccess)
          <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem; font-size: 0.85rem; color: #10B981;">
            <i class="fas fa-lock-open"></i> Full access granted. Contact details unmasked.
          </div>

          <div style="display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.9rem;">
            <div>
              <span style="font-size: 0.8rem; color: var(--text-muted); display: block;">Email</span>
              <strong style="color: var(--text-primary); font-family: var(--font-mono, monospace);">{{ $candidate->email }}</strong>
            </div>
            <div>
              <span style="font-size: 0.8rem; color: var(--text-muted); display: block;">Phone Number</span>
              <strong style="color: var(--text-primary); font-family: var(--font-mono, monospace);">{{ $candidate->phone }}</strong>
            </div>
            <div>
              <span style="font-size: 0.8rem; color: var(--text-muted); display: block;">Address</span>
              <span style="color: var(--text-primary);">{{ $profile->address_line ?: $profile->district }}</span>
            </div>
          </div>
        @else
          <div style="background: rgba(245, 158, 11, 0.08); border: 1px dashed rgba(245, 158, 11, 0.3); border-radius: var(--radius-md); padding: 1rem; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5;">
            <i class="fas fa-shield-halved" style="color: #F59E0B; margin-right: 0.25rem;"></i>
            <strong>Masked under DPDP Act:</strong>
            <div style="margin-top: 0.5rem; font-family: var(--font-mono, monospace);">
              <div>Email: <code>{{ substr($candidate->email, 0, 1) }}***@***.com</code></div>
              <div>Phone: <code>+91 {{ substr($candidate->phone, 0, 2) }}****{{ substr($candidate->phone, -2) }}</code></div>
            </div>
          </div>
        @endif
      </div>
    </div>
  </div>
</div>
@endsection