<?php
	require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/session_bootstrap.php';
	if (empty($_SESSION['logged_in'])) {
		header('Location: https://togethere.cloud/login/');
		exit();
	}
	
	$host = "localhost";
	$db = "togethere_cloud";
	$user = "root";
	$pass = "HasloDoSQL";

	try {
		
$pdo->exec("SET NAMES utf8mb4 COLLATE utf8mb4_unicode_ci");
	} catch (PDOException $e) {
		die("Błąd połączenia z bazą danych: " . $e->getMessage());
	}
	
	$stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?");
	$stmt->execute([$_SESSION['user_id']]);
	$userData = $stmt->fetch(PDO::FETCH_ASSOC);

	$phoneCountryOptions = [
		'+48' => 'Polska (+48)',
		'+44' => 'Wielka Brytania (+44)',
		'+49' => 'Niemcy (+49)',
		'+33' => 'Francja (+33)',
		'+34' => 'Hiszpania (+34)',
		'+39' => 'Włochy (+39)',
		'+31' => 'Holandia (+31)',
		'+420' => 'Czechy (+420)',
		'+421' => 'Słowacja (+421)',
		'+1' => 'USA/Kanada (+1)'
	];
	$storedPhoneNumber = trim((string)($userData['phone_number'] ?? ''));
	$currentPhoneCountryCode = '';
	$currentPhoneNumber = $storedPhoneNumber;
	if ($storedPhoneNumber !== '' && preg_match('/^(\+\d{1,4})\s*(.*)$/', $storedPhoneNumber, $matches)) {
		$parsedCode = trim((string)$matches[1]);
		$parsedLocal = trim((string)$matches[2]);
		if (array_key_exists($parsedCode, $phoneCountryOptions)) {
			$currentPhoneCountryCode = $parsedCode;
			$currentPhoneNumber = $parsedLocal;
		}
	}
	
	if (!$userData) {
		session_destroy();
		header('Location: /login/');
		exit();
	}
?>
<!DOCTYPE html>
<html>
<head>
	<title>Informacje Profilowe | kontakt: wspolpraca@togethere.cloud</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<meta name="keywords" content="projekty przyszłości"/>
	<link rel="stylesheet" href="/css/header.css" type="text/css" media="all"/>
	<link rel="stylesheet" href="/css/footer.css" type="text/css" media="all"/>
	<link href="//fonts.googleapis.com/css?family=Lato:400,500,600,700,800,900" rel="stylesheet">
	<style>
		body {
			background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
			min-height: 100vh;
		}

		h1 {
			color: #1976d2;
			padding: 30px;
			margin-bottom: 20px;
			text-align: center;
			font-size: 2.5em;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
		}

		.nav-link {
			display: inline-block;
			margin: 0 auto 30px;
			padding: 12px 30px;
			background: linear-gradient(135deg, #42a5f5, #1976d2);
			color: white;
			text-decoration: none;
			border-radius: 25px;
			font-weight: 600;
			transition: all 0.3s ease;
			box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3);
		}

		.nav-link:hover {
			background: linear-gradient(135deg, #1976d2, #0d47a1);
			transform: translateY(-2px);
			box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4);
		}

		.nav-container {
			display: flex;
			width: 100%;
			text-align: center;
			justify-content: center;
			align-items: center;
			margin-bottom: 30px;
		}

		.nav-container .box {
			display: flex;
			gap: 15px;
		}

		nav.navigation {
			margin-top: 0px !important;
		}

		.settings-container {
			max-width: 100%;
			width: 100%;
			margin: 0 auto;
			padding: 20px;
		}

		.settings-section {
			background: white;
			border-radius: 15px;
			padding: 35px;
			margin-bottom: 30px;
			box-shadow: 0 10px 30px rgba(100, 181, 246, 0.2);
			width: 100%;
			max-width: 100%;
		}

		.settings-section h2 {
			color: #1976d2;
			font-size: 1.8em;
			margin-bottom: 25px;
			padding-bottom: 15px;
			border-bottom: 3px solid #64b5f6;
		}

		.form-group {
			margin-bottom: 25px;
			width: 100% !important;
		}

		form div label {
			padding-left: 5px !important;
		}

		.form-group label {
			display: block;
			color: #2c3e50;
			font-weight: 600;
			margin-bottom: 10px;
			font-size: 1.05em;
		}

		.form-group input[type="text"],
		.form-group input[type="email"],
		.form-group select {
			width: 100% !important;
			max-width: 100% !important;
			padding: 15px;
			border: 2px solid #64b5f6;
			border-radius: 8px;
			font-size: 1em;
			transition: all 0.3s ease;
			box-sizing: border-box;
		}

		.form-group input:focus,
		.form-group select:focus {
			outline: none;
			border-color: #1976d2;
			box-shadow: 0 0 10px rgba(25, 118, 210, 0.2);
		}

		.phone-row {
			display: grid;
			grid-template-columns: 220px 1fr;
			gap: 20px;
		}

		.form-row {
			display: grid;
			grid-template-columns: 1fr;
			gap: 20px;
		}

		.btn {
			padding: 15px 40px;
			border: none;
			border-radius: 8px;
			font-size: 1.1em;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
			width: 100% !important;
			max-width: 100% !important;
		}

		.btn-primary {
			background: linear-gradient(135deg, #42a5f5, #1976d2);
			color: white;
		}

		.btn-primary:hover {
			background: linear-gradient(135deg, #1976d2, #0d47a1);
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(25, 118, 210, 0.4);
		}

		.btn-secondary {
			background: #95a5a6;
			color: white;
		}

		.btn-secondary:hover {
			background: #7f8c8d;
		}

		.button-group {
			display: flex;
			flex-direction: column;
			gap: 15px;
			margin-top: 25px;
		}

		@media (max-width: 768px) {
			h1 {
				font-size: 2em;
				padding: 20px;
			}

			.settings-section {
				padding: 25px 20px;
			}

			.form-row {
				grid-template-columns: 1fr;
			}

			.phone-row {
				grid-template-columns: 1fr;
			}

			.button-group {
				flex-direction: column;
			}

			.btn {
				width: 100%;
			}
		}

		.footer-copyright {
			display: flex;
			flex-direction: column;
			gap: 40px;
		}

		div.polices p {
			color: black !important;
			font-weight: bold !important;
		}

		div.polices p a {
			text-decoration: none !important;
			font-size: 1rem;
		}
	</style>
</head>
<body>
    <?php
        if (!empty($_SESSION['logged_in'])) {
            include $_SERVER['DOCUMENT_ROOT'].'/global/navLogined.php';
        } else {
            include $_SERVER['DOCUMENT_ROOT'].'/global/navNoLogined.php';
        }
    ?>

	<main>
		<div class="settings-container">
			<h1>⚙️ Ustawienia Konta</h1>
			<div class="nav-container">
				<div class="box">
					<a href="/account/profile/" class="nav-link">👤 Informacje profilowe</a>
					<a href="/account/settings/" class="nav-link">⚙️ Pozostałe ustawienia</a>
				</div>
			</div>

			<?php if (isset($_GET['success']) && $_GET['success'] === 'personal_data'): ?>
				<div style="background: #d4edda; color: #155724; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; border-left: 4px solid #28a745;">
					✅ Dane osobowe zostały zaktualizowane!
				</div>
			<?php endif; ?>

			<?php if (isset($_GET['error'])): ?>
				<div style="background: #f8d7da; color: #721c24; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; border-left: 4px solid #dc3545;">
					❌ <?= htmlspecialchars($_GET['error']) ?>
				</div>
			<?php endif; ?>

			<div class="settings-section" id="profile">
				<h2>👤 Dane osobowe</h2>
				<form method="POST" action="/account/settings/update_settings.php">
					<input type="hidden" name="action" value="personal_data">
					<div class="form-row">
						<div class="form-group">
							<label for="firstName">Imię</label>
							<input type="text" id="firstName" name="first_name" value="<?= htmlspecialchars($userData['first_name'] ?? '') ?>" required>
						</div>
						<div class="form-group">
							<label for="lastName">Nazwisko</label>
							<input type="text" id="lastName" name="last_name" value="<?= htmlspecialchars($userData['last_name'] ?? '') ?>" required>
						</div>
					</div>
					<div class="form-group">
						<label for="email">Adres e-mail</label>
						<input type="email" id="email" value="<?= htmlspecialchars($userData['email']) ?>" disabled>
						<small style="color: #7f8c8d;">
							<a href="/account/settings/change_email_request.php" style="color: #2196F3; text-decoration: none; font-weight: 600;">
								📧 Zmień adres email
							</a>
						</small>
					</div>
					<div class="form-group">
						<label for="username">Nazwa użytkownika</label>
						<input type="text" id="username" name="username" value="<?= htmlspecialchars($userData['username']) ?>" required maxlength="20" pattern="[A-Za-z0-9_&!]{1,20}" title="Dozwolone: litery angielskie, cyfry, _, &, ! (max 20 znaków)">
					</div>
					<div class="phone-row">
						<div class="form-group">
							<label for="phoneCountryCode">Kierunkowy państwa</label>
							<select id="phoneCountryCode" name="phone_country_code">
								<option value="">Wybierz kierunkowy</option>
								<?php foreach ($phoneCountryOptions as $code => $label): ?>
									<option value="<?= htmlspecialchars($code, ENT_QUOTES, 'UTF-8') ?>" <?= $currentPhoneCountryCode === $code ? 'selected' : '' ?>>
										<?= htmlspecialchars($label, ENT_QUOTES, 'UTF-8') ?>
									</option>
								<?php endforeach; ?>
							</select>
						</div>
						<div class="form-group">
							<label for="phoneNumber">Numer telefonu</label>
							<input type="text" id="phoneNumber" name="phone_number" value="<?= htmlspecialchars($currentPhoneNumber, ENT_QUOTES, 'UTF-8') ?>" maxlength="20" inputmode="numeric" pattern="[0-9\s\-]{4,20}" title="Dozwolone cyfry, spacje i myślnik">
						</div>
					</div>
					<div class="button-group">
						<button type="submit" class="btn btn-primary">Zapisz zmiany</button>
						<button type="button" class="btn btn-secondary" onclick="location.reload()">Anuluj</button>
					</div>
				</form>
			</div>
		</div>
	</main>

	<?php
        if (!empty($_SESSION['logged_in'])) {
            include $_SERVER['DOCUMENT_ROOT'].'/global/footerLogined.php';
        } else {
            include $_SERVER['DOCUMENT_ROOT'].'/global/footerNoLogined.php';
        }
    ?>
</body>
</html>

