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

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

$this->title = 'Edit Colour Scheme';
?>

<div class="page-title">
    <i class="fas fa-edit"></i> Edit Colour Scheme
    <a href="<?= Url::to(['colour-scheme/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;">

    <!-- ===== Form ===== -->
    <div class="lms-card">
        <div class="lms-card-header">
            <i class="fas fa-edit"></i> Update Colour Scheme —
            <span style="margin-left:8px; font-weight:600; color:#0f3460;"><?= Html::encode($model->item) ?></span>
        </div>
        <div class="lms-card-body">

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

            <!-- Type -->
            <div class="lms-form-group" style="margin-bottom:20px;">
                <?= $form->field($model, 'type', [
                        'options'  => ['tag' => false],
                        'template' => '<label class="lms-label" style="font-weight:600;">{label} <span style="color:#e74c3c;">*</span></label>{input}{error}',
                    ])
                    ->dropDownList(
                        ['' => '— Select Type —'] + ColourScheme::TYPE_LABELS,
                        ['class' => 'form-control', 'id' => 'inp-cs-type', 'style' => 'padding-left:14px;']
                    )
                ?>
            </div>

            <!-- Item -->
            <div class="lms-form-group" style="margin-bottom:20px;">
                <?= $form->field($model, 'item', [
                        'options'  => ['tag' => false],
                        'template' => '<label class="lms-label" style="font-weight:600;">{label} <span style="color:#e74c3c;">*</span></label>{input}{error}',
                    ])
                    ->textInput([
                        'id'    => 'inp-cs-item',
                        'class' => 'form-control',
                        'style' => 'padding-left:14px;',
                    ])
                ?>
            </div>

            <!-- Field / Description -->
            <div class="lms-form-group" style="margin-bottom:20px;">
                <?= $form->field($model, 'field', [
                        'options'  => ['tag' => false],
                        'template' => '<label class="lms-label" style="font-weight:600;">{label} <span style="color:#e74c3c;">*</span></label>{input}{error}',
                    ])
                    ->textInput([
                        'id'    => 'inp-cs-field',
                        'class' => 'form-control',
                        'style' => 'padding-left:14px;',
                    ])
                ?>
            </div>

            <!-- Colour -->
            <div class="lms-form-group" style="margin-bottom:20px;">
                <label class="lms-label" style="font-weight:600;">
                    Colour <span style="color:#e74c3c;">*</span>
                </label>
                <div class="cs-picker-row">
                    <input type="color" id="inp-cs-picker" value="<?= Html::encode($model->colour) ?>"
                           style="width:48px; height:38px; border:1px solid #d0d7e2; border-radius:6px; cursor:pointer; padding:2px;">
                    <?= $form->field($model, 'colour', [
                            'options'  => ['tag' => false],
                            'template' => '{input}{error}',
                        ])
                        ->textInput([
                            'id'        => 'inp-cs-colour',
                            'class'     => 'form-control',
                            'style'     => 'width:130px; font-family:monospace; padding-left:14px;',
                            'maxlength' => 7,
                        ])
                    ?>
                </div>
            </div>

            <!-- Audit info -->
            <div style="background:#f8faff; border-radius:8px; padding:12px 16px; margin-bottom:20px; font-size:13px; color:#888;">
                <div style="display:flex; gap:24px; flex-wrap:wrap;">
                    <div>
                        <i class="fas fa-user-plus" style="width:14px;"></i>
                        Created by
                        <strong style="color:#555;">
                            <?= $model->createdBy ? Html::encode($model->createdBy->getFullName()) : "User #{$model->created_by}" ?>
                        </strong>
                    </div>
                    <div>
                        <i class="fas fa-clock" style="width:14px;"></i>
                        <?= $model->created_at ? date('d M Y, H:i', strtotime($model->created_at)) : '—' ?>
                    </div>
                </div>
            </div>

            <div>
                <?= Html::submitButton(
                    '<i class="fas fa-save"></i> Update Scheme',
                    ['class' => 'lms-btn lms-btn-success']
                ) ?>
                <a href="<?= Url::to(['colour-scheme/index']) ?>" class="lms-btn lms-btn-secondary" style="margin-left:8px;">
                    Cancel
                </a>
                <?= Html::beginForm(['colour-scheme/delete', 'id' => $model->id], 'post', ['style' => 'display:inline; margin-left:8px;']) ?>
                <?= Html::hiddenInput(Yii::$app->request->csrfParam, Yii::$app->request->csrfToken) ?>
                <button type="submit" class="lms-btn lms-btn-danger"
                        onclick="return confirm('Delete colour scheme \'<?= Html::encode($model->item) ?>\'?')">
                    <i class="fas fa-trash"></i> Delete
                </button>
                <?= Html::endForm() ?>
            </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="padding:24px 20px;">

            <div style="margin-bottom:16px; text-align:center;">
                <div id="preview-swatch" style="
                    width:80px; height:80px; border-radius:50%;
                    margin:0 auto 10px;
                    background:<?= Html::encode($model->colour) ?>;
                    border:3px solid #e2e8f0;
                    transition:background .2s;
                "></div>
                <code id="preview-hex" style="font-size:15px; color:#333;"><?= Html::encode($model->colour) ?></code>
            </div>

            <div style="background:#f8faff; border-radius:8px; padding:12px 14px; font-size:13px;">
                <div style="margin-bottom:6px;">
                    <span style="color:#888;">Type:</span>
                    <span id="preview-type" style="font-weight:600; margin-left:6px;"><?= Html::encode($model->getTypeLabel()) ?></span>
                </div>
                <div style="margin-bottom:6px;">
                    <span style="color:#888;">Item:</span>
                    <span id="preview-item" style="font-weight:600; margin-left:6px;"><?= Html::encode($model->item) ?></span>
                </div>
                <div>
                    <span style="color:#888;">Field:</span>
                    <span id="preview-field" style="color:#555; margin-left:6px;"><?= Html::encode($model->field) ?></span>
                </div>
            </div>

            <div style="margin-top:16px; display:flex; flex-direction:column; gap:8px;">
                <button type="button" id="preview-btn"
                        style="background:<?= Html::encode($model->colour) ?>; color:#fff; border:none; border-radius:6px;
                               padding:8px 16px; font-size:13px; cursor:default; transition:background .2s;">
                    Sample Button
                </button>
                <div id="preview-bar"
                     style="background:<?= Html::encode($model->colour) ?>; color:#fff; border-radius:6px;
                            padding:6px 12px; font-size:12px; transition:background .2s;">
                    Sample Header / Bar
                </div>
            </div>
        </div>
    </div>

</div>

<script>
(function () {
    var picker   = document.getElementById('inp-cs-picker');
    var hexInp   = document.getElementById('inp-cs-colour');
    var swatch   = document.getElementById('preview-swatch');
    var hexLbl   = document.getElementById('preview-hex');
    var btn      = document.getElementById('preview-btn');
    var bar      = document.getElementById('preview-bar');
    var typeInp  = document.getElementById('inp-cs-type');
    var itemInp  = document.getElementById('inp-cs-item');
    var fieldInp = document.getElementById('inp-cs-field');

    var typeLabels = <?= json_encode(ColourScheme::TYPE_LABELS) ?>;

    function applyColour(hex) {
        swatch.style.background = hex;
        btn.style.background    = hex;
        bar.style.background    = hex;
        hexLbl.textContent      = hex;
    }

    picker.addEventListener('input', function () {
        hexInp.value = this.value.toUpperCase();
        applyColour(this.value);
    });

    hexInp.addEventListener('input', function () {
        var val = this.value.trim();
        if (/^#[0-9A-Fa-f]{6}$/.test(val)) {
            picker.value = val;
            applyColour(val);
        }
    });

    typeInp.addEventListener('change', function () {
        document.getElementById('preview-type').textContent = typeLabels[this.value] || '—';
    });
    itemInp.addEventListener('input', function () {
        document.getElementById('preview-item').textContent = this.value.trim() || '—';
    });
    fieldInp.addEventListener('input', function () {
        document.getElementById('preview-field').textContent = this.value.trim() || '—';
    });

    applyColour(picker.value);
})();
</script>
