<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use kartik\datetime\DateTimePicker;
use app\widgets\CropperjsWidget;

$form = ActiveForm::begin([
    'id' => 'tags-form',
    'options' => ['class' => 'form-horizontal', 'enctype' => 'multipart/form-data']]);
	$brightness = 60;
	if( trim($model->ext) != ''){
		$ext = json_decode(trim($model->ext));
		if( isset($ext->brightness) ){
			$brightness = $ext->brightness;
		}
	}

?>
<input type="hidden" name="Tags[id]" value="<?=$model->id?>">
<input type="hidden" name="Tags[ext]" id="ext" value='<?=$model->ext?>'>

<style>
#image {
	width: 100%;
	background: URL(/img/image.svg) no-repeat 50% 50%;
	background-size: contain;
	background-color: #fff;
	cursor: pointer;
	padding: 0px 10px 8px 0px;
	filter: brightness(<?=$brightness?>%);
	aspect-ratio: 16/9;
}
</style>
<?
if($model->id){
	$imageSrc = "/tag-images/".$model->id."_sizehd.jpg?r=".rand();
}else{
	$imageSrc = '/img/e.gif';
}
?>
<div class="container-fluid">
<div class="row">
	<div class="col-6 col-sm-6">
		<div class="input-group mb-3">
			<img id="image" src="<?=$imageSrc?>" onClick="$('#modal').modal('show');document.getElementById('inputImage').click();" >
<? echo CropperjsWidget::widget(['image' => 'image', 'file' => 'Tags[photo]', 'post' => 'cropping', 'aspectRatio' => '16 / 9']); ?>
			<label for="formControlRange">Затенение</label>
			<input type="range" class="form-control-range" id="formControlRange" name="Tags[brightness]" min="10" max="100" value="<?=$brightness?>" step="1" oninput="test(this)">
		</div>
	</div>
	<div class="col">
<?

echo $form->field($model, 'url')->textInput([
                    'maxlength' => true,
                    'class' => 'form-control js-word-count-input',
					'placeholder' => 'URL если не заполнить, то создаётся из заголовка'
                ])->label('URL часть адреса рездела');

echo $form->field($model, 'title')->textInput([
                    'maxlength' => true,
                    'class' => 'form-control js-word-count-input',
					'placeholder' => 'Заголовок',
//					'id' => 'js-news-content'
                ])->label('Заголовок');
echo $form->field($model, 'meta_title')->textInput([
                    'maxlength' => true,
                    'class' => 'form-control js-word-count-input',
					'placeholder' => 'Заголовок SEO'
                ])->label('Заголовок SEO');

echo $form->field($model, 'description')->textarea([
                    'maxlength' => true,
                    'class' => 'form-control js-word-count-input',
					'placeholder' => 'description'
                ])->label('Описание раздела');
echo $form->field($model, 'keywords')->hiddenInput()->label(false);
?>
<div class="form-group form-check">
<?

echo $form->field($model, 'active')->checkbox([
                    'class' => 'form-check-input',
					'label' => 'Активный'
                ]);
                //($model->show == 'Y')?true:false,
echo $form->field($model, 'show')->checkbox([
                    'class' => 'form-check-input',
					'label' => 'Показывать везде',
					'uncheck' => 'N',
					'checked' => ($model->show == 'Y')?true:false
                ]);
?>
</div>
<div class="form-group">
<?
	echo Html::submitButton('Send', ['class' => 'btn btn-success']);
?>
</div>
</div>
</div>
</div>
<script>
	var ext ='';
	var extx='<?=json_decode(trim($model->ext))?trim($model->ext):""?>';
	if( extx != '' ){
		var ext = JSON.parse(extx);
	}
	$('#topic-form').on('beforeValidate',
		function (event){
			console.log(JSON.stringify(ext));
			if( ext != '' ){
				$('#ext').val(JSON.stringify(ext));
			}
			return;
		}
	);
	function test(e){
		$('#image').css( "filter", "brightness("+$(e).val()+"%)" );
		if( ext == '' ){
			ext = new Object();
		}
		ext.brightness = $(e).val();
	}
</script>
<?
ActiveForm::end();
