<?php
/* Template Name: Default Maintenance Mode Template */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

// Include necessary header
include 'header-maintenance.php';
$schedules_int = get_option('wpnts_schedules_maintenannotice_settings');
$schedules_interval = json_decode($schedules_int);

// Check the value of show_maintenance_contact_form
$show_maintenance_contact_form = $schedules_interval->show_maintenance_contact_form ?? false;
?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title><?php bloginfo('name'); ?> - Maintenance Mode</title>
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<style>
	/* Default Template Styles */
	body {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		margin: 0;
		font-family: Arial, sans-serif;
		background-color: #f5f5f5;
	}

	#maintenance-mode-container {
		text-align: center;
		width: 100%;
		max-width: 500px;
		padding: 30px;
		box-sizing: border-box;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	}

	h1 {
		font-size: 2em;
		color: #333;
		margin-bottom: 15px;
	}

	p {
		font-size: 1.2em;
		color: #666;
		margin-bottom: 25px;
	}

	form {
		margin-top: 20px;
		width: 100%;
		text-align: left;
	}

	label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
		text-align: left;
		color: #666;
	}

	input[type="email"],
	textarea {
		width: 100%;
		padding: 10px;
		margin-bottom: 15px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 16px;
	}

	input[type="submit"] {
		background-color: #4caf50;
		color: white;
		padding: 12px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		width: 100%;
		font-size: 16px;
		font-weight: bold;
		text-transform: uppercase;

		&:hover {
			background-color: #45a049;
		}
	}

	.message {
		margin-top: 15px;
		padding: 10px;
		border-radius: 4px;
	}

	.success {
		background-color: #d4edda;
		color: #155724;
	}

	.error {
		background-color: #f8d7da;
		color: #721c24;
	}

	@media (max-width: 480px) {
		#maintenance-mode-container {
			padding: 20px;
			margin: 15px;
		}
		
		h1 {
			font-size: 1.5em;
		}
		
		p {
			font-size: 1em;
		}
	}
</style>

<div id="maintenance-mode-container">
	<h1>🚧 Site Under Maintenance</h1>
	<p>We are currently performing maintenance on our website. Please check back shortly.</p>

	<?php if ( $show_maintenance_contact_form ) : ?>
		<form id="maintenance-query-form" method="post">
			<input type="hidden" name="nonce" value="<?php echo esc_attr(wp_create_nonce('wp_rest')); ?>">
			<label for="user_email">Your Email</label>
			<input type="email" name="user_email" id="user_email" required placeholder="Enter your email">
			
			<label for="user_message">Your Message</label>
			<textarea name="user_message" id="user_message" rows="4" required placeholder="How can we help you?"></textarea>
			
			<input type="submit" name="submit_query" value="Submit Query">
		</form>

		<div id="form-messages"></div>
	<?php endif; ?>
</div>

<?php wp_footer(); ?>
</body>
</html>