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

$item =
$settings['items'][0]
?? [];
?>

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

<h5>
<i class="fa fa-link"></i>
Important Links Editor
</h5>

<div class="row g-3">

<div class="col-md-3">
<input id="il_icon" class="form-control"
placeholder="fa-file-word"
value="<?= h($item['icon'] ?? '') ?>">
</div>

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

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

<div class="col-md-3">
<input id="il_url" class="form-control"
placeholder="URL"
value="<?= h($item['url'] ?? '') ?>">
</div>

<div class="col-md-12">
<button
type="button"
class="btn btn-success"
onclick="ecBuildImportantLinksJson()">

Generate JSON

</button>
</div>

</div>

</div>

<script>

function ecBuildImportantLinksJson()
{
    document.getElementById(
        'settings_json'
    ).value =
    JSON.stringify({

        layout_type:
        "resource_links",

        items:[
        {
            icon:
            document.getElementById('il_icon').value,

            title_en:
            document.getElementById('il_title_en').value,

            title_ar:
            document.getElementById('il_title_ar').value,

            url:
            document.getElementById('il_url').value
        }]
    },null,2);
}

</script>
