@extends('layouts.admin')

@section('title', 'Executive Dashboard')
@section('page-title', 'Executive Dashboard & Command Overview')

@section('content')
<!-- Super Admin Welcome & System State -->
<div class="admin-card" style="margin-bottom: 2rem; background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); padding: 1.75rem;">
  <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
    <div>
      <div style="display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem;">
        <span class="badge" style="background: rgba(14, 165, 233, 0.25); color: #38BDF8; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase;">
          <i class="fas fa-shield-alt"></i> Super Admin Portal
        </span>
        <span style="font-size: 0.8rem; color: #94A3B8;">Statewide Operational Visibility</span>
      </div>
      <h1 style="font-size: 1.5rem; font-family: var(--font-heading); margin: 0; color: #fff;">
        Welcome back, {{ Auth::user()->name }}
      </h1>
      <p style="margin: 0.35rem 0 0; font-size: 0.88rem; color: #94A3B8;">
        Central administrative console monitoring registered candidates, verified enterprise employers, active vacancies, and statutory compliance across all 36 Maharashtra districts.
      </p>
    </div>

    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
      <a href="{{ route('admin.jobseekers.index') }}" class="btn btn-sm" style="background: var(--accent); color: #fff; font-weight: 600;">
        <i class="fas fa-user-graduate"></i> Candidate Registry
      </a>
      <a href="{{ route('admin.employers.index') }}" class="btn btn-sm" style="background: #10B981; color: #fff; font-weight: 600;">
        <i class="fas fa-building-circle-check"></i> Employer Queue
      </a>
      <a href="{{ route('admin.jobs.create') }}" class="btn btn-sm" style="background: rgba(255, 255, 255, 0.15); color: #fff; font-weight: 600; border: 1px solid rgba(255,255,255,0.2);">
        <i class="fas fa-plus"></i> Post Vacancy
      </a>
    </div>
  </div>
</div>

<!-- Core Employment Exchange Metric Cards (The 4 Pillar Metrics) -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">

  <!-- 1. Total Jobseekers -->
  <a href="{{ route('admin.jobseekers.index') }}" style="text-decoration: none; color: inherit;">
    <div class="admin-card" style="display: flex; align-items: center; gap: 1.25rem; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;">
      <div style="width: 56px; height: 56px; border-radius: var(--radius-md); background: rgba(0, 102, 255, 0.12); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0;">
        <i class="fas fa-user-graduate"></i>
      </div>
      <div style="flex: 1;">
        <span style="font-size: 0.82rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Total Jobseekers</span>
        <strong style="font-size: 1.85rem; font-family: var(--font-heading); color: var(--text-heading); display: block; line-height: 1.2;">
          {{ $stats['total_jobseekers'] }}
        </strong>
        <span style="font-size: 0.75rem; color: var(--success); display: block; margin-top: 0.2rem;">
          <i class="fas fa-check-circle"></i> {{ $stats['verified_jobseekers'] }} Aadhaar Verified
        </span>
      </div>
    </div>
  </a>

  <!-- 2. Total Employers -->
  <a href="{{ route('admin.employers.index') }}" style="text-decoration: none; color: inherit;">
    <div class="admin-card" style="display: flex; align-items: center; gap: 1.25rem; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;">
      <div style="width: 56px; height: 56px; border-radius: var(--radius-md); background: rgba(16, 185, 129, 0.12); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0;">
        <i class="fas fa-building"></i>
      </div>
      <div style="flex: 1;">
        <span style="font-size: 0.82rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Total Employers</span>
        <strong style="font-size: 1.85rem; font-family: var(--font-heading); color: var(--text-heading); display: block; line-height: 1.2;">
          {{ $stats['total_employers'] }}
        </strong>
        <span style="font-size: 0.75rem; color: #b45309; display: block; margin-top: 0.2rem;">
          <i class="fas fa-hourglass-half"></i> {{ $stats['pending_employers'] }} Pending Verification
        </span>
      </div>
    </div>
  </a>

  <!-- 3. Total Vacancies -->
  <a href="{{ route('admin.jobs.index') }}" style="text-decoration: none; color: inherit;">
    <div class="admin-card" style="display: flex; align-items: center; gap: 1.25rem; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;">
      <div style="width: 56px; height: 56px; border-radius: var(--radius-md); background: rgba(245, 158, 11, 0.12); color: #f59e0b; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0;">
        <i class="fas fa-briefcase"></i>
      </div>
      <div style="flex: 1;">
        <span style="font-size: 0.82rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Total Vacancies</span>
        <strong style="font-size: 1.85rem; font-family: var(--font-heading); color: var(--text-heading); display: block; line-height: 1.2;">
          {{ $stats['total_jobs'] }}
        </strong>
        <span style="font-size: 0.75rem; color: var(--accent); display: block; margin-top: 0.2rem;">
          <i class="fas fa-bullhorn"></i> {{ $stats['active_jobs'] }} Active Openings
        </span>
      </div>
    </div>
  </a>

  <!-- 4. Total Applications -->
  <a href="{{ route('admin.applications.index') }}" style="text-decoration: none; color: inherit;">
    <div class="admin-card" style="display: flex; align-items: center; gap: 1.25rem; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;">
      <div style="width: 56px; height: 56px; border-radius: var(--radius-md); background: rgba(14, 165, 233, 0.12); color: #0284c7; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0;">
        <i class="fas fa-file-invoice"></i>
      </div>
      <div style="flex: 1;">
        <span style="font-size: 0.82rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Total Applications</span>
        <strong style="font-size: 1.85rem; font-family: var(--font-heading); color: var(--text-heading); display: block; line-height: 1.2;">
          {{ $stats['total_applications'] }}
        </strong>
        <span style="font-size: 0.75rem; color: var(--text-light); display: block; margin-top: 0.2rem;">
          {{ $stats['pending_applications'] }} Awaiting Review
        </span>
      </div>
    </div>
  </a>

</div>

<!-- Primary Two-Column Tables: Candidates & Employers -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 2rem; margin-bottom: 2rem;">

  <!-- Table 1: Recent Registered Jobseekers -->
  <div class="admin-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;">
      <div>
        <h3 style="font-size: 1.15rem; margin: 0; color: var(--text-heading); display: flex; align-items: center; gap: 0.5rem;">
          <i class="fas fa-users" style="color: var(--accent);"></i> Recent Registered Jobseekers
        </h3>
        <span style="font-size: 0.78rem; color: var(--text-light);">Latest MahaSwayam employment candidates</span>
      </div>
      <a href="{{ route('admin.jobseekers.index') }}" class="btn btn-outline btn-sm">
        View All Candidates ({{ $stats['total_jobseekers'] }})
      </a>
    </div>

    <div class="table-responsive">
      <table class="admin-table">
        <thead>
          <tr>
            <th>Candidate</th>
            <th>District</th>
            <th>Completion</th>
            <th>Status</th>
            <th style="text-align: right;">Action</th>
          </tr>
        </thead>
        <tbody>
          @forelse($recentJobseekers as $js)
            @php
              $prof = $js->jobseekerProfile;
              $comp = $js->profile_completion ?? ($prof ? $prof->calculateCompletionPercentage() : 0);
            @endphp
            <tr>
              <td>
                <strong style="display: block; font-size: 0.9rem; color: var(--text-heading);">{{ $js->name }}</strong>
                <span style="font-size: 0.78rem; color: var(--text-light); font-family: monospace;">
                  {{ $js->registration_id ?? $js->email }}
                </span>
              </td>
              <td>
                <span style="font-size: 0.85rem;">{{ $prof?->district ?? $js->assigned_district ?? 'Maharashtra' }}</span>
              </td>
              <td>
                <span class="badge" style="background: {{ $comp >= 80 ? 'rgba(16, 185, 129, 0.15)' : 'rgba(0, 102, 255, 0.12)' }}; color: {{ $comp >= 80 ? 'var(--success)' : 'var(--accent)' }}; font-size: 0.75rem;">
                  {{ $comp }}%
                </span>
              </td>
              <td>
                @if($js->status === 'active')
                  <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); font-size: 0.75rem;">Active</span>
                @else
                  <span class="badge" style="background: rgba(239, 68, 68, 0.15); color: #ef4444; font-size: 0.75rem;">{{ ucfirst($js->status) }}</span>
                @endif
              </td>
              <td style="text-align: right;">
                <a href="{{ route('admin.jobseekers.show', $js->id) }}" class="btn btn-outline btn-sm" style="padding: 0.25rem 0.55rem; font-size: 0.78rem;">
                  Profile <i class="fas fa-arrow-right"></i>
                </a>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="5" style="text-align: center; color: var(--text-light); padding: 1.5rem;">
                No registered jobseekers recorded yet.
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  <!-- Table 2: Recent Employer Verifications -->
  <div class="admin-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;">
      <div>
        <h3 style="font-size: 1.15rem; margin: 0; color: var(--text-heading); display: flex; align-items: center; gap: 0.5rem;">
          <i class="fas fa-building" style="color: var(--success);"></i> Recent Employer Registrations
        </h3>
        <span style="font-size: 0.78rem; color: var(--text-light);">Corporate entities & statutory document submissions</span>
      </div>
      <a href="{{ route('admin.employers.index') }}" class="btn btn-outline btn-sm">
        View All Employers ({{ $stats['total_employers'] }})
      </a>
    </div>

    <div class="table-responsive">
      <table class="admin-table">
        <thead>
          <tr>
            <th>Company</th>
            <th>District</th>
            <th>PAN / GSTIN</th>
            <th>Verification</th>
            <th style="text-align: right;">Action</th>
          </tr>
        </thead>
        <tbody>
          @forelse($recentEmployers as $emp)
            <tr>
              <td>
                <strong style="display: block; font-size: 0.9rem; color: var(--text-heading);">{{ $emp->company_name }}</strong>
                <span style="font-size: 0.78rem; color: var(--text-light);">{{ $emp->entity_type }}</span>
              </td>
              <td>
                <span style="font-size: 0.85rem;">{{ $emp->district ?? 'Unassigned' }}</span>
              </td>
              <td>
                <span style="font-family: monospace; font-size: 0.78rem;">{{ $emp->pan ?? 'N/A' }}</span>
              </td>
              <td>
                @if($emp->isVerified())
                  <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); font-size: 0.75rem;">Verified</span>
                @elseif($emp->isPending())
                  <span class="badge" style="background: rgba(245, 158, 11, 0.15); color: #b45309; font-size: 0.75rem;">Pending</span>
                @else
                  <span class="badge" style="background: rgba(239, 68, 68, 0.15); color: #ef4444; font-size: 0.75rem;">{{ ucfirst($emp->verification_status) }}</span>
                @endif
              </td>
              <td style="text-align: right;">
                <a href="{{ route('admin.employers.show', $emp->id) }}" class="btn btn-outline btn-sm" style="padding: 0.25rem 0.55rem; font-size: 0.78rem;">
                  Audit <i class="fas fa-arrow-right"></i>
                </a>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="5" style="text-align: center; color: var(--text-light); padding: 1.5rem;">
                No employer profiles registered yet.
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

</div>

<!-- Secondary Two-Column Tables: Applications & Inquiries -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 2rem;">

  <!-- Recent Applications -->
  <div class="admin-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;">
      <h3 style="font-size: 1.15rem; margin: 0; color: var(--text-heading); display: flex; align-items: center; gap: 0.5rem;">
        <i class="fas fa-file-invoice" style="color: #0284c7;"></i> Recent Applications
      </h3>
      <a href="{{ route('admin.applications.index') }}" class="btn btn-outline btn-sm">View All</a>
    </div>

    <div class="table-responsive">
      <table class="admin-table">
        <thead>
          <tr>
            <th>Candidate</th>
            <th>Role</th>
            <th>Status</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @forelse($recentApplications as $app)
            <tr>
              <td>
                <strong style="display: block; font-size: 0.9rem;">{{ $app->name }}</strong>
                <span style="font-size: 0.78rem; color: var(--text-light);">{{ $app->email }}</span>
              </td>
              <td>
                <span style="font-size: 0.85rem;">{{ $app->applied_role }}</span>
              </td>
              <td>
                <span class="badge badge-{{ $app->status === 'shortlisted' ? 'success' : ($app->status === 'rejected' ? 'danger' : 'primary') }}" style="font-size: 0.75rem;">
                  {{ ucfirst($app->status) }}
                </span>
              </td>
              <td>
                <a href="{{ route('admin.applications.show', $app->id) }}" class="btn btn-outline btn-sm" style="padding: 0.25rem 0.55rem; font-size: 0.78rem;">
                  Details
                </a>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="4" style="text-align: center; color: var(--text-light); padding: 1.5rem;">No candidate submissions yet.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  <!-- Recent Corporate Inquiries -->
  <div class="admin-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;">
      <h3 style="font-size: 1.15rem; margin: 0; color: var(--text-heading); display: flex; align-items: center; gap: 0.5rem;">
        <i class="fas fa-envelope-open-text" style="color: var(--accent-warm);"></i> Corporate Inquiries
      </h3>
      <a href="{{ route('admin.messages.index') }}" class="btn btn-outline btn-sm">View All</a>
    </div>

    <div class="table-responsive">
      <table class="admin-table">
        <thead>
          <tr>
            <th>Sender</th>
            <th>Service Interest</th>
            <th>Date</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @forelse($recentMessages as $msg)
            <tr>
              <td>
                <strong style="display: block; font-size: 0.9rem;">{{ $msg->name }}</strong>
                <span style="font-size: 0.78rem; color: var(--text-light);">{{ $msg->company ?: $msg->email }}</span>
              </td>
              <td>
                <span style="font-size: 0.85rem;">{{ ucfirst($msg->service ?: 'General') }}</span>
              </td>
              <td>
                <span style="font-size: 0.78rem; color: var(--text-light);">{{ $msg->created_at->diffForHumans() }}</span>
              </td>
              <td>
                <a href="{{ route('admin.messages.show', $msg->id) }}" class="btn btn-outline btn-sm" style="padding: 0.25rem 0.55rem; font-size: 0.78rem;">
                  Read
                </a>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="4" style="text-align: center; color: var(--text-light); padding: 1.5rem;">No corporate messages received.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

</div>
@endsection