<?php 
/**
 * Webkul Software.
 * 
 * PHP version 7.0+
 *
 * @category  Webkul
 * @package   Webkul_MobikulCore
 * @author    Webkul <support@webkul.com>
 * @copyright 2010-2019 Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html ASL Licence
 * @link      https://store.webkul.com/license.html
 */
$categoryBannerData = $block->getCategoryBannerData();
$categoryBanners = explode(",", $categoryBannerData->getBanner());
// $mediaPath = $this->helper('Webkul\MobikulCore\Helper\Catalog')->getBasePath();
$mediaPath = $this->helper('Webkul\MobikulCore\Helper\Data')->getUrl('media');
$imageCount = count($categoryBanners);
if ($imageCount > 0) : ?>
    <div id="wk-mobikul-category-banner">
        <label class="admin__field-label">
            <span><strong><?php echo __("Banner Image"); ?></strong></span>
        </label>
        <?php $i = 0; ?>
        <?php foreach ($categoryBanners as $key => $image) : ?>
            <div class="admin__field categorybanner-image">
                <div class="admin__field-control">
                    <input class="admin__control-file" type="file" name="mobikul_categoryimages_banner[<?php echo $i ?>]" form="mobikul_categoryimages_form">
                    <span>
                        <img height="24px" width="24px" src="<?php echo $mediaPath."mobikul/categoryimages/banner/".$image; ?>">
                        <button id="wk-mobikul-categorybanner-delete"><?php echo __("Delete");?></button>
                        <div class="admin__field-note" >
                            <span><?php echo __("Allowed file type: png, jpg, jpeg."); ?></span>
                        </div>
                    </span>
                </div>
            </div>
            <?php $i++; ?>
        <?php endforeach; ?>
    </div>
<?php endif ; ?>
<div id="wk-mobikul-categorybannerimages" >
    <div class="admin__field categorybanner-image" >
        <button id="wk-mobikul-categorybanner-add-more"><?php echo __("Add More");?></button>
    </div>
</div>
<script id="wk-categorybanner-template" type="text/x-magento-template">
    <div class="admin__field categorybanner-image">
        <div class="admin__field-control">
            <input class="admin__control-file" type="file" name="mobikul_categoryimages_banner[<%- data.index %>]" form="mobikul_categoryimages_form" >
            <button id="wk-mobikul-categorybanner-delete"><?php echo __("Delete");?></button>
            <div class="admin__field-note" >
                <span><?php echo __("Allowed file type: png, jpg, jpeg."); ?></span>
            </div>
        </div>
    </div>
</script>

<?php
$optionElements = [
    "key" => $i
];
$serializedData = $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($optionElements);
?>
<script type="text/x-magento-init">
{
"*":{
        "categoryBannerImage":<?php /* @noEscape */ echo $serializedData; ?>
    }
}
</script>
<script type="text/javascript">
    require("mage/apply/main").apply();
</script>
