<?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;">WhatsApp Settings</h3>
        <p style="color: var(--text-muted); margin: 0;">Configure Twilio API credentials to send WhatsApp alerts globally.</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); max-width: 800px;">
    <h3 style="margin-top: 0; color: white; border-bottom: 1px solid var(--glass-border); padding-bottom: 0.75rem;">
        <i class="ph ph-whatsapp-logo" style="vertical-align: middle; color: #22c55e; margin-right: 0.5rem; font-size: 1.5rem;"></i>
        Twilio WhatsApp Configuration
    </h3>
    <form action="/superadmin/updateTwilioSettings" method="POST" style="margin-top: 1.5rem;">
        <div style="display: flex; flex-direction: column; gap: 1.5rem;">
            <div class="input-group" style="margin-bottom: 0;">
                <label for="twilio_sid" style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem; display: block;">Account SID</label>
                <input type="text" id="twilio_sid" name="twilio_sid" value="<?php echo htmlspecialchars($twilioSid ?? ''); ?>" placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" style="width: 100%; padding: 0.75rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none; font-size: 0.95rem;">
            </div>
            <div class="input-group" style="margin-bottom: 0;">
                <label for="twilio_token" style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem; display: block;">Auth Token</label>
                <input type="password" id="twilio_token" name="twilio_token" value="<?php echo htmlspecialchars($twilioToken ?? ''); ?>" placeholder="Your Twilio Auth Token" style="width: 100%; padding: 0.75rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none; font-size: 0.95rem;">
            </div>
            <div class="input-group" style="margin-bottom: 0;">
                <label for="twilio_whatsapp_number" style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem; display: block;">Twilio WhatsApp Number</label>
                <input type="text" id="twilio_whatsapp_number" name="twilio_whatsapp_number" value="<?php echo htmlspecialchars($twilioNumber ?? ''); ?>" placeholder="whatsapp:+14155238886" style="width: 100%; padding: 0.75rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none; font-size: 0.95rem;">
            </div>
            <div class="input-group" style="margin-bottom: 0;">
                <label for="twilio_whatsapp_template_sid" style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem; display: block;">Twilio Content Template SID</label>
                <input type="text" id="twilio_whatsapp_template_sid" name="twilio_whatsapp_template_sid" value="<?php echo htmlspecialchars($twilioTemplateSid ?? ''); ?>" placeholder="HXxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" style="width: 100%; padding: 0.75rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none; font-size: 0.95rem;">
            </div>
        </div>
        <div style="margin-top: 2rem;">
            <button type="submit" class="btn-primary" style="padding: 0.75rem 1.5rem; width: 100%; display: flex; justify-content: center; align-items: center; gap: 0.5rem;">
                <i class="ph ph-floppy-disk" style="font-size: 1.25rem;"></i> Save Twilio Settings
            </button>
        </div>
    </form>
</div>

</div>

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

<script>
function updateClock() {
    const clockDateEl = document.getElementById('clockDate');
    const clockTimeEl = document.getElementById('clockTime');
    if (!clockDateEl || !clockTimeEl) return;

    const now = new Date();
    const options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };
    const dateStr = now.toLocaleDateString('en-US', options);
    
    let hours = now.getHours();
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    const ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12;
    const hoursStr = String(hours).padStart(2, '0');
    
    clockDateEl.textContent = dateStr;
    clockTimeEl.textContent = `${hoursStr}:${minutes}:${seconds} ${ampm}`;
}
updateClock();
setInterval(updateClock, 1000);
</script>
</body>
</html>
