@extends('layouts.app')

@section('content')
<main id="mainContent">
  <!-- Screen Header -->
  <header class="page-header" style="padding: 3rem 0 2rem; background: var(--bg-surface); border-bottom: 1px solid var(--border-light);">
    <div class="container" style="text-align: center;">
      <span class="section-badge" style="margin-bottom: 0.5rem; background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3);">
        <i class="fas fa-certificate"></i> Digital Credential Registry • Verified Record
      </span>
      <h1 style="font-size: 2rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin: 0 0 0.5rem 0;">
        Internship Credential Verification
      </h1>
      <p style="color: var(--text-muted); font-size: 0.95rem; max-width: 600px; margin: 0 auto;">
        Public record confirming the successful training, evaluation, and issuance of credentials under the Zhelhire & MahaSwayam skill network.
      </p>
    </div>
  </header>

  <section class="section" style="padding: 3rem 0;">
    <div class="container" style="max-width: 780px;">
      <div style="background: var(--bg-card); border: 2px solid rgba(16, 185, 129, 0.4); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.08);">
        
        <!-- Verification Success Banner -->
        <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: var(--radius-md); padding: 1.25rem; display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;">
          <div style="width: 48px; height: 48px; border-radius: 50%; background: #10b981; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0;">
            <i class="fas fa-check"></i>
          </div>
          <div>
            <strong style="color: #10b981; font-size: 1.1rem; display: block;">Official Credential Authenticated</strong>
            <span style="font-size: 0.88rem; color: var(--text-muted);">This certificate is officially registered, tamper-checked, and active in the central state-wide database.</span>
          </div>
        </div>

        <!-- Credential Metadata Details Table -->
        <div style="margin-bottom: 2rem;">
          <table style="width: 100%; border-collapse: collapse; font-size: 0.95rem;">
            <tbody>
              <tr style="border-bottom: 1px solid var(--border-light);">
                <td style="padding: 0.75rem 0; color: var(--text-muted); width: 35%; font-weight: 600;">Certificate Ref:</td>
                <td style="padding: 0.75rem 0; font-family: var(--font-mono, monospace); font-weight: 700; color: #38bdf8;">
                  {{ $certificate->certificate_number }}
                </td>
              </tr>
              <tr style="border-bottom: 1px solid var(--border-light);">
                <td style="padding: 0.75rem 0; color: var(--text-muted); font-weight: 600;">Awarded To:</td>
                <td style="padding: 0.75rem 0; font-weight: 700; font-size: 1.1rem; color: var(--text-primary);">
                  {{ $user->name }}
                </td>
              </tr>
              <tr style="border-bottom: 1px solid var(--border-light);">
                <td style="padding: 0.75rem 0; color: var(--text-muted); font-weight: 600;">Program / Cohort:</td>
                <td style="padding: 0.75rem 0; font-weight: 600; color: var(--text-primary);">
                  {{ $certificate->title }}
                </td>
              </tr>
              <tr style="border-bottom: 1px solid var(--border-light);">
                <td style="padding: 0.75rem 0; color: var(--text-muted); font-weight: 600;">Domain:</td>
                <td style="padding: 0.75rem 0; font-weight: 600; color: var(--text-primary);">
                  {{ $certificate->domain }}
                </td>
              </tr>
              <tr style="border-bottom: 1px solid var(--border-light);">
                <td style="padding: 0.75rem 0; color: var(--text-muted); font-weight: 600;">Training Duration:</td>
                <td style="padding: 0.75rem 0; color: var(--text-primary);">
                  {{ $certificate->start_date->format('d M Y') }} to {{ $certificate->end_date->format('d M Y') }} ({{ $certificate->durationFormatted() }})
                </td>
              </tr>
              <tr style="border-bottom: 1px solid var(--border-light);">
                <td style="padding: 0.75rem 0; color: var(--text-muted); font-weight: 600;">Performance Rating:</td>
                <td style="padding: 0.75rem 0; font-weight: 700; color: #10b981;">
                  {{ $certificate->performance_rating }}
                </td>
              </tr>
              <tr style="border-bottom: 1px solid var(--border-light);">
                <td style="padding: 0.75rem 0; color: var(--text-muted); font-weight: 600;">Supervising Mentor:</td>
                <td style="padding: 0.75rem 0; color: var(--text-primary);">
                  {{ $certificate->mentor_name }}
                </td>
              </tr>
              <tr>
                <td style="padding: 0.75rem 0; color: var(--text-muted); font-weight: 600;">Date of Official Issue:</td>
                <td style="padding: 0.75rem 0; color: var(--text-primary);">
                  {{ $certificate->issue_date->format('d F Y') }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div style="text-align: center; border-top: 1px solid var(--border-light); padding-top: 1.5rem;">
          <a href="{{ route('home') }}" class="btn btn-outline btn-sm">
            <i class="fas fa-home"></i> Return to Zhelhire Home
          </a>
        </div>
      </div>
    </div>
  </section>
</main>
@endsection