<?php
/** @var yii\web\View $this */
/** @var app\models\Course[] $courses */
/** @var array  $courseMap  id → {code, name, actCount} */
/** @var int    $sourceId   pre-selected course id */
/** @var array  $errors */

use yii\helpers\Html;
use yii\helpers\Url;

$this->title = 'Clone Course — CLONE_COURSE_TRIGGER';
?>

<div class="page-title">
    <i class="fas fa-copy"></i> CLONE_COURSE_TRIGGER
    <a href="<?= Url::to(['courses/index']) ?>" class="lms-btn lms-btn-primary lms-btn-sm" style="margin-left:auto;">
        <i class="fas fa-arrow-left"></i> Back to Courses
    </a>
</div>

<!-- ===== Errors ===== -->
<?php if (!empty($errors)): ?>
<div class="lms-alert lms-alert-danger" style="margin-bottom:20px;">
    <i class="fas fa-exclamation-circle"></i>
    <ul style="margin:0; padding-left:20px;">
        <?php foreach ($errors as $e): ?>
            <li><?= Html::encode($e) ?></li>
        <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

<!-- ===== Clone Form ===== -->
<div style="display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start;">

    <div class="lms-card">
        <div class="lms-card-header"><i class="fas fa-copy"></i> Clone Settings</div>
        <div class="lms-card-body">
            <form method="post" action="<?= Url::to(['courses/clone']) ?>" id="clone-form">
                <input type="hidden" name="<?= Yii::$app->request->csrfParam ?>"
                       value="<?= Yii::$app->request->csrfToken ?>">

                <!-- Source Course -->
                <div class="lms-form-group" style="margin-bottom:20px;">
                    <label class="lms-label" style="font-weight:600;">
                        <i class="fas fa-book-open" style="color:#636e72;"></i>
                        Source Course <span style="color:#e74c3c;">*</span>
                    </label>
                    <select name="source_course_id" id="source_course_id" class="form-control"
                            style="padding-left:12px;" required>
                        <option value="">— Select source course —</option>
                        <?php foreach ($courses as $c): ?>
                        <option value="<?= $c->id ?>"
                                data-code="<?= Html::encode($c->course_code) ?>"
                                data-name="<?= Html::encode($c->course_name) ?>"
                                data-acts="<?= $courseMap[$c->id]['actCount'] ?? 0 ?>"
                                <?= $c->id === $sourceId ? 'selected' : '' ?>>
                            <?= Html::encode($c->course_code) ?> — <?= Html::encode($c->course_name) ?>
                        </option>
                        <?php endforeach; ?>
                    </select>
                    <div class="field-hint">The course whose record and activities will be duplicated.</div>
                </div>

                <!-- Source info panel -->
                <div id="source-info" class="clone-source-info">
                    <div style="font-size:12px; font-weight:600; color:#2980b9; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px;">
                        <i class="fas fa-info-circle"></i> Source Summary
                    </div>
                    <div style="display:flex; gap:24px; flex-wrap:wrap;">
                        <div class="clone-source-stat">
                            <i class="fas fa-code" style="color:#636e72;"></i>
                            <span id="src-code" style="font-weight:600;"></span>
                        </div>
                        <div class="clone-source-stat">
                            <i class="fas fa-list-ol" style="color:#2196f3;"></i>
                            <span id="src-acts" style="font-weight:600; color:#2196f3;"></span> activities to copy
                        </div>
                    </div>
                </div>

                <!-- Divider -->
                <div style="border-top:2px dashed #e2e8f0; margin:22px 0; position:relative;">
                    <span style="position:absolute; top:-11px; left:50%; transform:translateX(-50%);
                                 background:#fff; padding:0 12px; color:#aaa; font-size:12px;">
                        <i class="fas fa-arrow-down"></i> Clone to
                    </span>
                </div>

                <!-- New Course Name -->
                <div class="lms-form-group" style="margin-bottom:18px;">
                    <label class="lms-label" style="font-weight:600;">
                        <i class="fas fa-tag" style="color:#27ae60;"></i>
                        New Course Name <span style="color:#e74c3c;">*</span>
                    </label>
                    <input type="text" name="new_course_name" id="new_course_name"
                           class="form-control" style="padding-left:12px;"
                           value="<?= Html::encode(Yii::$app->request->post('new_course_name', '')) ?>"
                           placeholder="e.g. Copy of Introduction to PHP"
                           required>
                    <div class="field-hint">Human-readable name for the cloned course.</div>
                </div>

                <!-- New Course Code -->
                <div class="lms-form-group" style="margin-bottom:24px;">
                    <label class="lms-label" style="font-weight:600;">
                        <i class="fas fa-barcode" style="color:#e67e22;"></i>
                        New Course Code <span style="color:#e74c3c;">*</span>
                    </label>
                    <input type="text" name="new_course_code" id="new_course_code"
                           class="form-control" style="padding-left:12px; text-transform:uppercase; font-family:monospace;"
                           value="<?= Html::encode(Yii::$app->request->post('new_course_code', '')) ?>"
                           placeholder="e.g. CRS001_COPY"
                           required>
                    <div class="field-hint">Must be unique. Letters, numbers, hyphens and underscores only.</div>
                </div>

                <button type="submit" class="lms-btn lms-btn-success" style="width:100%; justify-content:center; padding:12px;">
                    <i class="fas fa-play-circle"></i>&nbsp; Run CLONE_COURSE_TRIGGER
                </button>
            </form>
        </div>
    </div>

    <!-- How it works -->
    <div>
        <div class="lms-card">
            <div class="lms-card-header" style="background:#f8f9fa;">
                <i class="fas fa-cogs"></i> How It Works
            </div>
            <div class="lms-card-body" style="font-size:13px; color:#555; line-height:1.8;">
                <ol style="padding-left:18px; margin:0;">
                    <li>Select the <strong>source course</strong> to duplicate.</li>
                    <li>Enter a unique <strong>course code</strong> and <strong>name</strong> for the clone.</li>
                    <li>The trigger copies the <strong>course record</strong> (name, category, description, duration).</li>
                    <li>All <strong>associated activities</strong> are duplicated in order.</li>
                    <li>The clone is created as <strong>Active</strong> and independent — changes to either won't affect the other.</li>
                </ol>
            </div>
        </div>

        <?php if (!empty($courses)): ?>
        <div class="lms-card" style="margin-top:16px;">
            <div class="lms-card-header" style="background:#f8f9fa; font-size:12px;">
                <i class="fas fa-book-open"></i> Available Source Courses
            </div>
            <div class="lms-card-body" style="padding:0;">
                <ul style="list-style:none; padding:0; margin:0;">
                    <?php foreach ($courses as $c): ?>
                    <li style="padding:8px 16px; border-bottom:1px solid #f5f5f5; display:flex; align-items:center; gap:10px; font-size:13px;">
                        <code style="background:#f0f4ff; padding:1px 6px; border-radius:3px; font-size:11px; flex-shrink:0;">
                            <?= Html::encode($c->course_code) ?>
                        </code>
                        <span style="flex:1; color:#555;"><?= Html::encode($c->course_name) ?></span>
                        <span class="lms-badge lms-badge-info" style="font-size:10px; flex-shrink:0;">
                            <?= $courseMap[$c->id]['actCount'] ?? 0 ?> act.
                        </span>
                        <a href="<?= Url::to(['courses/clone', 'id' => $c->id]) ?>"
                           style="color:#e67e22; font-size:11px; flex-shrink:0;" title="Select">
                            <i class="fas fa-hand-pointer"></i>
                        </a>
                    </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </div>
        <?php endif; ?>
    </div>
</div>

<script>
(function () {
    var srcSelect  = document.getElementById('source_course_id');
    var infoPanel  = document.getElementById('source-info');
    var srcCode    = document.getElementById('src-code');
    var srcActs    = document.getElementById('src-acts');
    var nameInput  = document.getElementById('new_course_name');
    var codeInput  = document.getElementById('new_course_code');

    function updatePanel() {
        var opt = srcSelect.options[srcSelect.selectedIndex];
        if (!opt || !opt.value) {
            infoPanel.classList.remove('visible');
            return;
        }
        var code = opt.getAttribute('data-code');
        var name = opt.getAttribute('data-name');
        var acts = opt.getAttribute('data-acts');

        srcCode.textContent = code;
        srcActs.textContent = acts;
        infoPanel.classList.add('visible');

        // Auto-fill suggestions only when fields are empty
        if (!nameInput.value) {
            nameInput.value = 'Copy of ' + name;
        }
        if (!codeInput.value) {
            codeInput.value = (code + '_COPY').toUpperCase();
        }
    }

    srcSelect.addEventListener('change', updatePanel);

    // Auto-uppercase the code input
    codeInput.addEventListener('input', function () {
        var pos = this.selectionStart;
        this.value = this.value.toUpperCase();
        this.setSelectionRange(pos, pos);
    });

    // Trigger on page load if pre-selected
    if (srcSelect.value) updatePanel();
})();
</script>
