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

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

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

<div class="page-title">
    <i class="fas fa-building"></i> New Tenant
    <a href="<?= Url::to(['tenant/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 300px; gap:20px; align-items:start;">

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

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

            <!-- Tenant Name -->
            <div class="lms-form-group" style="margin-bottom:18px;">
                <?= $form->field($model, 'tenant_name', [
                        'options'  => ['tag' => false],
                        'template' => '<label class="lms-label" style="font-weight:600;">{label} <span style="color:#e74c3c;">*</span></label>{input}{error}',
                    ])
                    ->textInput([
                        'class'       => 'form-control',
                        'placeholder' => 'e.g. Acme Corporation',
                        'style'       => 'padding-left:14px;',
                        'autofocus'   => true,
                    ])
                ?>
            </div>

            <!-- Phone + Email (two columns) -->
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px;">
                <div>
                    <?= $form->field($model, 'tenant_phone', [
                            'options'  => ['tag' => false],
                            'template' => '<label class="lms-label" style="font-weight:600;">{label}</label>{input}{error}',
                        ])
                        ->textInput([
                            'class'       => 'form-control',
                            'placeholder' => '+60 12-345 6789',
                            'style'       => 'padding-left:14px;',
                        ])
                    ?>
                </div>
                <div>
                    <?= $form->field($model, 'tenant_email', [
                            'options'  => ['tag' => false],
                            'template' => '<label class="lms-label" style="font-weight:600;">{label}</label>{input}{error}',
                        ])
                        ->textInput([
                            'class'       => 'form-control',
                            'placeholder' => 'info@company.com',
                            'style'       => 'padding-left:14px;',
                        ])
                    ?>
                </div>
            </div>

            <!-- Address -->
            <div class="lms-form-group" style="margin-bottom:18px;">
                <?= $form->field($model, 'tenant_addess', [
                        'options'  => ['tag' => false],
                        'template' => '<label class="lms-label" style="font-weight:600;">{label}</label>{input}{error}',
                    ])
                    ->textarea([
                        'class'       => 'form-control',
                        'rows'        => 3,
                        'placeholder' => 'Full address…',
                        'style'       => 'padding:10px 14px; resize:vertical;',
                    ])
                ?>
            </div>

            <!-- Notes -->
            <div class="lms-form-group" style="margin-bottom:18px;">
                <?= $form->field($model, 'tenant_notes', [
                        'options'  => ['tag' => false],
                        'template' => '<label class="lms-label" style="font-weight:600;">{label}</label>{input}{error}',
                    ])
                    ->textarea([
                        'class'   => 'form-control',
                        'rows'    => 3,
                        'style'   => 'padding:10px 14px; resize:vertical;',
                    ])
                ?>
            </div>

            <!-- Logo Upload -->
            <div class="lms-form-group" style="margin-bottom:18px;">
                <?= $form->field($model, 'logoFile', [
                        'options'  => ['tag' => false],
                        'template' => '<label class="lms-label" style="font-weight:600;">{label}</label>{input}{error}',
                    ])
                    ->fileInput(['class' => 'form-control', 'id' => 'logo-file-input', 'accept' => 'image/*'])
                ?>
                <div class="field-hint">PNG, JPG, GIF, SVG or WEBP — max 2 MB.</div>
            </div>

            <!-- Status -->
            <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 Tenant', ['class' => 'lms-btn lms-btn-success']) ?>
                <a href="<?= Url::to(['tenant/index']) ?>" class="lms-btn lms-btn-secondary" style="margin-left:8px;">Cancel</a>
            </div>

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

    <!-- ===== Preview panel ===== -->
    <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:24px 16px;">
            <div id="logo-preview-wrap" style="margin-bottom:14px;">
                <div id="logo-placeholder" class="tenant-logo-preview-placeholder">
                    <i class="fas fa-building" style="font-size:32px; color:#c8d0e0;"></i>
                </div>
                <img id="logo-preview-img" src="" alt="Logo preview"
                     class="tenant-logo-preview-img" style="display:none;">
            </div>
            <div id="preview-name" style="font-size:16px; font-weight:700; color:#0f3460;">Tenant Name</div>
            <div id="preview-email" style="font-size:12px; color:#888; margin-top:4px;"></div>
            <div id="preview-phone" style="font-size:12px; color:#888;"></div>
        </div>
    </div>

</div>

<script>
(function () {
    var nameInp  = document.querySelector('[name="Tenant[tenant_name]"]');
    var emailInp = document.querySelector('[name="Tenant[tenant_email]"]');
    var phoneInp = document.querySelector('[name="Tenant[tenant_phone]"]');
    var fileInp  = document.getElementById('logo-file-input');

    var prevName  = document.getElementById('preview-name');
    var prevEmail = document.getElementById('preview-email');
    var prevPhone = document.getElementById('preview-phone');
    var prevImg   = document.getElementById('logo-preview-img');
    var prevPh    = document.getElementById('logo-placeholder');

    if (nameInp)  nameInp.addEventListener('input',  function () { prevName.textContent  = this.value.trim() || 'Tenant Name'; });
    if (emailInp) emailInp.addEventListener('input', function () { prevEmail.textContent = this.value.trim(); });
    if (phoneInp) phoneInp.addEventListener('input', function () { prevPhone.textContent = this.value.trim(); });

    if (fileInp) {
        fileInp.addEventListener('change', function () {
            var file = this.files[0];
            if (file && file.type.startsWith('image/')) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    prevImg.src = e.target.result;
                    prevImg.style.display = 'block';
                    prevPh.style.display  = 'none';
                };
                reader.readAsDataURL(file);
            } else {
                prevImg.style.display = 'none';
                prevPh.style.display  = 'flex';
            }
        });
    }
})();
</script>
