"use strict";

const common_fonts = [
	"Arial", "Times New Roman", "Courier New", "Verdana", "Georgia", "Palatino",
	"Bookman Old Style", "Tahoma", "Century Gothic", "Lucida Console", "Monaco",
	"Bradley Hand", "Calibri", "Cambria", "Candara", "Consolas", "Constantia",
	"Corbel", "Franklin Gothic Medium", "Gabriola"
];

document.addEventListener("DOMContentLoaded", () => {
	const startTimeInput = document.querySelector("#start_time");
	const endTimeInput = document.querySelector("#end_time");

	[startTimeInput, endTimeInput].forEach(input => {
		input.addEventListener("input", () => validateTimeFormat(input));
	});

	document.querySelectorAll(".show-form").forEach(option => {
		option.addEventListener("click", () => {
			document.querySelectorAll(".show-form").forEach(opt => opt.classList.remove("active-option"));
			option.classList.add("active-option");
		});
	});

	document.querySelectorAll("#font").forEach(fontSelect => {
		common_fonts.forEach(font => {
			const option = new Option(font, font);
			fontSelect.add(option);
		});
	});

	document.querySelectorAll(".show-form").forEach(button => {
		button.addEventListener("click", event => showForm(event.target.dataset.formId));
	});
});

function showForm(formId) {
	document.querySelectorAll("#forms-container form").forEach(form => {
		form.style.display = form.id === formId ? "block" : "none";
	});
}

function validateTimeFormat(input) {
	const regex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/;
	const isValid = regex.test(input.value);
	input.setCustomValidity(isValid ? "" : "Invalid time format. Please use HH:MM:SS");
	input.style.borderColor = isValid ? "#ccc" : "red";
}