<?php
/* Template Name: Modern 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>
	/* Modern Template Styles */
	body {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		margin: 0;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
	}

	#maintenance-mode-container {
		text-align: center;
		width: 100%;
		max-width: 600px;
		padding: 40px;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
		border-radius: 20px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
		border: 1px solid rgba(255, 255, 255, 0.18);
	}

	h1 {
		font-size: 2.5em;
		margin-bottom: 20px;
		font-weight: 700;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	p {
		font-size: 1.2em;
		line-height: 1.6;
		margin-bottom: 30px;
		opacity: 0.9;
	}

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

	label {
		display: block;
		margin-bottom: 8px;
		font-weight: 600;
		text-align: left;
	}

	input[type="email"],
	textarea {
		width: 100%;
		padding: 12px 15px;
		margin-bottom: 20px;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.15);
		color: #fff;
		font-size: 16px;
		transition: all 0.3s ease;

		&:focus {
			outline: none;
			border-color: #fff;
			background: rgba(255, 255, 255, 0.25);
			box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
		}

		&::placeholder {
			color: rgba(255, 255, 255, 0.7);
		}
	}

	input[type="submit"] {
		background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
		color: #667eea;
		padding: 14px 25px;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		width: 100%;
		font-size: 16px;
		font-weight: 600;
		transition: all 0.3s ease;
		text-transform: uppercase;
		letter-spacing: 1px;

		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
		}

		&:active {
			transform: translateY(0);
		}
	}

	.message {
		margin-top: 20px;
		padding: 15px;
		border-radius: 8px;
		text-align: center;
	}

	.success {
		background: rgba(40, 167, 69, 0.2);
		color: #fff;
		border: 1px solid rgba(40, 167, 69, 0.3);
	}

	.error {
		background: rgba(220, 53, 69, 0.2);
		color: #fff;
		border: 1px solid rgba(220, 53, 69, 0.3);
	}

	@media (max-width: 768px) {
		#maintenance-mode-container {
			padding: 20px;
			margin: 20px;
		}

		h1 {
			font-size: 2em;
		}

		p {
			font-size: 1.1em;
		}
	}
</style>

<div id="maintenance-mode-container">
	<h1>🚧 Site Under Maintenance</h1>
	<p>We're currently upgrading our systems to serve you better. Please check back soon!</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 address">
			
			<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="Send Message">
		</form>

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

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