<?php

/** @var yii\web\View $this */
/** @var common\models\Plan $model */

use common\models\Plan;
use yii\bootstrap5\ActiveForm;
use yii\bootstrap5\Html;
use yii\helpers\Url;

$this->title = $model->isNewRecord ? 'New Plan' : 'Edit Plan: ' . $model->name;
?>

<div class="card">
    <div class="card-header bg-white fw-semibold"><?= $this->title ?></div>
    <div class="card-body">
        <?php $f = ActiveForm::begin() ?>
        <div class="row g-3">
            <div class="col-md-6">
                <?= $f->field($model, 'name')->textInput(['placeholder' => 'e.g. Weight Loss — 3 Months']) ?>
            </div>
            <div class="col-md-3">
                <?= $f->field($model, 'plan_type')->dropDownList(Plan::typeLabels(), [
                    'id'       => 'plan-type',
                    'onchange' => 'toggleDuration(this.value)',
                ]) ?>
            </div>
            <div class="col-md-3" id="duration-wrap"
                 style="display:<?= $model->plan_type === Plan::TYPE_SUBSCRIPTION ? 'block' : 'none' ?>">
                <?= $f->field($model, 'duration_months')->input('number', ['min' => 1, 'max' => 120, 'placeholder' => 'Months']) ?>
            </div>
            <div class="col-md-3">
                <?= $f->field($model, 'price')->input('number', ['min' => 0, 'step' => '0.01', 'placeholder' => '₹']) ?>
            </div>
            <div class="col-md-9">
                <?= $f->field($model, 'description')->textarea(['rows' => 2, 'placeholder' => 'What is included…']) ?>
            </div>
            <div class="col-md-3 d-flex align-items-end pb-3">
                <?= $f->field($model, 'is_active')->checkbox(['label' => 'Active']) ?>
            </div>
        </div>
        <div class="d-flex gap-2 mt-2">
            <?= Html::submitButton('<i class="bi bi-check-lg"></i> Save Plan', ['class' => 'btn btn-primary']) ?>
            <?= Html::a('Cancel', Url::to(['/plan/index']), ['class' => 'btn btn-outline-secondary']) ?>
        </div>
        <?php ActiveForm::end() ?>
    </div>
</div>

<script>
function toggleDuration(val) {
    document.getElementById('duration-wrap').style.display = val === 'subscription' ? 'block' : 'none';
}
</script>
