@extends('layouts.admin')

@section('title','Data Training')

@section('content')
<div class="container-fluid px-3">

    <!-- Header Ringkas -->
    <div class="d-flex align-items-center justify-content-between my-3">
        <div>
            <h1 class="h4 mb-0 text-gray-800 font-weight-bold">Dataset Training C4.5</h1>
            <p class="text-muted small mb-0">Data mentah (Raw Data) historis alumni dan hasil diskretisasi untuk pembentukan rule.</p>
        </div>
        <a href="{{ route('training.create') }}" class="btn btn-primary btn-sm shadow-sm rounded-pill px-3">
            <i class="fas fa-plus fa-sm text-white-50 me-1"></i> Tambah Data
        </a>
    </div>

    <!-- Card Tabel Compact dengan Internal Scrollbox -->
    <div class="card shadow-sm mb-4 border-0">
        <div class="card-header py-2 bg-white d-flex align-items-center justify-content-between border-bottom">
            <h6 class="m-0 font-weight-bold text-primary small">
                <i class="fas fa-table me-1"></i> Daftar Records Data Training (Raw Data & Kategori)
            </h6>
            <span class="badge bg-primary text-white px-2 py-1 rounded-pill small">Total: {{ count($data) }} Record</span>
        </div>
        <div class="card-body p-0">
            <!-- Box Scrollbar Internal -->
            <div class="table-responsive" style="max-height: 480px; overflow-y: auto;">
                <table class="table table-hover table-striped table-sm align-middle mb-0 custom-compact-table" width="100%">
                    <thead class="bg-light text-secondary text-uppercase extra-small font-weight-bold sticky-top" style="z-index: 1;">
                        <tr>
                            <th class="text-center py-2 bg-light" style="width: 40px;">No</th>
                            <th class="py-2 bg-light">Nilai Rapor (Raw)</th>
                            <!-- [DITAMBAHKAN] Kolom Mapel Favorit -->
                            <th class="py-2 bg-light">Mapel Favorit</th>
                            <th class="py-2 bg-light">Minat (Raw)</th>
                            <th class="py-2 bg-light">Cita-Cita (Raw)</th>
                            <th class="py-2 bg-light">Preferensi Studi</th>
                            <th class="py-2 bg-light">Target Jurusan</th>
                            <th class="text-center py-2 bg-light" style="width: 80px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="small">
                        @forelse($data as $item)
                        <tr>
                            <td class="text-center text-muted font-weight-bold py-1">
                                {{ $loop->iteration }}
                            </td>

                            <!-- Nilai Rapor: Menampilkan Angka Asli + Badge Kategori -->
                            <td class="py-1">
                                <span class="fw-bold text-dark me-1">{{ $item->nilai_raw ?? '-' }}</span>
                                @if(isset($item->nilai))
                                    <span class="badge bg-soft-primary text-primary extra-small" title="Kategori: {{ $item->nilai }}">
                                        ({{ $item->nilai }})
                                    </span>
                                @endif
                            </td>

                            <!-- [DITAMBAHKAN] Mapel Favorit -->
                            <td class="py-1">
                                <div>{{ $item->mapel_favorit_raw ?? $item->mapel_favorit ?? '-' }}</div>
                                @if(isset($item->mapel_favorit_raw) && isset($item->mapel_favorit) && $item->mapel_favorit_raw != $item->mapel_favorit)
                                    <span class="badge bg-warning text-dark extra-small">
                                        Kategori: {{ $item->mapel_favorit }}
                                    </span>
                                @endif
                            </td>

                            <!-- Minat: Menampilkan Teks Asli + Badge Kategori -->
                            <td class="py-1">
                                <div>{{ $item->minat_raw ?? $item->minat ?? '-' }}</div>
                                @if(isset($item->minat_raw) && isset($item->minat) && $item->minat_raw != $item->minat)
                                    <span class="badge bg-info text-dark extra-small">
                                        Kategori: {{ $item->minat }}
                                    </span>
                                @endif
                            </td>

                            <!-- Cita-Cita: Menampilkan Teks Asli + Badge Kategori -->
                            <td class="py-1">
                                <div>{{ $item->cita_cita_raw ?? $item->cita_cita ?? '-' }}</div>
                                @if(isset($item->cita_cita_raw) && isset($item->cita_cita) && $item->cita_cita_raw != $item->cita_cita)
                                    <span class="badge bg-success extra-small">
                                        Kategori: {{ $item->cita_cita }}
                                    </span>
                                @endif
                            </td>

                            <!-- Preferensi Studi -->
                            <td class="py-1">
                                <span class="badge bg-secondary px-2 py-1">
                                    {{ $item->preferensi_studi_raw ?? $item->preferensi_studi ?? '-' }}
                                </span>
                            </td>

                            <!-- Target Jurusan -->
                            <td class="py-1">
                                <span class="badge bg-primary text-white px-2 py-1">
                                    <i class="fas fa-graduation-cap me-1"></i> {{ $item->jurusan ?? '-' }}
                                </span>
                            </td>

                            <!-- Aksi -->
                            <td class="text-center py-1">
                                <a href="{{ route('training.edit', $item->id) }}" class="btn btn-outline-warning btn-sm p-1 px-2" title="Edit">
                                    <i class="fas fa-edit fa-xs"></i>
                                </a>

                                <form action="{{ route('training.destroy', $item->id) }}" method="POST" style="display:inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger btn-sm p-1 px-2 ms-0" onclick="return confirm('Hapus data ini?')" title="Hapus">
                                        <i class="fas fa-trash-alt fa-xs"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center py-4 text-muted">Belum ada data training.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    .bg-soft-primary { background-color: #e8f0fe; }
    .extra-small { font-size: 0.72rem; padding: 0.2em 0.4em; }
    .custom-compact-table td, .custom-compact-table th {
        vertical-align: middle !important;
        white-space: nowrap;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
</style>
@endsection