<?php
// PHP logic (optional for now, focus on design)
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tambah Data Kehamilan</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="../../css/style.css">

</head>
<body>

    <header class="page-header">
        <a href="../" class="back-btn"><i class="fas fa-arrow-left"></i></a>
        <h1>Kehamilan</h1>
    </header>

    <main class="main-content-area form-page">
        <div class="form-container">
            <form id="tambahDataKehamilanForm">
                <div class="form-group">
                    <label for="tanggalPeriksa">Tanggal Pemeriksaan</label>
                    <input type="date" id="tanggalPeriksa" name="tanggalPeriksa" class="form-control" required>
                </div>

                <div class="form-group">
                    <label for="systole">Systole (mmHG)</label>
                    <input type="number" id="systole" name="systole" class="form-control" placeholder="Cth: 120" required>
                </div>

                <div class="form-group">
                    <label for="diastole">Diastole (mmHG)</label>
                    <input type="number" id="diastole" name="diastole" class="form-control" placeholder="Cth: 80" required>
                </div>

                <div class="form-group">
                    <label for="uk">UK (Usia Kehamilan dalam Minggu)</label>
                    <input type="number" id="uk" name="uk" class="form-control" placeholder="Cth: 38" min="0" required>
                </div>

                <div class="form-group">
                    <label for="djj">DJJ (Denyut Jantung Janin per menit)</label>
                    <input type="number" id="djj" name="djj" class="form-control" placeholder="Cth: 145" min="0" required>
                </div>

                <div class="form-group">
                    <label for="tfu">TFU (Tinggi Fundus Uteri dalam cm)</label>
                    <input type="number" step="0.1" id="tfu" name="tfu" class="form-control" placeholder="Cth: 35.0" min="0" required>
                </div>

                <button type="submit" class="submit-btn">Simpan</button>
            </form>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Dapatkan referensi ke form
            const tambahDataKehamilanForm = document.getElementById('tambahDataKehamilanForm');

            // Handle form submission langsung ke AJAX, tanpa modal
            tambahDataKehamilanForm.addEventListener('submit', function(event) {
                event.preventDefault(); // Mencegah pengiriman form default (reload halaman)

                const formData = new FormData(tambahDataKehamilanForm); // Mengambil data form

                // Kirim data ke PHP backend menggunakan Fetch API
                fetch('../../api/submit_data_kehamilan.php', { // Pastikan path ini benar!
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    // Periksa apakah respons adalah JSON
                    const contentType = response.headers.get("content-type");
                    if (contentType && contentType.indexOf("application/json") !== -1) {
                        return response.json();
                    } else {
                        // Jika bukan JSON, log respons teks dan lempar error
                        console.error('Expected JSON response, but received:', response.text());
                        throw new Error('Server did not return a valid JSON response.');
                    }
                })
                .then(data => {
                    // Tangani respons dari server
                    if (data.status === 'success') {
                        alert(data.message); // Tampilkan pesan sukses
                        tambahDataKehamilanForm.reset(); // Kosongkan form
                        
                        // Redirect ke halaman lain setelah sukses
                        // Ganti '../' dengan path halaman tujuan Anda, misal '../data_perkembangan/index.php'
                        window.location.href = '../'; 

                    } else {
                        alert('Error: ' + data.message); // Tampilkan pesan error dari PHP
                    }
                })
                .catch(error => {
                    // Tangani error jaringan atau parsing
                    console.error('Fetch Error:', error);
                    alert('Terjadi kesalahan saat mengirim data. Silakan coba lagi. (Detail error di console browser)');
                });
            });
        });
    </script>
    <script src="../js/script.js"></script>
</body>
</html>