@extends('layouts.app')
@section('title', 'Tes Bakat Anak')
@section('content')
<style>
  :root {
    --primary: #1B5E3B;
    --primary-light: #2E7D5A;
    --gold: #D4A017;
    --gold-light: #F0C040;
    --white: #FFFFFF;
    --gray-900: #1C2119;
    --gray-600: #6b7280;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    background: linear-gradient(160deg, #0D3D25 0%, #1B5E3B 60%, #1a6b42 100%);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .tes-container {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }

  .tes-header {
    text-align: center;
    margin-bottom: 32px;
    color: var(--white);
  }

  .tes-header h1 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 6px;
  }

  .tes-header p {
    font-size: 15px;
    opacity: 0.8;
  }

  .progress-wrap {
    width: 100%;
    margin-bottom: 24px;
  }

  .progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    opacity: 0.8;
    margin-bottom: 8px;
  }

  .progress-bar-bg {
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 99px;
    overflow: hidden;
  }

  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
    border-radius: 99px;
    transition: width 0.4s ease;
  }

  .question-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: 40px;
    width: 100%;
    display: none;
    animation: fadeIn 0.35s ease;
  }

  .question-card.active {
    display: block;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .question-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 160, 23, 0.25);
    border: 1px solid rgba(212, 160, 23, 0.4);
    border-radius: 99px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-light);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .question-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 24px;
    color: var(--white);
  }

  .timer-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
  }

  .timer-display {
    font-size: 20px;
    font-weight: 800;
    color: var(--gold-light);
    min-width: 50px;
  }

  .timer-display.urgent {
    color: #FF6B6B;
    animation: pulse 0.5s ease infinite alternate;
  }

  @keyframes pulse {
    from {
      opacity: 1;
    }
    to {
      opacity: 0.5;
    }
  }

  .timer-bar-bg {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 99px;
    overflow: hidden;
  }

  .timer-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
    border-radius: 99px;
    transition: width 1s linear;
  }

  .timer-bar-fill.urgent {
    background: linear-gradient(90deg, #FF6B6B 0%, #FF9999 100%);
  }

  .options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .option-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.4;
  }

  .option-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateX(4px);
  }

  .option-btn.selected {
    background: rgba(212, 160, 23, 0.3);
    border-color: var(--gold-light);
    color: var(--gold-light);
  }

  .option-btn.correct {
    background: rgba(27, 94, 59, 0.5);
    border-color: #6EE7B7;
    color: #6EE7B7;
  }

  .option-btn:disabled {
    cursor: not-allowed;
  }

  .option-emoji {
    font-size: 24px;
    min-width: 24px;
  }

  #result-screen {
    display: none;
    text-align: center;
    width: 100%;
  }

  #result-screen.active {
    display: block;
  }

  .result-card-tes {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: 40px;
    margin-bottom: 20px;
    color: var(--white);
  }

  .result-icon-big {
    font-size: 72px;
    margin-bottom: 16px;
  }

  .result-title-tes {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 8px;
  }

  .result-subtitle {
    font-size: 15px;
    opacity: 0.8;
    margin-bottom: 28px;
  }

  .score-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
  }

  .score-item {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 16px 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .score-label {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
  }

  .score-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--gold-light);
  }

  .btn-submit-tes {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color: var(--gray-900);
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(212, 160, 23, 0.4);
  }

  .btn-submit-tes:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 160, 23, 0.5);
  }

  @media(max-width: 640px) {
    .question-card {
      padding: 24px;
    }
    .question-text {
      font-size: 18px;
    }
    .result-card-tes {
      padding: 24px;
    }
    .score-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
</style>

<div class="tes-container">

  <div class="tes-header">
    <h1>🧠 Tes Bakat Anak</h1>
    <p>MIS Pembangunan Yapiri · 10 Soal Interaktif</p>
  </div>

  <div class="progress-wrap">
    <div class="progress-info">
      <span id="progress-label">Soal 1 dari 10</span>
      <span id="progress-pct">10%</span>
    </div>
    <div class="progress-bar-bg"><div class="progress-bar-fill" id="progress-fill" style="width:10%"></div></div>
  </div>

  <!-- QUESTION 1 -->
  <div class="question-card active" id="q1">
    <div class="question-badge">🎨 Visual-Spasial · Soal 1</div>
    <div class="question-text">Gambar mana yang paling BESAR?</div>
    <div class="timer-wrap"><div class="timer-display" id="timer1">30</div><div class="timer-bar-bg"><div class="timer-bar-fill" id="tbar1" style="width:100%"></div></div></div>
    <div class="options-grid">
      <button class="option-btn" onclick="pilih(1,'A',2)"><span class="option-emoji">🟥</span>Kotak Merah Besar</button>
      <button class="option-btn" onclick="pilih(1,'B',2)"><span class="option-emoji">🟦</span>Kotak Biru Kecil</button>
      <button class="option-btn" onclick="pilih(1,'C',2)"><span class="option-emoji">🟩</span>Kotak Hijau Sedang</button>
      <button class="option-btn" onclick="pilih(1,'D',2)"><span class="option-emoji">⭕</span>Lingkaran Kuning</button>
    </div>
  </div>

  <!-- QUESTION 2 -->
  <div class="question-card" id="q2">
    <div class="question-badge">🌈 Visual-Spasial · Soal 2</div>
    <div class="question-text">Jika dilihat dari ATAS, bentuk apa yang terlihat?</div>
    <div class="timer-wrap"><div class="timer-display" id="timer2">30</div><div class="timer-bar-bg"><div class="timer-bar-fill" id="tbar2" style="width:100%"></div></div></div>
    <div class="options-grid">
      <button class="option-btn" onclick="pilih(2,'A',3)"><span class="option-emoji">🔵</span>Lingkaran</button>
      <button class="option-btn" onclick="pilih(2,'B',3)"><span class="option-emoji">⬛</span>Kotak</button>
      <button class="option-btn" onclick="pilih(2,'C',3)"><span class="option-emoji">🔺</span>Segitiga</button>
      <button class="option-btn" onclick="pilih(2,'D',3)"><span class="option-emoji">⭐</span>Bintang</button>
    </div>
  </div>

  <!-- QUESTION 3 -->
  <div class="question-card" id="q3">
    <div class="question-badge">🔢 Logis-Matematis · Soal 3</div>
    <div class="question-text">Berapa hasil dari 5 + 3?</div>
    <div class="timer-wrap"><div class="timer-display" id="timer3">30</div><div class="timer-bar-bg"><div class="timer-bar-fill" id="tbar3" style="width:100%"></div></div></div>
    <div class="options-grid">
      <button class="option-btn" onclick="pilih(3,'A',4)"><span class="option-emoji">6️⃣</span>6</button>
      <button class="option-btn" onclick="pilih(3,'B',4)"><span class="option-emoji">7️⃣</span>7</button>
      <button class="option-btn" onclick="pilih(3,'C',4)"><span class="option-emoji">8️⃣</span>8</button>
      <button class="option-btn" onclick="pilih(3,'D',4)"><span class="option-emoji">9️⃣</span>9</button>
    </div>
  </div>

  <!-- QUESTION 4 -->
  <div class="question-card" id="q4">
    <div class="question-badge">🍎 Logis-Matematis · Soal 4</div>
    <div class="question-text">Urutan angka yang BENAR adalah...?</div>
    <div class="timer-wrap"><div class="timer-display" id="timer4">30</div><div class="timer-bar-bg"><div class="timer-bar-fill" id="tbar4" style="width:100%"></div></div></div>
    <div class="options-grid">
      <button class="option-btn" onclick="pilih(4,'A',5)"><span class="option-emoji">📊</span>1, 3, 2, 4, 5</button>
      <button class="option-btn" onclick="pilih(4,'B',5)"><span class="option-emoji">📈</span>1, 2, 3, 4, 5</button>
      <button class="option-btn" onclick="pilih(4,'C',5)"><span class="option-emoji">📉</span>5, 4, 3, 2, 1</button>
      <button class="option-btn" onclick="pilih(4,'D',5)"><span class="option-emoji">🔀</span>2, 5, 1, 3, 4</button>
    </div>
  </div>

  <!-- QUESTION 5 -->
  <div class="question-card" id="q5">
    <div class="question-badge">📖 Linguistik · Soal 5</div>
    <div class="question-text">Hewan apa yang bersuara "meong"?</div>
    <div class="timer-wrap"><div class="timer-display" id="timer5">30</div><div class="timer-bar-bg"><div class="timer-bar-fill" id="tbar5" style="width:100%"></div></div></div>
    <div class="options-grid">
      <button class="option-btn" onclick="pilih(5,'A',6)"><span class="option-emoji">🐶</span>Anjing</button>
      <button class="option-btn" onclick="pilih(5,'B',6)"><span class="option-emoji">🐱</span>Kucing</button>
      <button class="option-btn" onclick="pilih(5,'C',6)"><span class="option-emoji">🐄</span>Sapi</button>
      <button class="option-btn" onclick="pilih(5,'D',6)"><span class="option-emoji">🦆</span>Bebek</button>
    </div>
  </div>

  <!-- QUESTION 6 -->
  <div class="question-card" id="q6">
    <div class="question-badge">📚 Linguistik · Soal 6</div>
    <div class="question-text">Kata yang berlawanan dengan "besar" adalah...?</div>
    <div class="timer-wrap"><div class="timer-display" id="timer6">30</div><div class="timer-bar-bg"><div class="timer-bar-fill" id="tbar6" style="width:100%"></div></div></div>
    <div class="options-grid">
      <button class="option-btn" onclick="pilih(6,'A',7)"><span class="option-emoji">📝</span>Luas</button>
      <button class="option-btn" onclick="pilih(6,'B',7)"><span class="option-emoji">✏️</span>Kecil</button>
      <button class="option-btn" onclick="pilih(6,'C',7)"><span class="option-emoji">📖</span>Panjang</button>
      <button class="option-btn" onclick="pilih(6,'D',7)"><span class="option-emoji">📄</span>Tipis</button>
    </div>
  </div>

  <!-- QUESTION 7 -->
  <div class="question-card" id="q7">
    <div class="question-badge">🎵 Musikal · Soal 7</div>
    <div class="question-text">Instrumen MUSIK mana yang kamu sukai?</div>
    <div class="timer-wrap"><div class="timer-display" id="timer7">30</div><div class="timer-bar-bg"><div class="timer-bar-fill" id="tbar7" style="width:100%"></div></div></div>
    <div class="options-grid">
      <button class="option-btn" onclick="pilih(7,'A',8)"><span class="option-emoji">🎸</span>Gitar</button>
      <button class="option-btn" onclick="pilih(7,'B',8)"><span class="option-emoji">🎹</span>Piano</button>
      <button class="option-btn" onclick="pilih(7,'C',8)"><span class="option-emoji">🥁</span>Drum</button>
      <button class="option-btn" onclick="pilih(7,'D',8)"><span class="option-emoji">🎺</span>Trompet</button>
    </div>
  </div>

  <!-- QUESTION 8 -->
  <div class="question-card" id="q8">
    <div class="question-badge">⚽ Kinestetik · Soal 8</div>
    <div class="question-text">Aktivitas FISIK mana yang paling kamu sukai?</div>
    <div class="timer-wrap"><div class="timer-display" id="timer8">30</div><div class="timer-bar-bg"><div class="timer-bar-fill" id="tbar8" style="width:100%"></div></div></div>
    <div class="options-grid">
      <button class="option-btn" onclick="pilih(8,'A',9)"><span class="option-emoji">⚽</span>Bermain Bola</button>
      <button class="option-btn" onclick="pilih(8,'B',9)"><span class="option-emoji">🏃</span>Berlari</button>
      <button class="option-btn" onclick="pilih(8,'C',9)"><span class="option-emoji">🤸</span>Senam</button>
      <button class="option-btn" onclick="pilih(8,'D',9)"><span class="option-emoji">🚴</span>Bersepeda</button>
    </div>
  </div>

  <!-- QUESTION 9 -->
  <div class="question-card" id="q9">
    <div class="question-badge">🤝 Interpersonal · Soal 9</div>
    <div class="question-text">Jika temanmu sedih, apa yang akan kamu lakukan?</div>
    <div class="timer-wrap"><div class="timer-display" id="timer9">30</div><div class="timer-bar-bg"><div class="timer-bar-fill" id="tbar9" style="width:100%"></div></div></div>
    <div class="options-grid">
      <button class="option-btn" onclick="pilih(9,'A',10)"><span class="option-emoji">🤗</span>Memeluk & Menghiburnya</button>
      <button class="option-btn" onclick="pilih(9,'B',10)"><span class="option-emoji">👂</span>Mendengarkan Ceritanya</button>
      <button class="option-btn" onclick="pilih(9,'C',10)"><span class="option-emoji">🎮</span>Mengajaknya Bermain</button>
      <button class="option-btn" onclick="pilih(9,'D',10)"><span class="option-emoji">👨‍🏫</span>Memanggil Guru</button>
    </div>
  </div>

  <!-- QUESTION 10 -->
  <div class="question-card" id="q10">
    <div class="question-badge">🌿 Naturalis · Soal 10</div>
    <div class="question-text">Hewan mana yang hidup DI DALAM AIR?</div>
    <div class="timer-wrap"><div class="timer-display" id="timer10">30</div><div class="timer-bar-bg"><div class="timer-bar-fill" id="tbar10" style="width:100%"></div></div></div>
    <div class="options-grid">
      <button class="option-btn" onclick="pilih(10,'A',0)"><span class="option-emoji">🐟</span>Ikan</button>
      <button class="option-btn" onclick="pilih(10,'B',0)"><span class="option-emoji">🦁</span>Singa</button>
      <button class="option-btn" onclick="pilih(10,'C',0)"><span class="option-emoji">🐘</span>Gajah</button>
      <button class="option-btn" onclick="pilih(10,'D',0)"><span class="option-emoji">🦅</span>Elang</button>
    </div>
  </div>

  <!-- RESULT SCREEN -->
  <div id="result-screen">
    <div class="result-card-tes">
      <div class="result-icon-big">🎉</div>
      <div class="result-title-tes">Tes Selesai!</div>
      <div class="result-subtitle">Hasil analisis bakat anak sedang diproses...</div>
      <div class="score-grid">
        <div class="score-item"><div class="score-label">Visual</div><div class="score-value" id="disp-visual">0</div></div>
        <div class="score-item"><div class="score-label">Logis</div><div class="score-value" id="disp-logis">0</div></div>
        <div class="score-item"><div class="score-label">Linguistik</div><div class="score-value" id="disp-linguistik">0</div></div>
        <div class="score-item"><div class="score-label">Musikal</div><div class="score-value" id="disp-musikal">0</div></div>
        <div class="score-item"><div class="score-label">Kinestetik</div><div class="score-value" id="disp-kinestetik">0</div></div>
        <div class="score-item"><div class="score-label">Interpersonal</div><div class="score-value" id="disp-interpersonal">0</div></div>
      </div>
      <form method="POST" action="{{ route('tes.hitung') }}" id="tesForm">
        @csrf
        <input type="hidden" name="visual_skor" id="inp-visual" value="0">
        <input type="hidden" name="logis_skor" id="inp-logis" value="0">
        <input type="hidden" name="linguistik_skor" id="inp-linguistik" value="0">
        <input type="hidden" name="musikal_skor" id="inp-musikal" value="0">
        <input type="hidden" name="kinestetik_skor" id="inp-kinestetik" value="0">
        <input type="hidden" name="interpersonal_skor" id="inp-interpersonal" value="0">
        <input type="hidden" name="naturalis_skor" id="inp-naturalis" value="0">
        <input type="hidden" name="durasi_pengerjaan" id="inp-durasi" value="0">
        <button type="submit" class="btn-submit-tes">📊 Lihat Hasil Lengkap →</button>
      </form>
    </div>
  </div>

</div>

<script>
  const correctAnswers = {1:'A',2:'C',3:'C',4:'B',5:'B',6:'B',7:'A',8:'D',9:'A',10:'A'};
  const categories = {1:'visual',2:'visual',3:'logis',4:'logis',5:'linguistik',6:'linguistik',7:'musikal',8:'kinestetik',9:'interpersonal',10:'naturalis'};
  let scores = {visual:0,logis:0,linguistik:0,musikal:0,kinestetik:0,interpersonal:0,naturalis:0};
  let timerInterval = null, timeLeft = 30, startTime = Date.now();

  function startTimer(qNum) {
    clearInterval(timerInterval);
    timeLeft = 30;
    const timerEl = document.getElementById('timer'+qNum);
    const barEl = document.getElementById('tbar'+qNum);
    if (!timerEl) return;
    timerInterval = setInterval(() => {
      timeLeft--;
      timerEl.textContent = timeLeft;
      barEl.style.width = (timeLeft/30*100)+'%';
      if (timeLeft <= 10) { 
        timerEl.classList.add('urgent'); 
        barEl.classList.add('urgent'); 
      }
      if (timeLeft <= 0) { 
        clearInterval(timerInterval); 
        qNum < 10 ? goToQuestion(qNum+1) : showResult(); 
      }
    }, 1000);
  }

  function pilih(qNum, answer, nextQ) {
    clearInterval(timerInterval);
    const card = document.getElementById('q'+qNum);
    const btns = card.querySelectorAll('.option-btn');
    btns.forEach(b => b.disabled = true);
    const answerMap = {A:0,B:1,C:2,D:3};
    btns[answerMap[answer]].classList.add('selected');
    if (answer === correctAnswers[qNum]) { 
      scores[categories[qNum]] += 50; 
      btns[answerMap[answer]].classList.add('correct'); 
    }
    setTimeout(() => { 
      nextQ > 0 && nextQ <= 10 ? goToQuestion(nextQ) : showResult(); 
    }, 600);
  }

  function goToQuestion(qNum) {
    document.querySelectorAll('.question-card').forEach(c => c.classList.remove('active'));
    const next = document.getElementById('q'+qNum);
    if (next) { 
      next.classList.add('active'); 
      updateProgress(qNum); 
      startTimer(qNum); 
    }
  }

  function updateProgress(qNum) {
    const pct = Math.round(qNum/10*100);
    document.getElementById('progress-label').textContent = 'Soal '+qNum+' dari 10';
    document.getElementById('progress-pct').textContent = pct+'%';
    document.getElementById('progress-fill').style.width = pct+'%';
  }

  function showResult() {
    clearInterval(timerInterval);
    document.querySelectorAll('.question-card').forEach(c => c.classList.remove('active'));
    document.getElementById('result-screen').classList.add('active');
    Object.keys(scores).forEach(cat => {
      const el = document.getElementById('disp-'+cat);
      const inp = document.getElementById('inp-'+cat);
      if (el) el.textContent = scores[cat];
      if (inp) inp.value = scores[cat];
    });
    document.getElementById('inp-durasi').value = Math.round((Date.now()-startTime)/1000);
    document.getElementById('progress-label').textContent = 'Selesai!';
    document.getElementById('progress-pct').textContent = '100%';
    document.getElementById('progress-fill').style.width = '100%';
  }

  startTimer(1);
</script>
@endsection