<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Perhitungan SAW - Pemilihan Mata Pelajaran</title>

  <!-- favicon -->
  <link rel="shortcut icon" href="{{ asset('user/favicon.svg') }}" type="image/svg+xml">
  
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <!-- custom css link -->
  <link rel="stylesheet" href="{{ asset('user/css/userstyle.css') }}">


  <!-- google font link -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

  <!-- preload images-->
  <link rel="preload" as="image" href="{{ asset('user/images/hero-banner.png') }}">
  <style>
  .locked-section {
    padding: 60px 0;
  }

  .locked-card {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 15px;
    padding: 40px 20px;
    max-width: 600px;
    margin: 0 auto;
  }

  .lock-icon {
    opacity: 0.6;
  }

  .locked-card h3 {
    color: #6c757d;
    margin-bottom: 1rem;
  }

  .locked-card p {
    color: #6c757d;
    line-height: 1.6;
  }

  .alert {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
  }

  .alert strong {
    font-weight: 600;
  }

  .alert i {
    margin-right: 8px;
  }
  </style>
</head>

<body id="top">
@include('header')
    <main>
    <article>
    <!-- HERO -->
    @include('hero')

    <!-- SERVICE (KRITERIA) -->
    @include('kriteria')

    <!-- FEATURE (TENTANG) -->
    @include('tentang')

    <!-- PERHITUNGAN -->
    @include('perhitungan')

    <!-- QUIZ SECTION -->
    @include('quiz')

    @if($showHistory ?? false)
    @include('riwayat')
    @endif

    <!-- HASIL SECTION -->
    @if(request()->has('sesi_id'))
    @include('hasil')
    @endif 


    </article>
    </main>

  <!-- FOOTER -->
  <footer class="footer">
    <div class="container">
      <div class="footer-bottom">
        <p class="copyright">&copy; 2025 Sistem Pemilihan Mata Pelajaran. All Rights Reserved.</p>
      </div>
    </div>
  </footer>

  <!-- #BACK TO TOP -->
  <a href="#top" class="back-top-btn has-after active" aria-label="back to top" data-back-top-btn>
    <ion-icon name="arrow-up" aria-hidden="true"></ion-icon>
  </a>

  <!-- JavaScript -->
  <script src="{{ asset('user/js/userscript.js') }}" defer></script>
  
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Profile dropdown functionality
      const profileBtn = document.querySelector('.profile-btn');
      const dropdownMenu = document.querySelector('.dropdown-menu');
      
      if (profileBtn && dropdownMenu) {
        profileBtn.addEventListener('click', function() {
          dropdownMenu.classList.toggle('active');
        });
        
        // Close dropdown when clicking outside
        document.addEventListener('click', function(event) {
          if (!profileBtn.contains(event.target) && !dropdownMenu.contains(event.target)) {
            dropdownMenu.classList.remove('active');
          }
        });
      }
    });
  </script>
  <script>
// Replace your existing quiz JavaScript with this improved version
document.addEventListener('DOMContentLoaded', function() {
  let currentSection = 1;
  let currentKurikulum = null;
  let questionsLoaded = false;
  let allowAutoScroll = false; // Flag to control auto-scroll behavior

  // Function to show section with optional scroll control
  function showSection(sectionNumber, enableScroll = false) {
    document.querySelectorAll('.quiz-section').forEach(section => {
      section.classList.remove('active');
    });
    const targetSection = document.querySelector(`.quiz-section[data-section="${sectionNumber}"]`);
    if (targetSection) {
      targetSection.classList.add('active');
      currentSection = sectionNumber;
      
      // Only scroll if explicitly enabled or if auto-scroll flag is true
      if (enableScroll || allowAutoScroll) {
        setTimeout(() => {
          const sectionTop = targetSection.offsetTop;
          const quizHeader = document.querySelector('.quiz-header');
          const headerOffset = quizHeader ? quizHeader.offsetHeight + 20 : 80;
          
          window.scrollTo({
            top: sectionTop - headerOffset,
            behavior: 'smooth'
          });
        }, 100);
      }
    }
  }

  // Function to validate current section
  function validateCurrentSection() {
    const activeSection = document.querySelector('.quiz-section.active');
    if (!activeSection) return true;

    const sectionNum = activeSection.getAttribute('data-section');

    // Special validation for section 2 (curriculum)
    if (sectionNum === '2') {
      const selectedKurikulum = document.querySelector('.kurikulum-radio:checked');
      if (!selectedKurikulum) {
        alert('Harap pilih salah satu kurikulum terlebih dahulu');
        return false;
      }
      document.getElementById('selectedKurikulum').value = selectedKurikulum.value;
      return true;
    }

    // Validate radio buttons in other sections
    const radioGroups = {};
    const radios = activeSection.querySelectorAll('input[type="radio"]');
    radios.forEach(radio => {
      if (!radioGroups[radio.name]) radioGroups[radio.name] = [];
      radioGroups[radio.name].push(radio);
    });

    for (const groupName in radioGroups) {
      const checked = radioGroups[groupName].some(radio => radio.checked);
      if (!checked) {
        alert('Harap pilih salah satu opsi untuk setiap pertanyaan');
        return false;
      }
    }
    return true;
  }

  // Function to load curriculum questions
  async function loadKurikulumQuestions(kurikulumId) {
    try {
      console.log('Loading questions for curriculum ID:', kurikulumId);
      
      // Show loading
      showLoadingSection();
      
      const response = await fetch(`/kriteria-by-kurikulum?kurikulum_id=${kurikulumId}`, {
        method: 'GET',
        headers: {
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        }
      });

      console.log('Response status:', response.status);

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const data = await response.json();
      console.log('Received data:', data);
      
      // Check if data is valid
      if (!data || !Array.isArray(data) || data.length === 0) {
        throw new Error('No criteria data received for this curriculum');
      }
      
      // Generate question sections
      generateQuestionSections(data);
      
      // Hide loading
      hideLoadingSection();
      
      questionsLoaded = true;
      return true;
    } catch (error) {
      console.error('Error loading questions:', error);
      
      // Hide loading
      hideLoadingSection();
      
      // Show error message
      showErrorSection(error.message);
      
      // Reset curriculum selection
      resetKurikulumSelection();
      
      return false;
    }
  }

  // Function to generate question sections
  function generateQuestionSections(kriterias) {
    const form = document.getElementById('quizForm');
    
    // Remove existing question sections (section 3 and beyond)
    const existingSections = form.querySelectorAll('.quiz-section[data-section]:not([data-section="1"]):not([data-section="2"]):not([data-section="loading"]):not([data-section="error"])');
    existingSections.forEach(section => section.remove());

    let sectionNumber = 3;
    
    kriterias.forEach((kriteria, kriteriaIndex) => {
      // Create section container for this criteria
      const sectionDiv = document.createElement('div');
      sectionDiv.className = 'quiz-section';
      sectionDiv.setAttribute('data-section', sectionNumber.toString());
      
      // Criteria header
      const headerHTML = `
        <h3 class="quiz-subtitle">${kriteria.nama}</h3>
        ${kriteria.deskripsi ? `<p class="section-description">${kriteria.deskripsi}</p>` : ''}
      `;
      
      let questionsHTML = '';
      
      // Generate questions for each subcriteria
      if (kriteria.subkriterias && kriteria.subkriterias.length > 0) {
        kriteria.subkriterias.forEach((subkriteria, subIndex) => {
          questionsHTML += `
            <div class="form-group question-group">
              <label class="question-label">${subkriteria.pertanyaan}</label>
              <div class="options-container">
          `;
          
          // Generate options for this subcriteria
          if (subkriteria.opsisubkriterias && subkriteria.opsisubkriterias.length > 0) {
            // Get unique options
            const uniqueOptions = [];
            const seenOptions = new Set();
            
            subkriteria.opsisubkriterias.forEach(opsi => {
              if (!seenOptions.has(opsi.opsi)) {
                seenOptions.add(opsi.opsi);
                uniqueOptions.push(opsi);
              }
            });
            
            uniqueOptions.forEach(opsi => {
              questionsHTML += `
                <div class="option-item">
                  <input type="radio" 
                         id="subkriteria_${subkriteria.id}_${opsi.opsi}" 
                         name="jawaban[${subkriteria.id}]" 
                         value="${opsi.opsi}" 
                         class="option-radio">
                  <label for="subkriteria_${subkriteria.id}_${opsi.opsi}" class="option-label">
                  <span class="option-marker">${opsi.opsi}</span>
                  </label>
                </div>
              `;
            });
          }
          
          questionsHTML += `
              </div>
            </div>
          `;
        });
      }
      
      // Navigation buttons
      const isLast = (kriteriaIndex === kriterias.length - 1);
      const navigationHTML = `
        <div class="quiz-navigation">
          <button type="button" class="btn btn-secondary btn-prev" data-prev="${sectionNumber - 1}">Sebelumnya</button>
          ${isLast ? 
            '<button type="submit" class="btn btn-success btn-submit">Selesai & Lihat Hasil</button>' :
            `<button type="button" class="btn btn-primary btn-next" data-next="${sectionNumber + 1}">Selanjutnya</button>`
          }
        </div>
      `;
      
      sectionDiv.innerHTML = headerHTML + questionsHTML + navigationHTML;
      form.appendChild(sectionDiv);
      
      sectionNumber++;
    });

    console.log(`Generated ${kriterias.length} question sections`);
  }

  // Function to show loading section
  function showLoadingSection() {
    // Remove existing loading section
    const existingLoading = document.querySelector('.loading-section');
    if (existingLoading) {
      existingLoading.remove();
    }

    const form = document.getElementById('quizForm');
    const loadingDiv = document.createElement('div');
    loadingDiv.className = 'quiz-section loading-section';
    loadingDiv.setAttribute('data-section', 'loading');
    loadingDiv.innerHTML = `
      <div class="loading-container text-center">
        <div class="loading-spinner">
          <i class="fas fa-spinner fa-spin fa-3x text-primary"></i>
        </div>
        <h3 class="mt-3">Memuat Pertanyaan...</h3>
        <p class="text-muted">Mohon tunggu sebentar</p>
      </div>
    `;
    
    form.appendChild(loadingDiv);
  }

  // Function to hide loading section
  function hideLoadingSection() {
    const loadingSection = document.querySelector('.loading-section');
    if (loadingSection) {
      loadingSection.remove();
    }
  }

  // Function to show error section
  function showErrorSection(errorMessage) {
    // Remove existing error section
    const existingError = document.querySelector('.error-section');
    if (existingError) {
      existingError.remove();
    }

    const form = document.getElementById('quizForm');
    const errorDiv = document.createElement('div');
    errorDiv.className = 'quiz-section error-section';
    errorDiv.setAttribute('data-section', 'error');
    errorDiv.innerHTML = `
      <div class="error-container text-center">
        <div class="error-icon">
          <i class="fas fa-exclamation-triangle fa-3x text-danger"></i>
        </div>
        <h3 class="mt-3 text-danger">Gagal Memuat Pertanyaan</h3>
        <p class="text-muted">${errorMessage}</p>
        <button type="button" class="btn btn-primary" onclick="location.reload()">Muat Ulang Halaman</button>
      </div>
    `;
    
    form.appendChild(errorDiv);
  }

  // Function to reset curriculum selection
  function resetKurikulumSelection() {
    document.querySelectorAll('.kurikulum-card').forEach(card => {
      card.classList.remove('selected');
    });
    document.querySelectorAll('.kurikulum-radio').forEach(radio => {
      radio.checked = false;
    });
    document.getElementById('selectedKurikulum').value = '';
    document.getElementById('nextAfterKurikulum').disabled = true;
    currentKurikulum = null;
    questionsLoaded = false;
  }

  // Event handler for curriculum card clicks
  document.querySelectorAll('.kurikulum-card').forEach(card => {
    card.addEventListener('click', async function() {
      // Skip if card is disabled
      if (this.classList.contains('disabled')) {
        console.log('Card is disabled');
        return;
      }
      
      // Remove selected class from all cards
      document.querySelectorAll('.kurikulum-card').forEach(c => c.classList.remove('selected'));

      // Add selected class to clicked card
      this.classList.add('selected');

      // Check radio button in card
      const radio = this.querySelector('input[type="radio"]');
      if (radio) {
        radio.checked = true;
        const kurikulumId = radio.value;
        document.getElementById('selectedKurikulum').value = kurikulumId;
        
        console.log('Selected curriculum ID:', kurikulumId);
        
        // Load questions for this curriculum
        currentKurikulum = kurikulumId;
        const success = await loadKurikulumQuestions(kurikulumId);
        
        if (success) {
          // Enable next button
          document.getElementById('nextAfterKurikulum').disabled = false;
        }
      }
    });
  });

  // Event handler for curriculum radio buttons
  document.querySelectorAll('.kurikulum-radio').forEach(radio => {
    radio.addEventListener('change', async function() {
      console.log('Radio changed:', this.value);
      
      // Remove selected from all cards
      document.querySelectorAll('.kurikulum-card').forEach(card => card.classList.remove('selected'));

      // Add selected to parent card
      const parentCard = this.closest('.kurikulum-card');
      if (parentCard) parentCard.classList.add('selected');

      // Update hidden input
      const kurikulumId = this.value;
      document.getElementById('selectedKurikulum').value = kurikulumId;
      
      // Load questions for this curriculum
      currentKurikulum = kurikulumId;
      const success = await loadKurikulumQuestions(kurikulumId);
      
      if (success) {
        // Enable next button
        document.getElementById('nextAfterKurikulum').disabled = false;
      }
    });
  });

  // Event listeners for next/prev buttons
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('btn-next')) {
      const next = parseInt(e.target.getAttribute('data-next'));
      
      // Special check when moving from section 2 to section 3
      if (currentSection === 2 && next === 3) {
        if (!currentKurikulum || !questionsLoaded) {
          alert('Harap pilih kurikulum dan pastikan pertanyaan telah dimuat');
          return;
        }
      }
      
      if (validateCurrentSection()) {
        // Enable auto-scroll for manual navigation
        allowAutoScroll = true;
        showSection(next, true);
        allowAutoScroll = false;
      }
    }
    
    if (e.target.classList.contains('btn-prev')) {
      const prev = parseInt(e.target.getAttribute('data-prev'));
      // Enable auto-scroll for manual navigation
      allowAutoScroll = true;
      showSection(prev, true);
      allowAutoScroll = false;
    }
  });

  // Form submission handler
  const quizForm = document.getElementById('quizForm');
  if (quizForm) {
    quizForm.addEventListener('submit', function(e) {
      e.preventDefault();

      // Validate all questions are answered
      const allRadioGroups = {};
      document.querySelectorAll('.quiz-section:not(.loading-section):not(.error-section) input[type="radio"]').forEach(radio => {
        if (!allRadioGroups[radio.name]) allRadioGroups[radio.name] = [];
        allRadioGroups[radio.name].push(radio);
      });

      for (const groupName in allRadioGroups) {
        const checked = allRadioGroups[groupName].some(radio => radio.checked);
        if (!checked) {
          alert('Harap pastikan semua pertanyaan telah dijawab');
          return;
        }
      }

      // Validate curriculum
      const kurikulumVal = document.getElementById('selectedKurikulum').value;
      if (!kurikulumVal) {
        alert('Harap pilih kurikulum terlebih dahulu');
        return;
      }

      // Submit form
      console.log('Submitting form...');
      this.submit();
    });
  }

  // Initialize - show first section WITHOUT auto-scroll
  showSection(1, false);

  // Expose functions for debugging
  window.showSection = showSection;
  window.loadKurikulumQuestions = loadKurikulumQuestions;
  window.resetKurikulumSelection = resetKurikulumSelection;
});
</script>


@stack('scripts')
</body>

</html>