<?php
session_start();
// Check if the user is logged in (you need to implement this logic)
$is_logged_in = isset($_SESSION['rm_id']); // Example: Check if user_id is set in the session

include('includes/dbcon.php');

$query=mysqli_query($con,"SELECT * from company_master")or die(mysqli_error()); 
 while($row=mysqli_fetch_array($query)){  
     $rcount=$rcount+1;
     $cost_name=$row['cost_name'];
     $telephone=$row['telephone'];
     $email=$row['email'];
 }
?>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Cart</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Libraries Stylesheet -->
    <!-- Libraries Stylesheet -->
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">

    <style>
        .cart-table {
            margin-top: 50px;
        }
        .cart-table th, .cart-table td {
            vertical-align: middle;
        }
        .cart-table img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 5px;
        }
        .total-amount {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
        }
        .btn-remove {
            color: #ff0000;
            cursor: pointer;
        }
        .btn-remove:hover {
            color: #cc0000;
        }

        .product-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.product-item {
    width: calc(20% - 10px); /* 5 items per row */
    max-width: 180px;
    text-align: center;
}

.product-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

.add-to-cart-form {
    margin-top: 10px; /* Adjust spacing */
    text-align: center; /* Center align */
}
.quantity-input {
    width: 80px; /* Adjust width */
    margin-bottom: 5px;
}

.hover-icons {
    display: flex;
    gap: 10px; /* Spacing between icons */
}

.hover-icons i {
    font-size: 18px;
    color: #333; /* Default icon color */
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.1); /* Light background */
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
}

.hover-icons i:hover {
    color: white;
    background-color: #ff5733; /* Change to your preferred color */
}

    </style>
</head>
<body>
    <?php include('header.php');?>
    
    <div class="container">
        <h1 class="my-5">Shopping Cart</h1>
        <?php if (isset($_SESSION['cart']) && !empty($_SESSION['cart'])): ?>
            <div class="table-responsive">
                <table class="table table-bordered cart-table">
                    <thead>
                        <tr>
                            <th>Image</th>
                            <th>Product</th>
                            <th>Price</th>
                            <th>Quantity</th>
                            <th>Total</th>
                            <th>Remove</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        $total_amount = 0;
                        foreach ($_SESSION['cart'] as $item_id => $item):
                            $item_name = $item['item_name'];
                            $sales_price = $item['sales_price'];
                            $quantity = $item['quantity'];
                            $image_path = $item['image_path'];
                            $total = $sales_price * $quantity;
                            $total_amount += $total;
                        ?>
                            <tr>
                               <td>
    <img src="../pages/uploads/<?php echo htmlspecialchars($item['image_path']); ?>" alt="<?php echo htmlspecialchars($item['item_name']); ?>">
</td>

                                <td><?php echo htmlspecialchars($item_name); ?></td>
                                <td>Rs. <?php echo number_format($sales_price, 2); ?></td>
                                <td><?php echo $quantity; ?></td>
                                <td>Rs. <?php echo number_format($total, 2); ?></td>
                                <td>
                                    <a href="remove_from_cart.php?id=<?php echo $item_id; ?>" class="btn-remove">
                                        <i class="fas fa-trash-alt"></i>
                                    </a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-between align-items-center mt-4">
                <div class="total-amount">
                    Total: Rs. <?php echo number_format($total_amount, 2); ?>
                </div>                
                <!-- Left-aligned button (Fixed on the left side) -->
<div class="left-aligned-button">
    <a href="index.php" class="btn btn-primary">
        <i class="fas fa-home"></i> Back to Home
    </a>
</div>

<div>
    <!-- Clear Cart Button -->
    <a href="clear_cart.php" class="btn btn-danger">
        <i class="fas fa-trash"></i> Clear Cart
    </a>

    <!-- Checkout Button -->
    <a href="select_customer.php" class="btn btn-success">
        <i class="fas fa-shopping-cart"></i> Checkout
    </a>
</div>

                
            </div>
        <?php else: ?>
            <div class="alert alert-info">Your cart is empty.</div>
        <?php endif; ?>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


</body>
</html>