<?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_id = 0;
$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_id = $guru['id'];
    $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 daftar siswa untuk dropdown
$siswa_list = [];
$query_siswa = "SELECT id, nisn, nama, kelas FROM siswa WHERE status = 'aktif' ORDER BY kelas, nama";
$result_siswa = mysqli_query($conn, $query_siswa);
if ($result_siswa) {
    while ($row = mysqli_fetch_assoc($result_siswa)) {
        $siswa_list[] = $row;
    }
}

// Proses form submit
$message = '';
$message_type = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $siswa_id = mysqli_real_escape_string($conn, $_POST['siswa_id']);
    $tanggal = mysqli_real_escape_string($conn, $_POST['tanggal']);
    $jenis_pelanggaran = mysqli_real_escape_string($conn, $_POST['jenis_pelanggaran']);
    $keterangan = mysqli_real_escape_string($conn, $_POST['keterangan']);
    $poin = (int)$_POST['poin'];
    
    $errors = [];
    
    if (empty($siswa_id)) $errors[] = "Siswa harus dipilih";
    if (empty($tanggal)) $errors[] = "Tanggal harus diisi";
    if (empty($jenis_pelanggaran)) $errors[] = "Jenis pelanggaran harus diisi";
    if (empty($keterangan)) $errors[] = "Keterangan harus diisi";
    if ($poin <= 0) $errors[] = "Poin harus diisi dengan angka positif";
    
    // Upload bukti foto
    $bukti_foto = '';
    if (isset($_FILES['bukti_foto']) && $_FILES['bukti_foto']['error'] === UPLOAD_ERR_OK) {
        $file_tmp = $_FILES['bukti_foto']['tmp_name'];
        $file_name = $_FILES['bukti_foto']['name'];
        $file_size = $_FILES['bukti_foto']['size'];
        $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
        
        $allowed_ext = ['jpg', 'jpeg', 'png', 'gif'];
        if (!in_array($file_ext, $allowed_ext)) {
            $errors[] = "Format file harus JPG, JPEG, PNG, atau GIF";
        }
        
        if ($file_size > 2 * 1024 * 1024) {
            $errors[] = "Ukuran file maksimal 2MB";
        }
        
        if (empty($errors)) {
            $new_filename = 'bukti_' . time() . '_' . rand(1000, 9999) . '.' . $file_ext;
            $upload_path = 'uploads/bukti_pelanggaran/' . $new_filename;
            
            if (!file_exists('uploads/bukti_pelanggaran')) {
                mkdir('uploads/bukti_pelanggaran', 0777, true);
            }
            
            if (move_uploaded_file($file_tmp, $upload_path)) {
                $bukti_foto = $upload_path;
            } else {
                $errors[] = "Gagal mengupload file";
            }
        }
    }
    
    if (empty($errors)) {
        $created_at = date('Y-m-d H:i:s');
        
        $query = "INSERT INTO pelanggaran (siswa_id, guru_id, tanggal, jenis_pelanggaran, keterangan, poin, bukti_foto, status, created_at) 
                  VALUES ('$siswa_id', '$guru_id', '$tanggal', '$jenis_pelanggaran', '$keterangan', '$poin', '$bukti_foto', 'Aktif', '$created_at')";
        
        if (mysqli_query($conn, $query)) {
            $message = "Pelanggaran berhasil dilaporkan";
            $message_type = "success";
            header("refresh:2;url=dashboard_guru_piket.php");
        } else {
            $message = "Error: " . mysqli_error($conn);
            $message_type = "error";
        }
    } else {
        $message = implode("\n", $errors);
        $message_type = "error";
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lapor 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 - Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Select2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #f3f4f6;
            color: #1f2937;
            line-height: 1.5;
            min-height: 100vh;
        }

        /* Header */
        .header {
            background: white;
            border-bottom: 1px solid #e5e7eb;
            padding: 1rem 2rem;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .header-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo h2 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #111827;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .logo h2 i {
            color: #ef4444;
        }

        .logo p {
            font-size: 0.875rem;
            color: #6b7280;
            margin-top: 0.25rem;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 1rem;
            background: #f9fafb;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
        }

        .user-avatar {
            width: 2.5rem;
            height: 2.5rem;
            background: #ef4444;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }

        .user-details {
            line-height: 1.4;
        }

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

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

        /* Main Container */
        .main-container {
            max-width: 1400px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        /* Page Header */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .page-title h1 {
            font-size: 2rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.25rem;
        }

        .page-title p {
            color: #6b7280;
        }

        .badge-danger {
            background: #ef4444;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            font-size: 0.875rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

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

        .alert.success {
            border-left: 4px solid #10b981;
        }

        .alert.error {
            border-left: 4px solid #ef4444;
        }

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

        .alert.success i {
            color: #10b981;
        }

        .alert.error i {
            color: #ef4444;
        }

        /* Card */
        .card {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .card-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid #e5e7eb;
            background: #f9fafb;
        }

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

        .card-header h3 i {
            color: #ef4444;
        }

        .card-body {
            padding: 2rem;
        }

        .card-footer {
            padding: 1.5rem 2rem;
            border-top: 1px solid #e5e7eb;
            background: #f9fafb;
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
        }

        /* Form Grid */
        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .form-group {
            margin-bottom: 0;
        }

        .form-group.full-width {
            grid-column: span 2;
        }

        .form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
        }

        .form-label .required {
            color: #ef4444;
            margin-left: 0.25rem;
        }

        .form-control {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid #d1d5db;
            border-radius: 0.5rem;
            font-size: 1rem;
            font-family: 'Inter', sans-serif;
            transition: all 0.2s;
        }

        .form-control:focus {
            outline: none;
            border-color: #ef4444;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
        }

        textarea.form-control {
            resize: vertical;
            min-height: 120px;
        }

        /* Select2 Custom */
        .select2-container--default {
            width: 100% !important;
        }

        .select2-container--default .select2-selection--single {
            border: 1px solid #d1d5db !important;
            border-radius: 0.5rem !important;
            height: 50px;
            padding: 0.5rem 0;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 50px;
            padding-left: 1rem;
            font-size: 1rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 48px;
            right: 1rem;
        }

        .select2-dropdown {
            border: 1px solid #d1d5db;
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
        }

        .select2-results__option {
            padding: 0.75rem 1rem;
        }

        .select2-results__option--highlighted {
            background: #ef4444 !important;
        }

        /* Poin Badges */
        .poin-badges {
            display: flex;
            gap: 0.75rem;
            margin-top: 0.75rem;
            flex-wrap: wrap;
        }

        .poin-badge {
            padding: 0.5rem 1.25rem;
            border-radius: 2rem;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
        }

        .poin-badge.ringan {
            background: #d1fae5;
            color: #065f46;
            border-color: #a7f3d0;
        }

        .poin-badge.sedang {
            background: #fef3c7;
            color: #92400e;
            border-color: #fde68a;
        }

        .poin-badge.berat {
            background: #fee2e2;
            color: #991b1b;
            border-color: #fecaca;
        }

        .poin-badge:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
        }

        /* File Upload */
        .file-upload {
            border: 2px dashed #d1d5db;
            border-radius: 0.5rem;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: #f9fafb;
        }

        .file-upload:hover {
            border-color: #ef4444;
            background: #fef2f2;
        }

        .file-upload i {
            font-size: 2.5rem;
            color: #9ca3af;
            margin-bottom: 0.5rem;
        }

        .file-upload p {
            font-size: 1rem;
            color: #374151;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        .file-upload small {
            font-size: 0.875rem;
            color: #6b7280;
        }

        .preview-container {
            margin-top: 1.5rem;
            text-align: center;
            background: #f9fafb;
            border-radius: 0.5rem;
            padding: 1rem;
        }

        .preview-image {
            max-width: 300px;
            max-height: 300px;
            border-radius: 0.5rem;
            border: 1px solid #e5e7eb;
            margin-bottom: 1rem;
        }

        /* Buttons */
        .btn {
            padding: 0.75rem 2rem;
            border-radius: 0.5rem;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            text-decoration: none;
        }

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

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

        .btn-secondary {
            background: white;
            border-color: #d1d5db;
            color: #374151;
        }

        .btn-secondary:hover {
            background: #f9fafb;
            border-color: #9ca3af;
        }

        .btn-danger {
            background: white;
            border-color: #fecaca;
            color: #dc2626;
        }

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

        /* Bottom Navigation */
        .bottom-nav {
            margin-top: 2rem;
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            background: white;
            padding: 1rem;
            border-radius: 0.75rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .nav-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            background: #f9fafb;
            border-radius: 0.5rem;
            color: #374151;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            transition: all 0.2s;
        }

        .nav-link:hover {
            background: #f3f4f6;
            color: #111827;
        }

        .nav-link i {
            color: #ef4444;
        }

        .nav-link.active {
            background: #ef4444;
            color: white;
        }

        .nav-link.active i {
            color: white;
        }

        /* Info Card */
        .info-card {
            background: #f0f9ff;
            border-left: 4px solid #3b82f6;
            border-radius: 0.5rem;
            padding: 1rem 1.5rem;
            margin-bottom: 2rem;
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }

        .info-card i {
            color: #3b82f6;
            font-size: 1.25rem;
        }

        .info-card-content {
            flex: 1;
        }

        .info-card-title {
            font-weight: 600;
            color: #1e40af;
            margin-bottom: 0.25rem;
        }

        .info-card-text {
            color: #2563eb;
            font-size: 0.875rem;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .form-grid {
                grid-template-columns: 1fr;
            }

            .form-group.full-width {
                grid-column: span 1;
            }
        }

        @media (max-width: 768px) {
            .header {
                padding: 1rem;
            }

            .header-content {
                flex-direction: column;
                gap: 1rem;
                align-items: flex-start;
            }

            .main-container {
                padding: 0 1rem;
                margin: 1rem auto;
            }

            .page-title h1 {
                font-size: 1.5rem;
            }

            .card-header,
            .card-body,
            .card-footer {
                padding: 1.25rem;
            }

            .card-footer {
                flex-direction: column;
            }

            .card-footer .btn {
                width: 100%;
                justify-content: center;
            }

            .bottom-nav {
                flex-direction: column;
            }

            .nav-link {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .poin-badges {
                flex-direction: column;
            }

            .poin-badge {
                width: 100%;
                text-align: center;
            }

            .file-upload {
                padding: 1.5rem;
            }

            .file-upload i {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="header-content">
            <div class="logo">
                <h2>
                    <i class="fas fa-plus-circle"></i>
                    Lapor Pelanggaran
                </h2>
                <p>Sistem Pelanggaran Siswa</p>
            </div>
            
            <div class="user-info">
                <div class="user-avatar">
                    <?php echo strtoupper(substr($guru_nama, 0, 1)); ?>
                </div>
                <div class="user-details">
                    <div class="name"><?php echo htmlspecialchars($guru_nama); ?></div>
                    <div class="role">Guru Piket</div>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Container -->
    <div class="main-container">
        <!-- Page Header -->
        <div class="page-header">
            <div class="page-title">
                <h1>Lapor Pelanggaran</h1>
                <p>Form laporan pelanggaran siswa</p>
            </div>
            <div class="badge-danger">
                <i class="fas fa-exclamation-triangle"></i>
                Wajib diisi
            </div>
        </div>

        <!-- Alert -->
        <?php if (!empty($message)): ?>
        <div class="alert <?php echo $message_type; ?>">
            <i class="fas fa-<?php echo ($message_type == 'success') ? 'check-circle' : 'exclamation-circle'; ?>"></i>
            <span><?php echo nl2br(htmlspecialchars($message)); ?></span>
        </div>
        <?php endif; ?>

        <!-- Info Card -->
        <div class="info-card">
            <i class="fas fa-info-circle"></i>
            <div class="info-card-content">
                <div class="info-card-title">Petunjuk Pengisian</div>
                <div class="info-card-text">
                    Field dengan tanda <span class="fw-bold">*</span> wajib diisi. 
                    Bukti foto maksimal 2MB dengan format JPG, JPEG, PNG, atau GIF.
                </div>
            </div>
        </div>

        <!-- Form Card -->
        <div class="card">
            <div class="card-header">
                <h3>
                    <i class="fas fa-edit"></i>
                    Form Laporan Pelanggaran
                </h3>
            </div>
            
            <form method="POST" enctype="multipart/form-data" id="formPelanggaran">
                <div class="card-body">
                    <div class="form-grid">
                        <!-- Siswa -->
                        <div class="form-group">
                            <label class="form-label">
                                Siswa <span class="required">*</span>
                            </label>
                            <select class="form-control select2" name="siswa_id" required>
                                <option value="">Pilih siswa</option>
                                <?php 
                                $current_kelas = '';
                                foreach ($siswa_list as $siswa): 
                                    if ($current_kelas != $siswa['kelas']) {
                                        if ($current_kelas != '') echo '</optgroup>';
                                        $current_kelas = $siswa['kelas'];
                                        echo '<optgroup label="Kelas ' . $current_kelas . '">';
                                    }
                                ?>
                                <option value="<?php echo $siswa['id']; ?>">
                                    <?php echo htmlspecialchars($siswa['nama']); ?>
                                </option>
                                <?php endforeach; ?>
                                <?php if ($current_kelas != '') echo '</optgroup>'; ?>
                            </select>
                        </div>

                        <!-- Tanggal -->
                        <div class="form-group">
                            <label class="form-label">
                                Tanggal Kejadian <span class="required">*</span>
                            </label>
                            <input type="date" class="form-control" name="tanggal" value="<?php echo date('Y-m-d'); ?>" required>
                        </div>

                        <!-- Jenis Pelanggaran -->
                        <div class="form-group">
                            <label class="form-label">
                                Jenis Pelanggaran <span class="required">*</span>
                            </label>
                            <select class="form-control" name="jenis_pelanggaran" id="jenisPelanggaran" required>
                                <option value="">Pilih jenis pelanggaran</option>
                                <option value="Terlambat">Terlambat</option>
                                <option value="Tidak Membawa Buku">Tidak Membawa Buku</option>
                                <option value="Tidak Membawa PR">Tidak Membawa PR</option>
                                <option value="Membuang Sampah Sembarangan">Membuang Sampah Sembarangan</option>
                                <option value="Berkelahi">Berkelahi</option>
                                <option value="Merokok">Merokok</option>
                                <option value="Membawa HP">Membawa HP</option>
                                <option value="Membolos">Membolos</option>
                                <option value="Berpakaian Tidak Rapi">Berpakaian Tidak Rapi</option>
                                <option value="Rambut Tidak Rapi">Rambut Tidak Rapi</option>
                                <option value="Lainnya">Lainnya</option>
                            </select>
                        </div>

                        <!-- Poin -->
                        <div class="form-group">
                            <label class="form-label">
                                Poin Pelanggaran <span class="required">*</span>
                            </label>
                            <input type="number" class="form-control" name="poin" id="poin" min="1" max="100" value="10" required>
                            <div class="poin-badges">
                                <span class="poin-badge ringan" onclick="setPoin(10)">Ringan (1-24)</span>
                                <span class="poin-badge sedang" onclick="setPoin(25)">Sedang (25-49)</span>
                                <span class="poin-badge berat" onclick="setPoin(50)">Berat (50+)</span>
                            </div>
                        </div>

                        <!-- Keterangan (Full Width) -->
                        <div class="form-group full-width">
                            <label class="form-label">
                                Keterangan <span class="required">*</span>
                            </label>
                            <textarea class="form-control" name="keterangan" placeholder="Jelaskan detail pelanggaran yang terjadi..." required></textarea>
                        </div>

                        <!-- Bukti Foto (Full Width) -->
                        <div class="form-group full-width">
                            <label class="form-label">
                                Bukti Foto
                            </label>
                            <div class="file-upload" onclick="document.getElementById('buktiFoto').click()">
                                <i class="fas fa-cloud-upload-alt"></i>
                                <p>Klik untuk upload foto bukti</p>
                                <small>Format: JPG, JPEG, PNG, GIF (Maks. 2MB)</small>
                            </div>
                            <input type="file" class="d-none" name="bukti_foto" id="buktiFoto" accept="image/*">
                            <div id="previewContainer" class="preview-container" style="display: none;">
                                <img id="previewImage" class="preview-image" src="#" alt="Preview">
                                <button type="button" class="btn btn-danger" onclick="hapusPreview()">
                                    <i class="fas fa-trash"></i>
                                    Hapus Foto
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card-footer">
                    <a href="dashboard_guru_piket.php" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i>
                        Kembali
                    </a>
                    <button type="button" class="btn btn-danger" onclick="resetForm()">
                        <i class="fas fa-redo-alt"></i>
                        Reset
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i>
                        Simpan Laporan
                    </button>
                </div>
            </form>
        </div>

        <!-- Bottom Navigation -->
        <div class="bottom-nav">
            <a href="dashboard_guru_piket.php" class="nav-link">
                <i class="fas fa-chart-pie"></i>
                Dashboard
            </a>
            <a href="laporkan_pelanggaran.php" class="nav-link active">
                <i class="fas fa-plus-circle"></i>
                Lapor Pelanggaran
            </a>
            <a href="penanganan_pelanggaran.php" class="nav-link">
                <i class="fas fa-hand-holding-heart"></i>
                Penanganan
            </a>
            <a href="semua_pelanggaran.php" class="nav-link">
                <i class="fas fa-list"></i>
                Semua Pelanggaran
            </a>
            <a href="rekap_pelanggaran.php" class="nav-link">
                <i class="fas fa-file-alt"></i>
                Rekap Bulanan
            </a>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    
    <script>
        $(document).ready(function() {
            // Initialize Select2
            $('.select2').select2({
                width: '100%',
                placeholder: 'Pilih siswa',
                allowClear: true
            });
            
            // Auto-fill poin based on violation type
            $('#jenisPelanggaran').change(function() {
                const jenis = $(this).val();
                const poinMap = {
                    'Terlambat': 10,
                    'Tidak Membawa Buku': 15,
                    'Tidak Membawa PR': 15,
                    'Membuang Sampah Sembarangan': 20,
                    'Berpakaian Tidak Rapi': 10,
                    'Rambut Tidak Rapi': 10,
                    'Membolos': 30,
                    'Membawa HP': 25,
                    'Merokok': 50,
                    'Berkelahi': 75,
                    'Lainnya': 10
                };
                
                if (poinMap[jenis]) {
                    $('#poin').val(poinMap[jenis]);
                }
            });
            
            // Image preview
            $('#buktiFoto').change(function() {
                const file = this.files[0];
                if (file) {
                    if (file.size > 2 * 1024 * 1024) {
                        alert('File terlalu besar. Maksimal 2MB.');
                        $(this).val('');
                        return;
                    }
                    
                    const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
                    if (!validTypes.includes(file.type)) {
                        alert('Format file harus JPG, JPEG, PNG, atau GIF!');
                        $(this).val('');
                        return;
                    }
                    
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#previewImage').attr('src', e.target.result);
                        $('#previewContainer').slideDown();
                    };
                    reader.readAsDataURL(file);
                }
            });
            
            // Form validation
            $('#formPelanggaran').submit(function(e) {
                const siswa = $('select[name="siswa_id"]').val();
                const tanggal = $('input[name="tanggal"]').val();
                const jenis = $('select[name="jenis_pelanggaran"]').val();
                const keterangan = $('textarea[name="keterangan"]').val();
                const poin = $('#poin').val();
                
                if (!siswa || !tanggal || !jenis || !keterangan || !poin) {
                    e.preventDefault();
                    alert('Semua field yang bertanda * wajib diisi!');
                    return false;
                }
                
                if (poin < 1 || poin > 100) {
                    e.preventDefault();
                    alert('Poin harus antara 1 - 100');
                    return false;
                }
                
                return confirm('Apakah data yang diisi sudah benar?');
            });
        });
        
        // Set poin function
        function setPoin(poin) {
            $('#poin').val(poin);
        }
        
        // Remove preview function
        function hapusPreview() {
            $('#buktiFoto').val('');
            $('#previewContainer').slideUp();
        }
        
        // Reset form function
        function resetForm() {
            if (confirm('Reset form? Semua data yang belum disimpan akan hilang.')) {
                $('#formPelanggaran')[0].reset();
                $('.select2').val('').trigger('change');
                hapusPreview();
                $('#poin').val(10);
            }
        }
    </script>
</body>
</html>