<div class="modal-header">
    <h5 class="modal-title" id="participant_edit_modal"><?php if ($editType === 'new') : eT('Add attribute'); else: eT('Edit attribute'); endif; ?></h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<?php
$form = $this->beginWidget(
    'yiistrap_fork.widgets.TbActiveForm',
    [
        'id'          => 'editAttributeNameActiveForm',
        'action'      => ['admin/participants/sa/editAttributeName'],
        'htmlOptions' => ['class' => ''], // for inset effect
    ]
);
?>
<div class="modal-body ">
    <input type="hidden" name="oper" value="<?= $editType ?>"/>
    <?php if ($editType === 'edit') : ?>
        <input type="hidden" id="ParticipantAttributeName_attribute_id" name="ParticipantAttributeName[attribute_id]" value="<?= $model->attribute_id ?>"/>
    <?php endif; ?>
    <fieldset>
        <legend><?= gT("Basic settings") ?></legend>
        <?php $baseControlGroupHtmlOptions = [
            'groupOptions' => ['class' => ''],
            'labelOptions' => ['class' => ''],
            'required'     => 'required'
        ]; ?>
        <?= $form->textFieldControlGroup($model, 'defaultname', $baseControlGroupHtmlOptions) ?>
        <?= $form->dropDownListControlGroup($model, 'attribute_type', $model->attributeTypeDropdownArray, array_merge($baseControlGroupHtmlOptions, ['class' => 'form-select'])) ?>
        <div class="ex-form-group mb-3" id="">
            <label class='form-label'><?php eT("Should this attribute be visible on the panel?"); ?></label>
            <div>
                <?php $this->widget('ext.ButtonGroupWidget.ButtonGroupWidget', [
                    'name'          => "ParticipantAttributeName[visible]",
                    'checkedOption' => $model['visible'] === 'TRUE' ? '1' : '0',
                    'selectOptions' => [
                        '1' => gT('On'),
                        '0' => gT('Off'),
                    ],
                ]); ?>
            </div>
        </div>
        <div class="ex-form-group mb-3" id="">
            <label class=" form-label selector_languageAddLabel" for="dummyNameForInputLabel"
                   title="<?php !$bEncrypted ? eT("Encryption is disabled because Sodium library isn't installed") : ''; ?>"><?php eT('Encrypted'); ?></label>
            <div>
                <?php $this->widget('ext.ButtonGroupWidget.ButtonGroupWidget', [
                    'name'          => "ParticipantAttributeName[encrypted]",
                    'id'            => "encrypted",
                    'checkedOption' => $model['encrypted'] === 'Y' ? '1' : '0',
                    'selectOptions' => [
                        '1' => gT('On'),
                        '0' => gT('Off'),
                    ],
                    'htmlOptions'   => [
                        'disabled' => !$bEncrypted,
                    ]
                ]); ?>
            </div>
        </div>
        <div id="ParticipantAttributeNamesDropdownEdit" class="row ex-form-group mb-3" style="display: none;">
            <div class="row">
                <div class="col-2">
                    <button type="button" class="btn btn-outline-secondary btn-block" id="addDropdownField" data-bs-toggle="tooltip" title="<?php eT('Add dropdown field'); ?>"><i
                            class="ri-add-circle-fill text-success"></i></button>
                </div>
                <h4 class="col-8 col-offset-2"><?php eT("Dropdown fields") ?></h4>
            </div>
            <div id='ParticipantAttributeNamesDropdownEditList'>
                <?php foreach ($model->getAttributesValues($model->attribute_id) as $attribute_value): ?>
                    <div class="control-group">
                        <div class="dropDownContainer col-8 col-offset-2">
                            <?= TbHtml::textField('ParticipantAttributeNamesDropdown[]', $attribute_value['value'], ['class' => 'form-control', 'id' => '']) ?>
                        </div>
                        <div class="col-1">
                            <button type="button" class="btn btn-outline-secondary ex-form-group mb-3 action_delDropdownField">
                                <i class="ri-delete-bin-fill text-danger"></i>
                            </button>
                        </div>
                    </div>
                <?php endforeach; ?>
                <div class='control-group'>
                    <div class='dropDownContainer col-8 col-offset-2'>
                        <input class='form-control' name='ParticipantAttributeNamesDropdown[]' value=''/>
                    </div>
                    <div class="col-1">
                        <button type="button" class="btn btn-outline-secondary ex-form-group mb-3 action_delDropdownField">
                            <i class="ri-delete-bin-fill text-danger"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend><?php eT("Languages") ?></legend>
        <div class="col-12 ex-form-group mb-3">
            <label class=" col-12 form-label" for="ParticipantAttributeName_addLanguage_language"><?php eT("Add language"); ?></label>
            <div class="d-flex flex-row align-items-center flex-wrap">
                <div class=" col-11">
                    <?= TbHtml::dropDownList("ParticipantAttributeName_addLanguage_language", '', $languagesForDropdown, ['encode' => false, 'class' => 'form-select']) ?>
                </div>
                <div class="col-1">
                    <button type="button" class="btn btn-outline-secondary ex-form-group ms-2" id="addLanguageField" data-bs-toggle="tooltip" title="<?php eT("Add a new language") ?>">
                        <i class="ri-add-circle-fill text-success"></i>
                    </button>
                </div>
            </div>
        </div>
        <div id='languagesList' class="row">
            <?php if ($editType !== 'edit') : $languageKey = Yii::app()->getLanguage(); ?>
                <div class="col-12 ex-form-group mb-3" data-lang="<?= $languageKey ?>">
                    <label class="form-label" for="ParticipantAttributeNameLanguages_<?= $languageKey ?>">
                        <?= getLanguageNameFromCode($languageKey, false) ?>
                    </label>
                    <div class="d-flex flex-row align-items-center flex-wrap">
                        <div class="col-11">
                            <input required class="form-control" type="text" value=""
                                   name="ParticipantAttributeNameLanguages[<?= $languageKey ?>]"
                                   id="ParticipantAttributeNameLanguages_<?= $languageKey ?>">
                        </div>
                        <div class="col-1">
                            <button type="button" class="btn btn-outline-secondary ex-form-group ms-2 action_delLanguageField">
                                <i class="ri-delete-bin-fill text-danger"></i>
                            </button>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
            <?php foreach ($languagesOfAttribute as $languageKey => $languageOfAttribute) : ?>
                <div class="col-12 ex-form-group mb-3" data-lang="<?= $languageKey ?>">
                    <label class="form-label" for="ParticipantAttributeNameLanguages_<?= $languageKey ?>">
                        <?= getLanguageNameFromCode($languageKey, false) ?>
                    </label>
                    <div class="d-flex flex-row align-items-center flex-wrap">
                        <div class="col-11">
                            <input class="form-control" type="text"
                                   name="ParticipantAttributeNameLanguages[<?= $languageKey ?>]"
                                   id="ParticipantAttributeNameLanguages_<?= $languageKey ?>"
                                   value="<?= CHtml::encode($languageOfAttribute) ?>">
                        </div>
                        <div class="col-1">
                            <button type="button" class="btn btn-outline-secondary ex-form-group ms-2 action_delLanguageField">
                                <i class="ri-delete-bin-fill text-danger"></i>
                            </button>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
            <div class="d-none">
                <div class="ex-form-group mb-3" id="dummyLanguageInputGroup">
                    <label class=" form-label selector_languageAddLabel" for="dummyNameForInputLabel"></label>
                    <div class="d-flex flex-row align-items-center flex-wrap">
                        <div class="col-11">
                            <input class="form-control selector_languageAddInput" name="dummyParticipantAttributeNameLanguages" type="text" value="">
                        </div>
                        <div class="col-1">
                            <button type="button" class="btn btn-outline-secondary ex-form-group ms-2 action_delNewLanguageField">
                                <i class="ri-delete-bin-fill text-danger"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class='control-group' id="dummyDropdownInputGroup">
                    <div class='dropDownContainer col-8 col-offset-2'>
                        <input class='form-control' name='dummyParticipantAttributeNamesDropdown' value=''/>
                    </div>
                    <div class="col-1">
                        <button type="button" class="btn btn-outline-secondary ex-form-group mb-3 action_delDropdownField">
                            <i class="ri-delete-bin-fill text-danger"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</div>
<script>
    jQuery('#ParticipantAttributeName_attribute_type').on('change', function () {
        if ($(this).val() == 'DD') {
            $('#ParticipantAttributeNamesDropdownEdit').slideDown();
        } else {
            $('#ParticipantAttributeNamesDropdownEdit').slideUp();
        }
    })
    jQuery('.action_delDropdownField').on('click', function (e) {
        e.preventDefault();
        $(this).closest('div.control-group').remove();
        return false;
    });
    jQuery('#addDropdownField').on('click', function (e) {
        e.preventDefault();
        jQuery('#dummyDropdownInputGroup')
            .clone()
            .appendTo($('#ParticipantAttributeNamesDropdownEditList'))
            .removeAttr('id')
            .find('input')
            .attr('name', 'ParticipantAttributeNamesDropdown[]');
        return false;
    });
    jQuery('#addLanguageField').on('click', function (e) {
        e.preventDefault();
        var langKey = $('#ParticipantAttributeName_addLanguage_language').val();
        if (langKey !== '') {
            jQuery('#dummyLanguageInputGroup')
                .clone()
                .appendTo($('#languagesList'))
                .data('lang', langKey)
                .find('input.selector_languageAddInput')
                .attr('name', 'ParticipantAttributeNameLanguages[' + langKey + ']')
                .attr('id', 'ParticipantAttributeNameLanguages_' + langKey)
                .end()
                .find('label.selector_languageAddLabel')
                .attr('for', 'ParticipantAttributeNameLanguages_' + langKey)
                .html($('#ParticipantAttributeName_addLanguage_language option:selected').text());
        }
        return false;
    });
    jQuery('.action_delLanguageField').on('click', function (e) {
        e.preventDefault();
        var self = this,
            attribute_id = $('#ParticipantAttributeName_attribute_id').val(),
            formGroup = $(this).closest('div.ex-form-group'),
            lang = formGroup.data('lang');

        // Adding new attribute no id yet, can't delete
        if (!attribute_id) {
            window.LS.ajaxAlerts('<?php eT("There has to be at least one language."); ?>', 'danger');
            return false;
        }

        $.ajax({
            url: deleteLanguageFromAttributeUrl,
            data: {attribute_id: attribute_id, lang: lang},
            method: 'POST',
            dataType: 'json',
            success: function (result) {
                if (result.success) {
                    formGroup.fadeOut(400, function () {
                        formGroup.remove()
                    });
                } else {
                    window.LS.ajaxAlerts(result.error.message, 'danger');
                }
            }
        })

        return false;
    });
    jQuery(document).on('click', '.action_delNewLanguageField', function (e) {
        e.preventDefault();
        var formGroup = $(this).closest('div.ex-form-group');
        formGroup.fadeOut(400, function () {
            formGroup.remove();
        });
        return false;
    });
    jQuery(function () {
        jQuery('#ParticipantAttributeName_attribute_type').trigger('change');
    });
</script>
<div class="modal-footer">
    <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">
        <?php eT('Cancel') ?>
    </button>
    <button type="button" class="btn btn-primary action_save_modal_editAttributeName">
        <?php eT("Save") ?>
    </button>
</div>
<?php
$this->endWidget();
?>