<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Admin Dashboard</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'>
    
    <!-- Fonts and icons -->
    <script src="{{ asset('admin/js/plugin/webfont/webfont.min.js') }}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link rel="shortcut icon" href="{{ asset('user/favicon.svg') }}" type="image/svg+xml">

    <script>
        WebFont.load({
            google: {"families":["Lato:300,400,700,900"]},
            custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"], urls: ['../assets/css/fonts.min.css']},
            active: function() {
                sessionStorage.fonts = true;
            }
        });
    </script>

    <!-- CSS Files -->
    <link rel="stylesheet" href="{{ asset('admin/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('admin/css/atlantis.css') }}">
</head>

<body>
    <div class="wrapper">
    <div class="main-header">

    <!-- Logo Header -->
    <div class="logo-header" data-background-color="blue">      
        <div class="nav-toggle">
            <button class="btn btn-toggle toggle-sidebar"><i class="fas fa-bars"></i></button>
        </div>
    </div>
    <!-- End Logo Header -->

    <!-- Navbar Header -->
    @include('admin.navbar')
    <!-- End Navbar -->
    </div>

    <!-- Sidebar -->
    @include('admin.sidebar')
    <!-- End Sidebar -->

    <!-- Main Panel -->
    <div class="main-panel">
    <div class="content">
    <div class="panel-header bg-primary-gradient">
    <div class="page-inner py-5">
    <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row">
    </div>  
    </div>  
    </div>  

    <div class="page-inner mt--5">

    <div class="row mt--2">
    <div class="col-12">
    <div class="card">
    <div class="card-header">
    <div class="card-head-row"> 
    <div class="card-tools">
    <a href="{{ route('admin.saw.sesi.printAll') }}" class="btn btn-info btn-border btn-round btn-sm" target="_blank">
    <span class="btn-label"><i class="fa fa-print"></i></span>Cetak</a>
    </div>    
    
    </div>
    </div>

    <div class="card-body">
            
    <!-- Button -->
    <div class="d-flex justify-content-between align-items-center mb-4 p-3">
    <div>
        <h4 class="card-title mb-1">Manajemen Data Hasil Perhitungan</h4>
        <p class="card-category text-muted mb-0">Mengelola dan memperbarui informasi sesuai kebutuhan secara tertata dan menyeluruh.</p>
    </div>
    </div>
    

    <!-- Table -->
    <div class="table-responsive">
    <table id="sesi-kuis-table" class="display table table-striped table-hover">
    <thead>
        <tr>
            <th>No</th>
            <th>Nama Siswa</th>
            <th>Sekolah</th>
            <th>Kelas</th>
            <th>Kurikulum</th>
            <th>Tanggal</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>No</th>
            <th>Nama Siswa</th>
            <th>Sekolah</th>
            <th>Kelas</th>
            <th>Kurikulum</th>
            <th>Tanggal</th>
            <th>Aksi</th>
        </tr>
    </tfoot>
    <tbody>
        @foreach($sesikuis as $index => $sesi)
        <tr>
            <td>{{ $index + 1 }}</td>
            <td>{{ $sesi->nama }}</td>
            <td>{{ $sesi->sekolah }}</td>
            <td>{{ $sesi->kelas }}</td>
            <td>{{ $sesi->kurikulum->nama }}</td>
            <td>{{ $sesi->created_at->format('d/m/Y H:i:s') }}</td>
            <td>
                <button type="button" class="btn btn-link p-3 text-primary sesiDetailBtn" data-id="{{ $sesi->id }}" title="Detail">
                    <i class="fa-solid fa-folder-open"></i> 
                </button>
                <a href="{{ route('admin.saw.sesi.print', $sesi->id) }}" class="btn btn-link p-3 text-info" title="Cetak PDF" target="_blank">
                    <i class="fa-solid fa-print"></i>
                </a>
            </td>
        </tr>
        @endforeach
    </tbody>
    </table>
    </div>
    </div>
    </div>
    </div>

    <!-- Modal untuk menampilkan hasil sesi -->
<div class="modal fade" id="sesiDetailModal" tabindex="-1" role="dialog" aria-labelledby="sesiDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="sesiDetailModalLabel">Detail Hasil Perhitungan</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Hasil Perhitungan -->
                <h5 class="font-weight-bold mt-4">Hasil Perhitungan</h5>
                <p style="font-size: 0.9rem;" class="text-muted mb-3">
                    Data berikut menampilkan hasil perhitungan dan rekomendasi berdasarkan jawaban yang telah diberikan oleh pengguna.
                </p>
                <div class="table-responsive mb-4">
                    <table class="display table table-striped table-hover">
                        <thead class="bg-info text-white">
                            <tr>
                                <th>Peringkat</th>
                                <th>Alternatif</th>
                                <th>Total Skor</th>
                                <th>Mata Pelajaran</th>
                            </tr>
                        </thead>
                        <tbody id="sesiHasilBody">
                            <!-- Akan diisi oleh JavaScript -->
                        </tbody>
                    </table>
                </div>
                
                <!-- Jawaban Pengguna -->
                <h5 class="font-weight-bold mt-4">Jawaban Pengguna</h5>
                <p style="font-size: 0.9rem;" class="text-muted mb-3">
                    Berikut adalah jawaban yang dipilih oleh pengguna saat mengisi kuesioner.
                </p>
                <div class="table-responsive">
                    <table class="display table table-striped table-hover">
                        <thead class="bg-info text-white">
                            <tr>
                                <th>Subkriteria</th>
                                <th>Opsi Dipilih</th>
                            </tr>
                        </thead>
                        <tbody id="sesiJawabanBody">
                            <!-- Akan diisi oleh JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-border" id="printModalBtn">Cetak</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

     
    </div>
    </div>
<!-- Script Files -->
@include('admin.script')
<script>
    $(document).ready(function() {
    // Inisialisasi DataTable untuk Hasil SAW
    var tableSAW = $('#hasil-saw-table').DataTable({
        "pageLength": 10,
        "language": {
            "search": "Cari:",
            "lengthMenu": "Tampilkan _MENU_ data per halaman",
            "zeroRecords": "Tidak ada data yang ditemukan",
            "info": "Menampilkan halaman _PAGE_ dari _PAGES_",
            "infoEmpty": "Tidak ada data tersedia",
            "infoFiltered": "(difilter dari _MAX_ total data)"
        }
    });

    // Inisialisasi DataTable untuk Sesi Kuis
    var tableSesiKuis = $('#sesi-kuis-table').DataTable({
        "pageLength": 10,
        "language": {
            "search": "Cari:",
            "lengthMenu": "Tampilkan _MENU_ data per halaman",
            "zeroRecords": "Tidak ada data yang ditemukan",
            "info": "Menampilkan halaman _PAGE_ dari _PAGES_",
            "infoEmpty": "Tidak ada data tersedia",
            "infoFiltered": "(difilter dari _MAX_ total data)"
        }
    });

    // Filter berdasarkan sesi kuis untuk tabel SAW jika elemen ada
    if ($('#sesiKuisFilter').length) {
        $('#sesiKuisFilter').on('change', function() {
            var sesiKuisId = $(this).val();
            tableSAW
                .columns(1)
                .search(sesiKuisId ? $(this).find('option:selected').text() : '')
                .draw();
        });
    }
    
    // Variabel untuk menyimpan ID sesi yang sedang aktif di modal
    var currentSesiId = null;

    // Detail Sesi Kuis button handler
    $(document).on('click', '.sesiDetailBtn', function() {
        var id = $(this).data('id');
        currentSesiId = id;
        
        // Ajax request untuk mendapatkan detail sesi kuis
        $.ajax({
            url: '/admin/saw/sesi/detail/' + id,
            type: 'GET',
            success: function(response) {
                // Hapus konten sebelumnya
                $('#sesiHasilBody').empty();
                $('#sesiJawabanBody').empty();

                // Tambahkan hasil SAW untuk sesi ini
                $.each(response.hasil, function(index, item) {
                    var mapelText = '';

                    if (item.alternatif.mapels && item.alternatif.mapels.length > 0) {
                        mapelText = item.alternatif.mapels.map(function(mapel) {
                            return mapel.nama;
                        }).join(', ');
                    } else {
                        mapelText = 'Tidak ada data mata pelajaran terkait';
                    }

                    $('#sesiHasilBody').append(`
                        <tr>
                            <td>${item.peringkat}</td>
                            <td>${item.alternatif.nama}</td>
                            <td>${parseFloat(item.total_skor).toFixed(3)}</td>
                            <td>${mapelText}</td>
                        </tr>
                    `);
                });

                // Tambahkan jawaban untuk sesi ini
                $.each(response.jawaban, function(index, item) {
                    $('#sesiJawabanBody').append(`
                        <tr>
                            <td>${item.subkriteria.pertanyaan}</td>
                            <td>${item.opsi_dipilih}</td>
                        </tr>
                    `);
                });

                // Tampilkan modal
                $('#sesiDetailModal').modal('show');
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
                alert('Terjadi kesalahan saat mengambil detail sesi: ' + error);
            }
        });
    });
    
    // Print button di dalam modal
    $('#printModalBtn').on('click', function() {
        if (currentSesiId) {
            // Buka halaman cetak di tab baru
            window.open('/admin/saw/sesi/print/' + currentSesiId, '_blank');
        }
    });
});
</script>
<!-- End Script Files -->
</body>
</html>