/backend/modules/systemAdmin/Catalog/views/catalog-item/_form.php

<?php

use backend\modules\systemAdmin\Catalog\models\CatalogItem;
use backend\modules\systemAdmin\Catalog\models\Section;
use app\modules\systemAdmin\models\details\DetailTypes;
use backend\assets\CatalogItemAsset;
use backend\modules\systemAdmin\Catalog\models\Size;
use backend\modules\systemAdmin\Catalog\models\SystemCatalogs;
use yii\helpers\ArrayHelper;
use yii\helpers\Html;
use yii\helpers\Url;
use yii\widgets\ActiveForm;
use wbraganca\dynamicform\DynamicFormWidget;

CatalogItemAsset::register($this);


//echo '<pre>';
//print_r($model->name);
//exit;

/* @var $this yii\web\View */
/* @var $model app\modules\systemAdmin\Catalog\models\CatalogItem */
/* @var $form yii\widgets\ActiveForm */
?>

<script>
    var tmp = window.location.hash;
    tmp = tmp.split('/');
    var id = tmp[2];
</script>

<div class="catalog-item-form" ng-app="catalogItemApp">
    <div ng-controller="CatalogItemTypeCtrl">
        <a ng-href="#/other/{{modelId}}" ng-click="setType('other')" class="btn btn-default" ng-class="(modelType == 'other') ? 'btn-primary' : 'btn-default'"><?= Yii::t('app', 'Other') ?></a>
        <a ng-href="#/segment/{{modelId}}" ng-click="setType('segment')" class="btn btn-default" ng-class="(modelType == 'segment') ? 'btn-primary' : 'btn-default'"><?= Yii::t('app', 'Segment') ?></a>
    </div>
    <div ng-view></div>
</div>



































<?php if(1 > 2): ?>
<script>
    var img = '<img id="modelPreviewImg" height="70" width="40">';
</script>

<div class="catalog-item-form">

    <?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>

    <?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'catalog')->dropDownList(
        ArrayHelper::map(SystemCatalogs::find()->all(), 'id', 'name'),
        [
            'prompt' => Yii::t('app', 'Select catalog'),
            'onchange' =>'
                $.post("' . Url::toRoute(['section/lists']) . '?id=" + $(this).val(), function(data){
                    $("select#catalogitem-section_id").html(data);
                });',
        ]
    ) ?>

    <?= $form->field($model, 'section_id')->dropDownList(
        ArrayHelper::map(Section::find()->all(), 'id', 'name'),
        [
            'prompt' => Yii::t('app', 'Select section'),
            'onchange' =>'
                $.post("' . Url::toRoute(['catalogitem/lists']) . '?id=' . '" + $(this).val(), function(data){
                    $("select#catalogitem-parent_id").html(data);
                });',
        ]
    ) ?>

    <?= $form->field($model, 'parent_id')->dropDownList(
        ArrayHelper::map(CatalogItem::find()->all(), 'id', 'name'),
        ['prompt' => Yii::t('app', 'Select item')]
    ) ?>

    <?= $form->field($model, 'type')->dropDownList(
        ArrayHelper::map(DetailTypes::find()->all(), 'id', 'name'),
        [
            'prompt' => Yii::t('app', 'Select item'),
            'onchange' =>'
                $.post("' . Url::toRoute(['catalogitem/modellists']) . '?id=' . '" + $(this).val(), function(data){

                    console.log(data);
                    $("#modalViewer").html("");
                    $("#modalViewer").append(data);

                    $(".iconItem").each(function(){
                        var _this = $(this);

                        $(this).click(function(){
                            $(".iconItem").each(function(){
                                $(this).children().removeClass("selected");
                            });

                            _this.children().addClass("selected");

                            $("#catalogitem-detail_id").val(_this.attr("id"));

                            $("#modelPreviewImg").remove();
                            $("#currentModel").append(img);

                            $("#currentModel").children().attr("src", _this.children().attr("src"));
                        });
                    });

                });',
        ]
    ) ?>

    <?php DynamicFormWidget::begin([
        'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
        'widgetBody' => '.container-items', // required: css class selector
        'widgetItem' => '.item', // required: css class
        'limit' => 50, // the maximum times, an element can be added (default 999)
        'min' => 1, // 0 or 1 (default 1)
        'insertButton' => '.add-item', // css class
        'deleteButton' => '.remove-item', // css class
        'model' => $modelsCatalogItemSize[0],
        'formId' => 'dynamic-form',
        'formFields' => [
            'full_name',
            'address_line1',
            'address_line2',
            'city',
            'state',
            'postal_code',
        ],
    ]); ?>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4>
                <i class="glyphicon glyphicon-resize-vertical"></i>
                <i class="glyphicon glyphicon-resize-horizontal"></i>
                Sizes
                <button type="button" class="add-item btn btn-success btn-sm pull-right"><i class="glyphicon glyphicon-plus"></i> Add</button>
            </h4>
        </div>
        <div class="panel-body">
            <div class="container-items"><!-- widgetBody -->
                <?php foreach ($modelsCatalogItemSize as $i => $modelsCatalogItemSize): ?>
                    <div class="item panel panel-default"><!-- widgetItem -->
                        <div class="panel-heading">
                            <h3 class="panel-title pull-left">Sizes</h3>
                            <div class="pull-right">
                                <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="panel-body">
                            <?php
                            // necessary for update action.
                            if (! $modelsCatalogItemSize->isNewRecord) {
                                echo Html::activeHiddenInput($modelsCatalogItemSize, "[{$i}]id");
                            }
                            ?>
                            <?= $form->field($modelsCatalogItemSize, "[$i]size_id")->dropDownList(
                                ArrayHelper::map(Size::find()->all(), 'id', 'fullName'),
                                [
                                    'prompt' => Yii::t('app', 'Select size'),
                                ]
                            ) ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div><!-- .panel -->
    <?php DynamicFormWidget::end(); ?>

    <?= $form->field($model, 'detail_id')->hiddenInput(
        [
            'value' => $model->detail_id,
        ]
//        ArrayHelper::map(Models::find()->all(), 'id', 'model.id'),
//        ['prompt' => Yii::t('app', 'Select item')]
    ) ?>

    <div id="modalViewer" style="height: 100px; width: 100%; background: #00b3ee; overflow-x: scroll;"></div>

    <div id="currentModel" style="height: 80px;">
<!--        <img height="70" width="40" src="/advanced/backend/web/">-->
    </div>

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

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

</div>
<script>
//    window.onload = function(){
<!--        $.get("getcurrentimage?id=--><?//= $model->detail_id ?><!--", function(data){-->
//            console.log(data);
//            $('#currentModel').children().attr('src', data);
//            $('#currentModel').append('<img height="70" width="40" src="' + data + '">');
<!---->
//        });
//    }

    window.onload = function(){
        $.post("<?= Url::toRoute(['catalogitem/modellists']) ?>?id=<?= $model->type->id ?>",
            function(data){

            console.log(data);

            $("#modalViewer").html("");
            $("#modalViewer").append(data);

            var $elem = $("#<?= $model->model->id ?>");
            $elem.children().addClass("selected");

            $("#catalogitem-detail_id").val($elem.attr("id"));
            $("#currentModel").append(img);
            $("#currentModel").children().attr("src", $elem.children().attr("src"));

            $(".iconItem").each(function(){
                var _this = $(this);

                $(this).click(function(){
                    $(".iconItem").each(function(){
                        $(this).children().removeClass("selected");
                    });

                    _this.children().addClass("selected");

                    $("#catalogitem-detail_id").val(_this.attr("id"));
                    $("#modelPreviewImg").remove();
                    $("#currentModel").append(img);
                    $("#currentModel").children().attr("src", _this.children().attr("src"));
                });
            });

        });
    }
</script>
<?php endif; ?>