<?php
session_start();

$accessCode = '2307';

if (isset($_POST['guest_code'])) {
    if (trim($_POST['guest_code']) === $accessCode) {
        $_SESSION['wedding_access'] = true;
        header("Location: index.php");
        exit;
    } else {
        $error = "Kod nije ispravan.";
    }
}

if (!isset($_SESSION['wedding_access']) || $_SESSION['wedding_access'] !== true):
?>
<!DOCTYPE html>
<html lang="bs">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Emina i Admir | Pristup pozivnici</title>

	<style>
		body {
			width:100vw;
			height:100vh ;
			background-image: url('./static/img/codeboxdesktop.png');
			display:flex;
			background-size:cover;
			overflow-x:hidden;
		}

		.code-box {
		
			
			
			text-align: center;
		
			height:21.04vw;
			width:28.33vw;
				background-image: url('./static/img/coeboxbg.png');
					background-size:cover;
					position:fixed;
					position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
		}

		.code-box h1 {
			    font-family: var(--hoe);
    font-size: 1.25vw;
    font-weight: 400;
    color: #3D3D3D;
    
    width: fit-content;
    margin: auto;
    margin-top: 6.72vw;
    margin-bottom: var(--d14);
    line-height: 106%;
		}

		.code-box p {
		  font-family: var(--hoe);
    font-size:0.83vw;
    font-weight: 400;
    color: #676767;
    font-style: italic;
    width: fit-content;
    margin: auto;
    margin-top: 0.3vw;
    margin-bottom:1.46vw;
    line-height: 106%;
		}

		.code-box input {
			width: 10.10vw;
			padding: 10px;
			border: 1px solid #ABABAB;
			border-radius: 7px;
			font-size: 0.94vw;
			text-align: center;
			box-sizing: border-box;
			outline: none;
			color:#979797;
			font-family: var(--hoe);
		}

		.code-box button {
			margin-top: 15px;
			width:fit-content;
			padding:  9px 26px;
			border: 0;
			border-radius: 36px;
			background: #ABABAB;
			color:#F1F2F1;
			font-size: 0.94vw;
			cursor: pointer;
		}

		.error {
			color: #b00020;
			margin-top: 15px;
			font-size: 14px;
		}
		
		
		@media screen and (max-width:900px){
		    
		    body {
    width: 100vw;
    height: 100vh;
    background-image: url(./static/img/coeboxbgmob.png);
    display: flex;
    background-size: cover;
    overflow-x: hidden;
}
		    .code-box {
    text-align: center;
    height: 58.89vw;
    width: 79.44vw;
    background-image: url(./static/img/coeboxbg.png);
    background-size: cover;
    position: fixed;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.code-box h1 {
    font-family: var(--hoe);
    font-size: 6.25vw;
    font-weight: 400;
    color: #3D3D3D;
    width: fit-content;
    margin: auto;
    margin-top: 9.72vw;
    margin-bottom: var(--d14);
    line-height: 106%;
}


.code-box p {
    font-family: var(--hoe);
    font-size: 3.83vw;
    font-weight: 400;
    color: #676767;
    font-style: italic;
    width: fit-content;
    margin: auto;
    margin-top: 0.3vw;
    margin-bottom: 5.46vw;
    line-height: 106%;
}


.code-box input {
    width: 45.1vw;
    padding: 6px;
    border: 1px solid #ABABAB;
    border-radius: 9px;
    font-size: 3.94vw;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    color: #979797;
    font-family: var(--hoe);
}

.code-box button {
    margin-top: 8px;
    width: fit-content;
    padding: 9px 26px;
    border: 0;
    border-radius: 36px;
    background: #ABABAB;
    color: #F1F2F1;
    font-size: 3.14vw;
    cursor: pointer;
}
		    
		}
	</style>
</head>
<body>

<div class="code-box">
	<h1>Emina i Admir</h1>
	<p>Za pristup pozivnici unesite kod.</p>

	<form method="POST">
		<input type="text" name="guest_code" placeholder="Unesite kod" required> <br>
		<button type="submit">Pristupi pozivnici</button>
	</form>

	<?php if (!empty($error)): ?>
		<div class="error"><?php echo htmlspecialchars($error, ENT_QUOTES, 'UTF-8'); ?></div>
	<?php endif; ?>
</div>

</body>
</html>
<?php
exit;
endif;
?>

<!DOCTYPE html>
<html lang="bs">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Emina i Admir | 23.07.2026.</title>
		
		<meta property="og:image" content="./static/img/og.svg">
		<link rel="stylesheet" href="./static/style.css?v=2.2">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
		<link rel="icon" type="image/x-icon" href="./static/img/favicon.ico">
	</head>

	<body id="site-content">

		<div class="hero">
			<img src="./static/img/naslov.svg">
			<h3>23.07.2026.</h3>
		</div>

		<div class="main">

		<div class="rsvp-success-message" id="rsvp-success-message"></div>

			<div class="counter">
				<div class="count-day">
					<h1 id="days">0</h1>
					<p>dana</p>
				</div>

				<div class="count-hour">
					<h1 id="hours">0</h1>
					<p>sati</p>
				</div>

				<div class="count-minute">
					<h1 id="minutes">0</h1>
					<p>minuta</p>
				</div>
			</div>

			<div class="where">
				<p>Gdje?</p>

				<div class="left">
					<img class="pcshow" src="./static/img/gdje.png">
					<img class="pchide" src="./static/img/gdjemobilna.png">
				</div>

				<div class="right">
					<h1>Javorov Do</h1>

					<h2>
						Planina ima svoja pravila. Preporučujemo udobnu obuću za šumske staze
						i topliji sloj odjeće za trenutke kada sunce zađe iza vrhova.
					</h2>

					<a href="https://www.google.com/maps/search/?api=1&query=Javorov+Do" target="_blank" rel="noopener">
						<button type="button">vidi na mapi</button>
					</a>

					<h3 class="pcshow">Kada?</h3>
					<h4 class="pcshow">Ceremonija će početi u <strong>13:00h</strong></h4>

					<div class="kada-mobile pchide"></div>
				</div>
			</div>

			<div class="pisma">
				<img src="./static/img/koverta.svg" class="koverta pcshow">
				<img src="./static/img/kovertamobile.svg" class="koverta pchide">

				<div class="papir">

					<form action="rsvp_submit.php" method="POST" id="rsvp-form">
						<div class="autocomplete-wrap">
							<input 
								type="text" 
								name="ime_prezime" 
								id="ime_prezime"
								placeholder="klikni da upišeš"
								autocomplete="off"
								required
							><br>

							<input type="hidden" name="guest_id" id="guest_id">
							<input type="hidden" name="status" id="status-input" value="potvrdjeno">
							<input type="hidden" name="pratioci_ids" id="pratioci_ids">
							<input type="hidden" name="pratioci_names" id="pratioci_names">

							<div id="guest-suggestions" class="guest-suggestions"></div>
						</div>

						<div class="ispodinputa"></div>

						<label>Ime i prezime</label>

						<h1>
							Molimo da prisustvo potvrdite u što kraćem roku zbog dalje organizacije 
							<br><br> 
							Unaprijed hvala
						</h1>

						<h2>Dolazim</h2>

						<p class="dolazim">
							<strong id="dolazim-da" class="rsvp-option active" data-status="potvrdjeno">Da</strong> 
							/ 
							<span id="dolazim-ne" class="rsvp-option" data-status="otkazano">Ne</span>
						</p>

						<button type="submit">potvrdi</button>

						<p class="poruka">
							Ukoliko ste iz bilo kojeg razloga prinuđeni otkazati dolazak, ljubazno vas molimo da nas obavijestite što prije
						</p>
					</form>

				</div>

				<img class="hvala pcshow" src="./static/img/hvala.svg">
				<img class="hvala pchide" src="./static/img/hvalamobile.svg">
			</div>

			<footer>
				<p>Kontakt</p>
				<a href="tel:+38762369347">Emina +387 62 369 347 </a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="tel:+38762761588">Admir +387 62 761 588</a>
			</footer>

		</div>

		<div class="guest-popup-overlay" id="guest-popup-overlay"></div>

		<div class="guest-popup" id="guest-popup">
			<button type="button" class="guest-popup-close" id="guest-popup-close">×</button>

			<h3>Pratioci</h3>

			<p id="guest-popup-text">
				Možete dodati pratioce koji dolaze s vama.
			</p>

			<div id="companions-container"></div>

			<button type="button" id="add-companion-btn">Dodaj pratioca</button>
			<button type="button" id="save-companions-btn">Sačuvaj</button>
		</div>

		<style>
		.rsvp-success-message {
	width: 28.18vw;
	height: 10.63vw;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;

	background-image: url('./static/img/rsvp.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.92);

	z-index: 99999;

	transition:
		opacity 0.45s ease,
		transform 0.45s ease;
}

.rsvp-success-message.active {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 768px) {
	.rsvp-success-message {
		width: 82vw;
		height: 31vw;
	}
}

			.autocomplete-wrap {
				position: relative;
			}

			.guest-suggestions {
				position: absolute;
				left: 0;
				right: 0;
				top: 100%;
				background: #fff;
				z-index: 50;
				border-radius: 10px;
				box-shadow: 0 10px 35px rgba(0,0,0,0.12);
				overflow: hidden;
				display: none;
			}

			.guest-suggestion-item {
				padding: 10px 14px;
				cursor: pointer;
				font-size: 14px;
				color: #111;
				border-bottom: 1px solid #eee;
				text-align: left;
			}

			.guest-suggestion-item:hover {
				background: #f5f5f5;
			}

			.rsvp-option {
				cursor: pointer;
				opacity: 0.45;
			}

			.rsvp-option.active {
				opacity: 1;
				font-weight: bold;
				    padding-right: 0.3vw;
			}
			
			.rsvp.option:not(.active){
			    padding-left: 0.3vw;
			}
			    
			

			.guest-popup-overlay {
				position: fixed;
				inset: 0;
				background: rgba(0,0,0,0.45);
				z-index: 9998;
				display: none;
			}

			.guest-popup-overlay.active {
				display: block;
			}

			.guest-popup {
				position: fixed;
				left: 50%;
				top: 50%;
				width: calc(100% - 40px);
				max-width: 480px;
				transform: translate(-50%, -50%);
				background: #fff;
				z-index: 9999;
				border-radius: 18px;
				padding: 28px 22px;
				display: none;
				box-shadow: 0 20px 70px rgba(0,0,0,0.25);
				box-sizing: border-box;
			}

			.guest-popup.active {
				display: block;
			}

			.guest-popup h3 {
				margin-top: 0;
				margin-bottom: 8px;
				color: #111;
			}

			.guest-popup p {
				margin-top: 0;
				font-size: 14px;
				line-height: 1.5;
				color: #333;
			}

			.guest-popup-close {
				position: absolute;
				right: 14px;
				top: 10px;
				background: transparent;
				border: 0;
				font-size: 28px;
				line-height: 1;
				cursor: pointer;
				color: #111;
			}

			.companion-row {
				position: relative;
				margin-bottom: 12px;
			}

			.companion-row input {
				width: 100%;
				box-sizing: border-box;
				padding: 12px 10px;
				border: 1px solid #ddd;
				border-radius: 10px;
				outline: none;
				font-size: 15px;
			}

			.companion-suggestions {
				position: absolute;
				left: 0;
				right: 0;
				top: 100%;
				background: #fff;
				z-index: 10000;
				border-radius: 10px;
				box-shadow: 0 10px 35px rgba(0,0,0,0.12);
				overflow: hidden;
				display: none;
			}

			.companion-suggestion-item {
				padding: 10px 14px;
				cursor: pointer;
				font-size: 14px;
				color: #111;
				border-bottom: 1px solid #eee;
			}

			.companion-suggestion-item:hover {
				background: #f5f5f5;
			}

			#add-companion-btn,
			#save-companions-btn {
				margin-top: 8px;
				margin-right: 6px;
				padding: 10px 14px;
				border-radius: 10px;
				border: 0;
				cursor: pointer;
				background: #111;
				color: #fff;
			}

			#add-companion-btn {
				background: #f2f2f2;
				color: #111;
			}

			@media (max-width: 600px) {
				.guest-popup {
					max-width: calc(100% - 30px);
					padding: 26px 18px;
				}
			}
		</style>

		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
		<script src="./static/main.js?v=2.0"></script>

		<script>
			document.addEventListener('DOMContentLoaded', function () {
				const nameInput = document.getElementById('ime_prezime');
				const guestIdInput = document.getElementById('guest_id');
				const suggestionsBox = document.getElementById('guest-suggestions');

				const statusInput = document.getElementById('status-input');
				const rsvpOptions = document.querySelectorAll('.rsvp-option');

				const popup = document.getElementById('guest-popup');
				const overlay = document.getElementById('guest-popup-overlay');
				const closePopupBtn = document.getElementById('guest-popup-close');
				const companionsContainer = document.getElementById('companions-container');
				const addCompanionBtn = document.getElementById('add-companion-btn');
				const saveCompanionsBtn = document.getElementById('save-companions-btn');
				const popupText = document.getElementById('guest-popup-text');

				const pratiociIdsInput = document.getElementById('pratioci_ids');
				const pratiociNamesInput = document.getElementById('pratioci_names');

				let selectedGuest = null;

				function openPopup() {
					popup.classList.add('active');
					overlay.classList.add('active');
				}

				function closePopup() {
					popup.classList.remove('active');
					overlay.classList.remove('active');
				}

				function clearMainSuggestions() {
					suggestionsBox.innerHTML = '';
					suggestionsBox.style.display = 'none';
				}

				function clearCompanionData() {
					pratiociIdsInput.value = '';
					pratiociNamesInput.value = '';
					companionsContainer.innerHTML = '';
				}

				rsvpOptions.forEach(option => {
					option.addEventListener('click', function () {
						rsvpOptions.forEach(item => item.classList.remove('active'));
						this.classList.add('active');

						const status = this.getAttribute('data-status');
						statusInput.value = status;

						if (status === 'otkazano') {
							clearCompanionData();
							closePopup();
						} else {
							if (selectedGuest && parseInt(selectedGuest.broj_zvanica, 10) > 1) {
								loadGuestDetails(selectedGuest.id);
							}
						}
					});
				});

				function renderMainSuggestions(items) {
					suggestionsBox.innerHTML = '';

					if (!items.length) {
						suggestionsBox.style.display = 'none';
						return;
					}

					items.forEach(item => {
						const div = document.createElement('div');
						div.className = 'guest-suggestion-item';
						div.textContent = item.ime_prezime;

						div.addEventListener('click', function () {
							nameInput.value = item.ime_prezime;
							guestIdInput.value = item.id;
							selectedGuest = item;

							clearMainSuggestions();
							clearCompanionData();

							if (statusInput.value === 'potvrdjeno') {
								loadGuestDetails(item.id);
							}
						});

						suggestionsBox.appendChild(div);
					});

					suggestionsBox.style.display = 'block';
				}

				function loadGuestDetails(guestId) {
					fetch('ajax_guests.php?type=guest_details&guest_id=' + encodeURIComponent(guestId))
						.then(response => response.json())
						.then(data => {
							if (!data.success) {
								return;
							}

							selectedGuest = data.guest;
							clearCompanionData();

							const brojZvanica = parseInt(data.guest.broj_zvanica, 10);
							const companions = data.companions || [];

							if (brojZvanica > 1) {
								const maxPratilaca = Math.max(0, brojZvanica - 1);

								popupText.textContent = 'Vaša pozivnica važi za ukupno ' + brojZvanica + ' osobu/e. Možete odabrati do ' + maxPratilaca + ' pratioca.';

								if (companions.length > 0) {
									companions.forEach(companion => {
										addCompanionRow(companion);
									});
								} else {
									addCompanionRow();
								}

								openPopup();
							}
						})
						.catch(error => {
							console.error(error);
						});
				}

				function addCompanionRow(prefilled = null) {
					if (!selectedGuest) {
						return;
					}

					const brojZvanica = parseInt(selectedGuest.broj_zvanica, 10);
					const maxPratilaca = Math.max(0, brojZvanica - 1);
					const currentRows = companionsContainer.querySelectorAll('.companion-row').length;

					if (currentRows >= maxPratilaca) {
						return;
					}

					const row = document.createElement('div');
					row.className = 'companion-row';

					const input = document.createElement('input');
					input.type = 'text';
					input.placeholder = 'Ime i prezime pratioca';
					input.autocomplete = 'off';
					input.dataset.companionId = prefilled ? prefilled.id : '';

					if (prefilled) {
						input.value = prefilled.ime_prezime;
					}

					const suggestions = document.createElement('div');
					suggestions.className = 'companion-suggestions';

					row.appendChild(input);
					row.appendChild(suggestions);
					companionsContainer.appendChild(row);

					input.addEventListener('input', function () {
						const q = input.value.trim();
						input.dataset.companionId = '';

						if (!selectedGuest || q.length < 1) {
							suggestions.innerHTML = '';
							suggestions.style.display = 'none';
							return;
						}

						fetch(
							'ajax_guests.php?type=companions&nosioc_id=' +
							encodeURIComponent(selectedGuest.id) +
							'&q=' +
							encodeURIComponent(q)
						)
							.then(response => response.json())
							.then(items => {
								suggestions.innerHTML = '';

								if (!items.length) {
									suggestions.style.display = 'none';
									return;
								}

								items.forEach(item => {
									const div = document.createElement('div');
									div.className = 'companion-suggestion-item';
									div.textContent = item.ime_prezime;

									div.addEventListener('click', function () {
										input.value = item.ime_prezime;
										input.dataset.companionId = item.id;
										suggestions.innerHTML = '';
										suggestions.style.display = 'none';
									});

									suggestions.appendChild(div);
								});

								suggestions.style.display = 'block';
							})
							.catch(error => {
								console.error(error);
							});
					});
				}

				nameInput.addEventListener('input', function () {
					const q = nameInput.value.trim();

					guestIdInput.value = '';
					selectedGuest = null;
					clearCompanionData();

					if (q.length < 2) {
						clearMainSuggestions();
						return;
					}

					fetch('ajax_guests.php?type=main&q=' + encodeURIComponent(q))
						.then(response => response.json())
						.then(items => {
							renderMainSuggestions(items);
						})
						.catch(error => {
							console.error(error);
						});
				});

				addCompanionBtn.addEventListener('click', function () {
					addCompanionRow();
				});

				saveCompanionsBtn.addEventListener('click', function () {
					const rows = companionsContainer.querySelectorAll('.companion-row input');

					const ids = [];
					const names = [];

					rows.forEach(input => {
						const name = input.value.trim();
						const id = input.dataset.companionId || '';

						if (name !== '') {
							names.push(name);

							if (id !== '') {
								ids.push(id);
							}
						}
					});

					pratiociIdsInput.value = ids.join(',');
					pratiociNamesInput.value = names.join('\n');

					closePopup();
				});

				closePopupBtn.addEventListener('click', closePopup);
				overlay.addEventListener('click', closePopup);

				document.addEventListener('click', function (e) {
					if (!e.target.closest('.autocomplete-wrap')) {
						clearMainSuggestions();
					}

					if (!e.target.closest('.companion-row')) {
						document.querySelectorAll('.companion-suggestions').forEach(box => {
							box.innerHTML = '';
							box.style.display = 'none';
						});
					}
				});
			});
		</script>
		
		<script>
document.addEventListener('DOMContentLoaded', function () {
	const form = document.getElementById('rsvp-form');
	const successMessage = document.getElementById('rsvp-success-message');

	if (!form || !successMessage) {
		return;
	}

	form.addEventListener('submit', function (e) {
		e.preventDefault();

		const formData = new FormData(form);
		const submitButton = form.querySelector('button[type="submit"]');

		if (submitButton) {
			submitButton.disabled = true;
			submitButton.style.opacity = '0.6';
		}

		fetch(form.getAttribute('action'), {
			method: 'POST',
			body: formData,
			headers: {
				'X-Requested-With': 'XMLHttpRequest'
			}
		})
		.then(response => response.json())
		.then(data => {
		if (data.success) {
    successMessage.classList.add('active');

    const daOption = document.getElementById('dolazim-da');

    if (daOption && daOption.classList.contains('active')) {
        daOption.classList.remove('confirmed');

        void daOption.offsetWidth;

        daOption.classList.add('confirmed');
    }

    setTimeout(() => {
        successMessage.classList.remove('active');
    }, 3500);
}
		})
		.catch(error => {
			console.error(error);
			alert('Došlo je do greške. Pokušajte ponovo.');
		})
		.finally(() => {
			if (submitButton) {
				submitButton.disabled = false;
				submitButton.style.opacity = '1';
			}
		});
	});
});
</script>
	</body>
</html>