<?php

use common\models\EventType;
use yii\helpers\Html;
use yii\widgets\ActiveForm;

/* @var $this yii\web\View */
/* @var $model common\models\EventType */
/* @var $form yii\widgets\ActiveForm */
?>

<style>
    select.form-control, option{
        color: #fff;
    }

</style>

<script>

    function setThemeColor(elem){
        elem.className = 'form-control event-theme-active-' +elem.value;
    }
</script>


<div class="event-type-form">

    <?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>
    <?= $form->field($model, 'theme')->dropDownList(EventType::themes(),
    ['onchange' => "setThemeColor(this);"]) ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('event-type', 'Create') : Yii::t('event-type', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>
<script type="text/javascript">


    let themeDropDown = document.getElementById("eventtype-theme");
    let themeOptions = themeDropDown.getElementsByTagName("option");
    for (let item of themeOptions) {
        item.classList.add("event-theme-active-"+item.value)
    }

    setThemeColor(themeDropDown);
        console.info("selected: "+ themeDropDown.value);

</script>
