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

<?php ob_start(); ?>
    <h2 style="font-size: 24px; font-weight: 700; border-bottom: 2px solid var(--border); padding-bottom: 10px; margin-bottom: 30px; color: var(--text-1);">
        <i class="fa fa-shopping-cart"></i> Alışveriş Sepetim
    </h2>

    <?php if (!empty($cartItems)): ?>
        <div style="display: flex; flex-direction: column; gap: 20px;">
            <!-- Cart Table List -->
            <div style="background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);">
                <?php 
                $totalPrice = 0.0;
                foreach ($cartItems as $item): 
                    $prod = $item['product'];
                    $qty = $item['quantity'];
                    $itemPrice = $prod->getConvertedPrice();
                    $itemSubtotal = $itemPrice * $qty;
                    $totalPrice += $itemSubtotal;
                ?>
                    <div style="display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; gap: 15px;">
                        <!-- Product Info (Image + Title) -->
                        <div style="display: flex; align-items: center; gap: 15px; flex: 1; min-width: 250px;">
                            <div style="width: 60px; height: 60px; background-color: white; border: 1px solid var(--border-color); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 5px; flex-shrink: 0;">
                                <img src="<?php echo $prod->getMainImage($baseUrl); ?>" alt="<?php echo htmlspecialchars($prod->name); ?>" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                            </div>
                            <div>
                                <h4 style="font-size: 15px; font-weight: 600; margin-bottom: 4px;">
                                    <a href="<?php echo $baseUrl; ?>/<?php echo $prod->slug; ?>" style="color: var(--text-primary);">
                                        <?php echo htmlspecialchars($prod->name); ?>
                                    </a>
                                </h4>
                                <span style="font-size: 13px; color: var(--text-muted);">Model: <?php echo htmlspecialchars($prod->model); ?></span>
                            </div>
                        </div>

                        <!-- Quantity picker -->
                        <div style="display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; background-color: var(--bg-primary);">
                            <button type="button" onclick="updateCart('<?php echo $prod->id; ?>', <?php echo $qty - 1; ?>)" style="border: none; background: none; width: 32px; height: 32px; cursor: pointer; color: var(--text-secondary);"><i class="fa fa-minus"></i></button>
                            <span style="width: 35px; text-align: center; font-weight: 600; font-size: 14px; color: var(--text-primary);"><?php echo $qty; ?></span>
                            <button type="button" onclick="updateCart('<?php echo $prod->id; ?>', <?php echo $qty + 1; ?>)" style="border: none; background: none; width: 32px; height: 32px; cursor: pointer; color: var(--text-secondary);"><i class="fa fa-plus"></i></button>
                        </div>

                        <!-- Price column -->
                        <div style="text-align: right; min-width: 120px;">
                            <div style="font-size: 16px; font-weight: 700; color: var(--text-primary);">
                                <?php echo \App\Services\CurrencyService::format($itemSubtotal); ?>
                            </div>
                            <div style="font-size: 12px; color: var(--text-muted);">
                                Adet: <?php echo \App\Services\CurrencyService::format($itemPrice); ?>
                            </div>
                        </div>

                        <!-- Delete button -->
                        <div>
                            <button type="button" onclick="updateCart('<?php echo $prod->id; ?>', 0)" style="background: none; border: none; color: var(--color-danger); cursor: pointer; font-size: 16px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%;" title="Ürünü Sil">
                                <i class="fa fa-trash-o"></i>
                            </button>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <!-- Cart Summary Panel -->
            <div style="align-self: flex-end; width: 100%; max-width: 350px; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm);">
                <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;">Sipariş Özeti</h3>
                <div style="display: flex; flex-direction: column; gap: 10px; font-size: 14px; margin-bottom: 20px;">
                    <div style="display: flex; justify-content: space-between;">
                        <span style="color: var(--text-secondary);">Ara Toplam:</span>
                        <span style="font-weight: 600;"><?php echo \App\Services\CurrencyService::format($totalPrice); ?></span>
                    </div>
                    <div style="display: flex; justify-content: space-between;">
                        <span style="color: var(--text-secondary);">KDV (Hariç):</span>
                        <span style="font-weight: 600;">₺0,00</span>
                    </div>
                    <hr style="border: 0; border-top: 1px solid var(--border-color);">
                    <div style="display: flex; justify-content: space-between; font-size: 18px; font-weight: 700;">
                        <span>Toplam Tutar:</span>
                        <span style="color: var(--color-primary);"><?php echo \App\Services\CurrencyService::format($totalPrice); ?></span>
                    </div>
                </div>

                <a href="<?php echo $baseUrl; ?>/checkout" class="btn btn-primary" style="width:100%;">
                    <i class="fa fa-share"></i> Siparişe Devam Et
                </a>
            </div>
        </div>
    <?php else: ?>
        <div style="background-color: var(--bg-secondary); border: 1px dashed var(--border-color); border-radius: var(--radius-md); padding: 50px; text-align: center; color: var(--text-secondary);">
            <i class="fa fa-shopping-basket" style="font-size: 50px; opacity: 0.2; margin-bottom: 20px;"></i>
            <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 10px;">Sepetiniz Boş</h3>
            <p>Alışveriş sepetinizde henüz hiçbir ürün bulunmuyor.</p>
            <a href="<?php echo $baseUrl; ?>/" class="btn btn-primary" style="margin-top:20px;"><i class="fa fa-shopping-cart"></i> Alışverişe Devam Et</a>
        </div>
    <?php endif; ?>
<?php $cartHtml = ob_get_clean(); ?>

<?php if (isset($user) && $user): ?>
<style>
/* CSS copied from profile.php */
.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; } }
.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; }
.account-content { background: var(--surface-card); border-radius: var(--r-lg); box-shadow: var(--shadow-card); border: 1px solid var(--border); padding: 40px; }
@media (max-width: 768px) { .account-content { padding: 24px; } }
</style>

<div class="account-wrapper">
    <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">
                    <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" class="active">
                    <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 class="account-content">
        <?php echo $cartHtml; ?>
    </main>
</div>
<?php else: ?>
<div class="container" style="max-width: 900px; margin: 40px auto;">
    <?php echo $cartHtml; ?>
</div>
<?php endif; ?>

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