@extends('layouts.jobseeker')

@section('content')
<div class="jobseeker-privacy-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;">Privacy Controls & DPDP Act Compliance</h1>
      <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">
        Manage your profile discovery settings, mask sensitive contact data, and inspect employer access logs.
      </p>
    </div>

    <div>
      <a href="{{ route('jobseeker.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-shield-halved"></i>
        <span>Manage Employer Access Grants ({{ $activeGrantsCount }})</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

  <!-- DPDP Act Statutory Notice -->
  <div style="background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.25); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 2rem; display: flex; gap: 1.25rem; align-items: flex-start;">
    <div style="width: 44px; height: 44px; border-radius: 50%; background: rgba(56, 189, 248, 0.2); color: #38BDF8; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0;">
      <i class="fas fa-gavel"></i>
    </div>
    <div style="flex: 1;">
      <strong style="color: #38BDF8; font-size: 1.05rem; display: block; margin-bottom: 0.25rem;">
        Digital Personal Data Protection (DPDP) Act 2023 Compliance
      </strong>
      <p style="color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; margin: 0;">
        Under Indian statutory privacy regulations, your personally identifiable information (phone number, email address, Aadhaar number, and home residence) is strictly protected. By default, employers can only see your educational qualifications, skills, and preferred districts. Full resume viewing requires your explicit, revocable consent.
      </p>
    </div>
  </div>

  <div style="display: grid; grid-template-columns: 1fr 340px; gap: 2rem;">
    <!-- Left Column: Privacy Preferences Form -->
    <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem;">
      <h2 style="font-size: 1.25rem; font-family: var(--font-heading); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
        <i class="fas fa-sliders" style="color: var(--accent);"></i>
        <span>Candidate Privacy Preferences</span>
      </h2>

      <form method="POST" action="{{ route('jobseeker.privacy.update') }}">
        @csrf
        @method('PUT')

        <!-- Toggle 1: Searchable in Talent Pool -->
        <div style="border-bottom: 1px solid var(--border-light); padding-bottom: 1.5rem; margin-bottom: 1.5rem;">
          <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;">
            <div>
              <strong style="font-size: 1rem; color: var(--text-primary); display: block; margin-bottom: 0.35rem;">
                Enable Talent Pool Discovery
              </strong>
              <p style="color: var(--text-muted); font-size: 0.88rem; margin: 0; line-height: 1.5;">
                Allow verified employers to discover your anonymized qualification profile when searching for candidates. If disabled, employers cannot find you in talent searches.
              </p>
            </div>
            <label style="position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; cursor: pointer;">
              <input type="checkbox" name="is_searchable" value="1" {{ old('is_searchable', $profile->is_searchable ?? true) ? 'checked' : '' }} style="opacity: 0; width: 0; height: 0;" id="toggleSearchable">
              <span class="privacy-slider" style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-light); transition: .3s; border-radius: 34px;"></span>
            </label>
          </div>
        </div>

        <!-- Toggle 2: Mask Sensitive Contact Coordinates -->
        <div style="border-bottom: 1px solid var(--border-light); padding-bottom: 1.5rem; margin-bottom: 1.5rem;">
          <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;">
            <div>
              <strong style="font-size: 1rem; color: var(--text-primary); display: block; margin-bottom: 0.35rem;">
                Conceal Contact Coordinates (Mask Phone & Email)
              </strong>
              <p style="color: var(--text-muted); font-size: 0.88rem; margin: 0; line-height: 1.5;">
                When active, your phone number, email address, and exact residence remain masked (e.g. <code>p***@***.com</code>) until an employer submits a formal access request and you approve it.
              </p>
            </div>
            <label style="position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; cursor: pointer;">
              <input type="checkbox" name="hide_contact_info" value="1" {{ old('hide_contact_info', $profile->hide_contact_info ?? true) ? 'checked' : '' }} style="opacity: 0; width: 0; height: 0;" id="toggleMask">
              <span class="privacy-slider" style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-light); transition: .3s; border-radius: 34px;"></span>
            </label>
          </div>
        </div>

        <!-- Toggle 3: Auto-Approve Verified Employers -->
        <div style="padding-bottom: 1.5rem; margin-bottom: 1.5rem;">
          <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;">
            <div>
              <strong style="font-size: 1rem; color: var(--text-primary); display: block; margin-bottom: 0.35rem;">
                Instant Access for Verified Employers
              </strong>
              <p style="color: var(--text-muted); font-size: 0.88rem; margin: 0; line-height: 1.5;">
                Automatically approve 30-day resume access for government-verified enterprise employers without manual confirmation for each request. You can revoke access at any time.
              </p>
            </div>
            <label style="position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; cursor: pointer;">
              <input type="checkbox" name="auto_approve_verified_employers" value="1" {{ old('auto_approve_verified_employers', $profile->auto_approve_verified_employers ?? false) ? 'checked' : '' }} style="opacity: 0; width: 0; height: 0;" id="toggleAutoApprove">
              <span class="privacy-slider" style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-light); transition: .3s; border-radius: 34px;"></span>
            </label>
          </div>
        </div>

        <div style="display: flex; justify-content: flex-end;">
          <button type="submit" class="btn btn-primary" style="padding: 0.65rem 1.75rem;">
            <i class="fas fa-save"></i> Save Privacy Preferences
          </button>
        </div>
      </form>
    </div>

    <!-- Right Column: Status & Recent Audit Logs -->
    <div style="display: flex; flex-direction: column; gap: 1.5rem;">
      <!-- Quick Status Card -->
      <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);">
          Access Permissions Status
        </h3>

        <div style="display: flex; flex-direction: column; gap: 0.85rem; font-size: 0.88rem;">
          <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 0.5rem;">
            <span style="color: var(--text-muted);">Active Employer Grants</span>
            <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: #10B981; font-weight: 700;">
              {{ $activeGrantsCount }} Active
            </span>
          </div>

          <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 0.5rem;">
            <span style="color: var(--text-muted);">Pending Review</span>
            <span class="badge" style="background: rgba(245, 158, 11, 0.15); color: #F59E0B; font-weight: 700;">
              {{ $pendingRequestsCount }} Pending
            </span>
          </div>

          <div style="display: flex; justify-content: space-between; align-items: center;">
            <span style="color: var(--text-muted);">Registration ID</span>
            <span style="font-family: var(--font-mono, monospace); font-weight: 700; color: #38BDF8;">
              #{{ $user->registration_id ?: 'PENDING' }}
            </span>
          </div>
        </div>

        <div style="margin-top: 1.25rem;">
          <a href="{{ route('jobseeker.access-requests.index') }}" class="btn btn-outline btn-sm" style="width: 100%; text-align: center; justify-content: center; display: flex;">
            View All Access Requests
          </a>
        </div>
      </div>

      <!-- Recent Audit Access Log Card -->
      <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); display: flex; align-items: center; gap: 0.5rem;">
          <i class="fas fa-clipboard-check" style="color: #38BDF8;"></i>
          <span>Data Access Audit Trail</span>
        </h3>

        @if($recentAuditLogs->isEmpty())
          <p style="color: var(--text-muted); font-size: 0.85rem; margin: 0;">
            No external access requests or profile views recorded yet.
          </p>
        @else
          <div style="display: flex; flex-direction: column; gap: 0.75rem;">
            @foreach($recentAuditLogs as $log)
              <div style="border-bottom: 1px solid var(--border-light); padding-bottom: 0.5rem; font-size: 0.82rem;">
                <div style="display: flex; justify-content: space-between; color: var(--text-muted); margin-bottom: 0.25rem;">
                  <span style="font-weight: 600; color: var(--text-primary);">{{ ucfirst($log->action ?? 'Access') }}</span>
                  <span>{{ $log->created_at->diffForHumans() }}</span>
                </div>
                <div style="color: var(--text-muted); font-size: 0.8rem; line-height: 1.4;">
                  {{ Str::limit($log->description, 70) }}
                </div>
              </div>
            @endforeach
          </div>
        @endif
      </div>
    </div>
  </div>
</div>

<style>
  input:checked + .privacy-slider {
    background-color: #10B981 !important;
  }
  input:focus + .privacy-slider {
    box-shadow: 0 0 1px #10B981;
  }
  .privacy-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
  }
  input:checked + .privacy-slider:before {
    transform: translateX(22px);
  }
</style>
@endsection