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

include 'config.php';

$username = $_SESSION['username'];

// Ambil data wali kelas
$qWaliKelas = mysqli_query($conn, "SELECT id, kelas, nama_wali FROM wali_kelas WHERE nip_wali='$username' LIMIT 1");
if (!$qWaliKelas || mysqli_num_rows($qWaliKelas) === 0) {
    die("Data wali kelas tidak ditemukan.");
}
$wali_kelas = mysqli_fetch_assoc($qWaliKelas);
$kelas_diampu = $wali_kelas['kelas'];
$wali_kelas_id = $wali_kelas['id'];
$nama_wali = $wali_kelas['nama_wali'];

// Handle update status pelanggaran (Selesai)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['update_status'])) {
    $pelanggaran_id = intval($_POST['pelanggaran_id']);
    $status = mysqli_real_escape_string($conn, $_POST['status']);
    $tindakan = mysqli_real_escape_string($conn, $_POST['tindakan']);
    $catatan_penanganan = mysqli_real_escape_string($conn, $_POST['catatan_penanganan']);
    $updated_at = date('Y-m-d H:i:s');

    $query = "UPDATE pelanggaran SET 
                status = '$status',
                tindakan = '$tindakan',
                catatan_penanganan = '$catatan_penanganan',
                updated_at = '$updated_at'
              WHERE id = $pelanggaran_id AND wali_kelas_id = $wali_kelas_id";
    
    if (mysqli_query($conn, $query)) {
        $_SESSION['success'] = "Status pelanggaran berhasil diperbarui!";
        header("Location: pelanggaran_dialihkan.php");
        exit;
    } else {
        $error = "Gagal memperbarui status: " . mysqli_error($conn);
    }
}

// Handle terima pengalihan (tanpa update status)
if (isset($_GET['terima']) && isset($_GET['id'])) {
    $pelanggaran_id = intval($_GET['id']);
    
    $query = "UPDATE pelanggaran SET 
                catatan_alihkan = CONCAT(catatan_alihkan, '\n\n[DITERIMA OLEH WALI KELAS: ', NOW(), ']')
              WHERE id = $pelanggaran_id AND wali_kelas_id = $wali_kelas_id";
    
    if (mysqli_query($conn, $query)) {
        $_SESSION['success'] = "Pengalihan pelanggaran telah diterima.";
    } else {
        $_SESSION['error'] = "Gagal menerima pengalihan: " . mysqli_error($conn);
    }
    
    header("Location: pelanggaran_dialihkan.php");
    exit;
}

// Ambil parameter filter
$status_filter = isset($_GET['status']) ? $_GET['status'] : 'Aktif';
$dari_tanggal = isset($_GET['dari_tanggal']) ? $_GET['dari_tanggal'] : '';
$sampai_tanggal = isset($_GET['sampai_tanggal']) ? $_GET['sampai_tanggal'] : '';

// Bangun query untuk mengambil pelanggaran yang dialihkan
$query = "
    SELECT 
        p.*, 
        s.nama as siswa_nama, 
        s.nis, 
        s.nisn,
        g.nama as guru_nama,
        g.nip as guru_nip
    FROM pelanggaran p 
    JOIN siswa s ON p.siswa_id = s.id 
    LEFT JOIN guru g ON p.guru_id = g.id
    WHERE p.wali_kelas_id = $wali_kelas_id 
    AND p.status_alihkan = 'ya'";

if (!empty($status_filter)) {
    $query .= " AND p.status = '$status_filter'";
}

if (!empty($dari_tanggal)) {
    $query .= " AND p.tanggal >= '$dari_tanggal'";
}

if (!empty($sampai_tanggal)) {
    $query .= " AND p.tanggal <= '$sampai_tanggal'";
}

$query .= " ORDER BY p.tanggal_alihkan DESC, p.tanggal DESC";

$qPelanggaran = mysqli_query($conn, $query);
$pelanggaran_dialihkan = [];
if ($qPelanggaran) {
    while ($row = mysqli_fetch_assoc($qPelanggaran)) {
        $pelanggaran_dialihkan[] = $row;
    }
}

// Hitung statistik
$total_dialihkan = count($pelanggaran_dialihkan);
$total_aktif = count(array_filter($pelanggaran_dialihkan, function($p) {
    return $p['status'] === 'Aktif';
}));
$total_selesai = $total_dialihkan - $total_aktif;
$total_poin = array_sum(array_column($pelanggaran_dialihkan, 'poin'));

// Ambil nama sekolah
$profil = mysqli_fetch_assoc(mysqli_query($conn, "SELECT nama_sekolah FROM profil_sekolah LIMIT 1"));
$nama_sekolah = $profil['nama_sekolah'] ?? 'Sistem Pelanggaran Siswa';

// Ambil pesan session
$success = $_SESSION['success'] ?? null;
$error = $_SESSION['error'] ?? null;
unset($_SESSION['success'], $_SESSION['error']);
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pelanggaran Dialihkan - Wali Kelas</title>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #f8f9fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }

        /* Header */
        .header {
            background: linear-gradient(135deg, #f59e0b 0%, #fd7e14 100%);
            color: white;
            padding: 1rem 2rem;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .logo h2 {
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo p {
            font-size: 0.875rem;
            opacity: 0.9;
            margin-top: 5px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            background: rgba(255,255,255,0.15);
            padding: 8px 15px;
            border-radius: 50px;
            backdrop-filter: blur(10px);
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .user-details .name {
            font-weight: 600;
            font-size: 0.95rem;
        }

        .user-details .role {
            font-size: 0.75rem;
            opacity: 0.8;
        }

        .btn-back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: #6c757d;
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-size: 0.9rem;
            margin-bottom: 20px;
            transition: background 0.3s;
        }

        .btn-back:hover {
            background: #5a6268;
            color: white;
        }

        .alert {
            padding: 12px 20px;
            border-radius: 6px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .filter-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .filter-form {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: flex-end;
        }

        .filter-group {
            flex: 1;
            min-width: 150px;
        }

        .filter-group label {
            display: block;
            font-weight: 500;
            margin-bottom: 5px;
            color: #555;
            font-size: 0.875rem;
        }

        .filter-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 0.875rem;
        }

        .filter-control:focus {
            outline: none;
            border-color: #f59e0b;
        }

        .btn-filter {
            background: #f59e0b;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .btn-filter:hover {
            background: #e06b0c;
        }

        .btn-reset {
            background: #6c757d;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
        }

        .btn-reset:hover {
            background: #5a6268;
            color: white;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-left: 4px solid;
        }

        .stat-card.total {
            border-left-color: #f59e0b;
        }
        .stat-card.aktif {
            border-left-color: #ef4444;
        }
        .stat-card.selesai {
            border-left-color: #10b981;
        }
        .stat-card.poin {
            border-left-color: #6366f1;
        }

        .stat-number {
            font-size: 1.75rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.875rem;
            color: #6c757d;
        }

        .card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .card-header h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.875rem;
        }

        .table th {
            background: #f8f9fa;
            padding: 12px 8px;
            border-bottom: 2px solid #dee2e6;
            font-weight: 600;
            color: #333;
            white-space: nowrap;
        }

        .table td {
            padding: 10px 8px;
            border-bottom: 1px solid #dee2e6;
            vertical-align: middle;
        }

        .table tbody tr:hover {
            background-color: #f8f9fa;
        }

        .text-center {
            text-align: center;
        }

        .text-start {
            text-align: left;
        }

        .badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .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;
        }

        .badge-info {
            background: #17a2b8;
            color: white;
        }

        .btn-action {
            padding: 4px 8px;
            border-radius: 4px;
            color: white;
            text-decoration: none;
            font-size: 0.75rem;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            border: none;
            cursor: pointer;
            margin: 2px;
        }

        .btn-success {
            background: #28a745;
        }

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

        .btn-warning {
            background: #ffc107;
            color: #333;
        }

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

        .btn-info {
            background: #17a2b8;
        }

        .btn-info:hover {
            background: #138496;
        }

        .no-data {
            text-align: center;
            padding: 40px;
            color: #6c757d;
        }

        .no-data i {
            font-size: 3rem;
            color: #dee2e6;
            margin-bottom: 10px;
        }

        .footer {
            margin-top: 30px;
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .footer a {
            padding: 8px 16px;
            background: #6c757d;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.875rem;
        }

        .footer a:hover {
            background: #5a6268;
        }

        .footer a.primary {
            background: #6366f1;
        }

        .footer a.primary:hover {
            background: #4f46e5;
        }

        .footer a.warning {
            background: #f59e0b;
        }

        .footer a.warning:hover {
            background: #e06b0c;
        }

        .catatan-alihkan {
            background: #fff3cd;
            border-left: 4px solid #f59e0b;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 0.8rem;
            margin-top: 5px;
        }

        .modal-content {
            border-radius: 8px;
        }

        .modal-header {
            background: #f59e0b;
            color: white;
            border-radius: 8px 8px 0 0;
        }

        .modal-header .btn-close {
            filter: brightness(0) invert(1);
        }

        @media (max-width: 768px) {
            .filter-form {
                flex-direction: column;
            }
            
            .filter-group {
                width: 100%;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .table {
                font-size: 0.8rem;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="header">
        <div class="logo">
            <h2>
                <i class="fas fa-share-alt"></i>
                Pelanggaran Dialihkan
            </h2>
            <p><?= $nama_sekolah ?> | Wali Kelas: <?= htmlspecialchars($nama_wali) ?> (Kelas <?= $kelas_diampu ?>)</p>
        </div>
        
        <div class="user-info">
            <div class="user-avatar">
                <?= strtoupper(substr($nama_wali, 0, 1)) ?>
            </div>
            <div class="user-details">
                <div class="name"><?= htmlspecialchars($nama_wali) ?></div>
                <div class="role">Wali Kelas <?= $kelas_diampu ?></div>
            </div>
        </div>
    </div>

    <!-- Tombol Kembali -->
    <a href="dashboard_wali_kelas.php" class="btn-back">
        <i class="fas fa-arrow-left"></i> Kembali ke Dashboard
    </a>

    <!-- Alert Messages -->
    <?php if ($success): ?>
        <div class="alert alert-success">
            <i class="fas fa-check-circle"></i> <?= htmlspecialchars($success) ?>
        </div>
    <?php endif; ?>

    <?php if ($error): ?>
        <div class="alert alert-error">
            <i class="fas fa-exclamation-circle"></i> <?= htmlspecialchars($error) ?>
        </div>
    <?php endif; ?>

    <!-- Filter Card -->
    <div class="filter-card">
        <form method="get" class="filter-form">
            <div class="filter-group">
                <label>Status</label>
                <select name="status" class="filter-control">
                    <option value="">Semua Status</option>
                    <option value="Aktif" <?= $status_filter == 'Aktif' ? 'selected' : '' ?>>Aktif</option>
                    <option value="Selesai" <?= $status_filter == 'Selesai' ? 'selected' : '' ?>>Selesai</option>
                </select>
            </div>
            
            <div class="filter-group">
                <label>Dari Tanggal</label>
                <input type="date" name="dari_tanggal" class="filter-control" value="<?= $dari_tanggal ?>">
            </div>
            
            <div class="filter-group">
                <label>Sampai Tanggal</label>
                <input type="date" name="sampai_tanggal" class="filter-control" value="<?= $sampai_tanggal ?>">
            </div>
            
            <div class="filter-group" style="display: flex; gap: 10px;">
                <button type="submit" class="btn-filter">
                    <i class="fas fa-search"></i> Filter
                </button>
                <a href="pelanggaran_dialihkan.php" class="btn-reset">
                    <i class="fas fa-redo-alt"></i> Reset
                </a>
            </div>
        </form>
    </div>

    <!-- Statistik -->
    <div class="stats-grid">
        <div class="stat-card total">
            <div class="stat-number"><?= $total_dialihkan ?></div>
            <div class="stat-label">Total Dialihkan</div>
        </div>
        <div class="stat-card aktif">
            <div class="stat-number"><?= $total_aktif ?></div>
            <div class="stat-label">Perlu Ditangani</div>
        </div>
        <div class="stat-card selesai">
            <div class="stat-number"><?= $total_selesai ?></div>
            <div class="stat-label">Selesai Ditangani</div>
        </div>
        <div class="stat-card poin">
            <div class="stat-number"><?= $total_poin ?></div>
            <div class="stat-label">Total Poin</div>
        </div>
    </div>

    <!-- Tabel Pelanggaran Dialihkan -->
    <div class="card">
        <div class="card-header">
            <h3>
                <i class="fas fa-list"></i>
                Daftar Pelanggaran Dialihkan dari Guru Piket
            </h3>
            <span class="badge badge-info"><?= count($pelanggaran_dialihkan) ?> Data</span>
        </div>
        
        <div class="table-responsive">
            <table class="table" id="tablePelanggaran">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Tanggal Alih</th>
                        <th>Tanggal Kejadian</th>
                        <th>NIS</th>
                        <th>Nama Siswa</th>
                        <th>Jenis Pelanggaran</th>
                        <th>Poin</th>
                        <th>Klasifikasi</th>
                        <th>Status</th>
                        <th>Guru Pelapor</th>
                        <th>Catatan Alihan</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (!empty($pelanggaran_dialihkan)): ?>
                        <?php $no = 1; ?>
                        <?php foreach ($pelanggaran_dialihkan as $p): 
                            // Klasifikasi
                            if ($p['poin'] >= 50) {
                                $klasifikasi = 'Berat';
                                $klasifikasiClass = 'badge-berat';
                            } elseif ($p['poin'] >= 25) {
                                $klasifikasi = 'Sedang';
                                $klasifikasiClass = 'badge-sedang';
                            } else {
                                $klasifikasi = 'Ringan';
                                $klasifikasiClass = 'badge-ringan';
                            }
                            
                            // Status
                            $statusClass = $p['status'] == 'Aktif' ? 'badge-aktif' : 'badge-selesai';
                            
                            // Tanggal alihkan
                            $tanggal_alih = !empty($p['tanggal_alihkan']) ? date('d/m/Y H:i', strtotime($p['tanggal_alihkan'])) : '-';
                        ?>
                        <tr>
                            <td class="text-center"><?= $no++ ?></td>
                            <td class="text-center"><?= $tanggal_alih ?></td>
                            <td class="text-center"><?= date('d/m/Y', strtotime($p['tanggal'])) ?></td>
                            <td class="text-center"><?= htmlspecialchars($p['nis']) ?></td>
                            <td class="text-start"><?= htmlspecialchars($p['siswa_nama']) ?></td>
                            <td class="text-start"><?= htmlspecialchars($p['jenis_pelanggaran']) ?></td>
                            <td class="text-center"><strong><?= $p['poin'] ?></strong></td>
                            <td class="text-center"><span class="badge <?= $klasifikasiClass ?>"><?= $klasifikasi ?></span></td>
                            <td class="text-center"><span class="badge <?= $statusClass ?>"><?= $p['status'] ?></span></td>
                            <td class="text-center">
                                <?= htmlspecialchars($p['guru_nama'] ?? '-') ?>
                                <?php if (!empty($p['guru_nip'])): ?>
                                    <br><small class="text-muted"><?= $p['guru_nip'] ?></small>
                                <?php endif; ?>
                            </td>
                            <td class="text-center">
                                <?php if (!empty($p['catatan_alihkan'])): ?>
                                    <button type="button" class="btn-action btn-info" 
                                            data-bs-toggle="modal" 
                                            data-bs-target="#modalCatatan<?= $p['id'] ?>">
                                        <i class="fas fa-comment"></i> Lihat
                                    </button>
                                <?php else: ?>
                                    <span class="text-muted">-</span>
                                <?php endif; ?>
                            </td>
                            <td class="text-center">
                                <?php if ($p['status'] == 'Aktif'): ?>
                                    <a href="?terima=1&id=<?= $p['id'] ?>" class="btn-action btn-success" 
                                       onclick="return confirm('Terima pengalihan pelanggaran ini?')">
                                        <i class="fas fa-check"></i> Terima
                                    </a>
                                    
                                    <button type="button" class="btn-action btn-warning" 
                                            data-bs-toggle="modal" 
                                            data-bs-target="#modalUpdate<?= $p['id'] ?>">
                                        <i class="fas fa-pen"></i> Selesai
                                    </button>
                                <?php else: ?>
                                    <span class="badge badge-selesai">Selesai</span>
                                <?php endif; ?>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <!-- Perbaikan: Baris dengan 12 kolom (colspan yang benar) -->
                        <tr>
                            <td colspan="12" class="text-center py-4">
                                <i class="fas fa-inbox fa-3x mb-3" style="color: #dee2e6;"></i>
                                <h4>Tidak Ada Pelanggaran Dialihkan</h4>
                                <p class="text-muted">Belum ada pelanggaran yang dialihkan dari guru piket</p>
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal Catatan untuk setiap pelanggaran -->
    <?php foreach ($pelanggaran_dialihkan as $p): ?>
        <?php if (!empty($p['catatan_alihkan'])): ?>
        <div class="modal fade" id="modalCatatan<?= $p['id'] ?>" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-comment me-2"></i>
                            Catatan Alihan
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="catatan-alihkan">
                            <?= nl2br(htmlspecialchars($p['catatan_alihkan'])) ?>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <!-- Modal Update Status -->
        <?php if ($p['status'] == 'Aktif'): ?>
        <div class="modal fade" id="modalUpdate<?= $p['id'] ?>" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-hand-holding-heart me-2"></i>
                            Selesaikan Pelanggaran
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form method="POST">
                        <div class="modal-body">
                            <input type="hidden" name="pelanggaran_id" value="<?= $p['id'] ?>">
                            
                            <div class="mb-3">
                                <label class="form-label">Status</label>
                                <select class="form-select" name="status" required>
                                    <option value="Selesai">Selesai (Telah Ditangani)</option>
                                    <option value="Aktif">Aktif (Masih Ditangani)</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Tindakan</label>
                                <select class="form-select" name="tindakan" required>
                                    <option value="">Pilih Tindakan</option>
                                    <option value="Teguran Lisan">Teguran Lisan</option>
                                    <option value="Teguran Tertulis">Teguran Tertulis</option>
                                    <option value="Pemanggilan Orang Tua">Pemanggilan Orang Tua</option>
                                    <option value="Skorsing">Skorsing</option>
                                    <option value="Sanksi Lainnya">Sanksi Lainnya</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Catatan Penanganan</label>
                                <textarea class="form-control" name="catatan_penanganan" rows="3" 
                                          placeholder="Isikan catatan penanganan..." required></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                            <button type="submit" name="update_status" class="btn btn-success">
                                <i class="fas fa-save"></i> Simpan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <?php endif; ?>
    <?php endforeach; ?>

    <!-- Footer Navigation -->
    <div class="footer">
        <a href="dashboard_wali_kelas.php">
            <i class="fas fa-chart-pie"></i> Dashboard
        </a>
        <a href="riwayat_pelanggaran_wali.php" class="primary">
            <i class="fas fa-history"></i> Riwayat Pelanggaran
        </a>
        <a href="logout.php">
            <i class="fas fa-sign-out-alt"></i> Logout
        </a>
    </div>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    
    <script>
        $(document).ready(function() {
            // Inisialisasi DataTables - HANYA jika ada data
            <?php if (!empty($pelanggaran_dialihkan)): ?>
                $('#tablePelanggaran').DataTable({
                    language: {
                        url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json'
                    },
                    order: [[1, 'desc']], // Urutkan berdasarkan Tanggal Alih (kolom index 1)
                    pageLength: 25,
                    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Semua"]],
                    columnDefs: [
                        { targets: 0, width: '5%' },  // No
                        { targets: 1, width: '10%' }, // Tanggal Alih
                        { targets: 2, width: '10%' }, // Tanggal Kejadian
                        { targets: 3, width: '8%' },  // NIS
                        { targets: 4, width: '12%' }, // Nama Siswa
                        { targets: 5, width: '12%' }, // Jenis
                        { targets: 6, width: '5%' },  // Poin
                        { targets: 7, width: '8%' },  // Klasifikasi
                        { targets: 8, width: '8%' },  // Status
                        { targets: 9, width: '10%' }, // Guru Pelapor
                        { targets: 10, width: '6%' }, // Catatan
                        { targets: 11, width: '6%' }  // Aksi
                    ]
                });
            <?php endif; ?>
            
            // Auto-hide alerts after 3 seconds
            setTimeout(() => {
                $('.alert').fadeOut('slow');
            }, 3000);
        });
    </script>
</body>
</html>