<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Requirements</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
</head>
<body class="bg-gray-100 text-gray-800">
    <div class="container mx-auto p-4">
        <h1 class="text-3xl font-bold mb-6 text-center">System Requirements</h1>
        <div class="overflow-x-auto">
            <table class="min-w-full bg-white shadow-md rounded-lg overflow-hidden">
                <thead class="bg-gray-200">
                    <tr>
                        <th class="py-3 px-4 text-left">Requirement</th>
                        <th class="py-3 px-4 text-left">Type</th>
                        <th class="py-3 px-4 text-left">Status</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $requirements = [
                        'PHP >= 8.1' => [
                            'status' => version_compare(PHP_VERSION, '8.1', '>='),
                            'type' => 'required',
                        ],
                        'OpenSSL Extension' => [
                            'status' => extension_loaded('openssl'),
                            'type' => 'required',
                        ],
                        'PDO Extension' => [
                            'status' => extension_loaded('pdo'),
                            'type' => 'required',
                        ],
                        'Mbstring Extension' => [
                            'status' => extension_loaded('mbstring'),
                            'type' => 'required',
                        ],
                        'Zip Extension' => [
                            'status' => extension_loaded('zip'),
                            'type' => 'required',
                        ],
                        'MySQLi Extension' => [
                            'status' => extension_loaded('mysqli'),
                            'type' => 'required',
                        ],
                        'Tokenizer Extension' => [
                            'status' => extension_loaded('tokenizer'),
                            'type' => 'optional',
                        ],
                        'Imagick Extension' => [
                            'status' => extension_loaded('Imagick'),
                            'type' => 'optional',
                        ],
                        'XML Extension' => [
                            'status' => extension_loaded('xml'),
                            'type' => 'optional',
                        ],
                        'Ioncube Loader' => [
                            'status' => extension_loaded('ionCube Loader'),
                            'type' => 'optional',
                        ],
                    ];

                    $required_pass = true;

                    foreach ($requirements as $requirement => $info) {
                        if ($info['type'] === 'required' && !$info['status']) {
                            $required_pass = false;
                        }
                        echo "<tr>
                                <td class='py-3 px-4 border-b'>{$requirement}</td>
                                <td class='py-3 px-4 border-b " . ($info['type'] === 'optional' ? 'opacity-50' : 'font-bold text-black') . "'>" . ucfirst($info['type']) . "</td>
                                <td class='py-3 px-4 border-b'>
                                    <span class='" . ($info['status'] ? 'text-green-500' : 'text-red-500') . " font-bold'><i class='fas " . ($info['status'] ? 'fa-check' : 'fa-times') . "'></i> " . ($info['status'] ? 'Pass' : 'Fail') . "</span>
                                </td>
                            </tr>";
                    }
                    ?>
                </tbody>
            </table>
        </div>

        <div class="mt-6 text-center">
            <?php if ($required_pass): ?>
                <p class="text-green-500 font-bold">All required requirements are satisfied. You can proceed to the next step.</p>
                <a class="inline-block bg-blue-500 text-white py-2 px-4 rounded mt-4 hover:bg-blue-600" href="?step=3">Next Step</a>
                <?php else: ?>
                    <p class="text-red-500 font-bold">Some required requirements are not satisfied. Please fix them before proceeding.</p>
                <?php endif; ?>
                <a class="inline-block bg-gray-500 text-white py-2 px-4 rounded mt-4 hover:bg-gray-600" href="../">Back</a>
        </div>
    </div>
</body>
</html>