<?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 filter
$kelas = $_GET['kelas'] ?? '';
$status = $_GET['status'] ?? '';
$dari_tanggal = $_GET['dari_tanggal'] ?? '';
$sampai_tanggal = $_GET['sampai_tanggal'] ?? '';

// Ambil daftar kelas untuk filter
$kelasList = mysqli_query($conn, "SELECT DISTINCT kelas FROM siswa WHERE status='aktif' ORDER BY CAST(kelas AS UNSIGNED), kelas");

// Bangun query untuk mengambil semua pelanggaran
$query = "SELECT p.*, 
                 s.nama as nama_siswa, 
                 s.nisn, 
                 s.kelas,
                 g.nama as nama_guru_pelapor,
                 w.nama_wali as nama_wali_kelas
          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 1=1";

if (!empty($kelas)) {
    $query .= " AND s.kelas = '$kelas'";
}

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

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 DESC, p.created_at DESC";

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

// Ambil nama sekolah untuk header
$profil = mysqli_fetch_assoc(mysqli_query($conn, "SELECT nama_sekolah FROM profil_sekolah LIMIT 1"));
$nama_sekolah = $profil['nama_sekolah'] ?? 'Sistem Pelanggaran Siswa';
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semua 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">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background: #f3f4f6;
            color: #333;
            line-height: 1.5;
            padding: 20px;
        }

        /* 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;
        }

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

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

        .logo p {
            font-size: 0.875rem;
            color: #666;
            margin-top: 5px;
        }

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

        /* Filter Card */
        .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: bold;
            margin-bottom: 5px;
            color: #555;
            font-size: 0.9rem;
        }

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

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

        .filter-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        /* Buttons */
        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
        }

        .btn-primary {
            background: #8b5cf6;
            color: white;
        }

        .btn-primary:hover {
            background: #7c3aed;
        }

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

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

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

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

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

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

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

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

        .btn-sm {
            padding: 4px 8px;
            font-size: 12px;
        }

        /* Stats Summary */
        .stats-summary {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .stat-box {
            background: white;
            border-radius: 8px;
            padding: 15px 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            flex: 1;
            min-width: 150px;
            text-align: center;
        }

        .stat-box .value {
            font-size: 2rem;
            font-weight: bold;
            color: #333;
        }

        .stat-box .label {
            color: #666;
            font-size: 0.9rem;
            margin-top: 5px;
        }

        .stat-box.total { border-top: 3px solid #8b5cf6; }
        .stat-box.aktif { border-top: 3px solid #ef4444; }
        .stat-box.selesai { border-top: 3px solid #10b981; }
        .stat-box.berat { border-top: 3px solid #ef4444; }
        .stat-box.sedang { border-top: 3px solid #f59e0b; }
        .stat-box.ringan { border-top: 3px solid #10b981; }

        /* Table Container */
        .table-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            overflow-x: auto;
        }

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

        .table-header h3 {
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }

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

        .table-info {
            background: #f8f9fa;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            color: #666;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            font-size: 14px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        th {
            background: #f8f9fa;
            font-weight: bold;
            color: #333;
            white-space: nowrap;
        }

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

        /* Badges */
        .badge {
            padding: 3px 8px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 12px;
            display: inline-block;
            white-space: nowrap;
        }

        .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-warning {
            background: #f59e0b;
            color: white;
        }

        /* Action Buttons */
        .action-buttons {
            display: flex;
            gap: 5px;
            justify-content: center;
            flex-wrap: wrap;
        }

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

        .action-btn.view {
            background: #3b82f6;
        }

        .action-btn.edit {
            background: #10b981;
        }

        .action-btn.handle {
            background: #10b981;
        }

        .action-btn.transfer {
            background: #f59e0b;
        }

        .action-btn:hover {
            opacity: 0.9;
        }

        /* No Data */
        .no-data {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .no-data i {
            font-size: 48px;
            color: #ddd;
            margin-bottom: 10px;
        }

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

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

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

        .footer-buttons a.primary {
            background: #8b5cf6;
        }

        .footer-buttons a.primary:hover {
            background: #7c3aed;
        }

        .footer-buttons a.success {
            background: #10b981;
        }

        .footer-buttons a.success:hover {
            background: #059669;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .filter-form {
                flex-direction: column;
            }
            
            .filter-group {
                width: 100%;
            }
            
            .filter-actions {
                width: 100%;
                flex-direction: column;
            }
            
            .filter-actions .btn {
                width: 100%;
                justify-content: center;
            }
            
            .stats-summary {
                flex-direction: column;
            }
            
            .stat-box {
                width: 100%;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            table {
                font-size: 12px;
            }
            
            th, td {
                padding: 5px;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="header">
        <div class="logo">
            <h2>
                <i class="fas fa-list"></i>
                Semua Pelanggaran
            </h2>
            <p><?= $nama_sekolah ?> • Guru Piket</p>
        </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>DAFTAR SEMUA PELANGGARAN</h2>
    <div class="subtitle">Menampilkan semua data pelanggaran siswa</div>

    <!-- Filter Card -->
    <div class="filter-card">
        <form method="get" class="filter-form">
            <div class="filter-group">
                <label>Kelas</label>
                <select name="kelas" class="filter-control">
                    <option value="">Semua Kelas</option>
                    <?php 
                    mysqli_data_seek($kelasList, 0);
                    while ($k = mysqli_fetch_assoc($kelasList)): 
                        $selected = ($k['kelas'] == $kelas) ? 'selected' : '';
                    ?>
                    <option value="<?= $k['kelas'] ?>" <?= $selected ?>>
                        Kelas <?= htmlspecialchars($k['kelas']) ?>
                    </option>
                    <?php endwhile; ?>
                </select>
            </div>
            
            <div class="filter-group">
                <label>Status</label>
                <select name="status" class="filter-control">
                    <option value="">Semua Status</option>
                    <option value="Aktif" <?= ($status == 'Aktif') ? 'selected' : '' ?>>Aktif</option>
                    <option value="Selesai" <?= ($status == '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-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i> Filter
                </button>
                <a href="semua_pelanggaran.php" class="btn btn-secondary">
                    <i class="fas fa-redo-alt"></i> Reset
                </a>
                <a href="laporkan_pelanggaran.php" class="btn btn-success">
                    <i class="fas fa-plus-circle"></i> Tambah
                </a>
            </div>
        </form>
    </div>

    <!-- Stats Summary -->
    <?php
    // Hitung statistik
    $total = count($pelanggaran_list);
    $aktif = 0;
    $selesai = 0;
    $berat = 0;
    $sedang = 0;
    $ringan = 0;
    
    foreach ($pelanggaran_list as $p) {
        if ($p['status'] == 'Aktif') $aktif++;
        else $selesai++;
        
        if ($p['poin'] >= 50) $berat++;
        elseif ($p['poin'] >= 25) $sedang++;
        else $ringan++;
    }
    ?>
    
    <div class="stats-summary">
        <div class="stat-box total">
            <div class="value"><?= $total ?></div>
            <div class="label">Total Pelanggaran</div>
        </div>
        <div class="stat-box aktif">
            <div class="value"><?= $aktif ?></div>
            <div class="label">Aktif</div>
        </div>
        <div class="stat-box selesai">
            <div class="value"><?= $selesai ?></div>
            <div class="label">Selesai</div>
        </div>
        <div class="stat-box berat">
            <div class="value"><?= $berat ?></div>
            <div class="label">Berat</div>
        </div>
        <div class="stat-box sedang">
            <div class="value"><?= $sedang ?></div>
            <div class="label">Sedang</div>
        </div>
        <div class="stat-box ringan">
            <div class="value"><?= $ringan ?></div>
            <div class="label">Ringan</div>
        </div>
    </div>

    <!-- Table -->
    <div class="table-container">
        <div class="table-header">
            <h3>
                <i class="fas fa-list"></i>
                Data Pelanggaran
            </h3>
            <div class="table-info">
                <i class="fas fa-database"></i> <?= $total ?> data ditemukan
            </div>
        </div>
        
        <table>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Tanggal</th>
                    <th>NISN</th>
                    <th>Nama Siswa</th>
                    <th>Kelas</th>
                    <th>Jenis Pelanggaran</th>
                    <th>Poin</th>
                    <th>Klasifikasi</th>
                    <th>Status</th>
                    <th>Dialihkan</th>
                    <th>Guru Pelapor</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php if (!empty($pelanggaran_list)): ?>
                    <?php $no = 1; ?>
                    <?php foreach ($pelanggaran_list 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';
                        
                        // Dialihkan
                        $dialihkan = ($p['status_alihkan'] == 'ya') ? '<span class="badge badge-dialihkan">Ya</span>' : '-';
                    ?>
                    <tr>
                        <td><?= $no++ ?></td>
                        <td><?= date('d/m/Y', strtotime($p['tanggal'])) ?></td>
                        <td><?= htmlspecialchars($p['nisn'] ?? '-') ?></td>
                        <td class="text-left"><?= htmlspecialchars($p['nama_siswa'] ?? '-') ?></td>
                        <td><?= htmlspecialchars($p['kelas'] ?? '-') ?></td>
                        <td class="text-left"><?= htmlspecialchars($p['jenis_pelanggaran']) ?></td>
                        <td><strong><?= $p['poin'] ?></strong></td>
                        <td><span class="badge <?= $klasifikasiClass ?>"><?= $klasifikasi ?></span></td>
                        <td><span class="badge <?= $statusClass ?>"><?= $p['status'] ?></span></td>
                        <td><?= $dialihkan ?></td>
                        <td><?= htmlspecialchars($p['nama_guru_pelapor'] ?? '-') ?></td>
                        <td>
                            <div class="action-buttons">
                                <a href="detail_pelanggaran.php?id=<?= $p['id'] ?>" class="action-btn view" title="Detail">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <?php if ($p['status'] == 'Aktif'): ?>
                                <a href="penanganan_pelanggaran.php?id=<?= $p['id'] ?>" class="action-btn handle" title="Tangani">
                                    <i class="fas fa-hand-holding-heart"></i>
                                </a>
                                <?php endif; ?>
                                <?php if ($p['status'] == 'Aktif' && $p['status_alihkan'] != 'ya'): ?>
                                <a href="alihkan_pelanggaran.php?id=<?= $p['id'] ?>" class="action-btn transfer" title="Alihkan ke Wali Kelas">
                                    <i class="fas fa-share-alt"></i>
                                </a>
                                <?php endif; ?>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="12" class="no-data">
                            <i class="fas fa-folder-open"></i>
                            <p>Tidak ada data pelanggaran</p>
                        </td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <!-- Export Buttons -->
    <div class="footer-buttons">
        <a href="dashboard_guru_piket.php" class="primary">
            <i class="fas fa-chart-pie"></i> Dashboard
        </a>
        <a href="laporkan_pelanggaran.php" class="success">
            <i class="fas fa-plus-circle"></i> Lapor Pelanggaran
        </a>
        <a href="penanganan_pelanggaran.php">
            <i class="fas fa-hand-holding-heart"></i> Penanganan
        </a>
        <a href="rekap_pelanggaran.php">
            <i class="fas fa-file-alt"></i> Rekap Bulanan
        </a>
        <a href="cetak_semua_pelanggaran.php?kelas=<?= $kelas ?>&status=<?= $status ?>&dari_tanggal=<?= $dari_tanggal ?>&sampai_tanggal=<?= $sampai_tanggal ?>" target="_blank" class="primary">
            <i class="fas fa-print"></i> Cetak
        </a>
    </div>
</body>
</html>