<?php
$page_title = "Guru Photos — GyaniGuru by JMC";
include 'includes/header.php';

$search = $_GET['q'] ?? '';
$sort = $_GET['sort'] ?? 'newest';

$sql = "SELECT * FROM photos WHERE 1=1";
$params = [];

if ($search) {
    $sql .= " AND title LIKE ?";
    $params[] = "%$search%";
}

switch ($sort) {
    case 'price_low': $sql .= " ORDER BY price ASC"; break;
    case 'price_high': $sql .= " ORDER BY price DESC"; break;
    default: $sql .= " ORDER BY created_at DESC";
}

$photos = get_all($sql, $params);
?>

<style>
.photo-shop-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-bottom: 2px solid var(--gold);
    position: relative;
    overflow: hidden;
}
.photo-shop-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="30" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="80" cy="60" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="30" cy="80" r="1" fill="rgba(255,255,255,0.05)"/></svg>');
    background-size: 200px 200px;
    opacity: 0.5;
}

.filter-sidebar-photo {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e8e5e0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    position: sticky;
    top: 90px;
}

.photo-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    border: 1px solid #f0ede8;
    cursor: pointer;
}
.photo-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    border-color: rgba(212,175,55,0.3);
}
.photo-card .card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--maroon);
    color: white;
    border-radius: 50px;
    padding: 3px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.photo-image-wrap {
    position: relative;
    overflow: hidden;
    background: #f8f8f8;
}
.photo-image-wrap img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.photo-card:hover .photo-image-wrap img {
    transform: scale(1.06);
}
.photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: flex-end;
    padding: 16px;
}
.photo-card:hover .photo-overlay {
    opacity: 1;
}
.photo-overlay .photo-quick-view {
    background: rgba(255,255,255,0.95);
    border: none;
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.photo-overlay .photo-quick-view:hover {
    background: var(--gold);
    color: var(--dark-bg);
}
.photo-card-body {
    padding: 16px 18px 18px;
}
.photo-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-dark);
    margin-bottom: 2px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.photo-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.photo-price-current {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gerua-dark);
}
.photo-price-original {
    font-size: 0.82rem;
    color: var(--text-light);
    text-decoration: line-through;
}
.photo-specs {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0ede8;
    font-size: 0.72rem;
    color: var(--text-light);
}
.photo-specs span {
    display: flex;
    align-items: center;
    gap: 4px;
}
.photo-specs i {
    color: var(--gold);
    font-size: 0.75rem;
}
.photo-card-actions {
    margin-top: 12px;
}


@media (max-width: 991px) {
    .filter-sidebar-photo {
        position: fixed;
        top: 0;
        left: -380px;
        width: 340px;
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        z-index: 1060;
        border-radius: 0;
        border-right: 2px solid var(--gold);
        overflow-y: auto;
        transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        padding: 24px 20px;
        box-shadow: 10px 0 40px rgba(0,0,0,0.15);
    }
    .filter-sidebar-photo.active {
        left: 0;
    }
    body.filter-open {
        overflow: hidden;
    }
}

@media (max-width: 576px) {
    .photo-card-body {
        padding: 14px;
    }
    .photo-title {
        font-size: 0.88rem;
    }
}
</style>

<div class="photo-shop-header py-5">
    <div class="container text-center py-4 position-relative" style="z-index:1">
        <h1 class="font-cinzel text-light mb-2">Guru Photos</h1>
        <p class="text-white-50">Sacred images of Yogi Maharaj — bring the divine presence home</p>
    </div>
</div>

<div class="container py-5">
    <div class="filter-backdrop" id="filterBackdrop" onclick="toggleFilter()"></div>
    <div class="row g-4">
        <!-- Sidebar -->
        <div class="col-lg-3">
            <div class="filter-sidebar-photo" id="filterSidebar">
                <div class="filter-mobile-header">
                    <h5 class="filter-drawer-title" style="color:var(--maroon)">Filters</h5>
                    <button class="filter-close-btn" type="button" onclick="toggleFilter()" aria-label="Close filters">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
                <form action="photo-shop.php" method="GET">
                    <h5 class="fw-bold mb-3" style="color: var(--maroon); font-size: 1rem;">
                        <i class="bi bi-search me-2" style="color: var(--gold);"></i>Search
                    </h5>
                    <div class="input-group mb-4">
                        <input type="text" name="q" class="form-control" value="<?php echo htmlspecialchars($search); ?>" placeholder="Search photos..." style="border: 1.5px solid #e0ddd8; font-size:0.88rem; padding:8px 12px;">
                        <button class="btn btn-dark" type="submit"><i class="bi bi-search"></i></button>
                    </div>

                    <a href="photo-shop.php" class="btn btn-outline-dark w-100 btn-sm">Reset Filters</a>
                </form>
            </div>
        </div>

        <!-- Photo Grid -->
        <div class="col-lg-9">
            <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom border-secondary">
                <div class="d-flex align-items-center gap-3">
                    <button class="filter-toggle-btn" type="button" onclick="toggleFilter()" aria-label="Toggle filters">
                        <i class="bi bi-funnel-fill"></i>
                        <span>Filters</span>
                    </button>
                    <div class="results-count">
                        Showing <strong style="color:var(--gerua-dark)"><?php echo count($photos); ?></strong> photos
                    </div>
                </div>
                <select class="form-select form-select-sm" style="width:auto; border:1.5px solid #e0ddd8; background:#fff; color:var(--text-dark);" onchange="window.location.href='photo-shop.php?<?php echo http_build_query(array_merge($_GET, ['sort' => ''])); ?>'.slice(0,-1) + this.value">
                    <option value="newest" <?php echo $sort == 'newest' ? 'selected' : ''; ?>>Newest First</option>
                    <option value="price_low" <?php echo $sort == 'price_low' ? 'selected' : ''; ?>>Price: Low to High</option>
                    <option value="price_high" <?php echo $sort == 'price_high' ? 'selected' : ''; ?>>Price: High to Low</option>
                </select>
            </div>

            <div class="row g-4">
                <?php foreach($photos as $photo): ?>
                <?php 
                $disc = $photo['original_price'] > $photo['price'] ? round((1 - $photo['price'] / $photo['original_price']) * 100) : 0;
                ?>
                <div class="col-md-4 col-sm-6">
                    <div class="photo-card h-100">
                        <?php if($photo['badge']): ?><span class="card-badge"><?php echo $photo['badge']; ?></span><?php endif; ?>
                        <a href="photo-detail.php?id=<?php echo $photo['id']; ?>" style="text-decoration:none;color:inherit">
                            <div class="photo-image-wrap">
                                <img src="<?php echo $photo['image']; ?>" alt="<?php echo $photo['title']; ?>" onerror="this.src='images/placeholder.png'">
                                <div class="photo-overlay">
                                    <span class="photo-quick-view"><i class="bi bi-eye"></i> Quick View</span>
                                </div>
                            </div>
                        </a>
                        <div class="photo-card-body">
                            <a href="photo-detail.php?id=<?php echo $photo['id']; ?>" style="text-decoration:none;color:inherit">
                                <div class="photo-title"><?php echo $photo['title']; ?></div>
                            </a>
                            <div class="photo-price">
                                <span class="photo-price-current">₹<?php echo $photo['price']; ?></span>
                                <?php if($photo['original_price'] > $photo['price']): ?>
                                <span class="photo-price-original">₹<?php echo $photo['original_price']; ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="photo-specs">
                                <?php if($photo['width'] && $photo['height']): ?>
                                <span><i class="bi bi-arrows-angle-expand"></i> <?php echo $photo['width']; ?>x<?php echo $photo['height']; ?>"</span>
                                <?php endif; ?>
                                <?php if($photo['frame_type']): ?>
                                <span><i class="bi bi-border-style"></i> <?php echo $photo['frame_type']; ?></span>
                                <?php endif; ?>
                                <?php if($photo['print_type']): ?>
                                <span><i class="bi bi-card-image"></i> <?php echo $photo['print_type']; ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="photo-card-actions">
                                <button class="btn btn-saffron btn-sm w-100" onclick="triggerAddToCart('<?php echo $photo['id']; ?>', '<?php echo addslashes($photo['title']); ?>', 'Guru Photo', '<?php echo $photo['price']; ?>', '<?php echo $photo['image']; ?>', 'Guru Photo')">
                                    <i class="bi bi-bag-plus"></i> Add to Cart
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>

                <?php if(empty($photos)): ?>
                <div class="col-12 text-center py-5">
                    <i class="bi bi-image display-1 text-muted opacity-25"></i>
                    <h3 class="mt-4 font-cinzel" style="color:var(--text-medium)">No Photos Found</h3>
                    <p class="text-muted">No photos match your current filters or searching.</p>
                    <a href="photo-shop.php" class="btn btn-dark mt-3">Reset Filters</a>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<script>
function toggleFilter() {
    document.getElementById('filterSidebar').classList.toggle('active');
    document.getElementById('filterBackdrop').classList.toggle('active');
    document.body.classList.toggle('filter-open');
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        var sidebar = document.getElementById('filterSidebar');
        if (sidebar && sidebar.classList.contains('active')) {
            toggleFilter();
        }
    }
});
</script>

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