@extends('layouts.app')

@section('content')
<!-- Google Fonts: Plus Jakarta Sans & Outfit -->
<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=Outfit:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
    .rekomendasi-wrapper {
        font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        color: #1e293b;
    }
    
    .font-heading {
        font-family: 'Outfit', sans-serif;
    }

    /* Hero Banner Modern */
    .bg-gradient-hero {
        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #2563eb 100%);
        position: relative;
        overflow: hidden;
    }

    .badge-hero {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #ffffff;
    }

    /* Soft Badges dengan Flex-Wrap & Anti Overflow */
    .custom-badge {
        display: inline-block;
        padding: 4px 10px;
        font-size: 0.78rem;
        font-weight: 600;
        border-radius: 20px;
        white-space: normal !important; /* Mengizinkan teks bungkus ke bawah jika panjang */
        word-break: break-word;
        text-align: center;
        max-width: 100%;
    }

    .badge-soft-primary { background-color: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
    .badge-soft-success { background-color: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
    .badge-soft-info    { background-color: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
    .badge-soft-warning { background-color: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
    .badge-soft-danger  { background-color: #ffe4e6; color: #9f1239; border: 1px solid #fecdd3; }

    /* Modern Card Effects */
    .card-modern {
        background: #ffffff;
        border: 1px solid #f1f5f9;
        box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
        transition: all 0.25s ease;
    }
    
    .card-modern:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08) !important;
    }

    .border-left-primary { border-left: 4px solid #3b82f6 !important; }
    .border-left-success { border-left: 4px solid #10b981 !important; }

    .leading-relaxed { line-height: 1.6; }

    /* Layout Profil List / Tabel Fleksibel */
    .profile-item {
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 14px 16px;
        height: 100%;
    }

    /* Print Styling */
    @media print {
        body { background: white !important; font-size: 11pt; color: #000 !important; }
        .no-print, .navbar, footer, .btn { display: none !important; }
        .card { border: 1px solid #ddd !important; box-shadow: none !important; margin-bottom: 15px !important; }
        .container { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
        .print-header { display: block !important; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px; }
    }
    .print-header { display: none; }
</style>

<div class="container py-4 rekomendasi-wrapper">
    <div class="row justify-content-center">
        <div class="col-lg-10 col-xl-9 animate__animated animate__fadeIn">
            
            <!-- Header Cetak PDF -->
            <div class="print-header text-center">
                <h3 class="fw-bold mb-1 text-uppercase font-heading">Hasil Rekomendasi Jurusan</h3>
                <p class="mb-1 text-muted">Sistem Rekomendasi Penjurusan Kuliah Berbasis Algoritma C4.5</p>
                <small class="text-muted">Tanggal Cetak: {{ \Carbon\Carbon::now()->format('d F Y, H:i') }} WIB</small>
            </div>

            <div class="card shadow-lg border-0 rounded-4 overflow-hidden mb-4">
                
                <!-- Hero Header Card -->
                <div class="bg-gradient-hero text-white p-4 p-md-5 text-center">
                    <div class="mb-3">
                        <span class="badge badge-hero px-3 py-2 rounded-pill font-heading fw-semibold fs-7 text-uppercase shadow-sm">
                            <i class="fa-solid fa-sparkles text-warning me-1"></i> Hasil Analisis Rekomendasi
                        </span>
                    </div>
                    
                    <p class="opacity-90 fw-medium mb-2 fs-6">
                        Halo, <strong>{{ $dataTesting->nama ?? Auth::user()->name }}</strong>! Jurusan yang paling direkomendasikan untukmu:
                    </p>

                    <h1 class="display-4 font-heading fw-extrabold text-white my-3 tracking-tight">
                        {{ $dataTesting->hasil_rekomendasi }}
                    </h1>
                    
                    <p class="lead opacity-90 mx-auto mb-0 fs-6 leading-relaxed" style="max-width: 620px;">
                        Berdasarkan kalkulasi algoritma C4.5 terhadap kombinasi nilai akademis, minat, cita-cita, dan preferensi studimu.
                    </p>
                </div>

                <div class="card-body p-4 p-md-5 bg-light-subtle">

                    <!-- Kartu Informasi & Prospek Jurusan -->
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <div class="card card-modern h-100 border-0 rounded-4 p-4 border-left-primary">
                                <div class="d-flex align-items-start gap-3">
                                    <div class="p-3 bg-primary-subtle text-primary rounded-3 flex-shrink-0">
                                        <i class="fa-solid fa-lightbulb fs-4"></i>
                                    </div>
                                    <div>
                                        <h6 class="font-heading fw-bold text-dark mb-1 fs-6">Mengapa Jurusan Ini?</h6>
                                        <p class="small text-muted mb-0 leading-relaxed">
                                            Algoritma memetakan profil akademismu paling dominan pada kelompok keilmuan <strong>{{ $dataTesting->preferensi_studi }}</strong> yang mendukung bidang {{ $dataTesting->hasil_rekomendasi }}.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card card-modern h-100 border-0 rounded-4 p-4 border-left-success">
                                <div class="d-flex align-items-start gap-3">
                                    <div class="p-3 bg-success-subtle text-success rounded-3 flex-shrink-0">
                                        <i class="fa-solid fa-briefcase fs-4"></i>
                                    </div>
                                    <div>
                                        <h6 class="font-heading fw-bold text-dark mb-1 fs-6">Peluang Karir & Relevansi</h6>
                                        <p class="small text-muted mb-0 leading-relaxed">
                                            @if(str_contains(strtolower($dataTesting->hasil_rekomendasi), strtolower($dataTesting->cita_cita_raw)))
                                                Sesuai dengan cita-citamu sebagai <strong>{{ $dataTesting->cita_cita_raw }}</strong>, jurusan ini memberikan landasan keahlian yang sangat linear.
                                            @else
                                                Jurusan <strong>{{ $dataTesting->hasil_rekomendasi }}</strong> membuka peluang karir strategis yang dapat memperluas kompetensi praktismu di dunia kerja.
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Ringkasan Profil: Layout Baru Berbentuk List Card (Dijamin Anti-Bocor Teks) -->
                    <div class="card border-0 shadow-sm rounded-4 bg-white p-4 mb-4">
                        <h6 class="font-heading fw-bold text-dark mb-3 d-flex align-items-center gap-2 fs-6">
                            <i class="fa-solid fa-id-card text-primary"></i> Ringkasan Profil & Data Input Kamu
                        </h6>

                        <div class="row g-3">
                            <!-- Nilai Rapor -->
                            <div class="col-12 col-sm-6 col-lg">
                                <div class="profile-item d-flex flex-column justify-content-between">
                                    <div>
                                        <span class="text-muted fw-semibold d-block fs-7 mb-1">Nilai Rapor</span>
                                        <h6 class="fw-bold text-dark mb-2 font-heading">{{ $dataTesting->nilai_raw }}</h6>
                                    </div>
                                    <div>
                                        <span class="custom-badge badge-soft-info font-heading">{{ $dataTesting->nilai }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Mapel Favorit -->
                            <div class="col-12 col-sm-6 col-lg">
                                <div class="profile-item d-flex flex-column justify-content-between">
                                    <div>
                                        <span class="text-muted fw-semibold d-block fs-7 mb-1">Mapel Favorit</span>
                                        <h6 class="fw-bold text-dark mb-2 font-heading" style="word-break: break-word;">{{ $dataTesting->mapel_favorit_raw ?? $dataTesting->mapel_favorit }}</h6>
                                    </div>
                                    <div>
                                        <span class="custom-badge badge-soft-danger font-heading">{{ $dataTesting->mapel_favorit }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Minat Utama -->
                            <div class="col-12 col-sm-6 col-lg">
                                <div class="profile-item d-flex flex-column justify-content-between">
                                    <div>
                                        <span class="text-muted fw-semibold d-block fs-7 mb-1">Minat Utama</span>
                                        <h6 class="fw-bold text-dark mb-2 font-heading" style="word-break: break-word;">{{ $dataTesting->minat_raw }}</h6>
                                    </div>
                                    <div>
                                        <span class="custom-badge badge-soft-primary font-heading">{{ $dataTesting->minat }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Cita-Cita -->
                            <div class="col-12 col-sm-6 col-lg">
                                <div class="profile-item d-flex flex-column justify-content-between">
                                    <div>
                                        <span class="text-muted fw-semibold d-block fs-7 mb-1">Cita-Cita</span>
                                        <h6 class="fw-bold text-dark mb-2 font-heading" style="word-break: break-word;">{{ $dataTesting->cita_cita_raw }}</h6>
                                    </div>
                                    <div>
                                        <span class="custom-badge badge-soft-success font-heading">{{ $dataTesting->cita_cita }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Rumpun Studi / Preferensi -->
                            <div class="col-12 col-sm-6 col-lg">
                                <div class="profile-item d-flex flex-column justify-content-between">
                                    <div>
                                        <span class="text-muted fw-semibold d-block fs-7 mb-1">Preferensi Studi</span>
                                        <h6 class="fw-bold text-dark mb-2 font-heading" style="word-break: break-word;">{{ $dataTesting->preferensi_studi_raw }}</h6>
                                    </div>
                                    <div>
                                        <span class="custom-badge badge-soft-warning font-heading">{{ $dataTesting->preferensi_studi }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Langkah Selanjutnya -->
                    <div class="card border-0 bg-primary-subtle text-primary-emphasis rounded-4 p-4 mb-4">
                        <div class="d-flex gap-3 align-items-start">
                            <i class="fa-solid fa-compass-drafting fs-3 text-primary mt-1 flex-shrink-0"></i>
                            <div>
                                <h6 class="font-heading fw-bold mb-2 fs-6">Langkah Selanjutnya Untukmu:</h6>
                                <ul class="mb-0 ps-3 small leading-relaxed">
                                    <li class="mb-1">Pelajari kurikulum dan mata kuliah utama yang ada di jurusan <strong>{{ $dataTesting->hasil_rekomendasi }}</strong>.</li>
                                    <li class="mb-1">Pertahankan dan tingkatkan prestasi akademis pada mata pelajaran penunjang jurusan ini.</li>
                                    <li>Diskusikan hasil rekomendasi ini bersama orang tua dan guru BK untuk perancangan studi lanjutan.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Tombol Navigasi -->
                    <div class="row g-2 no-print pt-2">
                        @if(Route::is('riwayat.show'))
                            <div class="col-md-6">
                                <a href="{{ route('riwayat.index') }}" class="btn btn-outline-secondary btn-lg w-100 rounded-3 font-heading fw-bold fs-6">
                                    <i class="fa-solid fa-arrow-left me-2"></i> Kembali ke Riwayat
                                </a>
                            </div>
                            <div class="col-md-6">
                                <button onclick="window.print()" class="btn btn-primary btn-lg w-100 rounded-3 font-heading fw-bold shadow-sm fs-6">
                                    <i class="fa-solid fa-print me-2"></i> Cetak Hasil (PDF)
                                </button>
                            </div>
                        @else
                            <div class="col-md-4">
                                <a href="{{ route('prediksi.index', [
                                    'nilai'            => $dataTesting->nilai_raw ?? $dataTesting->nilai,
                                    'mapel_favorit'    => $dataTesting->mapel_favorit_raw ?? $dataTesting->mapel_favorit,
                                    'minat'            => $dataTesting->minat_raw ?? $dataTesting->minat,
                                    'cita_cita'        => $dataTesting->cita_cita_raw ?? $dataTesting->cita_cita,
                                    'preferensi_studi' => $dataTesting->preferensi_studi_raw ?? $dataTesting->preferensi_studi,
                                    'nama'             => $dataTesting->nama,
                                    'siswa_id'         => $dataTesting->user_id
                                ]) }}" class="btn btn-warning btn-lg w-100 rounded-3 font-heading fw-bold fs-6">
                                    <i class="fas fa-redo me-1"></i> Cek Ulang
                                </a>
                            </div>
                            <div class="col-md-4">
                                <button onclick="window.print()" class="btn btn-outline-primary btn-lg w-100 rounded-3 font-heading fw-bold fs-6">
                                    <i class="fa-solid fa-print me-2"></i> Cetak Hasil (PDF)
                                </button>
                            </div>
                            <div class="col-md-4">
                                <a href="{{ route('dashboard') }}" class="btn btn-success btn-lg w-100 rounded-3 font-heading fw-bold shadow-sm fs-6">
                                    <i class="fa-solid fa-house me-2"></i> Ke Dashboard
                                </a>
                            </div>
                        @endif
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
@endsection