<?php
session_start();

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// Cek apakah kader sudah login
if (!isset($_SESSION['kader_id']) || !$_SESSION['kader_logged_in']) {
    header('Location: ../../auth/kader_login.php');
    exit();
}

require_once '../../api/db_connect.php';

$success_message = '';
$error_message = '';
$kader_desa = isset($_SESSION['kader_desa']) ? htmlspecialchars($_SESSION['kader_desa']) : '';

// Data untuk form edit (disimpan sebagai variabel karena form diisi manual oleh JS)
$edit_id_onload = null; // Ini untuk menandai apakah ada edit_id dari URL (misal setelah refresh post)

// --- Handle AJAX Fetch for Edit Data ---
if (isset($_GET['fetch_edit_id'])) {
    $fetch_id = (int)$_GET['fetch_edit_id'];
    try {
        // Query untuk edit data, tidak ada perubahan di sini agar tetap mengambil data berdasarkan ID dan desa
        $stmt = $pdo->prepare("SELECT * FROM jadwal_posyandu WHERE id = :id AND desa = :desa");
        $stmt->bindParam(':id', $fetch_id, PDO::PARAM_INT);
        $stmt->bindParam(':desa', $kader_desa, PDO::PARAM_STR);
        $stmt->execute();
        $jadwal_data = $stmt->fetch(PDO::FETCH_ASSOC);

        header('Content-Type: application/json');
        if ($jadwal_data) {
            echo json_encode(['success' => true, 'data' => $jadwal_data]);
        } else {
            echo json_encode(['success' => false, 'message' => 'Jadwal tidak ditemukan atau Anda tidak memiliki akses.']);
        }
    } catch (PDOException $e) {
        header('Content-Type: application/json');
        echo json_encode(['success' => false, 'message' => 'Terjadi kesalahan database: ' . $e->getMessage()]);
        error_log("[JADWAL_FETCH_AJAX_ERROR] " . $e->getMessage());
    }
    exit(); // Hentikan eksekusi script setelah mengirim JSON
}


// --- Handle Form Submissions (Add/Edit) ---
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['action'])) {
        $action = $_POST['action'];

        // Ambil dan sanitasi data umum
        $nama_posyandu = htmlspecialchars(trim($_POST['nama_posyandu']));
        $tanggal_mulai = htmlspecialchars(trim($_POST['tanggal_mulai']));
        $tanggal_selesai = !empty($_POST['tanggal_selesai']) ? htmlspecialchars(trim($_POST['tanggal_selesai'])) : NULL;
        $waktu_mulai = htmlspecialchars(trim($_POST['waktu_mulai']));
        $waktu_selesai = !empty($_POST['waktu_selesai']) ? htmlspecialchars(trim($_POST['waktu_selesai'])) : NULL;
        $lokasi_detail = htmlspecialchars(trim($_POST['lokasi_detail']));
        $desa = $kader_desa; // Desa otomatis dari sesi kader

        // Validasi umum
        if (empty($nama_posyandu) || empty($tanggal_mulai) || empty($waktu_mulai) || empty($lokasi_detail)) {
            $error_message = "Nama Posyandu, Tanggal Mulai, Waktu Mulai, dan Lokasi Detail wajib diisi.";
        } else {
            try {
                $pdo->beginTransaction();

                if ($action === 'add') {
                    $stmt = $pdo->prepare("INSERT INTO jadwal_posyandu (desa, nama_posyandu, tanggal_mulai, tanggal_selesai, waktu_mulai, waktu_selesai, lokasi_detail) VALUES (:desa, :nama_posyandu, :tanggal_mulai, :tanggal_selesai, :waktu_mulai, :waktu_selesai, :lokasi_detail)");
                    $stmt->bindParam(':desa', $desa, PDO::PARAM_STR);
                    $stmt->bindParam(':nama_posyandu', $nama_posyandu, PDO::PARAM_STR);
                    $stmt->bindParam(':tanggal_mulai', $tanggal_mulai, PDO::PARAM_STR);
                    $stmt->bindParam(':tanggal_selesai', $tanggal_selesai, PDO::PARAM_STR);
                    $stmt->bindParam(':waktu_mulai', $waktu_mulai, PDO::PARAM_STR);
                    $stmt->bindParam(':waktu_selesai', $waktu_selesai, PDO::PARAM_STR);
                    $stmt->bindParam(':lokasi_detail', $lokasi_detail, PDO::PARAM_STR);
                    $stmt->execute();
                    $pdo->commit();
                    $success_message = "Jadwal berhasil ditambahkan!";
                } elseif ($action === 'edit') {
                    $id = (int)$_POST['id'];
                    $stmt = $pdo->prepare("UPDATE jadwal_posyandu SET nama_posyandu = :nama_posyandu, tanggal_mulai = :tanggal_mulai, tanggal_selesai = :tanggal_selesai, waktu_mulai = :waktu_mulai, waktu_selesai = :waktu_selesai, lokasi_detail = :lokasi_detail WHERE id = :id AND desa = :desa");
                    $stmt->bindParam(':nama_posyandu', $nama_posyandu, PDO::PARAM_STR);
                    $stmt->bindParam(':tanggal_mulai', $tanggal_mulai, PDO::PARAM_STR);
                    $stmt->bindParam(':tanggal_selesai', $tanggal_selesai, PDO::PARAM_STR);
                    $stmt->bindParam(':waktu_mulai', $waktu_mulai, PDO::PARAM_STR);
                    $stmt->bindParam(':waktu_selesai', $waktu_selesai, PDO::PARAM_STR);
                    $stmt->bindParam(':lokasi_detail', $lokasi_detail, PDO::PARAM_STR);
                    $stmt->bindParam(':id', $id, PDO::PARAM_INT);
                    $stmt->bindParam(':desa', $desa, PDO::PARAM_STR);
                    $stmt->execute();
                    $pdo->commit();
                    $success_message = "Jadwal berhasil diperbarui!";
                }
            } catch (PDOException $e) {
                $pdo->rollBack();
                $error_message = "Terjadi kesalahan database: " . $e->getMessage();
                error_log("[JADWAL_CRUD_ERROR] " . $e->getMessage());
            }
        }
        // Redirect setelah POST untuk mencegah "resubmission"
        header('Location: index.php?status=' . (empty($error_message) ? 'success' : 'error') . '&message=' . urlencode(empty($error_message) ? $success_message : $error_message));
        exit();
    }
}

// --- Handle Delete Request ---
if (isset($_GET['delete_id'])) {
    $delete_id = (int)$_GET['delete_id'];
    try {
        $stmt = $pdo->prepare("DELETE FROM jadwal_posyandu WHERE id = :id AND desa = :desa");
        $stmt->bindParam(':id', $delete_id, PDO::PARAM_INT);
        $stmt->bindParam(':desa', $kader_desa, PDO::PARAM_STR);
        $stmt->execute();
        $success_message = "Jadwal berhasil dihapus!";
    } catch (PDOException $e) {
        $error_message = "Terjadi kesalahan saat menghapus jadwal: " . $e->getMessage();
        error_log("[JADWAL_DELETE_ERROR] " . $e->getMessage());
    }
    // Redirect untuk menghindari resubmission di GET (penting untuk delete)
    header('Location: index.php?status=' . (empty($error_message) ? 'success' : 'error') . '&message=' . urlencode(empty($error_message) ? $success_message : $error_message));
    exit();
}

// --- Fetch All Schedules for current kader's desa, FILTERED for the next 7 days ---
$jadwal_list = [];
try {
    // Tanggal hari ini
    $today = date('Y-m-d');
    // Tanggal 7 hari ke depan
    $next_seven_days = date('Y-m-d', strtotime('+7 days'));

    // Modifikasi query untuk menampilkan jadwal yang tanggal_mulai-nya
    // berada di antara hari ini dan 7 hari ke depan (inklusif)
    $stmt = $pdo->prepare("SELECT * FROM jadwal_posyandu 
                           WHERE desa = :desa 
                           AND tanggal_mulai BETWEEN :today AND :next_seven_days
                           ORDER BY tanggal_mulai ASC, waktu_mulai ASC");
    $stmt->bindParam(':desa', $kader_desa, PDO::PARAM_STR);
    $stmt->bindParam(':today', $today, PDO::PARAM_STR);
    $stmt->bindParam(':next_seven_days', $next_seven_days, PDO::PARAM_STR);
    $stmt->execute();
    $jadwal_list = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $error_message = "Gagal memuat daftar jadwal: " . $e->getMessage();
    error_log("[JADWAL_FETCH_ERROR] " . $e->getMessage());
}

// Check for messages from URL parameters (e.g., after delete or add/edit redirect)
$clear_url_params = false;
if (isset($_GET['status']) && isset($_GET['message'])) {
    // Only set success/error message if it's explicitly from a redirect.
    // This prevents accidental re-display if not from an action.
    if ($_GET['status'] == 'success') {
        $success_message = htmlspecialchars($_GET['message']);
    } else {
        $error_message = htmlspecialchars($_GET['message']);
    }
    // Set a flag to remove these URL parameters via JS after display
    $clear_url_params = true;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kelola Jadwal Posyandu - Posyandu</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="../../css/style_kader_dashboard.css"> 

    <style>
        /* Modal Styling */
        .modal-overlay {
            display: none; /* Sembunyikan modal secara default */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            justify-content: center;
            align-items: center;
            z-index: 1000;
            overflow-y: auto; /* Agar bisa di-scroll jika kontennya panjang */
        }

.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative; /* Tetap relative untuk positioning internal jika diperlukan */
    animation: fadeIn 0.3s ease-out;
    /* Hilangkan margin: auto karena flexbox sudah menangani centering */
    /* margin: 20px auto; */ 
    
    max-height: 90vh; /* Batasi tinggi modal agar tidak melebihi viewport height */
    overflow-y: auto; /* Aktifkan scroll di dalam modal jika kontennya melebihi max-height */
    flex-shrink: 0; /* Penting agar modal tidak menyusut jika ada ruang terbatas */
}

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }

        .modal-header h3 {
            margin: 0;
            font-size: 1.8rem;
            color: #333;
        }

        .modal-close-btn {
            font-size: 2rem;
            cursor: pointer;
            color: #888;
            transition: color 0.2s ease;
        }

        .modal-close-btn:hover {
            color: #333;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }

        .form-group input[type="text"],
        .form-group input[type="date"],
        .form-group input[type="time"],
        .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            box-sizing: border-box;
            transition: border-color 0.2s ease;
        }

        .form-group input[type="text"]:focus,
        .form-group input[type="date"]:focus,
        .form-group input[type="time"]:focus,
        .form-group textarea:focus {
            border-color: #007bff;
            outline: none;
        }

        .form-group textarea {
            resize: vertical;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 30px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }

        .form-actions button {
            padding: 10px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }

        .btn-primary {
            background-color: #007bff;
            color: #fff;
            border: 1px solid #007bff;
        }

        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }

        .btn-secondary {
            background-color: #6c757d;
            color: #fff;
            border: 1px solid #6c757d;
        }

        .btn-secondary:hover {
            background-color: #5a6268;
            border-color: #545b62;
        }

        /* Animation */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                padding: 20px;
            }

            .modal-header h3 {
                font-size: 1.5rem;
            }

            .form-actions {
                flex-direction: column;
                gap: 10px;
            }

            .form-actions button {
                width: 100%;
            }
        }

        /* --- Styles for the table (ADDED/MODIFIED) --- */
        .data-table {
            width: 100%;
            border-collapse: collapse; /* Menghilangkan spasi antar sel */
            margin-top: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Sedikit bayangan senada dengan modal */
            border-radius: 8px; /* Sudut membulat */
            overflow: hidden; /* Penting agar border-radius berfungsi pada thead/tbody */
            background-color: #fff; /* Latar belakang tabel */
        }

        .data-table thead {
            background-color: #f8f9fa; /* Warna latar belakang header */
            border-bottom: 1px solid #dee2e6; /* Garis bawah header */
        }

        .data-table th {
            padding: 15px;
            text-align: left;
            font-weight: 600;
            color: #333;
            font-size: 1rem;
            border-bottom: 1px solid #dee2e6;
        }

        .data-table tbody tr {
            border-bottom: 1px solid #e9ecef; /* Garis pemisah antar baris */
        }

        .data-table tbody tr:last-child {
            border-bottom: none; /* Tidak ada garis bawah di baris terakhir */
        }

        .data-table tbody tr:hover {
            background-color: #f1f7fe; /* Warna highlight saat hover, senada dengan biru primer */
        }

        .data-table td {
            padding: 12px 15px;
            vertical-align: middle;
            color: #495057;
            font-size: 0.95rem;
        }

        .data-table .action-buttons {
            text-align: center;
            white-space: nowrap; /* Mencegah tombol turun baris */
        }

        .data-table .action-btn {
            background: none;
            border: none;
            color: #28a745; /* Warna ikon biru senada dengan tombol primer */
            cursor: pointer;
            font-size: 1.1rem;
            margin: 0 5px;
            transition: color 0.2s ease, transform 0.2s ease;
            padding: 5px; /* Menambah area klik */
            border-radius: 4px; /* Sudut sedikit membulat pada tombol */
        }

        .data-table .action-btn:hover {
            color: #0056b3; /* Warna biru lebih gelap saat hover */
            transform: scale(1.1); /* Efek zoom kecil saat hover */
        }

        .data-table .action-btn .fa-trash-alt {
            color: #dc3545; /* Merah untuk tombol hapus */
        }

        .data-table .action-btn .fa-trash-alt:hover {
            color: #c82333;
        }

        /* Style for the new .btn-success (ADDED) */
        .btn-success {
            display: inline-flex; /* Agar ikon dan teks sejajar */
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            background-color: #28a745; /* Warna hijau Bootstrap success */
            color: #fff;
            border: 1px solid #28a745;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
            gap: 8px; /* Jarak antara ikon dan teks */
            margin-bottom: 20px; /* Memberi jarak bawah agar tidak terlalu dekat dengan tabel */
        }

        .btn-success:hover {
            background-color: #218838; /* Warna hijau lebih gelap saat hover */
            border-color: #1e7e34;
        }

        /* Responsive Table */
        @media (max-width: 768px) {
            .data-table thead {
                display: none; /* Sembunyikan thead di layar kecil */
            }

            .data-table, .data-table tbody, .data-table tr, .data-table td {
                display: block; /* Buat elemen tabel jadi block untuk stack */
                width: 100%;
            }

            .data-table tr {
                margin-bottom: 15px;
                border: 1px solid #dee2e6;
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            }

            .data-table td {
                text-align: right;
                padding-left: 50%; /* Ruang untuk label */
                position: relative;
                border: none; /* Hapus border antar sel */
                border-bottom: 1px solid #eee; /* Beri border antar 'baris' dalam satu kartu */
            }

            .data-table td:last-child {
                border-bottom: none;
            }

            .data-table td::before {
                content: attr(data-label); /* Tampilkan label dari data-label attribute */
                position: absolute;
                left: 15px;
                width: calc(50% - 30px); /* Sesuaikan lebar label */
                padding-right: 10px;
                white-space: nowrap;
                font-weight: 600;
                text-align: left;
                color: #555;
            }

            /* Adjust action buttons for mobile */
            .data-table .action-buttons {
                text-align: left; /* Biarkan tombol aksi di kiri */
                padding-left: 15px; /* Sesuaikan padding */
                padding-bottom: 15px;
                display: flex;
                justify-content: flex-end; /* Rata kiri */
                gap: 10px; /* Jarak antar tombol */
            }
        }
    </style>
</head>
<body>
    
<header class="main-header">
    <div class="header-left">
    <a href="../"><i class="fas fa-arrow-left"></i></a>
    </div>
    <div class="header-right">
        <a href="#" title="Notifikasi"><i class="far fa-bell"></i></a> 
        <a href="../../auth/kader_logout.php" title="Logout"><i class="fas fa-sign-out-alt"></i></a> 
    </div>
</header>

<main class="main-content-area kelola-jadwal-page">
    <section class="form-card">
        <h2>Jadwal Posyandu</h2>
        <p>Atur jadwal kegiatan posyandu di desa Anda.</p>

        <?php if (!empty($success_message)) { ?>
            <div class="alert alert-success"><?php echo $success_message; ?></div>
        <?php } ?>
        <?php if (!empty($error_message)) { ?>
            <div class="alert alert-danger"><?php echo $error_message; ?></div>
        <?php } ?>

        <button class="btn-success" onclick="openJadwalModal('add')">
            <i class="fas fa-plus"></i> Tambah Jadwal Baru
        </button>

        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Nama Posyandu</th>
                        <th>Tanggal</th>
                        <th style="width: 100px; text-align: center;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (count($jadwal_list) > 0): ?>
                        <?php foreach ($jadwal_list as $jadwal): ?>
                            <tr>
                                <td data-label="Nama Posyandu"><?php echo htmlspecialchars($jadwal['nama_posyandu']); ?></td>
                                <td data-label="Tanggal">
                                    <?php 
                                    // Format tanggal untuk tampilan yang lebih baik
                                    echo htmlspecialchars(date('d F Y', strtotime($jadwal['tanggal_mulai'])));
                                    ?>
                                </td>
                                <td data-label="Aksi" class="action-buttons">
                                    <button class="action-btn" onclick="editJadwal(<?php echo $jadwal['id']; ?>)" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn" onclick="confirmDelete(<?php echo $jadwal['id']; ?>)" title="Hapus">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="3" style="text-align: center;">Belum ada jadwal yang ditambahkan untuk desa ini.</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </section>
</main>


<div id="jadwalModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">Tambah Jadwal Baru</h3>
            <span class="modal-close-btn" onclick="closeJadwalModal()">&times;</span>
        </div>
        <form id="jadwalForm" action="index.php" method="POST">
            <input type="hidden" name="action" id="formAction" value="add">
            <input type="hidden" name="id" id="jadwalId">
            
            <div class="form-group">
                <label for="nama_posyandu" class="required">Nama Posyandu / Nama Kegiatan:</label>
                <input type="text" id="nama_posyandu" name="nama_posyandu" required placeholder="Contoh: Posyandu Melati, Imunisasi Balita">
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="tanggal_mulai" class="required">Tanggal Mulai:</label>
                        <input type="date" id="tanggal_mulai" name="tanggal_mulai" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="tanggal_selesai">Tanggal Selesai (Opsional):</label>
                        <input type="date" id="tanggal_selesai" name="tanggal_selesai">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="waktu_mulai" class="required">Waktu Mulai:</label>
                        <input type="time" id="waktu_mulai" name="waktu_mulai" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="waktu_selesai">Waktu Selesai (Opsional):</label>
                        <input type="time" id="waktu_selesai" name="waktu_selesai">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="lokasi_detail" class="required">Lokasi Detail:</label>
                <textarea id="lokasi_detail" name="lokasi_detail" rows="3" required placeholder="Contoh: Balai Desa, Jl. Mawar No. 12 RT 03 RW 01"></textarea>
            </div>

            <div class="form-actions">
                <button type="button" class="btn-secondary" onclick="closeJadwalModal()">Batal</button>
                <button type="submit" class="btn-primary">Simpan Jadwal</button>
            </div>
        </form>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // Ambil referensi elemen modal dan form
    const jadwalModal = document.getElementById('jadwalModal');
    const modalContent = jadwalModal.querySelector('.modal-content'); // Ambil konten modal yang bisa discroll
    const modalHeader = jadwalModal.querySelector('.modal-header'); // Ambil header modal untuk tinggi sticky

    const modalTitle = document.getElementById('modalTitle');
    const jadwalForm = document.getElementById('jadwalForm');
    const formAction = document.getElementById('formAction');
    const jadwalId = document.getElementById('jadwalId');

    // Ambil referensi input form
    const namaPosyanduInput = document.getElementById('nama_posyandu');
    const tanggalMulaiInput = document.getElementById('tanggal_mulai');
    const tanggalSelesaiInput = document.getElementById('tanggal_selesai');
    const waktuMulaiInput = document.getElementById('waktu_mulai');
    const waktuSelesaiInput = document.getElementById('waktu_selesai');
    const lokasiDetailInput = document.getElementById('lokasi_detail');

    // Flag dari PHP untuk membersihkan parameter URL (jika ada setelah redirect)
    const clearUrlParams = <?php echo json_encode($clear_url_params ?? false); ?>; // Pastikan variabel ada jika diakses sebelum didefinisikan di PHP

    /**
     * Membuka modal dengan mode 'add' atau 'edit'.
     * @param {string} mode - 'add' untuk menambah, 'edit' untuk mengedit.
     */
    function openJadwalModal(mode) {
        if (mode === 'add') {
            modalTitle.innerText = 'Tambah Jadwal Baru';
            formAction.value = 'add';
            jadwalId.value = '';
            jadwalForm.reset(); // Bersihkan form
            // Pastikan input benar-benar kosong
            namaPosyanduInput.value = '';
            tanggalMulaiInput.value = '';
            tanggalSelesaiInput.value = '';
            waktuMulaiInput.value = '';
            waktuSelesaiInput.value = '';
            lokasiDetailInput.value = '';
            
        } else if (mode === 'edit') {
            modalTitle.innerText = 'Edit Jadwal';
            formAction.value = 'edit';
            // Data untuk mode edit akan diisi oleh fungsi `editJadwal` melalui AJAX.
        }
        jadwalModal.style.display = 'flex'; // Tampilkan modal
    }

    /**
     * Menutup modal.
     */
    function closeJadwalModal() {
        jadwalModal.style.display = 'none'; // Sembunyikan modal
        // Tidak ada reload halaman di sini. Jika perlu memperbarui tabel,
        // biasanya dilakukan dengan me-refetch data tabel via AJAX di sini.
        // Untuk saat ini, kita mengandalkan reload halaman penuh setelah pengiriman form.
    }

    /**
     * Mengambil data jadwal untuk diedit melalui AJAX dan mengisi form modal.
     * @param {number} id - ID jadwal yang akan diedit.
     */
    async function editJadwal(id) {
        try {
            // Fetch data menggunakan AJAX
            const response = await fetch(`kelola_jadwal_posyandu.php?fetch_edit_id=${id}`);
            const result = await response.json();

            if (result.success) {
                const data = result.data;
                // Isi field form dengan data yang diterima
                jadwalId.value = data.id;
                namaPosyanduInput.value = data.nama_posyandu;
                tanggalMulaiInput.value = data.tanggal_mulai;
                tanggalSelesaiInput.value = data.tanggal_selesai || ''; // Tangani null dengan string kosong
                waktuMulaiInput.value = data.waktu_mulai;
                waktuSelesaiInput.value = data.waktu_selesai || ''; // Tangani null dengan string kosong
                lokasiDetailInput.value = data.lokasi_detail;

                openJadwalModal('edit'); // Buka modal setelah data terisi
            } else {
                alert('Error: ' + result.message);
                console.error('Error fetching edit data:', result.message);
            }
        } catch (error) {
            alert('Terjadi kesalahan saat memuat data: ' + error.message);
            console.error('Fetch error:', error);
        }
    }

    /**
     * Konfirmasi penghapusan jadwal.
     * @param {number} id - ID jadwal yang akan dihapus.
     */
    function confirmDelete(id) {
        if (confirm("Apakah Anda yakin ingin menghapus jadwal ini?")) {
            window.location.href = `kelola_jadwal_posyandu.php?delete_id=${id}`;
        }
    }

    // --- Event listener saat DOM sudah dimuat ---
    document.addEventListener('DOMContentLoaded', function() {
        // Hapus parameter URL setelah menampilkan pesan (jika ada)
        if (clearUrlParams) {
            const url = new URL(window.location.href);
            url.searchParams.delete('status');
            url.searchParams.delete('message');
            window.history.replaceState({}, document.title, url.toString());
        }

        // --- Event listener untuk menutup modal jika klik di luar konten modal ---
        jadwalModal.addEventListener('click', function(event) {
            if (event.target === jadwalModal) {
                closeJadwalModal();
            }
        });

        // --- Keyboard avoidance logic for inputs inside modal ---
        const formInputs = jadwalForm.querySelectorAll('input, textarea'); // Pilih semua input dan textarea dalam form

        formInputs.forEach(input => {
            input.addEventListener('focus', function() {
                // Gunakan setTimeout untuk memberikan sedikit waktu bagi keyboard untuk muncul
                // sebelum menghitung posisi dan menggulir.
                setTimeout(() => {
                    // Dapatkan posisi input relatif terhadap viewport
                    const inputRect = this.getBoundingClientRect();
                    // Dapatkan posisi modal content relatif terhadap viewport
                    const modalContentRect = modalContent.getBoundingClientRect();
                    // Dapatkan tinggi sticky header
                    const headerHeight = modalHeader.offsetHeight;

                    // Perkirakan tinggi keyboard (bisa disesuaikan)
                    // Misalnya, asumsikan keyboard mengambil sekitar 40% dari tinggi viewport
                    const estimatedKeyboardHeight = window.innerHeight * 0.4; 
                    
                    // Area viewport yang "aman" di atas keyboard
                    const safeViewportBottom = window.innerHeight - estimatedKeyboardHeight;
                    // Batas atas area aman (di bawah header modal)
                    const safeViewportTop = modalContentRect.top + headerHeight + 20; // 20px buffer

                    // 1. Gulir ke atas jika input tertutup oleh keyboard
                    if (inputRect.bottom > safeViewportBottom) {
                        const scrollAmount = inputRect.bottom - safeViewportBottom + 20; // 20px buffer
                        modalContent.scrollTop += scrollAmount;
                    } 
                    // 2. Gulir ke bawah jika input tersembunyi di balik sticky header
                    // Pastikan inputRect.top tidak di atas modalContentRect.top yang terlihat
                    // dan inputTopInModal sudah dihitung berdasarkan posisi scroll saat ini
                    const inputTopInModal = inputRect.top - modalContentRect.top + modalContent.scrollTop;

                    if (inputTopInModal < modalContent.scrollTop + headerHeight + 10) { // 10px buffer di bawah header
                         // Gulirkan agar input terlihat di bawah header
                        const targetScroll = inputTopInModal - headerHeight - 10; // 10px buffer
                        if (targetScroll < modalContent.scrollTop) { // Hanya gulir ke atas jika memang perlu
                            modalContent.scrollTop = Math.max(0, targetScroll); // Pastikan tidak gulir negatif
                        }
                    }

                }, 150); // Penundaan sedikit lebih lama (150ms) untuk stabilitas
            });
        });
    });
</script>
</body>
</html>