@extends('layouts.admin')

@section('title', 'Internship Credentials & Skill Cohorts | Admin Portal')

@section('content')
<div class="admin-internships-index">
  <!-- Header Bar -->
  <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;">Skill Development & Internship Credentials</h1>
      <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">Issue official appointment letters, track candidate cohort progress, and generate verified completion certificates.</p>
    </div>
    <div>
      <a href="{{ route('admin.internships.create') }}" class="btn btn-primary" style="display: inline-flex; align-items: center; gap: 0.5rem;">
        <i class="fas fa-plus"></i> Issue New Credential
      </a>
    </div>
  </div>

  @if(session('success'))
    <div class="alert alert-success" style="background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;">
      <i class="fas fa-check-circle" style="margin-right: 0.5rem;"></i> {{ session('success') }}
    </div>
  @endif

  <!-- Filters Toolbar -->
  <div class="admin-card" style="margin-bottom: 1.5rem; padding: 1.25rem;">
    <form method="GET" action="{{ route('admin.internships.index') }}" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
      <div style="flex: 2; min-width: 240px;">
        <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Search certificate #, candidate name, or email..." style="width: 100%; font-size: 0.88rem; padding: 0.6rem 0.85rem;">
      </div>

      <div style="flex: 1; min-width: 180px;">
        <select name="domain" class="form-control" onchange="this.form.submit()" style="width: 100%; font-size: 0.88rem; padding: 0.6rem 0.85rem;">
          <option value="">All Domains</option>
          <option value="Information Technology" {{ request('domain') === 'Information Technology' ? 'selected' : '' }}>Information Technology</option>
          <option value="Human Resources" {{ request('domain') === 'Human Resources' ? 'selected' : '' }}>Human Resources</option>
          <option value="Data Analytics" {{ request('domain') === 'Data Analytics' ? 'selected' : '' }}>Data Analytics</option>
          <option value="Corporate Operations" {{ request('domain') === 'Corporate Operations' ? 'selected' : '' }}>Corporate Operations</option>
        </select>
      </div>

      <button type="submit" class="btn btn-primary btn-sm" style="padding: 0.6rem 1.25rem;">
        <i class="fas fa-search"></i> Search
      </button>

      @if(request()->anyFilled(['search', 'domain']))
        <a href="{{ route('admin.internships.index') }}" class="btn btn-outline btn-sm" style="padding: 0.6rem;">Reset</a>
      @endif
    </form>
  </div>

  <!-- Certificates Table -->
  <div class="admin-card" style="padding: 0; overflow: hidden;">
    @if($certificates->isEmpty())
      <div style="padding: 4rem 2rem; text-align: center;">
        <div style="width: 64px; height: 64px; border-radius: 50%; background: var(--bg-surface); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 1rem;">
          <i class="fas fa-award"></i>
        </div>
        <h4 style="font-size: 1.15rem; margin-bottom: 0.5rem;">No internship records issued</h4>
        <p style="color: var(--text-muted); font-size: 0.9rem; max-width: 440px; margin: 0 auto 1.5rem;">Click below to issue an official appointment letter or completion certificate to an active candidate.</p>
        <a href="{{ route('admin.internships.create') }}" class="btn btn-primary btn-sm">Issue First Credential</a>
      </div>
    @else
      <div class="table-responsive">
        <table class="admin-table">
          <thead>
            <tr>
              <th>Certificate #</th>
              <th>Candidate</th>
              <th>Program & Domain</th>
              <th>Tenure</th>
              <th>Rating</th>
              <th>Status</th>
              <th style="text-align: right;">Action</th>
            </tr>
          </thead>
          <tbody>
            @foreach($certificates as $cert)
              <tr>
                <td style="font-family: var(--font-mono, monospace); font-weight: 700; color: #38bdf8; white-space: nowrap;">
                  #{{ $cert->certificate_number }}
                </td>
                <td>
                  <strong style="display: block; font-size: 0.92rem;">{{ $cert->user?->name ?? 'Candidate' }}</strong>
                  <span style="font-size: 0.78rem; color: var(--text-muted);">{{ $cert->user?->email }}</span>
                </td>
                <td>
                  <div style="font-weight: 600; font-size: 0.9rem;">{{ $cert->title }}</div>
                  <span style="font-size: 0.78rem; color: var(--text-muted);">{{ $cert->domain }}</span>
                </td>
                <td style="font-size: 0.85rem; color: var(--text-muted); white-space: nowrap;">
                  {{ $cert->start_date->format('d M Y') }} – {{ $cert->end_date->format('d M Y') }}<br>
                  <small>{{ $cert->durationFormatted() }}</small>
                </td>
                <td>
                  <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;">
                    {{ $cert->performance_rating }}
                  </span>
                </td>
                <td>
                  <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3);">
                    {{ ucfirst($cert->status) }}
                  </span>
                </td>
                <td style="text-align: right; white-space: nowrap;">
                  <a href="{{ route('internship.verify', $cert->certificate_number) }}" target="_blank" class="btn btn-outline btn-sm" style="padding: 0.3rem 0.6rem; font-size: 0.8rem;" title="Public Verification">
                    <i class="fas fa-qrcode"></i> QR
                  </a>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      <div style="padding: 1rem 1.25rem; border-top: 1px solid var(--border-light);">
        {{ $certificates->links('vendor.pagination.custom-simple') }}
      </div>
    @endif
  </div>
</div>
@endsection