<?php

use yii\helpers\Html;
use yii\helpers\Url;
use yii\helpers\ArrayHelper;
use yii\widgets\ActiveForm;
use kartik\select2\Select2;
use yii\bootstrap\Modal;
use app\components\Utilities;

$selected_nodes = isset($selected_nodes_names) ? Utilities::customJsonEncode($selected_nodes_names) : json_encode(null);

$script =<<< JS

    $(document).ready(function(){
        $('#is_admin').change(function(){
            if($(this).prop('checked')){
                $('.user-permissions').slideUp(250);
            }
            else{
                // Select2 set width to 0 if the container were hidden. So, here we set it back to full width in order to display the full label
                $('.user-permissions').find('.select2-search__field').css('width', 'auto');
                $('.user-permissions').slideDown(250);
            }
        });

        $('.tree-modal-button').click(function(e){
            e.preventDefault();
            $('#tree-modal').modal('show')
                .find('#tree-modal-content')
                .load($(this).attr('value'));
        });

        if(window.location.href.includes('update')){
            var selectedNodes = $selected_nodes;
            if(selectedNodes.length){
                var content = '';
                for(var i = 0; i < selectedNodes.length; i++){
                    content += '<tr style="background-color: white;">';
                    content += '<td style="width: 75%; padding: 5px; text-align: center;"><input type="hidden" name="SelectedNodes[' + i + ']" value="' + selectedNodes[i] + '"><span class="node-name">' + selectedNodes[i] + '</span></td>';
                    content += '<td style="width: 25%; padding: 5px; text-align: center;">' + '<a style="color: red; cursor: pointer;" class="glyphicon glyphicon-remove" onClick="deleteSelectedNode(this);"></a>' + '</td>';
                    content += '</tr>';
                }
                $('#selected-nodes').append(content);
            }
        }
    });

JS;

$this->registerJs($script);

?>

<div class="create-user-form">

    <?= Utilities::getSessionAlertContainer('nodes_and_groups_must_be_filled', 'danger') ?>

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

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

    <?php if(Yii::$app->controller->action->id != 'update'): ?>

    <?= $form->field($model, 'password')->passwordInput() ?>

    <?= $form->field($model, 'confirm_password')->passwordInput() ?>

    <?php endif; ?>

    <?= $form->field($model, 'is_admin')->checkbox(['id' => 'is_admin']) ?>

    <div class="user-permissions" style="display: <?= (Yii::$app->controller->action->id == 'update' && $model->is_admin) ? 'none' : 'block' ?>">
    
        <div class="form-group nodes-section">
            <?= Html::label('Nodes', 'nodes') ?>

            <h5><?= 'Select the nodes the user will be a member of' ?></h5>

            <p>
                <?= Html::a('Display Nodes', [''],
                        [
                            'class' => 'tree-modal-button btn btn-primary btn-expanded',
                            'value' => Url::base(true) . '/nodes/show-tree-modal'
                        ]) 
                ?>
            </p>

            <table id="selected-nodes" style="width: 100%;" class="table table-bordered"></table>

        </div>

        <div class="form-group groups-section">
            <?= Html::label('Groups', 'groups') ?>

            <?= Select2::widget([
                'data' => ArrayHelper::map($groups, 'id', 'name'),
                'name' => 'groups',
                'value' => Yii::$app->controller->action->id == 'update' ? $model->groups : null,
                'options' => [
                    'placeholder' => 'Select groups',
                    'multiple' => true
                ],
            ]) ?>
        </div>

    </div>

    <div class="center-elements">
        <?= Html::submitButton(Yii::t('app', 'Save'), ['class' => 'btn btn-success btn-expanded']) ?>
    </div>

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

</div>

<?php 
    Modal::begin([
        'header' => '<h3>' . 'System Tree' . '</h3>',
        'id' => 'tree-modal',
        'size' => 'modal-lg',
        'closeButton' => false
    ]);

    echo '<div id="tree-modal-content"></div>';

    Modal::end();
?>

<script>
    function deleteSelectedNode(el){
        $(el).closest('tr').remove();
    }
</script>