@extends('layouts.siswa')

@section('title', 'Detail Hasil Diagnosa')
@section('header', 'Detail Hasil Diagnosa')

@section('content')
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <div class="bg-gradient-primary text-white p-6">
        <div class="flex justify-between items-center flex-wrap gap-4">
            <div>
                <h2 class="text-2xl font-bold">{{ $simulasi->paketUjian->nama_paket }}</h2>
                <p class="text-purple-200 mt-1">Tanggal: {{ App\Helpers\DateHelper::formatTanggal($simulasi->created_at, 'l, d F Y H:i') }}</p>
            </div>
            <div class="text-right">
                <p class="text-sm opacity-90">Durasi: {{ $simulasi->paketUjian->durasi }} menit</p>
                <p class="text-sm opacity-90">Waktu Selesai: {{ $simulasi->tanggal_selesai ? App\Helpers\DateHelper::formatTanggal($simulasi->tanggal_selesai, 'l, d F Y H:i') : '-' }}</p>
            </div>
        </div>
    </div>
    
    <div class="p-6">
        @if($simulasi->hasilDiagnosa)
            <!-- Kesiapan Badge -->
            <div class="text-center mb-8">
                @php
                    $bgColor = match($simulasi->hasilDiagnosa->kesiapan) {
                        'Siap' => 'bg-green-100 text-green-800 border-green-300',
                        'Kurang Siap' => 'bg-yellow-100 text-yellow-800 border-yellow-300',
                        'Tidak Siap' => 'bg-red-100 text-red-800 border-red-300',
                        default => 'bg-gray-100 text-gray-800'
                    };
                    $icon = match($simulasi->hasilDiagnosa->kesiapan) {
                        'Siap' => 'fa-check-circle',
                        'Kurang Siap' => 'fa-exclamation-triangle',
                        'Tidak Siap' => 'fa-times-circle',
                        default => 'fa-chart-line'
                    };
                @endphp
                <div class="inline-block px-6 py-3 rounded-full {{ $bgColor }} border shadow-sm">
                    <i class="fas {{ $icon }} mr-2"></i>
                    <span class="font-bold text-lg">{{ $simulasi->hasilDiagnosa->kesiapan }}</span>
                </div>
            </div>
            
            <!-- Nilai per Mata Pelajaran -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <div class="bg-blue-50 rounded-xl p-5 text-center shadow-sm">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-calculator text-xl text-blue-600"></i>
                    </div>
                    <h3 class="text-sm font-semibold text-gray-600 mb-1">Matematika</h3>
                    <p class="text-3xl font-bold text-blue-600">{{ $simulasi->hasilDiagnosa->nilai_matematika ?? 0 }}</p>
                </div>
                <div class="bg-green-50 rounded-xl p-5 text-center shadow-sm">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-book-open text-xl text-green-600"></i>
                    </div>
                    <h3 class="text-sm font-semibold text-gray-600 mb-1">Bahasa Indonesia</h3>
                    <p class="text-3xl font-bold text-green-600">{{ $simulasi->hasilDiagnosa->nilai_bahasa_indonesia ?? 0 }}</p>
                </div>
                <div class="bg-purple-50 rounded-xl p-5 text-center shadow-sm">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-language text-xl text-purple-600"></i>
                    </div>
                    <h3 class="text-sm font-semibold text-gray-600 mb-1">Bahasa Inggris</h3>
                    <p class="text-3xl font-bold text-purple-600">{{ $simulasi->hasilDiagnosa->nilai_bahasa_inggris ?? 0 }}</p>
                </div>
            </div>
            
            <!-- Rata-rata -->
            <div class="text-center mb-8 p-5 bg-gray-50 rounded-xl">
                <p class="text-gray-600">Nilai Rata-rata</p>
                <p class="text-4xl font-bold text-gray-800">{{ $simulasi->hasilDiagnosa->nilai_rata_rata ?? 0 }}</p>
                <div class="w-full bg-gray-200 rounded-full h-2.5 mt-3">
                    <div class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-full h-2.5" style="width: {{ min($simulasi->hasilDiagnosa->nilai_rata_rata ?? 0, 100) }}%"></div>
                </div>
            </div>
            
            <!-- Detail Kelemahan -->
            @if($simulasi->hasilDiagnosa->detail_kelemahan && count($simulasi->hasilDiagnosa->detail_kelemahan) > 0)
            <div class="mb-8">
                <h3 class="font-bold text-xl mb-4 text-gray-800 flex items-center">
                    <i class="fas fa-chart-line text-red-500 mr-2"></i>
                    Analisis Kelemahan
                </h3>
                <div class="space-y-3">
                    @foreach($simulasi->hasilDiagnosa->detail_kelemahan as $kelemahan)
                    <div class="border-l-4 {{ $kelemahan['tingkat'] == 'Serius' ? 'border-red-500 bg-red-50' : 'border-yellow-500 bg-yellow-50' }} p-4 rounded-r-lg">
                        <div class="flex justify-between items-center flex-wrap gap-2">
                            <span class="font-semibold text-gray-800">{{ $kelemahan['mata_pelajaran'] }}</span>
                            <span class="text-sm font-medium {{ $kelemahan['tingkat'] == 'Serius' ? 'text-red-600' : 'text-yellow-600' }}">
                                Nilai: {{ $kelemahan['nilai'] }}
                            </span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                            <div class="rounded-full h-2 {{ $kelemahan['tingkat'] == 'Serius' ? 'bg-red-500' : 'bg-yellow-500' }}" style="width: {{ min($kelemahan['nilai'], 100) }}%"></div>
                        </div>
                        <p class="text-xs mt-2 {{ $kelemahan['tingkat'] == 'Serius' ? 'text-red-600' : 'text-yellow-600' }}">
                            <i class="fas fa-info-circle mr-1"></i>
                            {{ $kelemahan['tingkat'] == 'Serius' ? 'Perlu bimbingan intensif' : 'Perlu peningkatan' }}
                        </p>
                    </div>
                    @endforeach
                </div>
            </div>
            @else
            <div class="mb-8 p-4 bg-green-50 rounded-lg text-center">
                <i class="fas fa-trophy text-3xl text-green-500 mb-2"></i>
                <p class="text-green-700">Tidak ada kelemahan signifikan. Pertahankan prestasi Anda!</p>
            </div>
            @endif
            
            <!-- Rekomendasi -->
            <div class="mb-8 p-5 bg-blue-50 rounded-xl">
                <h3 class="font-bold text-xl mb-3 text-blue-800 flex items-center">
                    <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
                    Rekomendasi
                </h3>
                <div class="text-gray-700 whitespace-pre-line leading-relaxed">
                    {!! nl2br(e($simulasi->hasilDiagnosa->rekomendasi)) !!}
                </div>
            </div>
            
            <!-- Action Buttons -->
            <div class="flex justify-center space-x-4 pt-4 border-t no-print">
                <button onclick="printHasil()" class="px-6 py-2.5 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition flex items-center">
                    <i class="fas fa-print mr-2"></i> Cetak Hasil
                </button>
                <a href="{{ route('siswa.ujian.index') }}" class="px-6 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i> Kembali
                </a>
            </div>
        @else
            <div class="text-center py-12">
                <i class="fas fa-chart-line text-6xl text-gray-300 mb-4"></i>
                <p class="text-gray-500">Belum ada hasil diagnosa untuk simulasi ini.</p>
                <a href="{{ route('siswa.ujian.index') }}" class="mt-4 inline-block px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
                    Kembali ke Daftar Ujian
                </a>
            </div>
        @endif
    </div>
</div>

<!-- Style untuk Cetak -->
<style>
    /* Style untuk tampilan cetak */
    @media print {
        /* Sembunyikan elemen yang tidak perlu saat cetak */
        .no-print, 
        nav, 
        .bg-gradient-primary button, 
        .flex a, 
        .flex button,
        .desktop-sidebar,
        .mobile-menu-btn,
        header,
        .bg-white.shadow,
        .bg-white.rounded-lg.shadow,
        .bg-white.rounded-lg.shadow > .bg-gradient-primary,
        .bg-white.rounded-lg.shadow > .bg-gradient-primary + div {
            display: none !important;
        }
        
        /* Tampilkan hanya konten utama */
        body {
            background: white !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        .container {
            margin: 0 !important;
            padding: 0 !important;
            max-width: 100% !important;
        }
        
        /* Tampilkan area hasil diagnosa */
        .bg-white.rounded-lg.shadow-lg {
            box-shadow: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        .bg-white.rounded-lg.shadow-lg > div:last-child {
            display: block !important;
            padding: 20px !important;
        }
        
        /* Warna background untuk cetak */
        .bg-blue-50, .bg-green-50, .bg-purple-50, .bg-gray-50, .bg-red-50, .bg-yellow-50 {
            background-color: #f3f4f6 !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        
        .bg-gradient-primary {
            background: #4F46E5 !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        
        /* Header cetak */
        .print-header {
            display: block !important;
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #4F46E5;
        }
        
        .print-header h1 {
            font-size: 24px;
            margin: 0;
            color: #1F2937;
        }
        
        .print-header p {
            font-size: 12px;
            color: #6B7280;
            margin: 5px 0 0;
        }
        
        /* Table style untuk cetak */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        
        th {
            background-color: #f3f4f6;
            font-weight: bold;
        }
        
        /* Page break */
        .page-break {
            page-break-before: always;
        }
        
        /* Pastikan teks tidak terpotong */
        .whitespace-pre-line {
            white-space: pre-line;
            word-wrap: break-word;
        }
        
        /* Logo header untuk cetak */
        .print-logo {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #4F46E5;
        }
        
        .print-logo .school-info {
            text-align: left;
        }
        
        .print-logo .school-info h3 {
            margin: 0;
            font-size: 16px;
            color: #1F2937;
        }
        
        .print-logo .school-info p {
            margin: 2px 0;
            font-size: 11px;
            color: #6B7280;
        }
        
        .print-logo .title {
            text-align: right;
        }
        
        .print-logo .title h2 {
            margin: 0;
            font-size: 18px;
            color: #4F46E5;
        }
        
        /* Tanda tangan */
        .signature {
            margin-top: 30px;
            text-align: right;
        }
        
        .signature p {
            margin: 5px 0;
            font-size: 12px;
        }
        
        .signature .line {
            margin-top: 30px;
            width: 200px;
            border-top: 1px solid #000;
            display: inline-block;
        }
    }
    
    /* Sembunyikan print header secara default */
    .print-header, .print-logo, .signature {
        display: none;
    }
</style>

<script>
function printHasil() {
    // Ambil elemen yang akan dicetak
    const printContent = document.querySelector('.bg-white.rounded-lg.shadow-lg').cloneNode(true);
    
    // Buat elemen untuk header cetak
    const printHeader = document.createElement('div');
    printHeader.className = 'print-logo';
    printHeader.innerHTML = `
        <div class="school-info">
            <h3>SMAN 1 GAUNG</h3>
            <p>Jl. Pendidikan No. 1, Gaung, Riau</p>
            <p>Telp. (0769) 123456 | Email: info@smangaung.sch.id</p>
        </div>
        <div class="title">
            <h2>LAPORAN HASIL DIAGNOSA TKA</h2>
            <p>Sistem Pakar Metode Forward Chaining</p>
        </div>
    `;
    
    // Tambahkan header ke dalam konten cetak
    printContent.insertBefore(printHeader, printContent.firstChild);
    
    // Tambahkan informasi siswa
    const siswaInfo = document.createElement('div');
    siswaInfo.className = 'print-header';
    siswaInfo.innerHTML = `
        <div style="margin-bottom: 20px;">
            <table style="width: 100%; border: none;">
                <tr style="border: none;">
                    <td style="border: none; width: 30%;"><strong>Nama Siswa</strong></td>
                    <td style="border: none; width: 70%;">: {{ Auth::user()->name }}</td>
                </tr>
                <tr style="border: none;">
                    <td style="border: none;"><strong>NIS</strong></td>
                    <td style="border: none;">: {{ Auth::user()->siswa->nis ?? '-' }}</td>
                </tr>
                <tr style="border: none;">
                    <td style="border: none;"><strong>Kelas</strong></td>
                    <td style="border: none;">: {{ Auth::user()->siswa->kelas->nama_kelas ?? '-' }}</td>
                </tr>
                <tr style="border: none;">
                    <td style="border: none;"><strong>Tanggal Ujian</strong></td>
                    <td style="border: none;">: {{ App\Helpers\DateHelper::formatTanggal($simulasi->created_at, 'l, d F Y H:i') }}</td>
                </tr>
            </table>
        </div>
    `;
    
    // Sisipkan setelah header logo
    printContent.insertBefore(siswaInfo, printHeader.nextSibling);
    
    // Tambahkan tanda tangan
    const signature = document.createElement('div');
    signature.className = 'signature';
    signature.innerHTML = `
        <p>Mengetahui,</p>
        <p>Guru Pembimbing</p>
        <br><br>
        <div class="line"></div>
        <p>_________________________</p>
        <p>NIP. ____________________</p>
    `;
    printContent.appendChild(signature);
    
    // Buat jendela cetak baru
    const printWindow = window.open('', '_blank');
    printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>Hasil Diagnosa TKA - {{ Auth::user()->name }}</title>
            <meta charset="UTF-8">
            <style>
                body {
                    font-family: 'Times New Roman', Times, serif;
                    margin: 2cm;
                    padding: 0;
                    color: #333;
                }
                .bg-white.rounded-lg.shadow-lg {
                    max-width: 100%;
                    margin: 0 auto;
                }
                .bg-gradient-primary {
                    background: #4F46E5;
                    color: white;
                    padding: 20px;
                    border-radius: 10px 10px 0 0;
                }
                .bg-blue-50, .bg-green-50, .bg-purple-50, .bg-gray-50 {
                    background-color: #f8f9fa;
                    border-radius: 10px;
                }
                .rounded-full {
                    border-radius: 9999px;
                }
                .border {
                    border: 1px solid #e5e7eb;
                }
                .shadow-sm {
                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
                }
                .text-center {
                    text-align: center;
                }
                .text-2xl {
                    font-size: 1.5rem;
                }
                .text-3xl {
                    font-size: 1.875rem;
                }
                .text-4xl {
                    font-size: 2.25rem;
                }
                .font-bold {
                    font-weight: 700;
                }
                .mb-3, .mb-4 {
                    margin-bottom: 1rem;
                }
                .mb-8 {
                    margin-bottom: 2rem;
                }
                .p-4, .p-5, .p-6 {
                    padding: 1.5rem;
                }
                .grid {
                    display: grid;
                }
                .grid-cols-1 {
                    grid-template-columns: repeat(1, minmax(0, 1fr));
                }
                .md\\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                }
                .gap-6 {
                    gap: 1.5rem;
                }
                .whitespace-pre-line {
                    white-space: pre-line;
                }
                .print-logo {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20px;
                    padding-bottom: 10px;
                    border-bottom: 2px solid #4F46E5;
                }
                .print-header {
                    margin-bottom: 20px;
                }
                .signature {
                    margin-top: 40px;
                    text-align: right;
                }
                .signature .line {
                    width: 200px;
                    border-top: 1px solid #000;
                    display: inline-block;
                }
                table {
                    width: 100%;
                    border-collapse: collapse;
                }
                td {
                    border: none;
                    padding: 5px;
                }
            </style>
        </head>
        <body>
            ${printContent.outerHTML}
            <script>
                window.onload = function() {
                    window.print();
                    setTimeout(function() {
                        window.close();
                    }, 500);
                };
            <\/script>
        </body>
        </html>
    `);
    printWindow.document.close();
}
</script>
@endsection