<?php
session_start();
$cart = $_SESSION['cart'] ?? [];
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Cart - Taji Yetu</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background-color: #000;
      color: #fff;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 30px;
      background-color: rgba(17, 17, 17, 0.8);
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .logo img {
      height: 40px;
    }

    .belagidds-btn {
      background: #444;
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: 5px;
      cursor: pointer;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .cart-icon {
      font-size: 1.3rem;
      cursor: pointer;
      color: #fff;
    }

    .account-dropdown {
      position: relative;
    }

    .account-button {
      background: #444;
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: 5px;
      cursor: pointer;
    }

    .dropdown-menu {
      display: none;
      position: absolute;
      right: 0;
      top: 100%;
      background-color: #222;
      border: 1px solid #333;
      border-radius: 5px;
      overflow: hidden;
      z-index: 10;
    }

    .dropdown-menu a {
      display: block;
      color: #fff;
      text-decoration: none;
      padding: 10px 15px;
      transition: background 0.3s;
    }

    .dropdown-menu a:hover {
      background-color: #333;
    }

    .account-dropdown:hover .dropdown-menu {
      display: block;
    }

    .cart-container {
      padding: 40px 20px;
    }

    .cart-item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      background-color: #111;
      padding: 10px;
      border-radius: 10px;
    }

    .cart-item img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 5px;
      margin-right: 20px;
    }

    .cart-details h3 {
      margin: 0;
    }

    .cart-details p {
      margin: 5px 0;
    }

    .total-price {
      font-size: 20px;
      font-weight: bold;
      text-align: right;
      margin-top: 20px;
    }

    .checkout-btn {
      display: block;
      margin: 30px auto;
      padding: 12px 30px;
      font-size: 16px;
      background: white;
      color: black;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    footer {
      background-color: rgba(17, 17, 17, 0.8);
      padding: 30px 20px;
      text-align: center;
    }

    .social-icons {
      margin-bottom: 15px;
    }

    .social-icons a {
      color: #fff;
      font-size: 1.4rem;
      margin: 0 10px;
      transition: color 0.3s;
    }

    .social-icons a:hover {
      color: #888;
    }

    .copyright {
      font-size: 0.9rem;
      color: #aaa;
    }
  </style>
</head>
<body>

<header>
  <div class="header-left">
    <a href="/fix/index.php" class="logo"><img src="/fix/images/TAJI YETU.PNG" alt="Logo"></a>
    <button class="belagidds-btn">Belagidds</button>
  </div>
  <div class="header-right">
    <i class="fas fa-shopping-cart cart-icon"></i>
    <div class="account-dropdown">
      <button class="account-button">Account <i class="fas fa-caret-down"></i></button>
      <div class="dropdown-menu">
        <a href="/fix/profile.php">Profile</a>
        <a href="/fix/orders.php">Orders</a>
        <a href="/fix/logout.php">Logout</a>
      </div>
    </div>
  </div>
</header>

<div class="cart-container">
  <h1>Your Cart</h1>

  <?php if (empty($cart)): ?>
    <p>Your cart is empty.</p>
  <?php else: ?>
    <?php $total = 0; ?>
    <?php foreach ($cart as $item): ?>
      <?php $itemTotal = $item['price'] * $item['quantity']; $total += $itemTotal; ?>
      <div class="cart-item">
        <img src="/fix/uploads/<?= htmlspecialchars($item['image']) ?>" alt="<?= htmlspecialchars($item['name']) ?>">
        <div class="cart-details">
          <h3><?= htmlspecialchars($item['name']) ?></h3>
          <p>Price: Ksh <?= number_format($item['price']) ?></p>
          <p>Quantity: <?= $item['quantity'] ?></p>
          <p>Total: Ksh <?= number_format($itemTotal) ?></p>
        </div>
      </div>
    <?php endforeach; ?>
    <div class="total-price">Total: Ksh <?= number_format($total) ?></div>
    <a href="checkout.php"><button class="checkout-btn">Proceed to Checkout</button></a>
  <?php endif; ?>
</div>

<footer>
  <div class="social-icons">
    <a href="#"><i class="fab fa-facebook-f"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-tiktok"></i></a>
  </div>
  <div class="copyright">
    &copy; 2025 TAJI YETU. All rights reserved.
  </div>
</footer>

</body>
</html>
