<?php
$title = 'Homepage Studio';
?>

<!-- studio-ui-recovery-pack -->
<style>
.container-fluid.py-4.studio-shell{max-width:100%!important}
.hero-card{background:linear-gradient(135deg,#081226,#17336a)!important;border-radius:28px!important;padding:28px!important;color:#fff!important}
.toolbar,.card-body.d-flex.gap-2.flex-wrap{display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:center!important}
.toolbar .btn,.studio-btn{border-radius:14px!important;height:44px!important}
.count-chip{background:rgba(255,255,255,.08)!important;border-radius:20px!important;padding:18px!important;display:flex!important;flex-direction:column!important}
.side-item{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:18px!important;padding:14px!important;margin-bottom:12px!important}
.preview{border-radius:24px!important;box-shadow:0 20px 50px rgba(0,0,0,.08)!important}
h2>.row,h2>.col{display:none!important}
</style>

<?php

$slug =
$conference['slug']
?? ($_SESSION['conference_slug'] ?? '');

?>

<div class="row g-3 mb-4">
<div
class="card card-studio mb-4">

<div
class="card-body">

<h5>

Publish Queue

</h5>

<hr>

<div>

Draft →

Review →

Publish

</div>

<div
class="progress mt-2">

<div
class="progress-bar"

style="width:75%">

75%

</div>

</div>

</div>

</div>
<?php

$cards=[

[
'Sections',
count($sections),
'fa-layer-group',
'primary'
],

[
'Blocks',
count($blocks),
'fa-cubes',
'success'
],

[
'Languages',
2,
'fa-language',
'warning'
],

[
'Health',
$health.'%',
'fa-heart-pulse',
'info'
]

];

foreach(
$cards
as $c
):

?>

<div class="col-lg-3">

<div
class="card border-0 shadow rounded-4">

<div class="card-body">

<div
class="d-flex justify-content-between">

<div>

<div class="text-muted">

<?= $c[0] ?>

</div>

<h2>

<?= $c[1] ?>

</h2>

</div>

<i
class="fa <?= $c[2] ?>
fa-2x text-<?= $c[3] ?>">

</i>

</div>

</div>

</div>

</div>

<?php endforeach; ?>

</div>	

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

<div
class="studio-layout">

<style>

:root{

--bg:
#f3f7fb;

--card:
#ffffff;

--dark:
#0f172a;

--blue:
#2563eb;

--border:
#e2e8f0;

}

body{

background:
var(--bg);

}

.studio-shell{

max-width:
100%;

}

.studio-layout{

display:flex;

flex-direction:column;

gap:24px;

}

.hero-card{

background:

linear-gradient(
135deg,
#0b1220,
#172554,
#1e3a8a
);

border:none;

border-radius:28px;

padding:34px;

color:white;

overflow:hidden;

}

.card-studio{

background:
var(--card);

border:

1px solid
var(--border);

border-radius:24px;

box-shadow:

0 10px 40px
rgba(
15,
23,
42,
.06
);

overflow:hidden;

}

.count-chip{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

min-height:120px;

border-radius:22px;

background:

rgba(
255,
255,
255,
.08
);

backdrop-filter:

blur(
18px
);

color:white;

font-weight:700;

}

.toolbar{

display:flex;

gap:10px;

flex-wrap:wrap;

}

.toolbar .btn{

height:44px;

border-radius:14px;

padding:

0 18px;

font-weight:600;

}

.side-item{

background:
white;

border:

1px solid
#edf2f7;

border-radius:18px;

padding:18px;

margin-bottom:12px;

}

.side-item:hover{

transform:

translateY(-2px);

box-shadow:

0 10px 30px
rgba(
0,
0,
0,
.05
);

}

.preview{

width:100%;

height:900px;

border:none;

border-radius:24px;

background:white;

}

.preview-toolbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px;

border-bottom:

1px solid
#eef2f7;

}

.studio-search{

width:260px;

border-radius:999px;

height:46px;

}

.metric-grid{

display:grid;

grid-template-columns:

repeat(
4,
1fr
);

gap:18px;

}

.section-grid{

display:grid;

grid-template-columns:

1fr;

gap:12px;

}

@media(
max-width:1200px
){

.metric-grid{

grid-template-columns:
1fr 1fr;

}

}

@media(
max-width:768px
){

.metric-grid{

grid-template-columns:
1fr;

}

}

</style>

<div class="hero-card p-4 mb-4">

<div
class="row mb-4">

<div
class="col">

<div
class="count-chip">

Sections

<br>

<?= $stats['sections'] ?>

</div>

</div>

<div
class="col">

<div
class="count-chip">

Blocks

<br>

<?= $stats['blocks'] ?>

</div>

</div>

<div
class="col">

<div
class="count-chip">

Active

<br>

<?= $stats['active_sections'] ?>

</div>

</div>

<div
class="col">

<div
class="count-chip">

Score

<br>

<?= $stats['score'] ?>%

</div>

<div
class="card border-0 shadow rounded-4">

<div class="card-body">

Heatmap

<h3>

<?=

array_sum(
array_column(
$heatmap
?? [],
'views'
)

)

?>

</h3>

<div
class="text-muted">

Interactions

</div>

</div>

</div>

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

<div class="col">

<div
class="alert alert-info">

Homepage Health

<br>

<b>

<?= $health ?>%

</b>

<br>

<?= $healthLabel ?>

</div>

</div>

<div class="col">

<div
class="alert alert-success">

Governance

<br>

<b>

<?= $governance ?>%

</b>

<br>

<?= $governanceLabel ?>

</div>

</div>

</div>
</div>

</div>

<div class="d-flex justify-content-between align-items-center flex-wrap">

<div>



</div>
<h2 class="mb-2">


<div class="col">

<div
class="count-chip">

Clicks

<br>

<?=

number_format(

array_sum(

array_column(

$heatmap
?? [],

'clicks'

)

)

)

?>

</div>

</div>

<div class="col">

<div
class="count-chip">

Snapshots

<br>

<?=

count(
$snapshots
?? []
)

?>

</div>

</div>

<div class="col">

<div
class="count-chip">

Preview

<br>

LIVE

</div>

</div>

</div>

<i class="fa-solid fa-wand-magic me-2"></i>

Homepage Studio

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

<div class="col">

<div
class="count-chip">

Views

<br>

<?=

number_format(

array_sum(

array_column(

$heatmap
?? [],

'views'

)

)

)

?>

</div>

</h2>

<div style="opacity:.9">

Live conference homepage governance

</div>

<div class="mt-3">

<span class="count-chip">

Sections:
<?= count($sections ?? []) ?>

</span>

<span class="count-chip">

Blocks:
<?= count($blocks ?? []) ?>

</span>

</div>

</div>

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

<div
class="card-studio">

<div
class="card-body">

<div
class="toolbar">

<div
class="card rounded-4">

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

<a
href="/easychair/admin/conference-home/preview"
class="btn btn-primary">

Preview

</a>

<?php if(
!empty(
$s[
'content_en'
]
)
): ?>

<div
class="small text-muted">

<?= mb_substr(

$s[
'content_en'
],

0,

120

) ?>

…

</div>

<?php endif; ?>
<a
href="/easychair/admin/conference-home/publish"
class="btn btn-success">

Publish

</a>

<a
href="/easychair/admin/conference-home/versions"
class="btn btn-warning">

Versions

</a>

<a
href="/easychair/admin/conference-home/export"
class="btn btn-dark">

Export

</a>

<a
href="/easychair/admin/conference-home/ai-import"
class="btn btn-danger">

AI Import

</a>


<a
href="/easychair/admin/conference-home/snapshot"
class="btn btn-outline-success">

Snapshot

</a>

<a
href="/easychair/admin/conference-home/ops"
class="btn btn-outline-primary">

Operations

</a>

<button
id="undoBtn"
class="btn btn-outline-warning">

Undo

</button>

<button id="redoBtn" class="btn btn-outline-info">
Redo
</button>

<a
href="/easychair/admin/conference-home/snapshot"

class="btn btn-outline-success">

Create Snapshot

</a>

<a
href="/easychair/admin/conference-home/versions"

class="btn btn-outline-danger">

Recover

</a>

</div>

</div>

</div>

<a
href="/easychair/admin/conference-home/clone"
class="btn btn-dark studio-btn">

<i class="fa fa-copy"></i>

Clone

</a>

<a
href="/easychair/admin/conference-home/import"
class="btn btn-secondary studio-btn">

<i class="fa fa-upload"></i>

Import

</a>


<a
href="/easychair/admin/conference-home/templates"
class="btn btn-dark studio-btn">

Templates

</a>

<a
href="/easychair/admin/conference-home/ai-generate"
class="btn btn-info studio-btn">

AI Generate

</a>

<a
href="/easychair/admin/conference-home/ai-write"
class="btn btn-outline-danger">

AI Writer

</a>


<a
href="/easychair/admin/conference-home/ai-conference"

class="btn btn-outline-primary">

<i class="fa fa-users"></i>

AI Conference

</a>

<a
href="/easychair/admin/conference-home/marketplace"

class="btn btn-outline-dark">

Marketplace

</a>

<a
href="/easychair/admin/conference-home/marketplace"

class="btn btn-outline-warning">

Marketplace

</a>

<a
href="/easychair/admin/conference-home/blueprint/export"

class="btn btn-outline-primary">

Blueprint

</a>

<a
href="/easychair/admin/conference-home/blueprints"

class="btn btn-outline-success">

Blueprint Center

</a>

<input
type="text"
class="form-control studio-search"
style="
width:220px;
border-radius:999px;
"
placeholder="Search homepage...">

</div>

</div>

</div>

<div class="row">

<div class="col-lg-8">

<div class="card card-studio">

<div class="card-body">

<div class="d-flex justify-content-between">

<h4>

Live Preview

</h4>

<div
class="card rounded-4 mb-3">

<div
class="card-body">

<div
class="d-flex justify-content-between">

<h5>

Conference Intelligence

</h5>

<span
class="badge bg-success">

AI

</span>

</div>

<hr>

<div class="row">

<div class="col">

<div class="small text-muted">

Speakers

</div>

<h5>

8+

</h5>

</div>

<div class="col">

<div class="small text-muted">

Sessions

</div>

<h5>

24

</h5>

</div>

<div class="col">

<div class="small text-muted">

Tracks

</div>

<h5>

6

</h5>

</div>

</div>

</div>

</div>

<a
class="btn btn-dark studio-btn"

href="/easychair/admin/conference-home">

Back

</a>

</div>

<hr>

<div
class="card card-studio mb-3">

<div
class="card-body">

<h5>

Visual Designer

</h5>

<div
class="row g-2">

<div class="col">

<select
id="designerTheme"
class="form-select">

<option>

Glass

</option>

<option>

Gradient

</option>

<option>

Corporate

</option>

<option>

Minimal

</option>

</select>

</div>

<div class="col">

<select
id="designerAnim"
class="form-select">

<option>

fade-up

</option>

<option>

zoom-in

</option>

<option>

slide-left

</option>

<option>

float

</option>

</select>

</div>

</div>

</div>

</div>

<iframe
id="livePreview"
class="preview"

src="/easychair/conference/<?= urlencode($slug) ?>">

</iframe>

<div
class="card card-studio mt-3">

<div
class="card-body">

<h5>

Program Timeline

</h5>

<hr>

<div
class="metric-grid">

<div class="col">

09:00

<br>

Opening

</div>

<div class="col">

10:30

<br>

Keynote

</div>

<div class="col">

13:00

<br>

Tracks

</div>

<div class="col">

16:00

<br>

Closing

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="col-lg-4">

<div class="card card-studio mb-4">

<div class="card-body">

<div class="d-flex justify-content-between">

<h5>

Sections

<div
class="small text-muted mb-3">

Quality Diagnostics

</div>

<span
class="badge bg-primary ms-2">

<?= count($sections ?? []) ?>

</span>

</h5>

<a
class="btn btn-primary btn-sm studio-btn"

href="/easychair/admin/conference-home/sections">

Manage

</a>

</div>

<hr>

<?php foreach(($sections ?? []) as $s): ?>

<div
class="side-item"
data-id="<?= (int)$s['id'] ?>">

<div class="d-flex justify-content-between">

<div>

<div class="fw-bold">

<?= htmlspecialchars(
$s['section_title_en']
?:$s['section_key']
) ?>

</div>

<?php
if(
(
$s[
'section_key'
]
?? ''
)
==='speakers'
):
?>

<span
class="badge bg-primary">

AI Speaker

</span>

<?php endif; ?>

<small class="text-muted">

<?= htmlspecialchars(
$s['section_title_ar']
?:''
) ?>

</small>

</div>

<div>

<a
class="btn btn-outline-dark btn-sm"

href="/easychair/admin/conference-home/sections/edit?id=<?= (int)$s['id'] ?>">

Edit

</a>

</div>

</div>

</div>

<?php endforeach; ?>

</div>

</div>

<div class="card card-studio">

<div class="card-body">

<div class="d-flex justify-content-between">

<div
class="card card-studio mb-4">

<div
class="card-body">

<h5>

Proceedings Composer

</h5>

<hr>

<div>

Indexed

✓

</div>

<div>

Publisher

Conference Proceedings

</div>

<div>

Tracks

6

</div>

<div>

Auto Generated

</div>

</div>

</div>

<h5>

Blocks

<span
class="badge bg-dark ms-2">

<?= count($blocks ?? []) ?>

</span>

<span
class="badge bg-success">

<?= count($blocks ?? []) ?>

Visible

</span>
</h5>

<a
class="btn btn-dark btn-sm studio-btn"

href="/easychair/admin/conference-home/blocks">

Manage

</a>

</div>

<hr>

<?php foreach(($blocks ?? []) as $b): ?>

<?php

$sectionHealth=100;

if(
empty(
$s[
'title_en'
]
)
){
$sectionHealth-=20;
}

if(
empty(
$s[
'title_ar'
]
)
){
$sectionHealth-=20;
}

if(
empty(
$s[
'subtitle_en'
]
)
){
$sectionHealth-=20;
}

?>

<div class="side-item">

<div class="d-flex justify-content-between">

<div>

<div class="fw-bold">

<?= htmlspecialchars(
$b['title_en']
?:$b['block_key']
?:'Block'
) ?>

</div>

<span
class="badge
bg-<?=
$sectionHealth>=80
?'success'
:
'warning'
?>">

<?= $sectionHealth ?>%

</span>

<small class="text-muted">

<?= htmlspecialchars(
$b['title_ar']
?:''
) ?>

</small>

</div>

<div>

<a
class="btn btn-outline-primary btn-sm"

href="/easychair/admin/conference-home/blocks/edit?id=<?= (int)$b['id'] ?>">

Edit

</a>

</div>

</div>

</div>

<?php endforeach; ?>

</div>

</div>

</div>
</div>
</div>
</div>
<div
class="text-center mt-5 text-muted">

Homepage Studio

•

Conference Command Center

•

<?= date('Y') ?>

</div>
<script>

const search =

document
.getElementById(
'homepageSearch'
);

search
?.addEventListener(

'input',

function(){

const q =
this
.value
.toLowerCase();

document
.querySelectorAll(
'.side-item'
)

.forEach(

x=>{

const show =

x
.innerText
.toLowerCase()

.includes(
q
);

x.style.display=

show

? ''

:

'none';

}

);

document
.querySelector(
'.preview'
)

.style.opacity=

q

? '.97'

:

'1';

}

);

</script>

<script
src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js">
</script>

<script>

let undo=[];

let redo=[];

const list=

document
.querySelector(
'.card-studio'
);

if(
list
){

new Sortable(

list,

{

animation:150,

onEnd(){

save();

}

}

);

}

function save(){

const ids=
[
...

document
.querySelectorAll(
'.side-item'
)

]

.map(

x=>

x.dataset.id

);

undo.push(
ids
);

fetch(

'/easychair/admin/conference-home/reorder',

{

method:'POST',

headers:{
'Content-Type':
'application/x-www-form-urlencoded'
},

body:

'order[]='

+

ids.join(
'&order[]='
)

}

);

}

document
.getElementById(
'undoBtn'
)

?.onclick=

()=>{

if(
undo.length
){

redo.push(
undo.pop()
);

location.reload();

}

};

document
.getElementById(
'redoBtn'
)

?.onclick=

()=>{

location.reload();

};

</script>

<script>

const iframe =

document
.querySelector(
'.preview'
);

document
.getElementById(
'designerTheme'
)

?.addEventListener(

'change',

e=>{

iframe.style.border=

'6px solid #2563eb';

iframe.style.transition=

'.4s';

}

);

document
.getElementById(
'designerAnim'
)

?.addEventListener(

'change',

e=>{

iframe.style.transform=

'scale(.99)';

setTimeout(

()=>{

iframe.style.transform=
'scale(1)';

},

250

);

}

);

</script>

</div>

</div>
