@extends('layouts.admin')

@section('title', 'Rekapitulasi Konsultasi Siswa')

@section('content')

<!-- Custom Styling Tambahan -->
<style>
/* Stats Card Gradient */
.card-stat-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
}

.card-stat-dark {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
}

/* Hover Interactive Card */
.interactive-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.interactive-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}

/* Custom Rank Badge */
.rank-badge {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
}

/* Avatar Initial */
.avatar-circle {
    width: 36px;
    height: 36px;
    background-color: #e0f2fe;
    color: #0369a1;
    font-weight: 700;
    font-size: 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Media Print */
@media print {
    .no-print {
        display: none !important;
    }
}
</style>

<div class="container-fluid px-3 py-2">

    <!-- Header & Action -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 pb-3 border-bottom gap-3">
        <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-chart-line me-1"></i> Executive Summary
                </span>
            </div>
            <h2 class="fw-bold text-dark m-0 d-flex align-items-center gap-2 fs-3">
                <i class="fas fa-file-invoice text-primary"></i> Rekapitulasi Konsultasi Siswa
            </h2>
            <p class="text-muted small mb-0 mt-1">Ringkasan laporan statistik dan grafik distribusi hasil rekomendasi jurusan berbasis C4.5</p>
        </div>
    </div>

<!-- Ringkasan Statistik Cards -->
<div class="row g-3 mb-4">
    <!-- Total Konsultasi -->
    <div class="col-md-6 col-xl-4">
        <div class="card border-0 shadow-sm rounded-4 card-stat-primary overflow-hidden position-relative h-100 interactive-card">
            <!-- Ikon Watermark Transparan di Pojok Kanan Bawah -->
            <div class="position-absolute" style="right: -10px; bottom: -15px; font-size: 5.5rem; opacity: 0.12; color: #ffffff; pointer-events: none; z-index: 0;">
                <i class="fas fa-graduation-cap"></i>
            </div>
            
            <div class="card-body p-4 position-relative" style="z-index: 1;">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-uppercase fw-bold text-white opacity-75 small d-flex align-items-center gap-2" style="letter-spacing: 0.5px; font-size: 11px;">
                        <i class="fas fa-users"></i> Total Konsultasi
                    </span>
                    <span class="badge bg-black bg-opacity-25 text-white rounded-pill px-3 py-1.5 small border border-white border-opacity-20" style="font-size: 10px;">
                        Akumulasi
                    </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($totalKonsultasi) }}
                    </h1>
                    <span class="fs-6 text-white opacity-75">Siswa</span>
                </div>
                <div class="pt-2">
                    <small class="text-white opacity-75 d-block" style="font-size: 11.5px; line-height: 1.3;">
                        <i class="fas fa-check-circle me-1"></i>Siswa yang telah menyelesaikan sesi tes
                    </small>
                </div>
            </div>
        </div>
    </div>

    <!-- Total Opsi Jurusan Terrekomendasi -->
    <div class="col-md-6 col-xl-4">
        <div class="card border-0 shadow-sm rounded-4 card-stat-dark overflow-hidden position-relative h-100 interactive-card">
            <!-- Ikon Watermark Transparan di Pojok Kanan Bawah -->
            <div class="position-absolute" style="right: -10px; bottom: -15px; font-size: 5.5rem; opacity: 0.12; color: #ffffff; pointer-events: none; z-index: 0;">
                <i class="fas fa-layer-group"></i>
            </div>

            <div class="card-body p-4 position-relative" style="z-index: 1;">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-uppercase fw-bold text-white opacity-75 small d-flex align-items-center gap-2" style="letter-spacing: 0.5px; font-size: 11px;">
                        <i class="fas fa-layer-group text-warning"></i> Sebaran Jurusan
                    </span>
                    <span class="badge bg-white bg-opacity-10 text-white rounded-pill px-3 py-1.5 small border border-white border-opacity-20" style="font-size: 10px;">
                        Kategori
                    </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">
                        {{ count($rekapJurusan) }}
                    </h1>
                    <span class="fs-6 text-white opacity-75">Jurusan</span>
                </div>
                <div class="pt-2">
                    <small class="text-white opacity-75 d-block" style="font-size: 11.5px; line-height: 1.3;">
                        <i class="fas fa-info-circle me-1"></i>Variasi jurusan yang muncul pada hasil sistem
                    </small>
                </div>
            </div>
        </div>
    </div>

    <!-- Rata-rata per Jurusan -->
    <div class="col-md-12 col-xl-4">
        <div class="card border-0 shadow-sm rounded-4 bg-white overflow-hidden position-relative h-100 interactive-card">
            <div class="card-body p-4 position-relative" style="z-index: 1;">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-uppercase fw-bold text-muted small d-flex align-items-center gap-2" style="letter-spacing: 0.5px; font-size: 11px;">
                        <i class="fas fa-calculator text-primary"></i> Rata-rata / Jurusan
                    </span>
                    <span class="badge bg-primary-subtle text-primary rounded-pill px-3 py-1.5 small" style="font-size: 10px;">
                        Metrik
                    </span>
                </div>
                <div class="d-flex align-items-baseline gap-2 mb-2">
                    <h1 class="display-5 fw-bold mb-0 text-dark font-monospace">
                        {{ count($rekapJurusan) > 0 ? number_format($totalKonsultasi / count($rekapJurusan), 1) : 0 }}
                    </h1>
                    <span class="fs-6 text-muted">Siswa/Jurusan</span>
                </div>
                <div class="pt-2">
                    <small class="text-muted d-block" style="font-size: 11.5px; line-height: 1.3;">
                        <i class="fas fa-chart-pie me-1 text-primary"></i>Distribusi rata-rata minat per program studi
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- Grafik & Peringkat -->
    <div class="row g-4 mb-4">
        <!-- Visualisasi Grafik Chart.js -->
        <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 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-chart-bar text-primary"></i> Visualisasi Distribusi Rekomendasi
                    </h6>
                    <span class="badge bg-light text-secondary border rounded-pill px-3 py-1 small">Bar Chart</span>
                </div>
                <div class="card-body p-4 d-flex align-items-center">
                    <div class="w-100" style="position: relative; min-height: 280px;">
                        <canvas id="chartJurusan"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabel Peringkat Jurusan Terfavorit -->
        <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-trophy text-warning"></i> Peringkat Jurusan
                    </h6>
                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-3 py-1 small">Top Dominan</span>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        @forelse($rekapJurusan as $idx => $item)
                            <div class="list-group-item d-flex align-items-center justify-content-between p-3 border-bottom border-light">
                                <div class="d-flex align-items-center gap-3">
                                    <span class="rank-badge {{ $idx == 0 ? 'bg-warning text-dark' : ($idx == 1 ? 'bg-secondary text-white' : ($idx == 2 ? 'bg-danger-subtle text-danger' : 'bg-light text-muted border')) }}">
                                        {{ $idx + 1 }}
                                    </span>
                                    <div>
                                        <div class="fw-bold text-dark small">{{ $item->hasil_rekomendasi }}</div>
                                        <div class="text-muted" style="font-size: 11px;">
                                            {{ $totalKonsultasi > 0 ? number_format(($item->total / $totalKonsultasi) * 100, 1) : 0 }}% dari total
                                        </div>
                                    </div>
                                </div>
                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill px-3 py-1.5 font-monospace fs-7">
                                    {{ $item->total }} Siswa
                                </span>
                            </div>
                        @empty
                            <div class="text-center text-muted py-5">
                                <i class="fas fa-inbox fs-2 mb-2 opacity-30"></i>
                                <p class="mb-0 small">Belum ada data konsultasi.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
 <!-- Tabel Riwayat Terbaru -->
<div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
    <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-history text-primary"></i> Riwayat 10 Konsultasi Terbaru
        </h6>
        <!-- Diganti dari Live Data menjadi Tombol Export PDF -->
        <a href="{{ route('admin.rekap.pdf') }}" class="btn btn-danger btn-sm rounded-pill px-3 py-1-5 d-inline-flex align-items-center gap-2 shadow-sm">
            <i class="fas fa-file-pdf"></i> Export PDF Laporan
        </a>
    </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 text-center" style="width: 60px;">No</th>
                        <th class="py-3">Nama Siswa</th>
                        <th class="py-3">Waktu Konsultasi</th>
                        <th class="text-center py-3">Hasil Rekomendasi Jurusan</th>
                        <th class="text-center py-3 pe-4" style="width: 130px;">Aksi</th>
                    </tr>
                </thead>
                <tbody class="border-top-0">
                    @forelse($riwayatTerbaru as $idx => $row)
                    <tr>
                        <td class="ps-4 text-center font-monospace text-muted small">{{ $idx + 1 }}</td>
                        
                        <td>
                            <span class="fw-bold text-dark">{{ $row->nama }}</span>
                        </td>

                        <td class="text-muted small">
                            <i class="far fa-clock me-1 opacity-75"></i>
                            {{ \Carbon\Carbon::parse($row->created_at)->format('d M Y, H:i') }} WIB
                        </td>
                        <td class="text-center">
                            <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2 rounded-pill fw-bold">
                                <i class="fas fa-check-circle me-1"></i>{{ $row->hasil_rekomendasi }}
                            </span>
                        </td>
                        <td class="text-center pe-4">
                            <!-- Tombol Detail (Ikon & Teks Berdampingan Horizontal) -->
                            <button type="button" 
                                    class="btn btn-sm btn-outline-primary rounded-pill px-3 py-1 d-inline-flex align-items-center gap-1 btn-detail-konsultasi"
                                    data-nama="{{ $row->nama }}"
                                    data-waktu="{{ \Carbon\Carbon::parse($row->created_at)->format('d M Y, H:i') }} WIB"
                                    data-hasil="{{ $row->hasil_rekomendasi }}"
                                    data-nilai="{{ $row->nilai_raw }} ({{ $row->nilai }})"
                                    data-minat="{{ $row->minat_raw }} ({{ $row->minat }})"
                                    data-citacita="{{ $row->cita_cita_raw }} ({{ $row->cita_cita }})"
                                    data-preferensi="{{ $row->preferensi_studi_raw }} ({{ $row->preferensi_studi }})">
                                <i class="fas fa-eye"></i> Detail
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center text-muted py-5">
                            <i class="fas fa-folder-open fs-2 mb-2 opacity-30"></i>
                            <p class="mb-0 small">Belum ada riwayat data konsultasi.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Chart.js Engine -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const ctx = document.getElementById('chartJurusan').getContext('2d');
        
        // Custom Gradient Fill
        const gradient = ctx.createLinearGradient(0, 0, 0, 300);
        gradient.addColorStop(0, 'rgba(37, 99, 235, 0.85)');
        gradient.addColorStop(1, 'rgba(59, 130, 246, 0.15)');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($labels) !!},
                datasets: [{
                    label: 'Jumlah Siswa',
                    data: {!! json_encode($totals) !!},
                    backgroundColor: gradient,
                    borderColor: '#2563eb',
                    borderWidth: 2,
                    borderRadius: 8,
                    borderSkipped: false,
                    barThickness: 32,
                    maxBarThickness: 48
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { 
                        display: false 
                    },
                    tooltip: {
                        backgroundColor: '#0f172a',
                        titleFont: { size: 13, weight: 'bold' },
                        bodyFont: { size: 12 },
                        padding: 12,
                        cornerRadius: 8,
                        displayColors: false,
                        callbacks: {
                            label: function(context) {
                                return ` Total Siswa: ${context.parsed.y} Orang`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { 
                            display: false 
                        },
                        ticks: { 
                            font: { family: "'Inter', sans-serif", size: 11, weight: '600' },
                            color: '#64748b' 
                        }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { 
                            color: '#f1f5f9',
                            drawBorder: false 
                        },
                        ticks: { 
                            stepSize: 1,
                            font: { family: "'Inter', sans-serif", size: 11 },
                            color: '#64748b'
                        }
                    }
                }
            }
        });
    });
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const detailButtons = document.querySelectorAll('.btn-detail-konsultasi');
    const modalElement = new bootstrap.Modal(document.getElementById('modalDetailKonsultasi'));

    detailButtons.forEach(button => {
        button.addEventListener('click', function () {
            // Ambil data atribut dari tombol
            const nama = this.getAttribute('data-nama');
            const waktu = this.getAttribute('data-waktu');
            const hasil = this.getAttribute('data-hasil');
            const nilai = this.getAttribute('data-nilai');
            const minat = this.getAttribute('data-minat');
            const citacita = this.getAttribute('data-citacita');
            const preferensi = this.getAttribute('data-preferensi');

            // Masukkan data ke dalam elemen modal
            document.getElementById('detailNamaSiswa').innerText = nama ?? '-';
            document.getElementById('detailWaktuKonsultasi').innerText = waktu ?? '-';
            document.getElementById('detailHasilRekomendasi').innerText = hasil ?? '-';
            
            document.getElementById('detailNilai').innerText = nilai ?? '-';
            document.getElementById('detailMinat').innerText = minat ?? '-';
            document.getElementById('detailCitaCita').innerText = citacita ?? '-';
            document.getElementById('detailPreferensi').innerText = preferensi ?? '-';

            // Tampilkan Modal
            modalElement.show();
        });
    });
});
</script>

@endsection
<!-- Modal Detail Konsultasi -->
<div class="modal fade" id="modalDetailKonsultasi" tabindex="-1" aria-labelledby="modalDetailLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow rounded-4 overflow-hidden">
            <div class="modal-header bg-primary text-white py-3 px-4">
                <h5 class="modal-title fw-bold fs-6 d-flex align-items-center gap-2" id="modalDetailLabel">
                    <i class="fas fa-file-alt"></i> Rincian Input Data Konsultasi Siswa
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <!-- Header Informasi Siswa -->
                <div class="p-3 bg-light rounded-3 mb-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <span class="text-muted small d-block">Nama Siswa</span>
                        <h6 class="fw-bold text-dark mb-0 fs-5" id="detailNamaSiswa">-</h6>
                    </div>
                    <div>
                        <span class="text-muted small d-block">Waktu Konsultasi</span>
                        <span class="fw-semibold text-dark small" id="detailWaktuKonsultasi">-</span>
                    </div>
                    <div>
                        <span class="text-muted small d-block">Hasil Rekomendasi C4.5</span>
                        <span class="badge bg-success fs-6" id="detailHasilRekomendasi">-</span>
                    </div>
                </div>

                <h6 class="fw-bold text-dark mb-3">
                    <i class="fas fa-list-check text-primary me-1"></i> Data Input Kuesioner (Raw & Transformed)
                </h6>
                
                <!-- Tabel Rincian Kolom Database -->
                <div class="table-responsive">
                    <table class="table table-bordered table-striped align-middle mb-0">
                        <thead class="table-light small text-uppercase">
                            <tr>
                                <th style="width: 35%;">Kriteria / Atribut</th>
                                <th>Nilai / Jawaban Inputan</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="fw-semibold text-muted small">Nilai Akademik</td>
                                <td class="fw-bold text-dark" id="detailNilai">-</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold text-muted small">Minat Utama</td>
                                <td class="fw-bold text-dark" id="detailMinat">-</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold text-muted small">Cita-Cita / Karir</td>
                                <td class="fw-bold text-dark" id="detailCitaCita">-</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold text-muted small">Preferensi Studi</td>
                                <td class="fw-bold text-dark" id="detailPreferensi">-</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer bg-light border-0 py-2 px-4">
                <button type="button" class="btn btn-secondary btn-sm rounded-pill px-4" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>