<?php include "koneksi.php"; ?>
<!DOCTYPE html>
<html>
<head>
<title>Pengaduan Siswa</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- AOS -->
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">

<style>
body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #0059ff, #0059ff);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CARD */
.card-modern {
  background: white;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  width: 100%;
  max-width: 450px;
}

/* INPUT */
.form-control {
  border-radius: 10px;
}

/* BUTTON */
.btn {
  border-radius: 10px;
  transition: 0.3s;
}
.btn:hover {
  transform: scale(1.05);
}

/* DARK MODE */
body.dark {
  background: #0f172a;
}
body.dark .card-modern {
  background: #1e293b;
  color: white;
}
</style>
</head>

<body>

<div class="card-modern" data-aos="zoom-in">

<h3 class="text-center mb-4">📝 Pengaduan Siswa</h3>

<form action="simpan_pengaduan.php" method="POST">

<input type="text" id="nama" name="nama" class="form-control mb-3" placeholder="Nama" required>

<input type="text" name="kelas" class="form-control mb-3" placeholder="Kelas" required>

<input type="text" name="konsentrasikeahlian" class="form-control mb-3" placeholder="Konsentrasi Keahlian" required>

<textarea name="masalah" class="form-control mb-3" placeholder="Isi Masalah" required></textarea>

<button type="submit" class="btn btn-primary btn-block">🚀 Kirim Pengaduan</button>
<a href="hal_utama.php" class="btn btn-light btn-block">⬅ Kembali</a>

</form>

<div class="text-center mt-3">
<button onclick="toggleDark()" class="btn btn-dark btn-sm">🌙 Dark Mode</button>
</div>

</div>

<!-- JS -->
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>
AOS.init({ duration: 1000 });
</script>

<script>
// Auto kapital nama
document.getElementById("nama").addEventListener("keyup", function() {
    let val = this.value.toLowerCase();
    this.value = val.charAt(0).toUpperCase() + val.slice(1);
});

// Auto kapital kelas
document.getElementById("kelas").addEventListener("keyup", function() {
    let val = this.value.toLowerCase();
    this.value = val.charAt(0).toUpperCase() + val.slice(1);
});

// Auto kapital Konsentrasi Keahlian
document.getElementById("konsentrasikeahlian").addEventListener("keyup", function() {
    let val = this.value.toLowerCase();
    this.value = val.charAt(0).toUpperCase() + val.slice(1);
});


// DARK MODE
function toggleDark(){
  document.body.classList.toggle("dark");
  localStorage.setItem("darkmode", document.body.classList.contains("dark"));
}

if(localStorage.getItem("darkmode") === "true"){
  document.body.classList.add("dark");
}
</script>

<?php if (isset($_GET['status']) && $_GET['status'] == 'sukses'): ?>
<script>
Swal.fire({
  icon: 'success',
  title: 'Berhasil!',
  text: 'Pengaduan berhasil dikirim',
  timer: 2000,
  showConfirmButton: false
});

if (window.history.replaceState) {
    window.history.replaceState(null, null, window.location.pathname);
}
</script>
<?php endif; ?>

</body>
</html>