<?php

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

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

$item =
$layoutSettings['items'][0]
?? [];

?>

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

<h5 class="mb-3">
<i class="fa fa-calendar-days"></i>
Conference Dates Layout Editor
</h5>

<div class="row g-3">

<div class="col-md-3">
<label>Icon</label>
<input
type="text"
id="ec_cd_icon"
class="form-control"
value="<?= h($item['icon'] ?? 'fa-calendar-days') ?>">
</div>

<div class="col-md-3">
<label>Title EN</label>
<input
type="text"
id="ec_cd_title_en"
class="form-control"
value="<?= h($item['title_en'] ?? '') ?>">
</div>

<div class="col-md-3">
<label>Title AR</label>
<input
type="text"
id="ec_cd_title_ar"
class="form-control"
value="<?= h($item['title_ar'] ?? '') ?>">
</div>

<div class="col-md-12">
<label>Body EN</label>
<textarea
id="ec_cd_body_en"
class="form-control"
rows="5"><?= h($item['body_en'] ?? '') ?></textarea>
</div>

<div class="col-md-12">
<label>Body AR</label>
<textarea
id="ec_cd_body_ar"
class="form-control"
rows="5"><?= h($item['body_ar'] ?? '') ?></textarea>
</div>

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

<button
type="button"
class="btn btn-success"
onclick="ecBuildConferenceDatesJson()">

<i class="fa fa-wand-magic-sparkles"></i>
Generate JSON

</button>

</div>

</div>

</div>

<script>

function ecBuildConferenceDatesJson()
{
    const obj = {

        layout_type: "timeline_cards",

        items: [

            {

                icon:
                document.getElementById(
                    "ec_cd_icon"
                ).value,

                title_en:
                document.getElementById(
                    "ec_cd_title_en"
                ).value,

                title_ar:
                document.getElementById(
                    "ec_cd_title_ar"
                ).value,

                body_en:
                document.getElementById(
                    "ec_cd_body_en"
                ).value,

                body_ar:
                document.getElementById(
                    "ec_cd_body_ar"
                ).value
            }
        ]
    };

    document.getElementById(
        "settings_json"
    ).value =
    JSON.stringify(
        obj,
        null,
        2
    );
}

</script>
