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

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

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

<h5>
<i class="fa fa-address-card"></i>
Contact Cards Editor
</h5>

<div class="row g-3">

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

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

<div class="col-md-4">
<input id="cc_url"
class="form-control"
placeholder="mailto:info@example.com"
value="<?= h($item['url'] ?? '') ?>">
</div>

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

Generate JSON

</button>
</div>

</div>

</div>

<script>

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

        layout_type:
        "contact_cards",

        items:[
        {
            title_en:
            document.getElementById('cc_title_en').value,

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

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

</script>
