759 lines
37 KiB
PHP
759 lines
37 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Cek Rekomendasi')
|
|
|
|
@section('content')
|
|
|
|
<!-- Custom CSS Tambahan untuk Form Interaktif & Pohon Keputusan -->
|
|
<style>
|
|
/* 1. Hero Card Gradient Modern & Glass Effect */
|
|
.hero-card-dominant {
|
|
background: linear-gradient(135deg, #1e40af 0%, #2563eb 60%, #3b82f6 100%);
|
|
color: #ffffff;
|
|
border: none;
|
|
box-shadow: 0 14px 28px rgba(37, 99, 235, 0.25);
|
|
}
|
|
|
|
.hero-title-main {
|
|
font-size: 2.25rem;
|
|
font-weight: 900;
|
|
line-height: 1.25;
|
|
letter-spacing: -0.5px;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.hero-title-highlight {
|
|
background: linear-gradient(90deg, #fde047 0%, #f59e0b 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
display: inline-block;
|
|
}
|
|
|
|
.custom-badge-hero {
|
|
background: rgba(255, 255, 255, 0.15) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.3) !important;
|
|
backdrop-filter: blur(8px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Styling Tombol CTA Utama (Highlight Kuning Emas Premium) */
|
|
.btn-cta-highlight {
|
|
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
|
|
color: #0f172a !important;
|
|
font-weight: 800 !important;
|
|
font-size: 0.95rem;
|
|
padding: 12px 22px !important;
|
|
border: 2px solid #fef08a !important;
|
|
box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn-cta-highlight:hover {
|
|
transform: translateY(-3px) scale(1.03) !important;
|
|
background: linear-gradient(135deg, #fef08a 0%, #fbbf24 100%) !important;
|
|
box-shadow: 0 12px 25px rgba(245, 158, 11, 0.55) !important;
|
|
color: #000000 !important;
|
|
}
|
|
|
|
.btn-cta-highlight .icon-circle {
|
|
background: rgba(15, 23, 42, 0.12);
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Decorative Light Effect inside Hero */
|
|
.hero-glow-circle {
|
|
position: absolute;
|
|
width: 250px;
|
|
height: 250px;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border-radius: 50%;
|
|
filter: blur(40px);
|
|
top: -50px;
|
|
right: 15%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* CSS Tree Layout Sesuai Standar Dosen */
|
|
.tree-dosen-container {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
padding: 30px 10px;
|
|
background: #f8fafc;
|
|
border-radius: 16px;
|
|
border: 1px solid #e2e8f0;
|
|
text-align: center;
|
|
}
|
|
|
|
.tree-dosen {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tree-dosen ul {
|
|
padding-top: 25px;
|
|
position: relative;
|
|
transition: all 0.5s;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 0;
|
|
padding-left: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.tree-dosen li {
|
|
text-align: center;
|
|
list-style-type: none;
|
|
position: relative;
|
|
padding: 25px 8px 0 8px;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
/* Garis Penghubung Cabang */
|
|
.tree-dosen li::before, .tree-dosen li::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 50%;
|
|
border-top: 2px solid #475569;
|
|
width: 50%;
|
|
height: 25px;
|
|
}
|
|
|
|
.tree-dosen li::after {
|
|
right: auto;
|
|
left: 50%;
|
|
border-left: 2px solid #475569;
|
|
}
|
|
|
|
.tree-dosen li:only-child::after, .tree-dosen li:only-child::before {
|
|
display: none;
|
|
}
|
|
|
|
.tree-dosen li:only-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.tree-dosen li:first-child::before, .tree-dosen li:last-child::after {
|
|
border: 0 none;
|
|
}
|
|
|
|
.tree-dosen li:last-child::before {
|
|
border-right: 2px solid #475569;
|
|
border-radius: 0 8px 0 0;
|
|
}
|
|
|
|
.tree-dosen li:first-child::after {
|
|
border-radius: 8px 0 0 0;
|
|
}
|
|
|
|
.tree-dosen ul ul::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
border-left: 2px solid #475569;
|
|
width: 0;
|
|
height: 25px;
|
|
}
|
|
|
|
/* Node Lingkaran Utama (Root) */
|
|
.circle-node-root {
|
|
width: 110px;
|
|
height: 110px;
|
|
border: 3px solid #1e40af;
|
|
background-color: #dbeafe;
|
|
color: #1e3a8a;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 800;
|
|
font-size: 12px;
|
|
box-shadow: 0 4px 10px rgba(30, 64, 175, 0.2);
|
|
margin: 0 auto 10px auto;
|
|
position: relative;
|
|
z-index: 2;
|
|
white-space: normal;
|
|
line-height: 1.2;
|
|
padding: 6px;
|
|
}
|
|
|
|
/* Node Lingkaran Sub-Level (Node 2, Node 3) */
|
|
.circle-node-child {
|
|
width: 95px;
|
|
height: 95px;
|
|
border: 3px solid #0284c7;
|
|
background-color: #e0f2fe;
|
|
color: #0369a1;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
box-shadow: 0 4px 8px rgba(2, 132, 199, 0.2);
|
|
margin: 0 auto 10px auto;
|
|
position: relative;
|
|
z-index: 2;
|
|
white-space: normal;
|
|
line-height: 1.2;
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Label Kriteria pada Garis Cabang */
|
|
.branch-label-wrapper {
|
|
position: relative;
|
|
top: -14px;
|
|
z-index: 3;
|
|
margin-bottom: -5px;
|
|
}
|
|
|
|
.branch-label-dosen {
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
color: #0f172a;
|
|
background: #ffffff;
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
border: 1.5px solid #64748b;
|
|
display: inline-block;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.06);
|
|
white-space: normal;
|
|
max-width: 120px;
|
|
}
|
|
|
|
/* Leaf Node (Hasil Akhir) */
|
|
.leaf-box-result {
|
|
border: 2px solid #059669;
|
|
background-color: #ecfdf5;
|
|
color: #065f46;
|
|
padding: 8px 12px;
|
|
border-radius: 10px;
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
display: inline-block;
|
|
box-shadow: 0 4px 6px rgba(5, 150, 105, 0.15);
|
|
white-space: normal;
|
|
max-width: 140px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Print Style agar hasil cetak rapi */
|
|
@media print {
|
|
body * {
|
|
visibility: hidden;
|
|
}
|
|
#section-hasil-prediksi, #section-hasil-prediksi * {
|
|
visibility: visible;
|
|
}
|
|
#section-hasil-prediksi {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="c45-analytics-wrapper">
|
|
|
|
{{-- ALERT SUKSES --}}
|
|
@if(session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show rounded-3 mb-4 shadow-sm" role="alert">
|
|
<i class="fas fa-check-circle me-1"></i> {{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- 1. HERO HEADER UTAMA (DESAIN REVISI BERSIH & MEWAH) -->
|
|
<div class="card hero-card-dominant rounded-4 mb-4 overflow-hidden position-relative border-0">
|
|
<!-- Glow Light Effect Background -->
|
|
<div class="hero-glow-circle"></div>
|
|
|
|
<!-- Watermark Topi Wisuda (Pindah sedikit agar tidak tabrakan dengan tombol) -->
|
|
<div class="position-absolute end-0 bottom-0 opacity-10 me-2 mb-n4 text-white pointer-events-none" style="font-size: 12rem; line-height: 1;">
|
|
<i class="fas fa-user-graduate"></i>
|
|
</div>
|
|
|
|
<div class="card-body p-4 p-lg-5 position-relative z-1">
|
|
<div class="row align-items-center">
|
|
|
|
<!-- Sisi Kiri: Teks & Informational Content -->
|
|
<div class="col-lg-7 col-xl-8 mb-4 mb-lg-0">
|
|
<!-- Top Badge -->
|
|
<div class="d-inline-flex align-items-center gap-2 custom-badge-hero rounded-pill px-3 py-1 mb-3">
|
|
<i class="fas fa-sparkles text-warning fs-7"></i>
|
|
<span class="small fw-bold text-uppercase text-white" style="letter-spacing: 0.6px; font-size: 11px;">
|
|
Sistem Pendukung Keputusan C4.5
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Judul Utama dengan Typography Highlight -->
|
|
<h1 class="hero-title-main text-white mb-3">
|
|
Cek Rekomendasi <br>
|
|
<span class="hero-title-highlight">Jurusan Siswa</span>
|
|
</h1>
|
|
|
|
<!-- Deskripsi Singkat & Jelas -->
|
|
<p class="text-white opacity-90 fs-6 mb-0 style-description" style="max-width: 620px; line-height: 1.6; font-weight: 400;">
|
|
Lakukan analisis penentuan program studi perguruan tinggi untuk siswa secara presisi berbasis algoritma C4.5 berdasarkan evaluasi rapor, minat, serta cita-cita karir.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Sisi Kanan: Action Button / CTA Highlighted -->
|
|
<div class="col-lg-5 col-xl-4 text-center text-lg-end">
|
|
<a href="{{ route('c45.create') }}" class="btn btn-cta-highlight rounded-pill d-inline-flex align-items-center justify-content-center gap-2">
|
|
<i class="fas fa-user-plus fs-6"></i>
|
|
<span>Mulai Rekomendasi Siswa</span>
|
|
<span class="icon-circle ms-1">
|
|
<i class="fas fa-arrow-right fs-7"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. SECTION DIVIDER & SUB-HEADER ANALISIS MODEL -->
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center my-4 pt-2 pb-3 border-bottom">
|
|
<div>
|
|
<div class="d-flex align-items-center gap-2 mb-1">
|
|
<span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill px-3 py-1 fs-7 fw-semibold">
|
|
<i class="fas fa-brain me-1"></i> Model Analytics
|
|
</span>
|
|
</div>
|
|
<h3 class="fw-bold text-dark m-0 d-flex align-items-center gap-2 fs-4">
|
|
<i class="fas fa-microchip text-primary"></i> Transparansi & Analisis Algoritma C4.5
|
|
</h3>
|
|
<p class="text-muted small mb-0 mt-1">Laporan rincian kalkulasi matematis, entropy, gain ratio, dan pembentukan pohon keputusan.</p>
|
|
</div>
|
|
<div class="mt-3 mt-md-0">
|
|
<div class="card border-0 bg-primary text-white shadow-sm rounded-pill px-3 py-2">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<i class="fas fa-database fs-5 text-white-50"></i>
|
|
<div>
|
|
<div class="text-uppercase opacity-75 lh-1" style="font-size: 10px; letter-spacing: 0.5px;">Dataset Training</div>
|
|
<div class="fw-bold fs-6 lh-1 mt-1">{{ number_format($totalData) }} Record</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cards Overview -->
|
|
<div class="row g-3 mb-4">
|
|
<!-- Entropy Total -->
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm rounded-4 text-white overflow-hidden h-100 position-relative" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
|
|
<div class="position-absolute end-0 bottom-0 opacity-10 me-3 mb-2" style="font-size: 5rem; pointer-events: none;">
|
|
<i class="fas fa-calculator"></i>
|
|
</div>
|
|
<div class="card-body p-4 position-relative z-1">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-uppercase fw-bold text-light opacity-75 small d-flex align-items-center gap-2" style="letter-spacing: 0.5px;">
|
|
<i class="fas fa-calculator text-info"></i> Entropy Total System
|
|
</span>
|
|
<span class="badge bg-white bg-opacity-10 text-light rounded-pill px-3 py-1 small border border-white border-opacity-10">Sistem Utama</span>
|
|
</div>
|
|
<div class="d-flex align-items-baseline gap-2 mb-2">
|
|
<h1 class="display-5 fw-bold mb-0 text-white font-monospace">
|
|
{{ number_format($entropyTotal, 4) }}
|
|
</h1>
|
|
</div>
|
|
<small class="text-light opacity-50 d-block">
|
|
<i class="fas fa-info-circle me-1"></i>Tingkat ketidakpastian/heterogenitas data awal sebelum pembagian
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Root Node Terpilih -->
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm rounded-4 text-white overflow-hidden h-100 position-relative" style="background: linear-gradient(135deg, #059669 0%, #047857 100%);">
|
|
<div class="position-absolute end-0 bottom-0 opacity-10 me-3 mb-2" style="font-size: 5rem; pointer-events: none;">
|
|
<i class="fas fa-sitemap"></i>
|
|
</div>
|
|
<div class="card-body p-4 position-relative z-1">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-uppercase fw-bold text-light opacity-90 small d-flex align-items-center gap-2" style="letter-spacing: 0.5px;">
|
|
<i class="fas fa-sitemap text-warning"></i> Root Node Terpilih (Iterasi 1)
|
|
</span>
|
|
<span class="badge bg-white bg-opacity-20 text-white rounded-pill px-3 py-1 small fw-semibold border border-white border-opacity-20">
|
|
Utama
|
|
</span>
|
|
</div>
|
|
<h2 class="fw-bold mb-2 text-white text-truncate fs-2">
|
|
{{ ucwords(str_replace('_', ' ', $rootNode['root'])) }}
|
|
</h2>
|
|
<div>
|
|
<span class="badge bg-white text-success fw-bold px-3 py-2 rounded-pill shadow-sm font-monospace fs-6">
|
|
<i class="fas fa-chart-line me-1"></i> Gain Ratio: {{ number_format($rootNode['gain'], 4) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ringkasan Statistik Data & Gain Ratio -->
|
|
<div class="row g-4 mb-4">
|
|
<!-- Distribusi Target -->
|
|
<div class="col-lg-4">
|
|
<div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden">
|
|
<div class="card-header bg-white py-3 px-4 border-bottom d-flex align-items-center justify-content-between">
|
|
<h6 class="fw-bold text-dark mb-0 d-flex align-items-center gap-2">
|
|
<i class="fas fa-chart-pie text-primary"></i> Distribusi Target (Jurusan)
|
|
</h6>
|
|
<span class="badge bg-light text-secondary rounded-pill border px-2 py-1 small">{{ count($jumlahJurusan) }} Kelas</span>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="bg-light-subtle text-muted small text-uppercase" style="font-size: 11px;">
|
|
<tr>
|
|
<th class="ps-4 py-3">Jurusan Target</th>
|
|
<th class="text-center pe-4 py-3">Jumlah</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="border-top-0">
|
|
@foreach($jumlahJurusan as $item)
|
|
<tr>
|
|
<td class="ps-4 fw-semibold text-dark">
|
|
<i class="fas fa-graduation-cap text-muted me-2 opacity-50"></i>{{ $item->jurusan }}
|
|
</td>
|
|
<td class="text-center pe-4">
|
|
<span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-1 rounded-pill fw-bold font-monospace">
|
|
{{ $item->jumlah }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Peringkat Gain Ratio -->
|
|
<div class="col-lg-8">
|
|
<div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden">
|
|
<div class="card-header bg-white py-3 px-4 border-bottom d-flex align-items-center justify-content-between">
|
|
<h6 class="fw-bold text-dark mb-0 d-flex align-items-center gap-2">
|
|
<i class="fas fa-list-ol text-primary"></i> Peringkat Gain Ratio Kriteria (Root Node)
|
|
</h6>
|
|
<span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1 small">
|
|
<i class="fas fa-check-circle me-1"></i>Akar Terpilih
|
|
</span>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="bg-light-subtle text-muted small text-uppercase" style="font-size: 11px;">
|
|
<tr>
|
|
<th class="ps-4 py-3">Atribut / Kriteria</th>
|
|
<th class="text-center py-3">Info Gain</th>
|
|
<th class="text-center py-3">Split Info</th>
|
|
<th class="text-center py-3">Gain Ratio</th>
|
|
<th class="text-center pe-4 py-3">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="border-top-0">
|
|
@foreach($rootNode['semua_gain'] as $atribut => $gainRatio)
|
|
<tr class="{{ $atribut == $rootNode['root'] ? 'table-success-subtle fw-semibold' : '' }}">
|
|
<td class="ps-4">
|
|
@if($atribut == $rootNode['root'])
|
|
<i class="fas fa-star text-warning me-2"></i>
|
|
@else
|
|
<i class="far fa-circle text-muted me-2 opacity-50"></i>
|
|
@endif
|
|
<span class="{{ $atribut == $rootNode['root'] ? 'text-success fw-bold' : 'text-dark' }}">
|
|
{{ ucfirst(str_replace('_', ' ', $atribut)) }}
|
|
</span>
|
|
</td>
|
|
<td class="text-center font-monospace text-muted">
|
|
@if($atribut == 'nilai') {{ number_format($gainNilai, 4) }}
|
|
@elseif($atribut == 'minat') {{ number_format($gainMinat, 4) }}
|
|
@elseif($atribut == 'mapel_favorit') {{ number_format($gainMapelFavorit ?? 0, 4) }}
|
|
@elseif($atribut == 'cita_cita') {{ number_format($gainCita, 4) }}
|
|
@else {{ number_format($gainPreferensi, 4) }} @endif
|
|
</td>
|
|
<td class="text-center font-monospace text-muted">
|
|
@if($atribut == 'nilai') {{ number_format($splitNilai, 4) }}
|
|
@elseif($atribut == 'minat') {{ number_format($splitMinat, 4) }}
|
|
@elseif($atribut == 'mapel_favorit') {{ number_format($splitMapelFavorit ?? 0, 4) }}
|
|
@elseif($atribut == 'cita_cita') {{ number_format($splitCita, 4) }}
|
|
@else {{ number_format($splitPreferensi, 4) }} @endif
|
|
</td>
|
|
<td class="text-center font-monospace fw-bold {{ $atribut == $rootNode['root'] ? 'text-success fs-6' : 'text-dark' }}">
|
|
{{ number_format($gainRatio, 4) }}
|
|
</td>
|
|
<td class="text-center pe-4">
|
|
@if($atribut == $rootNode['root'])
|
|
<span class="badge bg-success text-white rounded-pill px-3 py-1 shadow-sm">
|
|
<i class="fas fa-check me-1"></i> Root Node
|
|
</span>
|
|
@else
|
|
<span class="badge bg-light text-secondary border rounded-pill px-3 py-1">Cabang</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VISUALISASI DECISION TREE C4.5 -->
|
|
<div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
|
|
<div class="card-header bg-white py-3 px-4 border-bottom d-flex justify-content-between align-items-center">
|
|
<h6 class="fw-bold text-dark mb-0 d-flex align-items-center gap-2">
|
|
<i class="fas fa-project-diagram text-primary"></i> Visualisasi Pohon Keputusan (Decision Tree C4.5)
|
|
</h6>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill px-3 py-1">
|
|
<i class="fas fa-eye me-1"></i> Interactive View
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-4 bg-light-subtle">
|
|
<div class="tree-dosen-container p-3 rounded-4 bg-white border shadow-sm overflow-auto">
|
|
<div class="tree-dosen">
|
|
<ul class="mb-0 ps-0">
|
|
<li class="list-unstyled">
|
|
{{-- PANGGILAN PERTAMA DARI ROOT NODE --}}
|
|
@include('c45._tree_node', ['tree' => $tree, 'isRoot' => true])
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accordion Subset Cabang & Iterasi Rekursif (Semua Node) -->
|
|
<div class="mb-4">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<h5 class="fw-bold text-dark mb-0 d-flex align-items-center gap-2">
|
|
<i class="fas fa-layer-group text-primary"></i> Detail Iterasi Rekursif & Subset Cabang
|
|
</h5>
|
|
<span class="badge bg-secondary-subtle text-secondary border rounded-pill px-3 py-1">
|
|
{{ count($detailSubsets) }} Level Node Terbentuk
|
|
</span>
|
|
</div>
|
|
|
|
@foreach($detailSubsets as $nodeIdx => $nodeInfo)
|
|
<div class="card shadow-sm rounded-4 mb-3 overflow-hidden border-start border-primary" style="border-left-width: 4px !important;">
|
|
<div class="card-header bg-white py-3 px-4 border-bottom d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2">
|
|
<h6 class="fw-bold text-dark mb-0 d-flex align-items-center gap-2">
|
|
<span class="badge bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 26px; height: 26px;">
|
|
{{ $nodeInfo['level'] }}
|
|
</span>
|
|
<span>Pembagian Atribut:</span>
|
|
<span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-1 rounded-pill">
|
|
{{ strtoupper(str_replace('_', ' ', $nodeInfo['split_by'])) }}
|
|
</span>
|
|
</h6>
|
|
<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-3 py-1">
|
|
<i class="fas fa-route me-1"></i>Jalur: {{ $nodeInfo['path_label'] }}
|
|
</span>
|
|
</div>
|
|
<div class="card-body p-3 bg-light-subtle">
|
|
<div class="accordion accordion-flush" id="accordionSubset-{{ $nodeIdx }}">
|
|
@foreach($nodeInfo['branches'] as $branchIdx => $branch)
|
|
@php $accordionId = "collapse-" . $nodeIdx . "-" . $loop->index; @endphp
|
|
<div class="accordion-item border-0 rounded-3 mb-2 shadow-sm overflow-hidden">
|
|
<h2 class="accordion-header" id="heading-{{ $accordionId }}">
|
|
<button class="accordion-button {{ ! $loop->first ? 'collapsed' : '' }} bg-white py-3 px-3 fw-semibold"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#{{ $accordionId }}"
|
|
aria-expanded="{{ $loop->first ? 'true' : 'false' }}">
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center w-100 me-3 gap-2">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<i class="fas fa-code-branch text-primary"></i>
|
|
<span class="text-dark">
|
|
Cabang Nilai: <strong class="text-primary fs-6">{{ $branch['nilai_cabang'] }}</strong>
|
|
</span>
|
|
</div>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<span class="badge bg-secondary-subtle text-secondary border rounded-pill px-2 py-1 font-monospace">
|
|
{{ $branch['jumlah_data'] }} Data
|
|
</span>
|
|
@if($branch['is_pure'])
|
|
<span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1">
|
|
<i class="fas fa-leaf me-1"></i> Leaf Node ({{ $branch['pemenang'] }})
|
|
</span>
|
|
@else
|
|
<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-3 py-1">
|
|
<i class="fas fa-split me-1"></i> Pemecah: {{ strtoupper(str_replace('_', ' ', $branch['pemenang'])) }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</h2>
|
|
<div id="{{ $accordionId }}"
|
|
class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
|
|
data-bs-parent="#accordionSubset-{{ $nodeIdx }}">
|
|
<div class="accordion-body bg-white p-4 border-top">
|
|
|
|
@if($branch['is_pure'])
|
|
<div class="alert alert-success border-0 bg-success-subtle text-success-emphasis rounded-3 d-flex align-items-center mb-3">
|
|
<i class="fas fa-check-circle fs-4 me-3 text-success"></i>
|
|
<div>
|
|
<strong>Node Murni (Pure Leaf Node):</strong> Seluruh {{ $branch['jumlah_data'] }} data mengarah pada jurusan <strong class="text-decoration-underline">{{ $branch['pemenang'] }}</strong> (Entropy = 0).
|
|
</div>
|
|
</div>
|
|
@else
|
|
<h6 class="fw-bold text-dark mb-2 d-flex align-items-center gap-2">
|
|
<i class="fas fa-calculator text-primary"></i> Kalkulasi Atribut Tersisa:
|
|
</h6>
|
|
<div class="table-responsive mb-4">
|
|
<table class="table table-sm table-hover border align-middle mb-0">
|
|
<thead class="bg-light-subtle text-muted small text-uppercase" style="font-size: 11px;">
|
|
<tr>
|
|
<th class="ps-3 py-2">Atribut Tersisa</th>
|
|
<th class="text-center py-2">Information Gain</th>
|
|
<th class="text-center py-2">Split Info</th>
|
|
<th class="text-center py-2">Gain Ratio</th>
|
|
<th class="text-center pe-3 py-2">Keputusan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($branch['kalkulasi'] as $calcIdx => $calc)
|
|
<tr class="{{ $calcIdx === 0 ? 'table-warning-subtle fw-bold' : '' }}">
|
|
<td class="ps-3">
|
|
@if($calcIdx === 0)
|
|
<i class="fas fa-star text-warning me-1"></i>
|
|
@endif
|
|
{{ strtoupper(str_replace('_', ' ', $calc['atribut'])) }}
|
|
</td>
|
|
<td class="text-center font-monospace">{{ number_format($calc['gain'], 4) }}</td>
|
|
<td class="text-center font-monospace">{{ number_format($calc['split_info'], 4) }}</td>
|
|
<td class="text-center font-monospace fw-bold {{ $calcIdx === 0 ? 'text-warning-emphasis fs-6' : '' }}">{{ number_format($calc['gain_ratio'], 4) }}</td>
|
|
<td class="text-center pe-3">
|
|
@if($calcIdx === 0)
|
|
<span class="badge bg-warning text-dark border border-warning shadow-sm">Pemecah Cabang</span>
|
|
@else
|
|
<span class="text-muted small">Lanjutan</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
|
<h6 class="fw-bold text-secondary mb-0 small text-uppercase d-flex align-items-center gap-1">
|
|
<i class="fas fa-table text-muted"></i> Sampel Data Cabang Ini:
|
|
</h6>
|
|
<span class="badge bg-light text-muted border rounded-pill px-2 py-1 small">Total {{ count($branch['items']) }} baris</span>
|
|
</div>
|
|
<div class="table-responsive rounded-3 border">
|
|
<table class="table table-sm table-striped align-middle mb-0">
|
|
<thead class="bg-light text-muted small text-uppercase" style="font-size: 10px;">
|
|
<tr>
|
|
<th class="ps-3">Nilai</th>
|
|
<th>Minat</th>
|
|
<th>Mapel Favorit</th>
|
|
<th>Cita-cita</th>
|
|
<th>Preferensi</th>
|
|
<th class="text-success pe-3">Target Jurusan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="small">
|
|
@foreach($branch['items'] as $d)
|
|
<tr>
|
|
<td class="ps-3">{{ is_object($d) ? $d->nilai : $d['nilai'] }}</td>
|
|
<td>{{ is_object($d) ? $d->minat : $d['minat'] }}</td>
|
|
<td>{{ is_object($d) ? ($d->mapel_favorit ?? $d['mapel_favorit'] ?? '-') : ($d['mapel_favorit'] ?? '-') }}</td>
|
|
<td>{{ is_object($d) ? $d->cita_cita : $d['cita_cita'] }}</td>
|
|
<td>{{ is_object($d) ? $d->preferensi_studi : $d['preferensi_studi'] }}</td>
|
|
<td class="fw-bold text-success pe-3">
|
|
<i class="fas fa-check-circle me-1 small"></i>{{ is_object($d) ? $d->jurusan : $d['jurusan'] }}
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- Visualisasi Decision Rules (IF-THEN) -->
|
|
<div class="card border-0 shadow-sm rounded-4 mb-5 overflow-hidden">
|
|
<div class="card-header bg-white py-3 px-4 border-bottom d-flex justify-content-between align-items-center">
|
|
<h6 class="fw-bold text-dark mb-0 d-flex align-items-center gap-2">
|
|
<i class="fas fa-scroll text-primary"></i> Aturan Keputusan Sistem (Decision Rules)
|
|
</h6>
|
|
<span class="badge bg-primary rounded-pill px-3 py-1 font-monospace">{{ count($rules) }} Aturan Terbentuk</span>
|
|
</div>
|
|
<div class="card-body p-4 bg-light-subtle">
|
|
<div class="row g-3">
|
|
@foreach($rules as $ruleIdx => $rule)
|
|
<div class="col-12">
|
|
<div class="card shadow-sm rounded-4 mb-3 overflow-hidden border-start border-primary" style="border-left-width: 4px !important;">
|
|
<div class="card-body p-3 bg-white d-flex align-items-center justify-content-between">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<span class="badge bg-primary text-white rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 32px; height: 32px; font-size: 13px;">
|
|
{{ $ruleIdx + 1 }}
|
|
</span>
|
|
<div class="font-monospace fs-6 text-dark lh-base">
|
|
{!! str_replace(
|
|
['IF', 'THEN', 'AND'],
|
|
['<span class="badge bg-dark px-2 py-1 me-1 shadow-sm">IF</span>', '<span class="badge bg-success px-2 py-1 mx-1 shadow-sm">THEN</span>', '<span class="badge bg-secondary px-2 py-1 mx-1 shadow-sm">AND</span>'],
|
|
is_array($rule) ? implode(' ', $rule) : $rule
|
|
) !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
var btnMulai = document.querySelector('[data-bs-target="#modalCekRekomendasi"]');
|
|
if (btnMulai) {
|
|
btnMulai.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
var modalEl = document.getElementById('modalCekRekomendasi');
|
|
var myModal = new bootstrap.Modal(modalEl);
|
|
myModal.show();
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection |