<?php
session_start();
require 'db.php';

if (!isset($_SESSION['user_id'])) {
    header("Location: giris.php");
    exit;
}

$user_id = $_SESSION['user_id'];

$stmt = $pdo->prepare("SELECT fullname, username, email, reference_code FROM users WHERE id = ?");
$stmt->execute([$user_id]);
$user = $stmt->fetch();

?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <title>Ana Sayfa</title>
    <style>
        body {
            margin: 0;
            font-family: 'Arial', sans-serif;
            background-color: #fff;
            color: #333;

        }
        header {
            background-color: #fff;
            color: #333;
            text-align: center;
            padding: 20px;
        }
        header h1 {
            margin: 0;
            font-size: 24px;
        }
		
		.top-right {
            position: absolute;
            right: 25px;
            top: 40px;
        }

        .material-icons {
            cursor: pointer;
			
        }
		
		.material-icons:active {
            cursor: pointer;
			color: #459D7A
        }
		
        .menu {
            padding: 20px;
            background-color: #fff;
        }
        .menu-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 20px;
            padding: 20px 0;
        }
        .menu-item {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.2s ease;
        }
        .menu-item img {
			width: 140px; 
			height: 140px; 
			border-radius: 12px;
			border-width: 3px; 
			border-color: #459D7A;
			border-style: solid;
        }
        .menu-item p {
            margin: 10px 0;
        }
        .menu-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }
        .footer-menu {
            display: flex;
            justify-content: space-around;
            padding: 20px 0;
            background-color: #fff;
            position: fixed;
            bottom: 0;
            width: 100%;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
		.active {
			font-weight:600;
            color: #459D7A !important;
			
        }
        .footer-menu a {
            text-align: center;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #333;
        }
		
        .footer-menu a i {
            font-size: 24px; /* İkon boyutu */
        }
        .footer-menu a span {
            font-size: 12px;
            margin-top: 4px;
			
        }
		
		
.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* İçerikleri eşit olarak ayır */
    padding: 20px;
}

.profile-picture {
    background-color: #4CAF50; /* Yeşil arka plan */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    color: white;
}

.profile-info {
    flex-grow: 1;
    margin-left: 20px; /* Resim ile bilgiler arası boşluk */
}

.edit-profile-button {
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.accordion-container {
    margin: 20px 0;
}

.accordion-item {
    background-color: #FFFFFF;
    margin-bottom: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

.accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    outline: none;
    width: 90%;
    text-align: left;
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
}

.accordion-button:hover {
    background-color: #f6f6f6;
}

.accordion-content {
    display: none;
    padding: 15px;
    border-top: 1px solid #eeeeee;
}

.left-icon, .right-icon {
    font-size: 24px;
    color: #6e6e6e;
}
.man{
	font-size: 44px;
}
    </style>

</head>
<body>

<header>
    <div class="top-right">
        <i class="material-icons">notifications</i>
    </div>
    <div>...</div> <!-- Diğer kullanıcı bilgileri ve bildirim simgesi için yer -->
</header>
<div class="profile-container">
    <div class="profile-header">
        <div class="profile-picture">
            <i class="material-icons man">account_circle</i>
        </div>
        <div class="profile-info">
            <h2><?php echo htmlspecialchars($user['fullname']); ?> (<?php echo htmlspecialchars($user['username']); ?>)</h2>
            <p><?php echo htmlspecialchars($user['email']); ?></p>
        </div>
    </div>
</div>

    <div class="accordion-container">
   <!-- <div class="accordion-item">
        <div class="accordion-button" onclick="toggleAccordion('payment')">
            <i class="material-icons left-icon">payment</i>
            Ödeme
            <i class="material-icons right-icon">chevron_right</i>
        </div>
        <div class="accordion-content" id="payment">
            <!-- Ödeme ile ilgili içerik 
            Ödeme bilgileriniz ve geçmiş işlemleriniz burada yer alacak.
        </div>
    </div> -->

    <div class="accordion-item">
        <div class="accordion-button" onclick="toggleAccordion('refcode')">
            <i class="material-icons left-icon">vpn_key</i>
            Referans Kodu
            <i class="material-icons right-icon">chevron_right</i>
        </div>
        <div class="accordion-content" id="refcode">
            <!-- Referans kodu ile ilgili içerik -->
           	<p>Referans Kodu: <?php echo htmlspecialchars($user['reference_code']); ?></p>
        </div>
    </div>

   <!-- <div class="accordion-item">
        <div class="accordion-button" onclick="toggleAccordion('settings')">
            <i class="material-icons left-icon">settings</i>
            Ayarlar
            <i class="material-icons right-icon">chevron_right</i>
        </div>
        <div class="accordion-content" id="settings">
            <!-- Ayarlar ile ilgili içerik 
            
        </div>
    </div> -->

    <div class="accordion-item">
        <div class="accordion-button" onclick="toggleAccordion('support')">
            <i class="material-icons left-icon">support_agent</i>
            Destek
            <i class="material-icons right-icon">chevron_right</i>
        </div>
        <div class="accordion-content" id="support">
            <!-- Destek ile ilgili içerik -->
            info@cvsgroup.com.tr
        </div>
    </div>
</div>

<div class="footer-menu">
    <a href="dashboard.php" >
        <i class="material-icons">home</i>
        <span>Ana Sayfa</span>
    </a>
    <a href="sale_list.php">
        <i class="material-icons">monetization_on</i>
        <span>Satışlar</span>
    </a>
    <a href="profil.php" class="active">
        <i class="material-icons">person</i>
        <span>Profil</span>
    </a>
</div>

<script>
function toggleAccordion(id) {
    var content = document.getElementById(id);
    var accordions = document.getElementsByClassName('accordion-content');

    for (var i = 0; i < accordions.length; i++) {
        var openAccordion = accordions[i];
        if (openAccordion.id !== id) {
            openAccordion.style.display = 'none';
            openAccordion.previousElementSibling.querySelector('.right-icon').textContent = 'chevron_right';
        }
    }

    if (content.style.display === 'block') {
        content.style.display = 'none';
        content.previousElementSibling.querySelector('.right-icon').textContent = 'chevron_right';
    } else {
        content.style.display = 'block';
        content.previousElementSibling.querySelector('.right-icon').textContent = 'expand_less';
    }
}
</script>

</body>
</html>

