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

use yii\helpers\Html;
use yii\helpers\Url;
use yii\widgets\ActiveForm;

$this->title = 'New Type';
?>

<div class="page-title">
    <i class="fas fa-layer-group"></i> New Type
    <a href="<?= Url::to(['types/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 340px; gap:20px; align-items:start;">

    <!-- ===== Form ===== -->
    <div class="lms-card">
        <div class="lms-card-header"><i class="fas fa-plus-circle"></i> Type Details</div>
        <div class="lms-card-body">

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

            <div class="lms-form-group" style="margin-bottom:20px;">
                <?= $form->field($model, 'name', [
                        'options'  => ['tag' => false],
                        'template' => '<label class="lms-label" style="font-weight:600;">{label} <span style="color:#e74c3c;">*</span></label>{input}{error}',
                    ])
                    ->textInput([
                        'id'          => 'inp-type-name',
                        'class'       => 'form-control',
                        'placeholder' => 'e.g. pdf, mp4, docx',
                        'style'       => 'padding-left:14px;',
                        'autofocus'   => true,
                    ])
                ?>
                <div class="field-hint">Type name must be unique. Use lowercase file extensions or descriptive names.</div>
            </div>

            <div class="lms-form-group" style="margin-bottom:24px;">
                <?= $form->field($model, 'isActive', [
                        'options'  => ['tag' => false],
                        'template' => '<label class="lms-label" style="font-weight:600;">{label}</label>{input}{error}',
                    ])
                    ->dropDownList(
                        ['Y' => 'Active', 'N' => 'Inactive'],
                        ['class' => 'form-control', 'style' => 'padding-left:14px;']
                    )
                ?>
            </div>

            <div>
                <?= Html::submitButton(
                    '<i class="fas fa-save"></i> Save Type',
                    ['class' => 'lms-btn lms-btn-success']
                ) ?>
                <a href="<?= Url::to(['types/index']) ?>" class="lms-btn lms-btn-secondary" style="margin-left:8px;">
                    Cancel
                </a>
            </div>

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

    <!-- ===== Live preview + tips ===== -->
    <div>
        <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="type-preview" class="type-name-badge" style="font-size:15px; padding:8px 18px;">
                    <i class="fas fa-file-alt" style="color:#636e72;"></i>
                    <span id="preview-text">type name</span>
                </span>
            </div>
        </div>

        <div class="lms-card" style="margin-top:16px;">
            <div class="lms-card-header" style="background:#f8f9fa; font-size:12px;">
                <i class="fas fa-lightbulb"></i> Common Types
            </div>
            <div class="lms-card-body" style="padding:14px 16px;">
                <div style="display:flex; flex-wrap:wrap; gap:7px;">
                    <?php foreach (['pdf','jpeg','png','mp4','docx','xlsx','pptx','zip','mp3','txt'] as $t): ?>
                    <button type="button" class="type-quick-btn" onclick="fillName('<?= $t ?>')"
                            style="background:#f0f4ff; border:1px solid #d0dcf0; border-radius:6px;
                                   padding:4px 10px; font-size:12px; cursor:pointer; color:#0f3460;">
                        <?= $t ?>
                    </button>
                    <?php endforeach; ?>
                </div>
                <div class="field-hint" style="margin-top:10px;">Click to auto-fill the name field.</div>
            </div>
        </div>
    </div>

</div>

<script>
(function () {
    var inp     = document.getElementById('inp-type-name');
    var preview = document.getElementById('preview-text');

    inp.addEventListener('input', function () {
        preview.textContent = this.value.trim() || 'type name';
    });

    window.fillName = function (val) {
        inp.value = val;
        preview.textContent = val;
        inp.focus();
    };
})();
</script>
