<?php

require_once __DIR__ . '/_cms_helpers.php';

$lang = $lang ?? 'en';
$currentSection = $currentSection ?? [];

$committeeTypeLabels = [
    'tpc' => ['ar'=>'اللجنة التنظميّة','en'=>'Technical Program Committee'],
    'chair' => ['ar'=>'رئاسة المؤتمر','en'=>'Conference Chairs'],
    'organizing' => ['ar'=>'اللجنة التنظيمية','en'=>'Organizing Committee'],
    'scientific' => ['ar'=>'اللجنة العلمية','en'=>'Scientific Committee'],
    'editor' => ['ar'=>'هيئة التحرير','en'=>'Editorial Committee'],
    'reviewer' => ['ar'=>'المحكمون','en'=>'Reviewers'],
    'patron' => ['ar'=>'الرعاة','en'=>'Patrons'],
    'keynote' => ['ar'=>'المتحدثون الرئيسيون','en'=>'Keynote Speakers'],
    'other' => ['ar'=>'لجان أخرى','en'=>'Other Committees'],
];

$committeeTabs = array_keys($groupedCommittees ?? []);
$firstTab = $committeeTabs[0] ?? '';

?>

<section data-cms-section="members" id="members" class="ecms-managed-section ec-section-shell ec-section-anchor <?= pcb_h($currentSection['theme_name'] ?? '') ?>">

<div class="container">

<div class="proceedings-header">
<div>
<div class="ec-ieee-badge mb-4">
<i class="fa fa-users"></i>
<?= pcb_h($lang === 'ar' ? 'اللجان والمشاركون' : 'Committees & Members') ?>
</div>

<h2 class="section-title">
<?= pcb_h($lang === 'ar'
    ? ($currentSection['title_ar'] ?? 'اللجان العلمية والتنظيمية')
    : ($currentSection['title_en'] ?? 'Scientific & Organizing Committees')) ?>
</h2>

<p class="pcb-section-text mt-4">
<?= pcb_h($lang === 'ar'
    ? ($currentSection['subtitle_ar'] ?? 'يتم عرض أعضاء اللجان والمشاركين في تنظيم المؤتمر.')
    : ($currentSection['subtitle_en'] ?? 'Conference committees and organizing members are displayed here.')) ?>
</p>
</div>
</div>

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

<style>
.ec1025-toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:24px}
.ec1025-search{min-width:280px;border:1px solid #dbe4f0;border-radius:999px;padding:12px 18px;font-weight:700}
.ec1025-tabs{display:flex;gap:10px;flex-wrap:wrap}
.ec1025-tab{border:0;border-radius:999px;padding:11px 18px;font-weight:900;background:#e2e8f0;color:#0f172a;cursor:pointer}
.ec1025-tab.active{background:#2563eb;color:#fff;box-shadow:0 10px 28px rgba(37,99,235,.25)}
.ec1025-pane{display:none}
.ec1025-pane.active{display:block}
.ec1025-slider-wrap{position:relative}
.ec1025-slider{display:flex;gap:20px;overflow-x:auto;padding:10px 5px 24px;scroll-behavior:smooth}
.ec1025-slider::-webkit-scrollbar{height:8px}
.ec1025-slider::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.ec1025-card{min-width:300px;max-width:330px;flex:0 0 auto}
.ec1025-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:5;border:0;width:42px;height:42px;border-radius:50%;background:#0f172a;color:#fff;box-shadow:0 12px 30px rgba(15,23,42,.25)}
.ec1025-prev{left:-10px}
.ec1025-next{right:-10px}
.ec1025-empty{display:none;padding:22px;border-radius:20px;background:#f8fafc;border:1px dashed #cbd5e1;text-align:center;font-weight:800;color:#64748b}
@media(max-width:768px){.ec1025-search{width:100%;min-width:0}.ec1025-arrow{display:none}.ec1025-card{min-width:86%}}
</style>

<div class="ec1025-toolbar">
<input class="ec1025-search" type="search" placeholder="<?= pcb_h($lang === 'ar' ? 'ابحث باسم العضو أو الجهة...' : 'Search by name or affiliation...') ?>">

<div class="ec1025-tabs">
<?php foreach ($groupedCommittees as $committeeType => $members): ?>
<?php $key = strtolower(trim((string)$committeeType)); ?>
<button type="button" class="ec1025-tab <?= $committeeType === $firstTab ? 'active' : '' ?>" data-target="committee-tab-<?= md5((string)$committeeType) ?>">
<?= pcb_h($committeeTypeLabels[$key][$lang === 'ar' ? 'ar' : 'en'] ?? (string)$committeeType) ?>
&nbsp; (<?= count($members) ?>)
</button>
<?php endforeach; ?>
</div>
</div>

<?php foreach ($groupedCommittees as $committeeType => $members): ?>
<div id="committee-tab-<?= md5((string)$committeeType) ?>" class="ec1025-pane <?= $committeeType === $firstTab ? 'active' : '' ?>">
<div class="ec1025-slider-wrap">
<button type="button" class="ec1025-arrow ec1025-prev">‹</button>
<button type="button" class="ec1025-arrow ec1025-next">›</button>

<div class="ec1025-slider">
<?php foreach ($members as $m): ?>
<?php
$memberName = $lang === 'ar'
    ? (($m['full_name_ar'] ?? '') ?: ($m['full_name_en'] ?? ''))
    : (($m['full_name_en'] ?? '') ?: ($m['full_name_ar'] ?? ''));

$memberTitle = $lang === 'ar'
    ? (($m['role_title_ar'] ?? '') ?: ($m['title_ar'] ?? '') ?: ($m['role_title_en'] ?? '') ?: ($m['title_en'] ?? ''))
    : (($m['role_title_en'] ?? '') ?: ($m['title_en'] ?? '') ?: ($m['role_title_ar'] ?? '') ?: ($m['title_ar'] ?? ''));

$memberAff = $lang === 'ar'
    ? (($m['affiliation_ar'] ?? '') ?: ($m['affiliation_en'] ?? ''))
    : (($m['affiliation_en'] ?? '') ?: ($m['affiliation_ar'] ?? ''));

$searchText = mb_strtolower($memberName . ' ' . $memberTitle . ' ' . $memberAff, 'UTF-8');
?>
<div class="ec1025-card" data-search="<?= pcb_h($searchText) ?>">
<div class="cardx p-4 h-100 text-center">
<?php if (!empty($m['image_path'])): ?>
<img src="/easychair/<?= ltrim(pcb_h($m['image_path']),'/') ?>" class="avatar mx-auto mb-3" alt="<?= pcb_h($memberName) ?>">
<?php else: ?>
<div class="noavatar mx-auto mb-3"><?= pcb_h(mb_substr($memberName ?: 'C',0,1,'UTF-8')) ?></div>
<?php endif; ?>

<h5 class="fw-bold mb-2" style="display:block!important;color:#111827!important;font-size:22px!important;font-weight:900!important;line-height:1.5!important;">
<?= pcb_h($memberName) ?>
</h5>

<?php if ($memberTitle !== ''): ?>
<div class="text-primary fw-semibold mb-2"><?= pcb_h($memberTitle) ?></div>
<?php endif; ?>

<?php if ($memberAff !== ''): ?>
<div class="text-muted small"><?= pcb_h($memberAff) ?></div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>

<div class="ec1025-empty">
<?= pcb_h($lang === 'ar' ? 'لا توجد نتائج مطابقة.' : 'No matching members found.') ?>
</div>
</div>
</div>
<?php endforeach; ?>

<script>
(function(){
const root=document.currentScript.closest('section');
const search=root.querySelector('.ec1025-search');

root.querySelectorAll('.ec1025-tab').forEach(btn=>{
btn.addEventListener('click',()=>{
root.querySelectorAll('.ec1025-tab').forEach(b=>b.classList.remove('active'));
root.querySelectorAll('.ec1025-pane').forEach(p=>p.classList.remove('active'));
btn.classList.add('active');
const pane=root.querySelector('#'+btn.dataset.target);
if(pane){pane.classList.add('active');}
if(search){search.dispatchEvent(new Event('input'));}
});
});

root.querySelectorAll('.ec1025-slider-wrap').forEach(wrap=>{
const slider=wrap.querySelector('.ec1025-slider');
wrap.querySelector('.ec1025-prev').addEventListener('click',()=>slider.scrollBy({left:-340,behavior:'smooth'}));
wrap.querySelector('.ec1025-next').addEventListener('click',()=>slider.scrollBy({left:340,behavior:'smooth'}));
});

if(search){
search.addEventListener('input',()=>{
const q=search.value.trim().toLowerCase();
const active=root.querySelector('.ec1025-pane.active');
if(!active){return;}
let visible=0;
active.querySelectorAll('.ec1025-card').forEach(card=>{
const ok=!q || (card.dataset.search || '').toLowerCase().includes(q);
card.style.display=ok?'block':'none';
if(ok){visible++;}
});
const empty=active.querySelector('.ec1025-empty');
if(empty){empty.style.display=visible?'none':'block';}
});
}
})();
</script>

<?php else: ?>

<div class="alert alert-light border rounded-4 shadow-sm p-4">
<?= pcb_h($lang === 'ar' ? 'لا توجد بيانات لجان متاحة حالياً.' : 'No committee data available yet.') ?>
</div>

<?php endif; ?>

</div>
</section>
