<?php include __DIR__ . '/../layout/header.php'; ?>

<style>
.account-wrapper {
    max-width: var(--max-w);
    margin: 40px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
}

@media (max-width: 900px) {
    .account-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Sidebar Styles */
.account-sidebar {
    background: var(--surface-card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
    overflow: hidden;
}
.sidebar-user {
    padding: 30px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.sidebar-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px auto;
    border: 2px solid var(--orange);
    box-shadow: var(--shadow-glow);
}
.sidebar-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    margin: 0 auto 15px auto;
    box-shadow: var(--shadow-glow);
}
.sidebar-user h3 {
    font-size: 18px;
    color: var(--text-1);
    margin: 0 0 5px 0;
}
.sidebar-user p {
    font-size: 13px;
    color: var(--text-3);
    margin: 0;
}

.sidebar-menu {
    list-style: none;
    padding: 10px 0;
    margin: 0;
}
.sidebar-menu li {
    margin: 0;
}
.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 25px;
    color: var(--text-2);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}
.sidebar-menu a:hover {
    background: var(--surface-2);
    color: var(--text-1);
}
.sidebar-menu a.active {
    background: var(--surface-2);
    color: var(--orange);
    border-left-color: var(--orange);
}
.sidebar-menu a i {
    width: 20px;
    text-align: center;
    font-size: 18px;
}

/* Main Content Styles */
.account-content {
    background: var(--surface-card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
    padding: 40px;
}
.account-content-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.account-content-header h1 {
    font-size: 24px;
    color: var(--text-1);
    margin: 0;
}
.account-content-header p {
    color: var(--text-3);
    margin: 5px 0 0 0;
    font-size: 14px;
}

/* Form Styles */
.profile-form .form-group {
    margin-bottom: 24px;
}
.profile-form label {
    display: block;
    font-size: 14px;
    color: var(--text-2);
    margin-bottom: 8px;
    font-weight: 500;
}
.profile-form input,
.profile-form textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 15px;
    color: var(--text-1);
    transition: all 0.3s var(--ease);
    font-family: inherit;
}
.profile-form input:focus,
.profile-form textarea:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-glow);
}
.profile-form input[readonly] {
    background: var(--surface-0);
    color: var(--text-3);
    cursor: not-allowed;
    border-color: transparent;
}

.profile-form textarea {
    resize: vertical;
    min-height: 120px;
}

.btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    padding: 16px 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    width: 100%;
    margin-top: 10px;
}
.btn-save:hover {
    background: var(--orange-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    padding: 16px;
    border-radius: var(--r-md);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

@media (max-width: 768px) {
    .account-content {
        padding: 24px;
    }
}
</style>

<div class="account-wrapper">
    <!-- Sidebar -->
    <aside class="account-sidebar">
        <div class="sidebar-user">
            <?php if (!empty($user->avatar)): ?>
                <img src="<?php echo htmlspecialchars($user->avatar); ?>" alt="Profil Resmi" referrerpolicy="no-referrer" class="sidebar-avatar">
            <?php else: ?>
                <div class="sidebar-avatar-placeholder">
                    <?php echo mb_substr(mb_strtoupper(htmlspecialchars($user->name), 'UTF-8'), 0, 1, 'UTF-8'); ?>
                </div>
            <?php endif; ?>
            <h3><?php echo htmlspecialchars($user->name); ?></h3>
            <p>Müşteri Hesabı</p>
        </div>
        <ul class="sidebar-menu">
            <li>
                <a href="<?php echo $baseUrl; ?>/profile" class="active">
                    <i class="fa fa-user"></i> Hesap Bilgilerim
                </a>
            </li>
            <li>
                <a href="<?php echo $baseUrl; ?>/profile/orders">
                    <i class="fa fa-shopping-bag"></i> Siparişlerim
                </a>
            </li>
            <li>
                <a href="<?php echo $baseUrl; ?>/cart">
                    <i class="fa fa-shopping-cart"></i> Sepetim
                </a>
            </li>
            <li>
                <a href="<?php echo $baseUrl; ?>/logout" style="color: #ef4444; margin-top: 10px; border-top: 1px solid var(--border);">
                    <i class="fa fa-sign-out"></i> Çıkış Yap
                </a>
            </li>
        </ul>
    </aside>

    <!-- Main Content -->
    <main class="account-content">
        
        <?php if (isset($_GET['success']) && $_GET['success'] == 1): ?>
        <div class="alert-success">
            <i class="fa fa-check-circle" style="font-size:20px;"></i>
            Profil bilgileriniz başarıyla güncellendi.
        </div>
        <?php endif; ?>

        <div class="account-content-header">
            <h1>Hesap Bilgilerim</h1>
            <p>Kişisel bilgilerinizi ve teslimat adresinizi bu alandan güncelleyebilirsiniz.</p>
        </div>

        <form action="<?php echo $baseUrl; ?>/profile/update" method="POST" class="profile-form">
            <div class="form-group">
                <label for="name">Ad Soyad</label>
                <input type="text" id="name" name="name" value="<?php echo htmlspecialchars($user->name); ?>" required>
            </div>
            
            <div class="form-group">
                <label for="email">E-posta Adresi <span style="font-size:12px; font-weight:normal; color:var(--text-3);">(Değiştirilemez)</span></label>
                <input type="email" id="email" value="<?php echo htmlspecialchars($user->email); ?>" readonly title="Google ile giriş yapıldığı için e-posta adresi değiştirilemez.">
            </div>

            <div class="form-group">
                <label for="phone">Telefon Numarası</label>
                <input type="tel" id="phone" name="phone" value="<?php echo htmlspecialchars($user->phone ?? ''); ?>" placeholder="Örn: 05xx xxx xx xx">
            </div>

            <div class="form-group">
                <label for="address">Teslimat / Fatura Adresi</label>
                <textarea id="address" name="address" placeholder="Siparişlerinizin gönderileceği adres bilgisini buraya girebilirsiniz..."><?php echo htmlspecialchars($user->address ?? ''); ?></textarea>
            </div>

            <button type="submit" class="btn-save">
                <i class="fa fa-save"></i> Bilgileri Kaydet
            </button>
        </form>
    </main>
</div>

<?php include __DIR__ . '/../layout/footer.php'; ?>
