<?php
session_start();
require_once 'includes/db.php';

$id = $_GET['id'] ?? 0;
$photo = get_row("SELECT * FROM photos WHERE id = ?", [$id]);

if (!$photo) {
    header("Location: photo-shop.php");
    exit();
}

$page_title = $photo['title'] . ' — Guru Photos';
include 'includes/header.php';

// Related photos
$related = get_all("SELECT * FROM photos WHERE id != ? ORDER BY RAND() LIMIT 4", [$id]);
?>

<style>
.photo-detail-page { background: #f8f7f4; min-height: 100vh; }
.photo-preview-wrap {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0,0,0,0.06);
    position: sticky;
    top: 100px;
}
.photo-preview-wrap img {
    width: 100%;
    height: auto;
    display: block;
}
.detail-section-photo { padding-left: 0; }
@media (min-width: 992px) { .detail-section-photo { padding-left: 16px; } }
.photo-title-detail {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: var(--maroon);
    line-height: 1.25;
}
.price-card-photo {
    background: #fff; border-radius: 16px; padding: 24px;
    box-shadow: 0 2px 16px rgba(0,0,0,.04);
    border: 1px solid rgba(212,175,55,.12);
    margin-bottom: 20px;
}
.photo-highlights-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px; margin-bottom: 24px;
}
.photo-highlight-item {
    background: #fff; border-radius: 12px; padding: 16px 12px;
    text-align: center; border: 1px solid #f0ede8;
    transition: transform .2s;
}
.photo-highlight-item:hover { transform: translateY(-2px); }
.photo-highlight-item i { font-size: 1.3rem; color: var(--gold); display: block; margin-bottom: 4px; }
.photo-highlight-item .val { font-weight: 700; font-size: .85rem; color: var(--text-dark); display: block; }
.photo-highlight-item .lbl { font-size: .68rem; color: var(--text-light); text-transform: uppercase; letter-spacing: .5px; }

.desc-wrap-photo {
    background: #fff; border-radius: 16px; padding: 24px;
    box-shadow: 0 2px 16px rgba(0,0,0,.04);
    margin-bottom: 24px; line-height: 1.8; color: var(--text-medium);
    font-size: .95rem;
}
.desc-wrap-photo h5 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--maroon); margin-bottom: 12px;
}

.specs-grid-photo {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
    margin-bottom: 24px;
}
.spec-card-photo {
    background: #fff; border-radius: 14px; padding: 18px 14px;
    text-align: center; border: 1px solid #f0ede8;
    transition: all .2s;
}
.spec-card-photo:hover { border-color: rgba(212,175,55,.3); box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.spec-card-photo i { font-size: 1.4rem; color: var(--gold); display: block; margin-bottom: 6px; }
.spec-card-photo .lbl { font-size: .65rem; color: var(--text-light); text-transform: uppercase; letter-spacing: .5px; display: block; }
.spec-card-photo .val { font-weight: 700; font-size: .9rem; color: var(--text-dark); }

.action-bar-photo {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
}
.action-bar-photo .qty-group {
    display: flex; align-items: center; background: #fff;
    border: 1.5px solid #e0ddd8; border-radius: 10px; overflow: hidden;
    flex-shrink: 0;
}
.action-bar-photo .qty-group button {
    width: 42px; height: 42px; border: none; background: transparent;
    color: var(--text-dark); font-size: 1.05rem; cursor: pointer;
    transition: background .2s; display: flex; align-items: center; justify-content: center;
}
.action-bar-photo .qty-group button:hover { background: var(--cream); }
.action-bar-photo .qty-group input {
    width: 44px; height: 42px; border: none; text-align: center;
    font-weight: 700; font-size: 1rem; background: #fff;
    border-left: 1.5px solid #e0ddd8; border-right: 1.5px solid #e0ddd8;
    color: var(--text-dark);
}
.action-bar-photo .qty-group input:focus { outline: none; }
.btn-add-cart-photo,
.btn-buy-now-photo {
    flex: 1; height: 48px; border: none; border-radius: 10px;
    font-weight: 700; font-size: .88rem; letter-spacing: .5px;
    transition: all .25s; display: flex; align-items: center; justify-content: center; gap: 8px;
    white-space: nowrap; padding: 0 12px;
}
.btn-add-cart-photo {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff; box-shadow: 0 4px 14px rgba(245,158,11,.35);
}
.btn-add-cart-photo:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245,158,11,.45);
}
.btn-buy-now-photo {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,.35);
}
.btn-buy-now-photo:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16,185,129,.45);
}
.trust-strip-photo {
    display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px;
}
.trust-item-photo {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; color: var(--text-medium);
}
.trust-item-photo i { color: var(--gold); font-size: 1rem; }
.share-wrap-photo {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.share-wrap-photo .label { font-size: .78rem; color: var(--text-light); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.share-btn-photo {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e0ddd8;
    background: #fff; color: var(--text-medium); display: flex;
    align-items: center; justify-content: center; text-decoration: none;
    transition: all .2s; font-size: .9rem;
}
.share-btn-photo:hover { border-color: var(--gold); color: var(--gold-dark); transform: translateY(-2px); }

.related-section-photo { margin-top: 48px; }
.related-section-photo h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--maroon); font-size: 1.3rem; margin-bottom: 20px;
}
.related-grid-photo {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px;
}
.related-card-photo {
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.04); border: 1px solid #f0ede8;
    transition: all .25s; text-decoration: none; color: inherit;
}
.related-card-photo:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.08); border-color: rgba(212,175,55,.25); }
.related-img-photo { height: 160px; background: var(--cream); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.related-img-photo img { width: 100%; height: 100%; object-fit: cover; }
.related-body-photo { padding: 14px 16px; }
.related-body-photo h6 { font-size: .85rem; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
.related-body-photo .pric { font-weight: 700; color: var(--gerua-dark); font-size: .9rem; }

@media (max-width: 576px) {
    .specs-grid-photo { grid-template-columns: repeat(2,1fr); }
    .photo-highlights-bar { grid-template-columns: repeat(2,1fr); }
    .related-grid-photo { grid-template-columns: repeat(2,1fr); }
    .action-bar-photo .qty-group { width: 100%; }
    .action-bar-photo .qty-group input { flex: 1; width: auto; }
    .action-bar-photo .btn-group { width: 100%; }
}
</style>

<div class="bg-dark text-white py-3" style="background: var(--gradient-divine) !important; border-bottom: 1px solid rgba(212,175,55,.2);">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-transparent p-0 m-0">
                <li class="breadcrumb-item"><a href="index.php" class="text-decoration-none" style="color:var(--gerua-light)">Home</a></li>
                <li class="breadcrumb-item"><a href="photo-shop.php" class="text-decoration-none" style="color:var(--gerua-light)">Gallery</a></li>
                <li class="breadcrumb-item active" aria-current="page" style="color:var(--gold)"><?php echo $photo['title']; ?></li>
            </ol>
        </nav>
    </div>
</div>

<div class="photo-detail-page py-4">
<div class="container">

    <div class="row g-4">
        <!-- Photo Preview -->
        <div class="col-lg-6">
            <div class="photo-preview-wrap">
                <img src="<?php echo $photo['image']; ?>" alt="<?php echo $photo['title']; ?>" onerror="this.src='images/placeholder.png'">
            </div>
        </div>

        <!-- Photo Details -->
        <div class="col-lg-6">
            <div class="detail-section-photo">
                <h1 class="photo-title-detail"><?php echo $photo['title']; ?></h1>

                <!-- Price -->
                <div class="price-card-photo">
                    <div class="price-row d-flex align-items-baseline gap-3 flex-wrap">
                        <span class="price-current" style="font-size:2rem; font-weight:800; color:var(--maroon-light);">₹<?php echo $photo['price']; ?></span>
                        <?php if($photo['original_price'] > $photo['price']): ?>
                        <del class="price-original" style="font-size:1.1rem; color:var(--text-light);">₹<?php echo $photo['original_price']; ?></del>
                        <span class="price-badge" style="background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;font-weight:700;font-size:.82rem;padding:3px 14px;border-radius:50px;">
                            <?php echo $photo['original_price'] > 0 ? round((1 - $photo['price']/$photo['original_price'])*100) : 0; ?>% OFF
                        </span>
                        <?php endif; ?>
                        <span style="font-size:0.82rem;color:<?php echo $photo['stock'] > 0 ? '#2f855a' : '#e53e3e'; ?>;font-weight:600;margin-left:auto;">
                            <i class="bi bi-<?php echo $photo['stock'] > 0 ? 'check-circle-fill' : 'x-circle-fill'; ?>"></i> <?php echo $photo['stock'] > 0 ? 'In Stock' : 'Out of Stock'; ?>
                        </span>
                    </div>
                    <div class="d-flex flex-wrap gap-2 mt-3">
                        <span class="offer-tag" style="display:inline-flex;align-items:center;gap:6px;background:#f0fff4;color:#2f855a;font-size:.78rem;padding:5px 12px;border-radius:8px;font-weight:500;border:1px solid #c6f6d5;">
                            <i class="bi bi-border-all"></i> Premium Frame
                        </span>
                        <span class="offer-tag" style="display:inline-flex;align-items:center;gap:6px;background:#f0fff4;color:#2f855a;font-size:.78rem;padding:5px 12px;border-radius:8px;font-weight:500;border:1px solid #c6f6d5;">
                            <i class="bi bi-truck"></i> Free Delivery
                        </span>
                    </div>
                    <div class="mt-2" style="color:#2f855a;font-weight:600;font-size:.85rem;display:flex;align-items:center;gap:6px;">
                        <i class="bi bi-patch-check-fill"></i> Ready to Hang
                    </div>
                </div>

                <!-- Highlights -->
                <div class="photo-highlights-bar">
                    <?php if($photo['width'] && $photo['height']): ?>
                    <div class="photo-highlight-item">
                        <i class="bi bi-arrows-angle-expand"></i>
                        <span class="val"><?php echo $photo['width']; ?>x<?php echo $photo['height']; ?>"</span>
                        <span class="lbl">Size</span>
                    </div>
                    <?php endif; ?>
                    <?php if($photo['frame_type']): ?>
                    <div class="photo-highlight-item">
                        <i class="bi bi-border-style"></i>
                        <span class="val"><?php echo $photo['frame_type']; ?></span>
                        <span class="lbl">Frame</span>
                    </div>
                    <?php endif; ?>
                    <?php if($photo['frame_color']): ?>
                    <div class="photo-highlight-item">
                        <i class="bi bi-palette"></i>
                        <span class="val"><?php echo $photo['frame_color']; ?></span>
                        <span class="lbl">Color</span>
                    </div>
                    <?php endif; ?>
                    <?php if($photo['print_type']): ?>
                    <div class="photo-highlight-item">
                        <i class="bi bi-card-image"></i>
                        <span class="val"><?php echo $photo['print_type']; ?></span>
                        <span class="lbl">Print</span>
                    </div>
                    <?php endif; ?>
                    <?php if($photo['weight']): ?>
                    <div class="photo-highlight-item">
                        <i class="bi bi-box"></i>
                        <span class="val"><?php echo $photo['weight']; ?>g</span>
                        <span class="lbl">Weight</span>
                    </div>
                    <?php endif; ?>
                </div>

                <!-- Description -->
                <?php if($photo['description']): ?>
                <div class="desc-wrap-photo">
                    <h5><i class="bi bi-journal-text me-2 text-gold"></i>About This Photo</h5>
                    <p class="mb-0"><?php echo nl2br($photo['description']); ?></p>
                </div>
                <?php endif; ?>

                <!-- Specs -->
                <div class="specs-grid-photo">
                    <?php if($photo['width'] && $photo['height']): ?>
                    <div class="spec-card-photo">
                        <i class="bi bi-arrows-angle-expand"></i>
                        <span class="lbl">Size</span>
                        <span class="val"><?php echo $photo['width']; ?>x<?php echo $photo['height']; ?>"</span>
                    </div>
                    <?php endif; ?>
                    <?php if($photo['frame_type']): ?>
                    <div class="spec-card-photo">
                        <i class="bi bi-border-style"></i>
                        <span class="lbl">Frame Type</span>
                        <span class="val"><?php echo $photo['frame_type']; ?></span>
                    </div>
                    <?php endif; ?>
                    <?php if($photo['frame_color']): ?>
                    <div class="spec-card-photo">
                        <i class="bi bi-palette"></i>
                        <span class="lbl">Frame Color</span>
                        <span class="val"><?php echo $photo['frame_color']; ?></span>
                    </div>
                    <?php endif; ?>
                    <?php if($photo['orientation']): ?>
                    <div class="spec-card-photo">
                        <i class="bi bi-phone-landscape"></i>
                        <span class="lbl">Orientation</span>
                        <span class="val"><?php echo $photo['orientation']; ?></span>
                    </div>
                    <?php endif; ?>
                    <?php if($photo['print_type']): ?>
                    <div class="spec-card-photo">
                        <i class="bi bi-card-image"></i>
                        <span class="lbl">Print Type</span>
                        <span class="val"><?php echo $photo['print_type']; ?></span>
                    </div>
                    <?php endif; ?>
                    <?php if($photo['weight']): ?>
                    <div class="spec-card-photo">
                        <i class="bi bi-box"></i>
                        <span class="lbl">Weight</span>
                        <span class="val"><?php echo $photo['weight']; ?>g</span>
                    </div>
                    <?php endif; ?>
                </div>

                <!-- Actions -->
                <div class="action-bar-photo">
                    <div class="qty-group">
                        <button onclick="updateQty(-1)"><i class="bi bi-dash-lg"></i></button>
                        <input type="number" id="photoQty" value="1" min="1" readonly>
                        <button onclick="updateQty(1)"><i class="bi bi-plus-lg"></i></button>
                    </div>
                    <div style="display:flex;gap:10px;flex:1;min-width:0;">
                        <button class="btn-add-cart-photo" onclick="handleAddToCart()">
                            <i class="bi bi-cart-plus-fill"></i> <span>ADD TO CART</span>
                        </button>
                        <button class="btn-buy-now-photo" onclick="handleBuyNow()">
                            <i class="bi bi-lightning-charge-fill"></i> <span>BUY NOW</span>
                        </button>
                    </div>
                </div>

                <!-- Trust -->
                <div class="trust-strip-photo">
                    <span class="trust-item-photo"><i class="bi bi-truck"></i> Free Shipping</span>
                    <span class="trust-item-photo"><i class="bi bi-shield-check"></i> Premium Quality</span>
                    <span class="trust-item-photo"><i class="bi bi-arrow-repeat"></i> Easy Returns</span>
                </div>

                <!-- Share -->
                <div class="share-wrap-photo">
                    <span class="label">Share</span>
                    <a href="#" class="share-btn-photo" title="WhatsApp"><i class="bi bi-whatsapp"></i></a>
                    <a href="#" class="share-btn-photo" title="Facebook"><i class="bi bi-facebook"></i></a>
                    <a href="#" class="share-btn-photo" title="Twitter"><i class="bi bi-twitter-x"></i></a>
                    <a href="#" class="share-btn-photo" title="Copy Link" onclick="copyPageLink(this)"><i class="bi bi-link-45deg"></i></a>
                </div>
            </div>
        </div>
    </div>

    <!-- Related -->
    <?php if (!empty($related)): ?>
    <div class="related-section-photo">
        <h3><i class="bi bi-star me-2 text-gold"></i>You May Also Like</h3>
        <div class="related-grid-photo">
            <?php foreach ($related as $r): ?>
            <a href="photo-detail.php?id=<?php echo $r['id']; ?>" class="related-card-photo">
                <div class="related-img-photo">
                    <img src="<?php echo $r['image']; ?>" alt="<?php echo $r['title']; ?>" onerror="this.src='images/placeholder.png'">
                </div>
                <div class="related-body-photo">
                    <h6><?php echo $r['title']; ?></h6>
                    <div class="pric">₹<?php echo $r['price']; ?>
                        <?php if ($r['original_price'] > $r['price']): ?>
                        <small class="text-muted text-decoration-line-through">₹<?php echo $r['original_price']; ?></small>
                        <?php endif; ?>
                    </div>
                </div>
            </a>
            <?php endforeach; ?>
        </div>
    </div>
    <?php endif; ?>

</div>
</div>

<script>
function updateQty(val) {
    var input = document.getElementById('photoQty');
    var nv = parseInt(input.value) + val;
    if (nv < 1) nv = 1;
    input.value = nv;
}

function handleAddToCart() {
    var qty = parseInt(document.getElementById('photoQty').value);
    triggerAddToCart(
        '<?php echo $photo['id']; ?>',
        '<?php echo addslashes($photo['title']); ?>',
        'Guru Photo',
        '<?php echo $photo['price']; ?>',
        '<?php echo $photo['image']; ?>',
        'Guru Photo',
        qty
    );
}

function handleBuyNow() {
    handleAddToCart();
    window.location.href = 'cart.php';
}

function copyPageLink(el) {
    var input = document.createElement('input');
    input.value = window.location.href;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    el.innerHTML = '<i class="bi bi-check-lg"></i>';
    setTimeout(function() { el.innerHTML = '<i class="bi bi-link-45deg"></i>'; }, 2000);
}
</script>

<?php include 'includes/footer.php'; ?>