<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);

require_once __DIR__.'/../includes/db.php';
require_once __DIR__.'/../includes/auth.php';

date_default_timezone_set('Asia/Makassar');

$act = $_GET['a'] ?? 'list';


/* =========================================================
   FUNGSI BANTU
========================================================= */

function nikah_post($key, $default = '')
{
    return trim((string)($_POST[$key] ?? $default));
}

function nikah_bulan_romawi($bulan)
{
    $romawi = [
        1  => 'I',
        2  => 'II',
        3  => 'III',
        4  => 'IV',
        5  => 'V',
        6  => 'VI',
        7  => 'VII',
        8  => 'VIII',
        9  => 'IX',
        10 => 'X',
        11 => 'XI',
        12 => 'XII'
    ];

    return $romawi[(int)$bulan] ?? '';
}

function nikah_tanggal_valid($tanggal)
{
    if ($tanggal === '') {
        return false;
    }

    $objekTanggal = DateTime::createFromFormat(
        'Y-m-d',
        $tanggal
    );

    return $objekTanggal &&
        $objekTanggal->format('Y-m-d') === $tanggal;
}

function nikah_tanggal_indo($tanggal)
{
    if (!$tanggal) {
        return '-';
    }

    $waktu = strtotime($tanggal);

    if (!$waktu) {
        return '-';
    }

    $bulanIndonesia = [
        1  => 'Januari',
        2  => 'Februari',
        3  => 'Maret',
        4  => 'April',
        5  => 'Mei',
        6  => 'Juni',
        7  => 'Juli',
        8  => 'Agustus',
        9  => 'September',
        10 => 'Oktober',
        11 => 'November',
        12 => 'Desember'
    ];

    return date('j', $waktu)
        .' '
        .$bulanIndonesia[(int)date('n', $waktu)]
        .' '
        .date('Y', $waktu);
}

function nikah_inisial($nama)
{
    $nama = trim((string)$nama);

    if ($nama === '') {
        return '?';
    }

    if (function_exists('mb_substr')) {
        return strtoupper(
            mb_substr($nama, 0, 1, 'UTF-8')
        );
    }

    return strtoupper(substr($nama, 0, 1));
}

function nikah_nomor_otomatis($mysqli, $kodeDesa)
{
    $tahun = (int)date('Y');
    $jumlah = 0;

    $stmt = $mysqli->prepare("
        SELECT COUNT(*) AS total
        FROM surat_nikah
        WHERE YEAR(tanggal_surat) = ?
    ");

    if ($stmt) {
        $stmt->bind_param('i', $tahun);
        $stmt->execute();

        $result = $stmt->get_result();

        if ($result && $row = $result->fetch_assoc()) {
            $jumlah = (int)$row['total'];
        }

        $stmt->close();
    }

    $nomorUrut = $jumlah + 1;

    do {
        $nomor = '474 / '
            .str_pad(
                (string)$nomorUrut,
                3,
                '0',
                STR_PAD_LEFT
            )
            .' / '
            .$kodeDesa
            .' / '
            .nikah_bulan_romawi(date('n'))
            .' / '
            .date('Y');

        $sudahAda = false;

        $cekStmt = $mysqli->prepare("
            SELECT id
            FROM surat_nikah
            WHERE nomor_surat = ?
            LIMIT 1
        ");

        if ($cekStmt) {
            $cekStmt->bind_param('s', $nomor);
            $cekStmt->execute();

            $cekResult = $cekStmt->get_result();

            $sudahAda = $cekResult &&
                $cekResult->num_rows > 0;

            $cekStmt->close();
        }

        if ($sudahAda) {
            $nomorUrut++;
        }
    } while ($sudahAda);

    return $nomor;
}


/* =========================================================
   INFORMASI DESA
========================================================= */

$DESA = 'Mambu';
$KEC  = 'Luyo';
$KAB  = 'Polewali Mandar';
$PROV = 'Sulawesi Barat';
$KODE = 'Ds.M';

$infoResult = $mysqli->query("
    SELECT *
    FROM infografis
    LIMIT 1
");

if ($infoResult && $infoResult->num_rows > 0) {
    $info = $infoResult->fetch_assoc();

    $DESA = trim($info['nama_desa'] ?? '') !== ''
        ? $info['nama_desa']
        : $DESA;

    $KEC = trim($info['kecamatan'] ?? '') !== ''
        ? $info['kecamatan']
        : $KEC;

    $KAB = trim($info['kabupaten'] ?? '') !== ''
        ? $info['kabupaten']
        : $KAB;

    $PROV = trim($info['provinsi'] ?? '') !== ''
        ? $info['provinsi']
        : $PROV;

    $KODE = trim($info['kode_desa'] ?? '') !== ''
        ? $info['kode_desa']
        : $KODE;
}

$nomorSuratOtomatis = nikah_nomor_otomatis(
    $mysqli,
    $KODE
);


/* =========================================================
   HAPUS DATA
========================================================= */

if (
    $act === 'delete' &&
    $_SERVER['REQUEST_METHOD'] === 'POST'
) {
    $id = (int)($_POST['id'] ?? 0);

    if ($id <= 0) {
        header(
            'Location: surat_nikah.php?msg=notfound'
        );
        exit;
    }

    $stmt = $mysqli->prepare("
        DELETE FROM surat_nikah
        WHERE id = ?
    ");

    if (!$stmt) {
        header(
            'Location: surat_nikah.php?msg=error'
        );
        exit;
    }

    $stmt->bind_param('i', $id);

    $berhasil = $stmt->execute();
    $terhapus = $berhasil &&
        $stmt->affected_rows > 0;

    $stmt->close();

    header(
        'Location: surat_nikah.php?msg='
        .($terhapus ? 'deleted' : 'notfound')
    );
    exit;
}


/* =========================================================
   SIMPAN / UPDATE DATA
========================================================= */

$errorText = '';

if (
    $act === 'save' &&
    $_SERVER['REQUEST_METHOD'] === 'POST'
) {
    $id = (int)($_POST['id'] ?? 0);

    $nomor_surat  = nikah_post('nomor_surat');
    $tanggal_surat = nikah_post('tanggal_surat');

    $kantor_desa = nikah_post(
        'kantor_desa',
        $DESA
    );

    $kecamatan = nikah_post(
        'kecamatan',
        $KEC
    );

    $kabupaten = nikah_post(
        'kabupaten',
        $KAB
    );

    $provinsi = nikah_post(
        'provinsi',
        $PROV
    );

    /* Calon Suami */

    $cs_nama = nikah_post('cs_nama');
    $cs_bin = nikah_post('cs_bin');
    $cs_nik = nikah_post('cs_nik');
    $cs_ttl = nikah_post('cs_ttl');
    $cs_kewarganegaraan = nikah_post(
        'cs_kewarganegaraan',
        'WNI'
    );
    $cs_agama = nikah_post(
        'cs_agama',
        'Islam'
    );
    $cs_pekerjaan = nikah_post('cs_pekerjaan');
    $cs_alamat = nikah_post('cs_alamat');

    /* Calon Istri */

    $ci_nama = nikah_post('ci_nama');
    $ci_binti = nikah_post('ci_binti');
    $ci_nik = nikah_post('ci_nik');
    $ci_ttl = nikah_post('ci_ttl');
    $ci_kewarganegaraan = nikah_post(
        'ci_kewarganegaraan',
        'WNI'
    );
    $ci_agama = nikah_post(
        'ci_agama',
        'Islam'
    );
    $ci_pekerjaan = nikah_post('ci_pekerjaan');
    $ci_alamat = nikah_post('ci_alamat');

    /* Ayah */

    $ayah_nama = nikah_post('ayah_nama');
    $ayah_nik = nikah_post('ayah_nik');
    $ayah_ttl = nikah_post('ayah_ttl');
    $ayah_pekerjaan = nikah_post('ayah_pekerjaan');
    $ayah_alamat = nikah_post('ayah_alamat');

    /* Ibu */

    $ibu_nama = nikah_post('ibu_nama');
    $ibu_nik = nikah_post('ibu_nik');
    $ibu_ttl = nikah_post('ibu_ttl');
    $ibu_pekerjaan = nikah_post('ibu_pekerjaan');
    $ibu_alamat = nikah_post('ibu_alamat');

    /* Wali */

    $wali_nama = nikah_post('wali_nama');
    $wali_nik = nikah_post('wali_nik');
    $wali_ttl = nikah_post('wali_ttl');
    $wali_pekerjaan = nikah_post('wali_pekerjaan');
    $wali_alamat = nikah_post('wali_alamat');

    if (
        $nomor_surat === '' ||
        $tanggal_surat === '' ||
        $cs_nama === '' ||
        $ci_nama === ''
    ) {
        $errorText = 'Mohon lengkapi semua data yang wajib diisi.';
        $act = 'form';
    } elseif (!nikah_tanggal_valid($tanggal_surat)) {
        $errorText = 'Format tanggal surat tidak valid.';
        $act = 'form';
    } else {

        /* Periksa nomor surat ganda */

        $nomorGanda = false;

        $cekStmt = $mysqli->prepare("
            SELECT id
            FROM surat_nikah
            WHERE nomor_surat = ?
              AND id <> ?
            LIMIT 1
        ");

        if ($cekStmt) {
            $cekStmt->bind_param(
                'si',
                $nomor_surat,
                $id
            );

            $cekStmt->execute();

            $cekResult = $cekStmt->get_result();

            $nomorGanda = $cekResult &&
                $cekResult->num_rows > 0;

            $cekStmt->close();
        }

        if ($nomorGanda) {
            $errorText = 'Nomor surat sudah digunakan pada data lain.';
            $act = 'form';
        } elseif ($id > 0) {

            /* =================================================
               UPDATE DATA
            ================================================= */

            $dataDitemukan = false;

            $cekDataStmt = $mysqli->prepare("
                SELECT id
                FROM surat_nikah
                WHERE id = ?
                LIMIT 1
            ");

            if ($cekDataStmt) {
                $cekDataStmt->bind_param('i', $id);
                $cekDataStmt->execute();

                $cekDataResult = $cekDataStmt->get_result();

                $dataDitemukan = $cekDataResult &&
                    $cekDataResult->num_rows > 0;

                $cekDataStmt->close();
            }

            if (!$dataDitemukan) {
                header(
                    'Location: surat_nikah.php?msg=notfound'
                );
                exit;
            }

            $stmt = $mysqli->prepare("
                UPDATE surat_nikah
                SET
                    nomor_surat = ?,
                    tanggal_surat = ?,
                    kantor_desa = ?,
                    kecamatan = ?,
                    kabupaten = ?,
                    provinsi = ?,

                    cs_nama = ?,
                    cs_bin = ?,
                    cs_nik = ?,
                    cs_ttl = ?,
                    cs_kewarganegaraan = ?,
                    cs_agama = ?,
                    cs_pekerjaan = ?,
                    cs_alamat = ?,

                    ci_nama = ?,
                    ci_binti = ?,
                    ci_nik = ?,
                    ci_ttl = ?,
                    ci_kewarganegaraan = ?,
                    ci_agama = ?,
                    ci_pekerjaan = ?,
                    ci_alamat = ?,

                    ayah_nama = ?,
                    ayah_nik = ?,
                    ayah_ttl = ?,
                    ayah_pekerjaan = ?,
                    ayah_alamat = ?,

                    ibu_nama = ?,
                    ibu_nik = ?,
                    ibu_ttl = ?,
                    ibu_pekerjaan = ?,
                    ibu_alamat = ?,

                    wali_nama = ?,
                    wali_nik = ?,
                    wali_ttl = ?,
                    wali_pekerjaan = ?,
                    wali_alamat = ?
                WHERE id = ?
            ");

            if ($stmt) {
                $types = str_repeat('s', 37).'i';

                $stmt->bind_param(
                    $types,
                    $nomor_surat,
                    $tanggal_surat,
                    $kantor_desa,
                    $kecamatan,
                    $kabupaten,
                    $provinsi,

                    $cs_nama,
                    $cs_bin,
                    $cs_nik,
                    $cs_ttl,
                    $cs_kewarganegaraan,
                    $cs_agama,
                    $cs_pekerjaan,
                    $cs_alamat,

                    $ci_nama,
                    $ci_binti,
                    $ci_nik,
                    $ci_ttl,
                    $ci_kewarganegaraan,
                    $ci_agama,
                    $ci_pekerjaan,
                    $ci_alamat,

                    $ayah_nama,
                    $ayah_nik,
                    $ayah_ttl,
                    $ayah_pekerjaan,
                    $ayah_alamat,

                    $ibu_nama,
                    $ibu_nik,
                    $ibu_ttl,
                    $ibu_pekerjaan,
                    $ibu_alamat,

                    $wali_nama,
                    $wali_nik,
                    $wali_ttl,
                    $wali_pekerjaan,
                    $wali_alamat,

                    $id
                );

                if ($stmt->execute()) {
                    $stmt->close();

                    header(
                        'Location: surat_nikah.php?msg=updated'
                    );
                    exit;
                }

                $stmt->close();
            }

            $errorText = 'Data surat nikah gagal diperbarui.';
            $act = 'form';
        } else {

            /* =================================================
               INSERT DATA
            ================================================= */

            $stmt = $mysqli->prepare("
                INSERT INTO surat_nikah
                (
                    nomor_surat,
                    tanggal_surat,
                    kantor_desa,
                    kecamatan,
                    kabupaten,
                    provinsi,

                    cs_nama,
                    cs_bin,
                    cs_nik,
                    cs_ttl,
                    cs_kewarganegaraan,
                    cs_agama,
                    cs_pekerjaan,
                    cs_alamat,

                    ci_nama,
                    ci_binti,
                    ci_nik,
                    ci_ttl,
                    ci_kewarganegaraan,
                    ci_agama,
                    ci_pekerjaan,
                    ci_alamat,

                    ayah_nama,
                    ayah_nik,
                    ayah_ttl,
                    ayah_pekerjaan,
                    ayah_alamat,

                    ibu_nama,
                    ibu_nik,
                    ibu_ttl,
                    ibu_pekerjaan,
                    ibu_alamat,

                    wali_nama,
                    wali_nik,
                    wali_ttl,
                    wali_pekerjaan,
                    wali_alamat
                )
                VALUES
                (
                    ?, ?, ?, ?, ?, ?,
                    ?, ?, ?, ?, ?, ?, ?, ?,
                    ?, ?, ?, ?, ?, ?, ?, ?,
                    ?, ?, ?, ?, ?,
                    ?, ?, ?, ?, ?,
                    ?, ?, ?, ?, ?
                )
            ");

            if ($stmt) {
                $types = str_repeat('s', 37);

                $stmt->bind_param(
                    $types,
                    $nomor_surat,
                    $tanggal_surat,
                    $kantor_desa,
                    $kecamatan,
                    $kabupaten,
                    $provinsi,

                    $cs_nama,
                    $cs_bin,
                    $cs_nik,
                    $cs_ttl,
                    $cs_kewarganegaraan,
                    $cs_agama,
                    $cs_pekerjaan,
                    $cs_alamat,

                    $ci_nama,
                    $ci_binti,
                    $ci_nik,
                    $ci_ttl,
                    $ci_kewarganegaraan,
                    $ci_agama,
                    $ci_pekerjaan,
                    $ci_alamat,

                    $ayah_nama,
                    $ayah_nik,
                    $ayah_ttl,
                    $ayah_pekerjaan,
                    $ayah_alamat,

                    $ibu_nama,
                    $ibu_nik,
                    $ibu_ttl,
                    $ibu_pekerjaan,
                    $ibu_alamat,

                    $wali_nama,
                    $wali_nik,
                    $wali_ttl,
                    $wali_pekerjaan,
                    $wali_alamat
                );

                if ($stmt->execute()) {
                    $stmt->close();

                    header(
                        'Location: surat_nikah.php?msg=saved'
                    );
                    exit;
                }

                $stmt->close();
            }

            $errorText = 'Data surat nikah gagal disimpan.';
            $act = 'form';
        }
    }
}


/* =========================================================
   DATA EDIT
========================================================= */

$edit = null;

if ($act === 'form') {
    $editId = (int)(
        $_GET['id']
        ?? $_POST['id']
        ?? 0
    );

    if ($editId > 0) {
        $stmt = $mysqli->prepare("
            SELECT *
            FROM surat_nikah
            WHERE id = ?
            LIMIT 1
        ");

        if ($stmt) {
            $stmt->bind_param('i', $editId);
            $stmt->execute();

            $result = $stmt->get_result();

            if ($result) {
                $edit = $result->fetch_assoc();
            }

            $stmt->close();
        }

        if (!$edit && $errorText === '') {
            header(
                'Location: surat_nikah.php?msg=notfound'
            );
            exit;
        }
    }
}


/* =========================================================
   NORMALISASI HALAMAN
========================================================= */

if (!in_array($act, ['list', 'form'], true)) {
    $act = 'list';
}


/* =========================================================
   DAFTAR DATA
========================================================= */

$list = $mysqli->query("
    SELECT *
    FROM surat_nikah
    ORDER BY id DESC
");

$totalSurat = $list
    ? $list->num_rows
    : 0;


/* =========================================================
   NILAI FORM
========================================================= */

$isEdit = !empty($edit);

$defaultForm = [
    'nomor_surat' => $nomorSuratOtomatis,
    'tanggal_surat' => date('Y-m-d'),
    'kantor_desa' => $DESA,
    'kecamatan' => $KEC,
    'kabupaten' => $KAB,
    'provinsi' => $PROV,

    'cs_nama' => '',
    'cs_bin' => '',
    'cs_nik' => '',
    'cs_ttl' => '',
    'cs_kewarganegaraan' => 'WNI',
    'cs_agama' => 'Islam',
    'cs_pekerjaan' => '',
    'cs_alamat' => '',

    'ci_nama' => '',
    'ci_binti' => '',
    'ci_nik' => '',
    'ci_ttl' => '',
    'ci_kewarganegaraan' => 'WNI',
    'ci_agama' => 'Islam',
    'ci_pekerjaan' => '',
    'ci_alamat' => '',

    'ayah_nama' => '',
    'ayah_nik' => '',
    'ayah_ttl' => '',
    'ayah_pekerjaan' => '',
    'ayah_alamat' => '',

    'ibu_nama' => '',
    'ibu_nik' => '',
    'ibu_ttl' => '',
    'ibu_pekerjaan' => '',
    'ibu_alamat' => '',

    'wali_nama' => '',
    'wali_nik' => '',
    'wali_ttl' => '',
    'wali_pekerjaan' => '',
    'wali_alamat' => ''
];

$form = [];

foreach ($defaultForm as $namaKolom => $nilaiDefault) {
    $form[$namaKolom] = $_POST[$namaKolom]
        ?? $edit[$namaKolom]
        ?? $nilaiDefault;
}


/* =========================================================
   PESAN
========================================================= */

$msgKey = $_GET['msg'] ?? '';

$msgText = [
    'saved' => 'Data surat nikah berhasil disimpan.',
    'updated' => 'Data surat nikah berhasil diperbarui.',
    'deleted' => 'Data surat nikah berhasil dihapus.',
    'notfound' => 'Data surat nikah tidak ditemukan.',
    'error' => 'Terjadi kesalahan saat memproses data.'
][$msgKey] ?? '';

$msgError = in_array(
    $msgKey,
    ['notfound', 'error'],
    true
);

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

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
    rel="stylesheet"
>

<link
    href="https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css"
    rel="stylesheet"
>

<style>
:root {
    --nikah-green-950: #002818;
    --nikah-green-900: #003d22;
    --nikah-green-800: #005530;
    --nikah-green-700: #047a3d;
    --nikah-green-600: #09a04f;
    --nikah-green-500: #15c46a;
    --nikah-green-400: #35e085;
    --nikah-green-100: #dcfaee;
    --nikah-green-50: #edfff5;

    --nikah-blue-500: #2080e8;
    --nikah-purple-500: #7956d8;
    --nikah-pink-500: #e05691;
    --nikah-yellow-500: #f5b400;
    --nikah-orange-500: #f26b1d;

    --nikah-ink: #0f1c16;
    --nikah-muted: #5e6e67;
    --nikah-line: #daeae1;
    --nikah-surface: #ffffff;
    --nikah-page: #f3faf6;

    --nikah-shadow: 0 8px 28px rgba(10, 40, 25, .10);
    --nikah-radius: 16px;
}

@keyframes nikah-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes nikah-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(53, 224, 133, .45);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(53, 224, 133, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(53, 224, 133, 0);
    }
}

@keyframes nikah-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

* {
    box-sizing: border-box;
}

body {
    color: var(--nikah-ink);
    background-color: var(--nikah-page);
    background-image:
        radial-gradient(
            ellipse at 80% 0%,
            rgba(21, 196, 106, .06) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 20% 100%,
            rgba(9, 160, 79, .04) 0%,
            transparent 50%
        );
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

.nikah-page {
    padding: 26px;
}


/* =========================================================
   HEADER
========================================================= */

.nikah-header {
    position: relative;
    overflow: hidden;

    margin-bottom: 22px;
    padding: 26px 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;

    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--nikah-green-950),
        var(--nikah-green-800),
        var(--nikah-green-900)
    );
    background-size: 200% 100%;

    border-radius: var(--nikah-radius);
    box-shadow: 0 14px 40px rgba(0, 60, 30, .28);

    animation: nikah-gradient 8s ease infinite;
}

.nikah-header::before,
.nikah-header::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.nikah-header::before {
    width: 220px;
    height: 220px;
    top: -80px;
    right: -55px;

    background: radial-gradient(
        circle,
        rgba(53, 224, 133, .20),
        transparent 70%
    );

    animation: nikah-float 7s ease-in-out infinite;
}

.nikah-header::after {
    width: 130px;
    height: 130px;
    bottom: -40px;
    left: 30%;

    background: radial-gradient(
        circle,
        rgba(245, 180, 0, .12),
        transparent 70%
    );

    animation: nikah-float 5s ease-in-out infinite reverse;
}

.nikah-header-left,
.nikah-header-actions {
    position: relative;
    z-index: 1;
}

.nikah-eyebrow {
    margin: 0 0 8px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--nikah-green-400);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.nikah-eyebrow::before {
    content: "";

    width: 22px;
    height: 2px;

    background: linear-gradient(
        90deg,
        var(--nikah-green-400),
        var(--nikah-green-500)
    );

    border-radius: 2px;
}

.nikah-header h2 {
    margin: 0;

    color: #ffffff;
    font-size: clamp(20px, 3vw, 27px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
}

.nikah-title-icon {
    margin-right: 8px;

    color: var(--nikah-green-400);
    font-size: 27px;
    vertical-align: middle;

    filter: drop-shadow(
        0 0 8px rgba(53, 224, 133, .5)
    );
}

.nikah-description {
    margin: 10px 0 0;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: rgba(255, 255, 255, .75);
    font-size: 12px;
    font-weight: 600;
}

.nikah-live-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;

    background: var(--nikah-green-400);
    border-radius: 50%;

    animation: nikah-pulse 2s ease infinite;
}

.nikah-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.nikah-clock {
    padding: 10px 15px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;

    font-size: 13px;
    font-weight: 700;

    backdrop-filter: blur(8px);
}

.nikah-clock i {
    color: var(--nikah-green-400);
    font-size: 18px;
}


/* =========================================================
   PANEL
========================================================= */

.nikah-panel {
    overflow: hidden;

    background: var(--nikah-surface);
    border: 1px solid rgba(210, 232, 220, .85);
    border-radius: var(--nikah-radius);
    box-shadow: var(--nikah-shadow);
}

.nikah-panel-head {
    padding: 18px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;

    background:
        radial-gradient(
            circle at top right,
            rgba(21, 196, 106, .08),
            transparent 34%
        ),
        #ffffff;

    border-bottom: 1px solid var(--nikah-line);
}

.nikah-panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nikah-panel-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;

    display: grid;
    place-items: center;

    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--nikah-green-500),
        var(--nikah-green-800)
    );

    border-radius: 13px;
    box-shadow: 0 4px 12px rgba(9, 160, 79, .28);
    font-size: 20px;
}

.nikah-panel-title h3 {
    margin: 0;

    color: var(--nikah-ink);
    font-size: 16px;
    font-weight: 800;
}

.nikah-panel-title p {
    margin: 3px 0 0;

    color: var(--nikah-muted);
    font-size: 12px;
    font-weight: 600;
}

.nikah-panel-body {
    padding: 20px;
}


/* =========================================================
   ALERT
========================================================= */

.nikah-alert {
    margin-bottom: 16px;
    padding: 13px 15px;

    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--nikah-green-800);
    background: var(--nikah-green-50);
    border: 1px solid var(--nikah-green-100);
    border-radius: 14px;

    box-shadow: var(--nikah-shadow);
    font-size: 14px;
    font-weight: 800;
}

.nikah-alert-error {
    color: #a73c00;
    background: #fff4eb;
    border-color: #ffd8bd;
}


/* =========================================================
   TOMBOL
========================================================= */

.nikah-btn {
    padding: 10px 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;

    box-shadow: 0 8px 18px rgba(10, 40, 25, .12);

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}

.nikah-btn:hover {
    transform: translateY(-2px);
    filter: brightness(.98);
}

.nikah-btn-primary {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--nikah-green-500),
        var(--nikah-green-800)
    );
}

.nikah-btn-light {
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);

    backdrop-filter: blur(8px);
}

.nikah-btn-edit {
    color: var(--nikah-ink);
    background: linear-gradient(
        135deg,
        #ffd95c,
        var(--nikah-yellow-500)
    );
}

.nikah-btn-delete {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #ff9a52,
        var(--nikah-orange-500)
    );
}

.nikah-btn-ghost {
    color: var(--nikah-green-800);
    background: var(--nikah-green-50);
    border: 1px solid var(--nikah-green-100);
}

.nikah-btn-small {
    padding: 8px 11px;

    border-radius: 10px;
    box-shadow: none;
    font-size: 12px;
}

.nikah-print-n1 {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #60b4ff,
        var(--nikah-blue-500)
    );
}

.nikah-print-n2 {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #9c7be8,
        var(--nikah-purple-500)
    );
}

.nikah-print-n4 {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #f58cba,
        var(--nikah-pink-500)
    );
}

.nikah-print-n5 {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--nikah-green-500),
        var(--nikah-green-800)
    );
}


/* =========================================================
   TOOLBAR
========================================================= */

.nikah-toolbar {
    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.nikah-search {
    position: relative;
    min-width: 260px;
    flex: 1;
}

.nikah-search i {
    position: absolute;
    top: 50%;
    left: 14px;

    color: var(--nikah-green-700);
    font-size: 18px;

    transform: translateY(-50%);
}

.nikah-search input {
    width: 100%;
    padding: 12px 14px 12px 42px;

    color: var(--nikah-ink);
    background: #f8fffb;
    border: 1px solid var(--nikah-line);
    border-radius: 14px;
    outline: none;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.nikah-search input:focus {
    background: #ffffff;
    border-color: var(--nikah-green-500);
    box-shadow: 0 0 0 4px rgba(21, 196, 106, .13);
}

.nikah-stat {
    padding: 10px 14px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--nikah-green-800);
    background: var(--nikah-green-50);
    border: 1px solid var(--nikah-green-100);
    border-radius: 999px;

    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   TABEL
========================================================= */

.nikah-table-wrap {
    overflow-x: auto;

    background: #ffffff;
    border: 1px solid var(--nikah-line);
    border-radius: 16px;
}

.nikah-table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    font-size: 14px;
}

.nikah-table th {
    padding: 14px 13px;

    color: var(--nikah-green-900);
    background: linear-gradient(
        180deg,
        var(--nikah-green-50),
        #f8fffb
    );

    border-bottom: 1px solid var(--nikah-line);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.nikah-table td {
    padding: 14px 13px;

    border-bottom: 1px solid #edf7f1;
    vertical-align: middle;
}

.nikah-table tbody tr {
    transition: background .16s ease;
}

.nikah-table tbody tr:hover {
    background: var(--nikah-green-50);
}

.nikah-table tbody tr:last-child td {
    border-bottom: none;
}

.nikah-number {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--nikah-green-900);
    font-weight: 800;
    white-space: nowrap;
}

.nikah-number i {
    color: var(--nikah-green-600);
}

.nikah-person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nikah-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;

    display: grid;
    place-items: center;

    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--nikah-green-500),
        var(--nikah-green-800)
    );

    border-radius: 14px;
    box-shadow: 0 8px 16px rgba(9, 160, 79, .20);
    font-weight: 800;
}

.nikah-avatar-wife {
    background: linear-gradient(
        135deg,
        #f58cba,
        var(--nikah-pink-500)
    );
}

.nikah-name {
    color: var(--nikah-ink);
    font-weight: 800;
}

.nikah-sub {
    margin-top: 2px;

    color: var(--nikah-muted);
    font-size: 12px;
}

.nikah-date-badge {
    padding: 7px 10px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: var(--nikah-blue-500);
    background: #eef8ff;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.nikah-actions {
    min-width: 270px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.nikah-print-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.nikah-manage-actions {
    width: 100%;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    padding-top: 7px;
    margin-top: 1px;

    border-top: 1px dashed var(--nikah-line);
}

.nikah-delete-form {
    margin: 0;
}

.nikah-empty {
    padding: 36px !important;

    color: var(--nikah-muted);
    background: #fbfffd;

    font-weight: 600;
    text-align: center;
}

.nikah-empty i {
    display: block;
    margin-bottom: 8px;

    color: var(--nikah-green-600);
    font-size: 34px;
}


/* =========================================================
   FORM
========================================================= */

.nikah-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.nikah-section {
    overflow: hidden;

    background: #ffffff;
    border: 1px solid var(--nikah-line);
    border-radius: 15px;
}

.nikah-section-head {
    padding: 14px 16px;

    display: flex;
    align-items: center;
    gap: 11px;

    color: var(--nikah-green-900);
    background: linear-gradient(
        135deg,
        var(--nikah-green-50),
        #f8fffb
    );

    border-bottom: 1px solid var(--nikah-line);
}

.nikah-section-number {
    width: 34px;
    height: 34px;
    flex-shrink: 0;

    display: grid;
    place-items: center;

    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--nikah-green-500),
        var(--nikah-green-800)
    );

    border-radius: 11px;
    font-size: 13px;
    font-weight: 800;
}

.nikah-section-head h4 {
    margin: 0;

    font-size: 14px;
    font-weight: 800;
}

.nikah-section-head p {
    margin: 3px 0 0;

    color: var(--nikah-muted);
    font-size: 11px;
    font-weight: 600;
}

.nikah-section-body {
    padding: 16px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.nikah-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.nikah-field-full {
    grid-column: 1 / -1;
}

.nikah-field label {
    color: var(--nikah-ink);
    font-size: 13px;
    font-weight: 800;
}

.nikah-required {
    color: var(--nikah-orange-500);
}

.nikah-input {
    width: 100%;
    min-height: 44px;
    padding: 12px 13px;

    color: var(--nikah-ink);
    background: #f8fffb;
    border: 1px solid var(--nikah-line);
    border-radius: 13px;
    outline: none;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.nikah-input:focus {
    background: #ffffff;
    border-color: var(--nikah-green-500);
    box-shadow: 0 0 0 4px rgba(21, 196, 106, .13);
}

.nikah-input[readonly] {
    color: var(--nikah-green-900);
    background: var(--nikah-green-50);
}

textarea.nikah-input {
    resize: vertical;
    line-height: 1.6;
}

.nikah-note {
    padding: 13px 15px;

    display: flex;
    align-items: flex-start;
    gap: 9px;

    color: var(--nikah-green-900);
    background: var(--nikah-green-50);
    border: 1px solid var(--nikah-green-100);
    border-radius: 13px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

.nikah-note i {
    margin-top: 1px;

    color: var(--nikah-green-600);
    font-size: 18px;
}

.nikah-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
    .nikah-section-body {
        grid-template-columns: 1fr;
    }

    .nikah-field-full {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .nikah-page {
        padding: 16px;
    }

    .nikah-header {
        padding: 20px;
    }

    .nikah-header-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .nikah-clock,
    .nikah-btn-light {
        width: 100%;
        justify-content: center;
    }

    .nikah-toolbar {
        align-items: stretch;
    }

    .nikah-search,
    .nikah-stat {
        width: 100%;
    }

    .nikah-actions {
        min-width: 245px;
    }

    .nikah-section-body {
        padding: 14px;
    }
}
</style>


<div class="nikah-page">

    <?php if ($act === 'list'): ?>

        <!-- =================================================
             HALAMAN DAFTAR
        ================================================== -->

        <div class="nikah-header">
            <div class="nikah-header-left">
                <p class="nikah-eyebrow">
                    <i class="ri-heart-2-fill"></i>
                    Administrasi Pernikahan
                </p>

                <h2>
                    <i class="ri-hearts-fill nikah-title-icon"></i>
                    Surat Nikah N1, N2, N4 dan N5
                </h2>

                <p class="nikah-description">
                    <span class="nikah-live-dot"></span>

                    Kelola dokumen administrasi pernikahan
                    Desa <?= esc($DESA) ?>
                </p>
            </div>

            <div class="nikah-header-actions">
                <span class="nikah-clock">
                    <i class="ri-time-fill"></i>

                    <span id="nikahLiveClock">
                        --.--.--
                    </span>

                    <span style="color:rgba(255,255,255,.55)">
                        WITA
                    </span>
                </span>

                <a
                    class="nikah-btn nikah-btn-light"
                    href="surat_nikah.php?a=form"
                >
                    <i class="ri-add-circle-fill"></i>
                    Buat Surat
                </a>
            </div>
        </div>


        <?php if ($msgText): ?>
            <div
                class="nikah-alert <?= $msgError
                    ? 'nikah-alert-error'
                    : '' ?>"
            >
                <i class="<?= $msgError
                    ? 'ri-error-warning-fill'
                    : 'ri-checkbox-circle-fill' ?>"></i>

                <?= esc($msgText) ?>
            </div>
        <?php endif; ?>


        <div class="nikah-panel">
            <div class="nikah-panel-head">
                <div class="nikah-panel-title">
                    <div class="nikah-panel-icon">
                        <i class="ri-folder-heart-fill"></i>
                    </div>

                    <div>
                        <h3>Daftar Administrasi Pernikahan</h3>

                        <p>
                            Data calon pasangan dan formulir surat nikah.
                        </p>
                    </div>
                </div>

                <div class="nikah-stat">
                    <i class="ri-file-list-3-fill"></i>
                    <?= (int)$totalSurat ?> Data
                </div>
            </div>

            <div class="nikah-panel-body">
                <div class="nikah-toolbar">
                    <div class="nikah-search">
                        <i class="ri-search-line"></i>

                        <input
                            type="text"
                            id="searchSuratNikah"
                            placeholder="Cari nomor surat, calon suami, calon istri, NIK, atau tanggal..."
                        >
                    </div>
                </div>

                <div class="nikah-table-wrap">
                    <table class="nikah-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Nomor Surat</th>
                                <th>Tanggal</th>
                                <th>Calon Suami</th>
                                <th>Calon Istri</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>

                        <tbody>
                            <?php if ($totalSurat === 0): ?>
                                <tr>
                                    <td
                                        colspan="6"
                                        class="nikah-empty"
                                    >
                                        <i class="ri-inbox-2-fill"></i>

                                        Belum ada data surat nikah.
                                        Klik tombol
                                        <strong>Buat Surat</strong>
                                        untuk menambahkan data baru.
                                    </td>
                                </tr>
                            <?php endif; ?>

                            <?php if ($list): ?>
                                <?php $no = 1; ?>

                                <?php while ($row = $list->fetch_assoc()): ?>
                                    <tr class="nikah-data-row">
                                        <td>
                                            <?= $no++ ?>
                                        </td>

                                        <td>
                                            <span class="nikah-number">
                                                <i class="ri-file-paper-2-fill"></i>

                                                <?= esc(
                                                    $row['nomor_surat']
                                                ) ?>
                                            </span>
                                        </td>

                                        <td>
                                            <span class="nikah-date-badge">
                                                <i class="ri-calendar-check-fill"></i>

                                                <?= esc(
                                                    nikah_tanggal_indo(
                                                        $row['tanggal_surat']
                                                    )
                                                ) ?>
                                            </span>
                                        </td>

                                        <td>
                                            <div class="nikah-person">
                                                <div class="nikah-avatar">
                                                    <?= esc(
                                                        nikah_inisial(
                                                            $row['cs_nama']
                                                        )
                                                    ) ?>
                                                </div>

                                                <div>
                                                    <div class="nikah-name">
                                                        <?= esc(
                                                            $row['cs_nama']
                                                        ) ?>
                                                    </div>

                                                    <div class="nikah-sub">
                                                        NIK:
                                                        <?= esc(
                                                            $row['cs_nik']
                                                                ?: '-'
                                                        ) ?>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <div class="nikah-person">
                                                <div
                                                    class="nikah-avatar nikah-avatar-wife"
                                                >
                                                    <?= esc(
                                                        nikah_inisial(
                                                            $row['ci_nama']
                                                        )
                                                    ) ?>
                                                </div>

                                                <div>
                                                    <div class="nikah-name">
                                                        <?= esc(
                                                            $row['ci_nama']
                                                        ) ?>
                                                    </div>

                                                    <div class="nikah-sub">
                                                        NIK:
                                                        <?= esc(
                                                            $row['ci_nik']
                                                                ?: '-'
                                                        ) ?>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <div class="nikah-actions">
                                                <div class="nikah-print-actions">
                                                    <a
                                                        class="nikah-btn nikah-btn-small nikah-print-n1"
                                                        target="_blank"
                                                        rel="noopener"
                                                        href="surat_nikah_print.php?id=<?= (int)$row['id'] ?>&jenis=N1"
                                                    >
                                                        <i class="ri-printer-fill"></i>
                                                        N1
                                                    </a>

                                                    <a
                                                        class="nikah-btn nikah-btn-small nikah-print-n2"
                                                        target="_blank"
                                                        rel="noopener"
                                                        href="surat_nikah_print.php?id=<?= (int)$row['id'] ?>&jenis=N2"
                                                    >
                                                        <i class="ri-printer-fill"></i>
                                                        N2
                                                    </a>

                                                    <a
                                                        class="nikah-btn nikah-btn-small nikah-print-n4"
                                                        target="_blank"
                                                        rel="noopener"
                                                        href="surat_nikah_print.php?id=<?= (int)$row['id'] ?>&jenis=N4"
                                                    >
                                                        <i class="ri-printer-fill"></i>
                                                        N4
                                                    </a>

                                                    <a
                                                        class="nikah-btn nikah-btn-small nikah-print-n5"
                                                        target="_blank"
                                                        rel="noopener"
                                                        href="surat_nikah_print.php?id=<?= (int)$row['id'] ?>&jenis=N5"
                                                    >
                                                        <i class="ri-printer-fill"></i>
                                                        N5
                                                    </a>
                                                </div>

                                                <div class="nikah-manage-actions">
                                                    <a
                                                        class="nikah-btn nikah-btn-small nikah-btn-edit"
                                                        href="surat_nikah.php?a=form&id=<?= (int)$row['id'] ?>"
                                                    >
                                                        <i class="ri-edit-2-fill"></i>
                                                        Edit
                                                    </a>

                                                    <form
                                                        method="post"
                                                        action="surat_nikah.php?a=delete"
                                                        class="nikah-delete-form"
                                                        onsubmit="return confirm('Yakin ingin menghapus data surat nikah ini? Data yang dihapus tidak dapat dikembalikan.');"
                                                    >
                                                        <input
                                                            type="hidden"
                                                            name="id"
                                                            value="<?= (int)$row['id'] ?>"
                                                        >

                                                        <button
                                                            type="submit"
                                                            class="nikah-btn nikah-btn-small nikah-btn-delete"
                                                        >
                                                            <i class="ri-delete-bin-6-fill"></i>
                                                            Hapus
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                <?php endwhile; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


    <?php else: ?>

        <!-- =================================================
             HALAMAN FORM
        ================================================== -->

        <div class="nikah-header">
            <div class="nikah-header-left">
                <p class="nikah-eyebrow">
                    <i class="<?= $isEdit
                        ? 'ri-edit-2-fill'
                        : 'ri-file-add-fill' ?>"></i>

                    <?= $isEdit
                        ? 'Edit Administrasi Pernikahan'
                        : 'Buat Administrasi Pernikahan' ?>
                </p>

                <h2>
                    <i class="ri-hearts-fill nikah-title-icon"></i>

                    <?= $isEdit
                        ? 'Edit Data Surat Nikah'
                        : 'Buat Surat Nikah' ?>
                </h2>

                <p class="nikah-description">
                    <span class="nikah-live-dot"></span>

                    <?= $isEdit
                        ? 'Perbarui data calon pasangan, orang tua, dan wali.'
                        : 'Lengkapi data calon pasangan, orang tua, dan wali.' ?>
                </p>
            </div>

            <div class="nikah-header-actions">
                <a
                    class="nikah-btn nikah-btn-light"
                    href="surat_nikah.php"
                >
                    <i class="ri-arrow-left-line"></i>
                    Kembali
                </a>
            </div>
        </div>


        <?php if ($errorText): ?>
            <div class="nikah-alert nikah-alert-error">
                <i class="ri-error-warning-fill"></i>
                <?= esc($errorText) ?>
            </div>
        <?php endif; ?>


        <div class="nikah-panel">
            <div class="nikah-panel-head">
                <div class="nikah-panel-title">
                    <div class="nikah-panel-icon">
                        <i class="<?= $isEdit
                            ? 'ri-edit-2-fill'
                            : 'ri-draft-fill' ?>"></i>
                    </div>

                    <div>
                        <h3>
                            <?= $isEdit
                                ? 'Edit Data Pernikahan'
                                : 'Form Administrasi Pernikahan' ?>
                        </h3>

                        <p>
                            Data digunakan untuk pencetakan formulir N1,
                            N2, N4, dan N5.
                        </p>
                    </div>
                </div>
            </div>

            <div class="nikah-panel-body">
                <form
                    method="post"
                    action="surat_nikah.php?a=save"
                    class="nikah-form"
                >
                    <input
                        type="hidden"
                        name="id"
                        value="<?= (int)($edit['id'] ?? 0) ?>"
                    >


                    <!-- DATA SURAT -->

                    <div class="nikah-section">
                        <div class="nikah-section-head">
                            <div class="nikah-section-number">
                                A
                            </div>

                            <div>
                                <h4>Data Surat</h4>

                                <p>
                                    Nomor surat, tanggal, dan wilayah desa.
                                </p>
                            </div>
                        </div>

                        <div class="nikah-section-body">
                            <div class="nikah-field">
                                <label for="nomorSurat">
                                    Nomor Surat
                                    <span class="nikah-required">*</span>
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="nomorSurat"
                                    name="nomor_surat"
                                    value="<?= esc(
                                        $form['nomor_surat']
                                    ) ?>"
                                    required
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="tanggalSurat">
                                    Tanggal Surat
                                    <span class="nikah-required">*</span>
                                </label>

                                <input
                                    type="date"
                                    class="nikah-input"
                                    id="tanggalSurat"
                                    name="tanggal_surat"
                                    value="<?= esc(
                                        $form['tanggal_surat']
                                    ) ?>"
                                    required
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="kantorDesa">
                                    Desa
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="kantorDesa"
                                    name="kantor_desa"
                                    value="<?= esc(
                                        $form['kantor_desa']
                                    ) ?>"
                                    readonly
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="kecamatan">
                                    Kecamatan
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="kecamatan"
                                    name="kecamatan"
                                    value="<?= esc(
                                        $form['kecamatan']
                                    ) ?>"
                                    readonly
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="kabupaten">
                                    Kabupaten
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="kabupaten"
                                    name="kabupaten"
                                    value="<?= esc(
                                        $form['kabupaten']
                                    ) ?>"
                                    readonly
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="provinsi">
                                    Provinsi
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="provinsi"
                                    name="provinsi"
                                    value="<?= esc(
                                        $form['provinsi']
                                    ) ?>"
                                    readonly
                                >
                            </div>
                        </div>
                    </div>


                    <!-- CALON SUAMI -->

                    <div class="nikah-section">
                        <div class="nikah-section-head">
                            <div class="nikah-section-number">
                                B
                            </div>

                            <div>
                                <h4>Data Calon Suami</h4>

                                <p>
                                    Identitas lengkap calon mempelai pria.
                                </p>
                            </div>
                        </div>

                        <div class="nikah-section-body">
                            <div class="nikah-field">
                                <label for="csNama">
                                    Nama Lengkap
                                    <span class="nikah-required">*</span>
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="csNama"
                                    name="cs_nama"
                                    value="<?= esc(
                                        $form['cs_nama']
                                    ) ?>"
                                    placeholder="Nama calon suami"
                                    required
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="csBin">
                                    Bin
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="csBin"
                                    name="cs_bin"
                                    value="<?= esc(
                                        $form['cs_bin']
                                    ) ?>"
                                    placeholder="Nama ayah calon suami"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="csNik">
                                    NIK
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="csNik"
                                    name="cs_nik"
                                    value="<?= esc(
                                        $form['cs_nik']
                                    ) ?>"
                                    placeholder="16 digit NIK"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="csTtl">
                                    Tempat / Tanggal Lahir
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="csTtl"
                                    name="cs_ttl"
                                    value="<?= esc(
                                        $form['cs_ttl']
                                    ) ?>"
                                    placeholder="Contoh: Mambu, 10 Januari 2000"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="csKewarganegaraan">
                                    Kewarganegaraan
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="csKewarganegaraan"
                                    name="cs_kewarganegaraan"
                                    value="<?= esc(
                                        $form['cs_kewarganegaraan']
                                    ) ?>"
                                    placeholder="WNI"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="csAgama">
                                    Agama
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="csAgama"
                                    name="cs_agama"
                                    value="<?= esc(
                                        $form['cs_agama']
                                    ) ?>"
                                    placeholder="Agama"
                                >
                            </div>

                            <div class="nikah-field nikah-field-full">
                                <label for="csPekerjaan">
                                    Pekerjaan
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="csPekerjaan"
                                    name="cs_pekerjaan"
                                    value="<?= esc(
                                        $form['cs_pekerjaan']
                                    ) ?>"
                                    placeholder="Pekerjaan calon suami"
                                >
                            </div>

                            <div class="nikah-field nikah-field-full">
                                <label for="csAlamat">
                                    Alamat
                                </label>

                                <textarea
                                    class="nikah-input"
                                    id="csAlamat"
                                    name="cs_alamat"
                                    rows="3"
                                    placeholder="Alamat lengkap calon suami"
                                ><?= esc($form['cs_alamat']) ?></textarea>
                            </div>
                        </div>
                    </div>


                    <!-- CALON ISTRI -->

                    <div class="nikah-section">
                        <div class="nikah-section-head">
                            <div class="nikah-section-number">
                                C
                            </div>

                            <div>
                                <h4>Data Calon Istri</h4>

                                <p>
                                    Identitas lengkap calon mempelai wanita.
                                </p>
                            </div>
                        </div>

                        <div class="nikah-section-body">
                            <div class="nikah-field">
                                <label for="ciNama">
                                    Nama Lengkap
                                    <span class="nikah-required">*</span>
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ciNama"
                                    name="ci_nama"
                                    value="<?= esc(
                                        $form['ci_nama']
                                    ) ?>"
                                    placeholder="Nama calon istri"
                                    required
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="ciBinti">
                                    Binti
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ciBinti"
                                    name="ci_binti"
                                    value="<?= esc(
                                        $form['ci_binti']
                                    ) ?>"
                                    placeholder="Nama ayah calon istri"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="ciNik">
                                    NIK
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ciNik"
                                    name="ci_nik"
                                    value="<?= esc(
                                        $form['ci_nik']
                                    ) ?>"
                                    placeholder="16 digit NIK"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="ciTtl">
                                    Tempat / Tanggal Lahir
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ciTtl"
                                    name="ci_ttl"
                                    value="<?= esc(
                                        $form['ci_ttl']
                                    ) ?>"
                                    placeholder="Contoh: Mambu, 10 Januari 2000"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="ciKewarganegaraan">
                                    Kewarganegaraan
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ciKewarganegaraan"
                                    name="ci_kewarganegaraan"
                                    value="<?= esc(
                                        $form['ci_kewarganegaraan']
                                    ) ?>"
                                    placeholder="WNI"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="ciAgama">
                                    Agama
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ciAgama"
                                    name="ci_agama"
                                    value="<?= esc(
                                        $form['ci_agama']
                                    ) ?>"
                                    placeholder="Agama"
                                >
                            </div>

                            <div class="nikah-field nikah-field-full">
                                <label for="ciPekerjaan">
                                    Pekerjaan
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ciPekerjaan"
                                    name="ci_pekerjaan"
                                    value="<?= esc(
                                        $form['ci_pekerjaan']
                                    ) ?>"
                                    placeholder="Pekerjaan calon istri"
                                >
                            </div>

                            <div class="nikah-field nikah-field-full">
                                <label for="ciAlamat">
                                    Alamat
                                </label>

                                <textarea
                                    class="nikah-input"
                                    id="ciAlamat"
                                    name="ci_alamat"
                                    rows="3"
                                    placeholder="Alamat lengkap calon istri"
                                ><?= esc($form['ci_alamat']) ?></textarea>
                            </div>
                        </div>
                    </div>


                    <!-- AYAH -->

                    <div class="nikah-section">
                        <div class="nikah-section-head">
                            <div class="nikah-section-number">
                                D
                            </div>

                            <div>
                                <h4>Data Ayah</h4>

                                <p>
                                    Identitas ayah atau orang tua terkait.
                                </p>
                            </div>
                        </div>

                        <div class="nikah-section-body">
                            <div class="nikah-field">
                                <label for="ayahNama">
                                    Nama Ayah
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ayahNama"
                                    name="ayah_nama"
                                    value="<?= esc(
                                        $form['ayah_nama']
                                    ) ?>"
                                    placeholder="Nama lengkap ayah"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="ayahNik">
                                    NIK Ayah
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ayahNik"
                                    name="ayah_nik"
                                    value="<?= esc(
                                        $form['ayah_nik']
                                    ) ?>"
                                    placeholder="NIK ayah"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="ayahTtl">
                                    Tempat / Tanggal Lahir
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ayahTtl"
                                    name="ayah_ttl"
                                    value="<?= esc(
                                        $form['ayah_ttl']
                                    ) ?>"
                                    placeholder="Tempat dan tanggal lahir ayah"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="ayahPekerjaan">
                                    Pekerjaan Ayah
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ayahPekerjaan"
                                    name="ayah_pekerjaan"
                                    value="<?= esc(
                                        $form['ayah_pekerjaan']
                                    ) ?>"
                                    placeholder="Pekerjaan ayah"
                                >
                            </div>

                            <div class="nikah-field nikah-field-full">
                                <label for="ayahAlamat">
                                    Alamat Ayah
                                </label>

                                <textarea
                                    class="nikah-input"
                                    id="ayahAlamat"
                                    name="ayah_alamat"
                                    rows="3"
                                    placeholder="Alamat lengkap ayah"
                                ><?= esc($form['ayah_alamat']) ?></textarea>
                            </div>
                        </div>
                    </div>


                    <!-- IBU -->

                    <div class="nikah-section">
                        <div class="nikah-section-head">
                            <div class="nikah-section-number">
                                E
                            </div>

                            <div>
                                <h4>Data Ibu</h4>

                                <p>
                                    Identitas ibu atau orang tua terkait.
                                </p>
                            </div>
                        </div>

                        <div class="nikah-section-body">
                            <div class="nikah-field">
                                <label for="ibuNama">
                                    Nama Ibu
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ibuNama"
                                    name="ibu_nama"
                                    value="<?= esc(
                                        $form['ibu_nama']
                                    ) ?>"
                                    placeholder="Nama lengkap ibu"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="ibuNik">
                                    NIK Ibu
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ibuNik"
                                    name="ibu_nik"
                                    value="<?= esc(
                                        $form['ibu_nik']
                                    ) ?>"
                                    placeholder="NIK ibu"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="ibuTtl">
                                    Tempat / Tanggal Lahir
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ibuTtl"
                                    name="ibu_ttl"
                                    value="<?= esc(
                                        $form['ibu_ttl']
                                    ) ?>"
                                    placeholder="Tempat dan tanggal lahir ibu"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="ibuPekerjaan">
                                    Pekerjaan Ibu
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="ibuPekerjaan"
                                    name="ibu_pekerjaan"
                                    value="<?= esc(
                                        $form['ibu_pekerjaan']
                                    ) ?>"
                                    placeholder="Pekerjaan ibu"
                                >
                            </div>

                            <div class="nikah-field nikah-field-full">
                                <label for="ibuAlamat">
                                    Alamat Ibu
                                </label>

                                <textarea
                                    class="nikah-input"
                                    id="ibuAlamat"
                                    name="ibu_alamat"
                                    rows="3"
                                    placeholder="Alamat lengkap ibu"
                                ><?= esc($form['ibu_alamat']) ?></textarea>
                            </div>
                        </div>
                    </div>


                    <!-- WALI -->

                    <div class="nikah-section">
                        <div class="nikah-section-head">
                            <div class="nikah-section-number">
                                F
                            </div>

                            <div>
                                <h4>Data Wali</h4>

                                <p>
                                    Identitas wali nikah apabila diperlukan.
                                </p>
                            </div>
                        </div>

                        <div class="nikah-section-body">
                            <div class="nikah-field">
                                <label for="waliNama">
                                    Nama Wali
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="waliNama"
                                    name="wali_nama"
                                    value="<?= esc(
                                        $form['wali_nama']
                                    ) ?>"
                                    placeholder="Nama lengkap wali"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="waliNik">
                                    NIK Wali
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="waliNik"
                                    name="wali_nik"
                                    value="<?= esc(
                                        $form['wali_nik']
                                    ) ?>"
                                    placeholder="NIK wali"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="waliTtl">
                                    Tempat / Tanggal Lahir
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="waliTtl"
                                    name="wali_ttl"
                                    value="<?= esc(
                                        $form['wali_ttl']
                                    ) ?>"
                                    placeholder="Tempat dan tanggal lahir wali"
                                >
                            </div>

                            <div class="nikah-field">
                                <label for="waliPekerjaan">
                                    Pekerjaan Wali
                                </label>

                                <input
                                    type="text"
                                    class="nikah-input"
                                    id="waliPekerjaan"
                                    name="wali_pekerjaan"
                                    value="<?= esc(
                                        $form['wali_pekerjaan']
                                    ) ?>"
                                    placeholder="Pekerjaan wali"
                                >
                            </div>

                            <div class="nikah-field nikah-field-full">
                                <label for="waliAlamat">
                                    Alamat Wali
                                </label>

                                <textarea
                                    class="nikah-input"
                                    id="waliAlamat"
                                    name="wali_alamat"
                                    rows="3"
                                    placeholder="Alamat lengkap wali"
                                ><?= esc($form['wali_alamat']) ?></textarea>
                            </div>
                        </div>
                    </div>


                    <div class="nikah-note">
                        <i class="ri-information-fill"></i>

                        <span>
                            Pastikan nama, NIK, tempat tanggal lahir,
                            alamat, dan hubungan keluarga sudah sesuai
                            sebelum mencetak formulir N1, N2, N4,
                            atau N5.
                        </span>
                    </div>


                    <div class="nikah-form-actions">
                        <button
                            type="submit"
                            class="nikah-btn nikah-btn-primary"
                        >
                            <i class="ri-save-3-fill"></i>

                            <?= $isEdit
                                ? 'Perbarui Data'
                                : 'Simpan Data' ?>
                        </button>

                        <a
                            class="nikah-btn nikah-btn-ghost"
                            href="surat_nikah.php"
                        >
                            <i class="ri-close-circle-fill"></i>
                            Batal
                        </a>
                    </div>
                </form>
            </div>
        </div>

    <?php endif; ?>

</div>


<script>
(() => {
    const searchInput = document.getElementById(
        'searchSuratNikah'
    );

    if (searchInput) {
        searchInput.addEventListener('input', function () {
            const keyword = this.value
                .toLowerCase()
                .trim();

            document
                .querySelectorAll('.nikah-data-row')
                .forEach((row) => {
                    const rowText = row.innerText.toLowerCase();

                    row.style.display = rowText.includes(keyword)
                        ? ''
                        : 'none';
                });
        });
    }


    const clockElement = document.getElementById(
        'nikahLiveClock'
    );

    const updateClock = () => {
        if (!clockElement) {
            return;
        }

        clockElement.textContent = new Intl.DateTimeFormat(
            'id-ID',
            {
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false,
                timeZone: 'Asia/Makassar'
            }
        )
        .format(new Date())
        .replaceAll(':', '.');
    };

    updateClock();
    setInterval(updateClock, 1000);
})();
</script>

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