<!DOCTYPE html>
<html lang="id">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Perkawinan</title>
    <style>
        :root {
            /* Color Palette */
            --primary: #1a73e8;
            --primary-hover: #1557b0;
            --secondary: #5f6368;
            --secondary-hover: #4d5156;
            --danger: #d93025;
            --danger-hover: #b3261e;
            --warning: #f9ab00;
            --warning-hover: #e37400;
            --success: #1e8e3e;
            --surface: #ffffff;
            --background: #f8f9fa;
            --border: #dadce0;
            --text-main: #202124;
            --text-muted: #5f6368;
            --bg-card: #ffffff;
            --bg-body: #f4f6f9;


            /* Typography */
            --font-family: 'Plus Jakarta Sans', sans-serif;

            /* Spacing & Layout */
            --radius: 8px;
            --shadow: 0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15);
            --transition: all 0.2s ease-in-out;
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .hidden {
            display: none !important;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--background);
            color: var(--text-main);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        /* App Header */
        .app-header {
            position: sticky;
            top: 0;
            z-index: 30;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.75rem 1rem;
            background-color: var(--surface);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }

        .app-header-brand {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            min-width: 0;
        }

        .app-header-brand .material-symbols-outlined {
            flex-shrink: 0;
            font-size: 1.75rem;
            color: var(--primary);
        }

        .app-header-title {
            font-size: 1.0625rem;
            font-weight: 700;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .app-header-title small {
            display: block;
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        .app-header-account {
            display: flex;
            align-items: center;
            gap: 0.625rem;
        }

        .app-header-account-name {
            display: none;
            flex-direction: column;
            align-items: flex-end;
            line-height: 1.2;
        }

        .app-header-account-name .name {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-main);
        }

        .app-header-account-name .role {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .app-header-avatar {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: 700;
        }

        main {
            padding: 1rem;
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        /* Semantic Panel Component */
        .panel {
            background-color: var(--surface);
            border-radius: var(--radius);
            border: 1px solid var(--border);
            overflow: hidden;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }

        .panel-header {
            padding: 1.25rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--surface);
        }

        .panel-header h2 {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-main);
        }

        .panel-body {
            padding: 1.25rem;
        }

        /* Profile Card */
        .profile-card {
            display: flex;
            align-items: center;
            gap: 1.25rem;
        }

        .profile-avatar {
            flex-shrink: 0;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
        }

        .profile-details {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            min-width: 0;
        }

        .profile-name {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-main);
        }

        .profile-role {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .profile-kua {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            font-size: 0.875rem;
            color: var(--text-main);
            margin-top: 0.25rem;
        }

        .profile-kua .material-symbols-outlined {
            font-size: 1.125rem;
            color: var(--primary);
        }

        /* Widget Grid */
        .widget-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.25rem;
        }

        .widget-card {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.25rem;
        }

        .widget-icon {
            flex-shrink: 0;
            width: 52px;
            height: 52px;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .widget-icon .material-symbols-outlined {
            font-size: 1.75rem;
        }

        .widget-icon-primary { background-color: #e8f0fe; color: var(--primary); }
        .widget-icon-secondary { background-color: #eef1f3; color: var(--secondary); }

        .widget-info {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .widget-value {
            font-size: 2rem;
            font-weight: 700;
            line-height: 1.1;
            color: var(--text-main);
        }

        .widget-label {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin-top: 0.25rem;
        }

        .widget-footnote {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 0.375rem;
        }

        /* Account Dropdown Menu */
        .account-menu {
            position: relative;
        }

        .account-menu-trigger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background-color: transparent;
            color: var(--text-muted);
            cursor: pointer;
            transition: var(--transition);
        }

        .account-menu-trigger:hover,
        .account-menu-trigger[aria-expanded="true"] {
            background-color: var(--background);
            color: var(--text-main);
        }

        .account-menu-trigger .material-symbols-outlined {
            font-size: 1.5rem;
        }

        .account-menu-dropdown {
            position: absolute;
            top: calc(100% + 0.5rem);
            right: 0;
            min-width: 200px;
            background-color: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 0.5rem;
            z-index: 20;
            display: flex;
            flex-direction: column;
            gap: 0.125rem;
        }

        .account-menu-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            width: 100%;
            padding: 0.625rem 0.75rem;
            border: none;
            background: none;
            border-radius: 6px;
            font-family: var(--font-family);
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-main);
            text-decoration: none;
            cursor: pointer;
            transition: var(--transition);
            text-align: left;
        }

        .account-menu-item .material-symbols-outlined {
            font-size: 1.25rem;
            color: var(--text-muted);
        }

        .account-menu-item:hover {
            background-color: var(--background);
        }

        .account-menu-item.danger {
            color: var(--danger);
        }

        .account-menu-item.danger .material-symbols-outlined {
            color: var(--danger);
        }

        .account-menu-item.danger:hover {
            background-color: #fce8e6;
        }

        .account-menu-divider {
            height: 1px;
            background-color: var(--border);
            margin: 0.375rem 0;
        }

        /* App Footer */
        .app-footer {
            padding: 1.25rem 1rem;
            text-align: center;
            font-size: 0.8125rem;
            color: var(--text-muted);
        }

        /* Responsive Breakpoints */
        @media (min-width: 768px) {
            main { padding: 2rem; }
            .widget-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .app-header {
                padding: 0.875rem 2rem;
            }
            .app-header-account-name {
                display: flex;
            }
            .app-footer {
                padding: 1.5rem 2rem;
            }
        }

        /* HTMX Indicator Overlays */
        .htmx-indicator {
            z-index: 1000;
            opacity: 0;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.75);
            color: #fff;
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius-md);
            font-weight: 500;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        .htmx-request.htmx-indicator,
        .htmx-request .htmx-indicator {
            opacity: 1;
        }

        .spinner {
            display: none;
            width: 1.25rem;
            height: 1.25rem;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Data Table */
        .table-container {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        table {
            width: 100%;
            min-width: 800px;
            border-collapse: collapse;
            text-align: left;
        }

        th, td {
            padding: 1rem;
            border-bottom: 1px solid var(--border);
            font-size: 0.875rem;
        }

        th {
            background-color: #f1f3f4;
            font-weight: 600;
            color: var(--text-muted);
            white-space: nowrap;
        }

        tr:last-child td { border-bottom: none; }
        tr:hover td { background-color: #f8f9fa; }

        .text-center { text-align: center; }

        /* Action Buttons Group */
        .action-group {
            display: flex;
            gap: 0.5rem;
            justify-content: center;
        }

        /* Status Indicators */
        .status {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }
        .status-baru { background-color: #e8f0fe; color: var(--primary); }
        .status-setuju { background-color: #ceead6; color: var(--success); }
        .status-tolak { background-color: #fce8e6; color: var(--danger); }

        /* Pagination Layout */
        .pagination-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .pagination-info {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .pagination {
            display: flex;
            list-style: none;
            gap: 0.25rem;
        }

        .pagination a, .pagination span {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 32px;
            padding: 0 0.5rem;
            border-radius: 4px;
            font-size: 0.875rem;
            text-decoration: none;
            color: var(--text-main);
            border: 1px solid var(--border);
        }

        .pagination .active a {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .pagination .disabled a {
            color: var(--text-muted);
            background-color: #f1f3f4;
            pointer-events: none;
        }

        /* Native Dialog (Modal) Styling */
        dialog {
            margin: auto;
            padding: 0;
            border: none;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            max-width: 500px;
            width: 90%;
            background: var(--surface);
            color: var(--text-main);
        }

        dialog::backdrop {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(2px);
        }

        .dialog-header {
            padding: 1.25rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .dialog-header h3 { font-size: 1.125rem; margin: 0; }

        .dialog-header.warning { background-color: #fff3cd; border-bottom-color: #ffe69c; }
        .dialog-header.warning h3 { color: #856404; }

        .dialog-body {
            padding: 1.5rem 1.25rem;
            font-size: 0.95rem;
        }

        .dialog-footer {
            padding: 1rem 1.25rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            background-color: #f8f9fa;
        }

        .close-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-muted);
            display: flex;
            align-items: center;
        }

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-family: var(--font-family);
            font-size: 0.875rem;
            font-weight: 500;
            padding: 0.625rem 1.25rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            transition: var(--transition);
        }

        .btn-primary { background-color: var(--primary); color: white; }
        .btn-primary:hover { background-color: var(--primary-hover); }

        .btn-secondary { background-color: var(--secondary); color: white; }
        .btn-secondary:hover { background-color: var(--secondary-hover); }

        .btn-danger { background-color: var(--danger); color: white; }
        .btn-danger:hover { background-color: var(--danger-hover); }

        .btn-warning { background-color: var(--warning); color: #000; }
        .btn-warning:hover { background-color: var(--warning-hover); }

        .btn-icon { padding: 0.5rem; }

        .btn:disabled, .btn.disabled {
            opacity: 0.6;
            cursor: not-allowed;
            pointer-events: none;
        }

        .page-wrapper {
            max-width: 900px;
            margin: 0 auto;
            padding: 1rem;
        }

        .page-header {
            padding: 1rem 0;
        }

        .page-header h1 {
            font-size: 1.5rem;
            margin: 0;
        }

        .error {
            color: var(--danger);
            font-size: 0.875rem;
            list-style: none;
            padding: 0;
            margin: 0.25rem 0 0;
        }

        fieldset.card {
            border: 1px solid var(--border);
            border-radius: 0.5rem;
            background-color: var(--bg-card);
            margin: 0 0 1.5rem;
            padding: 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        fieldset.card legend {
            font-size: 1.1rem;
            font-weight: 600;
            padding: 0.75rem 1rem;
            width: 100%;
            border-bottom: 1px solid var(--border);
            background-color: #f8f9fa;
            border-radius: 0.5rem 0.5rem 0 0;
        }

        .card-body {
            padding: 1rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            margin-bottom: 0.35rem;
            font-weight: 500;
        }

        .form-control {
            width: 100%;
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--border);
            border-radius: 0.35rem;
            font-size: 1rem;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .file-preview-link {
            display: inline-block;
            margin-bottom: 1rem;
        }

        .file-preview-link img {
            max-width: 100%;
            height: auto;
            border-radius: 0.35rem;
            border: 1px solid var(--border);
        }

        .card-footer {
            padding: 1rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
        }


    </style>
    <script src="https://unpkg.com/htmx.org@2.0.4"
            integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
            crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/e76ee7f745.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
    <script src="/webjars/sweetalert2/11.26.3/dist/sweetalert2.all.min.js" defer></script>
    <link href="/webjars/sweetalert2/11.26.3/dist/sweetalert2.min.css" rel="stylesheet">
    <!-- Typography and Icons -->
    <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=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

</head>
<body>
<main id="main-app">
    <section class="panel" style="max-width: 600px; margin: 40px auto; text-align: center;">
        <header class="panel-header" style="justify-content: center;">
            <h2 id="error-title">
                <span class="material-symbols-outlined" style="vertical-align: middle; font-size: 36px; color: #d32f2f;" aria-hidden="true">error</span>
                Terjadi Kesalahan
            </h2>
        </header>

        <div class="panel-body" style="padding: 30px 20px;">
            <!-- Menampilkan Kode Status / HTTP Error (misal: 404, 500) -->
            <h1 style="font-size: 72px; margin: 0; color: #d32f2f;">500</h1>

            <!-- Menampilkan Pesan Error -->
            <h3 style="margin-top: 10px;">Halaman Tidak Ditemukan atau Terjadi Kesalahan Server</h3>

            <p style="color: #666; margin-top: 15px;">Maaf, halaman yang Anda cari tidak dapat diakses atau terjadi gangguan sistem. Silakan coba beberapa saat lagi.</p>
        </div>

        <footer class="card-footer" style="justify-content: center; gap: 10px; padding: 20px;">
            <a href="/" class="btn">
                <span class="material-symbols-outlined" aria-hidden="true">home</span>
                Beranda
            </a>
            <a href="javascript:history.back()" class="btn btn-primary">
                <span class="material-symbols-outlined" aria-hidden="true">arrow_back</span>
                Kembali
            </a>
        </footer>
    </section>
</main>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // Script sederhana untuk native html5 dialog (menggantikan bootstrap JS)
    document.addEventListener('DOMContentLoaded', () => {
        const modalTriggers = document.querySelectorAll('.modal-trigger');
        const closeButtons = document.querySelectorAll('.dialog-close');

        modalTriggers.forEach(trigger => {
            trigger.addEventListener('click', () => {
                const targetId = trigger.getAttribute('data-target');
                const dialog = document.getElementById(targetId);

                // Jika modal hapus, set ID
                if (targetId === 'dialog-hapus') {
                    const dataId = trigger.getAttribute('data-id');
                    const idInput = dialog.querySelector('#idLayananHapus');
                    if (idInput) idInput.value = dataId;
                }

                if (dialog) dialog.showModal();
            });
        });

        closeButtons.forEach(btn => {
            btn.addEventListener('click', (e) => {
                const dialog = e.target.closest('dialog');
                if (dialog) dialog.close();
            });
        });
    });
</script>
<script>
    (function () {
        var trigger = document.getElementById('account-menu-trigger');
        var dropdown = document.getElementById('account-menu-dropdown');

        if (!trigger || !dropdown) return;

        function openMenu() {
            dropdown.classList.remove('hidden');
            trigger.setAttribute('aria-expanded', 'true');
        }

        function closeMenu() {
            dropdown.classList.add('hidden');
            trigger.setAttribute('aria-expanded', 'false');
        }

        function isOpen() {
            return !dropdown.classList.contains('hidden');
        }

        trigger.addEventListener('click', function (event) {
            event.stopPropagation();
            isOpen() ? closeMenu() : openMenu();
        });

        // Klik di luar dropdown akan menutup menu
        document.addEventListener('click', function (event) {
            if (isOpen() && !dropdown.contains(event.target) && event.target !== trigger) {
                closeMenu();
            }
        });

        // Tutup menu dengan tombol Escape
        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape' && isOpen()) {
                closeMenu();
                trigger.focus();
            }
        });
    })();
</script>
<script>
    function approval_data() {
        var form = document.getElementById('form-setujui');
        Swal.fire({
            title: 'Apakah Anda Yakin ?',
            text:  'Apakah anda yakin  menyetujui data ini ?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Batalkan',
            confirmButtonText: 'Setujui'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        })
    }

    function simpan_data() {
        var form = document.getElementById('form-simpan');
        Swal.fire({
            title: 'Apakah Anda Yakin ?',
            text:  'Apakah anda yakin  menyetujui data ini ?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Batalkan',
            confirmButtonText: 'Setujui'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        })
    }

    document.body.addEventListener('success-simpan', function (e) {
        if(e.target.matches("[confirm-with-sweet-alert='true']")){
            e.preventDefault();
            Swal.fire({
                title: "Data berhasil disimpan",
                icon: "success",
                confirmButtonText: "Ya"
            }).then((confirmed) => {

            });
        }
    });
</script>

</body>
</html>
</body>
</html>