@extends('layouts.jobseeker')

@section('content')
<div class="jobseeker-access-requests-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;">Employer Talent Access Grants</h1>
      <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">
        Review, authorize, or revoke employer access requests to your full verified curriculum vitae and contact coordinates.
      </p>
    </div>

    <div>
      <a href="{{ route('jobseeker.privacy.index') }}" class="btn btn-outline" style="display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem;">
        <i class="fas fa-sliders"></i>
        <span>Privacy Settings</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

  <!-- KPI Counter Cards -->
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">
    <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem; border-left: 4px solid #F59E0B;">
      <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.35rem;">Awaiting Your Decision</div>
      <div style="font-size: 1.75rem; font-weight: 700; color: #F59E0B; font-family: var(--font-heading);">
        {{ $counts['pending'] }}
      </div>
    </div>

    <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem; border-left: 4px solid #10B981;">
      <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.35rem;">Active Grants</div>
      <div style="font-size: 1.75rem; font-weight: 700; color: #10B981; font-family: var(--font-heading);">
        {{ $counts['approved'] }}
      </div>
    </div>

    <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem; border-left: 4px solid #38BDF8;">
      <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.35rem;">Lifetime Sourcing Requests</div>
      <div style="font-size: 1.75rem; font-weight: 700; color: #38BDF8; font-family: var(--font-heading);">
        {{ $counts['total'] }}
      </div>
    </div>
  </div>

  <!-- Filter Navigation Tabs -->
  <div style="display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-light); padding-bottom: 0.5rem;">
    <a href="{{ route('jobseeker.access-requests.index', ['status' => 'all']) }}"
       style="padding: 0.5rem 1rem; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; text-decoration: none; {{ $status === 'all' ? 'background: rgba(56, 189, 248, 0.15); color: #38BDF8;' : 'color: var(--text-muted);' }}">
      All Requests
    </a>

    <a href="{{ route('jobseeker.access-requests.index', ['status' => 'pending']) }}"
       style="padding: 0.5rem 1rem; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; text-decoration: none; {{ $status === 'pending' ? 'background: rgba(245, 158, 11, 0.15); color: #F59E0B;' : 'color: var(--text-muted);' }}">
      Pending Action ({{ $counts['pending'] }})
    </a>

    <a href="{{ route('jobseeker.access-requests.index', ['status' => 'approved']) }}"
       style="padding: 0.5rem 1rem; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; text-decoration: none; {{ $status === 'approved' ? 'background: rgba(16, 185, 129, 0.15); color: #10B981;' : 'color: var(--text-muted);' }}">
      Active ({{ $counts['approved'] }})
    </a>

    <a href="{{ route('jobseeker.access-requests.index', ['status' => 'history']) }}"
       style="padding: 0.5rem 1rem; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; text-decoration: none; {{ $status === 'history' ? 'background: rgba(148, 163, 184, 0.15); color: #94A3B8;' : 'color: var(--text-muted);' }}">
      Expired & Declined
    </a>
  </div>

  <!-- Requests Listing -->
  @if($requests->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-folder-open" 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 Access Requests Found
      </h3>
      <p style="color: var(--text-muted); font-size: 0.9rem; max-width: 480px; margin: 0 auto;">
        When verified employers discover your anonymized qualification profile and request full resume access, you will receive notifications here to approve or decline.
      </p>
    </div>
  @else
    <div style="display: flex; flex-direction: column; gap: 1.25rem;">
      @foreach($requests as $req)
        @php
          $employerName = $req->employer->employerProfile?->company_name ?: $req->employer->name;
          $industry = $req->employer->employerProfile?->industry ?? 'Enterprise Recruitment';
          $isVerified = $req->employer->employerProfile?->isVerified() ?? false;
        @endphp

        <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem;">
          <div style="flex: 1; min-width: 320px;">
            <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;">
              @if($req->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.78rem;">
                  <i class="fas fa-clock"></i> Pending Your Consent
                </span>
              @elseif($req->isActive())
                <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.78rem;">
                  <i class="fas fa-check-circle"></i> Active Grant
                </span>
              @elseif($req->isRejected())
                <span class="badge" style="background: rgba(239, 68, 68, 0.15); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.3); font-size: 0.78rem;">
                  <i class="fas fa-times-circle"></i> Declined
                </span>
              @elseif($req->isExpired())
                <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.78rem;">
                  <i class="fas fa-hourglass-end"></i> Expired
                </span>
              @else
                <span class="badge" style="background: rgba(148, 163, 184, 0.15); color: #94A3B8; font-size: 0.78rem;">
                  {{ ucfirst($req->status) }}
                </span>
              @endif

              <span style="font-size: 0.82rem; color: var(--text-muted);">
                Requested on {{ $req->requested_at?->format('d M Y, h:i A') }}
              </span>
            </div>

            <h3 style="font-size: 1.25rem; font-family: var(--font-heading); margin: 0 0 0.35rem 0; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem;">
              <span>{{ $employerName }}</span>
              @if($isVerified)
                <span title="Government Verified Enterprise" style="color: #10B981; font-size: 0.95rem;">
                  <i class="fas fa-circle-check"></i>
                </span>
              @endif
            </h3>

            <div style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0.75rem; display: flex; flex-wrap: wrap; gap: 1rem;">
              <span><i class="fas fa-building" style="color: var(--accent); margin-right: 0.25rem;"></i> {{ $industry }}</span>
              @if($req->vacancy)
                <span><i class="fas fa-briefcase" style="color: var(--accent); margin-right: 0.25rem;"></i> Linked Requisition: <strong>{{ $req->vacancy->title }}</strong></span>
              @endif
            </div>

            <div style="background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 0.85rem 1rem; margin-top: 0.75rem;">
              <strong style="font-size: 0.82rem; color: var(--text-muted); display: block; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.25rem;">
                Hiring Purpose / Justification:
              </strong>
              <p style="font-size: 0.9rem; color: var(--text-primary); margin: 0; line-height: 1.5;">
                "{{ $req->hiring_reason }}"
              </p>

              @if($req->rejection_reason)
                <div style="margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--border-light); font-size: 0.85rem; color: #EF4444;">
                  <strong>Declined Reason:</strong> {{ $req->rejection_reason }}
                </div>
              @endif
            </div>

            @if($req->isActive())
              <div style="margin-top: 0.75rem; font-size: 0.85rem; color: #10B981; display: flex; align-items: center; gap: 0.5rem;">
                <i class="fas fa-calendar-check"></i>
                <span>Access valid until <strong>{{ $req->expires_at?->format('d M Y, h:i A') }}</strong> ({{ (int) now()->diffInDays($req->expires_at, false) }} days remaining)</span>
                @if($req->views_count > 0)
                  <span style="color: var(--text-muted); margin-left: auto;">
                    <i class="fas fa-eye"></i> Viewed {{ $req->views_count }} {{ Str::plural('time', $req->views_count) }}
                  </span>
                @endif
              </div>
            @endif
          </div>

          <!-- Actions -->
          <div style="display: flex; flex-direction: column; gap: 0.5rem; min-width: 200px;">
            @if($req->isPending())
              <form method="POST" action="{{ route('jobseeker.access-requests.approve', $req->id) }}">
                @csrf
                <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem;">
                  <i class="fas fa-check"></i> Authorize Access (30d)
                </button>
              </form>

              <button type="button" class="btn btn-outline" onclick="openDeclineModal({{ $req->id }}, '{{ addslashes($employerName) }}')" style="width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: #EF4444; border-color: rgba(239, 68, 68, 0.4);">
                <i class="fas fa-xmark"></i> Decline Request
              </button>
            @elseif($req->isActive())
              <form method="POST" action="{{ route('jobseeker.access-requests.revoke', $req->id) }}" onsubmit="return confirm('Are you sure you want to revoke resume access for this employer immediately?');">
                @csrf
                <button type="submit" class="btn btn-outline" style="width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: #EF4444; border-color: rgba(239, 68, 68, 0.4);">
                  <i class="fas fa-ban"></i> Revoke Access Now
                </button>
              </form>
            @endif
          </div>
        </div>
      @endforeach

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

<!-- Modal: Decline Request -->
<div id="declineModal" 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: 480px; padding: 2rem; box-shadow: 0 20px 40px rgba(0,0,0,0.3);">
    <h3 style="font-size: 1.25rem; font-family: var(--font-heading); margin-bottom: 0.5rem; color: var(--text-primary);">
      Decline Access Request
    </h3>
    <p style="color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1.25rem;">
      Decline talent access for <strong id="declineEmployerName" style="color: var(--text-primary);"></strong>. You may provide an optional reason.
    </p>

    <form id="declineForm" 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);">
          Reason for Declining (Optional):
        </label>
        <textarea name="rejection_reason" rows="3" class="form-control" placeholder="e.g. Currently not looking for relocation / Role mismatch..." 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="closeDeclineModal()">Cancel</button>
        <button type="submit" class="btn btn-danger btn-sm" style="background: #EF4444; color: #fff; border: none;">
          Confirm Decline
        </button>
      </div>
    </form>
  </div>
</div>

<script>
  function openDeclineModal(id, employerName) {
    document.getElementById('declineEmployerName').innerText = employerName;
    document.getElementById('declineForm').action = "/jobseeker/access-requests/" + id + "/reject";
    document.getElementById('declineModal').style.display = 'flex';
  }

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