<?php
/**
 * Webkul Software.
 * 
 *
 *
 * @category  Webkul
 * @package   Webkul_AppScreenCustomization
 * @author    Webkul <support@webkul.com>
 * @copyright Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html ASL Licence
 * @link      https://store.webkul.com/license.html
 */
namespace Webkul\AppScreenCustomization\Block;

class Logo extends \Magento\Config\Block\System\Config\Form\Field
{
    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param array                                   $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    /**
     * add color picker in admin configuration fields
     * @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
     * @return string script
     */
    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $html = $element->getElementHtml();
        $value = $element->getData('value');
        $class = "ui-selected";
        $imageHtml = '<style>
                .selectable .ui-selecting {
                    border: 2px dashed #ff0000;
                }
                
                .selectable .ui-selected {
                    border: 2px solid #ff0000;
                    -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
                    -moz-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
                    box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
                }
                
                .selectable img {
                    margin: 5px;
                    padding: 5px;
                    border: 2px solid #ffffff;
                    display: inline-block;
                }
                
                .selected-items {
                    border: 2px solid #ff0000;
                    line-height: 32px;
                }
            </style>
            <div class="selectable">
                <img class="'.$this->getClass(1, $value).'" height="100" width="100" src="'.$this->getViewFileUrl("Webkul_AppScreenCustomization::images/logo1.png").'" class="ui-widget-content" />
                <img class="'.$this->getClass(2, $value).'" height="100" width="100" src="'.$this->getViewFileUrl("Webkul_AppScreenCustomization::images/logo2.png").'" class="ui-widget-content" />
                <img class="'.$this->getClass(3, $value).'" height="100" width="100" src="'.$this->getViewFileUrl("Webkul_AppScreenCustomization::images/logo3.png").'" class="ui-widget-content" />
                <img class="'.$this->getClass(4, $value).'" height="100" width="100" src="'.$this->getViewFileUrl("Webkul_AppScreenCustomization::images/logo4.png").'" class="ui-widget-content" />
                <img class="'.$this->getClass(5, $value).'" height="100" width="100" src="'.$this->getViewFileUrl("Webkul_AppScreenCustomization::images/logo5.png").'" class="ui-widget-content" />
            </div>';

        $html .= $imageHtml.'<script type="text/javascript">
            require(["jquery", "jqueryui"], function ($) {
                $(function() {
                    $("#'.$element->getHtmlId().'").hide();
                    $(".selectable").selectable({
                        selected: function() {
                        $(".selectable img").each(function(index) {
                            if ($(this).hasClass("ui-selected")) {
                                $("#'.$element->getHtmlId().'").val(index+1);
                            }
                        });
                        }
                    });
                });
            });
            </script>';

        return $html;
    }

    private function getClass($index, $value)
    {
        return ($index == $value) ? 'ui-selected' : '';
    }
}