<?php 
include 'koneksi.php';
cek_akses(['Kepala', 'Pimpinan', 'Super Admin']);

$guru_id = isset($_GET['id']) ? (int)$_GET['id'] : 0;

if($guru_id == 0) {
    header("Location: monitoring.php");
    exit();
}

// Ambil data guru
$query_guru = mysqli_query($conn, "SELECT full_name, unit FROM users WHERE id = $guru_id AND role = 'Guru'");
$guru = mysqli_fetch_assoc($query_guru);

if(!$guru) {
    echo "<script>alert('Guru tidak ditemukan!'); window.location='monitoring.php';</script>";
    exit();
}

// Ambil jurnal guru
$query_jurnal = mysqli_query($conn, "SELECT tj.*, c.name as class_name 
    FROM teaching_journals tj 
    JOIN classes c ON tj.class_id = c.id 
    WHERE tj.teacher_id = $guru_id 
    ORDER BY tj.date DESC LIMIT 20");

$jurnal_list = [];
while($row = mysqli_fetch_assoc($query_jurnal)) {
    $jurnal_list[] = $row;
}

// Ambil nilai guru - Perbaiki query dengan JOIN yang tepat
$query_nilai = mysqli_query($conn, "SELECT g.*, c.name as class_name, s.name as student_name 
    FROM grades g 
    LEFT JOIN classes c ON g.class_id = c.id 
    LEFT JOIN students s ON g.student_id = s.id 
    WHERE g.teacher_id = $guru_id 
    ORDER BY g.id DESC LIMIT 20");

$nilai_list = [];
if($query_nilai && mysqli_num_rows($query_nilai) > 0) {
    while($row = mysqli_fetch_assoc($query_nilai)) {
        $nilai_list[] = $row;
    }
}

// Ambil absensi guru - Perbaiki query dengan JOIN yang tepat
$query_absensi = mysqli_query($conn, "SELECT a.*, c.name as class_name, s.name as student_name 
    FROM attendance a 
    LEFT JOIN classes c ON a.class_id = c.id 
    LEFT JOIN students s ON a.student_id = s.id 
    WHERE a.teacher_id = $guru_id 
    ORDER BY a.date DESC LIMIT 20");

$absensi_list = [];
if($query_absensi && mysqli_num_rows($query_absensi) > 0) {
    while($row = mysqli_fetch_assoc($query_absensi)) {
        $absensi_list[] = $row;
    }
}

// Hitung statistik
$total_jurnal = count($jurnal_list);
$total_nilai = count($nilai_list);
$total_absensi = count($absensi_list);
?>

<!DOCTYPE html>
<html>
<head>
    <title>Detail Guru - SIM ISTIQLAL</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/theme-istiqlal-green.css">
    <style>
        /* Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: #f0f2f5;
        }
        
        .content-wrapper {
            background: #f0f2f5;
            padding: 0 20px;
        }
        
        /* Card Styles */
        .card {
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            margin-bottom: 25px;
            border: none;
            overflow: hidden;
        }
        
        .card-header {
            padding: 15px 20px;
            border-bottom: 1px solid #e9ecef;
            background: linear-gradient(135deg, #0b5e4e 0%, #10b981 100%);
            color: white;
        }
        
        .card-header h4 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .card-header h4 i {
            font-size: 18px;
        }
        
        /* Info Card */
        .info-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            border-left: 4px solid #10b981;
        }
        
        .info-card h3 {
            font-size: 24px;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 5px;
        }
        
        /* Stats Mini Cards */
        .stats-mini-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .stats-mini-card {
            background: white;
            border-radius: 12px;
            padding: 15px;
            text-align: center;
            transition: transform 0.2s;
            cursor: pointer;
            border: 2px solid transparent;
        }
        
        .stats-mini-card:hover {
            transform: translateY(-3px);
        }
        
        .stats-mini-card.active {
            border-color: #10b981;
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        }
        
        .stats-mini-card .stats-icon {
            font-size: 28px;
            margin-bottom: 8px;
        }
        
        .stats-mini-card .stats-number {
            font-size: 24px;
            font-weight: 800;
            color: #0b5e4e;
        }
        
        .stats-mini-card .stats-label {
            font-size: 12px;
            color: #6c757d;
            margin-top: 5px;
        }
        
        /* Tabs */
        .nav-tabs {
            border-bottom: 2px solid #e9ecef;
            margin-bottom: 20px;
        }
        
        .nav-tabs .nav-link {
            color: #6c757d;
            font-weight: 600;
            border: none;
            padding: 12px 20px;
            transition: all 0.3s;
            border-radius: 8px 8px 0 0;
        }
        
        .nav-tabs .nav-link:hover {
            color: #0b5e4e;
            background: #f8f9fa;
        }
        
        .nav-tabs .nav-link.active {
            color: #0b5e4e;
            background: white;
            border-bottom: 3px solid #10b981;
        }
        
        .nav-tabs .nav-link i {
            margin-right: 8px;
        }
        
        /* Table Styles */
        .table-responsive {
            overflow-x: auto;
        }
        
        .table {
            margin-bottom: 0;
            min-width: 600px;
        }
        
        .table thead th {
            background: linear-gradient(135deg, #0b5e4e 0%, #10b981 100%);
            color: white;
            font-weight: 600;
            padding: 12px 15px;
            font-size: 13px;
            border: none;
            white-space: nowrap;
        }
        
        .table tbody td {
            padding: 12px 15px;
            vertical-align: middle;
            font-size: 13px;
            border-color: #e9ecef;
        }
        
        .table tbody tr:hover {
            background-color: #f8f9fa;
        }
        
        /* Badge Styles */
        .badge-status {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
        }
        
        .badge-hadir {
            background: #d1fae5;
            color: #065f46;
        }
        
        .badge-sakit {
            background: #fed7aa;
            color: #9a3412;
        }
        
        .badge-izin {
            background: #dbeafe;
            color: #1e40af;
        }
        
        .badge-alfa {
            background: #fee2e2;
            color: #dc2626;
        }
        
        .link-jurnal {
            color: #0b5e4e;
            text-decoration: none;
            font-weight: 500;
        }
        
        .link-jurnal:hover {
            color: #10b981;
            text-decoration: underline;
        }
        
        /* Header */
        .content-header {
            padding: 20px 0;
        }
        
        .content-header h1 {
            font-size: 24px;
            font-weight: 700;
            color: #1f2937;
        }
        
        /* Button */
        .btn-back {
            background: #6c757d;
            color: white;
            border-radius: 8px;
            padding: 8px 20px;
            font-size: 13px;
            transition: all 0.3s;
        }
        
        .btn-back:hover {
            background: #5a6268;
            transform: translateY(-2px);
            color: white;
        }
        
        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 40px;
            color: #9ca3af;
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.5;
        }
        
        /* Footer */
        .main-footer {
            background: white;
            padding: 15px;
            text-align: center;
            font-size: 12px;
            color: #6c757d;
            border-top: 1px solid #e9ecef;
            margin-top: 20px;
        }
        
        @media (max-width: 768px) {
            .content-wrapper {
                padding: 0 10px;
            }
            
            .info-card h3 {
                font-size: 18px;
            }
            
            .stats-mini-grid {
                grid-template-columns: 1fr;
            }
            
            .nav-tabs .nav-link {
                padding: 10px 12px;
                font-size: 12px;
            }
        }
        
        /* Grade Colors */
        .grade-A { color: #10b981; font-weight: 700; }
        .grade-B { color: #3b82f6; font-weight: 700; }
        .grade-C { color: #f59e0b; font-weight: 700; }
        .grade-D { color: #ef4444; font-weight: 700; }
    </style>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <?php include 'sidebar.php'; ?>
    
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1>
                            <i class="fas fa-user-circle" style="color: #10b981;"></i> 
                            Detail Aktivitas Guru
                        </h1>
                    </div>
                    <div class="col-md-4">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb justify-content-md-end mb-0">
                                <li class="breadcrumb-item"><a href="dashboard.php" style="color: #0b5e4e;">Home</a></li>
                                <li class="breadcrumb-item"><a href="monitoring.php" style="color: #0b5e4e;">Monitoring</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Detail Guru</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div class="container-fluid">
                <!-- Info Guru -->
                <div class="info-card">
                    <div class="row align-items-center">
                        <div class="col-md-8 d-flex align-items-center gap-3">
                            <div class="flex-shrink-0">
                                <i class="fas fa-user-circle fa-4x" style="color: #10b981;"></i>
                            </div>
                            <div>
                                <h3 class="mb-0"><?= htmlspecialchars($guru['full_name']) ?></h3>
                                <p class="text-muted mb-0 mt-1">
                                    <i class="fas fa-building me-1"></i> Unit: <?= htmlspecialchars($guru['unit']) ?>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 text-md-end mt-3 mt-md-0">
                            <a href="monitoring.php" class="btn btn-back">
                                <i class="fas fa-arrow-left"></i> Kembali ke Monitoring
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Statistik Mini Cards (sebagai tombol tab alternatif) -->
                <div class="stats-mini-grid">
                    <div class="stats-mini-card" onclick="switchTab('tabJurnal')">
                        <div class="stats-icon"><i class="fas fa-book" style="color: #0ea5e9;"></i></div>
                        <div class="stats-number"><?= $total_jurnal ?></div>
                        <div class="stats-label">Jurnal Mengajar</div>
                    </div>
                    <div class="stats-mini-card" onclick="switchTab('tabNilai')">
                        <div class="stats-icon"><i class="fas fa-star" style="color: #f59e0b;"></i></div>
                        <div class="stats-number"><?= $total_nilai ?></div>
                        <div class="stats-label">Nilai Siswa</div>
                    </div>
                    <div class="stats-mini-card" onclick="switchTab('tabAbsensi')">
                        <div class="stats-icon"><i class="fas fa-user-check" style="color: #10b981;"></i></div>
                        <div class="stats-number"><?= $total_absensi ?></div>
                        <div class="stats-label">Absensi Siswa</div>
                    </div>
                </div>

                <!-- Tab Navigasi -->
                <ul class="nav nav-tabs" id="detailTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabJurnal" type="button" role="tab">
                            <i class="fas fa-book"></i> Jurnal (<?= $total_jurnal ?>)
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabNilai" type="button" role="tab">
                            <i class="fas fa-star"></i> Nilai (<?= $total_nilai ?>)
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabAbsensi" type="button" role="tab">
                            <i class="fas fa-user-check"></i> Absensi (<?= $total_absensi ?>)
                        </button>
                    </li>
                </ul>

                <div class="tab-content">
                    <!-- Tab Jurnal -->
                    <div class="tab-pane fade show active" id="tabJurnal" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h4>
                                    <i class="fas fa-book"></i>
                                    Jurnal Mengajar
                                </h4>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Tanggal</th>
                                                <th>Kelas</th>
                                                <th>Mapel</th>
                                                <th>Materi</th>
                                                <th>Jenis Materi</th>
                                                <th>Link</th>
                                                <th>Target</th>
                                             </div>
                                        </thead>
                                        <tbody>
                                            <?php if(count($jurnal_list) > 0): ?>
                                                <?php foreach($jurnal_list as $row): ?>
                                                <tr>
                                                    <td><?= date('d-m-Y', strtotime($row['date'])) ?> </div>
                                                    <td><strong><?= htmlspecialchars($row['class_name']) ?></strong> </div>
                                                    <td><?= htmlspecialchars($row['subject']) ?> </div>
                                                    <td><?= strlen($row['material']) > 40 ? substr(htmlspecialchars($row['material']), 0, 40) . '...' : htmlspecialchars($row['material']) ?> </div>
                                                    <td><span class="badge bg-info"><?= htmlspecialchars($row['jenis_materi']) ?></span> </div>
                                                    <td class="text-center">
                                                        <?php if(!empty($row['link_url'])): ?>
                                                            <a href="<?= $row['link_url'] ?>" target="_blank" class="link-jurnal">
                                                                <i class="fas fa-external-link-alt"></i> Buka
                                                            </a>
                                                        <?php else: ?>
                                                            <span class="text-muted">-</span>
                                                        <?php endif; ?>
                                                     </div>
                                                    <td><?= strlen($row['keterangan_target']) > 30 ? substr(htmlspecialchars($row['keterangan_target']), 0, 30) . '...' : htmlspecialchars($row['keterangan_target']) ?> </div>
                                                 </div>
                                                <?php endforeach; ?>
                                            <?php else: ?>
                                                <tr><td colspan="7">
                                                    <div class="empty-state">
                                                        <i class="fas fa-book-open"></i>
                                                        <p>Belum ada data jurnal mengajar</p>
                                                    </div>
                                                 </div>
                                            <?php endif; ?>
                                        </tbody>
                                     </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tab Nilai -->
                    <div class="tab-pane fade" id="tabNilai" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h4>
                                    <i class="fas fa-star"></i>
                                    Nilai Siswa
                                </h4>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Siswa</th>
                                                <th>Kelas</th>
                                                <th>Mapel</th>
                                                <th>Tugas</th>
                                                <th>UTS</th>
                                                <th>UAS</th>
                                                <th>Rata-rata</th>
                                             </div>
                                        </thead>
                                        <tbody>
                                            <?php if(count($nilai_list) > 0): ?>
                                                <?php foreach($nilai_list as $row): 
                                                    $rata = ($row['assignment_score'] + $row['mid_score'] + $row['final_score']) / 3;
                                                    $grade_class = '';
                                                    if($rata >= 85) $grade_class = 'grade-A';
                                                    elseif($rata >= 70) $grade_class = 'grade-B';
                                                    elseif($rata >= 55) $grade_class = 'grade-C';
                                                    else $grade_class = 'grade-D';
                                                ?>
                                                <tr>
                                                    <td><strong><?= htmlspecialchars($row['student_name']) ?></strong> </div>
                                                    <td><?= htmlspecialchars($row['class_name']) ?> </div>
                                                    <td><?= htmlspecialchars($row['subject']) ?> </div>
                                                    <td class="text-center"><?= $row['assignment_score'] ?> </div>
                                                    <td class="text-center"><?= $row['mid_score'] ?> </div>
                                                    <td class="text-center"><?= $row['final_score'] ?> </div>
                                                    <td class="text-center"><span class="<?= $grade_class ?>"><?= round($rata, 2) ?></span> </div>
                                                 </div>
                                                <?php endforeach; ?>
                                            <?php else: ?>
                                                <tr><td colspan="7">
                                                    <div class="empty-state">
                                                        <i class="fas fa-chart-line"></i>
                                                        <p>Belum ada data nilai siswa</p>
                                                        <small class="text-muted">Guru belum menginput nilai untuk siswanya</small>
                                                    </div>
                                                 </div>
                                            <?php endif; ?>
                                        </tbody>
                                     </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tab Absensi -->
                    <div class="tab-pane fade" id="tabAbsensi" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h4>
                                    <i class="fas fa-user-check"></i>
                                    Absensi Siswa
                                </h4>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Siswa</th>
                                                <th>Kelas</th>
                                                <th>Tanggal</th>
                                                <th>Status</th>
                                             </div>
                                        </thead>
                                        <tbody>
                                            <?php if(count($absensi_list) > 0): ?>
                                                <?php foreach($absensi_list as $row): 
                                                    $status_class = '';
                                                    if($row['status'] == 'Hadir') $status_class = 'badge-hadir';
                                                    elseif($row['status'] == 'Sakit') $status_class = 'badge-sakit';
                                                    elseif($row['status'] == 'Izin') $status_class = 'badge-izin';
                                                    elseif($row['status'] == 'Alfa') $status_class = 'badge-alfa';
                                                    else $status_class = 'badge-secondary';
                                                ?>
                                                <tr>
                                                    <td><strong><?= htmlspecialchars($row['student_name']) ?></strong> </div>
                                                    <td><?= htmlspecialchars($row['class_name']) ?> </div>
                                                    <td><?= date('d-m-Y', strtotime($row['date'])) ?> </div>
                                                    <td><span class="badge-status <?= $status_class ?>"><?= $row['status'] ?></span> </div>
                                                 </div>
                                                <?php endforeach; ?>
                                            <?php else: ?>
                                                <tr><td colspan="4">
                                                    <div class="empty-state">
                                                        <i class="fas fa-clipboard-list"></i>
                                                        <p>Belum ada data absensi siswa</p>
                                                        <small class="text-muted">Guru belum melakukan absensi</small>
                                                    </div>
                                                 </div>
                                            <?php endif; ?>
                                        </tbody>
                                     </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="main-footer">
        <strong>&copy; <?= date('Y') ?> SIM ISTIQLAL - Sistem Administrasi Guru</strong>
    </footer>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>
<script>
// Fungsi untuk switch tab
function switchTab(tabId) {
    // Trigger click pada tab button yang sesuai
    var tabButton = document.querySelector(`button[data-bs-target="#${tabId}"]`);
    if (tabButton) {
        var tab = new bootstrap.Tab(tabButton);
        tab.show();
    }
    
    // Update active class pada stats-mini-card
    document.querySelectorAll('.stats-mini-card').forEach(card => {
        card.classList.remove('active');
    });
    event.currentTarget.classList.add('active');
}

// Log untuk debug - cek data yang ada di console
console.log('Data Jurnal: <?= $total_jurnal ?> items');
console.log('Data Nilai: <?= $total_nilai ?> items');
console.log('Data Absensi: <?= $total_absensi ?> items');
</script>
</body>
</html>