@extends('admin.layout')

@section('content')
<div class="mb-4">
    <h4 class="fw-bold text-dark">Riwayat Prediksi Jurusan</h4>
    <p class="text-muted small">Hasil prediksi algoritma Random Forest berdasarkan profil siswa.</p>
</div>

<div class="card border-0 shadow-sm rounded-4">
    <div class="card-body p-4">
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th class="py-3 px-4">Tanggal</th>
                        <th class="py-3">Nama Siswa</th>
                        <th class="py-3">Hasil Rekomendasi</th>
                        <th class="py-3 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody id="table-riwayat">
                    <tr>
                        <td colspan="4" class="text-center py-4 text-muted">
                            <i class="fas fa-spinner fa-spin me-2"></i> Memuat data riwayat...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-bottom-0 pb-0">
                <h5 class="modal-title fw-bold" id="detailModalLabel">Detail Prediksi Jurusan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4" id="modal-body-content">
                </div>
            <div class="modal-footer border-top-0 pt-0">
                <button type="button" class="btn btn-secondary px-4 rounded-pill shadow-none" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', async function() {
        const token = localStorage.getItem('access_token');
        
        // Cek sesi login
        if (!token) {
            window.location.href = '/login';
            return;
        }

        const tbody = document.getElementById('table-riwayat');

        try {
            // Memanggil API riwayat
            const response = await fetch('/api/admin/riwayat', {
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Accept': 'application/json'
                }
            });

            const result = await response.json();
            
            if (result.success) {
                const data = result.data;
                
                // Jika data kosong
                if (data.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="4" class="text-center py-4 text-muted">Belum ada riwayat prediksi yang dilakukan siswa.</td></tr>';
                    return;
                }

                // Render data riwayat ke dalam tabel
                tbody.innerHTML = data.map(item => `
                    <tr>
                        <td class="px-4 text-muted">${item.tanggal}</td>
                        <td class="fw-bold">${item.nama_siswa}</td>
                        <td><span class="badge bg-success px-3 py-2 rounded-pill shadow-none">${item.hasil}</span></td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-light px-3 rounded-pill text-primary fw-medium" onclick="showDetail(${item.id})">
                                <i class="fas fa-file-alt me-1"></i> Detail
                            </button>
                        </td>
                    </tr>
                `).join('');
                
            } else {
                tbody.innerHTML = `<tr><td colspan="4" class="text-center py-4 text-danger">Gagal memuat data: ${result.message}</td></tr>`;
            }
        } catch (error) {
            console.error('Error fetching riwayat:', error);
            tbody.innerHTML = '<tr><td colspan="4" class="text-center py-4 text-danger">Terjadi kesalahan jaringan atau server.</td></tr>';
        }
    });

    /**
     * Mengambil dan menampilkan detail riwayat di dalam Modal
     */
    async function showDetail(id) {
        const token = localStorage.getItem('access_token');
        const modalBody = document.getElementById('modal-body-content');
        
        // Tampilkan modal dengan state loading
        const detailModal = new bootstrap.Modal(document.getElementById('detailModal'));
        detailModal.show();
        
        modalBody.innerHTML = `
            <div class="text-center py-4">
                <i class="fas fa-spinner fa-spin text-primary fs-3 mb-2"></i>
                <p class="text-muted m-0">Mengambil detail...</p>
            </div>
        `;

        try {
            // Memanggil API detail riwayat
            const response = await fetch(`/api/admin/riwayat/${id}`, {
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Accept': 'application/json'
                }
            });

            const result = await response.json();

            if (result.success) {
                const data = result.data;
                
                // Render detail ke dalam modal
                modalBody.innerHTML = `
                    <div class="mb-3 border-bottom pb-2">
                        <span class="text-muted d-block small mb-1">Nama Lengkap Siswa</span>
                        <span class="fw-bold text-dark fs-5">${data.nama_siswa}</span>
                    </div>
                    <div class="mb-3 border-bottom pb-2">
                        <span class="text-muted d-block small mb-1">Email Siswa</span>
                        <span class="text-dark">${data.email_siswa}</span>
                    </div>
                    <div class="mb-3 border-bottom pb-2">
                        <span class="text-muted d-block small mb-1">Waktu Prediksi Dibuat</span>
                        <span class="text-dark">${data.tanggal}</span>
                    </div>
                    <div class="mb-2">
                        <span class="text-muted d-block small mb-2">Hasil Rekomendasi Random Forest</span>
                        <span class="badge bg-success px-3 py-2 rounded-pill fs-6 shadow-none">${data.hasil_rekomendasi}</span>
                    </div>
                `;
            } else {
                modalBody.innerHTML = `<div class="alert alert-danger m-0">Gagal memuat detail: ${result.message}</div>`;
            }
        } catch (error) {
            console.error('Error fetching detail:', error);
            modalBody.innerHTML = `<div class="alert alert-danger m-0">Terjadi kesalahan jaringan saat mengambil detail.</div>`;
        }
    }
</script>
@endpush
@endsection