<style>
    #colour-picker input {
        margin-right: 5px;
    }
</style>

<input type="hidden" name="livesupportid" id="livesupportid" />
<input type="hidden" name="isAddGroup" value="1" />
<input type="hidden" name="groupId" value ="<?php echo $this->groupId; ?>" />

<div class="mb-3">
    <label for="groupName" class="form-label"><?php echo $this->user->lang("Name"); ?></label>
    <input type="text" class="form-control required" id="groupName" name="groupName" value="<?php echo $this->name; ?>" />
</div>

<div class="mb-3">
    <label for="groupDescription" class="form-label"><?php echo $this->user->lang("Description"); ?></label>
    <textarea class="form-control" id="groupDescription" name="groupDescription" rows="4"><?php echo $this->description; ?></textarea>
</div>

<div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" name="useDefault" id="useDefault" checked>
    <label class="form-check-label" for="useDefault">
        <?php echo $this->user->lang('Use Default Group Color?'); ?>
    </label>
</div>

<div class="mb-3" id="hex_row" style="display: none;">
    <span id="colour-picker">
    <select class="form-select rounded" name="groupColor" id="groupColor">
        <?php
            $cs = array('00', '33', '66', '99', 'CC', 'FF');
            $generatedColors = array();

            // Build generated colors
            for ($i = 0; $i < 6; $i++) {
                for ($j = 0; $j < 6; $j++) {
                    for ($k = 0; $k < 6; $k++) {
                        $generatedColors[] = $cs[$i] . $cs[$j] . $cs[$k];
                    }
                }
            }

            // Normalize saved color
            $savedColor = ltrim($this->groupColor, '#');

            // If saved color is NOT in generated list, add it first
            if (!empty($savedColor) && !in_array(strtoupper($savedColor), $generatedColors, true)) {
                echo '<option value="' . htmlspecialchars($savedColor) . '" selected>'
                    . '#' . htmlspecialchars($savedColor)
                    . '</option>' . "\n";
            }

            // Output generated options
            foreach ($generatedColors as $c) {
                $selected = (
                    $this->defaultGroupColor == 0 &&
                    strtoupper($c) === strtoupper($savedColor)
                ) ? 'selected' : '';

                echo "<option value=\"$c\" $selected>#$c</option>\n";
            }
        ?>
    </select>

    </span>
</div>

<script data-cfasync="false" type="text/javascript">
$(document).ready(function() {

    $('#useDefault').click(function() {
        if ($(this).is(':checked')) {
            $('#hex_row').hide();
        } else {
            $('#hex_row').show();
        }
    });

    $('#groupColor').colourPicker({
        ico: '../templates/admin/images/colorPicker.gif',
        title: false
    });

    <?php if ($this->defaultGroupColor == 0) { ?>
        $('#useDefault').prop('checked', false);
        $('#hex_row').show();
    <?php } ?>

});
</script>
