<?php // Christo Lochenberg Developments | info@christodev.co.za | +27 61 523 9126 ?>
<div id="system" class="tab-content <?php echo $activeTab === 'system' ? '' : 'hidden'; ?> space-y-6">
    
    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-2">
        <div class="mb-4 sm:mb-0">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">System Diagnostics</h2>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Real-time environment health and version control.</p>
        </div>
        <button type="button" onclick="submitDiagnostics()" class="w-full sm:w-auto bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2.5 px-6 rounded-lg shadow-sm transition-all focus:ring-4 focus:ring-indigo-500/50 text-sm flex items-center justify-center">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
            Send Report to Support
        </button>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
        <div class="p-6 flex flex-col sm:flex-row sm:items-center justify-between">
            <div class="mb-4 sm:mb-0">
                <span class="block text-sm font-bold text-gray-700 dark:text-gray-300">Allow Developer Support Access</span>
                <span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block max-w-2xl">
                    Allow the developer to log in to the system for support and troubleshooting purposes. If this is disabled, no access can be obtained to the system by the developer in any way.
                </span>
            </div>
            <label class="relative inline-flex items-center cursor-pointer flex-shrink-0 sm:ml-4">
                <input type="checkbox" name="allow_developer_support" value="1" class="sr-only peer" <?php echo (isset($data['settings']['allow_developer_support']) && $data['settings']['allow_developer_support'] == '1') ? 'checked' : ''; ?>>
                <div class="w-11 h-6 bg-gray-300 peer-focus:outline-none rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-400 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
            </label>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
            <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40">
                <h3 class="text-sm font-bold text-gray-800 dark:text-gray-200 uppercase tracking-wider">Software Versions</h3>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex justify-between items-center border-b border-gray-100 dark:border-gray-700/50 pb-3">
                    <div class="flex items-center">
                        <svg class="w-4 h-4 text-gray-400 dark:text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6z"></path></svg>
                        <span class="text-sm text-gray-600 dark:text-gray-400 font-medium">App Framework</span>
                    </div>
                    <span class="text-[10px] text-gray-900 dark:text-white font-bold font-mono bg-gray-100 dark:bg-gray-900/50 px-2 py-1 rounded border border-gray-200 dark:border-gray-700/50 uppercase tracking-widest">v<?php echo htmlspecialchars($data['system']['app_version']); ?></span>
                </div>
                <div class="flex justify-between items-center border-b border-gray-100 dark:border-gray-700/50 pb-3">
                    <div class="flex items-center">
                        <svg class="w-4 h-4 text-gray-400 dark:text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
                        <span class="text-sm text-gray-600 dark:text-gray-400 font-medium">Database Schema</span>
                    </div>
                    <span class="text-[10px] text-gray-900 dark:text-white font-bold font-mono bg-gray-100 dark:bg-gray-900/50 px-2 py-1 rounded border border-gray-200 dark:border-gray-700/50 uppercase tracking-widest">v<?php echo htmlspecialchars((string)($data['system']['db_version'] ?? '0')); ?></span>
                </div>
                <div class="flex justify-between items-center border-b border-gray-100 dark:border-gray-700/50 pb-3">
                    <div class="flex items-center">
                        <svg class="w-4 h-4 text-gray-400 dark:text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
                        <span class="text-sm text-gray-600 dark:text-gray-400 font-medium">PHP Engine</span>
                    </div>
                    <span class="text-xs text-gray-900 dark:text-white font-bold font-mono bg-gray-100 dark:bg-gray-900/50 px-2 py-1 rounded border border-gray-200 dark:border-gray-700/50"><?php echo htmlspecialchars($data['system']['php_version']); ?></span>
                </div>
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <svg class="w-4 h-4 text-gray-400 dark:text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path></svg>
                        <span class="text-sm text-gray-600 dark:text-gray-400 font-medium">MySQL Engine</span>
                    </div>
                    <span class="text-xs text-gray-900 dark:text-white font-bold font-mono bg-gray-100 dark:bg-gray-900/50 px-2 py-1 rounded border border-gray-200 dark:border-gray-700/50"><?php echo htmlspecialchars($data['system']['mysql_version']); ?></span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
            <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40">
                <h3 class="text-sm font-bold text-gray-800 dark:text-gray-200 uppercase tracking-wider">Required Extensions</h3>
            </div>
            <div class="p-6 grid grid-cols-2 gap-y-4 gap-x-4">
                <?php foreach($data['system']['extensions'] as $ext => $isLoaded): ?>
                    <div class="flex items-center">
                        <?php if($isLoaded): ?>
                            <svg class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                        <?php else: ?>
                            <svg class="w-4 h-4 text-red-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"></path></svg>
                        <?php endif; ?>
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300 font-mono"><?php echo htmlspecialchars($ext); ?></span>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
    
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
        <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40">
            <h3 class="text-sm font-bold text-gray-800 dark:text-gray-200 uppercase tracking-wider">Environment Profile</h3>
        </div>
        <div class="p-6 space-y-4">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b border-gray-100 dark:border-gray-700/50 pb-4">
                <div class="flex items-center mb-2 sm:mb-0">
                    <svg class="w-4 h-4 text-gray-400 dark:text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path></svg>
                    <span class="text-sm text-gray-600 dark:text-gray-400 font-medium">Active License Key</span>
                </div>
                <span class="px-4 py-2 bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-700/50 font-mono text-sm font-bold text-gray-900 dark:text-white uppercase tracking-widest break-all">
                    <?php echo htmlspecialchars($data['system']['license_key']); ?>
                </span>
            </div>
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
                <div class="flex items-center mb-2 sm:mb-0">
                    <svg class="w-4 h-4 text-gray-400 dark:text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path></svg>
                    <span class="text-sm text-gray-600 dark:text-gray-400 font-medium">Server Software</span>
                </div>
                <span class="text-xs text-gray-900 dark:text-white font-mono font-bold bg-gray-50 dark:bg-gray-900/50 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700/50">
                    <?php echo htmlspecialchars($data['system']['server_software']); ?>
                </span>
            </div>
        </div>
    </div>
</div>