<?php
/**
 * Database Backup & Restore Page
 * This page allows users to take full DB backups and restore from ZIP files.
 * Location: site/pages/take_db_backup.php
 */

// $crud and constants are available via index.php context
?>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
            <div class="card shadow-lg border-0 rounded-4 overflow-hidden">
                <div class="card-header bg-primary text-white p-4">
                    <div class="d-flex align-items-center gap-3">
                        <i class="bi bi-database-fill-gear fs-2"></i>
                        <div>
                            <h2 class="mb-0 urdu-regular">ڈیٹا بیس بیک اپ اور ری سٹور</h2>
                            <p class="mb-0 opacity-75 urdu-regular fs-5">اپنے ڈیٹا کو محفوظ بنائیں اور ضرورت پڑنے پر
                                بحال کریں</p>
                        </div>
                    </div>
                </div>

                <div class="card-body p-4 p-md-5">
                    <!-- Backup Section -->
                    <div class="backup-section mb-5 p-4 bg-light rounded-4 border">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h3 class="urdu-regular mb-3">فل ڈیٹا بیس بیک اپ لیں</h3>
                                <p class="text-muted urdu-regular fs-5">تمام ٹیبلز اور ریکارڈز کو ایک SQL فائل میں محفوظ
                                    کر کے اسے ZIP فارمیٹ میں ڈاؤن لوڈ کریں۔</p>
                            </div>
                            <div class="col-md-4 text-center">
                                <button onclick="takeBackup()"
                                    class="btn btn-primary btn-lg rounded-pill px-4 shadow urdu-regular fs-4 w-100">
                                    <i class="bi bi-download me-2"></i>بیک اپ لیں
                                </button>
                            </div>
                        </div>
                    </div>

                    <hr class="my-5 opacity-10">

                    <!-- Restore Section -->
                    <div class="restore-section p-4 bg-light rounded-4 border">
                        <h3 class="urdu-regular mb-4 text-danger">ڈیٹا بیس ری سٹور کریں</h3>
                        <p class="text-muted urdu-regular fs-5 mb-4 border-end border-danger border-4 pe-3">
                            <i class="bi bi-exclamation-triangle-fill text-danger me-2"></i>
                            <strong>تنبہ:</strong> ری سٹور کرنے سے موجودہ تمام ڈیٹا ختم ہو جائے گا اور بیک اپ فائل والا
                            ڈیٹا محفوظ ہو جائے گا۔ اس عمل کو بہت احتیاط سے کریں۔
                        </p>

                        <div class="row g-3 align-items-end">
                            <div class="col-md-8">
                                <label for="backup_zip" class="form-label urdu-regular fs-5">بیک اپ فائل منتخب کریں
                                    (.zip)</label>
                                <input class="form-control form-control-lg rounded-3" type="file" id="backup_zip"
                                    accept=".zip">
                            </div>
                            <div class="col-md-4">
                                <button onclick="restoreDatabase()"
                                    class="btn btn-danger btn-lg rounded-pill px-4 shadow urdu-regular fs-4 w-100">
                                    <i class="bi bi-arrow-counterclockwise me-2"></i>ری سٹور کریں
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer bg-white border-0 p-4 text-center">
                    <a href="index.php?cmd=dashboard"
                        class="btn btn-outline-secondary rounded-pill px-4 urdu-regular fs-5">
                        <i class="bi bi-arrow-right me-2"></i>ڈیش بورڈ پر واپس جائیں
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Load JavaScript -->
<script src="assets/js/backup_and_restore.js"></script>

<style>
    .card {
        transition: transform 0.3s ease;
    }

    .backup-section:hover,
    .restore-section:hover {
        background-color: #fff !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        border-color: #dee2e6 !important;
    }

    /* Custom file input look */
    .form-control-lg {
        font-size: 1rem;
    }
</style>