<?php

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

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

$mapTitleAr =
    $settings['title_ar']
    ?? 'موقع المؤتمر';

$mapTitleEn =
    $settings['title_en']
    ?? 'Conference Location';

$mapSubtitleAr =
    $settings['subtitle_ar']
    ?? 'موقع انعقاد المؤتمر على الخريطة';

$mapSubtitleEn =
    $settings['subtitle_en']
    ?? 'Conference venue on map';

$venueAr =
    $settings['venue_ar']
    ?? '';

$venueEn =
    $settings['venue_en']
    ?? '';

$addressAr =
    $settings['address_ar']
    ?? '';

$addressEn =
    $settings['address_en']
    ?? '';

$mapEmbed =
    $settings['map_embed']
    ?? '';

$mapUrl =
    $settings['map_url']
    ?? '';

?>

<div class="col-md-12">
    <div class="ec-field-card border border-primary-subtle rounded-4 p-3">

        <h5 class="fw-bold mb-3">
            <i class="fa fa-location-dot"></i>
            Location Map Editor
        </h5>

        <div class="alert alert-info rounded-4">
            Paste Google Maps iframe embed code in <strong>Map Embed iframe</strong>.
            This editor saves everything into Settings JSON automatically.
        </div>

        <div class="row g-3">

            <div class="col-md-6">
                <label class="form-label fw-bold">Title AR</label>
                <input
                    type="text"
                    id="lm_title_ar"
                    class="form-control"
                    value="<?= h($mapTitleAr) ?>">
            </div>

            <div class="col-md-6">
                <label class="form-label fw-bold">Title EN</label>
                <input
                    type="text"
                    id="lm_title_en"
                    class="form-control"
                    value="<?= h($mapTitleEn) ?>">
            </div>

            <div class="col-md-6">
                <label class="form-label fw-bold">Subtitle AR</label>
                <input
                    type="text"
                    id="lm_subtitle_ar"
                    class="form-control"
                    value="<?= h($mapSubtitleAr) ?>">
            </div>

            <div class="col-md-6">
                <label class="form-label fw-bold">Subtitle EN</label>
                <input
                    type="text"
                    id="lm_subtitle_en"
                    class="form-control"
                    value="<?= h($mapSubtitleEn) ?>">
            </div>

            <div class="col-md-6">
                <label class="form-label fw-bold">Venue AR</label>
                <input
                    type="text"
                    id="lm_venue_ar"
                    class="form-control"
                    value="<?= h($venueAr) ?>">
            </div>

            <div class="col-md-6">
                <label class="form-label fw-bold">Venue EN</label>
                <input
                    type="text"
                    id="lm_venue_en"
                    class="form-control"
                    value="<?= h($venueEn) ?>">
            </div>

            <div class="col-md-6">
                <label class="form-label fw-bold">Address AR</label>
                <textarea
                    id="lm_address_ar"
                    rows="3"
                    class="form-control"><?= h($addressAr) ?></textarea>
            </div>

            <div class="col-md-6">
                <label class="form-label fw-bold">Address EN</label>
                <textarea
                    id="lm_address_en"
                    rows="3"
                    class="form-control"><?= h($addressEn) ?></textarea>
            </div>

            <div class="col-md-12">
                <label class="form-label fw-bold">Map Embed iframe</label>
                <textarea
                    id="lm_map_embed"
                    rows="5"
                    class="form-control"
                    placeholder='<iframe src="https://www.google.com/maps/embed?..."></iframe>'><?= h($mapEmbed) ?></textarea>
            </div>

            <div class="col-md-12">
                <label class="form-label fw-bold">Open Map URL</label>
                <input
                    type="text"
                    id="lm_map_url"
                    class="form-control"
                    value="<?= h($mapUrl) ?>"
                    placeholder="https://maps.google.com/...">
            </div>

            <div class="col-md-12">
                <button
                    type="button"
                    class="btn btn-primary rounded-pill px-4"
                    onclick="ecBuildLocationMapJson()">
                    <i class="fa fa-code"></i>
                    Update Settings JSON
                </button>
            </div>

        </div>

    </div>
</div>

<script>
function ecBuildLocationMapJson(){

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

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

    const data = {
        layout_type: 'location_map',
        title_ar: document.getElementById('lm_title_ar').value || '',
        title_en: document.getElementById('lm_title_en').value || '',
        subtitle_ar: document.getElementById('lm_subtitle_ar').value || '',
        subtitle_en: document.getElementById('lm_subtitle_en').value || '',
        venue_ar: document.getElementById('lm_venue_ar').value || '',
        venue_en: document.getElementById('lm_venue_en').value || '',
        address_ar: document.getElementById('lm_address_ar').value || '',
        address_en: document.getElementById('lm_address_en').value || '',
        map_embed: document.getElementById('lm_map_embed').value || '',
        map_url: document.getElementById('lm_map_url').value || ''
    };

    settings.value =
        JSON.stringify(data,null,2);
}
</script>
