// JavaScript Document

const timeInput = document.getElementById('timeInput');
const dropdown = document.getElementById('timeDropdown');
const minuteInterval = 5 // Will interval of 5 min

timeInput.addEventListener('click', () => {
    dropdown.innerHTML = ''; // Clear previous options
    dropdown.style.display = 'block';
    generateTimeOptions();
});

document.addEventListener('click', (e) => {
    if (!e.target.closest('.timepicker')) {
        dropdown.style.display = 'none';
    }
});

function generateTimeOptions() {
    for (let h = 0; h < 24; h++) {
        for (let m = 0; m < 60; m += minuteInterval) {
            const hour = h.toString().padStart(2, '0');
            const minute = m.toString().padStart(2, '0');
            const option = document.createElement('div');
            option.textContent = `${hour}:${minute}`;
            option.addEventListener('click', () => {
                timeInput.value = `${hour}:${minute}`;
                dropdown.style.display = 'none';
            });
            dropdown.appendChild(option);
        }
    }
}