<!-- #HASIL SECTION -->
<section class="section hasil" id="hasil" aria-label="hasil">
<div class="container">
    <p class="section-subtitle has-before text-center">Hasil Perhitungan</p>
    <div class="hasil-header">
        <h2 class="h2 section-title text-center">Hasil <span class="has-before">Rekomendasi</span></h2>
        <p class="section-subtitle text-center">Hasil perhitungan berdasarkan pilihan Anda.</p>
    </div>
    <div class="hasil-content">
        <!-- Tabel Hasil Perhitungan -->
        <div class="hasil-table-container">
            <div class="card mb-4">
                <div class="card-body">
                    <h3 class="quiz-subtitle">Hasil Perhitungan SAW</h3>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Peringkat</th>
                                    <th>Alternatif</th>
                                    <th>Normalisasi</th>
                                    <th>Mata Pelajaran</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($hasilitems as $hasil)
                                <tr @if($loop->first) class="table-success" @endif>
                                    <td>{{ $hasil->peringkat }}</td>
                                    <td>{{ $hasil->alternatif->nama }}</td>
                                    <td>{{ number_format($hasil->skor_normalisasi, 3) }}</td>
                                    <td>
                                        @if($hasil->alternatif->mapels && $hasil->alternatif->mapels->count() > 0)
                                            @foreach($hasil->alternatif->mapels as $mapel)
                                                {{ $mapel->nama }}@if(!$loop->last), @endif
                                            @endforeach
                                        @else
                                            Tidak ada data mata pelajaran terkait
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="hasil-nav-buttons">
            <button id="tutupHasil" class="btn btn-secondary">Tutup</button>
            <a href="#riwayat" class="btn btn-primary">Lihat Riwayat</a>
        </div>
    </div>
</div>
</section>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handler untuk tombol Tutup
    const tutupButton = document.getElementById('tutupHasil');
    const hasilSection = document.getElementById('hasil');
    
    if (tutupButton && hasilSection) {
        tutupButton.addEventListener('click', function() {
            hasilSection.style.display = 'none';
            // Scroll ke quiz section
            const quizSection = document.getElementById('quiz');
            if (quizSection) {
                quizSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });
    }

    // Auto-scroll ke section hasil jika ada parameter sesi_id pada URL
    if (window.location.href.includes('sesi_id=')) {
        if (hasilSection) {
            setTimeout(() => {
                hasilSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 300);
        }
    }

    // Auto-scroll ke section riwayat jika URL memiliki #riwayat
    if (window.location.hash === '#riwayat') {
        const riwayatSection = document.getElementById('riwayat');
        if (riwayatSection) {
            setTimeout(() => {
                riwayatSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 300);
        }
    }

    // Tambahkan event listener untuk link navigasi ke hasil dan riwayat
    const hasilLinks = document.querySelectorAll('a[href="#hasil"]');
    hasilLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            if (hasilSection) {
                hasilSection.style.display = 'block'; // Memastikan section terlihat jika sebelumnya disembunyikan
                hasilSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });
    });

    const riwayatLinks = document.querySelectorAll('a[href="#riwayat"]');
    riwayatLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const riwayatSection = document.getElementById('riwayat');
            if (riwayatSection) {
                riwayatSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });
    });
});
</script>
@endpush