<?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>Entri Tumbuh Kembang</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="javascript:history.back()" class="back-btn"><i class="fas fa-arrow-left"></i></a>
        <h1>Tumbuh Kembang</h1>
    </header>

    <main class="main-content-area form-page">
        <div class="form-container">
            <form id="tambahDataTumbuhKembangForm">
                <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="usiaBulan">Usia (bulan)</label>
                    <input type="number" id="usiaBulan" name="usiaBulan" class="form-control" placeholder="Cth: 37" min="0" required>
                </div>

                <div class="form-group">
                    <label for="beratBadan">Berat Badan (kg)</label>
                    <input type="number" step="0.1" id="beratBadan" name="beratBadan" class="form-control" placeholder="Cth: 11.1" min="0" required>
                </div>

                <div class="form-group">
                    <label for="tinggiBadan">Tinggi Badan (cm)</label>
                    <input type="number" step="0.1" id="tinggiBadan" name="tinggiBadan" class="form-control" placeholder="Cth: 88.4" min="0" required>
                </div>

                <div class="form-group">
                    <label for="lingkarKepala">Lingkar Kepala (cm) (opsional)</label>
                    <input type="number" step="0.1" id="lingkarKepala" name="lingkarKepala" class="form-control" placeholder="Cth: 46.0">
                </div>

                <button type="submit" class="submit-btn">Simpan</button>
            </form>
        </div>
    </main>
<script>
        document.addEventListener('DOMContentLoaded', function() {
            const tambahDataTumbuhKembangForm = document.getElementById('tambahDataTumbuhKembangForm');

            tambahDataTumbuhKembangForm.addEventListener('submit', function(event) {
                event.preventDefault(); // Mencegah pengiriman form default

                const formData = new FormData(tambahDataTumbuhKembangForm);

                fetch('../../api/submit_data_tumbuh_kembang.php', { // Pastikan path ini benar!
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    const contentType = response.headers.get("content-type");
                    if (contentType && contentType.indexOf("application/json") !== -1) {
                        return response.json();
                    } else {
                        console.error('Expected JSON response, but received:', response.text());
                        throw new Error('Server did not return a valid JSON response.');
                    }
                })
                .then(data => {
                    if (data.status === 'success') {
                        alert(data.message);
                        tambahDataTumbuhKembangForm.reset();
                        // Redirect ke halaman data kesehatan setelah sukses
                        // Asumsi halaman data kesehatan ada di '../dataperkembangan/index.php'
                        window.location.href = '../';
                    } else {
                        alert('Error: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Fetch Error:', error);
                    alert('Terjadi kesalahan saat mengirim data. Silakan coba lagi. (Detail error di console browser)');
                });
            });
        });
    </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="../../js/script.js"></script> </body>
</html>