<?php
$title = 'Homepage Template Marketplace';

$templates = $templates ?? [];

$totalTemplates = count($templates);
$totalFavorites = 0;
$totalSections = 0;
$totalBlocks = 0;

foreach ($templates as $tpl) {
    if (!empty($tpl['is_favorite'])) {
        $totalFavorites++;
    }

    $sections = json_decode($tpl['sections_json'] ?? '[]', true);
    $blocks   = json_decode($tpl['blocks_json'] ?? '[]', true);

    $totalSections += is_array($sections) ? count($sections) : 0;
    $totalBlocks   += is_array($blocks) ? count($blocks) : 0;
}
?>

<div class="container-fluid py-4">

<style>
.market-hero{
background:linear-gradient(135deg,#020617,#1e3a8a,#2563eb);
color:#fff;
border-radius:30px;
padding:34px;
box-shadow:0 28px 80px rgba(15,23,42,.22);
margin-bottom:28px;
}

.market-stat{
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
border-radius:22px;
padding:18px;
height:100%;
}

.market-stat strong{
display:block;
font-size:28px;
font-weight:900;
}

.market-toolbar{
background:#fff;
border-radius:24px;
padding:18px;
box-shadow:0 14px 35px rgba(15,23,42,.08);
margin-bottom:24px;
}

.market-card{
border:0;
border-radius:28px;
overflow:hidden;
box-shadow:0 22px 60px rgba(15,23,42,.10);
transition:.25s ease;
height:100%;
}

.market-card:hover{
transform:translateY(-8px);
box-shadow:0 32px 80px rgba(15,23,42,.16);
}

.market-card-top{
height:140px;
background:
radial-gradient(circle at top left,rgba(96,165,250,.9),transparent 35%),
linear-gradient(135deg,#0f172a,#1d4ed8);
color:#fff;
padding:22px;
position:relative;
}

.market-fav{
position:absolute;
top:18px;
right:18px;
font-size:24px;
color:#facc15;
}

.market-title{
font-weight:900;
font-size:20px;
line-height:1.35;
max-width:80%;
}

.market-category{
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 13px;
border-radius:999px;
background:rgba(255,255,255,.18);
font-size:13px;
font-weight:800;
margin-top:12px;
}

.market-meta{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin:18px 0;
}

.market-meta div{
background:#f8fafc;
border-radius:16px;
padding:12px;
text-align:center;
font-weight:800;
}

.market-meta span{
display:block;
font-size:12px;
color:#64748b;
font-weight:700;
}

.market-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.market-empty{
background:#fff;
border:1px dashed #cbd5e1;
border-radius:28px;
padding:55px;
text-align:center;
box-shadow:0 15px 40px rgba(15,23,42,.06);
}
</style>

<div class="market-hero">

<div class="d-flex justify-content-between align-items-start flex-wrap gap-3">

<div>
<h1 class="fw-black mb-2">
<i class="fa fa-store me-2"></i>
Homepage Template Marketplace
</h1>

<div class="opacity-75">
Save, duplicate, favorite, and apply complete conference homepage templates.
</div>
</div>

<div class="d-flex gap-2 flex-wrap">

<a
href="/easychair/admin/conference-home/template/save"
class="btn btn-warning rounded-pill px-4 fw-bold">
<i class="fa fa-save"></i>
Save Current Homepage
</a>

<a
href="/easychair/admin/conference-home/studio"
class="btn btn-light rounded-pill px-4 fw-bold">
<i class="fa fa-layer-group"></i>
Back to Studio
</a>

</div>

</div>

<div class="row g-3 mt-4">

<div class="col-md-3">
<div class="market-stat">
<span>Total Templates</span>
<strong><?= (int)$totalTemplates ?></strong>
</div>
</div>

<div class="col-md-3">
<div class="market-stat">
<span>Favorites</span>
<strong><?= (int)$totalFavorites ?></strong>
</div>
</div>

<div class="col-md-3">
<div class="market-stat">
<span>Stored Sections</span>
<strong><?= (int)$totalSections ?></strong>
</div>
</div>

<div class="col-md-3">
<div class="market-stat">
<span>Stored Blocks</span>
<strong><?= (int)$totalBlocks ?></strong>
</div>
</div>

</div>

</div>

<div class="market-toolbar">

<div class="row g-3 align-items-center">

<div class="col-lg-6">
<input
type="search"
id="marketSearch"
class="form-control rounded-pill"
placeholder="Search templates by name or category...">
</div>

<div class="col-lg-3">
<select id="marketFilter" class="form-select rounded-pill">
<option value="">All templates</option>
<option value="favorite">Favorites only</option>
<option value="general">General</option>
<option value="conference">Conference</option>
<option value="medical">Medical</option>
<option value="engineering">Engineering</option>
<option value="journal">Journal</option>
</select>
</div>

<div class="col-lg-3 text-lg-end">
<a
href="/easychair/admin/conference-home/export-blueprint"
class="btn btn-outline-primary rounded-pill px-4">
<i class="fa fa-download"></i>
Export Blueprint
</a>
</div>

</div>

</div>

<?php if (!empty($templates)): ?>

<div class="row g-4" id="templateGrid">



<?php foreach ($templates as $t): ?>

<?php
$sections = json_decode($t['sections_json'] ?? '[]', true);
$blocks   = json_decode($t['blocks_json'] ?? '[]', true);

$sectionCount = is_array($sections) ? count($sections) : 0;
$blockCount   = is_array($blocks) ? count($blocks) : 0;

$name = (string)($t['name'] ?? 'Untitled Template');
$category = (string)($t['category'] ?? 'General');
$isFav = !empty($t['is_favorite']);

$searchText = strtolower($name . ' ' . $category . ' ' . ($isFav ? 'favorite' : ''));
?>

<div
class="col-xl-4 col-lg-6 template-item"
data-search="<?= htmlspecialchars($searchText) ?>"
data-category="<?= htmlspecialchars(strtolower($category)) ?>"
data-favorite="<?= $isFav ? 'favorite' : '' ?>">

<div class="market-card">

<div class="market-card-top">

<div class="market-fav">
<?= $isFav ? '★' : '☆' ?>
</div>

<div class="market-title">
<?= htmlspecialchars($name) ?>
</div>

<div class="market-category">
<i class="fa fa-tag"></i>
<?= htmlspecialchars($category ?: 'General') ?>
</div>

</div>

<div class="card-body p-4">

<div class="small text-muted mb-2">
<i class="fa fa-clock"></i>
Created:
<?= htmlspecialchars((string)($t['template_created_at'] ?? '')) ?>
</div>

<div class="small text-muted mb-3">
<i class="fa fa-code-branch"></i>
Version:
<?= (int)($t['version_no'] ?? 1) ?>
</div>

<div class="market-meta">

<div>
<?= (int)$sectionCount ?>
<span>Sections</span>
</div>

<div>
<?= (int)$blockCount ?>
<span>Blocks</span>
</div>

<div>
<?= $isFav ? 'Yes' : 'No' ?>
<span>Favorite</span>
</div>

</div>

<div class="market-actions">

<a
href="/easychair/admin/conference-home/template/apply?id=<?= (int)$t['template_id'] ?>"
class="btn btn-primary rounded-pill px-4"
onclick="return confirm('Apply this template to the current conference homepage? Existing matching section keys will be merged.');">
<i class="fa fa-check"></i>
Apply
</a>

<a
href="/easychair/admin/conference-home/template/duplicate?id=<?= (int)$t['template_id'] ?>"
class="btn btn-outline-dark rounded-pill px-4">
<i class="fa fa-copy"></i>
Duplicate
</a>

<a
href="/easychair/admin/conference-home/template/favorite?id=<?= (int)$t['template_id'] ?>"
class="btn btn-outline-warning rounded-pill px-4">
<i class="fa fa-star"></i>
<?= $isFav ? 'Unfavorite' : 'Favorite' ?>
</a>

</div>

</div>

</div>

</div>

<?php endforeach; ?>

</div>

<?php else: ?>

<div class="market-empty">

<h3 class="fw-bold">
<i class="fa fa-box-open text-primary"></i>
No homepage templates yet
</h3>

<p class="text-muted mb-4">
Save the current homepage as a reusable template, then apply it to other conferences.
</p>

<a
href="/easychair/admin/conference-home/template/save"
class="btn btn-success rounded-pill px-5">
<i class="fa fa-save"></i>
Save Current Homepage
</a>

</div>

<?php endif; ?>

</div>

<script>
(function(){
const search = document.getElementById('marketSearch');
const filter = document.getElementById('marketFilter');
const items  = document.querySelectorAll('.template-item');

function applyFilters(){
const q = (search?.value || '').toLowerCase().trim();
const f = (filter?.value || '').toLowerCase().trim();

items.forEach(function(item){
const text = item.dataset.search || '';
const cat  = item.dataset.category || '';
const fav  = item.dataset.favorite || '';

let ok = true;

if(q && !text.includes(q)){
ok = false;
}

if(f === 'favorite' && fav !== 'favorite'){
ok = false;
}else if(f && f !== 'favorite' && cat !== f){
ok = false;
}

item.style.display = ok ? '' : 'none';
});
}

search?.addEventListener('input', applyFilters);
filter?.addEventListener('change', applyFilters);
})();
</script>
