<?php

declare(strict_types=1);

/** @var  \FiloBlu\Storelocator\Block\System\Config\TestGoogleMapsApi $block */

?>

<div class="filoblu_storelocator_test_gmaps">

    <div class="field">
        <div class="control">
            <textarea id="filoblu_storelocator_test_gmaps_response" class="textarea admin__control-textarea" rows="8" readonly="readonly"></textarea>
        </div>
    </div>

    <?= $block->getButtonHtml() ?>
</div>

<script>
    require([
        'jquery',
        'prototype',
    ], function (jQuery) {
        jQuery('#filoblu_storelocator_test_gmaps_api').click(function () {
            jQuery.ajax({
                showLoader: true,
                url: "<?= $block->getAjaxUrl() ?>",
                data:  {
                    form_key: '<?= $block->getFormKey() ?>',
                    isAjax: true,
                    to: jQuery('#filoblu_storelocator_test_gmaps_response').val()
                },
                dataType: 'json'
            }).done(function (data) {
                jQuery('#filoblu_storelocator_test_gmaps_response').val(data.response);
            });
        });
    });
</script>