<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="row justify-content-center">
    <div class="col-12 col-lg-10">
        <!-- Header Card dengan Gradient Premium -->
        <div class="card border-0 shadow-sm overflow-hidden mb-4" style="border-radius: 16px;">
            <div class="p-4 p-md-5 text-white" style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <span class="badge bg-white bg-opacity-20 text-white mb-2 px-3 py-2" style="border-radius: 30px; backdrop-filter: blur(5px);">
                            <i class="bi bi-shield-fill-check me-1"></i> System Update Center
                        </span>
                        <h2 class="fw-bold mb-1">Pusat Pembaruan Aplikasi</h2>
                        <p class="mb-0 text-white-50">Kelola dan perbarui sistem SIMAK Anda secara aman dan instan.</p>
                    </div>
                    <div class="col-md-4 text-md-end mt-3 mt-md-0">
                        <i class="bi bi-cloud-arrow-down-fill text-white-50" style="font-size: 5rem; opacity: 0.35;"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <!-- Status Versi Saat Ini -->
            <div class="col-md-12">
                <div class="card border-0 shadow-sm" style="border-radius: 14px;">
                    <div class="card-header bg-transparent border-bottom-0 pt-4 px-4 pb-0">
                        <h6 class="fw-bold text-muted mb-0"><i class="bi bi-hdd-network text-primary me-2"></i>Versi Terpasang</h6>
                    </div>
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <span class="fs-4 fw-bold text-dark">Versi Sistem:</span>
                            <code class="fs-5 bg-light px-2 py-1 text-primary rounded" style="font-family: monospace;">
                                v<?= !empty($currentVersion['version']) ? esc($currentVersion['version']) : '1.0.0' ?>
                            </code>
                        </div>

                        <table class="table table-borderless table-sm small text-muted mb-0">
                            <tr>
                                <td style="width: 120px;" class="py-1 fw-semibold">Tanggal Rilis</td>
                                <td style="width: 10px;" class="py-1">:</td>
                                <td class="py-1">
                                    <?= !empty($currentVersion['release_date']) ? date('d F Y', strtotime($currentVersion['release_date'])) : 'Tidak diketahui' ?>
                                </td>
                            </tr>
                            <tr>
                                <td class="py-1 fw-semibold">Catatan Rilis</td>
                                <td class="py-1">:</td>
                                <td class="py-1">
                                    <span class="text-dark"><?= esc($currentVersion['changelog']) ?></span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pembaruan Manual (Offline) -->
        <div class="card border-0 shadow-sm mt-4" style="border-radius: 14px;">
            <div class="card-header bg-transparent border-bottom-0 pt-4 px-4 pb-0">
                <h6 class="fw-bold text-muted mb-0"><i class="bi bi-file-earmark-zip text-warning me-2"></i>Pembaruan Manual (Offline)</h6>
            </div>
            <div class="card-body p-4">
                <p class="text-muted small">Jika server tidak terhubung ke internet, Anda dapat mengunggah file ZIP update secara manual di sini.</p>
                <form action="/updater/offline" method="POST" enctype="multipart/form-data" id="offlineUpdateForm">
                    <?= csrf_field() ?>
                    <div class="row align-items-end g-3">
                        <div class="col-md-5">
                            <label class="form-label small fw-bold text-muted">File ZIP Update</label>
                            <input type="file" name="zip_file" class="form-control" accept=".zip" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold text-muted">Versi Manual (Opsional)</label>
                            <input type="text" name="manual_version" class="form-control" placeholder="Contoh: 1.1.0">
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-warning w-100" style="border-radius: 8px;">
                                <i class="bi bi-upload me-1"></i> Upload & Perbarui
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Peringatan & Catatan Penting -->
        <div class="alert alert-warning border-0 shadow-sm mt-4 p-4 d-flex gap-3" style="border-radius: 12px; background-color: #fff9db;">
            <i class="bi bi-exclamation-octagon-fill text-warning fs-3"></i>
            <div>
                <h6 class="fw-bold text-warning-emphasis mb-1">Catatan Penting Sebelum Update:</h6>
                <ul class="mb-0 ps-3 small text-muted" style="line-height: 1.6;">
                    <li><strong>Cadangkan Database</strong>: Meskipun sistem melakukan migrasi secara aman, mencadangkan database Anda melalui PhpMyAdmin sebelum memperbarui adalah langkah preventif yang sangat dianjurkan.</li>
                    <li>Jangan matikan server atau menutup browser saat proses pembaruan sedang berlangsung.</li>
                    <li>Folder unggahan berkas siswa (`writable/uploads`), sesi (`writable/session`), dan berkas konfigurasi rahasia (`.env`) Anda **tidak akan ditimpa** atau terhapus selama pembaruan.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script>
$(document).ready(function() {
    // Event listener offline update form submit
    $('#offlineUpdateForm').on('submit', function() {
        Swal.fire({
            title: 'Memproses Pembaruan Offline...',
            html: '<p>Mengunggah file ZIP, mengekstrak, menimpa berkas kode, dan menjalankan migrasi database.</p><p class="text-danger small"><strong>Mohon tunggu, jangan tutup halaman ini.</strong></p>',
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
    });
});
</script>
<?= $this->endSection() ?>
