300 lines
17 KiB
PHP
300 lines
17 KiB
PHP
@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 |