<?php require_once __DIR__ . '/layout.php'; ?>

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
    <div>
        <h3 style="margin: 0 0 0.5rem; color: white;">Company Settings</h3>
        <p style="color: var(--text-muted); margin: 0;">Manage features such as Email and WhatsApp alerts for each tenant.</p>
    </div>
</div>

<div class="card" style="padding: 2rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; backdrop-filter: blur(10px);">
    <div class="responsive-table-container" style="overflow-x: auto; border: none;">
        <table class="data-table" style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr>
                    <th style="color: var(--text-muted);">Company Name</th>
                    <th style="color: var(--text-muted);">Email</th>
                    <th style="color: var(--text-muted); text-align: center;">Email Alerts Feature</th>
                    <th style="color: var(--text-muted); text-align: center;">WhatsApp Alerts Feature</th>
                    <th style="color: var(--text-muted); text-align: right;">Action</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($records as $record): ?>
                    <tr>
                        <td style="color: white; font-weight: 500;"><?php echo htmlspecialchars($record['name']); ?></td>
                        <td style="color: var(--text-light);"><?php echo htmlspecialchars($record['email']); ?></td>
                        <td style="text-align: center;">
                            <?php if ($record['feature_email_alerts']): ?>
                                <span style="background: rgba(16, 185, 129, 0.15); color: #10b981; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; border: 1px solid rgba(16, 185, 129, 0.3);">Enabled</span>
                            <?php else: ?>
                                <span style="background: rgba(239, 68, 68, 0.15); color: #ef4444; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; border: 1px solid rgba(239, 68, 68, 0.3);">Disabled</span>
                            <?php endif; ?>
                        </td>
                        <td style="text-align: center;">
                            <?php if ($record['feature_whatsapp_alerts']): ?>
                                <span style="background: rgba(16, 185, 129, 0.15); color: #10b981; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; border: 1px solid rgba(16, 185, 129, 0.3);">Enabled</span>
                            <?php else: ?>
                                <span style="background: rgba(239, 68, 68, 0.15); color: #ef4444; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; border: 1px solid rgba(239, 68, 68, 0.3);">Disabled</span>
                            <?php endif; ?>
                        </td>
                        <td style="text-align: right;">
                            <button onclick="editFeatures(<?php echo htmlspecialchars(json_encode([
                                'id' => $record['id'],
                                'name' => $record['name'],
                                'feature_email_alerts' => $record['feature_email_alerts'],
                                'feature_whatsapp_alerts' => $record['feature_whatsapp_alerts'],
                                'max_whatsapp_recipients' => $record['max_whatsapp_recipients']
                            ])); ?>)" class="btn-outline-gold" style="padding: 0.4rem 0.8rem; font-size: 0.85rem;">
                                Edit Features
                            </button>
                        </td>
                    </tr>
                <?php endforeach; ?>
                <?php if (empty($records)): ?>
                    <tr>
                        <td colspan="5" style="text-align: center; color: var(--text-muted); padding: 2rem;">No companies found.</td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Edit Features Modal -->
<div id="featuresModal" style="display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center;">
    <div style="background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; width: 100%; max-width: 500px; padding: 2rem;">
        <h3 style="margin-top: 0; color: white; margin-bottom: 1.5rem;" id="modalCompanyName">Edit Features</h3>
        <form action="/superadmin/updateCompanyFeatures" method="POST">
            <input type="hidden" name="tenant_id" id="modalTenantId">
            
            <div style="margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem;">
                <input type="checkbox" name="feature_email_alerts" id="featureEmail" value="1" style="width: 1.25rem; height: 1.25rem; accent-color: var(--superadmin-color);">
                <label for="featureEmail" style="color: white; font-size: 1rem; cursor: pointer;">Enable Email Alerts Feature</label>
            </div>
            
            <div style="margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem;">
                <input type="checkbox" name="feature_whatsapp_alerts" id="featureWhatsapp" value="1" style="width: 1.25rem; height: 1.25rem; accent-color: var(--superadmin-color);" onchange="document.getElementById('maxWaContainer').style.display = this.checked ? 'block' : 'none';">
                <label for="featureWhatsapp" style="color: white; font-size: 1rem; cursor: pointer;">Enable WhatsApp Alerts Feature</label>
            </div>
            
            <div id="maxWaContainer" style="margin-bottom: 2rem; padding-left: 2.25rem; display: none;">
                <label for="maxWhatsapp" style="display: block; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem;">Max WhatsApp Recipients</label>
                <input type="number" name="max_whatsapp_recipients" id="maxWhatsapp" min="1" value="1" style="width: 100%; padding: 0.5rem; border-radius: 6px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none;">
            </div>
            
            <div style="display: flex; justify-content: flex-end; gap: 1rem;">
                <button type="button" onclick="closeModal()" class="btn-outline-gold" style="color: var(--text-light); border-color: var(--glass-border);">Cancel</button>
                <button type="submit" class="btn-gold">Save Changes</button>
            </div>
        </form>
    </div>
</div>

<script>
function editFeatures(tenant) {
    document.getElementById('modalTenantId').value = tenant.id;
    document.getElementById('modalCompanyName').innerText = 'Edit Features: ' + tenant.name;
    document.getElementById('featureEmail').checked = tenant.feature_email_alerts == 1;
    document.getElementById('featureWhatsapp').checked = tenant.feature_whatsapp_alerts == 1;
    document.getElementById('maxWhatsapp').value = tenant.max_whatsapp_recipients || 1;
    document.getElementById('maxWaContainer').style.display = tenant.feature_whatsapp_alerts == 1 ? 'block' : 'none';
    
    document.getElementById('featuresModal').style.display = 'flex';
}

function closeModal() {
    document.getElementById('featuresModal').style.display = 'none';
}
</script>

</div> <!-- main-content -->
</div> <!-- dashboard-layout -->
</body>
</html>
