<?php
/* Template Name: Elegant 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>
	/* Elegant Template Styles */
	body {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		margin: 0;
		font-family: 'Georgia', serif;
		background: #f8f9fa;
		color: #333;
	}

	#maintenance-mode-container {
		text-align: center;
		width: 100%;
		max-width: 550px;
		padding: 50px 40px;
		box-sizing: border-box;
		background: #fff;
		border-radius: 15px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
		position: relative;
		overflow: hidden;
	}

	#maintenance-mode-container::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 5px;
		background: linear-gradient(90deg, #6c5ce7, #a29bfe, #fd79a8, #fdcb6e);
	}

	h1 {
		font-size: 2.2em;
		margin-bottom: 25px;
		color: #2d3436;
		font-weight: normal;
	}

	p {
		font-size: 1.1em;
		line-height: 1.7;
		margin-bottom: 35px;
		color: #636e72;
	}

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

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

	input[type="email"],
	textarea {
		width: 100%;
		padding: 14px 16px;
		margin-bottom: 20px;
		box-sizing: border-box;
		border: 1px solid #ddd;
		border-radius: 6px;
		background: #f8f9fa;
		color: #333;
		font-size: 16px;
		transition: all 0.3s ease;

		&:focus {
			outline: none;
			border-color: #6c5ce7;
			background: #fff;
			box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
		}

		&::placeholder {
			color: #b2bec3;
		}
	}

	input[type="submit"] {
		background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
		color: #fff;
		padding: 15px 25px;
		border: none;
		border-radius: 6px;
		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(108, 92, 231, 0.3);
		}

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

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

	.success {
		background: #d4edda;
		color: #155724;
		border: 1px solid #c3e6cb;
	}

	.error {
		background: #f8d7da;
		color: #721c24;
		border: 1px solid #f5c6cb;
	}

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

		h1 {
			font-size: 1.8em;
		}

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

<div id="maintenance-mode-container">
	<h1>🛠️ System Maintenance in Progress</h1>
	<p>Our team is performing scheduled maintenance to enhance your experience. We appreciate your patience and will be 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">Email Address</label>
			<input type="email" name="user_email" id="user_email" required placeholder="your.email@example.com">
			
			<label for="user_message">Your Inquiry</label>
			<textarea name="user_message" id="user_message" rows="4" required placeholder="Please let us know how we can assist you"></textarea>
			
			<input type="submit" name="submit_query" value="Submit Inquiry">
		</form>

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

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