<?php

use Joomla\CMS\HTML\HTMLHelper;

defined('_JEXEC') or die('Restricted access');

HTMLHelper::_('draggablelist.draggable');
$value = $this->value ?: [];
$services = array_merge($value, PlgSystemJasocialshare::$services);
$services = array_unique($services);
?>
<div id="share-service-list">
    <?php foreach ($services as $service) : ?>
        <div class="share-service">
            <span><i class="fas icon-move drag-handler"></i></span>
            <span>
                <input id="<?php echo $this->id . '_' . $service ?>" type="checkbox" name="jform[params][services][]" value="<?php echo $service ?>" <?php echo in_array($service, $value) ? 'checked' : '' ?>>
            </span>
            <label for="<?php echo $this->id . '_' . $service ?>"><?php echo ucfirst($service) ?></label>
        </div>
    <?php endforeach ?>
</div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        dragula([document.querySelector('#share-service-list')], {
            moves: function(el, container, handle) {
                return handle.classList.contains('drag-handler');
            }
        })
    })
</script>

<style>
    #share-service-list {
        display: flex;
        flex-flow: row wrap;
        gap: 8px;   
    }

    #share-service-list .share-service {
        border-radius: 4px;
        border: 1px solid #e2e8f0;
        display: flex;
        padding-right: 8px;
        gap: 6px;
        transition: all 0.35s ease;
        min-width: 150px;
    }

    #share-service-list .share-service:hover {
        border-color: #2F7D32;
    }

    #share-service-list .share-service span,
    #share-service-list .share-service label {
        display: flex;
        align-items: center;
    }

    #share-service-list .share-service span:first-of-type {
        background: #f8fafc;
        border-radius: 4px 0 0 4px;
        border-right: 1px solid #e2e8f0;
        color: #cbd5e1;
        display: inline-block;
        padding: 4px 8px;
    }

    #share-service-list .share-service span:first-of-type:hover {
        color: #64748b;
        cursor: move;
    }
</style>