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

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

$this->title = 'New Enrolled Status';
?>

<div class="page-title">
    <i class="fas fa-list-ol"></i> New Enrolled Status
    <a href="<?= Url::to(['enrolled-status/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">
        <div class="lms-card-header"><i class="fas fa-plus-circle"></i> Status Details</div>
        <div class="lms-card-body">

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

            <div class="lms-form-group" style="margin-bottom:24px;">
                <?= $form->field($model, 'status_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-status-name',
                        'class'       => 'form-control',
                        'placeholder' => 'e.g. Enrolled, Completed, Withdrawn',
                        'style'       => 'padding-left:14px;',
                        'autofocus'   => true,
                    ])
                ?>
                <div class="field-hint">Status name must be unique.</div>
            </div>

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

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

    <!-- 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="status-preview" style="
                display:inline-flex; align-items:center; gap:8px;
                background:#eaf4ff; border:1px solid #b3d7f5;
                border-radius:20px; padding:6px 18px;
                font-size:14px; font-weight:600; color:#1565c0;">
                <i class="fas fa-circle" style="font-size:8px;"></i>
                <span id="preview-text">Status Name</span>
            </span>
        </div>
    </div>

</div>

<script>
(function () {
    var inp     = document.getElementById('inp-status-name');
    var preview = document.getElementById('preview-text');
    inp.addEventListener('input', function () {
        preview.textContent = this.value.trim() || 'Status Name';
    });
})();
</script>
