<?php
$title = 'Homepage Studio — Edit Section';

if (!function_exists('h')) {
    function h($value): string
    {
        return htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8');
    }
}

$section = $section ?? [];

$settingsRaw = $section['settings_json'] ?? '{}';
$settings = json_decode((string)$settingsRaw, true);
if (!is_array($settings)) {
    $settings = [];
}

$designerRaw = $section['designer_json'] ?? '{}';
$designer = json_decode((string)$designerRaw, true);
if (!is_array($designer)) {
    $designer = [];
}

$currentTheme = $section['theme_name'] ?? 'enterprise-gradient';
$currentAnimation = $section['animation_name'] ?? 'fade-up';
$currentVisibility = $section['visibility_mode'] ?? 'public';
$currentVariant = $section['variant_group'] ?? 'A';
$currentSync = (string)($section['sync_lang'] ?? '1');
$currentBackgroundType = $section['background_type'] ?? 'gradient';
$currentBackgroundValue = $section['background_value'] ?? 'linear-gradient(135deg,#2563eb,#06b6d4)';
$currentIcon = $section['icon_class'] ?? 'fa-cube';
$currentBadgeEn = $settings['badge_en'] ?? ($designer['badge_en'] ?? '');
$currentBadgeAr = $settings['badge_ar'] ?? ($designer['badge_ar'] ?? '');
$currentOverlay = $settings['overlay_strength'] ?? ($designer['overlay_strength'] ?? 40);
$currentContainerWidth = $settings['container_width'] ?? ($designer['container_width'] ?? 'container');
$currentCardStyle = $settings['card_style'] ?? ($designer['card_style'] ?? 'enterprise');

$icons = [
    'fa-cube',
    'fa-users',
    'fa-user-tie',
    'fa-calendar',
    'fa-book',
    'fa-microphone',
    'fa-globe',
    'fa-award',
    'fa-brain',
    'fa-robot',
    'fa-layer-group',
    'fa-bolt',
    'fa-star',
    'fa-shield-halved',
];

$themes = [
    'enterprise-gradient' => 'Enterprise Gradient',
    'ieee-blue' => 'IEEE Blue',
    'journal-gold' => 'Journal Gold',
    'dark-ai' => 'Dark AI',
    'springer-clean' => 'Springer Clean',
];

$animations = [
    'fade-up' => 'Fade Up',
    'fade-down' => 'Fade Down',
    'zoom-in' => 'Zoom In',
    'slide-left' => 'Slide Left',
    'slide-right' => 'Slide Right',
];

$sectionJson = json_encode(
    $section,
    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES
);
?>

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

<style>
.ec-studio-page{
    background:#f3f6fb;
    min-height:100vh;
}

.ec-studio-hero{
    background:linear-gradient(135deg,#0f172a,#1e3a8a,#0ea5e9);
    color:#fff;
    padding:28px 32px;
    border-radius:26px;
    margin-bottom:24px;
    box-shadow:0 24px 60px rgba(15,23,42,.18);
}

.ec-studio-hero h2{
    margin:0;
    font-weight:900;
}

.ec-studio-card{
    background:#fff;
    border:0;
    border-radius:24px;
    box-shadow:0 20px 55px rgba(15,23,42,.08);
    overflow:hidden;
}

.ec-studio-card .card-body{
    padding:22px;
}

.ec-field-card{
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:18px;
    padding:18px;
    height:100%;
}

.ec-field-card label,
.ec-side-card label{
    display:block;
    font-weight:800;
    color:#1f2937;
    margin-bottom:8px;
}

.ec-field-card .hint{
    color:#64748b;
    font-size:12px;
    margin-top:6px;
}

.form-control,
.form-select{
    border-radius:14px;
    min-height:48px;
    border:1px solid #dbe4f0;
}

textarea.form-control{
    min-height:145px;
    resize:vertical;
}

.content-editor{
    min-height:320px !important;
    font-size:15px;
    line-height:1.85;
}

.json-editor{
    min-height:260px !important;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size:13px;
    direction:ltr;
}

.ec-side-card{
    background:#fff;
    border:0;
    border-radius:22px;
    box-shadow:0 16px 44px rgba(15,23,42,.07);
    padding:20px;
    margin-bottom:18px;
}

.ec-info-table{
    width:100%;
    font-size:13px;
}

.ec-info-table th{
    color:#475569;
    width:42%;
    padding:8px 4px;
    border-bottom:1px solid #edf2f7;
}

.ec-info-table td{
    padding:8px 4px;
    border-bottom:1px solid #edf2f7;
    font-weight:700;
    color:#0f172a;
    word-break:break-word;
}

.ec-preview{
    border-radius:24px;
    color:white;
    min-height:430px;
    position:sticky;
    top:20px;
    overflow:hidden;
    box-shadow:0 25px 80px rgba(0,0,0,.18);
    background-size:cover;
    background-position:center;
}

.ec-preview-overlay{
    min-height:430px;
    padding:36px;
    background:linear-gradient(135deg,rgba(15,23,42,.58),rgba(14,165,233,.28));
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.ec-preview-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    max-width:100%;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(10px);
    margin-bottom:18px;
    font-weight:800;
}

.ec-preview h2{
    font-size:2rem;
    line-height:1.3;
    font-weight:900;
    margin:0 0 16px;
}

.ec-preview p{
    line-height:1.8;
    margin:0;
    opacity:.86;
}

.ec-icon-picker{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:10px;
}

.ec-icon-picker button{
    width:38px;
    height:34px;
    border-radius:10px;
}

.ec-toolbar{
    position:sticky;
    bottom:0;
    z-index:20;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);
    border-radius:22px;
    box-shadow:0 -10px 35px rgba(15,23,42,.08);
    padding:16px;
    margin-top:20px;
}

.ec-code-box{
    max-height:310px;
    overflow:auto;
    background:#0f172a;
    color:#e2e8f0;
    border-radius:16px;
    padding:16px;
    font-size:12px;
    direction:ltr;
    text-align:left;
}

@media(max-width:1199px){
    .ec-preview{
        position:relative;
        top:auto;
    }
}

@media(max-width:768px){
    .ec-studio-hero{
        padding:22px;
    }
    .ec-preview-overlay{
        padding:26px;
    }
}

.studio-shell{max-width:1800px;margin:auto;}
.form-control,.form-select{border-radius:14px!important;}
textarea.form-control{min-height:220px;}
.preview-card{position:sticky;top:20px;}
.section-label{font-weight:700;color:#334155;margin-bottom:8px;display:block;}

</style>

<div class="ec-studio-hero">

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

        <div>
            <div class="small opacity-75 mb-2">
                Dashboard › Homepage Studio › Edit Section
            </div>

            <h2>
                <i class="fa fa-layer-group"></i>
                Homepage Section Studio
            </h2>

            <div class="opacity-75 mt-2">
                تحرير احترافي للقسم مع دعم عربي / إنجليزي
            </div>
        </div>

        <div class="d-flex gap-2 flex-wrap">
            <span class="badge bg-warning text-dark rounded-pill px-3 py-2">
                ID <?= (int)($section['id'] ?? 0) ?>
            </span>

            <span class="badge bg-light text-dark rounded-pill px-3 py-2">
                <?= h($section['section_key'] ?? '') ?>
            </span>
        </div>

    </div>

</div>

<form
    method="post"
    enctype="multipart/form-data"
    action="/easychair/admin/conference-home/sections/update">

<input
    type="hidden"
    name="id"
    value="<?= (int)($section['id'] ?? 0) ?>">

<div class="row g-4">

    <div class="col-xl-3 col-lg-4 order-2 order-xl-1">

        <div class="ec-side-card">

            <h5 class="fw-bold mb-3">
                <i class="fa fa-circle-info text-primary"></i>
                Section Information
            </h5>

            <table class="ec-info-table">
                <tr>
                    <th>ID</th>
                    <td><?= (int)($section['id'] ?? 0) ?></td>
                </tr>
                <tr>
                    <th>Key</th>
                    <td><?= h($section['section_key'] ?? '') ?></td>
                </tr>
                <tr>
                    <th>Theme</th>
                    <td><?= h($currentTheme) ?></td>
                </tr>
                <tr>
                    <th>Status</th>
                    <td>
                        <?php if (!empty($section['enabled'])): ?>
                            <span class="badge bg-success">Enabled</span>
                        <?php else: ?>
                            <span class="badge bg-danger">Disabled</span>
                        <?php endif; ?>
                    </td>
                </tr>
                <tr>
                    <th>Variant</th>
                    <td><?= h($currentVariant) ?></td>
                </tr>
                <tr>
                    <th>Visibility</th>
                    <td><?= h($currentVisibility) ?></td>
                </tr>
                <tr>
                    <th>Sort</th>
                    <td><?= (int)($section['sort_order'] ?? 0) ?></td>
                </tr>
            </table>

        </div>

        <div class="ec-side-card">

            <h5 class="fw-bold mb-3">
                <i class="fa fa-code text-primary"></i>
                JSON Inspector
            </h5>

            <div class="ec-code-box">
<pre><?= h($sectionJson ?: '{}') ?></pre>
            </div>

        </div>

    </div>

    <div class="col-xl-6 col-lg-8 order-1 order-xl-2">

        <div class="ec-studio-card">

            <div class="card-body">

                <div class="alert alert-info border-0 rounded-4 mb-4">
                    <i class="fa fa-magic"></i>
                    <strong>Section Designer Studio</strong>
                    Configure titles, content, styles, animations and public rendering.
                </div>

                <div class="row g-4">

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>Section Title (EN)</label>
                            <input
                                class="form-control"
                                name="section_title_en"
                                value="<?= h($section['section_title_en'] ?? '') ?>">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>عنوان القسم</label>
                            <input
                                dir="rtl"
                                class="form-control"
                                name="section_title_ar"
                                value="<?= h($section['section_title_ar'] ?? '') ?>">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>Title (EN)</label>
                            <input
                                id="title_en"
                                class="form-control"
                                name="title_en"
                                value="<?= h($section['title_en'] ?? '') ?>">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>العنوان</label>
                            <input
                                id="title_ar"
                                dir="rtl"
                                class="form-control"
                                name="title_ar"
                                value="<?= h($section['title_ar'] ?? '') ?>">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>Subtitle (EN)</label>
                            <textarea
                                id="subtitle_en"
                                name="subtitle_en"
                                class="form-control"><?= h($section['subtitle_en'] ?? '') ?></textarea>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>الوصف العربي</label>
                            <textarea
                                id="subtitle_ar"
                                dir="rtl"
                                name="subtitle_ar"
                                class="form-control"><?= h($section['subtitle_ar'] ?? '') ?></textarea>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>Badge EN</label>
                            <input
                                id="badge_en"
                                name="badge_en"
                                class="form-control"
                                value="<?= h($currentBadgeEn) ?>">
                            <div class="hint">Optional badge stored through settings/designer JSON when controller supports it.</div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>شارة القسم</label>
                            <input
                                id="badge_ar"
                                dir="rtl"
                                name="badge_ar"
                                class="form-control"
                                value="<?= h($currentBadgeAr) ?>">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>Content EN</label>
                            <textarea
                                id="content_en"
                                name="content_en"
                                class="form-control content-editor"><?= h($section['content_en'] ?? '') ?></textarea>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>المحتوى العربي</label>
                            <textarea
                                id="content_ar"
                                dir="rtl"
                                name="content_ar"
                                class="form-control content-editor"><?= h($section['content_ar'] ?? '') ?></textarea>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="ec-field-card">
                            <label>Visibility</label>
                            <select
                                name="visibility_mode"
                                class="form-select">
                                <option value="public" <?= $currentVisibility === 'public' ? 'selected' : '' ?>>Public</option>
                                <option value="registered" <?= $currentVisibility === 'registered' ? 'selected' : '' ?>>Registered</option>
                                <option value="committee" <?= $currentVisibility === 'committee' ? 'selected' : '' ?>>Committee</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="ec-field-card">
                            <label>Language Sync</label>
                            <select
                                name="sync_lang"
                                class="form-select">
                                <option value="1" <?= $currentSync === '1' ? 'selected' : '' ?>>Auto Sync</option>
                                <option value="0" <?= $currentSync === '0' ? 'selected' : '' ?>>Independent</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="ec-field-card">
                            <label>A/B Variant</label>
                            <select
                                name="variant_group"
                                class="form-select">
                                <option value="A" <?= $currentVariant === 'A' ? 'selected' : '' ?>>A</option>
                                <option value="B" <?= $currentVariant === 'B' ? 'selected' : '' ?>>B</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="ec-field-card">
                            <label>Theme</label>
                            <select
                                id="theme_name"
                                name="theme_name"
                                class="form-select">
                                <?php foreach ($themes as $value => $label): ?>
                                    <option value="<?= h($value) ?>" <?= $currentTheme === $value ? 'selected' : '' ?>>
                                        <?= h($label) ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="ec-field-card">
                            <label>Icon</label>
                            <input
                                id="icon_class"
                                name="icon_class"
                                class="form-control"
                                value="<?= h($currentIcon) ?>">

                            <div class="ec-icon-picker">
                                <?php foreach ($icons as $icon): ?>
                                    <button
                                        type="button"
                                        class="btn btn-sm btn-outline-primary"
                                        onclick="ecPickIcon('<?= h($icon) ?>')">
                                        <i class="fa <?= h($icon) ?>"></i>
                                    </button>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="ec-field-card">
                            <label>Animation</label>
                            <select
                                name="animation_name"
                                class="form-select">
                                <?php foreach ($animations as $value => $label): ?>
                                    <option value="<?= h($value) ?>" <?= $currentAnimation === $value ? 'selected' : '' ?>>
                                        <?= h($label) ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="ec-field-card">
                            <label>Sort</label>
                            <input
                                type="number"
                                name="sort_order"
                                class="form-control"
                                value="<?= (int)($section['sort_order'] ?? 0) ?>">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="ec-field-card">
                            <label>Container Width</label>
                            <select
                                name="container_width"
                                class="form-select">
                                <option value="container" <?= $currentContainerWidth === 'container' ? 'selected' : '' ?>>Container</option>
                                <option value="container-fluid" <?= $currentContainerWidth === 'container-fluid' ? 'selected' : '' ?>>Fluid</option>
                                <option value="narrow" <?= $currentContainerWidth === 'narrow' ? 'selected' : '' ?>>Narrow</option>
                            </select>
                            <div class="hint">Optional designer setting.</div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="ec-field-card">
                            <label>Card Style</label>
                            <select
                                name="card_style"
                                class="form-select">
                                <option value="glass" <?= $currentCardStyle === 'glass' ? 'selected' : '' ?>>Glass</option>
                                <option value="enterprise" <?= $currentCardStyle === 'enterprise' ? 'selected' : '' ?>>Enterprise</option>
                                <option value="ieee" <?= $currentCardStyle === 'ieee' ? 'selected' : '' ?>>IEEE</option>
                                <option value="journal" <?= $currentCardStyle === 'journal' ? 'selected' : '' ?>>Journal</option>
                                <option value="minimal" <?= $currentCardStyle === 'minimal' ? 'selected' : '' ?>>Minimal</option>
                            </select>
                            <div class="hint">Optional designer setting.</div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="ec-field-card">
                            <label>Overlay Strength</label>
                            <input
                                id="overlay_strength"
                                type="range"
                                name="overlay_strength"
                                min="0"
                                max="100"
                                value="<?= h($currentOverlay) ?>"
                                class="form-range">
                            <div class="small text-muted">
                                <span id="overlay_value"><?= h($currentOverlay) ?></span>%
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>Background Type</label>
                            <select
                                id="background_type"
                                name="background_type"
                                class="form-select">
                                <option value="gradient" <?= $currentBackgroundType === 'gradient' ? 'selected' : '' ?>>Gradient</option>
                                <option value="image" <?= $currentBackgroundType === 'image' ? 'selected' : '' ?>>Image</option>
                                <option value="solid" <?= $currentBackgroundType === 'solid' ? 'selected' : '' ?>>Solid</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>Background Value</label>
                            <input
                                id="background_value"
                                name="background_value"
                                class="form-control"
                                value="<?= h($currentBackgroundValue) ?>">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="ec-field-card">
                            <label>Background Image</label>
                            <input
                                type="file"
                                name="background_image"
                                class="form-control">

                            <input
                                type="hidden"
                                name="existing_background_image"
                                value="<?= h($section['background_image'] ?? '') ?>">

                            <?php if (!empty($section['background_image'])): ?>
                                <div class="hint">
                                    Current image:
                                    <?= h($section['background_image']) ?>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>

<?php
$settingsForCountdown =
json_decode(
    $section['settings_json'] ?? '{}',
    true
);

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

$countdownDateValue =
(string)($settingsForCountdown['countdown_date'] ?? '');
?>

<?php

$sectionKey =
trim(
    strtolower(
        (string)(
            $section['section_key']
            ?? ''
        )
    )
);

if (
    in_array(
        $sectionKey,
        [
            'countdown',
            'conference_dates',
            'important_links',
            'contact_cards',
	    'conference_about',
            'participation_terms'
        ],
        true
    )
):

?>
                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>Countdown Target Date / Time</label>
                            <input
                                type="datetime-local"
                                id="countdown_date_picker"
                                class="form-control"
                                value="<?= h(str_replace(' ', 'T', substr($countdownDateValue, 0, 16))) ?>">
                            <div class="alert alert-info rounded-4 mt-3">
    <strong>Dynamic Layout Templates</strong><br>
    Use these Section Keys with Settings JSON:
    <code>participation_terms</code>,
<code>conference_about</code>,
    <code>conference_dates</code>,
    <code>important_links</code>,
    <code>contact_cards</code>
</div>

<div class="d-flex flex-wrap gap-2 mb-3">
    <button type="button" class="btn btn-sm btn-outline-primary" onclick="ecFillDynamicJson('conference_dates')">
        Conference Dates
    </button>
    <button type="button" class="btn btn-sm btn-outline-primary" onclick="ecFillDynamicJson('important_links')">
        Important Links
    </button>
    <button type="button" class="btn btn-sm btn-outline-primary" onclick="ecFillDynamicJson('contact_cards')">
        Contact Cards
    </button>
    <button type="button" class="btn btn-sm btn-outline-primary" onclick="ecFillDynamicJson('participation_terms')">
        Participation Terms
    </button>
    <button type="button" class="btn btn-sm btn-outline-primary" onclick="ecFillDynamicJson('conference_about')">
        Conference About
    </button>

    <button type="button" class="btn btn-sm btn-outline-primary" onclick="ecFillDynamicJson('location_map')">
        Location Map
    </button>

    <button type="button" class="btn btn-sm btn-outline-primary" onclick="ecFillDynamicJson('quick_response_form')">
        Location Map
    </button>


    <button type="button" class="btn btn-sm btn-outline-primary" onclick="ecFillDynamicJson('pricing_plans')">
        Pricing Plans
    </button>

    <button type="button" class="btn btn-sm btn-outline-primary" onclick="ecFillDynamicJson('animated_marquee')">
        Animated Marquee
    </button>

    <button type="button" class="btn btn-sm btn-outline-primary" onclick="ecFillDynamicJson('faq_accordion')">
        FAQ Accordion
    </button>

    <button type="button" class="btn btn-sm btn-outline-primary" onclick="ecFillDynamicJson('conference_brochure')">
        Conference Brochure
    </button>

    <button type="button" class="btn btn-sm btn-outline-primary" onclick="ecFillDynamicJson('testimonials_slider')">
        Testimonials Slider
    </button>
</div>

<script>
function ecFillDynamicJson(type){

    const keyInput =
        document.querySelector('[name="section_key"]');

    const settings =
        document.querySelector('[name="settings_json"]');

    if(!settings){
        alert('Settings JSON field not found.');
        return;
    }

    const templates = {
        conference_dates: {
            layout_type: "timeline_cards",
            items: [
                {
                    icon: "fa-calendar-days",
                    title_ar: "المرحلة الأولى",
                    title_en: "First Phase",
                    body_ar: "الانطلاق:20/4/2026 \nبداية الاستلام:  20/4/2026\nنهاية الاستلام:  20/4/2026",
                    body_en: "Launch: 20/4/2026\nSubmission Opens: 20/4/2026 \nSubmission Deadline: 20/4/2026"
                },
                {
                    icon: "fa-envelope-open-text",
                    title_ar: "المرحلة الثانية",
                    title_en: "Second Phase",
                    body_ar: "آخر فترة للردود: 20/4/2026\nاستلام العروض: 20/4/2026",
                    body_en: "Response Deadline: 20/4/2026\nPresentation Receipt: 20/4/2026"
                },
                {
                    icon: "fa-chalkboard-user",
                    title_ar: "الحدث الرئيسي",
                    title_en: "Main Event",
                    body_ar: "بداية المؤتمر:20/4/2026\nالمكان: كلية الآداب - جامعة جرش",
                    body_en: "Conference Starts: 20/4/2026\nVenue: Faculty of Arts - Jerash University"
[                }
            ]
        },

        important_links: {
            layout_type: "resource_links",
            items: [
                {
                    icon: "fa-file-word",
                    title_ar: "نموذج اللغة العربية",
                    title_en: "Arabic Template",
                    button_ar: "تحميل النموذج",
                    button_en: "Download Template",
                    url: "#"
                },
                {
                    icon: "fa-file-word",
                    title_ar: "نموذج اللغة الإنجليزية",
                    title_en: "English Template",
                    button_ar: "تحميل النموذج",
                    button_en: "Download Template",
                    url: "#"
                },
                {
                    icon: "fa-paper-plane",
                    title_ar: "إرسال المشاركات",
                    title_en: "Submit Papers",
                    button_ar: "إرسال الآن",
                    button_en: "Submit Now",
                    url: "/easychair/login"
                }
            ]
        },

        contact_cards: {
            layout_type: "contact_cards",
            items: [
                {
                    icon: "fa-phone",
                    title_ar: "رقم الهاتف",
                    title_en: "Phone",
                    body_ar: "0096226350521",
                    body_en: "0096226350521",
                    url: "tel:00962779830983"
                },
,

        



        faq_accordion: {
            layout_type: "faq_accordion",
            eyebrow_ar: "كل ما تحتاج معرفته",
            eyebrow_en: "Everything You Need To Know",
            title_ar: "الأسئلة الشائعة",
            title_en: "Frequently Asked Questions",
            items: [
                {
                    question_ar: "ما هو مؤتمر ICHS-26؟",
                    question_en: "What is ICHS-26?",
                    answer_ar: "مؤتمر علمي دولي يجمع الباحثين والأكاديميين والمهتمين لمناقشة أحدث المستجدات العلمية.",
                    answer_en: "An international scientific conference that brings together researchers, academics, and professionals to discuss recent scientific developments.",
                    open: false
                },
                {
                    question_ar: "متى وأين سيعقد المؤتمر؟",
                    question_en: "When and where will the event be held?",
                    answer_ar: "سيتم عقد المؤتمر في جامعة جرش، الأردن، وفق المواعيد المعلنة في صفحة المؤتمر.",
                    answer_en: "The event will be held at Jerash University, Jordan, according to the dates announced on the conference page.",
                    open: false
                },
                {
                    question_ar: "كيف يمكنني التسجيل في المؤتمر؟",
                    question_en: "How can I register for the event?",
                    answer_ar: "يمكنك التسجيل من خلال زر التسجيل أو من خلال صفحة التقديم المتاحة في بوابة المؤتمر.",
                    answer_en: "You can register using the registration button or through the submission page available on the conference portal.",
                    open: false
                },
                {
                    question_ar: "ما هي خيارات رسوم المشاركة؟",
                    question_en: "What ticket options are available?",
                    answer_ar: "تتوفر عدة خيارات للمشاركة حسب فئة المشارك، ويمكن مراجعة قسم رسوم المشاركة للاطلاع على التفاصيل.",
                    answer_en: "Several participation options are available depending on participant category. Please refer to the pricing section for details.",
                    open: true
                },
                {
                    question_ar: "هل توجد مشاركة افتراضية؟",
                    question_en: "Will there be virtual participation?",
                    answer_ar: "يمكن إتاحة المشاركة الافتراضية وفق تعليمات اللجنة المنظمة وطبيعة البرنامج.",
                    answer_en: "Virtual participation may be available according to the organizing committee guidelines and program structure.",
                    open: false
                }
            ]
        },



        testimonials_slider: {
            layout_type: "testimonials_slider",
            eyebrow_ar: "آراء المشاركين",
            eyebrow_en: "What People Say",
            title_ar: "ماذا يقول المشاركون عن المؤتمر",
            title_en: "What People Say About ICHS-26",
            items: [
                {
                    name_ar: "د. أحمد الخطيب",
                    name_en: "Dr. Ahmad Al-Khatib",
                    role_ar: "باحث مشارك",
                    role_en: "Research Participant",
                    quote_ar: "كان المؤتمر تجربة علمية مميزة، وفر فرصة ممتازة للتواصل مع باحثين وخبراء من تخصصات متعددة.",
                    quote_en: "The conference was an excellent academic experience and provided a valuable opportunity to connect with researchers and experts.",
                    image_url: "https://placehold.co/420x420/8EE9B2/111111?text=Speaker+1",
                    color: "#8FF0B0"
                },
                {
                    name_ar: "د. سارة محمود",
                    name_en: "Dr. Sara Mahmoud",
                    role_ar: "عضو هيئة تدريس",
                    role_en: "Faculty Member",
                    quote_ar: "تنظيم احترافي ومحتوى علمي ثري ساعد على تبادل الخبرات وتعزيز التعاون البحثي.",
                    quote_en: "Professional organization and rich scientific content that helped exchange expertise and strengthen research collaboration.",
                    image_url: "https://placehold.co/420x420/7BD4E6/111111?text=Speaker+2",
                    color: "#7BD4E6"
                },
                {
                    name_ar: "أ. محمد علي",
                    name_en: "Mr. Mohammad Ali",
                    role_ar: "مشارك",
                    role_en: "Participant",
                    quote_ar: "منصة رائعة لعرض الأفكار ومناقشة أحدث الاتجاهات العلمية مع نخبة من المتخصصين.",
                    quote_en: "A great platform to present ideas and discuss the latest scientific trends with distinguished specialists.",
                    image_url: "https://placehold.co/420x420/FFC18A/111111?text=Speaker+3",
                    color: "#FFC18A"
                }
            ]
        },

        conference_brochure: {
            layout_type: "conference_brochure",
            title_ar: "كتيب المؤتمر",
            title_en: "Conference Brochure",
            subtitle_ar: "تحميل واستعراض كتيب المؤتمر الرسمي",
            subtitle_en: "Download and view the official conference brochure",
            brochure_file: "",
            embed: true
        },

        animated_marquee: {
            layout_type: "animated_marquee",
            speed_seconds: 28,
            background: "#101735",
            strip_one_color: "#7b4df2",
            strip_two_color: "#48258f",
            text_color: "#ffffff",
            rows: [
                {
                    direction: "left",
                    rotation: "-2deg",
                    color: "#7b4df2",
                    items_ar: [
                        "تمكين الابتكار",
                        "التفكير نحو المستقبل",
                        "التحول المعرفي",
                        "الذكاء الاصطناعي"
                    ],
                    items_en: [
                        "Empowering Innovation",
                        "Think Forward",
                        "Cognitive Shift",
                        "Artificial Intelligence"
                    ]
                },
                {
                    direction: "right",
                    rotation: "0deg",
                    color: "#48258f",
                    items_ar: [
                        "مستقبل ذكي",
                        "ابتكار مستدام",
                        "المعرفة الآن",
                        "رؤية جديدة"
                    ],
                    items_en: [
                        "Future Now",
                        "Empowering Innovation",
                        "Smart Intelligence",
                        "New Vision"
                    ]
                }
            ]
        },

        pricing_plans: {
            layout_type: "pricing_plans",
            title_ar: "رسوم المشاركة",
            title_en: "Event Price List",
            subtitle_ar: "خيارات رسوم المشاركة في المؤتمر",
            subtitle_en: "Perfect price for event",
            currency: "$",
            plans: [
                {
                    title_ar: "فردي",
                    title_en: "Personal",
                    price: "111",
                    is_best: false,
                    button_ar: "التسجيل",
                    button_en: "Register",
                    button_url: "/easychair/register",
                    features_ar: [
                        "حضور جلسات المؤتمر",
                        "شهادة مشاركة",
                        "حقيبة المؤتمر",
                        "دخول المعرض"
                    ],
                    features_en: [
                        "Conference sessions access",
                        "Participation certificate",
                        "Conference kit",
                        "Exhibition access"
                    ]
                },
                {
                    title_ar: "مؤسسات",
                    title_en: "Company",
                    price: "124",
                    is_best: true,
                    button_ar: "التسجيل",
                    button_en: "Register",
                    button_url: "/easychair/register",
                    features_ar: [
                        "حضور جلسات المؤتمر",
                        "شهادة مشاركة",
                        "حقيبة المؤتمر",
                        "أولوية في التسجيل"
                    ],
                    features_en: [
                        "Conference sessions access",
                        "Participation certificate",
                        "Conference kit",
                        "Priority registration"
                    ]
                },
                {
                    title_ar: "أعمال",
                    title_en: "Business",
                    price: "175",
                    is_best: false,
                    button_ar: "التسجيل",
                    button_en: "Register",
                    button_url: "/easychair/register",
                    features_ar: [
                        "حضور جلسات المؤتمر",
                        "شهادة مشاركة",
                        "حقيبة المؤتمر",
                        "دعم مخصص"
                    ],
                    features_en: [
                        "Conference sessions access",
                        "Participation certificate",
                        "Conference kit",
                        "Dedicated support"
                    ]
                }
            ]
        },

quick_response_form: {
    title_ar: "تواصل معنا",
    title_en: "Quick Response Form",
    subtitle_ar: "أرسل استفسارك وسيتم الرد عليك",
    subtitle_en: "Send your inquiry and we will respond shortly",
    recipient_email: "info@julms.com",
    success_ar: "تم إرسال رسالتك بنجاح",
    success_en: "Your message has been sent successfully",
    layout_type: "quick_response_form"
},

location_map: {
            layout_type: "location_map",
            title_ar: "موقع المؤتمر",
            title_en: "Conference Location",
            subtitle_ar: "موقع انعقاد المؤتمر على الخريطة",
            subtitle_en: "Conference venue on map",
            venue_ar: "جامعة جرش",
            venue_en: "Jerash University",
            address_ar: "جرش، الأردن",
            address_en: "Jerash, Jordan",
            map_embed: "",
            map_url: ""
        }                {
                    icon: "fa-whatsapp",
                    title_ar: "واتساب",
                    title_en: "WhatsApp",
                    body_ar: "انضم للمجموعة",
                    body_en: "Join the group",
                    url: "#"
                },
                {
                    icon: "fa-envelope",
                    title_ar: "البريد الإلكتروني",
                    title_en: "Email",
                    body_ar: "admin@jpu.edu.jo",
                    body_en: "admin@jpu.edu.jo",
                    url: "mailto:admin@jpu.edu.jo"
                },
                {
                    icon: "fa-location-dot",
                    title_ar: "مكان المؤتمر",
                    title_en: "Venue",
                    body_ar: "كلية العلوم - جامعة جرش",
                    body_en: "Faculty of Science - Jerash University",
                    url: "#"
                }
            ]
        },

conference_about: {

    layout_type: "conference_about",

    section_title_ar:
        "حول المؤتمر والرؤية",

    section_title_en:
        "About Conference & Vision",

    section_subtitle_ar:
        "تعرف على هوية المؤتمر وأهدافه المستقبلية",

    section_subtitle_en:
        "Learn about the conference identity and future vision",

    about: {

        icon:
            "fa-building-columns",

        title_ar:
            "حول المؤتمر",

        title_en:
            "About Conference",

        body_ar:
            "يعد المؤتمر الدولي منصة علمية تجمع الباحثين والأكاديميين لتبادل الخبرات والمعارف ومناقشة أحدث المستجدات العلمية.",

        body_en:
            "The conference provides a scientific platform for researchers and academics.",

        highlights: [

            {
                icon:"fa-lightbulb",
                text_ar:"مناقشة أحدث الاتجاهات العلمية",
                text_en:"Discussing latest scientific trends"
            },

            {
                icon:"fa-heart",
                text_ar:"تعزيز التعاون البحثي",
                text_en:"Enhancing research collaboration"
            }

        ]
    },

    vision: {

        icon:
            "fa-eye",

        title_ar:
            "رؤية المؤتمر",

        title_en:
            "Conference Vision",

        quote_ar:
            "منصة علمية رائدة تعيد فيها العلوم الإنسانية تعريف دورها في عصر التحول الرقمي",

        quote_en:
            "A leading scientific platform for the digital era",

        body_ar:
            "نسعى إلى بناء مجتمع علمي متكامل يجمع الباحثين والمفكرين لصياغة مستقبل العلوم الإنسانية.",

        body_en:
            "We aim to build an integrated scientific community.",

        cta_ar:
            "نحو مستقبل رقمي متوازن",

        cta_en:
            "Toward a Balanced Digital Future"
    }

},

participation_terms: {
    layout_type: "cards_grid",
    items: [

        {
            icon: "fa-bullseye",
            title_ar: "التزام الباحث بمحاور المؤتمر",
            title_en: "Research Alignment",
            body_ar: "أن يكون البحث ضمن محاور المؤتمر المعلن عنها، ويتناول موضوعاً ذا صلة وثيقة بأهداف المؤتمر واهتماماته العلمية.",
            body_en: "The research must align with the announced conference tracks and objectives."
        },

        {
            icon: "fa-ban",
            title_ar: "جدة البحث وأصالة المشاركة",
            title_en: "Originality and Novelty",
            body_ar: "يجب ألا يكون قد سبق المشاركة بالورقة العلمية المقدمة للمؤتمر في أي مؤتمر علمي سابق أو سبق نشرها في مجلة علمية محلية أو دولية.",
            body_en: "The submitted paper must not have been previously presented or published."
        },

        {
            icon: "fa-language",
            title_ar: "لغة البحث",
            title_en: "Research Language",
            body_ar: "اللغتان العربية والانجليزية هما اللغتان الرسميتان للمؤتمر مع مراعاة اللغات الأخرى حسب متطلبات البحث وضرورة وجود ملخص باللغتين العربية والإنجليزية.",
            body_en: "Both Arabic and English are the official conference languages and abstracts should be available in Arabic and English."
        },

        {
            icon: "fa-circle-info",
            title_ar: "معلومات هامة",
            title_en: "Important Information",
            body_ar: "جميع الأوراق البحثية تخضع للتحكيم العلمي من قبل محكمين مختصين، وسيتم إبلاغ الباحثين بنتائج التحكيم في المواعيد المحددة.",
            body_en: "All submitted papers undergo peer review and authors will be notified according to the announced schedule."
        },

        {
            icon: "fa-pen-to-square",
            title_ar: "معايير وشروط الكتابة",
            title_en: "Writing Guidelines",
            body_ar: "شروط الكتابة تتوافق وقالب المؤتمر المعتمد من حيث الشكل والمضمون والمراجع والتدقيق اللغوي.",
            body_en: "Formatting and writing requirements follow conference template standards."
        },

        {
            icon: "fa-user-check",
            title_ar: "الأمانة العلمية والمنهجية",
            title_en: "Academic Integrity",
            body_ar: "يجب مراعاة الأمانة العلمية والتقيد بمنهجية البحث العلمي أثناء كتابة الورقة العلمية والالتزام بقواعد التوثيق والإحالة العلمية.",
            body_en: "Authors must follow academic integrity, research methodology and proper citation practices."
        }

    ]
}

    };

    if(!templates[type]){
        return;
    }

    if(keyInput){
        keyInput.value = type;
    }

    settings.value =
        JSON.stringify(
            templates[type],
            null,
            2
        );
}
</script>


<div class="hint">
                                This value is saved into Settings JSON as countdown_date.
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

<?php

$ecSettings =
json_decode(
    $section['settings_json'] ?? '{}',
    true
);

if (!is_array($ecSettings)) {
    $ecSettings = [];
}

$ecCountdownDate =
(string)(
    $ecSettings['countdown_date']
    ?? ''
);

?>


<?php if (($section['section_key'] ?? '') === 'location_map'): ?>
<?php
$__locationMapEditor =
    BASE_PATH .
    '/app/views/admin/conference_home/layout_editors/location_map.php';

if (file_exists($__locationMapEditor)) {
    require $__locationMapEditor;
}
?>
<?php endif; ?>

<?php if (($section['section_key'] ?? '') === 'countdown'): ?>

<div class="col-md-6">

    <div class="ec-field-card">

        <label>
            Countdown Target Date & Time
        </label>

        <input
            type="datetime-local"
            name="countdown_date"
            class="form-control"
            value="<?= h(
                $ecCountdownDate
                ? substr(
                    str_replace(
                        ' ',
                        'T',
                        $ecCountdownDate
                    ),
                    0,
                    16
                )
                : ''
            ) ?>">

        <div class="hint">

            Example:

            2026-12-31 09:00

        </div>

    </div>

</div>

<?php

$editorFile =
BASE_PATH .
'/app/views/admin/conference_home/layout_editors/' .
($section['section_key'] ?? '') .
'.php';

if (
    file_exists($editorFile)
) {
    require $editorFile;
}

?>~

<?php endif; ?>

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>Settings JSON</label>
                            <textarea
                                id="settings_json"
                                name="settings_json"
                                class="form-control json-editor"><?= h($section['settings_json'] ?? '{}') ?></textarea>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="ec-field-card">
                            <label>Generated JSON</label>
                            <textarea
                                name="generated_json"
                                class="form-control json-editor"><?= h($section['generated_json'] ?? '{}') ?></textarea>
                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="col-xl-3 col-lg-12 order-3">

        <div
            class="ec-preview"
            id="preview"
            style="background:<?= h($currentBackgroundValue) ?>;">

            <div
                class="ec-preview-overlay"
                id="preview_overlay">

                <div
                    class="ec-preview-badge"
                    id="p_badge">

                    <i
                        class="fa <?= h($currentIcon) ?>"
                        id="p_badge_icon"></i>

                    <span id="p_badge_text">
                        <?= h($currentBadgeEn ?: ($section['section_title_en'] ?? 'Section')) ?>
                    </span>

                </div>

                <h2 id="p_title">
                    <i
                        class="fa <?= h($currentIcon) ?>"
                        id="p_title_icon"></i>
                    <span id="p_title_text">
                        <?= h($section['title_en'] ?? 'Preview') ?>
                    </span>
                </h2>

                <p id="p_sub">
                    <?= h($section['subtitle_en'] ?? '') ?>
                </p>

            </div>

        </div>

    </div>

</div>

<div class="ec-toolbar">

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

        <button
            class="btn btn-primary btn-lg rounded-pill px-5">

            <i class="fa fa-save"></i>
            Save Section

        </button>

        <a
            href="/easychair/admin/conference-home/sections/duplicate?id=<?= (int)($section['id'] ?? 0) ?>"
            class="btn btn-warning rounded-pill px-4">

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

        </a>

        <a
            href="/easychair/admin/conference-home/export-homepage"
            class="btn btn-success rounded-pill px-4">

            <i class="fa fa-download"></i>
            Export Homepage

        </a>

        <a
            href="/easychair/admin/conference-home/export-blueprint"
            class="btn btn-info rounded-pill px-4">

            <i class="fa fa-layer-group"></i>
            Export Blueprint

        </a>

        <a
            href="/easychair/admin/conference-home/marketplace"
            class="btn btn-dark rounded-pill px-4">

            <i class="fa fa-store"></i>
            Marketplace

        </a>

        <a
            href="/easychair/admin/conference-home/studio"
            class="btn btn-outline-secondary rounded-pill px-4">

            <i class="fa fa-arrow-left"></i>
            Back

        </a>

    </div>

</div>

</form>

</div>

<script>
function ecStudio(id){
    return document.getElementById(id);
}

function ecPickIcon(icon){
    const iconInput = ecStudio('icon_class');
    if(iconInput){
        iconInput.value = icon;
    }
    ecRefreshPreview();
}

function ecRefreshPreview(){
    const title = ecStudio('title_en')?.value || 'Preview';
    const sub = ecStudio('subtitle_en')?.value || '';
    const badge = ecStudio('badge_en')?.value || document.querySelector('[name="section_title_en"]')?.value || 'Section';
    const icon = ecStudio('icon_class')?.value || 'fa-cube';
    const bg = ecStudio('background_value')?.value || 'linear-gradient(135deg,#2563eb,#06b6d4)';
    const overlay = parseInt(ecStudio('overlay_strength')?.value || '40', 10);

    if(ecStudio('preview')){
        ecStudio('preview').style.background = bg;
    }

    if(ecStudio('p_title_text')){
        ecStudio('p_title_text').textContent = title;
    }

    if(ecStudio('p_sub')){
        ecStudio('p_sub').textContent = sub;
    }

    if(ecStudio('p_badge_text')){
        ecStudio('p_badge_text').textContent = badge;
    }

    if(ecStudio('p_title_icon')){
        ecStudio('p_title_icon').className = 'fa ' + icon;
    }

    if(ecStudio('p_badge_icon')){
        ecStudio('p_badge_icon').className = 'fa ' + icon;
    }

    if(ecStudio('overlay_value')){
        ecStudio('overlay_value').textContent = overlay;
    }

    if(ecStudio('preview_overlay')){
        const alpha = Math.max(0, Math.min(100, overlay)) / 100;
        ecStudio('preview_overlay').style.background =
            'linear-gradient(135deg, rgba(15,23,42,' + alpha + '), rgba(14,165,233,' + Math.max(.12, alpha / 2) + '))';
    }
}

[
    'title_en',
    'subtitle_en',
    'badge_en',
    'icon_class',
    'background_value',
    'overlay_strength'
].forEach(function(id){
    const el = ecStudio(id);
    if(el){
        el.addEventListener('input', ecRefreshPreview);
        el.addEventListener('change', ecRefreshPreview);
    }
});

ecRefreshPreview();
</script>

<script>
(function(){

const picker =
document.getElementById('countdown_date_picker');

const settings =
document.getElementById('settings_json');

if(!picker || !settings){
    return;
}

function syncCountdownDate(){

    let data = {};

    try {
        data = JSON.parse(settings.value || '{}');
    } catch(e) {
        data = {};
    }

    if(picker.value){
        data.countdown_date =
            picker.value.replace('T',' ') + ':00';
    } else {
        delete data.countdown_date;
    }

    settings.value =
        JSON.stringify(
            data,
            null,
            2
        );
}

picker.addEventListener(
    'change',
    syncCountdownDate
);

})();
</script>
