@extends('siswa.layout')

@section('content')

{{-- Google Fonts --}}
<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:           #f0fafa;
    --card-bg:      #ffffff;
    --text-main:    #0f2a2a;
    --text-muted:   #5f8080;
  }

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

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

  /* ── Hero Header ── */
  .qr-hero {
    position: relative;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 60%, #020617 100%);
    border-radius: 24px;
    padding: 2.5rem 2.5rem 3.5rem;
    overflow: hidden;
    margin-bottom: -1.5rem;
  }
  .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.72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ccfbf1;
    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;
    margin: 0;
    position: relative;
  }
  .qr-hero-sub {
    font-size: .85rem;
    color: rgba(255,255,255,.65);
    margin-top: .5rem;
    position: relative;
  }

  /* ── Main 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;
  }

  /* ── Stat Grid ── */
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 1.75rem;
  }
  @media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr 1fr; } }

  .stat-item {
    background: #f8fffe;
    border: 1px solid #d0f5ef;
    border-radius: 16px;
    padding: 1.1rem 1rem;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
  }
  .stat-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(13,148,136,.12);
  }
  .stat-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ccfbf1, #99f6e4);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .6rem;
    color: var(--teal-dark);
  }
  .stat-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 3px;
  }
  .stat-value {
    font-family: 'Syne', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
  }

  /* ── Date Row ── */
  .date-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
  }
  .date-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    padding: .6rem 1rem;
    font-size: .82rem;
    font-weight: 500;
    flex: 1;
    min-width: 180px;
  }
  .date-pill.open  { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
  .date-pill.close { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
  .date-pill strong { display: block; font-weight: 600; font-size: .8rem; }
  .date-pill span  { font-size: .7rem; opacity: .7; }

  /* ── Late Warning ── */
  .late-warning {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 14px;
    padding: 1rem 1.2rem;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #be123c;
    font-size: .85rem;
    margin-bottom: 1.5rem;
  }

  /* ── Rules Steps ── */
  .rules-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .04em;
    margin-bottom: 1rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .rules-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 2rem;
  }
  .rule-step {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: .85rem 1.1rem;
    position: relative;
    transition: transform .18s;
  }
  .rule-step:hover { transform: translateX(4px); }
  .rule-num {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-size: .8rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 8px rgba(217,119,6,.3);
  }
  .rule-text { font-size: .85rem; color: #78350f; line-height: 1.45; }
  .rule-text strong { color: #92400e; }

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

  /* ── Attempt Progress ── */
  .attempt-header {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-main);
  }
  .attempt-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 1.2rem;
  }
  .attempt-dot {
    height: 8px;
    border-radius: 100px;
    background: #e2e8f0;
    flex: 1;
    transition: background .3s;
  }
  .attempt-dot.used   { background: linear-gradient(90deg, #0d9488, #14b8a6); }
  .attempt-dot.failed { background: linear-gradient(90deg, #ef4444, #f87171); }

  .attempt-list { display: flex; flex-direction: column; gap: 8px; }
  .attempt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border-radius: 12px;
    padding: .7rem 1rem;
    font-size: .82rem;
    animation: fadeUp .4s ease both;
  }
  .attempt-row:nth-child(2) { animation-delay: .08s; }
  .attempt-date { color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
  .attempt-score {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .95rem;
  }
  .attempt-score.pass { color: #0d9488; }
  .attempt-score.fail { color: #ef4444; }

  /* ── CTA Section ── */
  .qr-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    flex-wrap: wrap;
  }
  .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: .83rem;
    text-decoration: none;
    padding: .5rem .8rem;
    border-radius: 10px;
    transition: background .2s, color .2s;
  }
  .btn-back:hover { background: #f0fafa; color: var(--teal-dark); }

  /* ── Start Button ── */
  #start-quiz-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    border: none;
    padding: .85rem 2rem;
    border-radius: 14px;
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px var(--teal-glow);
    transition: transform .2s, box-shadow .2s, opacity .2s;
    position: relative;
    overflow: hidden;
  }
  #start-quiz-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.12), transparent);
  }
  #start-quiz-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px var(--teal-glow);
  }
  #start-quiz-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    box-shadow: none;
  }
  .btn-countdown {
    font-family: 'DM Sans', monospace;
    font-size: .85rem;
    font-weight: 400;
    background: rgba(0,0,0,.2);
    padding: 2px 8px;
    border-radius: 6px;
  }

  .no-attempt-box {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 14px;
    padding: 1rem 1.5rem;
    color: #be123c;
    font-weight: 600;
    font-size: .88rem;
  }

  /* ── Animations ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .qr-hero    { animation: fadeUp .5s ease both; }
  .qr-card    { animation: fadeUp .5s .1s ease both; }
</style>

<div class="qr-wrapper">

  {{-- ════════ HERO ════════ --}}
  <div class="qr-hero">
    <div class="qr-hero-label">
      <i data-lucide="clipboard-list" style="width:12px;height:12px;"></i>
      Aturan Quiz & Ujian
    </div>
    <h1 class="qr-hero-title">{{ $quiz->title }}</h1>
    <p class="qr-hero-sub">Baca seluruh aturan sebelum memulai pengerjaan</p>
  </div>

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

    {{-- ── STAT GRID ── --}}
    <div class="stat-grid">
      <div class="stat-item">
        <div class="stat-icon"><i data-lucide="target" style="width:18px;height:18px;"></i></div>
        <div class="stat-label">Nilai Lulus</div>
        <div class="stat-value">{{ $quiz->passing_score }}%</div>
      </div>
      <div class="stat-item">
        <div class="stat-icon"><i data-lucide="help-circle" style="width:18px;height:18px;"></i></div>
        <div class="stat-label">Jumlah Soal</div>
        <div class="stat-value">{{ $quiz->questions_count }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-icon"><i data-lucide="timer" style="width:18px;height:18px;"></i></div>
        <div class="stat-label">Durasi</div>
        <div class="stat-value">
          @if($quiz->duration)
            {{ $quiz->duration }}<span style="font-size:.75rem;font-weight:400"> menit</span>
          @else
            ∞
          @endif
        </div>
      </div>
    </div>

    {{-- ── DATE PILLS ── --}}
    @if($quiz->available_at || $quiz->deadline)
    <div class="date-row">
      @if($quiz->available_at)
      <div class="date-pill open">
        <i data-lucide="calendar-check" style="width:18px;height:18px;flex-shrink:0"></i>
        <div>
          <span>Dibuka mulai</span>
          <strong>
            @if(!empty($quiz->available_at_formatted))
              {{ $quiz->available_at_formatted }}
            @else
              {{ \Carbon\Carbon::parse($quiz->available_at)->translatedFormat('d F Y, H:i') }}
            @endif
          </strong>
        </div>
      </div>
      @endif

      @if($quiz->deadline)
      <div class="date-pill close">
        <i data-lucide="calendar-x" style="width:18px;height:18px;flex-shrink:0"></i>
        <div>
          <span>Ditutup pada</span>
          <strong>
            @if(!empty($quiz->deadline_formatted))
              {{ $quiz->deadline_formatted }}
            @else
              {{ \Carbon\Carbon::parse($quiz->deadline)->translatedFormat('d F Y, H:i') }}
            @endif
          </strong>
        </div>
      </div>
      @endif
    </div>
    @endif

    {{-- ── LATE WARNING ── --}}
    @if($quiz->deadline && now()->gt($quiz->deadline))
    <div class="late-warning">
      <i data-lucide="alert-triangle" style="width:20px;height:20px;flex-shrink:0;margin-top:1px"></i>
      <span>Waktu pengerjaan telah berakhir. Quiz masih bisa dibuka, namun <strong>nilai otomatis 0</strong>.</span>
    </div>
    @endif

    {{-- ── RULES STEPS ── --}}
    <div class="rules-title">
      <i data-lucide="shield-alert" style="width:16px;height:16px;color:#d97706"></i>
      Peraturan Penting
    </div>
    <div class="rules-steps">
      <div class="rule-step">
        <div class="rule-num">1</div>
        <div class="rule-text">Quiz <strong>wajib dikerjakan dalam mode fullscreen</strong> — pastikan izin browser diaktifkan.</div>
      </div>
      <div class="rule-step">
        <div class="rule-num">2</div>
        <div class="rule-text">Keluar dari fullscreen akan <strong>langsung mengakhiri quiz</strong> secara otomatis.</div>
      </div>
      <div class="rule-step">
        <div class="rule-num">3</div>
        <div class="rule-text">Jika quiz diakhiri karena keluar fullscreen, jawaban dikirim dengan <strong>nilai 0</strong>.</div>
      </div>
    </div>

    {{-- ── ATTEMPT TRACKER ── --}}
    @if($attempts->count())
    <div class="qr-divider"></div>
    <div class="attempt-header">
      <i data-lucide="bar-chart-3" style="width:16px;height:16px;color:#0d9488"></i>
      Riwayat Pengerjaan
    </div>

    {{-- Dots progress --}}
    <div class="attempt-dots">
      @for($i = 0; $i < 2; $i++)
        @php $a = $attempts->get($i); @endphp
        <div class="attempt-dot {{ $a ? ($a->status === 'late' ? 'failed' : 'used') : '' }}"></div>
      @endfor
    </div>

    <div class="attempt-list">
      @foreach($attempts as $a)
      <div class="attempt-row">
        <span class="attempt-date">
          <i data-lucide="calendar" style="width:14px;height:14px;"></i>
          {{ \Carbon\Carbon::parse($a->started_at)->timezone('Asia/Jakarta')->translatedFormat('d F Y, H:i') }}
        </span>
        <span class="attempt-score {{ $a->status === 'late' ? 'fail' : 'pass' }}">
          {{ $a->status === 'late' ? '0 — Terlambat' : $a->score }}
        </span>
      </div>
      @endforeach
    </div>
    @endif

    {{-- ── CTA ── --}}
    <div class="qr-divider"></div>
    <div class="qr-cta">
      @if(!empty($quiz->lesson_id))
      <a href="{{ route('siswa.modul.show', $quiz->lesson_id) }}" class="btn-back">
        <i data-lucide="arrow-left" style="width:15px;height:15px;"></i>
        Kembali ke materi
      </a>
      @else
      <div></div>
      @endif

      @if($canRetry)
        <button id="start-quiz-btn">
          <i data-lucide="play" style="width:18px;height:18px;"></i>
          <span id="btn-text">Start Quiz & Ujian</span>
        </button>
      @else
        <div class="no-attempt-box">
          Kesempatan mengerjakan quiz sudah habis (maks. 2×).
        </div>
      @endif
    </div>

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


<script>
const QUIZ_AVAILABLE_AT = @json(
    $quiz->available_at
        ? \Carbon\Carbon::parse($quiz->available_at)->toIso8601String()
        : null
);
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {

  const btn       = document.getElementById('start-quiz-btn');
  const btnText   = document.getElementById('btn-text');
  const targetUrl = "{{ route('siswa.quiz.start', $quiz->id) }}";

  if (!btn) return;

  let availableAt = QUIZ_AVAILABLE_AT ? new Date(QUIZ_AVAILABLE_AT) : null;

  // ── Countdown ──
  function updateCountdown() {
    if (!availableAt) return;
    const diff = availableAt - new Date();
    if (diff <= 0) {
      btn.disabled = false;
      btnText.textContent = 'Mulai Quiz';
      // remove countdown badge if exists
      const badge = btn.querySelector('.btn-countdown');
      if (badge) badge.remove();
      clearInterval(timer);
      return;
    }
    btn.disabled = true;
    const s = Math.floor(diff / 1000);
    const h = String(Math.floor(s / 3600)).padStart(2,'0');
    const m = String(Math.floor((s % 3600) / 60)).padStart(2,'0');
    const sec = String(s % 60).padStart(2,'0');
    btnText.textContent = 'Mulai dalam';
    let badge = btn.querySelector('.btn-countdown');
    if (!badge) {
      badge = document.createElement('span');
      badge.className = 'btn-countdown';
      btn.appendChild(badge);
    }
    badge.textContent = `${h}:${m}:${sec}`;
  }

  let timer = setInterval(updateCountdown, 1000);
  updateCountdown();

  // ── Start Quiz ──
  btn.addEventListener('click', async () => {
    if (btn.disabled) return;
    try {
      if (!document.fullscreenElement) {
        await document.documentElement.requestFullscreen();
      }
      window.location.href = targetUrl;
    } catch {
      alert(
        'Quiz wajib dijalankan dalam mode fullscreen.\n\n' +
        'Silakan izinkan fullscreen lalu klik "Mulai Quiz" kembali.'
      );
    }
  });

});
</script>

@endsection