<?= $this->extend('layout/admin') ?>
<?= $this->section('content') ?>

<a href="<?= site_url('elearning/task') ?>" class="text-muted mb-3 d-block">
    ← Kembali ke daftar tugas
</a>

<div class="row">

    <!-- DETAIL TUGAS -->
    <div class="col-md-7">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white d-flex justify-content-between">
                <b><?= esc($task['judul']) ?></b>
                <span class="badge badge-<?= $task['badge'] ?>">
                    <?= $task['status'] ?>
                </span>
            </div>

            <div class="card-body">
                <p><b>Mata Pelajaran:</b> <?= esc($task['mapel']) ?></p>
                <p><b>Kelas:</b> <?= esc($task['kelas']) ?></p>
                <p><b>Guru:</b> <?= esc($task['guru']) ?></p>
                <?php if ($task['status'] === 'Belum'): ?>

                    <div class="countdown alert alert-warning text-center fw-bold">
                        ⏳ Menghitung waktu...
                    </div>

                <?php endif ?>
                <hr>

                <p><?= esc($task['deskripsi']) ?></p>

                <?php if ($task['file_soal']): ?>
                    <a href="<?= base_url('uploads/soal/' . $task['file_soal']) ?>"
                        class="btn btn-outline-secondary btn-sm">
                        📎 Download Soal
                    </a>
                <?php endif ?>
            </div>
        </div>
    </div>

    <!-- UPLOAD JAWABAN -->
    <div class="col-md-5">
        <div class="card shadow-sm">
            <div class="card-header bg-success text-white">
                <b>Upload Jawaban</b>
            </div>

            <div class="card-body">

                <?php if ($task['status'] === 'Sudah'): ?>
                    <div class="alert alert-success text-center">
                        ✅ Jawaban sudah dikumpulkan
                    </div>

                <?php elseif ($task['status'] === 'Telat'): ?>
                    <div class="alert alert-danger text-center">
                        ⛔ Deadline telah berakhir
                    </div>

                <?php else: ?>
                    <form method="post" action="<?= site_url('elearning/task/submit/' . $task['id']) ?>"
                        enctype="multipart/form-data">

                        <?= csrf_field() ?>

                        <input type="file" name="file_jawaban" class="form-control mb-3" required>

                        <button class="btn btn-success w-100">
                            Kirim Jawaban
                        </button>
                    </form>
                <?php endif ?>

                <p>
                    <b>Deadline:</b>
                    <span class="text-danger fw-bold">
                        <?= date('d M Y H:i', strtotime($task['deadline'])) ?>
                    </span>
                </p>

                <?php if ($task['is_active']): ?>
                    <div class="countdown alert alert-warning text-center fw-bold"
                        data-deadline="<?= esc($task['deadline']) ?>">
                        ⏳ Menghitung waktu...
                    </div>
                <?php endif ?>
            </div>
        </div>
    </div>

</div>

<script>
    document.querySelectorAll('.countdown').forEach(el => {
        const deadline = new Date(el.dataset.deadline).getTime();

        setInterval(() => {
            const now = new Date().getTime();
            const diff = deadline - now;

            if (diff <= 0) {
                el.className = "alert alert-danger text-center fw-bold";
                el.innerHTML = "⛔ Deadline telah berakhir";
                return;
            }

            const h = Math.floor(diff / (1000 * 60 * 60));
            const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const s = Math.floor((diff % (1000 * 60)) / 1000);

            el.innerHTML = `⏳ Sisa waktu: ${h}j ${m}m ${s}d`;
        }, 1000);
    });
</script>

<?= $this->endSection() ?>