<!DOCTYPE html>
<html>
<head>
    <title><?= htmlspecialchars($item['name']) ?> - RT</title>
    <link rel="stylesheet" href="/assets/css/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Specific styles for v/item.php layout */
        .item-detail {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Two equal columns */
            grid-template-rows: auto auto; /* Rows auto-sized based on content */
            gap: 20px;
            padding: 20px;
            background-color: #fff;
            max-width: 900px;
            margin: 0 auto;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .item-image {
            grid-column: 1; /* Image on the left */
            max-width: 50%;
        }
        .item-image img {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }
        .item-info {
            grid-column: 2; /* Info on the right */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: left;
        }
        .item-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .item-price {
            font-size: 20px;
            color: #e60000;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .item-specs {
            font-size: 14px;
            color: #555;
            margin-bottom: 15px;
            line-height: 1.6;
        }
        .add-to-cart {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            align-self: flex-start; /* Align button to the left */
        }
        .add-to-cart:hover {
            background-color: #0056b3;
        }
        /* Full width description at the bottom */
        .item-description {
            grid-column: 1 / -1; /* Span both columns */
            margin-top: 20px;
            font-size: 16px;
            line-height: 1.6;
            color: #666;
        }
        .item-description img {
            max-width: 100%; /* Ensure images do not exceed the screen width */
            height: auto;
            display: block;
            margin: 10px auto; /* Center the images */
        }
        /* Responsive layout for smaller screens */
        @media (max-width: 768px) {
            .item-detail {
                grid-template-columns: 1fr; /* Single column layout */
            }

            .item-info {
                grid-column: 1;
                margin-bottom: 20px; /* Add space below item info */
            }

            .add-to-cart {
                width: 100%; /* Make the button full width */
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="item-tags">
        <?php if (!empty($tags)): ?>
            <?php $mainTags = array_slice($tags, 0, 2); ?>
            <?php foreach ($mainTags as $tag): ?>
                <a href="index.php?tag=<?= urlencode($tag) ?>"><?= htmlspecialchars($tag) ?></a>
            <?php endforeach; ?>
            <button id="more-tags">更多筛选</button>
            <div id="additional-tags" class="tooltip">
                <?php foreach (array_slice($tags, 2) as $tag): ?>
                    <a href="index.php?tag=<?= urlencode($tag) ?>"><?= htmlspecialchars($tag) ?></a>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>

    <div class="item-detail">
        <?php if (isset($item)): ?>
            <div class="item-image">
                <img src="/assets/img/<?= htmlspecialchars($item['img']) ?>" alt="<?= htmlspecialchars($item['name']) ?>">
            </div>
            <div class="item-info">
                <h1 class="item-title"><?= htmlspecialchars($item['name']) ?></h1>
                <div class="item-price">¥<?= htmlspecialchars($item['price']) ?></div>
                <div class="item-specs">
                    <?php
                    $specs = json_decode($item['specs'], true);
                    if (is_array($specs)) {
                        foreach ($specs as $key => $value) {
                            echo htmlspecialchars($key) . ': ' . htmlspecialchars($value) . '<br>';
                        }
                    }
                    ?>
                </div>
                <button class="add-to-cart" 
                        data-item-id="<?= htmlspecialchars($item['id']) ?>" 
                        data-item-name="<?= htmlspecialchars($item['name']) ?>" 
                        data-item-price="<?= htmlspecialchars($item['price']) ?>">
                    添加
                </button>
            </div>
            <div class="item-description"><?= html_entity_decode($item['description'] ?? '') ?></div>
        <?php else: ?>
            <p>Item not found.</p>
        <?php endif; ?>
    </div>
    
<!-- Cart Modal -->
<div id="cart-modal" class="cart-modal">
    <span class="cart-modal-close">&times;</span>
    <div class="cart-modal-content">
        <div class="cart-modal-header">
            <h2>Item Name</h2>
        </div>
        <div class="cart-modal-body">
            <!-- Hidden input for itemId -->
            <input type="hidden" id="item-id" value="">
            <div class="quantity-selector">
                <button id="quantity-minus">-</button>
                <input type="text" id="item-quantity" value="1" readonly>
                <button id="quantity-plus">+</button>
            </div>
            <div class="price-info">
            单价:¥<span id="item-price">0.00</span>&nbsp&nbsp<b>总价:¥<span id="total-price">0.00</span></b>
            </div>
        </div>
        <div class="cart-modal-footer">
            <button id="confirm-add" class="add-to-cart-confirm">确定添加</button>
        </div>
    </div>
</div>
<?php require 'footer.php'; ?>