<?php


$langIsArabic =
(
    (function_exists('ec_lang') ? ec_lang() : ($_SESSION['lang'] ?? 'ar'))
    === 'ar'
);


$sectionData =
    $section
    ?? $currentSection
    ?? [];

$settings =
json_decode(
    (string)($sectionData['settings_json'] ?? '{}'),
    true
);

$settings =
is_array($settings)
? $settings
: [];


echo '<!-- COUNTDOWN_DEBUG: section_id=' .
(int)($section['id'] ?? 0) .
' section_key=' .
htmlspecialchars((string)($section['section_key'] ?? '')) .
' settings=' .
htmlspecialchars((string)($section['settings_json'] ?? '')) .
' -->';


$targetDate =
    !empty($settings['countdown_date'])
    ? strtotime((string)$settings['countdown_date'])
    : (
        !empty($conference['start_date'])
        ? strtotime($conference['start_date'])
        : strtotime('+90 days')
    );

$title =
    $langIsArabic
    ? ($section['title_ar'] ?? 'العد التنازلي للمؤتمر')
    : ($section['title_en'] ?? 'Conference Countdown');

$subtitle =
    $langIsArabic
    ? ($section['content_ar'] ?? '')
    : ($section['content_en'] ?? '');

?>

<section class="ec-enterprise-countdown-section">

<div class="ec-enterprise-countdown-card">

    <div class="ec-enterprise-countdown-left">

        <div class="ec-enterprise-badge">
            <i class="fa fa-clock"></i>
            <?= htmlspecialchars($title) ?>
        </div>

        <h2 class="ec-enterprise-countdown-title">
            <?= htmlspecialchars($title) ?>
        </h2>

        <?php if (!empty($subtitle)): ?>
        <p class="ec-enterprise-countdown-subtitle">
            <?= htmlspecialchars($subtitle) ?>
        </p>
        <?php endif; ?>

        <div class="ec-enterprise-event-date">
            <i class="fa fa-calendar"></i>
            <?= date('F d, Y', $targetDate) ?>
        </div>

    </div>

    <div class="ec-enterprise-countdown-grid">

        <div class="ec-time-box">
            <span id="ecMonths">0</span>
            <small><?= $langIsArabic ? 'شهور' : 'Months' ?></small>
        </div>

        <div class="ec-time-box">
            <span id="ecDays">0</span>
            <small><?= $langIsArabic ? 'أيام' : 'Days' ?></small>
        </div>

        <div class="ec-time-box">
            <span id="ecHours">0</span>
            <small><?= $langIsArabic ? 'ساعات' : 'Hours' ?></small>
        </div>

        <div class="ec-time-box">
            <span id="ecMinutes">0</span>
            <small><?= $langIsArabic ? 'دقائق' : 'Minutes' ?></small>
        </div>

        <div class="ec-time-box">
            <span id="ecSeconds">0</span>
            <small><?= $langIsArabic ? 'ثواني' : 'Seconds' ?></small>
        </div>

    </div>

</div>

</section>

<style>

.ec-enterprise-countdown-section{
margin:40px 0;
}

.ec-enterprise-countdown-card{
background:
linear-gradient(
135deg,
#0f172a,
#1e293b,
#0f172a
);
border-radius:24px;
padding:40px;
display:flex;
gap:40px;
align-items:center;
justify-content:space-between;
overflow:hidden;
position:relative;
box-shadow:
0 20px 60px rgba(0,0,0,.25);
}

.ec-enterprise-countdown-card:before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(circle at top right,
rgba(59,130,246,.25),
transparent 50%);
}

.ec-enterprise-countdown-left{
position:relative;
z-index:2;
color:#fff;
max-width:500px;
}

.ec-enterprise-badge{
display:inline-flex;
gap:8px;
align-items:center;
padding:8px 16px;
border-radius:999px;
background:rgba(255,255,255,.12);
margin-bottom:18px;
font-weight:700;
}

.ec-enterprise-countdown-title{
font-size:2rem;
font-weight:900;
margin-bottom:15px;
color:#fff;
}

.ec-enterprise-countdown-subtitle{
opacity:.85;
line-height:1.8;
}

.ec-enterprise-event-date{
margin-top:18px;
font-weight:700;
}

.ec-enterprise-countdown-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:15px;
position:relative;
z-index:2;
}

.ec-time-box{
background:rgba(255,255,255,.08);
backdrop-filter:blur(8px);
border-radius:18px;
padding:22px;
text-align:center;
min-width:110px;
}

.ec-time-box span{
display:block;
font-size:2rem;
font-weight:900;
color:#fff;
}

.ec-time-box small{
color:#cbd5e1;
font-weight:600;
}

@media(max-width:992px){

.ec-enterprise-countdown-card{
flex-direction:column;
}

.ec-enterprise-countdown-grid{
grid-template-columns:repeat(2,1fr);
width:100%;
}

}

</style>

<script>

(function(){

const target =
new Date(
<?= json_encode(date('Y-m-d',$targetDate)) ?>
).getTime();

function tick(){

let diff =
target -
(new Date()).getTime();

if(diff < 0){
diff = 0;
}

const months =
Math.floor(diff/(1000*60*60*24*30));

const days =
Math.floor(diff/(1000*60*60*24)) % 30;

const hours =
Math.floor(diff/(1000*60*60)) % 24;

const mins =
Math.floor(diff/(1000*60)) % 60;

const secs =
Math.floor(diff/1000) % 60;

const m=document.getElementById('ecMonths');
const d=document.getElementById('ecDays');
const h=document.getElementById('ecHours');
const mi=document.getElementById('ecMinutes');
const s=document.getElementById('ecSeconds');

if(m) m.innerHTML=months;
if(d) d.innerHTML=days;
if(h) h.innerHTML=hours;
if(mi) mi.innerHTML=mins;
if(s) s.innerHTML=secs;

}

tick();

setInterval(
tick,
1000
);

})();

</script>
