{{-- Modal pemberitahuan maintenance website SIMPMW --}}
<div class="modal fade" id="maintenanceModal" tabindex="-1" role="dialog" aria-labelledby="maintenanceModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		<div class="modal-content border-0 shadow-lg">
			<div class="modal-header text-white" style="background: linear-gradient(135deg, #986c35 0%, #8ac2f2 100%);">
				<h5 class="modal-title font-weight-bolder text-white" id="maintenanceModalLabel">
					<i class="fa fa-wrench mr-2 text-white"></i> Pemberitahuan Maintenance
				</h5>
				{{-- <button type="button" class="close" id="maintenanceModalCloseBtn" aria-label="Tutup">
					<span aria-hidden="true">&times;</span>
				</button> --}}
			</div>
			<div class="modal-body py-4 px-4">
				<div class="text-center mb-3">
					<p class="font-size-h6 text-dark mb-2">
						Website <strong>SIMPMW</strong> (Sistem Informasi Manajemen Program Mahasiswa Wirausaha) akan dilakukan <strong>perbaikan sistem</strong>.
					</p>
					<div class="bg-light rounded p-3 mb-3">
						<p class="mb-1"><strong>Jadwal Perbaikan Sistem:</strong></p>
						<p class="mb-0 font-size-h5 text-primary">
							Mulai: <strong>Pukul 11.00 WIB</strong><br>
							Perkiraan selesai: <strong>Pukul 17.00 WIB</strong>
						</p>
					</div>
					<p class="text-success font-weight-bold mb-1">Sebelum pukul 11.00 WIB website tetap dapat diakses.</p>
					<p class="text-muted mb-4">
						Mohon maaf atas ketidaknyamanan ini. Silakan kembali lagi pada waktu yang telah ditentukan.
					</p>
				</div>
				<div class="text-center">
					<p class="font-weight-bold text-dark mb-2" id="maintenanceCountdownLabel">Countdown:</p>
					<div id="maintenanceCountdown" class="d-flex justify-content-center flex-wrap gap-2 mb-0">
						<div class="bg-primary text-white rounded px-3 py-2 min-w-70px">
							<div id="countdown-hours" class="font-size-h3 font-weight-bolder">00</div>
							<small>Jam</small>
						</div>
						<div class="bg-primary text-white rounded px-3 py-2 min-w-70px">
							<div id="countdown-minutes" class="font-size-h3 font-weight-bolder">00</div>
							<small>Menit</small>
						</div>
						<div class="bg-primary text-white rounded px-3 py-2 min-w-70px">
							<div id="countdown-seconds" class="font-size-h3 font-weight-bolder">00</div>
							<small>Detik</small>
						</div>
					</div>
					<p class="text-muted font-size-sm mt-2 mb-0" id="countdown-description"></p>
				</div>
			</div>
			<div class="modal-footer border-0 bg-light">
				<button type="button" class="btn btn-primary font-weight-bold" id="maintenanceModalMengertiBtn">Mengerti</button>
			</div>
		</div>
	</div>
</div>

<style>
	#maintenanceCountdown .min-w-70px { min-width: 70px; }
	#maintenanceCountdown .gap-2 { gap: 0.5rem; }
</style>

<script>
(function() {
	// WIB = UTC+7
	function getWIBDate() {
		var now = new Date();
		return new Date(now.getTime() + (7 * 60 * 60 * 1000));
	}
	// 11:00 WIB = 04:00 UTC, 17:00 WIB = 10:00 UTC (WIB = UTC+7)
	function getTargetAndLabel() {
		var now = new Date();
		var wibNow = getWIBDate();
		var y = wibNow.getUTCFullYear(), m = wibNow.getUTCMonth(), d = wibNow.getUTCDate();
		var targetStart = new Date(Date.UTC(y, m, d, 4, 0, 0, 0));  // 11:00 WIB
		var targetEnd = new Date(Date.UTC(y, m, d, 10, 0, 0, 0));   // 17:00 WIB

		if (now < targetStart) {
			return { target: targetStart, label: 'Maintenance dimulai dalam:', desc: 'Sistem akan tidak tersedia mulai 11.00 WIB. Sebelum itu website tetap dapat diakses.' };
		}
		if (now < targetEnd) {
			return { target: targetEnd, label: 'Estimasi maintenance selesai dalam:', desc: 'Perkiraan selesai pukul 17.00 WIB' };
		}
		// Setelah 17:00 WIB: countdown ke 11:00 WIB besok
		var tomorrow = new Date(Date.UTC(y, m, d + 1, 6, 0, 0, 0));
		return { target: tomorrow, label: 'Maintenance berikutnya dimulai dalam:', desc: 'Jadwal berikutnya: 11.00 - 17.00 WIB' };
	}

	function pad(n) { return n < 10 ? '0' + n : n; }

	function updateCountdown() {
		var conf = getTargetAndLabel();
		var target = conf.target;
		var now = new Date();
		var diff = target - now;

		document.getElementById('maintenanceCountdownLabel').textContent = conf.label;
		var descEl = document.getElementById('countdown-description');
		if (descEl) descEl.textContent = conf.desc;

		if (diff <= 0) {
			document.getElementById('countdown-hours').textContent = '00';
			document.getElementById('countdown-minutes').textContent = '00';
			document.getElementById('countdown-seconds').textContent = '00';
		} else {
			var totalSec = Math.floor(diff / 1000);
			var hours = Math.floor(totalSec / 3600);
			var minutes = Math.floor((totalSec % 3600) / 60);
			var seconds = totalSec % 60;
			document.getElementById('countdown-hours').textContent = pad(hours);
			document.getElementById('countdown-minutes').textContent = pad(minutes);
			document.getElementById('countdown-seconds').textContent = pad(seconds);
		}
		// Di halaman utama (/), nonaktifkan tombol Mengerti saat sudah 11:00 WIB atau lewat
		var btnMengerti = document.getElementById('maintenanceModalMengertiBtn');
		if (btnMengerti && isHomePage()) {
			var duringMaintenance = isMaintenanceWindow();
			btnMengerti.disabled = duringMaintenance;
			btnMengerti.setAttribute('aria-disabled', duringMaintenance ? 'true' : 'false');
			if (duringMaintenance) {
				btnMengerti.classList.add('disabled');
				btnMengerti.onclick = function(e) { e.preventDefault(); };
			} else {
				btnMengerti.classList.remove('disabled');
				btnMengerti.onclick = function(e) { e.preventDefault(); closeMaintenanceModal(); };
			}
		}
	}

	// Apakah saat ini dalam jadwal maintenance (11:00 - 17:00 WIB)?
	function isMaintenanceWindow() {
		var now = new Date();
		var wibHours = (now.getUTCHours() + 7) % 24;
		var wibMinutes = now.getUTCMinutes();
		// 11:00 WIB = maintenance mulai, 17:00 WIB = selesai
		if (wibHours > 11) return wibHours < 17;
		if (wibHours === 11) return true;
		return false;
	}

	// Apakah halaman saat ini adalah halaman utama '/'?
	function isHomePage() {
		var path = (window.location.pathname || '/').replace(/\/$/, '') || '/';
		return path === '' || path === '/';
	}

	function closeMaintenanceModal() {
		var modal = document.getElementById('maintenanceModal');
		if (!modal) return;
		if (typeof jQuery !== 'undefined' && jQuery(modal).modal) {
			jQuery(modal).modal('hide');
		}
		modal.classList.remove('show');
		modal.style.display = 'none';
		modal.setAttribute('aria-hidden', 'true');
		document.body.classList.remove('modal-open');
		document.body.style.overflow = '';
		document.body.style.paddingRight = '';
		var backdrops = document.querySelectorAll('.modal-backdrop');
		for (var i = 0; i < backdrops.length; i++) backdrops[i].remove();
	}

	function showMaintenanceModal() {
		var modal = document.getElementById('maintenanceModal');
		if (modal && typeof jQuery !== 'undefined' && jQuery(modal).modal) {
			jQuery(modal).on('hidden.bs.modal', closeMaintenanceModal);
			jQuery(modal).modal('show');
		} else if (modal && modal.classList) {
			modal.classList.add('show');
			modal.style.display = 'block';
		}
		setTimeout(function() {
			var btnMengerti = document.getElementById('maintenanceModalMengertiBtn');
			var btnClose = document.getElementById('maintenanceModalCloseBtn');
			var onHomeDuringMaintenance = isHomePage() && isMaintenanceWindow();
			if (btnMengerti) {
				if (onHomeDuringMaintenance) {
					btnMengerti.disabled = true;
					btnMengerti.setAttribute('aria-disabled', 'true');
					btnMengerti.classList.add('disabled');
					btnMengerti.onclick = function(e) { e.preventDefault(); };
				} else {
					btnMengerti.onclick = function(e) { e.preventDefault(); closeMaintenanceModal(); };
				}
			}
			if (btnClose) btnClose.onclick = function(e) { e.preventDefault(); closeMaintenanceModal(); };
		}, 100);
	}

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', function() {
			updateCountdown();
			showMaintenanceModal();
			setInterval(updateCountdown, 1000);
		});
	} else {
		updateCountdown();
		showMaintenanceModal();
		setInterval(updateCountdown, 1000);
	}
})();
</script>
