<?php
$pageTitle = $pageTitle ?? Lang::get('marketplace') . ' | ' . Lang::get('app_name');
$pageDescription = $pageDescription ?? Lang::get('marketplace_meta_description');
$pageUrl = $pageUrl ?? APP_URL . '/marketplace';

// JSON-LD
$itemListElements = [];
foreach ($listings as $idx => $l) {
    $itemListElements[] = [
        '@type' => 'ListItem',
        'position' => $idx + 1,
        'url' => APP_URL . '/marketplace/' . $l['slug'],
        'name' => $l['title'],
    ];
}
$extraJsonLd = Schema::render([
    [
        '@type' => 'CollectionPage',
        '@id' => APP_URL . '/marketplace#webpage',
        'name' => Lang::get('marketplace'),
        'description' => Lang::get('marketplace_meta_description'),
        'url' => APP_URL . '/marketplace',
        'isPartOf' => ['@id' => Schema::webSiteId()],
        'inLanguage' => Lang::getLocale(),
    ],
    [
        '@type' => 'ItemList',
        'itemListElement' => $itemListElements,
    ],
    Schema::breadcrumbs([
        ['name' => Lang::get('home'), 'item' => APP_URL . '/'],
        ['name' => Lang::get('marketplace'), 'item' => APP_URL . '/marketplace'],
    ]),
]);

require APP_ROOT . '/views/layouts/header.php';
?>

<!-- Breadcrumbs -->
<nav class="text-xs text-gray-500 dark:text-gray-400 mb-6" aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center gap-1">
        <li><a href="<?= APP_URL ?>/home" class="hover:text-primary-600 dark:hover:text-primary-400"><?= Lang::get('home') ?></a><span class="mx-1">/</span></li>
        <li><span class="text-gray-700 dark:text-gray-300"><?= Lang::get('marketplace') ?></span></li>
    </ol>
</nav>

<div class="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white"><?= Lang::get('marketplace') ?></h1>
        <p class="mt-1 text-gray-600 dark:text-gray-400"><?= Lang::get('marketplace_subtitle') ?></p>
    </div>
    <?php if (Session::isLoggedIn()): ?>
    <a href="<?= APP_URL ?>/marketplace/create" class="btn-gradient btn-gradient-blue btn-gradient-icon">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        <?= Lang::get('create_listing') ?>
    </a>
    <?php endif; ?>
</div>

<?php
$hasAdvanced = !empty($filters['year_from']) || !empty($filters['year_to'])
    || !empty($filters['condition_id']) || !empty($filters['material'])
    || !empty($filters['price_from']) || !empty($filters['price_to'])
    || !empty($filters['currency']);
?>

<!-- Filter Bar -->
<form method="GET" action="<?= APP_URL ?>/marketplace" id="filterForm" class="mb-6">
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
        <!-- Search row -->
        <div class="flex flex-col md:flex-row gap-3">
            <div class="flex-1 relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                </div>
                <input type="text" name="q" value="<?= htmlspecialchars($filters['q'] ?? '') ?>" placeholder="<?= Lang::get('search_listings') ?>" class="w-full pl-12 pr-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent">
            </div>
            <select name="sort" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-primary-500 md:w-56">
                <option value="newest" <?= ($filters['sort'] ?? 'newest') === 'newest' ? 'selected' : '' ?>><?= Lang::get('sort_newest') ?></option>
                <option value="price_asc" <?= ($filters['sort'] ?? '') === 'price_asc' ? 'selected' : '' ?>><?= Lang::get('sort_price_asc') ?></option>
                <option value="price_desc" <?= ($filters['sort'] ?? '') === 'price_desc' ? 'selected' : '' ?>><?= Lang::get('sort_price_desc') ?></option>
                <option value="popular" <?= ($filters['sort'] ?? '') === 'popular' ? 'selected' : '' ?>><?= Lang::get('sort_popular') ?></option>
            </select>
        </div>

        <!-- Basic filter row: country, year, item_type, listing_type -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1"><?= Lang::get('country') ?></label>
                <input type="text" name="country" value="<?= htmlspecialchars($filters['country'] ?? '') ?>" placeholder="<?= Lang::get('country') ?>" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1"><?= Lang::get('year') ?></label>
                <input type="text" name="year" value="<?= htmlspecialchars($filters['year'] ?? '') ?>" placeholder="<?= Lang::get('year') ?>" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1"><?= Lang::get('item_type') ?></label>
                <select name="item_type" id="itemTypeFilter" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-primary-500">
                    <option value=""><?= Lang::get('all') ?></option>
                    <option value="banknote" <?= ($filters['item_type'] ?? '') === 'banknote' ? 'selected' : '' ?>><?= Lang::get('banknote') ?></option>
                    <option value="coin" <?= ($filters['item_type'] ?? '') === 'coin' ? 'selected' : '' ?>><?= Lang::get('coin') ?></option>
                    <option value="other" <?= ($filters['item_type'] ?? '') === 'other' ? 'selected' : '' ?>><?= Lang::get('other') ?></option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1"><?= Lang::get('listing_type') ?></label>
                <select name="listing_type" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-primary-500">
                    <option value=""><?= Lang::get('all') ?></option>
                    <option value="sell" <?= ($filters['listing_type'] ?? '') === 'sell' ? 'selected' : '' ?>><?= Lang::get('sell') ?></option>
                    <option value="buy" <?= ($filters['listing_type'] ?? '') === 'buy' ? 'selected' : '' ?>><?= Lang::get('buy') ?></option>
                    <option value="trade" <?= ($filters['listing_type'] ?? '') === 'trade' ? 'selected' : '' ?>><?= Lang::get('trade') ?></option>
                </select>
            </div>
        </div>

        <!-- Advanced filter (collapsible) -->
        <details class="group" <?= $hasAdvanced ? 'open' : '' ?>>
            <summary class="cursor-pointer list-none inline-flex items-center gap-1.5 text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 select-none">
                <svg class="w-4 h-4 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                <?= Lang::get('advanced_search') ?>
            </summary>
            <div class="mt-3 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1"><?= Lang::get('year_from') ?></label>
                    <input type="text" name="year_from" value="<?= htmlspecialchars($filters['year_from'] ?? '') ?>" placeholder="<?= Lang::get('from') ?>" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-primary-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1"><?= Lang::get('year_to') ?></label>
                    <input type="text" name="year_to" value="<?= htmlspecialchars($filters['year_to'] ?? '') ?>" placeholder="<?= Lang::get('to') ?>" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-primary-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1"><?= Lang::get('condition') ?></label>
                    <select name="condition_id" id="conditionFilter" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-primary-500">
                        <option value=""><?= Lang::get('all') ?></option>
                        <?php foreach ($conditionOptions as $co): ?>
                        <option value="<?= $co['id'] ?>" data-type="<?= htmlspecialchars($co['type'] ?? 'both') ?>" <?= ((int)($filters['condition_id'] ?? 0)) === (int)$co['id'] ? 'selected' : '' ?>><?= htmlspecialchars($co['label']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div id="materialFilterWrapper">
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1"><?= Lang::get('material') ?></label>
                    <select name="material" id="materialFilter" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-primary-500">
                        <option value=""><?= Lang::get('all') ?></option>
                        <?php foreach (['silver', 'gold', 'copper', 'bronze', 'nickel', 'other'] as $mat): ?>
                        <option value="<?= $mat ?>" <?= ($filters['material'] ?? '') === $mat ? 'selected' : '' ?>><?= Lang::get('material_' . $mat) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1"><?= Lang::get('price_from') ?></label>
                    <input type="number" name="price_from" value="<?= htmlspecialchars($filters['price_from'] ?? '') ?>" placeholder="0" min="0" step="0.01" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-primary-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1"><?= Lang::get('price_to') ?></label>
                    <input type="number" name="price_to" value="<?= htmlspecialchars($filters['price_to'] ?? '') ?>" placeholder="∞" min="0" step="0.01" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-primary-500">
                </div>
                <div class="col-span-2 md:col-span-3 lg:col-span-2">
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1"><?= Lang::get('currency_label') ?></label>
                    <select name="currency" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-primary-500">
                        <option value=""><?= Lang::get('all') ?></option>
                        <?php foreach (['EUR', 'USD', 'RSD', 'GBP', 'CHF'] as $cur): ?>
                        <option value="<?= $cur ?>" <?= ($filters['currency'] ?? '') === $cur ? 'selected' : '' ?>><?= $cur ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
        </details>

        <!-- Action row -->
        <div class="flex flex-wrap items-center gap-2 pt-1">
            <button type="submit" class="btn-gradient btn-gradient-blue btn-gradient-sm"><?= Lang::get('apply_filters') ?></button>
            <a href="<?= APP_URL ?>/marketplace" class="btn-gradient btn-gradient-gray btn-gradient-sm"><?= Lang::get('clear') ?></a>
            
            <?php if (Session::isLoggedIn()): ?>
                <button type="button" id="saveSearchBtn" class="btn-gradient btn-gradient-blue btn-gradient-sm">
                    <?= Lang::get('save_search') ?>
                </button>
                <a href="<?= APP_URL ?>/marketplace/saved-searches" style="color: #6b7280; font-size: 14px; text-decoration: none; margin-left: auto; hover: color: #059669;" class="ml-auto text-sm text-gray-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"><?= Lang::get('my_saved_searches') ?> &rarr;</a>
            <?php else: ?>
                <a href="<?= APP_URL ?>/login" class="btn-gradient btn-gradient-blue btn-gradient-sm">
                    <?= Lang::get('login_to_save_search') ?>
                </a>
            <?php endif; ?>
        </div>
    </div>
</form>

<?php if (Session::isLoggedIn()): ?>
<!-- Save Search Modal -->
<div id="saveSearchModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" role="dialog" aria-modal="true" aria-labelledby="saveSearchHeading">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 w-full max-w-md">
        <div class="p-6">
            <h3 id="saveSearchHeading" class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1"><?= Lang::get('save_search') ?></h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4"><?= Lang::get('save_search_intro') ?></p>
            <label for="saveSearchName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"><?= Lang::get('search_name') ?></label>
            <input type="text" id="saveSearchName" maxlength="150" placeholder="<?= Lang::get('search_name_placeholder') ?>" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
            <p id="saveSearchError" class="hidden text-sm text-red-600 dark:text-red-400 mt-2"></p>
            <div class="flex gap-2 mt-8 justify-end">
                <button type="button" id="saveSearchCancel" class="btn-gradient btn-gradient-gray btn-gradient-sm"><?= Lang::get('cancel') ?></button>
                <button type="button" id="saveSearchConfirm" class="btn-gradient btn-gradient-blue btn-gradient-sm"><?= Lang::get('save') ?></button>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    var btn = document.getElementById('saveSearchBtn');
    var modal = document.getElementById('saveSearchModal');
    var nameInput = document.getElementById('saveSearchName');
    var confirmBtn = document.getElementById('saveSearchConfirm');
    var cancelBtn = document.getElementById('saveSearchCancel');
    var errEl = document.getElementById('saveSearchError');
    var csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';

    if (!btn) return;

    btn.addEventListener('click', function() {
        errEl.classList.add('hidden');
        nameInput.value = buildDefaultName();
        modal.classList.remove('hidden');
        nameInput.focus();
        nameInput.select();
    });

        cancelBtn.addEventListener('click', function() { modal.classList.add('hidden'); });
    modal.addEventListener('click', function(e) { if (e.target === modal) modal.classList.add('hidden'); });

    confirmBtn.addEventListener('click', function() {
        var name = (nameInput.value || '').trim();
        if (!name) { showErr('<?= addslashes(Lang::get('search_name')) ?>'); return; }
        var form = document.getElementById('filterForm');
        var fd = new FormData(form);
        var body = new URLSearchParams();
        body.append('name', name);
        body.append('csrf_token', csrf);
        fd.forEach(function(value, key) {
            if (value === '') return;
            body.append('filters[' + key + ']', value);
        });
        confirmBtn.disabled = true;
        fetch(window.APP_URL + '/api/marketplace/saved-search', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: body.toString()
        })
        .then(function(r) { return r.json().then(function(d) { return { ok: r.ok, data: d }; }); })
        .then(function(res) {
            confirmBtn.disabled = false;
            if (res.ok && res.data.success) {
                modal.classList.add('hidden');
                window.location.href = window.APP_URL + '/marketplace/saved-searches';
            } else {
                showErr(res.data.message || '<?= addslashes(Lang::get('error_loading_items')) ?>');
            }
        })
        .catch(function() {
            confirmBtn.disabled = false;
            showErr('<?= addslashes(Lang::get('error_loading_items')) ?>');
        });
    });

    function showErr(msg) { errEl.textContent = msg; errEl.classList.remove('hidden'); }

    function buildDefaultName() {
        var form = document.getElementById('filterForm');
        var parts = [];
        var fd = new FormData(form);
        ['country', 'year', 'item_type', 'listing_type'].forEach(function(k) {
            var v = fd.get(k);
            if (v) parts.push(v);
        });
        var q = fd.get('q');
        if (q) parts.unshift('"' + q + '"');
        return parts.length ? parts.join(' · ') : '<?= addslashes(Lang::get('saved_search_default')) ?>';
    }
})();
</script>
<?php endif; ?>

<!-- Listings Grid -->
<div>
        <div class="flex items-center justify-between mb-4">
            <p class="text-sm text-gray-500 dark:text-gray-400">
                <?= $total ?> <?= Lang::get('listings_found') ?>
            </p>
        </div>

        <?php if (empty($listings)): ?>
            <div class="rounded-2xl border border-dashed border-gray-300 dark:border-gray-700 p-12 text-center text-gray-500 dark:text-gray-400">
                <svg class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                <p class="text-lg font-medium mb-1"><?= Lang::get('no_listings_found') ?></p>
                <p class="text-sm"><?= Lang::get('no_listings_hint') ?></p>
            </div>
        <?php else: ?>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <?php foreach ($listings as $idx => $l): ?>
                <article class="group bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-lg transition-all hover:-translate-y-0.5 overflow-hidden">
                    <a href="<?= APP_URL ?>/marketplace/<?= htmlspecialchars($l['slug']) ?>" class="block">
                        <div class="aspect-[4/3] bg-gray-100 dark:bg-gray-900 overflow-hidden relative">
                            <?php if ($l['first_image']): ?>
                                <img src="<?= APP_URL ?>/uploads/listings/thumbs/<?= htmlspecialchars(pathinfo($l['first_image'], PATHINFO_FILENAME) . '_thumb.' . pathinfo($l['first_image'], PATHINFO_EXTENSION)) ?>"
                                     alt="<?= htmlspecialchars($l['title']) ?>"
                                     width="400" height="300"
                                     <?= $idx === 0 ? 'fetchpriority="high" loading="eager"' : 'loading="lazy" decoding="async"' ?>
                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                                     onerror="this.src='<?= APP_URL ?>/uploads/listings/<?= htmlspecialchars($l['first_image']) ?>'; this.onerror=null;">
                            <?php else: ?>
                                <div class="w-full h-full bg-gradient-to-br from-primary-500/10 via-primary-400/5 to-transparent dark:from-primary-500/20 dark:via-primary-500/10 flex items-center justify-center">
                                    <svg class="w-16 h-16 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                </div>
                            <?php endif; ?>
                            <!-- Badges -->
                            <div class="absolute top-2 left-2 flex flex-wrap gap-2">
                                <span class="px-2.5 py-1 rounded-full text-xs font-semibold uppercase
                                    <?php if ($l['listing_type'] === 'sell'): ?>bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-400
                                    <?php elseif ($l['listing_type'] === 'buy'): ?>bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-400
                                    <?php else: ?>bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-400<?php endif; ?>">
                                    <?= Lang::get($l['listing_type']) ?>
                                </span>
                                <?php if ($l['year']): ?>
                                <span class="px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
                                    <?= htmlspecialchars($l['year']) ?>
                                </span>
                                <?php endif; ?>
                            </div>
                        </div>
                    </a>
                    <div class="p-4">
                        <div class="flex items-start justify-between gap-2 mb-2">
                            <h2 class="text-sm font-semibold text-gray-900 dark:text-white leading-snug line-clamp-2">
                                <a href="<?= APP_URL ?>/marketplace/<?= htmlspecialchars($l['slug']) ?>" class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors"><?= htmlspecialchars($l['title']) ?></a>
                            </h2>
                        </div>
                        <?php if ($l['asking_price']): ?>
                            <p class="text-lg font-bold text-primary-600 dark:text-primary-400 mb-4"><?= number_format((float)$l['asking_price'], 2) ?> <?= $l['currency'] ?></p>
                        <?php endif; ?>
                        <div class="flex flex-wrap gap-4 mb-6">
                            <?php if ($l['item_type']): ?>
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400"><?= Lang::get($l['item_type']) ?></span>
                            <?php endif; ?>
                            <?php if ($l['country']): ?>
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400"><?= htmlspecialchars($l['country']) ?></span>
                            <?php endif; ?>
                            <?php if ($l['year']): ?>
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-400"><?= htmlspecialchars($l['year']) ?></span>
                            <?php endif; ?>
                            <?php if ($l['condition_label']): ?>
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400"><?= htmlspecialchars($l['condition_label']) ?></span>
                            <?php endif; ?>
                        </div>
                        <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                            <div class="flex items-center gap-1.5">
                                <?php if ($l['avatar']): ?>
                                    <img src="<?= APP_URL ?>/uploads/avatars/<?= htmlspecialchars($l['avatar']) ?>" alt="" class="w-5 h-5 rounded-full object-cover">
                                <?php else: ?>
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                                <?php endif; ?>
                                <span><?= htmlspecialchars($l['display_name'] ?: $l['username']) ?></span>
                            </div>
                            <time datetime="<?= date('c', strtotime($l['created_at'])) ?>"><?= date('M j, Y', strtotime($l['created_at'])) ?></time>
                        </div>
                    </div>
                </article>
                <?php endforeach; ?>
            </div>

            <!-- Pagination -->
            <?php if ($totalPages > 1): ?>
            <nav class="mt-10 flex items-center justify-center gap-2" aria-label="Pagination">
                <?php
                $buildUrl = function ($p) use ($filters) {
                    $qs = array_filter($filters);
                    if ($p > 1) $qs['page'] = $p;
                    return APP_URL . '/marketplace' . ($qs ? '?' . http_build_query($qs) : '');
                };
                ?>
                <?php if ($page > 1): ?>
                    <a href="<?= htmlspecialchars($buildUrl($page - 1)) ?>" rel="prev" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">&larr;</a>
                <?php endif; ?>
                <span class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400"><?= $page ?> / <?= $totalPages ?></span>
                <?php if ($page < $totalPages): ?>
                    <a href="<?= htmlspecialchars($buildUrl($page + 1)) ?>" rel="next" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">&rarr;</a>
                <?php endif; ?>
            </nav>
            <?php endif; ?>
        <?php endif; ?>
</div>

<script>
(function() {
    'use strict';
    
    const itemTypeFilter = document.getElementById('itemTypeFilter');
    const materialFilterWrapper = document.getElementById('materialFilterWrapper');
    const conditionFilter = document.getElementById('conditionFilter');
    
    if (!itemTypeFilter || !materialFilterWrapper || !conditionFilter) return;
    
    // Store original condition options
    const originalConditionOptions = Array.from(conditionFilter.options);
    
    function updateFilters() {
        const selectedType = itemTypeFilter.value;
        
        // Handle material filter visibility
        if (selectedType === 'banknote') {
            materialFilterWrapper.style.display = 'none';
            // Clear material selection when hidden
            document.getElementById('materialFilter').value = '';
        } else {
            materialFilterWrapper.style.display = 'block';
        }
        
        // Handle condition filter options
        // Clear current options except the "All" option
        conditionFilter.innerHTML = '';
        const allOption = originalConditionOptions.find(opt => opt.value === '');
        if (allOption) {
            conditionFilter.appendChild(allOption.cloneNode(true));
        }
        
        // Add appropriate condition options based on item type
        originalConditionOptions.forEach(option => {
            if (option.value === '') return; // Skip the "All" option (already added)
            
            const optionType = option.getAttribute('data-type') || 'both';
            
            // Show option if:
            // - No item type selected (show all)
            // - Item type is 'other' (show all)
            // - Option type matches selected item type
            // - Option type is 'both' (show for all)
            if (!selectedType || selectedType === 'other' || 
                optionType === selectedType || optionType === 'both') {
                conditionFilter.appendChild(option.cloneNode(true));
            }
        });
        
        // Restore selected value if it's still available
        const currentValue = conditionFilter.getAttribute('data-current-value');
        if (currentValue) {
            const optionToSelect = conditionFilter.querySelector(`option[value="${currentValue}"]`);
            if (optionToSelect) {
                optionToSelect.selected = true;
            }
        }
    }
    
    // Store current value before updating
    conditionFilter.addEventListener('change', function() {
        this.setAttribute('data-current-value', this.value);
    });
    
    // Initialize on page load
    updateFilters();
    
    // Update on item type change
    itemTypeFilter.addEventListener('change', updateFilters);
    
    // Store current page for back button functionality
    sessionStorage.setItem('previousPage', window.location.href);
})();
</script>

<?php require APP_ROOT . '/views/layouts/footer.php'; ?>
