<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<section class="panel">
	<div class="actions" style="justify-content:flex-start; margin-top:0; margin-bottom:18px;">
		<a class="btn btn-outline" href="<?php echo site_url('inicio'); ?>">Regresar</a>
		<button class="btn" type="button" id="openNotify">Nueva notificacion</button>
	</div>

	<?php if (!empty($flash_message)) { ?>
		<div class="empty" style="background: #e9f7ef; color: #1f5c3a;"><?php echo htmlspecialchars($flash_message, ENT_QUOTES, 'UTF-8'); ?></div>
	<?php } ?>
	<?php if (!empty($flash_error)) { ?>
		<div class="empty" style="background: #fdecea; color: #7a2d2d;"><?php echo htmlspecialchars($flash_error, ENT_QUOTES, 'UTF-8'); ?></div>
	<?php } ?>
</section>

<div class="modal-backdrop" id="notifyModal" style="display:none;">
	<div class="modal-card" style="max-width:520px; width:100%;">
		<h2>Notificar</h2>
		<form method="post" action="<?php echo site_url('notificar'); ?>">
			<div class="field">
				<label for="message">Mensaje</label>
				<textarea id="message" name="message" placeholder="Escribe la notificacion..." required></textarea>
			</div>
			<div class="actions" style="justify-content:flex-end;">
				<button class="btn" type="submit">Aceptar</button>
				<button class="btn btn-outline" type="button" id="cancelNotify">Cancelar</button>
			</div>
		</form>
	</div>
</div>

<script>
	(function () {
		var modal = document.getElementById('notifyModal');
		var openBtn = document.getElementById('openNotify');
		var cancelBtn = document.getElementById('cancelNotify');
		var textarea = document.getElementById('message');

		function openModal() {
			if (!modal) { return; }
			modal.style.display = 'flex';
			if (textarea) { textarea.focus(); }
		}

		function closeModal() {
			if (!modal) { return; }
			modal.style.display = 'none';
		}

		if (openBtn) {
			openBtn.addEventListener('click', openModal);
		}
		if (cancelBtn) {
			cancelBtn.addEventListener('click', closeModal);
		}
		if (modal) {
			modal.addEventListener('click', function (event) {
				if (event.target === modal) {
					closeModal();
				}
			});
		}

		openModal();
	})();
</script>
