{{-- @extends('admin.layouts.app')
@section('title', 'Dashboard')

@section('content')
<!-- partial -->
<div class="main-panel">
    <div class="content-wrapper" style="padding: 2.5rem">
        <div class="row">
        <div class="col-sm-12">
            <div class="home-tab">
                <div class="tab-content tab-content-basic">
                    <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview">
                        <div class="row g-4 mb-4">

                        <!-- Total Data -->
                        <div class="col-12 col-sm-6 col-lg-3">
                            <div class="bg-white py-3 rounded shadow-sm text-center">
                                <p class="statistics-title text-muted mt-2 mb-1">Seluruh Data</p>
                                <div class="d-flex align-items-center justify-content-evenly">
                                    <i class="mdi mdi-database text-primary fs-3"></i>
                                    <h3 class="fw-bold">{{ $dataAll }}</h3>
                                </div>
                            </div>
                        </div>

                        <!-- Data Training -->
                        <div class="col-12 col-sm-6 col-lg-3">
                            <div class="bg-white py-3 rounded shadow-sm text-center">
                                <p class="statistics-title text-muted mt-2 mb-1">Total Data Training</p>
                                <div class="d-flex align-items-center justify-content-evenly">
                                    <i class="mdi mdi-database-check text-info fs-3"></i>
                                    <h3 class="fw-bold">{{ $dataAll - $data2->where('type', 'uji')->count() }}</h3>
                                </div>
                            </div>
                        </div>

                        <!-- Training Lulus -->
                        <div class="col-12 col-sm-6 col-lg-3">
                            <div class="bg-white py-3 rounded shadow-sm text-center">
                                <p class="statistics-title text-muted mt-2 mb-1">Total Data Testing</p>
                                <div class="d-flex align-items-center justify-content-evenly">
                                    <i class="mdi mdi-flask text-warning fs-3"></i>
                                    {{-- <i class="mdi mdi-check-circle text-success fs-3"></i> --}}
                                    {{-- <h3 class="fw-bold">
                                        {{ $data2->where('type', 'uji')->count()}}
                                    </h3>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-sm-6 col-lg-3">
                            <div class="bg-white py-3 rounded shadow-sm text-center">
                                <p class="statistics-title text-muted mt-2 mb-1">Akurasi Model</p>
                                <div class="d-flex align-items-center justify-content-evenly">
                                    <i class="mdi mdi-close-circle text-danger fs-3"></i>
                                    <h3 class="fw-bold">
                                        {{ $res['res']['accuracy'] }}%
                                    </h3>
                                </div>
                            </div>
                        </div> --}}

                        <!-- Data Testing -->
                        {{-- <div class="col-12 col-sm-6 col-lg-2">
                            <div class="bg-white py-3 rounded shadow-sm text-center">
                                <p class="statistics-title text-muted mt-2 mb-1">TestIng Tidak Lulus</p>
                                <div class="d-flex align-items-center justify-content-evenly">
                                    <i class="mdi mdi-flask text-warning fs-3"></i>
                                    <h3 class="fw-bold">
                                        {{ $totalTesting }}
                                    </h3>
                                </div>
                            </div>
                        </div> --}}

                        <!-- Testing Lulus -->
                        {{-- <div class="col-12 col-sm-6 col-lg-2">
                            <div class="bg-white py-3 rounded shadow-sm text-center">
                                <p class="statistics-title text-muted mt-2 mb-1">Testing Lulus</p>
                                <div class="d-flex align-items-center justify-content-evenly">
                                    <i class="mdi mdi-check-circle text-success fs-3"></i>
                                    <h3 class="fw-bold">
                                        {{ $testingLolos }}
                                    </h3>
                                </div>
                            </div>
                        </div> --}}
                    {{-- </div>

                        <div class="row">
                            <div class="col-12 col-lg-6 grid-margin stretch-card">
                                <div class="card card-rounded">
                                    <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h4 class="card-title card-title-dash">Matrix Evaluasi</h4>
                                        </div>
                                        <canvas class="my-auto" id="doughnutChart" height="200"></canvas>
                                        <div id="doughnut-chart-legend" class="mt-5 text-center"></div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-6 grid-margin stretch-card">
                                <div class="card card-rounded">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-12">
                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                <h4 class="card-title card-title-dash">Mini Confusion Matrix</h4>
                                            </div>
                                            <canvas class="my-auto" id="doughnutChart2" height="200"></canvas>
                                            <div id="doughnut-chart-legend2" class="mt-5 text-center"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
    <!-- content-wrapper ends -->
    <footer class="footer text-center">
        <span class="text-muted text-sm-left d-block d-sm-inline-block">
            © {{ date('Y') }} Developed by
            <strong>Muhamad Ramadhan Tri Nurdias</strong>
        </span>
    </footer>
</div>
@endsection --}}

{{-- @push('after-script')
    <script>
        (function($) {
        'use strict';
        $(function() {
            if ($("#doughnutChart").length) {
                var doughnutChartCanvas = $("#doughnutChart").get(0).getContext("2d");
                var doughnutPieData = {
                    datasets: [{
                    data: [ {{ $res['res']['accuracy'] }}, {{ $res['res']['precision'] }}, {{ $res['res']['recall'] }}, {{ $res['res']['f1_score'] }} ],
                    backgroundColor: [
                        "#1F3BB3",
                        "#FDD0C7",
                        "#52CDFF",
                        "#7442eb",
                    ],
                    borderColor: [
                        "#1F3BB3",
                        "#FDD0C7",
                        "#52CDFF",
                        "#7442eb",
                    ],
                    }],

                    // These labels appear in the legend and in the tooltips when hovering different arcs
                    labels: ['Akurasi', 'Presisi', 'Recall', 'F1-score'],

                };
                var doughnutPieOptions = {
                    cutoutPercentage: 50,
                    animationEasing: "easeOutBounce",
                    animateRotate: true,
                    animateScale: false,
                    responsive: true,
                    maintainAspectRatio: true,
                    showScale: true,
                    legend: false,
                    legendCallback: function (chart) {
                        var text = [];
                        text.push('<div class="chartjs-legend"><ul class="justify-content-center">');
                        for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
                            text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
                            text.push('</span>');
                            if (chart.data.labels[i]) {
                                text.push(chart.data.labels[i]);
                            }
                            text.push('</li>');
                        }
                        text.push('</div></ul>');
                        return text.join("");
                    },

                    layout: {
                        padding: {
                            left: 0,
                            right: 0,
                            top: 0,
                            bottom: 0
                        }
                    },
                    tooltips: {
                        callbacks: {
                            title: function(tooltipItem, data) {
                            return data['labels'][tooltipItem[0]['index']];
                            },
                            label: function(tooltipItem, data) {
                            return data['datasets'][0]['data'][tooltipItem['index']];
                            }
                        },

                        backgroundColor: '#fff',
                        titleFontSize: 14,
                        titleFontColor: '#0B0F32',
                        bodyFontColor: '#737F8B',
                        bodyFontSize: 11,
                        displayColors: false
                    }
                };
                var doughnutChart = new Chart(doughnutChartCanvas, {
                    type: 'doughnut',
                    data: doughnutPieData,
                    options: doughnutPieOptions
                });
                document.getElementById('doughnut-chart-legend').innerHTML = doughnutChart.generateLegend();
            }

            if ($("#doughnutChart2").length) {
                var doughnutChartCanvas = $("#doughnutChart2").get(0).getContext("2d");
                var doughnutPieData = {
                    datasets: [{
                        data: [ {{ $res['res']['tp'] }}, {{ $res['res']['tn'] }}, {{ $res['res']['fp'] }}, {{ $res['res']['fn'] }} ],
                        backgroundColor: [
                            "#52CDFF",
                            "#7442eb",
                            "#81DADA",
                            "#c442eb"
                        ],
                        borderColor: [
                            "#52CDFF",
                            "#7442eb",
                            "#81DADA",
                            "#c442eb"
                        ],
                    }],

                    // These labels appear in the legend and in the tooltips when hovering different arcs
                    labels: ['TP', 'TN', 'FP', 'FN'],

                };
                var doughnutPieOptions = {
                    cutoutPercentage: 50,
                    animationEasing: "easeOutBounce",
                    animateRotate: true,
                    animateScale: false,
                    responsive: true,
                    maintainAspectRatio: true,
                    showScale: true,
                    legend: false,
                    legendCallback: function (chart) {
                        var text = [];
                        text.push('<div class="chartjs-legend"><ul class="justify-content-center">');
                        for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
                            text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
                            text.push('</span>');
                            if (chart.data.labels[i]) {
                                text.push(chart.data.labels[i]);
                            }
                            text.push('</li>');
                        }
                        text.push('</div></ul>');
                        return text.join("");
                    },

                    layout: {
                        padding: {
                            left: 0,
                            right: 0,
                            top: 0,
                            bottom: 0
                        }
                    },
                    tooltips: {
                        callbacks: {
                            title: function(tooltipItem, data) {
                            return data['labels'][tooltipItem[0]['index']];
                            },
                            label: function(tooltipItem, data) {
                            return data['datasets'][0]['data'][tooltipItem['index']];
                            }
                        },

                        backgroundColor: '#fff',
                        titleFontSize: 14,
                        titleFontColor: '#0B0F32',
                        bodyFontColor: '#737F8B',
                        bodyFontSize: 11,
                        displayColors: false
                    }
                };
                var doughnutChart = new Chart(doughnutChartCanvas, {
                    type: 'doughnut',
                    data: doughnutPieData,
                    options: doughnutPieOptions
                });
                document.getElementById('doughnut-chart-legend2').innerHTML = doughnutChart.generateLegend();
            }
        });
        })(jQuery);
    </script>
@endpush --}}

@extends('admin.layouts.app')
@section('title', 'Dashboard')

@section('content')
<div class="main-panel">
    <div class="content-wrapper" style="padding: 2rem;">

        <div class="row mb-4">
            <div class="col-12">
                <h3 class="fw-bold text-dark">Dashboard Monitoring</h3>
                <p class="text-muted">Ringkasan data pendaftar dan performa model Naive Bayes.</p>
            </div>
        </div>

        <div class="row g-3 mb-4">

            <div class="col-12 col-sm-6 col-xl-3">
                <div class="card bg-primary text-white shadow-sm h-100">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="fw-normal mb-2">Total Pendaftar</h6>
                            <h2 class="fw-bold mb-0">{{ $dataAll }}</h2>
                        </div>
                        <i class="mdi mdi-account-group fs-1 opacity-50"></i>
                    </div>
                </div>
            </div>

            <div class="col-12 col-sm-6 col-xl-3">
                <div class="card bg-info text-white shadow-sm h-100">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="fw-normal mb-2">Data Training</h6>
                            <h2 class="fw-bold mb-0">{{ $totalTraining }}</h2>
                        </div>
                        <i class="mdi mdi-database-check fs-1 opacity-50"></i>
                    </div>
                </div>
            </div>

            <div class="col-12 col-sm-6 col-xl-3">
                <div class="card bg-warning text-white shadow-sm h-100">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="fw-normal mb-2">Data Testing</h6>
                            <h2 class="fw-bold mb-0">{{ $totalTesting }}</h2>
                        </div>
                        <i class="mdi mdi-flask fs-1 opacity-50"></i>
                    </div>
                </div>
            </div>

            <div class="col-12 col-sm-6 col-xl-3">
                <div class="card bg-success text-white shadow-sm h-100">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="fw-normal mb-2">Akurasi Model</h6>
                            <h2 class="fw-bold mb-0">{{ $res['accuracy'] }}%</h2>
                        </div>
                        <i class="mdi mdi-chart-line fs-1 opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-lg-7 grid-margin stretch-card">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h4 class="card-title mb-0">Metrik Evaluasi Model</h4>
                            <span class="badge bg-light text-dark border">Performa</span>
                        </div>
                        <canvas id="evaluationChart" height="200"></canvas>

                        <div class="row text-center mt-4 pt-3 border-top">
                            <div class="col-3">
                                <h6 class="text-muted small">Akurasi</h6>
                                <h5 class="fw-bold text-success">{{ $res['accuracy'] }}%</h5>
                            </div>
                            <div class="col-3">
                                <h6 class="text-muted small">Presisi</h6>
                                <h5 class="fw-bold text-primary">{{ $res['precision'] }}%</h5>
                            </div>
                            <div class="col-3">
                                <h6 class="text-muted small">Recall</h6>
                                <h5 class="fw-bold text-info">{{ $res['recall'] }}%</h5>
                            </div>
                            <div class="col-3">
                                <h6 class="text-muted small">F1-Score</h6>
                                <h5 class="fw-bold text-warning">{{ $res['f1_score'] }}%</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5 grid-margin stretch-card">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h4 class="card-title mb-0">Detail Klasifikasi (CM)</h4>
                            <span class="badge bg-light text-dark border">Distribusi</span>
                        </div>

                        <div style="height: 250px; position: relative;">
                            <canvas id="cmChart"></canvas>
                        </div>

                        <div class="mt-4">
                            <div class="d-flex justify-content-between border-bottom py-2">
                                <span class="text-success"><i class="mdi mdi-checkbox-marked-circle"></i> Benar Lolos (TP)</span>
                                <span class="fw-bold">{{ $res['tp'] }}</span>
                            </div>
                            <div class="d-flex justify-content-between border-bottom py-2">
                                <span class="text-primary"><i class="mdi mdi-close-circle"></i> Benar Gagal (TN)</span>
                                <span class="fw-bold">{{ $res['tn'] }}</span>
                            </div>
                            <div class="d-flex justify-content-between border-bottom py-2">
                                <span class="text-danger"><i class="mdi mdi-alert"></i> Salah Lolos (FP)</span>
                                <span class="fw-bold">{{ $res['fp'] }}</span>
                            </div>
                            <div class="d-flex justify-content-between py-2">
                                <span class="text-warning"><i class="mdi mdi-alert-circle"></i> Salah Gagal (FN)</span>
                                <span class="fw-bold">{{ $res['fn'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12 grid-margin stretch-card">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h4 class="card-title mb-0">Pendaftar Terbaru</h4>
                            <a href="{{ route('naive-bayes.testing') }}" class="btn btn-sm btn-outline-primary">Lihat Semua</a>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr class="bg-light">
                                        <th>Nama Lengkap</th>
                                        <th>Umur</th>
                                        <th>Kondisi Keluarga</th>
                                        <th>IQ</th>
                                        <th>Kepribadian</th>
                                        <th>Hasil Prediksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recentUsers as $user)
                                    <tr>
                                        <td class="fw-bold">{{ ucwords(strtolower($user['nama'])) }}</td>

                                        {{-- PERBAIKAN 1: Ganti 'umur_asli' jadi 'age' --}}
                                        <td>{{ $user['age'] }} Tahun</td>

                                        {{-- PERBAIKAN 2: Ganti 'family' jadi 'family_cat' --}}
                                        <td>{{ ucwords(str_replace('-', ' ', $user['family_cat'])) }}</td>

                                        <td>({{ $user['nilai_iq'] }}) {{ ucwords($user['iq_cat']) }}</td>
                                        <td>({{ $user['nilai_personal'] }}) {{ ucwords($user['personal_cat']) }}</td>
                                        <td>
                                            @if(strtolower($user['hasil_klasifikasi']) == 'lolos')
                                                <span class="badge bg-success rounded-pill">Lolos</span>
                                            @else
                                                <span class="badge bg-danger rounded-pill">Tidak Lolos</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4">Belum ada data testing.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <footer class="footer text-center">
        <span class="text-muted text-sm-left d-block d-sm-inline-block">
            © {{ date('Y') }} Sistem Klasifikasi Naive Bayes.
        </span>
    </footer>
</div>
@endsection

@push('after-script')
<script>
    (function($) {
    'use strict';
    $(function() {

        // --- CHART 1: EVALUASI MODEL (BAR CHART) ---
        if ($("#evaluationChart").length) {
            var evalCanvas = $("#evaluationChart").get(0).getContext("2d");
            var evalData = {
                labels: ["Akurasi", "Presisi", "Recall", "F1-Score"],
                datasets: [{
                    label: 'Persentase (%)',
                    data: [
                        {{ $res['accuracy'] }},
                        {{ $res['precision'] }},
                        {{ $res['recall'] }},
                        {{ $res['f1_score'] }}
                    ],
                    backgroundColor: [
                        'rgba(25, 135, 84, 0.7)',
                        'rgba(13, 110, 253, 0.7)',
                        'rgba(13, 202, 240, 0.7)',
                        'rgba(255, 193, 7, 0.7)'
                    ],
                    borderColor: [
                        'rgba(25, 135, 84, 1)',
                        'rgba(13, 110, 253, 1)',
                        'rgba(13, 202, 240, 1)',
                        'rgba(255, 193, 7, 1)'
                    ],
                    borderWidth: 1
                }]
            };

            var evalOptions = {
                responsive: true,
                maintainAspectRatio: true,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            max: 100, // Skala maksimal 100%
                            stepSize: 20
                        },
                        gridLines: {
                            display: true,
                            color: "#f0f0f0"
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            display: false
                        }
                    }]
                },
                legend: {
                    display: false
                }
            };

            new Chart(evalCanvas, {
                type: 'bar',
                data: evalData,
                options: evalOptions
            });
        }

        // --- CHART 2: CONFUSION MATRIX (DOUGHNUT) ---
        if ($("#cmChart").length) {
            var cmCanvas = $("#cmChart").get(0).getContext("2d");
            var cmData = {
                labels: ['TP (Benar Lolos)', 'TN (Benar Gagal)', 'FP (Salah Lolos)', 'FN (Salah Gagal)'],
                datasets: [{
                    data: [
                        {{ $res['tp'] }},
                        {{ $res['tn'] }},
                        {{ $res['fp'] }},
                        {{ $res['fn'] }}
                    ],
                    backgroundColor: [
                        "#198754", // Green (TP)
                        "#0d6efd", // Blue (TN)
                        "#dc3545", // Red (FP)
                        "#ffc107"  // Yellow (FN)
                    ],
                    borderColor: [
                        "#ffffff", "#ffffff", "#ffffff", "#ffffff"
                    ],
                    borderWidth: 2
                }]
            };

            var cmOptions = {
                responsive: true,
                maintainAspectRatio: false, // Agar bisa diatur tingginya lewat CSS
                cutoutPercentage: 60,
                legend: {
                    position: 'right',
                    labels: {
                        boxWidth: 12
                    }
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var label = data.labels[tooltipItem.index] || '';
                            var value = data.datasets[0].data[tooltipItem.index];
                            return label + ': ' + value + ' Data';
                        }
                    }
                }
            };

            new Chart(cmCanvas, {
                type: 'doughnut',
                data: cmData,
                options: cmOptions
            });
        }

    });
    })(jQuery);
</script>
@endpush