@extends('siswa.layout')
@section('content')

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">

<style>
:root {
  --teal-primary: #0d9488;
  --teal-dark:    #0f766e;
  --teal-glow:    rgba(13,148,136,.25);
  --bg:           #edf9f8;
  --card-bg:      #ffffff;
  --text-main:    #0f2a2a;
  --text-muted:   #5f8080;
}

body { background: var(--bg); }

.qr-wrapper {
  max-width: 680px;
  margin: 2.5rem auto;
  padding: 0 1rem 4rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-main);
}

/* ── Hero ── */
.qr-hero {
  position: relative;
  border-radius: 24px;
  padding: 2.5rem 2.5rem 3.5rem;
  overflow: hidden;
  margin-bottom: -1.5rem;
  animation: fadeUp .5s ease both;
}
.qr-hero.passed { background: linear-gradient(135deg, #1e293b 0%, #0f172a 60%, #020617 100%); }
.qr-hero.failed { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 60%, #7f1d1d 100%); }

.qr-hero::before {
  content: '';
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  top: -120px; right: -80px;
  pointer-events: none;
}
.qr-hero::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.1);
  bottom: -60px; left: 40px;
  pointer-events: none;
}

.qr-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px;
  padding: 4px 14px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: 1rem;
}

.qr-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  position: relative;
  margin: 0;
}

.qr-hero-sub {
  font-size: .83rem;
  color: rgba(255,255,255,.6);
  margin-top: .45rem;
  position: relative;
}

/* ── Score Badge (floating) ── */
.score-badge {
  position: absolute;
  top: 1.8rem;
  right: 2rem;
  text-align: center;
}
.score-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.score-number {
  font-family: 'Syne', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.score-label {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-top: 2px;
}

/* ── Card ── */
.qr-card {
  background: var(--card-bg);
  border-radius: 24px;
  padding: 2.5rem 2.5rem 2rem;
  box-shadow: 0 4px 40px rgba(0,0,0,.07);
  position: relative;
  z-index: 1;
  animation: fadeUp .5s .1s ease both;
}

/* ── Status Banner ── */
.status-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.75rem;
}
.status-banner.pass {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
}
.status-banner.fail {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
}
.status-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.status-banner.pass .status-icon { background: #dcfce7; }
.status-banner.fail .status-icon { background: #ffe4e6; }
.status-title {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}
.status-sub {
  font-size: .78rem;
  opacity: .75;
  margin-top: 2px;
}

/* ── Score Detail ── */
.score-detail {
  background: #f8fffe;
  border: 1px solid #d0f5ef;
  border-radius: 16px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.75rem;
}
.score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.score-bar-track {
  width: 100%;
  height: 10px;
  background: #e2e8f0;
  border-radius: 100px;
  overflow: hidden;
  margin-top: .6rem;
}
.score-bar-fill {
  height: 100%;
  border-radius: 100px;
  transition: width .8s ease;
}

/* ── Divider ── */
.qr-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0 30%, #e2e8f0 70%, transparent);
  margin: 1.5rem 0;
}

/* ── Action Buttons ── */
.action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .85rem 1.5rem;
  border-radius: 14px;
  font-family: 'Syne', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
  cursor: pointer;
  border: none;
}
.btn:hover { transform: translateY(-2px); }

.btn-dashboard {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.btn-dashboard:hover { box-shadow: 0 6px 16px rgba(0,0,0,.08); }

.btn-retry {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37,99,235,.25);
}
.btn-retry:hover { box-shadow: 0 8px 20px rgba(37,99,235,.35); }

.btn-next {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: #fff;
  box-shadow: 0 4px 14px var(--teal-glow);
}
.btn-next:hover { box-shadow: 0 8px 22px var(--teal-glow); }

.no-retry-box {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 14px;
  padding: .85rem 1.2rem;
  color: #be123c;
  font-size: .83rem;
  font-weight: 600;
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
</style>

<div class="qr-wrapper">

  {{-- ════════ HERO ════════ --}}
  <div class="qr-hero {{ $isPassed ? 'passed' : 'failed' }}">
    <div class="qr-hero-label">
      <i data-lucide="check-square" style="width:12px;height:12px;"></i>
      Hasil Quiz & Ujian
    </div>
    <h1 class="qr-hero-title">{{ $quiz->title }}</h1>
    <p class="qr-hero-sub">
      {{ $isPassed ? 'Quiz selesai dikerjakan' : 'Quiz selesai dikerjakan' }}
    </p>

    {{-- Score Circle --}}
    <div class="score-badge">
      <div class="score-circle">
        <div class="score-number">{{ $score }}</div>
        <div class="score-label">Nilai</div>
      </div>
    </div>
  </div>

  {{-- ════════ CARD ════════ --}}
  <div class="qr-card">

    {{-- ── STATUS BANNER ── --}}
    @if($isPassed)
    <div class="status-banner pass">
      <div class="status-icon">
        <i data-lucide="check-circle" style="width:22px;height:22px;color:#15803d"></i>
      </div>
      <div>
        <div class="status-title">Selamat, kamu lulus! 🎉</div>
        <div class="status-sub">Nilai kamu memenuhi syarat kelulusan quiz ini.</div>
      </div>
    </div>
    @else
    <div class="status-banner fail">
      <div class="status-icon">
        <i data-lucide="x-circle" style="width:22px;height:22px;color:#be123c"></i>
      </div>
      <div>
        <div class="status-title">Belum lulus, semangat!</div>
        <div class="status-sub">Pelajari kembali materi lalu coba kerjakan ulang.</div>
      </div>
    </div>
    @endif

    {{-- ── SCORE DETAIL ── --}}
    <div class="score-detail">
      <div class="score-row">
        <span>Nilai kamu</span>
        <span style="font-family:'Syne',sans-serif; font-weight:700; font-size:1rem;
              color:{{ $isPassed ? '#0d9488' : '#dc2626' }}">
          {{ $score }} / 100
        </span>
      </div>
      <div class="score-row" style="margin-bottom:0">
        <span>Syarat kelulusan</span>
        <span style="font-weight:600; color:var(--text-main)">{{ $quiz->passing_score }}%</span>
      </div>
      <div class="score-bar-track">
        <div class="score-bar-fill"
             style="width:{{ $score }}%;
                    background:{{ $isPassed ? 'linear-gradient(90deg,#0d9488,#14b8a6)' : 'linear-gradient(90deg,#ef4444,#f87171)' }}">
        </div>
      </div>
    </div>

    {{-- ── ACTIONS ── --}}
    <div class="qr-divider"></div>
    <div class="action-grid">

      <a href="{{ route('siswa.dashboard') }}" class="btn btn-dashboard">
        <i data-lucide="layout-dashboard" style="width:18px;height:18px;"></i>
        Dashboard
      </a>

      @if($canRetry)
        <a href="{{ route('siswa.quiz.intro', $quiz->id) }}" class="btn btn-retry">
          <i data-lucide="rotate-ccw" style="width:18px;height:18px;"></i>
          Kerjakan Ulang
        </a>
      @else
        <div class="no-retry-box">
          Kesempatan mengerjakan quiz sudah habis (maks. 2×).
        </div>
      @endif

      @if($isPassed && $quiz->lesson_id)
        <a href="{{ route('siswa.modul.show', $quiz->lesson_id) }}" class="btn btn-next">
          <i data-lucide="arrow-right-circle" style="width:18px;height:18px;"></i>
          Lanjut Materi
        </a>
      @endif

    </div>

  </div>{{-- /qr-card --}}
</div>{{-- /qr-wrapper --}}

@endsection