Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-611.26.1.el9_7.x86_64

PHP Version:

8.4.15

User:

u892747680

Directory:

/home/u892747680/domains/sisteminformasic.com/public_html/upzisprnumliwang

Free Space:

9.98 TB

🔧 Quick Actions

✏️ Editing: muzakki.php

<?php
require_once 'includes/config.php';
$pageTitle = 'Data Muzakki';
$pageDesc  = 'Manajemen data pembayar zakat';

$msg   = '';
$error = '';

/* ════════════════════════════════════════════════
   POST HANDLER
════════════════════════════════════════════════ */
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';

if ($action === 'tambah') {
        $nama = sanitize($_POST['nama'] ?? '');
        if (empty($nama)) {
            $error = 'Nama lengkap wajib diisi.';
        } else {
            $cek = $pdo->prepare("SELECT COUNT(*) FROM muzakki WHERE LOWER(TRIM(nama)) = LOWER(?)");
            $cek->execute([$nama]);
            if ((int)$cek->fetchColumn() > 0) {
                $error = 'Muzakki dengan nama <strong>' . htmlspecialchars($nama) . '</strong> sudah terdaftar.';
            } else {
                try {
                    $kode = generateKode('MZK', 'muzakki', 'kode');
                    $stmt = $pdo->prepare(
                        "INSERT INTO muzakki (kode, nama, nik, alamat, rt_rw, no_hp, pekerjaan)
                         VALUES (:kode,:nama,:nik,:alamat,:rt_rw,:no_hp,:pekerjaan)"
                    );
                    $stmt->execute([
                        'kode'      => $kode,
                        'nama'      => $nama,
                        'nik'       => sanitize($_POST['nik']       ?? ''),
                        'alamat'    => sanitize($_POST['alamat']    ?? 'Mliwang'),
                        'rt_rw'     => sanitize($_POST['rt_rw']     ?? ''),
                        'no_hp'     => sanitize($_POST['no_hp']     ?? ''),
                        'pekerjaan' => sanitize($_POST['pekerjaan'] ?? ''),
                    ]);
                    $msg = 'Data muzakki <strong>' . htmlspecialchars($nama) . '</strong> berhasil ditambahkan.';
                } catch (Exception $e) {
                    $error = 'Gagal menyimpan data: ' . $e->getMessage();
                }
            }
        }

} elseif ($action === 'edit') {
        $kode = sanitize($_POST['kode'] ?? '');
        $nama = sanitize($_POST['nama'] ?? '');
        if (empty($nama) || empty($kode)) {
            $error = 'Nama dan kode wajib diisi.';
        } else {
            try {
                $stmt = $pdo->prepare(
                    "UPDATE muzakki SET nama=:nama, nik=:nik, alamat=:alamat,
                     rt_rw=:rt_rw, no_hp=:no_hp, pekerjaan=:pekerjaan
                     WHERE kode=:kode"
                );
                $stmt->execute([
                    'kode'      => $kode,
                    'nama'      => $nama,
                    'nik'       => sanitize($_POST['nik']       ?? ''),
                    'alamat'    => sanitize($_POST['alamat']    ?? ''),
                    'rt_rw'     => sanitize($_POST['rt_rw']     ?? ''),
                    'no_hp'     => sanitize($_POST['no_hp']     ?? ''),
                    'pekerjaan' => sanitize($_POST['pekerjaan'] ?? ''),
                ]);
                $msg = 'Data muzakki berhasil diperbarui.';
            } catch (Exception $e) {
                $error = 'Gagal memperbarui data: ' . $e->getMessage();
            }
        }

} elseif ($action === 'hapus') {
        try {
            $pdo->prepare("DELETE FROM muzakki WHERE id = ?")->execute([$_POST['id']]);
            $msg = 'Data muzakki berhasil dihapus.';
        } catch (Exception $e) {
            $error = 'Gagal menghapus data: ' . $e->getMessage();
        }

/* ── GENERATE KODE SATU (klik kolom kode) ── */
    } elseif ($action === 'generate_kode_satu') {
        $id = (int)($_POST['id'] ?? 0);
        if ($id) {
            try {
                $newKode = generateKode('MZK', 'muzakki', 'kode');
                $pdo->prepare("UPDATE muzakki SET kode=? WHERE id=? AND (kode IS NULL OR kode='')")
                    ->execute([$newKode, $id]);
                // Kembalikan JSON jika request AJAX
                if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
                    strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
                    header('Content-Type: application/json');
                    echo json_encode(['ok' => true, 'kode' => $newKode]);
                    exit;
                }
                $msg = 'Kode <strong>' . htmlspecialchars($newKode) . '</strong> berhasil dibuat.';
            } catch (Exception $e) {
                if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
                    strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
                    header('Content-Type: application/json');
                    echo json_encode(['ok' => false, 'msg' => $e->getMessage()]);
                    exit;
                }
                $error = 'Gagal generate kode: ' . $e->getMessage();
            }
        }

/* ── GENERATE KODE MASSAL ── */
    } elseif ($action === 'generate_kode_massal') {
        try {
            $tanpaKode = $pdo->query(
                "SELECT id FROM muzakki WHERE kode IS NULL OR kode = ''"
            )->fetchAll(PDO::FETCH_COLUMN);
            $count = 0;
            foreach ($tanpaKode as $mid) {
                $newKode = generateKode('MZK', 'muzakki', 'kode');
                $pdo->prepare("UPDATE muzakki SET kode=? WHERE id=?")->execute([$newKode, $mid]);
                $count++;
            }
            $msg = "Berhasil generate kode untuk <strong>$count</strong> muzakki.";
        } catch (Exception $e) {
            $error = 'Gagal generate kode: ' . $e->getMessage();
        }
    }
}

/* ════════════════════════════════════════════════
   GET DATA
════════════════════════════════════════════════ */
$search        = sanitize($_GET['search'] ?? '');
$filter_rt     = sanitize($_GET['rt']     ?? '');
$filter_status = sanitize($_GET['status'] ?? '');
$page          = max(1, (int)($_GET['page'] ?? 1));
$perPage       = 15;
$offset        = ($page - 1) * $perPage;

$where = []; $params = [];
if ($search) {
    $where[]     = "(nama LIKE :s OR no_hp LIKE :s OR kode LIKE :s OR rt_rw LIKE :s OR alamat LIKE :s)";
    $params['s'] = "%$search%";
}
if ($filter_rt) {
    $where[]      = "rt_rw = :rt";
    $params['rt'] = $filter_rt;
}
if ($filter_status === 'tanpa_kode') {
    $where[] = "(kode IS NULL OR kode='')";
}
$whereClause = $where ? "WHERE " . implode(' AND ', $where) : "";

try {
    $rtList = $pdo->query(
        "SELECT DISTINCT rt_rw FROM muzakki WHERE rt_rw IS NOT NULL AND rt_rw != '' ORDER BY rt_rw ASC"
    )->fetchAll(PDO::FETCH_COLUMN);

$totalStmt = $pdo->prepare("SELECT COUNT(*) FROM muzakki $whereClause");
    $totalStmt->execute($params);
    $total = (int)$totalStmt->fetchColumn();

$stmt = $pdo->prepare(
        "SELECT * FROM muzakki $whereClause ORDER BY rt_rw ASC, nama ASC LIMIT $perPage OFFSET $offset"
    );
    $stmt->execute($params);
    $muzakkiList = $stmt->fetchAll();
    $totalPages  = max(1, (int)ceil($total / $perPage));

$tanpaKodeCount = (int)$pdo->query(
        "SELECT COUNT(*) FROM muzakki WHERE kode IS NULL OR kode = ''"
    )->fetchColumn();

$stmtAll = $pdo->prepare("SELECT * FROM muzakki $whereClause ORDER BY rt_rw ASC, nama ASC");
    $stmtAll->execute($params);
    $muzakkiAll = $stmtAll->fetchAll();

$stats_total = $total;
    $stats_by_rt = [];
    foreach ($muzakkiAll as $m) {
        $rt = $m['rt_rw'] ?: 'Tidak diketahui';
        $stats_by_rt[$rt] = ($stats_by_rt[$rt] ?? 0) + 1;
    }

} catch (Exception $e) {
    $muzakkiList = $muzakkiAll = [];
    $total = 0; $totalPages = 1; $rtList = [];
    $stats_total = 0; $stats_by_rt = [];
    $tanpaKodeCount = 0;
    $error = 'Gagal memuat data muzakki: ' . $e->getMessage();
}

$editData = null;
if (isset($_GET['edit'])) {
    $stmt = $pdo->prepare("SELECT * FROM muzakki WHERE id = ?");
    $stmt->execute([$_GET['edit']]);
    $editData = $stmt->fetch();
}

$fields_to_decode = ['nama', 'nik', 'alamat', 'pekerjaan'];
foreach ([$muzakkiList, $muzakkiAll] as &$list) {
    foreach ($list as &$item) {
        foreach ($fields_to_decode as $f)
            if (isset($item[$f])) $item[$f] = htmlspecialchars_decode($item[$f], ENT_QUOTES);
    }
}
unset($list, $item);
if ($editData)
    foreach ($fields_to_decode as $f)
        if (isset($editData[$f])) $editData[$f] = htmlspecialchars_decode($editData[$f], ENT_QUOTES);

include 'includes/header.php';
?>

/* ═══════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════ */
.alert-mzk {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border-radius: var(--radius-md);
    margin-bottom: 12px; font-size: 13.5px; line-height: 1.5;
    border: 1px solid transparent;
}
.alert-mzk i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-mzk.success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.alert-mzk.danger  { background: #fef2f2; border-color: #fecaca; color: #dc2626; }

/* ── Banner hanya untuk "tanpa kode" ── */
.notif-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: var(--radius-md);
    font-size: 13px; border: 1px solid transparent;
    margin-bottom: 14px; width: 100%; box-sizing: border-box;
}
.notif-pill.blue { background: var(--blue-bg); border-color: var(--blue-border); color: var(--blue-text); }
.notif-pill.blue i { color: #3b82f6; }
.notif-pill a, .notif-pill button {
    color: inherit; font-weight: 700;
    text-decoration: underline; text-underline-offset: 2px;
}
.notif-pill button { background: none; border: none; cursor: pointer; font-size: 13px; padding: 0; }

/* ═══════════════════════════════════════════════
   FORM CARD
═══════════════════════════════════════════════ */
.form-card-mzk {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    margin-bottom: 20px; overflow: hidden;
}
.form-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 22px; border-bottom: 1px solid var(--border-light);
    background: var(--green-lighter);
}
.form-card-header .icon-wrap {
    width: 36px; height: 36px; background: var(--green-primary);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; flex-shrink: 0;
}
.form-card-header h3 { font-size: 15px; font-weight: 700; color: var(--green-dark); margin: 0; }
.form-card-body { padding: 22px; }

.form-grid-mzk {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.form-grid-mzk .full { grid-column: 1 / -1; }

.form-label-mzk {
    display: block; font-size: 12.5px; font-weight: 600;
    color: var(--text-main); margin-bottom: 6px; letter-spacing: .01em;
}
.form-label-mzk small { font-weight: 400; color: var(--text-light); font-size: 11.5px; }
.form-control-mzk {
    width: 100%; box-sizing: border-box; padding: 9px 12px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13.5px; color: var(--text-main); background: #fff;
    transition: border-color .15s, box-shadow .15s; outline: none; font-family: inherit;
}
.form-control-mzk:focus {
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}
textarea.form-control-mzk { resize: vertical; min-height: 72px; }

.rtrw-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.rtrw-chip {
    padding: 4px 10px; font-size: 11.5px; font-weight: 600;
    border: 1.5px solid #b2e5c8; border-radius: 20px;
    background: #e6f9ee; color: var(--green-mid);
    cursor: pointer; transition: all .12s; font-family: inherit;
}
.rtrw-chip:hover { background: var(--green-primary); color: #fff; border-color: var(--green-primary); }

.form-actions {
    display: flex; gap: 10px; margin-top: 20px;
    padding-top: 16px; border-top: 1px solid var(--border-light);
}

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn-mzk {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1.5px solid transparent; transition: all .15s;
    font-family: inherit; text-decoration: none; white-space: nowrap;
}
.btn-mzk.primary   { background: var(--green-primary); color: #fff; border-color: var(--green-primary); }
.btn-mzk.primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn-mzk.secondary { background: #fff; color: var(--text-main); border-color: var(--border); }
.btn-mzk.secondary:hover { border-color: var(--green-primary); color: var(--green-primary); }
.btn-mzk.outline   { background: transparent; color: var(--green-mid); border-color: #b2e5c8; }
.btn-mzk.outline:hover { background: var(--green-lighter); }
.btn-mzk.danger-outline { background: transparent; color: #dc2626; border-color: #fca5a5; }
.btn-mzk.danger-outline:hover { background: #fef2f2; }
.btn-mzk.sm { padding: 5px 10px; font-size: 12px; }
.btn-mzk.icon-only { padding: 6px 8px; }

/* ═══════════════════════════════════════════════
   TABLE CARD
═══════════════════════════════════════════════ */
.table-card-mzk {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    overflow: hidden;
}
.table-card-header {
    padding: 16px 22px; border-bottom: 1px solid var(--border-light);
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; background: #fff;
}
.table-card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.table-card-title h3 { font-size: 15px; font-weight: 700; color: var(--text-main); margin: 0; }
.count-badge {
    font-size: 12px; font-weight: 600;
    background: var(--border-light); color: var(--text-muted);
    padding: 3px 10px; border-radius: 20px;
}
.info-badge {
    font-size: 11.5px; font-weight: 600;
    background: var(--blue-bg); color: var(--blue-text);
    border: 1px solid var(--blue-border); padding: 3px 10px; border-radius: 20px;
}

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-bar .search-box { position: relative; }
.filter-bar .search-box i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--text-light); font-size: 12px; pointer-events: none;
}
.filter-bar .search-input {
    padding: 8px 12px 8px 32px; border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); font-size: 13px; outline: none;
    transition: border-color .15s; width: 210px; font-family: inherit; color: var(--text-main);
}
.filter-bar .search-input:focus { border-color: var(--green-primary); }
.filter-select {
    padding: 8px 12px; border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); font-size: 13px; outline: none;
    font-family: inherit; color: var(--text-main); background: #fff;
    cursor: pointer; transition: border-color .15s;
}
.filter-select:focus { border-color: var(--green-primary); }

/* Table */
.table-wrap-mzk { overflow-x: auto; }
table.mzk-table { width: 100%; border-collapse: collapse; }
table.mzk-table thead tr {
    background: var(--green-lighter);
    border-bottom: 2px solid #bbf7d0;
}
table.mzk-table thead th {
    padding: 11px 14px; font-size: 11.5px; font-weight: 700;
    color: var(--green-dark); text-transform: uppercase;
    letter-spacing: .05em; white-space: nowrap; text-align: left;
}
table.mzk-table thead th.c { text-align: center; }
table.mzk-table tbody tr {
    border-bottom: 1px solid var(--border-light); transition: background .1s;
}
table.mzk-table tbody tr:last-child { border-bottom: none; }
table.mzk-table tbody tr:hover { background: var(--green-lighter); }
table.mzk-table tbody td {
    padding: 11px 14px; font-size: 13px;
    color: var(--text-main); vertical-align: middle;
}
table.mzk-table tbody td.c { text-align: center; }

/* ═══════════════════════════════════════════════
   KODE CHIP — klik untuk generate
═══════════════════════════════════════════════ */
.kode-chip {
    font-family: 'Courier New', monospace;
    font-size: 11.5px; font-weight: 700;
    background: var(--border-light); color: #374151;
    padding: 3px 8px; border-radius: 4px;
    white-space: nowrap; display: inline-block;
}

/* Tombol klik-untuk-generate-kode */
.btn-gen-kode {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; font-size: 11.5px; font-weight: 600;
    border: 1.5px dashed #93c5fd; border-radius: var(--radius-sm);
    background: var(--blue-bg); color: #1d4ed8;
    cursor: pointer; transition: all .15s; font-family: inherit;
    white-space: nowrap;
}
.btn-gen-kode:hover {
    background: #dbeafe; border-color: #3b82f6; border-style: solid;
}
.btn-gen-kode.loading {
    opacity: .65; cursor: wait; pointer-events: none;
}
/* Animasi spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spin-icon { animation: spin .7s linear infinite; display: inline-block; }

/* Tooltip hint */
.btn-gen-kode[title] { position: relative; }

/* Feedback sukses setelah generate */
.kode-chip.just-created {
    animation: popIn .35s ease;
}
@keyframes popIn {
    0%  { transform: scale(.8); opacity: 0; }
    60% { transform: scale(1.08); }
    100%{ transform: scale(1); opacity: 1; }
}

/* badge-auto */
.badge-auto {
    font-size: 10.5px; background: var(--blue-bg); color: var(--blue-text);
    border: 1px solid var(--blue-border); border-radius: 20px;
    padding: 1px 8px; margin-left: 5px; vertical-align: middle; white-space: nowrap;
}

/* Status dots */
.status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600;
    padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.status-pill.lengkap { background: #f0fdf4; color: #16a34a; }
.status-pill.belum   { background: #fffbeb; color: #d97706; }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* RT badge */
.rt-pill {
    display: inline-block; font-size: 11.5px; font-weight: 700;
    background: var(--green-lighter); color: var(--green-mid);
    border: 1px solid #bbf7d0; padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}

/* Empty state */
.empty-state { text-align: center; padding: 56px 20px; color: var(--text-light); }
.empty-state i { font-size: 40px; display: block; margin-bottom: 12px; color: #d1d5db; }
.empty-state p { font-size: 14px; margin: 0; }

/* Pagination */
.pagination-mzk {
    display: flex; gap: 4px; justify-content: center; align-items: center;
    padding: 18px 22px; border-top: 1px solid var(--border-light); flex-wrap: wrap;
}
.page-btn-mzk {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
    border: 1.5px solid var(--border); color: var(--text-muted);
    text-decoration: none; transition: all .12s; background: #fff;
}
.page-btn-mzk:hover { border-color: var(--green-primary); color: var(--green-primary); background: var(--green-lighter); }
.page-btn-mzk.active { background: var(--green-primary); border-color: var(--green-primary); color: #fff; }

/* ═══════════════════════════════════════════════
   PRINT STYLES
═══════════════════════════════════════════════ */
@media print {
    body * { visibility: hidden; }
    #print-muzakki, #print-muzakki * { visibility: visible; }
    #print-muzakki { position: absolute; top: 0; left: 0; width: 100%; background: #fff; }
    @page { size: A4 portrait; margin: 14mm 14mm 18mm 14mm; }
    .print-doc { font-family: 'Times New Roman', Times, serif; font-size: 10.5pt; color: #000; background: #fff; }
    .p-kop { display: flex; align-items: center; gap: 14px; border-bottom: 3px double #1a7a47; padding-bottom: 10px; margin-bottom: 14px; }
    .p-kop img { height: 68px; width: auto; }
    .p-kop-text { flex: 1; text-align: center; }
    .p-kop-text .org { font-size: 17pt; font-weight: 700; color: #1a7a47; margin: 0; }
    .p-kop-text .sub { font-size: 9.5pt; color: #555; margin: 2px 0 0; }
    .p-kop-text .adr { font-size: 8.5pt; color: #777; margin: 3px 0 0; }
    .p-title { text-align: center; margin: 8px 0 12px; }
    .p-title h2 { font-size: 13pt; font-weight: 700; text-decoration: underline; text-transform: uppercase; margin: 0 0 3px; }
    .p-title p { font-size: 9.5pt; margin: 2px 0; color: #333; }
    .p-info { display: flex; justify-content: space-between; font-size: 9pt; color: #444; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; padding: 4px 0; margin-bottom: 12px; }
    .p-filter-row { font-size: 9pt; color: #444; margin-bottom: 10px; padding: 4px 8px; background: #f8f8f8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; border-left: 3px solid #1a7a47; }
    .p-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 14px; }
    .p-sum-card { border: 1.5px solid #ccc; border-radius: 5px; padding: 7px 10px; text-align: center; }
    .p-sum-card.green { border-color: #1a7a47; } .p-sum-card.teal { border-color: #117a65; }
    .sc-lbl { font-size: 7.5pt; color: #666; margin-bottom: 2px; }
    .sc-val { font-size: 10pt; font-weight: 700; }
    .p-sum-card.green .sc-val { color: #1a7a47; } .p-sum-card.teal .sc-val { color: #117a65; }
    .p-compo-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
    .p-compo-title { font-size: 10pt; font-weight: 700; color: #1a7a47; border-left: 3px solid #1a7a47; padding-left: 7px; margin-bottom: 6px; }
    .p-compo-table { width: 100%; border-collapse: collapse; font-size: 9pt; }
    .p-compo-table thead tr { background-color: #1a7a47 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .p-compo-table thead th { padding: 5px 7px; color: #fff; font-weight: 700; border: 1px solid #1a7a47; }
    .p-compo-table thead th.r { text-align: right; }
    .p-compo-table tbody td { padding: 4px 7px; border: 1px solid #d0d0d0; }
    .p-compo-table tbody td.r { text-align: right; font-weight: 700; color: #1a7a47; }
    .p-compo-table tbody tr:nth-child(even) { background-color: #f5faf7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .p-compo-table .row-total td { background-color: #d4edda !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-weight: 700; border-top: 2px solid #1a7a47; }
    .p-section-title { font-size: 11pt; font-weight: 700; color: #1a7a47; border-left: 4px solid #1a7a47; padding-left: 8px; margin: 16px 0 8px; }
    .p-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin-bottom: 14px; }
    .p-table thead { display: table-header-group; }
    .p-table thead tr { background-color: #1a7a47 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .p-table thead th { padding: 7px 8px; color: #fff; font-weight: 700; border: 1px solid #1a7a47; text-align: left; }
    .p-table thead th.c { text-align: center; }
    .p-table tbody tr { page-break-inside: avoid; }
    .p-table tbody tr:nth-child(even) { background-color: #f5faf7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .p-table tbody td { padding: 6px 8px; border: 1px solid #d0d0d0; vertical-align: middle; }
    .p-table tbody td.c { text-align: center; }
    .p-table .row-group td { background-color: #e8f5e9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 8.5pt; font-weight: 700; color: #1a7a47; padding: 3px 8px; border-top: 1.5px solid #a8d5b5; }
    .p-table .row-total td { background-color: #d4edda !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-weight: 700; border-top: 2px solid #1a7a47; }
    .p-table .row-total td.c { text-align: center; color: #1a7a47; }
    .p-table .row-grand-total td { background-color: #1a7a47 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; text-align: right; font-weight: 700; color: #fff; padding: 8px; font-size: 10.5pt; }
    .p-table .row-grand-total td.c { text-align: center; }
    .badge-auto, .btn-gen-kode, .notif-pill { display: none !important; }
    .no-print  { display: none !important; }
    .print-only { display: block !important; }
}
@media screen {
    .print-only { display: none; }
    #print-muzakki { display: none; }
}
</style>

<div class="no-print">

<?php if ($msg): ?>
<div class="alert-mzk success"><i class="fas fa-check-circle"></i> <span><?= $msg ?></span></div>
<?php endif; ?>
<?php if ($error): ?>
<div class="alert-mzk danger"><i class="fas fa-exclamation-circle"></i> <span><?= $error ?></span></div>
<?php endif; ?>

<?php if ($tanpaKodeCount > 0): ?>
<div class="notif-pill blue">
  <i class="fas fa-bolt"></i>
  <span>
    <strong><?= $tanpaKodeCount ?> muzakki</strong> belum memiliki kode.
    <a href="muzakki.php?status=tanpa_kode">Lihat →</a>
    &nbsp;·&nbsp;
    <form method="POST" style="display:inline"
          onsubmit="return confirm('Generate kode untuk semua <?= $tanpaKodeCount ?> muzakki sekaligus?')">
      <input type="hidden" name="action" value="generate_kode_massal">
      <button type="submit">Generate semua sekaligus →</button>
    </form>
  </span>
</div>
<?php endif; ?>

<div class="form-card-mzk" id="form-muzakki">
  <div class="form-card-header">
    <div class="icon-wrap">
      <i class="fas fa-user-<?= $editData ? 'edit' : 'plus' ?>"></i>
    </div>
    <h3><?= $editData ? 'Edit Data Muzakki' : 'Tambah Muzakki Baru' ?></h3>
  </div>
  <div class="form-card-body">
    <form method="POST">
      <input type="hidden" name="action" value="<?= $editData ? 'edit' : 'tambah' ?>">
      <?php if ($editData): ?>
      <input type="hidden" name="kode" value="<?= htmlspecialchars($editData['kode'] ?? '') ?>">
      <?php endif; ?>

<div class="form-group">
          <label class="form-label-mzk">Nama Lengkap <span style="color:#dc2626">*</span></label>
          <input type="text" name="nama" class="form-control-mzk" required
                 placeholder="Nama lengkap muzakki"
                 value="<?= htmlspecialchars($editData['nama'] ?? '') ?>">
        </div>

<div class="form-group">
          <label class="form-label-mzk">NIK <small>(opsional)</small></label>
          <input type="text" name="nik" class="form-control-mzk"
                 placeholder="Nomor Induk Kependudukan"
                 value="<?= htmlspecialchars($editData['nik'] ?? '') ?>">
        </div>

<div class="form-group">
          <label class="form-label-mzk">No. HP / WhatsApp <small>(opsional)</small></label>
          <input type="text" name="no_hp" class="form-control-mzk"
                 placeholder="08xxxxxxxxxx"
                 value="<?= htmlspecialchars($editData['no_hp'] ?? '') ?>">
        </div>

<div class="form-group">
          <label class="form-label-mzk">Pekerjaan <small>(opsional)</small></label>
          <input type="text" name="pekerjaan" class="form-control-mzk"
                 placeholder="Pekerjaan / profesi"
                 value="<?= htmlspecialchars($editData['pekerjaan'] ?? '') ?>">
        </div>

<div class="form-group">
          <label class="form-label-mzk">RT/RW <small>(ketik bebas atau klik cepat)</small></label>
          <input type="text" name="rt_rw" id="form_rt_rw" class="form-control-mzk"
                 placeholder="Contoh: 001/002"
                 value="<?= htmlspecialchars($editData['rt_rw'] ?? '') ?>"
                 autocomplete="off">
          <?php if (!empty($rtList)): ?>
          <div class="rtrw-chips">
            <?php foreach ($rtList as $rt): ?>
            <button type="button" class="rtrw-chip"
                    onclick="setRtRwForm('<?= htmlspecialchars($rt, ENT_QUOTES) ?>')">
              <?= htmlspecialchars($rt) ?>
            </button>
            <?php endforeach; ?>
          </div>
          <?php endif; ?>
        </div>

<div class="form-group full">
          <label class="form-label-mzk">Alamat Lengkap</label>
          <textarea name="alamat" class="form-control-mzk"
                    placeholder="Contoh: Mliwang RT 01 RW 02"><?= htmlspecialchars($editData['alamat'] ?? 'Mliwang') ?></textarea>
        </div>

</div>

<div class="form-actions">
        <button type="submit" class="btn-mzk primary">
          <i class="fas fa-save"></i>
          <?= $editData ? 'Simpan Perubahan' : 'Tambah Muzakki' ?>
        </button>
        <?php if ($editData): ?>
        <a href="muzakki.php" class="btn-mzk secondary">Batal</a>
        <?php endif; ?>
      </div>
    </form>
  </div>
</div>

<div class="table-card-mzk">

<div class="table-card-header">
    <div class="table-card-title">
      <h3><i class="fas fa-users" style="color:var(--green-primary);margin-right:4px"></i> Data Muzakki</h3>
      <span class="count-badge"><?= number_format($total) ?> data</span>
      <?php if ($tanpaKodeCount > 0): ?>
      <span class="info-badge">
        <i class="fas fa-bolt"></i> <?= $tanpaKodeCount ?> belum berkode
      </span>
      <?php endif; ?>
    </div>

<div class="filter-bar">
      <form method="GET" style="display:contents">
        <div class="search-box">
          <i class="fas fa-search"></i>
          <input type="text" name="search" class="search-input"
                 placeholder="Cari nama, kode, RT/RW..."
                 value="<?= htmlspecialchars($search) ?>">
        </div>
        <select name="rt" class="filter-select" onchange="this.form.submit()">
          <option value="">Semua RT/RW</option>
          <?php foreach ($rtList as $rt): ?>
          <option value="<?= htmlspecialchars($rt) ?>" <?= $filter_rt===$rt?'selected':''?>>
            RT/RW <?= htmlspecialchars($rt) ?>
          </option>
          <?php endforeach; ?>
        </select>
        <select name="status" class="filter-select" onchange="this.form.submit()">
          <option value="">Semua Status</option>
          <option value="tanpa_kode" <?= $filter_status==='tanpa_kode'?'selected':''?>>🔑 Belum Berkode</option>
        </select>
        <button type="submit" class="btn-mzk primary sm">
          <i class="fas fa-search"></i> Cari
        </button>
        <button type="button" onclick="doPrint()" class="btn-mzk secondary sm">
          <i class="fas fa-print"></i> Cetak
        </button>
        <?php if ($search || $filter_rt || $filter_status): ?>
        <a href="muzakki.php" class="btn-mzk secondary sm">
          <i class="fas fa-times"></i> Reset
        </a>
        <?php endif; ?>
      </form>
    </div>
  </div>

<div class="table-wrap-mzk">
    <table class="mzk-table">
      <thead>
        <tr>
          <th class="c" style="width:48px">No</th>
          <th style="width:130px">Kode</th>
          <th>Nama</th>
          <th class="c" style="width:82px">RT/RW</th>
          <th style="width:118px">No. HP</th>
          <th style="width:110px">Pekerjaan</th>
          <th class="c" style="width:80px">Terdaftar</th>
          <th class="c" style="width:90px">Aksi</th>
        </tr>
      </thead>
      <tbody>
        <?php if (empty($muzakkiList)): ?>
        <tr>
          <td colspan="8">
            <div class="empty-state">
              <i class="fas fa-inbox"></i>
              <p>Belum ada data muzakki<?= ($search || $filter_rt || $filter_status) ? ' yang sesuai filter.' : '.' ?></p>
            </div>
          </td>
        </tr>
        <?php else:
          foreach ($muzakkiList as $i => $m):
            $isAutoAdded = empty($m['kode']);
        ?>
        <tr>
          <td class="c" style="font-size:12px;color:var(--text-light)"><?= $offset + $i + 1 ?></td>

<td>
            <?php if (!empty($m['kode'])): ?>
              <span class="kode-chip"><?= htmlspecialchars($m['kode']) ?></span>
            <?php else: ?>
              
              <button type="button"
                      class="btn-gen-kode"
                      id="genbtn-<?= $m['id'] ?>"
                      title="Klik untuk otomatis buat kode MZK"
                      onclick="generateKode(<?= $m['id'] ?>, this)">
                <i class="fas fa-key" style="font-size:11px"></i>
                Buat Kode
              </button>
            <?php endif; ?>
          </td>

<td>
            <div style="display:flex;align-items:center;flex-wrap:wrap;gap:4px">
              <strong style="font-size:13.5px"><?= htmlspecialchars($m['nama']) ?></strong>
              <?php if ($isAutoAdded): ?>
              <span class="badge-auto"><i class="fas fa-bolt" style="font-size:9px"></i> transaksi</span>
              <?php endif; ?>
            </div>
            <?php if (!empty($m['alamat'])): ?>
            <div style="font-size:11.5px;color:var(--text-light);margin-top:2px">
              <?= htmlspecialchars($m['alamat']) ?>
            </div>
            <?php endif; ?>
          </td>

<td class="c">
            <div style="display:flex;gap:5px;justify-content:center">
              <a href="muzakki.php?edit=<?= $m['id'] ?>#form-muzakki"
                 class="btn-mzk outline sm icon-only" title="Edit data">
                <i class="fas fa-edit"></i>
              </a>
              <form method="POST" style="display:inline"
                    onsubmit="return confirm('Hapus muzakki <?= htmlspecialchars($m['nama'], ENT_QUOTES) ?>?')">
                <input type="hidden" name="action" value="hapus">
                <input type="hidden" name="id"     value="<?= $m['id'] ?>">
                <button type="submit" class="btn-mzk danger-outline sm icon-only" title="Hapus">
                  <i class="fas fa-trash"></i>
                </button>
              </form>
            </div>
          </td>
        </tr>
        <?php endforeach; endif; ?>
      </tbody>
    </table>
  </div>

<?php if ($totalPages > 1): ?>
  <div class="pagination-mzk">
    <?php for ($p = 1; $p <= $totalPages; $p++): ?>
    <a href="?page=<?= $p ?>&search=<?= urlencode($search) ?>&rt=<?= urlencode($filter_rt) ?>&status=<?= urlencode($filter_status) ?>"
       class="page-btn-mzk <?= $p === $page ? 'active' : '' ?>">
      <?= $p ?>
    </a>
    <?php endfor; ?>
  </div>
  <?php endif; ?>

</div>
</div>

<div id="print-muzakki">
<div class="print-doc">
  <div class="p-kop">
    <?php if (!empty($settings['logo_path']) && file_exists($settings['logo_path'])): ?>
    <img src="<?= htmlspecialchars($settings['logo_path']) ?>" alt="Logo">
    <?php endif; ?>
    <div class="p-kop-text">
      <p class="org">UPZIS PRNU MLIWANG</p>
      <p class="sub">Unit Pengelola Zakat, Infaq dan Shodaqoh — Nahdlatul Ulama</p>
      <p class="adr">Desa Mliwang, Kecamatan Kerek, Kabupaten Tuban, Jawa Timur</p>
    </div>
  </div>
  <div class="p-title">
    <h2>Daftar Data Muzakki</h2>
    <p>Pembayar Zakat Terdaftar UPZIS PRNU Mliwang</p>
  </div>
  <div class="p-info">
    <span>Dicetak: <?= date('d M Y, H:i') ?> WIB</span>
    <span>Total: <?= number_format($stats_total) ?> muzakki</span>
    <span>Sistem Informasi UPZIS PRNU Mliwang</span>
  </div>
  <?php if ($search || $filter_rt || $filter_status): ?>
  <div class="p-filter-row">
    <strong>Filter:</strong>
    <?php
      $fp = [];
      if ($search)        $fp[] = 'Pencarian: "' . htmlspecialchars($search) . '"';
      if ($filter_rt)     $fp[] = 'RT/RW: ' . htmlspecialchars($filter_rt);
      if ($filter_status) $fp[] = 'Status: Belum Berkode';
      echo implode(' &nbsp;·&nbsp; ', $fp);
    ?>
  </div>
  <?php endif; ?>
  <?php
    $topRt = ''; $topRtCount = 0;
    foreach ($stats_by_rt as $r => $v) { if ($v > $topRtCount) { $topRtCount = $v; $topRt = $r; } }
  ?>
  <div class="p-summary">
    <div class="p-sum-card green">
      <div class="sc-lbl">Total Muzakki</div>
      <div class="sc-val"><?= number_format($stats_total) ?> orang</div>
    </div>
    <div class="p-sum-card teal">
      <div class="sc-lbl">RT/RW Terbanyak</div>
      <div class="sc-val"><?= $topRt ? 'RT/RW '.$topRt.' ('.$topRtCount.' org)' : '-' ?></div>
    </div>
  </div>
  <?php if (!empty($stats_by_rt)): ?>
  <div class="p-compo-grid">
    <div>
      <div class="p-compo-title">Distribusi per RT/RW</div>
      <table class="p-compo-table">
        <thead><tr><th>RT/RW</th><th class="r">Jumlah</th><th class="r">%</th></tr></thead>
        <tbody>
          <?php arsort($stats_by_rt); foreach ($stats_by_rt as $r => $v):
            $pct = $stats_total > 0 ? round($v / $stats_total * 100, 1) : 0; ?>
          <tr>
            <td><?= htmlspecialchars($r) ?></td>
            <td class="r"><?= $v ?></td>
            <td class="r"><?= $pct ?>%</td>
          </tr>
          <?php endforeach; ?>
          <tr class="row-total">
            <td><strong>TOTAL</strong></td>
            <td class="r"><strong><?= $stats_total ?></strong></td>
            <td class="r"><strong>100%</strong></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <?php endif; ?>
  <div class="p-section-title">Daftar Lengkap Muzakki</div>
  <?php
    $grouped = [];
    foreach ($muzakkiAll as $m) { $rt = $m['rt_rw'] ?: 'Tidak Diketahui'; $grouped[$rt][] = $m; }
    ksort($grouped); $globalNo = 1;
  ?>
  <table class="p-table">
    <thead>
      <tr>
        <th style="width:4%" class="c">No</th>
        <th style="width:10%">Kode</th>
        <th style="width:22%">Nama Lengkap</th>
        <th style="width:9%" class="c">RT/RW</th>
        <th style="width:13%">No. HP</th>
        <th style="width:16%">Pekerjaan</th>
        <th style="width:26%">Alamat</th>
      </tr>
    </thead>
    <tbody>
      <?php if (empty($muzakkiAll)): ?>
      <tr><td colspan="7" style="text-align:center;padding:16px">Tidak ada data muzakki.</td></tr>
      <?php else: foreach ($grouped as $rt => $members): ?>
      <tr class="row-group">
        <td colspan="7">RT/RW <?= htmlspecialchars($rt) ?> &nbsp;—&nbsp; <?= count($members) ?> orang</td>
      </tr>
      <?php foreach ($members as $m): ?>
      <tr>
        <td class="c"><?= $globalNo++ ?></td>
        <td style="font-family:monospace;font-size:8.5pt;color:#555"><?= htmlspecialchars($m['kode'] ?: '-') ?></td>
        <td style="font-weight:600"><?= htmlspecialchars($m['nama']) ?></td>
        <td class="c" style="font-size:9pt"><?= htmlspecialchars($m['rt_rw'] ?: '-') ?></td>
        <td style="font-size:9pt"><?= htmlspecialchars($m['no_hp'] ?: '-') ?></td>
        <td><?= htmlspecialchars($m['pekerjaan'] ?: '-') ?></td>
        <td style="font-size:8.5pt;color:#555"><?= htmlspecialchars($m['alamat'] ?: '-') ?></td>
      </tr>
      <?php endforeach; ?>
      <tr class="row-total">
        <td colspan="6" style="text-align:right">Subtotal RT/RW <?= htmlspecialchars($rt) ?></td>
        <td class="c"><?= count($members) ?> orang</td>
      </tr>
      <?php endforeach; ?>
      <tr class="row-grand-total">
        <td colspan="6">TOTAL KESELURUHAN</td>
        <td class="c"><?= $stats_total ?> orang</td>
      </tr>
      <?php endif; ?>
    </tbody>
  </table>
</div>
</div>

/* ════════════════════════════════════════════════
   GENERATE KODE — klik sekali, tanpa reload
════════════════════════════════════════════════ */
function generateKode(id, btn) {
    // Ubah tombol ke state loading
    btn.classList.add('loading');
    btn.innerHTML = '<i class="fas fa-circle-notch spin-icon" style="font-size:11px"></i> Membuat...';

const form = new FormData();
    form.append('action', 'generate_kode_satu');
    form.append('id', id);

fetch(window.location.pathname, {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: form
    })
    .then(r => r.json())
    .then(data => {
        if (data.ok) {
            // Ganti tombol dengan chip kode
            const chip = document.createElement('span');
            chip.className = 'kode-chip just-created';
            chip.textContent = data.kode;
            btn.replaceWith(chip);

// Update badge jumlah tanpa kode di header tabel (jika ada)
            updateTanpaKodeBadge(-1);
        } else {
            btn.classList.remove('loading');
            btn.innerHTML = '<i class="fas fa-key" style="font-size:11px"></i> Buat Kode';
            alert('Gagal membuat kode: ' + (data.msg || 'Coba lagi.'));
        }
    })
    .catch(() => {
        btn.classList.remove('loading');
        btn.innerHTML = '<i class="fas fa-key" style="font-size:11px"></i> Buat Kode';
        alert('Terjadi kesalahan jaringan. Coba lagi.');
    });
}

/* Kurangi angka badge "belum berkode" di header tabel & banner */
function updateTanpaKodeBadge(delta) {
    // Badge di header tabel
    const badge = document.querySelector('.info-badge');
    if (badge) {
        const match = badge.textContent.match(/(\d+)/);
        if (match) {
            const newVal = Math.max(0, parseInt(match[1]) + delta);
            if (newVal === 0) {
                badge.remove();
                // Sembunyikan banner atas juga
                const banner = document.querySelector('.notif-pill.blue');
                if (banner) banner.style.display = 'none';
            } else {
                badge.innerHTML = '<i class="fas fa-bolt"></i> ' + newVal + ' belum berkode';
                // Update angka di banner
                const banner = document.querySelector('.notif-pill.blue strong');
                if (banner) banner.textContent = newVal + ' muzakki';
            }
        }
    }
}

/* Cetak */
function doPrint() {
    const pa = document.getElementById('print-muzakki');
    pa.style.display = 'block';
    window.print();
    pa.style.display = 'none';
}
</script>

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

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: muzakki.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation