<?php // Christo Lochenberg Developments | info@christodev.co.za | +27 61 523 9126 ?>
<div id="general" class="tab-content <?php echo $activeTab === 'general' ? '' : 'hidden'; ?> space-y-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 flex items-center">
            <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
            <h3 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider">Company Details</h3>
        </div>
        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="md:col-span-2">
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Company Name *</label>
                <input type="text" name="app_name" value="<?php echo htmlspecialchars($data['settings']['app_name'] ?? ''); ?>" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">This name appears on emails, PDFs, and browser tabs.</p>
            </div>
            <div class="md:col-span-2">
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Company Email *</label>
                <input type="email" name="contact_email" value="<?php echo htmlspecialchars($data['settings']['contact_email'] ?? ''); ?>" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Used as the primary point of contact for clients.</p>
            </div>
            <div>
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Landline Number</label>
                <input type="text" name="contact_landline" value="<?php echo htmlspecialchars($data['settings']['contact_landline'] ?? ''); ?>" placeholder="012 345 6789" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
            </div>
            <div>
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Mobile Number</label>
                <input type="text" name="contact_mobile" value="<?php echo htmlspecialchars($data['settings']['contact_mobile'] ?? ''); ?>" placeholder="+27 61 523 9126" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
            </div>
            
            <div class="md:col-span-2 border-t border-gray-200 dark:border-gray-700/50 pt-6 mt-2">
                <h4 class="text-sm font-bold text-gray-900 dark:text-white mb-4 uppercase tracking-wider">Company Address</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Street Address</label>
                        <input type="text" name="contact_address_street" value="<?php echo htmlspecialchars($data['settings']['contact_address_street'] ?? ''); ?>" placeholder="66 Dr Beyers Naude Drive" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Suburb</label>
                        <input type="text" name="contact_address_suburb" value="<?php echo htmlspecialchars($data['settings']['contact_address_suburb'] ?? ''); ?>" placeholder="Burgersdorp" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">City</label>
                        <input type="text" name="contact_address_city" value="<?php echo htmlspecialchars($data['settings']['contact_address_city'] ?? ''); ?>" placeholder="Lichtenburg" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">State / Province</label>
                        <input type="text" name="contact_address_state" value="<?php echo htmlspecialchars($data['settings']['contact_address_state'] ?? ''); ?>" placeholder="North West" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Postal / Zip Code</label>
                        <input type="text" name="contact_address_zip" value="<?php echo htmlspecialchars($data['settings']['contact_address_zip'] ?? ''); ?>" placeholder="2740" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Country</label>
                        <input type="text" name="contact_address_country" value="<?php echo htmlspecialchars($data['settings']['contact_address_country'] ?? ''); ?>" placeholder="South Africa" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    </div>
                </div>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-3">This address will appear on your public facing pages, quotes, and tax invoices.</p>
            </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 flex items-center">
            <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            <h3 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider">SEO / Metadata</h3>
        </div>
        <div class="p-6 space-y-6">
            <div>
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Meta Description</label>
                <textarea name="seo_description" rows="3" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none resize-y transition-colors"><?php echo htmlspecialchars($data['settings']['seo_description'] ?? ''); ?></textarea>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">A short description of your app for search engines.</p>
            </div>
            <div>
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">SEO Keywords</label>
                <input type="text" name="seo_keywords" value="<?php echo htmlspecialchars($data['settings']['seo_keywords'] ?? ''); ?>" placeholder="software, development, accounting, saas" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Comma separated list of keywords.</p>
            </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 flex items-center">
            <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
            <h3 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider">Access Security</h3>
        </div>
        <div class="p-6 space-y-5">
            <div class="flex items-center justify-between p-5 border border-gray-200 dark:border-gray-700/50 rounded-xl bg-gray-50 dark:bg-gray-900/30">
                <div>
                    <span class="block text-sm font-bold text-gray-700 dark:text-gray-300">Allow Frontend Registration</span>
                    <span class="text-xs text-gray-500 dark:text-gray-400">If disabled, new users can only be added by an administrator.</span>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" name="allow_registration" value="1" class="sr-only peer" <?php echo (isset($data['settings']['allow_registration']) && $data['settings']['allow_registration'] == '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 class="flex items-center justify-between p-5 border border-red-200 dark:border-red-900/30 rounded-xl bg-red-50 dark:bg-red-900/10">
                <div>
                    <span class="block text-sm font-bold text-red-700 dark:text-red-400">System Maintenance Mode</span>
                    <span class="text-xs text-red-500 dark:text-red-500/80">WARNING: Locks out all non-admin users instantly.</span>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" name="maintenance_mode" value="1" class="sr-only peer" <?php echo (isset($data['settings']['maintenance_mode']) && $data['settings']['maintenance_mode'] == '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-red-500"></div>
                </label>
            </div>
        </div>
    </div>
</div>