<?php
/** @var yii\web\View $this */
/** @var app\models\Tag $model */

use yii\helpers\Html;
use yii\helpers\Url;
use yii\widgets\ActiveForm;
use app\models\Tag;

$this->title = 'Edit Tag';
?>

<div class="page-title">
    <i class="fas fa-edit"></i> Edit Tag
    <a href="<?= Url::to(['tags/index']) ?>" class="lms-btn lms-btn-primary lms-btn-sm" style="margin-left:auto;">
        <i class="fas fa-arrow-left"></i> Back
    </a>
</div>

<div style="display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start;">

<div class="lms-card" style="max-width:560px;">
    <div class="lms-card-header">
        <i class="fas fa-edit"></i> Update —
        <span class="tag-pill" style="background:<?= Html::encode($model->color) ?>; font-size:12px; margin-left:6px;">
            <i class="fas fa-tag" style="font-size:9px;"></i>
            <?= Html::encode($model->tag_name) ?>
        </span>
    </div>
    <div class="lms-card-body">

    <?php $form = ActiveForm::begin([
        'options'     => ['autocomplete' => 'off'],
        'fieldConfig' => ['errorOptions' => ['class' => 'field-error']],
    ]); ?>

        <div class="lms-form-row">
            <?= $form->field($model, 'tag_name', ['options' => ['class' => 'lms-form-group']])
                ->textInput([
                    'class' => 'form-control',
                    'id'    => 'inp-tag-name',
                    'style' => 'padding-left:14px;',
                ])
                ->hint('Slug is auto-regenerated from the name on save.') ?>
        </div>

        <div class="lms-form-group" style="margin-bottom:18px;">
            <label style="font-weight:600; display:block; margin-bottom:8px; color:#555; font-size:13px;">Color</label>
            <div class="color-palette">
                <?php foreach (Tag::COLORS as $hex): ?>
                    <label class="color-swatch-label">
                        <input type="radio" name="Tag[color]"
                               value="<?= Html::encode($hex) ?>"
                               <?= $model->color === $hex ? 'checked' : '' ?>>
                        <span class="color-swatch" style="background:<?= Html::encode($hex) ?>;"
                              title="<?= Html::encode($hex) ?>"></span>
                    </label>
                <?php endforeach; ?>
            </div>
            <?= Html::error($model, 'color', ['class' => 'field-error']) ?>
        </div>

        <div class="lms-form-row">
            <?= $form->field($model, 'is_active', ['options' => ['class' => 'lms-form-group']])
                ->dropDownList(['Y' => 'Active', 'N' => 'Inactive'],
                    ['class' => 'form-control', 'style' => 'padding-left:14px;']) ?>
        </div>

        <div style="margin-top:14px;">
            <?= Html::submitButton('<i class="fas fa-save"></i> Update Tag', ['class' => 'lms-btn lms-btn-success']) ?>
        </div>

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

<!-- Live preview -->
<div class="lms-card">
    <div class="lms-card-header" style="background:#f8f9fa;"><i class="fas fa-eye"></i> Preview</div>
    <div class="lms-card-body" style="text-align:center; padding:30px 20px;">
        <span id="tag-preview" class="tag-pill"
              style="background:<?= Html::encode($model->color) ?>; font-size:14px; padding:6px 16px;">
            <i class="fas fa-tag" style="font-size:11px; opacity:.8;"></i>
            <span id="tag-preview-name"><?= Html::encode($model->tag_name) ?></span>
        </span>
    </div>
</div>

</div>

<script>
(function() {
    var nameInp    = document.getElementById('inp-tag-name');
    var preview    = document.getElementById('tag-preview');
    var previewTxt = document.getElementById('tag-preview-name');
    var swatches   = document.querySelectorAll('input[name="Tag[color]"]');

    function updatePreview() {
        previewTxt.textContent = nameInp.value.trim() || 'Tag Name';
        swatches.forEach(function(r) {
            if (r.checked) preview.style.background = r.value;
        });
    }

    nameInp.addEventListener('input', updatePreview);
    swatches.forEach(function(r) { r.addEventListener('change', updatePreview); });
})();
</script>
