417 lines
20 KiB
PHP
417 lines
20 KiB
PHP
<?php
|
|
require_once 'koneksi.php';
|
|
cekLogin();
|
|
|
|
$page = 'ibadah';
|
|
$pageTitle = 'Rumah Ibadah';
|
|
$pageSubtitle = 'Titik Distribusi Bantuan';
|
|
|
|
$data = $conn->query("SELECT ri.*, u.nama_lengkap AS dibuat_user FROM rumah_ibadah ri LEFT JOIN users u ON ri.dibuat_oleh=u.id ORDER BY ri.created_at DESC");
|
|
$total = $data->num_rows;
|
|
|
|
include 'includes/sidebar.php';
|
|
?>
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
|
|
|
|
<style>
|
|
/* ═══ PALET WARNA MODERN & ELEGAN ═══ */
|
|
:root {
|
|
--primary-blue: #3b82f6;
|
|
--secondary-indigo: #4f46e5;
|
|
--dark-slate: #0f172a;
|
|
--soft-muted: #64748b;
|
|
--border-color: #e2e8f0;
|
|
--card-bg: #ffffff;
|
|
}
|
|
|
|
.ibadah-container {
|
|
font-family: 'Inter', sans-serif;
|
|
color: var(--dark-slate);
|
|
}
|
|
|
|
/* Header Halaman Premium */
|
|
.premium-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 28px;
|
|
background: linear-gradient(to right, #ffffff, #f8fafc);
|
|
padding: 20px 24px;
|
|
border-radius: 14px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.premium-header h2 { font-size: 22px; font-weight: 800; color: var(--dark-slate); margin-bottom: 4px; letter-spacing: -0.5px; }
|
|
.premium-header p { font-size: 13px; color: var(--soft-muted); font-weight: 500; }
|
|
|
|
/* Tombol-tombol Modern */
|
|
.btn-premium {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-indigo) 100%);
|
|
color: #ffffff;
|
|
border: none;
|
|
padding: 11px 20px;
|
|
border-radius: 10px;
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.25s;
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
|
|
}
|
|
.btn-premium:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35); }
|
|
|
|
/* Grid Layout Rumah Ibadah */
|
|
.ibadah-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* Desain Kartu Premium (Luxury Card) */
|
|
.ibadah-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02);
|
|
position: relative;
|
|
}
|
|
.ibadah-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.06), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
|
|
border-color: #cbd5e1;
|
|
}
|
|
|
|
/* Pita Atas Kartu Sesuai Kategori */
|
|
.card-top-bar { height: 4px; width: 100%; background: var(--primary-blue); }
|
|
.bar-masjid { background: linear-gradient(90deg, #10b981, #059669); }
|
|
.bar-gereja { background: linear-gradient(90deg, #3b82f6, #1d4ed8); }
|
|
.bar-lainnya { background: linear-gradient(90deg, #f59e0b, #d97706); }
|
|
|
|
.card-body-content { padding: 22px; }
|
|
|
|
/* Baris Atas Kartu (Judul & Aksi) */
|
|
.card-header-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
|
|
.ibadah-title { font-size: 15.5px; font-weight: 700; color: var(--dark-slate); line-height: 1.4; margin-bottom: 6px; }
|
|
|
|
/* Badges Modern */
|
|
.badge-premium {
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
padding: 3px 10px;
|
|
border-radius: 6px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.badge-masjid { background: rgba(16, 185, 129, 0.1); color: #10b981; }
|
|
.badge-gereja { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
|
|
.badge-lainnya { background: rgba(245, 158, 11, 0.1); color: #d97706; }
|
|
|
|
/* Tombol Aksi Mikro */
|
|
.btn-action-trigger {
|
|
width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e2e8f0;
|
|
background: #f8fafc; color: var(--soft-muted); cursor: pointer; display: inline-flex;
|
|
align-items: center; justify-content: center; transition: all 0.2s;
|
|
}
|
|
.btn-action-trigger:hover { background: #edf2f7; color: var(--dark-slate); }
|
|
.btn-delete:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }
|
|
|
|
/* Info Alamat & Kontak */
|
|
.info-address { font-size: 12.5px; color: #475569; margin-bottom: 16px; line-height: 1.6; min-height: 40px; }
|
|
.info-contact { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--soft-muted); margin-bottom: 16px; font-weight: 500; }
|
|
.info-contact i { color: #94a3b8; }
|
|
|
|
/* Grid Parameter 3 Kolom */
|
|
.param-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
background: #f8fafc;
|
|
padding: 12px 6px;
|
|
border-radius: 12px;
|
|
border: 1px solid #f1f5f9;
|
|
margin-bottom: 14px;
|
|
}
|
|
.param-item { text-align: center; }
|
|
.param-val { font-size: 18px; font-weight: 800; line-height: 1.2; }
|
|
.param-val.v-kuota { color: #2563eb; }
|
|
.param-val.v-radius { color: #059669; }
|
|
.param-val.v-bantuan { color: #7c3aed; }
|
|
.param-lbl { font-size: 10px; font-weight: 600; color: var(--soft-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.3px; }
|
|
|
|
/* Bar Koordinat Geospasial */
|
|
.geo-footer {
|
|
display: flex; align-items: center; gap: 6px;
|
|
font-size: 11px; color: #94a3b8; font-family: monospace;
|
|
border-top: 1px dashed #e2e8f0; padding-top: 12px; font-weight: 500;
|
|
}
|
|
|
|
/* State Jika Data Kosong */
|
|
.empty-state-card {
|
|
grid-column: 1/-1; text-align: center; padding: 60px 30px; background: #ffffff;
|
|
border-radius: 16px; border: 1px dashed #cbd5e1; color: var(--soft-muted);
|
|
}
|
|
.empty-state-card i { font-size: 40px; color: #cbd5e1; margin-bottom: 14px; }
|
|
.empty-state-card h4 { font-size: 16px; font-weight: 700; color: var(--dark-slate); margin-bottom: 4px; }
|
|
|
|
/* ═══ MODAL DESIGN MODERN (GLASSMORPHISM OVERLAY) ═══ */
|
|
.modal-overlay {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px);
|
|
display: none; align-items: center; justify-content: center; z-index: 9999;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.modal-box {
|
|
background: #ffffff; width: 100%; max-width: 600px; border-radius: 16px;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); overflow: hidden;
|
|
animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
|
|
|
|
.modal-head { padding: 20px 24px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
|
|
.modal-head h3 { font-size: 16px; font-weight: 700; color: var(--dark-slate); }
|
|
.btn-close { background: none; border: none; font-size: 18px; color: var(--soft-muted); cursor: pointer; transition: color 0.2s; }
|
|
.btn-close:hover { color: #ef4444; }
|
|
|
|
.modal-body { padding: 24px; max-height: 75vh; overflow-y: auto; }
|
|
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
.form-group { margin-bottom: 16px; }
|
|
.form-group label { display: block; font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 6px; }
|
|
.form-control {
|
|
width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border-color);
|
|
font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--dark-slate); transition: all 0.2s;
|
|
}
|
|
.form-control:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
|
|
|
|
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; background: #f8fafc; }
|
|
.btn-ghost { background: transparent; border: 1px solid var(--border-color); color: #475569; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.2s; }
|
|
.btn-ghost:hover { background: #f1f5f9; }
|
|
</style>
|
|
|
|
<div class="ibadah-container">
|
|
|
|
<div class="premium-header">
|
|
<div>
|
|
<h2>Rumah Ibadah</h2>
|
|
<p>Total <strong><?= $total ?></strong> titik terdaftar sebagai pusat logistik & distribusi bantuan</p>
|
|
</div>
|
|
<?php if (in_array($_SESSION['role'], ['admin','pengurus'])): ?>
|
|
<button class="btn-premium" onclick="openModal('modalTambah')">
|
|
<i class="fa fa-plus"></i> Tambah Pos Distribusi
|
|
</button>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="ibadah-grid">
|
|
<?php
|
|
$data->data_seek(0);
|
|
while ($r = $data->fetch_assoc()):
|
|
$jmlBantuan = $conn->query("SELECT COUNT(*) AS c FROM bantuan_tersalur WHERE ibadah_id={$r['id']}")->fetch_assoc()['c'];
|
|
|
|
// Klasifikasi style dinamis berdasarkan kategori
|
|
$katLower = strtolower($r['kategori']);
|
|
$barClass = 'bar-lainnya';
|
|
$badgeClass = 'badge-lainnya';
|
|
|
|
if (strpos($katLower, 'masjid') !== false || strpos($katLower, 'musholla') !== false) {
|
|
$barClass = 'bar-masjid'; $badgeClass = 'badge-masjid';
|
|
} elseif (strpos($katLower, 'gereja') !== false) {
|
|
$barClass = 'bar-gereja'; $badgeClass = 'badge-gereja';
|
|
}
|
|
?>
|
|
<div class="ibadah-card">
|
|
<div class="card-top-bar <?= $barClass ?>"></div>
|
|
|
|
<div class="card-body-content">
|
|
<div class="card-header-row">
|
|
<div>
|
|
<div class="ibadah-title"><?= htmlspecialchars($r['nama_ibadah']) ?></div>
|
|
<span class="badge-premium <?= $badgeClass ?>"><i class="fa fa-tag"></i> <?= htmlspecialchars($r['kategori']) ?></span>
|
|
</div>
|
|
|
|
<?php if (in_array($_SESSION['role'],['admin','pengurus'])): ?>
|
|
<div style="display:flex; gap:6px;">
|
|
<button class="btn-action-trigger" onclick='editIbadah(<?= json_encode($r) ?>)' title="Edit Data"><i class="fa fa-pen"></i></button>
|
|
<?php if ($_SESSION['role']==='admin'): ?>
|
|
<button class="btn-action-trigger btn-delete" onclick="hapusIbadah(<?= $r['id'] ?>)" title="Hapus Permanen"><i class="fa fa-trash"></i></button>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="info-address">
|
|
<i class="fa fa-location-dot" style="color: #94a3b8; margin-right: 4px;"></i>
|
|
<?= htmlspecialchars($r['alamat'] ?: 'Alamat lengkap belum dimasukkan.') ?>
|
|
</div>
|
|
|
|
<div class="info-contact">
|
|
<i class="fa fa-user-tie"></i> <span><?= htmlspecialchars($r['nama_pengurus'] ?: '-') ?></span>
|
|
<span style="color:#cbd5e1">•</span>
|
|
<i class="fa fa-phone"></i> <span><?= htmlspecialchars($r['no_telp'] ?: '-') ?></span>
|
|
</div>
|
|
|
|
<div class="param-grid">
|
|
<div class="param-item">
|
|
<div class="param-val v-kuota"><?= $r['kuota_bantuan'] ?></div>
|
|
<div class="param-lbl">Kuota KK</div>
|
|
</div>
|
|
<div class="param-item">
|
|
<div class="param-val v-radius"><?= $r['radius_m'] ?><span style="font-size:10px; font-weight:500;">m</span></div>
|
|
<div class="param-lbl">Radius</div>
|
|
</div>
|
|
<div class="param-item">
|
|
<div class="param-val v-bantuan"><?= $jmlBantuan ?></div>
|
|
<div class="param-lbl">Bantuan</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="geo-footer">
|
|
<i class="fa fa-earth-asia"></i>
|
|
<span><?= number_format((float)$r['lat'],6) ?>, <?= number_format((float)$r['lng'],6) ?></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endwhile; ?>
|
|
|
|
<?php if ($total === 0): ?>
|
|
<div class="empty-state-card">
|
|
<i class="fa fa-mosque"></i>
|
|
<h4>Belum Ada Data Rumah Ibadah</h4>
|
|
<p style="font-size: 13px;">Tambahkan titik distribusi baru melalui tombol di atas atau pakai menu Peta Interaktif.</p>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="modalTambah">
|
|
<div class="modal-box">
|
|
<div class="modal-head">
|
|
<h3>Tambah Rumah Ibadah Baru</h3>
|
|
<button class="btn-close" onclick="closeModal('modalTambah')">✕</button>
|
|
</div>
|
|
<form method="POST" action="proses.php">
|
|
<input type="hidden" name="aksi" value="simpan_ibadah_form">
|
|
<div class="modal-body">
|
|
<div class="form-grid-2">
|
|
<div class="form-group"><label>Nama Lembaga / Tempat Ibadah *</label><input class="form-control" name="nama_ibadah" required placeholder="Masjid Al-Ikhlas..."></div>
|
|
<div class="form-group"><label>Kategori Tempat</label>
|
|
<select class="form-control" name="kategori">
|
|
<option>Masjid</option><option>Musholla</option><option>Gereja</option>
|
|
<option>Pura</option><option>Vihara</option><option>Klenteng</option><option>Lainnya</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group"><label>Alamat Lengkap Kelurahan/RT/RW</label><input class="form-control" name="alamat" placeholder="Jl. Gajahmada No. 12..."></div>
|
|
<div class="form-grid-2">
|
|
<div class="form-group"><label>Nama Ketua Pengurus</label><input class="form-control" name="nama_pengurus" placeholder="H. Muhammad Dani..."></div>
|
|
<div class="form-group"><label>No. Telepon Aktif</label><input class="form-control" name="no_telp" placeholder="0812XXXXXXXX"></div>
|
|
</div>
|
|
<div class="form-grid-2">
|
|
<div class="form-group"><label>Kuota Kapasitas Bantuan (KK)</label><input class="form-control" type="number" name="kuota_bantuan" value="20" min="1"></div>
|
|
<div class="form-group"><label>Radius Jangkauan Efektif (Meter)</label><input class="form-control" type="number" name="radius_m" value="300" min="50" max="5000"></div>
|
|
</div>
|
|
<div class="form-grid-2">
|
|
<div class="form-group"><label>Garis Lintang (Latitude) *</label><input class="form-control" type="number" name="lat" step="any" required placeholder="-0.026300"></div>
|
|
<div class="form-group"><label>Garis Bujur (Longitude) *</label><input class="form-control" type="number" name="lng" step="any" required placeholder="109.342500"></div>
|
|
</div>
|
|
<div style="background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.15); border-radius: 10px; padding: 12px; font-size: 12px; color: #1d4ed8; font-weight: 500;">
|
|
<i class="fa fa-circle-info" style="margin-right:4px;"></i> Petunjuk: Untuk mendapatkan koordinat presisi otomatis, disarankan menginput langsung via klik pin di menu <strong>Peta Distribusi</strong>.
|
|
</div>
|
|
</div>
|
|
<div class="modal-foot">
|
|
<button type="button" class="btn-ghost" onclick="closeModal('modalTambah')">Batalkan</button>
|
|
<button type="submit" class="btn-premium">Simpan Pos Baru</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="modalEdit">
|
|
<div class="modal-box">
|
|
<div class="modal-head">
|
|
<h3>Edit Parameter Rumah Ibadah</h3>
|
|
<button class="btn-close" onclick="closeModal('modalEdit')">✕</button>
|
|
</div>
|
|
<form method="POST" action="proses.php">
|
|
<input type="hidden" name="aksi" value="edit_ibadah">
|
|
<input type="hidden" name="id" id="ei_id">
|
|
<div class="modal-body">
|
|
<div class="form-grid-2">
|
|
<div class="form-group"><label>Nama Lembaga *</label><input class="form-control" name="nama_ibadah" id="ei_nama" required></div>
|
|
<div class="form-group"><label>Kategori</label>
|
|
<select class="form-control" name="kategori" id="ei_kat">
|
|
<option>Masjid</option><option>Musholla</option><option>Gereja</option>
|
|
<option>Pura</option><option>Vihara</option><option>Klenteng</option><option>Lainnya</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group"><label>Alamat Operasional</label><input class="form-control" name="alamat" id="ei_alamat"></div>
|
|
<div class="form-grid-2">
|
|
<div class="form-group"><label>Nama Pengurus PJ</label><input class="form-control" name="nama_pengurus" id="ei_pengurus"></div>
|
|
<div class="form-group"><label>No. Kontak</label><input class="form-control" name="no_telp" id="ei_telp"></div>
|
|
</div>
|
|
<div class="form-grid-2">
|
|
<div class="form-group"><label>Kuota Distribusi (KK)</label><input class="form-control" type="number" name="kuota_bantuan" id="ei_kuota"></div>
|
|
<div class="form-group"><label>Radius Wilayah (Meter)</label><input class="form-control" type="number" name="radius_m" id="ei_radius"></div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-foot">
|
|
<button type="button" class="btn-ghost" onclick="closeModal('modalEdit')">Batal</button>
|
|
<button type="submit" class="btn-premium">Simpan Perubahan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Fungsi Manajemen Navigasi Tampilan Modal
|
|
function openModal(id) {
|
|
const modal = document.getElementById(id);
|
|
modal.style.display = 'flex';
|
|
}
|
|
function closeModal(id) {
|
|
const modal = document.getElementById(id);
|
|
modal.style.display = 'none';
|
|
}
|
|
|
|
// Fungsi Pengisian Otomatis Form Edit dari Data JSON Row Kartu
|
|
function editIbadah(data) {
|
|
document.getElementById('ei_id').value = data.id;
|
|
document.getElementById('ei_nama').value = data.nama_ibadah;
|
|
document.getElementById('ei_kat').value = data.kategori;
|
|
document.getElementById('ei_alamat').value = data.alamat || '';
|
|
document.getElementById('ei_pengurus').value = data.nama_pengurus || '';
|
|
document.getElementById('ei_telp').value = data.no_telp || '';
|
|
document.getElementById('ei_kuota').value = data.kuota_bantuan;
|
|
document.getElementById('ei_radius').value = data.radius_m;
|
|
openModal('modalEdit');
|
|
}
|
|
|
|
// Fungsi Konfirmasi Penghapusan Data Interaktif
|
|
function hapusIbadah(id) {
|
|
if (confirm('Apakah Anda sangat yakin ingin menghapus data pos rumah ibadah ini secara permanen dari sistem?')) {
|
|
window.location.href = 'proses.php?aksi=hapus_ibadah&id=' + id;
|
|
}
|
|
}
|
|
|
|
// Tutup modal secara otomatis ketika pengguna mengklik area luar box modal
|
|
window.onclick = function(event) {
|
|
if (event.target.classList.contains('modal-overlay')) {
|
|
event.target.style.display = 'none';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</div> <?php
|
|
include 'includes/footer.php';
|
|
?>
|