<?php
$color_name = $item->value->value_string;
$cmatch = [];
if(preg_match('/^(.+)-1R$/', $color_name, $cmatch)) {
  $color_name = $cmatch[1];
}

?>


<select class="form-control selectpicker show-tick" name="wfitem_<?=$item->name?>" id="wfitem_<?=$item->name?>_<?=$$wftype->id?>" title="Farbe wählen" data-style="btn-outline-<?=$color_name?>">
  <option></option>
  <?php foreach(TT_CABLE_COLORS as $name => $color): ?>
  <option 
    style="background-color: rgba(<?=$color["r"]?>,<?=$color["g"]?>,<?=$color["b"]?>, .5); color: #<?=$color["hexfg"]?>" 
    value="<?=$name?>" 
    data-bg-color="#<?=$color["hex"]?>" <?=($color['mark']) ? "data-icon='fa-ellipsis-h'" : ""?>
    <?=($name == $item->value->value_string) ? "selected='selected'" : ""?>
  >
    <?=ucfirst($name)?>
  </option>
  <?php endforeach; ?>
</select>

<script type="text/javascript">
  $('#wfitem_<?=$item->name?>_<?=$$wftype->id?>').change(function() {
    var color = $('#wfitem_<?=$item->name?>_<?=$$wftype->id?> option:selected').data("bg-color");
    var name = $('#wfitem_<?=$item->name?>_<?=$$wftype->id?> option:selected').val();
    $("wfitem_<?=$item->name?>_<?=$$wftype->id?>").data("style", "btn-danger");
    console.log("button [data-id='wfitem_<?=$item->name?>_<?=$$wftype->id?>']");
    console.log($("button [data-id='wfitem_<?=$item->name?>_<?=$$wftype->id?>']"));
    
    var matches;
    if(matches = name.match(/^(.+)-1R$/)) {
      name = matches[1];
    }
    
    $("[data-id='wfitem_<?=$item->name?>_<?=$$wftype->id?>']").removeClass(function (index, className) {
      console.log(className);
      return (className.match (/(^|\s)btn-outline-\S+/g) || []).join(' ');
    });
    
    $("[data-id='wfitem_<?=$item->name?>_<?=$$wftype->id?>']").addClass("btn-outline-" + name)
    
    console.log(color);
    console.log(name);
  });
</script>