<?php
session_start();
if (!isset($_SESSION['username']) || $_SESSION['role'] !== 'guru') {
    header("Location: index.php");
    exit;
}

// Koneksi database
require_once 'config.php';

// Ambil data guru piket yang login
$username = $_SESSION['username'];
$guru_nama = '';

$query = "SELECT * FROM guru WHERE nip = '$username' LIMIT 1";
$result = mysqli_query($conn, $query);
if ($result && mysqli_num_rows($result) > 0) {
    $guru = mysqli_fetch_assoc($result);
    $guru_nama = $guru['nama'];
} else {
    $query_user = "SELECT * FROM users WHERE username = '$username' AND role = 'guru' LIMIT 1";
    $result_user = mysqli_query($conn, $query_user);
    if ($result_user && mysqli_num_rows($result_user) > 0) {
        $user = mysqli_fetch_assoc($result_user);
        $guru_nama = $user['nama'] ?? $username;
    }
}

// Ambil parameter ID
$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;

if ($id <= 0) {
    header("Location: dashboard_guru_piket.php");
    exit;
}

// Ambil data pelanggaran
$query = "SELECT p.*, 
                 s.nama as nama_siswa, 
                 s.nisn, 
                 s.kelas, 
                 s.no_wa,
                 s.foto as foto_siswa,
                 g.nama as nama_guru_pelapor,
                 g.nip as nip_guru_pelapor,
                 w.nama_wali as nama_wali_kelas,
                 w.kelas as kelas_wali
          FROM pelanggaran p 
          LEFT JOIN siswa s ON p.siswa_id = s.id 
          LEFT JOIN guru g ON p.guru_id = g.id
          LEFT JOIN wali_kelas w ON p.wali_kelas_id = w.id
          WHERE p.id = $id";

$result = mysqli_query($conn, $query);

if (!$result || mysqli_num_rows($result) == 0) {
    header("Location: dashboard_guru_piket.php");
    exit;
}

$pelanggaran = mysqli_fetch_assoc($result);

// Format tanggal
$tanggal_laporan = date('d F Y', strtotime($pelanggaran['tanggal']));
$tanggal_dibuat = !empty($pelanggaran['created_at']) ? date('d F Y H:i', strtotime($pelanggaran['created_at'])) : '-';
$tanggal_diupdate = !empty($pelanggaran['updated_at']) ? date('d F Y H:i', strtotime($pelanggaran['updated_at'])) : '-';
$tanggal_dialihkan = !empty($pelanggaran['tanggal_alihkan']) ? date('d F Y H:i', strtotime($pelanggaran['tanggal_alihkan'])) : '-';

// Tentukan kelas badge untuk poin
$poin_class = 'badge-ringan';
if ($pelanggaran['poin'] >= 50) {
    $poin_class = 'badge-berat';
} elseif ($pelanggaran['poin'] >= 25) {
    $poin_class = 'badge-sedang';
}

// Tentukan status badge
$status_class = ($pelanggaran['status'] == 'Aktif') ? 'badge-aktif' : 'badge-selesai';
$status_icon = ($pelanggaran['status'] == 'Aktif') ? 'fa-clock' : 'fa-check-circle';

// Tentukan status alihan
$alihkan_badge = '';
if (!empty($pelanggaran['status_alihkan']) && $pelanggaran['status_alihkan'] == 'ya') {
    $alihkan_badge = '<span class="badge badge-dialihkan"><i class="fas fa-share-alt me-1"></i>Dialihkan ke Wali Kelas</span>';
}

// Ambil nama sekolah untuk header
$profil = mysqli_fetch_assoc(mysqli_query($conn, "SELECT nama_sekolah, kepala_sekolah, nip_kepala FROM profil_sekolah LIMIT 1"));
$nama_sekolah = $profil['nama_sekolah'] ?? 'Sistem Pelanggaran Siswa';
$kepala_sekolah = $profil['kepala_sekolah'] ?? '....................................';
$nip_kepala = $profil['nip_kepala'] ?? '........................';
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail Pelanggaran - Guru Piket</title>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    
    <!-- Google Fonts - Times New Roman untuk kesan resmi -->
    <link href="https://fonts.googleapis.com/css2?family=Times+New+Roman&display=swap" rel="stylesheet">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Times New Roman', Times, serif;
            background: #f5f5f5;
            color: #000000;
            line-height: 1.6;
            padding: 20px;
        }

        /* Kop Surat */
        .kop-surat {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 3px double #000;
            padding-bottom: 20px;
        }

        .kop-surat h1 {
            font-size: 28px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 5px;
        }

        .kop-surat h2 {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .kop-surat p {
            font-size: 14px;
            margin: 2px 0;
        }

        .kop-surat .alamat {
            font-style: italic;
        }

        /* Header */
        .header {
            background: white;
            border-radius: 8px;
            padding: 15px 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            border-left: 5px solid #8b5cf6;
        }

        .logo h2 {
            font-size: 1.5rem;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'Inter', sans-serif;
        }

        .logo h2 i {
            color: #8b5cf6;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            background: #f8f9fa;
            padding: 8px 15px;
            border-radius: 50px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            background: #8b5cf6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .user-details .name {
            font-weight: 600;
            color: #333;
        }

        .user-details .role {
            font-size: 0.75rem;
            color: #666;
        }

        /* Title */
        h2 {
            text-align: center;
            margin-bottom: 5px;
            color: #333;
        }

        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 20px;
            font-size: 0.9rem;
        }

        /* Alert */
        .alert {
            background: white;
            border-radius: 8px;
            padding: 15px 20px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .alert.info {
            border-left: 4px solid #3b82f6;
        }

        .alert i {
            font-size: 1.25rem;
        }

        .alert.info i {
            color: #3b82f6;
        }

        /* Badges */
        .badge {
            padding: 4px 10px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 12px;
            display: inline-block;
        }

        .badge-berat {
            background: #ef4444;
            color: white;
        }

        .badge-sedang {
            background: #f59e0b;
            color: white;
        }

        .badge-ringan {
            background: #10b981;
            color: white;
        }

        .badge-aktif {
            background: #ef4444;
            color: white;
        }

        .badge-selesai {
            background: #10b981;
            color: white;
        }

        .badge-dialihkan {
            background: #f59e0b;
            color: white;
        }

        /* Card */
        .card {
            background: white;
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border: 1px solid #ddd;
        }

        .card-header {
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
            margin-bottom: 20px;
            font-weight: bold;
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 10px;
            text-transform: uppercase;
        }

        .card-header i {
            color: #8b5cf6;
        }

        /* Info Grid */
        .info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .info-item {
            border-bottom: 1px dotted #ccc;
            padding: 8px 0;
        }

        .info-label {
            font-size: 14px;
            color: #555;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .info-value {
            font-weight: normal;
            color: #000;
            font-size: 16px;
        }

        /* Student Profile */
        .student-profile {
            display: flex;
            align-items: center;
            gap: 30px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #e0e0e0;
        }

        .student-avatar {
            width: 100px;
            height: 100px;
            background: #8b5cf6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3rem;
            border: 3px solid #333;
        }

        .student-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .student-info h3 {
            margin-bottom: 10px;
            color: #000;
            font-size: 24px;
            font-weight: bold;
        }

        .student-info p {
            margin-bottom: 5px;
            color: #333;
            font-size: 16px;
        }

        /* Timeline */
        .timeline {
            margin-top: 20px;
        }

        .timeline-item {
            display: flex;
            gap: 20px;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }

        .timeline-item:last-child {
            border-bottom: none;
        }

        .timeline-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            flex-shrink: 0;
            font-size: 1.2rem;
        }

        .timeline-icon.primary {
            background: #3b82f6;
        }

        .timeline-icon.success {
            background: #10b981;
        }

        .timeline-icon.warning {
            background: #f59e0b;
        }

        .timeline-icon.danger {
            background: #ef4444;
        }

        .timeline-content {
            flex: 1;
        }

        .timeline-date {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }

        .timeline-title {
            font-weight: bold;
            color: #000;
            margin-bottom: 5px;
            font-size: 16px;
        }

        .timeline-text {
            color: #333;
            font-size: 14px;
        }

        /* Evidence */
        .evidence-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 15px;
        }

        .evidence-item {
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
        }

        .evidence-item img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .evidence-item img:hover {
            transform: scale(1.05);
        }

        .evidence-caption {
            padding: 10px;
            background: #f8f9fa;
            text-align: center;
            font-size: 13px;
            color: #555;
            border-top: 1px solid #ddd;
        }

        /* Buttons */
        .btn {
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
        }

        .btn-primary {
            background: #3b82f6;
            color: white;
        }

        .btn-primary:hover {
            background: #2563eb;
        }

        .btn-success {
            background: #10b981;
            color: white;
        }

        .btn-success:hover {
            background: #059669;
        }

        .btn-warning {
            background: #f59e0b;
            color: white;
        }

        .btn-warning:hover {
            background: #d97706;
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background: #5a6268;
        }

        .btn-danger {
            background: #ef4444;
            color: white;
        }

        .btn-danger:hover {
            background: #dc2626;
        }

        .btn-outline {
            background: transparent;
            border: 1px solid #6c757d;
            color: #6c757d;
        }

        .btn-outline:hover {
            background: #6c757d;
            color: white;
        }

        /* Action Buttons */
        .action-buttons {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        /* Footer Buttons */
        .footer-buttons {
            margin-top: 30px;
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* Print styles */
        @media print {
            body {
                background: white;
                padding: 0.5in;
            }
            
            .header, .action-buttons, .footer-buttons, .btn {
                display: none !important;
            }
            
            .card {
                box-shadow: none;
                border: 1px solid #000;
                page-break-inside: avoid;
            }
            
            .kop-surat {
                display: block !important;
            }
            
            .badge {
                border: 1px solid #000;
                background: white !important;
                color: #000 !important;
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .info-grid {
                grid-template-columns: 1fr;
            }
            
            .student-profile {
                flex-direction: column;
                text-align: center;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .action-buttons .btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <!-- Kop Surat (hidden by default, tampil saat print) -->
    <div class="kop-surat" style="display: none;">
        <h1><?= $nama_sekolah ?></h1>
        <p>Jalan Pendidikan No. 123, Telp. (021) 1234567</p>
        <p class="alamat">Email: info@sekolah.sch.id | Website: www.sekolah.sch.id</p>
        <h2>DETAIL PELANGGARAN SISWA</h2>
        <p>Nomor: DP/<?= date('Y') ?>/<?= str_pad($id, 4, '0', STR_PAD_LEFT) ?></p>
    </div>

    <!-- Header -->
    <div class="header">
        <div class="logo">
            <h2>
                <i class="fas fa-file-alt"></i>
                Detail Pelanggaran
            </h2>
        </div>
        
        <div class="user-info">
            <div class="user-avatar">
                <?= strtoupper(substr($guru_nama, 0, 1)) ?>
            </div>
            <div class="user-details">
                <div class="name"><?= htmlspecialchars($guru_nama) ?></div>
                <div class="role">Guru Piket</div>
            </div>
        </div>
    </div>

    <!-- Title -->
    <h2>DETAIL PELANGGARAN #<?= str_pad($id, 4, '0', STR_PAD_LEFT) ?></h2>
    <div class="subtitle">Informasi lengkap pelanggaran siswa</div>

    <!-- Action Buttons -->
    <div class="action-buttons">
        <a href="cetak_detail_pelanggaran.php?id=<?= $id ?>" target="_blank" class="btn btn-primary">
            <i class="fas fa-print"></i> Cetak PDF
        </a>
        <a href="penanganan_pelanggaran.php?id=<?= $id ?>" class="btn btn-success">
            <i class="fas fa-hand-holding-heart"></i> Tangani
        </a>
        <?php if ($pelanggaran['status_alihkan'] != 'ya' && $pelanggaran['status'] == 'Aktif'): ?>
        <a href="alihkan_pelanggaran.php?id=<?= $id ?>" class="btn btn-warning">
            <i class="fas fa-share-alt"></i> Alihkan ke Wali Kelas
        </a>
        <?php endif; ?>
        <a href="dashboard_guru_piket.php" class="btn btn-outline">
            <i class="fas fa-arrow-left"></i> Kembali
        </a>
    </div>

    <!-- Status Banner -->
    <div class="alert info">
        <i class="fas <?= $status_icon ?>"></i>
        <div>
            <strong>Status: <?= $pelanggaran['status'] ?></strong><br>
            <?php if ($pelanggaran['status'] == 'Aktif'): ?>
                Pelanggaran ini masih dalam proses penanganan.
            <?php else: ?>
                Pelanggaran ini telah selesai ditangani pada <?= $tanggal_diupdate ?>
            <?php endif; ?>
        </div>
        <?php if (!empty($alihkan_badge)): ?>
            <div style="margin-left: auto;"><?= $alihkan_badge ?></div>
        <?php endif; ?>
    </div>

    <!-- Informasi Siswa -->
    <div class="card">
        <div class="card-header">
            <i class="fas fa-user-graduate"></i>
            INFORMASI SISWA
        </div>
        
        <div class="student-profile">
            <div class="student-avatar">
                <?php if (!empty($pelanggaran['foto_siswa'])): ?>
                    <img src="<?= htmlspecialchars($pelanggaran['foto_siswa']) ?>" alt="Foto Siswa">
                <?php else: ?>
                    <i class="fas fa-user-graduate"></i>
                <?php endif; ?>
            </div>
            <div class="student-info">
                <h3><?= htmlspecialchars($pelanggaran['nama_siswa'] ?? '-') ?></h3>
                <p><i class="fas fa-id-card"></i> NISN: <?= htmlspecialchars($pelanggaran['nisn'] ?? '-') ?></p>
                <p><i class="fas fa-users"></i> Kelas: <?= htmlspecialchars($pelanggaran['kelas'] ?? '-') ?></p>
                <?php if (!empty($pelanggaran['no_wa'])): ?>
                <p><i class="fab fa-whatsapp" style="color: #25D366;"></i> <?= htmlspecialchars($pelanggaran['no_wa']) ?></p>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Informasi Pelanggaran -->
    <div class="card">
        <div class="card-header">
            <i class="fas fa-exclamation-triangle"></i>
            DETAIL PELANGGARAN
        </div>
        
        <div class="info-grid">
            <div class="info-item">
                <div class="info-label">Tanggal Kejadian</div>
                <div class="info-value">: <?= $tanggal_laporan ?></div>
            </div>
            <div class="info-item">
                <div class="info-label">Jenis Pelanggaran</div>
                <div class="info-value">: <?= htmlspecialchars($pelanggaran['jenis_pelanggaran']) ?></div>
            </div>
            <div class="info-item">
                <div class="info-label">Poin Pelanggaran</div>
                <div class="info-value">: 
                    <span class="badge <?= $poin_class ?>">
                        <?= $pelanggaran['poin'] ?> Poin
                    </span>
                </div>
            </div>
            <div class="info-item">
                <div class="info-label">Status</div>
                <div class="info-value">: 
                    <span class="badge <?= $status_class ?>">
                        <i class="fas <?= $status_icon ?>"></i> <?= $pelanggaran['status'] ?>
                    </span>
                </div>
            </div>
        </div>
        
        <div style="margin-top: 15px;">
            <div class="info-label">Keterangan</div>
            <div style="background: #f9f9f9; padding: 15px; border-radius: 8px; margin-top: 5px; border: 1px solid #eee;">
                <?= nl2br(htmlspecialchars($pelanggaran['keterangan'])) ?>
            </div>
        </div>
    </div>

    <!-- Informasi Lainnya -->
    <div class="card">
        <div class="card-header">
            <i class="fas fa-info-circle"></i>
            INFORMASI LAINNYA
        </div>
        
        <div class="info-grid">
            <div class="info-item">
                <div class="info-label">Dilaporkan Oleh</div>
                <div class="info-value">: <?= htmlspecialchars($pelanggaran['nama_guru_pelapor'] ?? 'Guru Piket') ?></div>
            </div>
            <div class="info-item">
                <div class="info-label">NIP Pelapor</div>
                <div class="info-value">: <?= htmlspecialchars($pelanggaran['nip_guru_pelapor'] ?? '-') ?></div>
            </div>
            <div class="info-item">
                <div class="info-label">Tanggal Lapor</div>
                <div class="info-value">: <?= $tanggal_dibuat ?></div>
            </div>
            <div class="info-item">
                <div class="info-label">Terakhir Update</div>
                <div class="info-value">: <?= $tanggal_diupdate ?></div>
            </div>
        </div>

        <?php if (!empty($pelanggaran['status_alihkan']) && $pelanggaran['status_alihkan'] == 'ya'): ?>
        <div style="margin-top: 20px; background: #fff8e1; padding: 15px; border-radius: 8px; border-left: 4px solid #f59e0b;">
            <h4 style="color: #f59e0b; margin-bottom: 10px;">
                <i class="fas fa-share-alt"></i> Informasi Alihan
            </h4>
            <div class="info-item">
                <div class="info-label">Dialihkan ke Wali Kelas</div>
                <div class="info-value">: <?= htmlspecialchars($pelanggaran['nama_wali_kelas'] ?? '-') ?></div>
            </div>
            <div class="info-item">
                <div class="info-label">Kelas Wali</div>
                <div class="info-value">: <?= htmlspecialchars($pelanggaran['kelas_wali'] ?? '-') ?></div>
            </div>
            <div class="info-item">
                <div class="info-label">Tanggal Dialihkan</div>
                <div class="info-value">: <?= $tanggal_dialihkan ?></div>
            </div>
            <?php if (!empty($pelanggaran['catatan_alihkan'])): ?>
            <div class="info-item">
                <div class="info-label">Catatan Alihan</div>
                <div class="info-value">: <?= nl2br(htmlspecialchars($pelanggaran['catatan_alihkan'])) ?></div>
            </div>
            <?php endif; ?>
        </div>
        <?php endif; ?>
    </div>

    <!-- Bukti Foto -->
    <?php if (!empty($pelanggaran['bukti_foto'])): ?>
    <div class="card">
        <div class="card-header">
            <i class="fas fa-camera"></i>
            BUKTI FOTO
        </div>
        
        <div class="evidence-container">
            <?php 
            // Jika multiple foto (pisahkan dengan koma)
            $foto_list = explode(',', $pelanggaran['bukti_foto']);
            foreach ($foto_list as $foto): 
                if (!empty(trim($foto))):
            ?>
            <div class="evidence-item">
                <a href="<?= trim($foto) ?>" target="_blank">
                    <img src="<?= trim($foto) ?>" alt="Bukti Foto">
                </a>
                <div class="evidence-caption">
                    <i class="fas fa-camera"></i> Klik untuk perbesar
                </div>
            </div>
            <?php 
                endif;
            endforeach; 
            ?>
        </div>
    </div>
    <?php endif; ?>

    <!-- Penanganan -->
    <?php if (!empty($pelanggaran['tindakan']) || !empty($pelanggaran['catatan_penanganan'])): ?>
    <div class="card">
        <div class="card-header">
            <i class="fas fa-hand-holding-heart"></i>
            PENANGANAN PELANGGARAN
        </div>
        
        <?php if (!empty($pelanggaran['tindakan'])): ?>
        <div class="info-item">
            <div class="info-label">Tindakan yang Diambil</div>
            <div class="info-value">: <?= htmlspecialchars($pelanggaran['tindakan']) ?></div>
        </div>
        <?php endif; ?>
        
        <?php if (!empty($pelanggaran['catatan_penanganan'])): ?>
        <div style="margin-top: 15px;">
            <div class="info-label">Catatan Penanganan</div>
            <div style="background: #f9f9f9; padding: 15px; border-radius: 8px; margin-top: 5px; border: 1px solid #eee;">
                <?= nl2br(htmlspecialchars($pelanggaran['catatan_penanganan'])) ?>
            </div>
        </div>
        <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- Timeline -->
    <div class="card">
        <div class="card-header">
            <i class="fas fa-history"></i>
            RIWAYAT TIMELINE
        </div>
        
        <div class="timeline">
            <!-- Created -->
            <div class="timeline-item">
                <div class="timeline-icon primary">
                    <i class="fas fa-plus"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-date">
                        <i class="fas fa-clock"></i> <?= $tanggal_dibuat ?>
                    </div>
                    <div class="timeline-title">Pelanggaran Dilaporkan</div>
                    <div class="timeline-text">
                        Dilaporkan oleh: <?= htmlspecialchars($pelanggaran['nama_guru_pelapor'] ?? 'Guru Piket') ?>
                    </div>
                </div>
            </div>

            <!-- Alihkan -->
            <?php if (!empty($pelanggaran['status_alihkan']) && $pelanggaran['status_alihkan'] == 'ya'): ?>
            <div class="timeline-item">
                <div class="timeline-icon warning">
                    <i class="fas fa-share-alt"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-date">
                        <i class="fas fa-clock"></i> <?= $tanggal_dialihkan ?>
                    </div>
                    <div class="timeline-title">Dialihkan ke Wali Kelas</div>
                    <div class="timeline-text">
                        Wali Kelas: <?= htmlspecialchars($pelanggaran['nama_wali_kelas'] ?? '-') ?>
                    </div>
                    <?php if (!empty($pelanggaran['catatan_alihkan'])): ?>
                    <div class="timeline-text" style="margin-top: 5px;">
                        <em><?= nl2br(htmlspecialchars($pelanggaran['catatan_alihkan'])) ?></em>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
            <?php endif; ?>

            <!-- Ditangani -->
            <?php if (!empty($pelanggaran['updated_at'])): ?>
            <div class="timeline-item">
                <div class="timeline-icon success">
                    <i class="fas fa-check"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-date">
                        <i class="fas fa-clock"></i> <?= $tanggal_diupdate ?>
                    </div>
                    <div class="timeline-title">
                        <?= ($pelanggaran['status'] == 'Selesai') ? 'Pelanggaran Selesai Ditangani' : 'Update Penanganan' ?>
                    </div>
                    <?php if (!empty($pelanggaran['tindakan'])): ?>
                    <div class="timeline-text">
                        Tindakan: <?= htmlspecialchars($pelanggaran['tindakan']) ?>
                    </div>
                    <?php endif; ?>
                    <?php if (!empty($pelanggaran['catatan_penanganan'])): ?>
                    <div class="timeline-text" style="margin-top: 5px;">
                        <em><?= nl2br(htmlspecialchars($pelanggaran['catatan_penanganan'])) ?></em>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Tanda Tangan untuk Cetak -->
    <div style="margin-top: 40px; display: none;" class="print-signature">
        <table style="width: 100%; border: 0; font-size: 14px; text-align: center;">
            <tr>
                <td style="width: 50%;">
                    Mengetahui,<br>
                    Kepala Sekolah<br><br><br><br>
                    <u><?= $kepala_sekolah ?></u><br>
                    NIP. <?= $nip_kepala ?>
                </td>
                <td style="width: 50%;">
                    <?= date('d F Y') ?><br>
                    Guru Piket,<br><br><br><br>
                    <u><?= $guru_nama ?></u><br>
                    NIP. ........................
                </td>
            </tr>
        </table>
    </div>

    <!-- Footer Buttons -->
    <div class="footer-buttons">
        <a href="dashboard_guru_piket.php" class="btn btn-outline">
            <i class="fas fa-chart-pie"></i> Dashboard
        </a>
        <a href="laporkan_pelanggaran.php" class="btn btn-outline">
            <i class="fas fa-plus-circle"></i> Lapor Pelanggaran
        </a>
        <a href="semua_pelanggaran.php" class="btn btn-outline">
            <i class="fas fa-list"></i> Semua Pelanggaran
        </a>
        <a href="rekap_pelanggaran.php" class="btn btn-outline">
            <i class="fas fa-file-alt"></i> Rekap Bulanan
        </a>
    </div>

    <script>
        // Konfirmasi sebelum alihkan
        document.querySelectorAll('.btn-warning').forEach(btn => {
            btn.addEventListener('click', function(e) {
                if (this.href.includes('alihkan')) {
                    if (!confirm('Apakah Anda yakin ingin mengalihkan pelanggaran ini ke wali kelas?')) {
                        e.preventDefault();
                    }
                }
            });
        });
    </script>
</body>
</html>