@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