@extends('admin.layouts.app')

@section('title', 'Evaluasi Model')

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

        {{-- JUDUL HALAMAN --}}
        <div class="row mb-3">
            <div class="col-12">
                <h3 class="fw-bold text-dark">Hasil Evaluasi Model – Confusion Matrix</h3>
                <small class="text-muted">
                    Evaluasi dilakukan menggunakan data testing untuk mengukur akurasi hasil klasifikasi model.
                </small>
            </div>
        </div>

        {{-- DETAIL CONFUSION MATRIX --}}
        <div class="row mt-2">

            <div class="col-12 mb-2">
                <div>
                    @isset($totalTrain)
                        <span class="badge bg-primary fs-6">Train: {{ $totalTrain }}</span>
                    @endisset

                    @isset($totalTest)
                        <span class="badge bg-info fs-6">Test: {{ $totalTest }}</span>
                    @endisset
                    <span class="badge bg-success fs-6">Accuracy: {{ $res['accuracy'] }}%</span>
                </div>
            </div>

            <div class="col-md-12">
                <div class="card card-rounded border-top border-4 border-success">
                    <div class="card-body p-3">

                        <div class="table-responsive">
                            <table class="table table-bordered text-center">

                                <thead>
                                    <tr class="bg-light">
                                        <th></th>
                                        <th>Klasifikasi Lolos</th>
                                        <th>Klasifikasi Tidak</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr>
                                        <th class="bg-light">Aktual Lolos</th>

                                        {{-- TP --}}
                                        <td class="bg-success text-white fw-bold fs-5">
                                            {{ $res['tp'] }}
                                            <div style="font-size:12px">True Positive (TP)</div>
                                        </td>

                                        {{-- FN --}}
                                        <td class="bg-danger text-white fw-bold fs-5">
                                            {{ $res['fn'] }}
                                            <div style="font-size:12px">False Negative (FN)</div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <th class="bg-light">Aktual Tidak</th>

                                        {{-- FP --}}
                                        <td class="bg-danger text-white fw-bold fs-5">
                                            {{ $res['fp'] }}
                                            <div style="font-size:12px">False Positive (FP)</div>
                                        </td>

                                        {{-- TN --}}
                                        <td class="bg-success text-white fw-bold fs-5">
                                            {{ $res['tn'] }}
                                            <div style="font-size:12px">True Negative (TN)</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        {{-- Ringkasan --}}
                        <div class="mt-3 d-flex justify-content-around text-center border-top pt-3">
                            <div>
                                <small class="text-muted">Precision</small>
                                <h5>{{ $res['precision'] }}%</h5>
                            </div>

                            <div>
                                <small class="text-muted">Recall</small>
                                <h5>{{ $res['recall'] }}%</h5>
                            </div>

                            <div>
                                <small class="text-muted">F1-Score</small>
                                <h5>{{ $res['f1_score'] }}%</h5>
                            </div>

                            <div>
                                <small class="text-muted">Accuracy</small>
                                <h5 class="text-success">{{ $res['accuracy'] }}%</h5>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        {{-- BAGIAN 1: TABEL RINGKASAN PERFORMA --}}
        {{-- <div class="row">
            <div class="col-12 grid-margin stretch-card">
                <div class="card card-rounded shadow-sm">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <h4 class="card-title text-primary"><i class="mdi mdi-chart-bar me-2"></i>Ringkasan Performa Model</h4>
                            <h6>Total: <span class="fw-bold text-primary">{{ $totalData }} Dataset</span></h6>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover table-bordered text-center align-middle">
                                <thead class="bg-primary text-white">
                                    <tr>
                                        <th rowspan="2" class="align-middle text-white">Fold Ke-</th>
                                        <th rowspan="2" class="align-middle text-white">Data Latih</th>
                                        <th rowspan="2" class="align-middle text-white">Data Uji</th>
                                        <th colspan="2" class="text-white">Hasil Klasifikasi</th>
                                        <th colspan="3" class="text-white">Metrik Evaluasi</th>
                                    </tr>
                                    <tr class="bg-dark">
                                        <th class="text-white bg-success"><small>Benar</small></th>
                                        <th class="text-white bg-danger"><small>Salah</small></th>
                                        <th class="text-white">Akurasi</th>
                                        <th class="text-white">Presisi</th>
                                        <th class="text-white">Recall</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @dd($results    )
                                    @foreach($results as $res)
                                    <tr>
                                        <td class="fw-bold">Fold {{ $res['fold'] }}</td>
                                        <td>{{ $res['total_train'] }}</td>
                                        <td>{{ $res['total_test'] }}</td>
                                        <td class="text-success fw-bold">{{ $res['correct'] }}</td>
                                        <td class="text-danger fw-bold">{{ $res['wrong'] }}</td>
                                        <td><span class="badge badge-opacity-primary">{{ $res['accuracy'] }}%</span></td>
                                        <td>{{ $res['precision'] }}%</td>
                                        <td>{{ $res['recall'] }}%</td>
                                    </tr>
                                    @endforeach
                                    <tr class="bg-light fw-bold border-top-2">
                                        <td colspan="5" class="text-end text-uppercase">Rata-Rata Akurasi Akhir :</td>
                                        <td colspan="3" class="text-start text-primary fs-5">{{ number_format($averageAccuracy, 2) }}%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
        {{-- <div class="row mt-4">
            <div class="col-12 grid-margin stretch-card">
                <div class="card card-rounded border-top border-4 border-warning">
                    <div class="card-body">
                        <h4 class="card-title text-warning"><i class="mdi mdi-calculator me-2"></i>Simulasi Perhitungan (Sampel Data)</h4>
                        <p class="text-muted mb-3">Berikut adalah detail perhitungan Naive Bayes untuk <strong>satu data uji pertama</strong> yang diambil dari masing-masing Fold.</p>

                        <ul class="nav nav-tabs" id="calcTab" role="tablist">
                            @foreach($results as $index => $res)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {{ $index === 0 ? 'active' : '' }}"
                                        id="tab-fold-{{ $res['fold'] }}"
                                        data-bs-toggle="tab"
                                        data-bs-target="#content-fold-{{ $res['fold'] }}"
                                        type="button" role="tab">
                                    Fold #{{ $res['fold'] }}
                                </button>
                            </li>
                            @endforeach
                        </ul>

                        <div class="tab-content border border-top-0 p-4" id="calcTabContent" style="background: #fdfdfd;">
                            @foreach($results as $index => $res)
                            <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}"
                                id="content-fold-{{ $res['fold'] }}" role="tabpanel">

                                <div class="alert alert-primary d-flex justify-content-between align-items-center">
                                    <div>
                                        <strong>Sampel Peserta:</strong> {{ $res['sample']['nama'] ?? 'Unknown' }}
                                    </div>
                                    <div>
                                        <span class="badge bg-primary me-2">Aktual: {{ strtoupper($res['sample']['aktual']) }}</span>
                                        <span class="badge {{ strtolower($res['sample']['prediksi']) == strtolower($res['sample']['aktual']) ? 'bg-success' : 'bg-danger' }}">
                                            Prediksi: {{ strtoupper($res['sample']['prediksi']) }}
                                        </span>
                                    </div>
                                </div>

                                <div class="row">
                                    @if(isset($res['sample']['steps']))
                                        @foreach($res['sample']['steps'] as $class => $step)
                                        <div class="col-md-6">
                                            <div class="card border mb-3">
                                                <div class="card-header bg-light text-center fw-bold">
                                                    Kelas: {{ strtoupper($class) }}
                                                </div>
                                                <div class="card-body p-3" style="font-size: 0.9rem;">

                                                    <div class="d-flex justify-content-between mb-2">
                                                        <span>Prior P({{ $class }}):</span>
                                                        <span class="fw-bold text-primary">{{ number_format($step['prior'], 4) }}</span>
                                                    </div>
                                                    <hr class="my-2">

                                                    <p class="mb-1 text-muted small">Likelihood (Fitur | Kelas):</p>
                                                    <ul class="list-group list-group-flush mb-3">
                                                        @foreach($step['likelihoods'] as $l)
                                                        <li class="list-group-item d-flex justify-content-between align-items-center p-1 bg-transparent border-0">
                                                            <small>{{ $l['attr'] }} = <em>{{ $l['val'] }}</em></small>
                                                            <span class="badge bg-opacity-info text-dark" style="background: #e9ecef;">
                                                                {{ number_format($l['score'], 4) }}
                                                            </span>
                                                        </li>
                                                        @endforeach
                                                    </ul>

                                                    <div class="alert alert-info mb-0 text-center py-2">
                                                        <small class="d-block text-muted">Nilai Posterior (Total Skor)</small>
                                                        <strong class="fs-5">{{ $step['final_prob'] }}</strong>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    @else
                                        <div class="col-12 text-center text-muted">Data sample tidak tersedia.</div>
                                    @endif
                                </div>
                            </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        </div> --}}
    </div>
</div>
@endsection