<?php
$page_title = 'Property Listings';
require_once 'config.php';
ob_start();
require_once 'layout.php';

// Get filter parameters safely
$category = isset($_GET['category']) ? mysqli_real_escape_string($conn, $_GET['category']) : '';
$status = isset($_GET['status']) ? mysqli_real_escape_string($conn, $_GET['status']) : '';
$district = isset($_GET['district']) ? mysqli_real_escape_string($conn, $_GET['district']) : '';
$price_range = isset($_GET['price_range']) ? $_GET['price_range'] : '';
$search = isset($_GET['search']) ? mysqli_real_escape_string($conn, $_GET['search']) : '';
$listing_type = isset($_GET['type']) ? mysqli_real_escape_string($conn, $_GET['type']) : '';

// Pagination Safety
$page = isset($_GET['page']) ? max(1, (int)$_GET['page']) : 1;
$per_page = 12;
$offset = ($page - 1) * $per_page;

// Build query dynamically
$where_clauses = ["l.is_active = 1", "l.status != 'Pending'"]; // EXCLUDE PENDING LISTINGS
$params = [];
$types = "";

if($category) {
    $where_clauses[] = "l.category = ?";
    $params[] = $category;
    $types .= "s";
}
if($status) {
    $where_clauses[] = "l.status = ?";
    $params[] = $status;
    $types .= "s";
}
if($district) {
    $where_clauses[] = "l.district = ?";
    $params[] = $district;
    $types .= "s";
}
if($listing_type) {
    $where_clauses[] = "l.listing_type = ?";
    $params[] = $listing_type;
    $types .= "s";
}
if($price_range && strpos($price_range, '-') !== false) {
    list($min, $max) = explode('-', $price_range);
    $where_clauses[] = "l.price BETWEEN ? AND ?";
    $params[] = (float)$min;
    $params[] = (float)$max;
    $types .= "dd";
}
if($search) {
    $where_clauses[] = "(l.title LIKE ? OR l.address LIKE ? OR l.description LIKE ?)";
    $search_param = "%$search%";
    $params[] = $search_param;
    $params[] = $search_param;
    $params[] = $search_param;
    $types .= "sss";
}

$where_sql = implode(" AND ", $where_clauses);

// Count total records securely
$count_sql = "SELECT COUNT(*) as total FROM listings l WHERE $where_sql";
$stmt = mysqli_prepare($conn, $count_sql);
if($types) {
    mysqli_stmt_bind_param($stmt, $types, ...$params);
}
mysqli_stmt_execute($stmt);
$count_result = mysqli_stmt_get_result($stmt);
$total_records = $count_result ? mysqli_fetch_assoc($count_result)['total'] : 0;
$total_pages = $total_records > 0 ? ceil($total_records / $per_page) : 1;
if($page > $total_pages) { $page = $total_pages; $offset = ($page - 1) * $per_page; }

// Fetch Listings
$query = "SELECT l.*, li.image_path
FROM listings l
LEFT JOIN listing_images li ON l.id = li.listing_id AND li.is_primary = 1
WHERE $where_sql
ORDER BY l.listing_type = 'featured' DESC, l.created_at DESC
LIMIT ? OFFSET ?";
$params[] = $per_page;
$params[] = $offset;
$types .= "ii";

$stmt = mysqli_prepare($conn, $query);
mysqli_stmt_bind_param($stmt, $types, ...$params);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
?>

<!-- Font Awesome CDN for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
:root {
    --theme-primary: #169a7c;
    --theme-primary-hover: #128268;
}
.text-primary { color: var(--theme-primary) !important; }
.bg-primary { background-color: var(--theme-primary) !important; }
.btn-primary { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--theme-primary-hover) !important; border-color: var(--theme-primary-hover) !important; color: #fff !important; }
.btn-outline-primary { color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; }
.btn-outline-primary:hover { background-color: var(--theme-primary) !important; color: #fff !important; }
.border-primary { border-color: var(--theme-primary) !important; }
.text-warning { color: #f59e0b !important; }

/* Pagination Override */
.pagination .page-item.active .page-link { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; color: #fff !important; }
.form-select:focus, .form-control:focus { border-color: var(--theme-primary) !important; box-shadow: 0 0 0 0.25rem rgba(22, 154, 124, 0.25) !important; }

/* SVG Icons */
.svg-icon { width: 1.2em; height: 1.2em; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svg-icon-fill { width: 1.2em; height: 1.2em; vertical-align: -0.125em; fill: currentColor; }

/* Collapsible Filter Styles */
.more-filters-container {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.more-filters-container.show {
    max-height: 300px;
    opacity: 1;
}

/* PC View Property Cards Base */
.property-card {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 0.75rem;
    background-color: #fff;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
}
.property-card .img-wrapper {
    height: 180px;
    overflow: hidden;
    position: relative;
}
.property-card .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PC View Featured Card Custom Styles */
.property-card.featured {
    border: 2px solid #f97316 !important; /* Orange border matching the image */
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.15) !important; /* Subtle orange outer shadow */
}
.property-card.featured:hover {
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3) !important; /* Stronger orange shadow on hover */
}
.property-card.featured .featured-badge {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f97316;
    color: white;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
    z-index: 10;
    border-bottom-right-radius: 0.4rem;
    letter-spacing: 0.5px;
}

/* List Card Styles (Mobile) */
.property-list-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(0,0,0,0.08) !important;
}
.property-list-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1) !important;
}

/* Featured Mobile Card Custom Styles */
.featured-mobile-card {
    background-color: #f0fff4 !important; /* Pale green */
    border: 1px solid #dcfce7 !important;
}
.badge-top-ad {
    background-color: #f97316; /* Orange */
    color: white;
    font-weight: 700;
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
    border-top-left-radius: 0.3rem; 
    border-bottom-right-radius: 0.3rem;
    letter-spacing: 0.5px;
}
</style>

<div class="container py-5">
    
    <!-- Index Type Filter Box -->
    <div class="bg-white p-4 rounded-4 shadow-sm border mb-5">
        <h4 class="text-dark fw-bold mb-4 d-flex align-items-center">
            <svg class="svg-icon me-2 text-primary" viewBox="0 0 24 24"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
            Refine Search
        </h4>
        
        <form action="listings.php" method="GET">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label text-muted fw-semibold small text-uppercase">Keyword Search</label>
                    <input type="text" name="search" class="form-control bg-light border-0 py-2" placeholder="Titles, areas..." value="<?php echo htmlspecialchars($search); ?>">
                </div>
                <div class="col-md-4">
                    <label class="form-label text-muted fw-semibold small text-uppercase">Category</label>
                    <select name="category" class="form-select bg-light border-0 py-2">
                        <option value="">All Categories</option>
                        <option value="House" <?php echo $category == 'House' ? 'selected' : ''; ?>>House</option>
                        <option value="Villas" <?php echo $category == 'Villas' ? 'selected' : ''; ?>>Villas</option>
                        <option value="Hotels" <?php echo $category == 'Hotels' ? 'selected' : ''; ?>>Hotels</option>
                        <option value="Apartments" <?php echo $category == 'Apartments' ? 'selected' : ''; ?>>Apartments</option>
                        <option value="Commercials" <?php echo $category == 'Commercials' ? 'selected' : ''; ?>>Commercials</option>
                        <option value="Lands" <?php echo $category == 'Lands' ? 'selected' : ''; ?>>Lands</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label text-muted fw-semibold small text-uppercase">District</label>
                    <select name="district" class="form-select bg-light border-0 py-2">
                        <option value="">All Districts</option>
                        <?php
                        $districts = ['Colombo', 'Gampaha', 'Kalutara', 'Kandy', 'Matale', 'Nuwara Eliya', 'Galle', 'Matara', 'Hambantota', 'Jaffna', 'Kilinochchi', 'Mannar', 'Vavuniya', 'Mullaitivu', 'Batticaloa', 'Ampara', 'Trincomalee', 'Kurunegala', 'Puttalam', 'Anuradhapura', 'Polonnaruwa', 'Badulla', 'Moneragala', 'Ratnapura', 'Kegalle'];
                        foreach($districts as $dist):
                        ?>
                            <option value="<?php echo $dist; ?>" <?php echo $district == $dist ? 'selected' : ''; ?>><?php echo $dist; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>

            <!-- Extended Filters -->
            <div class="more-filters-container" id="listingsMoreFilters">
                <div class="row g-3 pt-3">
                    <div class="col-md-4">
                        <label class="form-label text-muted fw-semibold small text-uppercase">Status</label>
                        <select name="status" class="form-select bg-light border-0 py-2">
                            <option value="">All Types</option>
                            <option value="For Sale" <?php echo $status == 'For Sale' ? 'selected' : ''; ?>>For Sale</option>
                            <option value="For Rent" <?php echo $status == 'For Rent' ? 'selected' : ''; ?>>For Rent</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label text-muted fw-semibold small text-uppercase">Price Range</label>
                        <select name="price_range" class="form-select bg-light border-0 py-2">
                            <option value="">Any Price</option>
                            <option value="0-5000000" <?php echo $price_range == '0-5000000' ? 'selected' : ''; ?>>Below Rs. 5M</option>
                            <option value="5000000-10000000" <?php echo $price_range == '5000000-10000000' ? 'selected' : ''; ?>>Rs. 5M - 10M</option>
                            <option value="10000000-25000000" <?php echo $price_range == '10000000-25000000' ? 'selected' : ''; ?>>Rs. 10M - 25M</option>
                            <option value="25000000-50000000" <?php echo $price_range == '25000000-50000000' ? 'selected' : ''; ?>>Rs. 25M - 50M</option>
                            <option value="50000000-999999999" <?php echo $price_range == '50000000-999999999' ? 'selected' : ''; ?>>Above Rs. 50M</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label text-muted fw-semibold small text-uppercase">Listing Type</label>
                        <select name="type" class="form-select bg-light border-0 py-2">
                            <option value="">Any</option>
                            <option value="featured" <?php echo $listing_type == 'featured' ? 'selected' : ''; ?>>Featured</option>
                            <option value="simple" <?php echo $listing_type == 'simple' ? 'selected' : ''; ?>>Standard</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- Actions -->
            <div class="d-flex flex-wrap justify-content-between align-items-center mt-4">
                <a href="listings.php" class="btn btn-link text-muted text-decoration-none fw-medium p-0">Clear All</a>
                <div class="d-flex gap-3 align-items-center mt-2 mt-sm-0">
                    <button type="button" id="toggleListingsFiltersBtn" class="btn btn-link text-primary text-decoration-none fw-medium p-0">
                        <i class="fa-solid fa-sliders me-1"></i> More Filters
                    </button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm">
                        Apply Filters
                    </button>
                </div>
            </div>
        </form>

        <script>
            document.getElementById('toggleListingsFiltersBtn').addEventListener('click', function() {
                const container = document.getElementById('listingsMoreFilters');
                container.classList.toggle('show');
                if(container.classList.contains('show')) {
                    this.innerHTML = '<i class="fa-solid fa-chevron-up me-1"></i> Less Filters';
                } else {
                    this.innerHTML = '<i class="fa-solid fa-sliders me-1"></i> More Filters';
                }
            });
        </script>
    </div>

    <!-- Listings Overview Header -->
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 pb-2 border-bottom">
        <h4 class="mb-0 fw-bold d-flex align-items-center gap-2">
            <?php if($category): ?>
                <span class="text-primary"><?php echo htmlspecialchars($category); ?> Properties</span>
            <?php else: ?>
                All Properties
            <?php endif; ?>
            <span class="badge bg-light text-muted border rounded-pill fs-6 fw-normal"><?php echo $total_records; ?> Results</span>
        </h4>
        <div class="btn-group shadow-sm rounded-pill p-1 bg-light border mt-2 mt-sm-0">
            <a href="listings.php?type=featured<?= $category ? '&category='.$category : '' ?>" class="btn btn-sm rounded-pill <?php echo $listing_type == 'featured' ? 'btn-warning text-dark fw-bold' : 'btn-light text-muted'; ?> d-flex align-items-center">
                <svg class="svg-icon-fill me-1" style="width:14px;height:14px;" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg> Featured
            </a>
            <a href="listings.php?type=simple<?= $category ? '&category='.$category : '' ?>" class="btn btn-sm rounded-pill <?php echo $listing_type == 'simple' ? 'btn-secondary fw-bold' : 'btn-light text-muted'; ?>">Standard</a>
            <a href="listings.php<?= $category ? '?category='.$category : '' ?>" class="btn btn-sm rounded-pill <?php echo !$listing_type ? 'btn-primary fw-bold' : 'btn-light text-muted'; ?>">Show All</a>
        </div>
    </div>

    <!-- Full Width Listings Grid -->
    <?php if($result && mysqli_num_rows($result) > 0): ?>
        <div class="row g-4">
            <?php while($listing = mysqli_fetch_assoc($result)): ?>
                <!-- 4 columns on desktop, 1 on mobile -->
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    
                    <!-- Desktop View: Vertical Card (Hidden on Mobile) -->
                    <a href="listingview.php?id=<?php echo $listing['id']; ?>" class="text-decoration-none d-none d-lg-block h-100">
                        <div class="property-card h-100 <?php echo $listing['listing_type'] == 'featured' ? 'featured' : ''; ?>">
                            <?php if($listing['listing_type'] == 'featured'): ?>
                                <span class="featured-badge">FEATURED AD</span>
                            <?php endif; ?>
                            <div class="img-wrapper bg-light">
                                <?php if($listing['image_path'] && file_exists($listing['image_path'])): ?>
                                    <img src="<?php echo $listing['image_path']; ?>" alt="<?php echo htmlspecialchars($listing['title']); ?>" loading="lazy">
                                <?php else: ?>
                                    <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=400&q=80" alt="Placeholder">
                                <?php endif; ?>
                            </div>
                            <div class="card-body d-flex flex-column p-3">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <span class="category-tag mb-0 d-flex align-items-center small fw-medium">
                                        <svg class="svg-icon me-1" style="width:12px;height:12px;" viewBox="0 0 24 24"><path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg><?php echo htmlspecialchars($listing['category']); ?>
                                    </span>
                                    <span class="badge bg-<?php echo $listing['status'] == 'For Sale' ? 'success' : 'danger'; ?> bg-opacity-10 text-<?php echo $listing['status'] == 'For Sale' ? 'success' : 'danger'; ?> px-2 py-1 rounded-pill border border-<?php echo $listing['status'] == 'For Sale' ? 'success' : 'danger'; ?> border-opacity-25 flex-shrink-0"> rounded-pill">
                                        <?php echo htmlspecialchars($listing['status']); ?>
                                    </span>
                                </div>
                                <h5 class="text-truncate fw-bold mb-1" title="<?php echo htmlspecialchars($listing['title']); ?>"><?php echo htmlspecialchars($listing['title']); ?></h5>
                                <div class="price-tag text-primary fw-bold mb-2"><?php echo isset($listing['price']) && $listing['price'] > 0 ? 'Rs. ' . number_format((float)$listing['price'], 0) : 'Price on Request'; ?></div>
                                
                                <div class="text-muted small mb-3 fw-medium d-flex align-items-center">
                                    <i class="fa-solid fa-eye text-primary opacity-75 me-1"></i> <?php echo isset($listing['views']) ? (int)$listing['views'] : 0; ?> Views
                                </div>
                                
                                <div class="info-row mt-auto pt-3 border-top border-opacity-10 d-flex justify-content-between align-items-center">
                                    <span class="text-truncate text-muted small d-flex align-items-center pe-2">
                                        <i class="fa-solid fa-location-dot text-danger opacity-75 me-1 flex-shrink-0"></i> 
                                        <span class="text-truncate"><?php echo htmlspecialchars($listing['district']); ?></span>
                                    </span>
                                    <span class="text-end text-muted small flex-shrink-0">
                                        <?php echo timeAgo($listing['created_at']); ?>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </a>

                    <!-- Mobile View: Horizontal List Card (Hidden on PC) -->
                    <a href="listingview.php?id=<?php echo $listing['id']; ?>" class="text-decoration-none d-block d-lg-none h-100">
                        <div class="card property-list-card rounded-4 h-100 shadow-sm <?php echo $listing['listing_type'] == 'featured' ? 'featured-mobile-card' : 'bg-white'; ?>">
                            <div class="card-body p-3 d-flex flex-column">
                                <h6 class="card-title text-center text-dark fw-bold mb-2 text-truncate px-2" style="font-size: 1.05rem;" title="<?php echo htmlspecialchars($listing['title']); ?>">
                                    <?php echo htmlspecialchars($listing['title']); ?>
                                </h6>
                                <hr class="mt-0 mb-3 text-muted" style="opacity: 0.15;">
                                
                                <div class="d-flex gap-3 flex-grow-1">
                                    <div class="position-relative flex-shrink-0" style="width: 130px; height: 100px;">
                                        <?php if($listing['listing_type'] == 'featured'): ?>
                                            <span class="position-absolute top-0 start-0 badge-top-ad">FEATURED AD</span>
                                        <?php endif; ?>
                                        <?php if($listing['image_path'] && file_exists($listing['image_path'])): ?>
                                            <img src="<?php echo $listing['image_path']; ?>" alt="<?php echo htmlspecialchars($listing['title']); ?>" class="w-100 h-100 rounded-3 object-fit-cover shadow-sm" loading="lazy">
                                        <?php else: ?>
                                            <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=400&q=80" alt="Placeholder" class="w-100 h-100 rounded-3 object-fit-cover shadow-sm">
                                        <?php endif; ?>
                                    </div>
                                    
                                    <div class="flex-grow-1 d-flex flex-column" style="min-width: 0;">
                                        <h6 class="fw-bold mb-1 text-truncate text-primary"><?php echo isset($listing['price']) && $listing['price'] > 0 ? 'Rs. ' . number_format((float)$listing['price'], 0) : 'Price on Request'; ?></h6>
                                        
                                        <div class="d-flex align-items-center mt-1 gap-2" style="font-size: 0.75rem;">

    <span class="badge 
    <?php echo $listing['status'] == 'For Sale'
        ? 'bg-success bg-opacity-10 text-success border border-success border-opacity-25'
        : 'bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25'; ?>
    px-2 py-1 rounded-pill flex-shrink-0">

        <?php echo htmlspecialchars($listing['status']); ?>

    </span>

    <span class="text-muted text-truncate d-flex align-items-center">
        <i class="fa-solid fa-location-dot text-danger opacity-75 me-1 flex-shrink-0"></i>
        <span class="text-truncate"><?php echo htmlspecialchars($listing['district']); ?></span>
    </span>

</div>
                                        
                                        <div class="mt-auto pt-2 d-flex justify-content-between align-items-center w-100" style="font-size: 0.8rem;">
                                            <span class="text-muted d-flex align-items-center text-truncate pe-2">
                                                <i class="fa-solid fa-eye text-secondary opacity-75 me-1 flex-shrink-0"></i> <?php echo isset($listing['views']) ? (int)$listing['views'] : 0; ?> Views
                                            </span>
                                            <span class="text-end text-muted flex-shrink-0">
                                                <?php echo timeAgo($listing['created_at']); ?>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>

                </div>
            <?php endwhile; ?>
        </div>

        <!-- Pagination -->
        <?php if($total_pages > 1): ?>
            <nav class="mt-5 mb-3" aria-label="Page navigation">
                <ul class="pagination justify-content-center gap-2">
                    <?php
                    $query_string = "category=".urlencode($category)."&status=".urlencode($status)."&district=".urlencode($district)."&price_range=".urlencode($price_range)."&search=".urlencode($search)."&type=".urlencode($listing_type);
                    if($page > 1): ?>
                        <li class="page-item shadow-sm rounded-pill overflow-hidden">
                            <a class="page-link border-0 text-dark fw-bold px-3 d-flex align-items-center" href="?page=<?php echo $page-1; ?>&<?php echo $query_string; ?>">
                                <svg class="svg-icon me-1" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg> Prev
                            </a>
                        </li>
                    <?php endif; ?>
                    <?php
                    // Intelligent Pagination (Show max 5 pages)
                    $start = max(1, $page - 2);
                    $end = min($total_pages, $page + 2);
                    if ($start > 1) echo '<li class="page-item disabled"><span class="page-link border-0 bg-transparent text-muted">...</span></li>';
                    for($i = $start; $i <= $end; $i++):
                    ?>
                        <li class="page-item shadow-sm rounded-circle overflow-hidden mx-1 <?php echo $i == $page ? 'active' : ''; ?>">
                            <a class="page-link border-0 <?php echo $i == $page ? 'bg-primary text-white fw-bold' : 'text-dark'; ?>" style="width:40px; height:40px; display:flex; align-items:center; justify-content:center;" href="?page=<?php echo $i; ?>&<?php echo $query_string; ?>">
                                <?php echo $i; ?>
                            </a>
                        </li>
                    <?php endfor;
                    if ($end < $total_pages) echo '<li class="page-item disabled"><span class="page-link border-0 bg-transparent text-muted">...</span></li>';
                    ?>
                    <?php if($page < $total_pages): ?>
                        <li class="page-item shadow-sm rounded-pill overflow-hidden">
                            <a class="page-link border-0 text-dark fw-bold px-3 d-flex align-items-center" href="?page=<?php echo $page+1; ?>&<?php echo $query_string; ?>">
                                Next <svg class="svg-icon ms-1" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
                            </a>
                        </li>
                    <?php endif; ?>
                </ul>
            </nav>
        <?php endif; ?>

    <?php else: ?>
        <div class="card border-0 shadow-sm rounded-4 text-center py-5 mt-4">
            <div class="card-body py-5">
                <div class="bg-light rounded-circle d-inline-flex p-4 mb-4">
                    <svg class="svg-icon text-muted" style="width:48px;height:48px;" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
                </div>
                <h3 class="fw-bold text-dark">No Properties Found</h3>
                <p class="text-muted fs-5 mb-4">We couldn't find any listings matching your criteria.</p>
                <a href="listings.php" class="btn btn-primary rounded-pill px-5 py-2 fw-bold shadow d-inline-flex align-items-center">
                    <svg class="svg-icon me-2" viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><polyline points="3 3 3 8 8 8"/></svg> Clear Filters
                </a>
            </div>
        </div>
    <?php endif; ?>
</div>

<?php
// 3. Buffering to assign the content 
$content = ob_get_clean();
// 4. Render Layout
renderLayout($content, 'Properties');
?>