<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Hospital Selection</title>
</head>
<body>
    <form>
        <label for="state">Select State:</label>
        <select id="state" name="state" onchange="updateHospitals()">
            <option value="">Select a state</option>
            <!-- Example options for Nigerian states -->
            <option value="Lagos">Lagos</option>
            <option value="Kano">Kano</option>
            <option value="Abuja">Abuja</option>
            <!-- Add more states as needed -->
        </select>

        <label for="hospital">Select Hospital:</label>
        <select id="hospital" name="hospital">
            <option value="">Select a hospital</option>
            <!-- Hospitals will be populated based on state selection -->
        </select>
    </form>

    <script>
        function updateHospitals() {
            var state = document.getElementById('state').value;
            var hospitalDropdown = document.getElementById('hospital');

            // Clear the hospital dropdown
            hospitalDropdown.innerHTML = '<option value="">Select a hospital</option>';

            if (state) {
                // Fetch the hospitals for the selected state
                fetch('get_hospitals.php?state=' + state)
                    .then(response => response.json())
                    .then(data => {
                        data.hospitals.forEach(provider_name => {
                            var option = document.createElement('option');
                            option.value = provider_name;  // set both value and text to provider_name
                            option.text = provider_name;   // set both value and text to provider_name
                            hospitalDropdown.add(option);
                        });
                    })
                    .catch(error => console.error('Error fetching hospitals:', error));
            }
        }
    </script>
</body>
</html>
