<?php
require_once 'web_constant.php';

function backup_tables($host, $user, $pass, $databases, $backupDir = 'backups')
{
    if (!is_dir($backupDir)) {
        mkdir($backupDir, 0777, true);
    }

    if (!is_array($databases)) {
        $databases = [$databases];
    }

    // Add only scoped CSS (no full-page centering)
    echo '
    <style>
        .backup-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 300px;
            margin: 50px auto;
        }
        .backup-card {
            background: #fff;
            padding: 25px 35px;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            text-align: center;
            max-width: 400px;
            width: 100%;
            animation: fadeIn 0.5s ease-in-out;
        }
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        .message {
            font-size: 17px;
            color: #333;
        }
        .success {
            color: #2ecc71;
            font-weight: 600;
        }
        .fail {
            color: #e74c3c;
            font-weight: 600;
        }
        .file-path {
            font-size: 13px;
            color: #555;
            background: #f8f8f8;
            padding: 6px 10px;
            border-radius: 6px;
            display: inline-block;
            margin-top: 10px;
            word-break: break-all;
        }
    </style>

    <div class="backup-container">
        <div class="backup-card" id="backupCard">
            <!--<div class="spinner"></div>
            <div class="message">🕒 Please wait... Taking database backup.</div>-->
        </div>
    </div>
    ';

    // Flush output immediately
    ob_flush();
    flush();

    // Backup process
    foreach ($databases as $db) {
        $filename = $backupDir . '/' . $db . '_' . date('Y-m-d_H-i-s') . '.sql';
		$mysqldumpPath = web_constant::$mysqldumpPath;
        $command = "\"{$mysqldumpPath}\" --user={$user} --password={$pass} --host={$host} {$db} > \"{$filename}\"";

        system($command, $output);

        // Replace spinner with result message
        echo '<script>
            const card = document.getElementById("backupCard");
            card.innerHTML = "";
        </script>';

        if (file_exists($filename) && filesize($filename) > 0) {
            echo '<script>
                card.innerHTML = `
                    <div class="message success">✅ Backup successful for database <b>' . $db . '</b></div>
                    <div class="file-path">📁 ' . $filename . '</div>
                `;
            </script>';
        } else {
            echo '<script>
                card.innerHTML = `
                    <div class="message fail">❌ Backup failed for database <b>' . $db . '</b></div>
                `;
            </script>';
        }

        ob_flush();
        flush();
    }
}
?>
