{% extends 'superuser/base_super_user.html' %}

{% block title %}SMS Gateways | SaaS Control{% endblock %}

{% block page_title %}SMS Infrastructure{% endblock %}
{% block page_subtitle %}Manage external SMS microservices and API integrations.{% endblock %}

{% block content %}
<div style="margin-bottom: 25px; display: flex; justify-content: flex-end;">
    <a href="{% url 'super_sms_gateway_add' %}" class="btn btn-accent">
        <i class="fas fa-plus"></i> Add New Gateway
    </a>
</div>

<div class="card">
    <table style="width: 100%; border-collapse: collapse;">
        <thead>
            <tr>
                <th>Gateway Name</th>
                <th>API Endpoint</th>
                <th>Sender ID</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for gw in gateways %}
            <tr style="border-bottom: 1px solid #f1f5f9;">
                <td style="padding: 15px;">
                    <div style="font-weight: 900; color: #1e293b;">{{ gw.name }}</div>
                    <div style="font-size: 0.65rem; color: #94a3b8; font-weight: 700;">KEY: {{ gw.api_key|slice:":8" }}...</div>
                </td>
                <td><code style="font-size: 0.75rem; background: #f8fafc; padding: 4px 8px;">{{ gw.api_url|slice:":40" }}...</code></td>
                <td><span style="font-weight: 800; color: #64748b;">{{ gw.sender_id|default:"-" }}</span></td>
                <td>
                    <label class="switch">
                        <input type="checkbox" {% if gw.is_active %}checked{% endif %} onchange="toggleGateway('{{ gw.id }}', this)">
                        <span class="slider round"></span>
                    </label>
                </td>
                <td>
                    <a href="{% url 'super_sms_gateway_delete' gw.id %}" onclick="return confirm('Delete gateway?')" style="color: #ef4444; font-size: 0.8rem; font-weight: 900; text-decoration: none;">
                        <i class="fas fa-trash"></i> DELETE
                    </a>
                </td>
            </tr>
            {% empty %}
            <tr><td colspan="5" style="text-align: center; padding: 40px; color: #94a3b8; font-weight: 700;">No external gateways configured. System using default BulkSMSBD.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<style>
    .switch { position: relative; display: inline-block; width: 40px; height: 20px; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .4s; border-radius: 20px; }
    .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
    input:checked + .slider { background-color: #10b981; }
    input:checked + .slider:before { transform: translateX(20px); }
</style>

<script>
    function toggleGateway(id, checkbox) {
        fetch(`/super/sms/gateways/toggle/${id}/`, {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}' }
        }).then(r => r.json()).then(data => {
            if (data.status === 'ok') {
                if (data.is_active) window.location.reload(); // Reload to show others disabled
            } else {
                checkbox.checked = !checkbox.checked;
                alert('Error: ' + data.error);
            }
        });
    }
</script>
{% endblock %}