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

{% block title %}SMS Configuration | SaaS Command{% endblock %}

{% block page_title %}SMS Gateway Command{% endblock %}
{% block page_subtitle %}Configure global API credentials and transactional message templates.{% endblock %}

{% block content %}
<div style="max-width: 900px;">
    <form method="post" class="card" style="padding: 45px; border-radius: 32px;">
        {% csrf_token %}
        
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9;">
            <h3 style="font-weight: 900; color: #0f172a; display: flex; align-items: center; gap: 12px;">
                <i class="fas fa-key" style="color: #6366f1;"></i> API Credentials
            </h3>
            <label style="display: flex; align-items: center; gap: 10px; cursor: pointer; background: #f8fafc; padding: 8px 15px; border-radius: 50px; border: 1px solid #e2e8f0;">
                <input type="checkbox" name="is_active" {% if settings.is_active %}checked{% endif %} style="width: 18px; height: 18px; cursor: pointer;">
                <span style="font-size: 0.75rem; font-weight: 850; color: #475569;">GATEWAY ACTIVE</span>
            </label>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 40px;">
            <div class="form-group">
                <label>BULKSMSBD API KEY</label>
                <input type="password" name="api_key" value="{{ settings.api_key|default:'' }}" placeholder="Enter your secret API key..." required>
                <small style="color: #94a3b8; font-size: 0.7rem; font-weight: 600; margin-top: 8px; display: block;">Obtain this from your bulksmsbd.net dashboard.</small>
            </div>
            <div class="form-group">
                <label>APPROVED SENDER ID</label>
                <input type="text" name="sender_id" value="{{ settings.sender_id|default:'' }}" placeholder="e.g. 8809612..." required>
                <small style="color: #94a3b8; font-size: 0.7rem; font-weight: 600; margin-top: 8px; display: block;">Must be an approved Non-Masking/Masking ID.</small>
            </div>
        </div>

        <div style="margin-bottom: 40px;">
            <h3 style="font-weight: 900; color: #0f172a; margin-bottom: 25px; display: flex; align-items: center; gap: 12px;">
                <i class="fas fa-pen-nib" style="color: #10b981;"></i> Message Templates
            </h3>
            
            <div style="display: flex; flex-direction: column; gap: 30px;">
                <div class="form-group">
                    <label>CHECK-IN NOTIFICATION (SMS)</label>
                    <textarea name="msg_check_in" rows="3" style="resize: none; line-height: 1.6; font-weight: 600;">{{ settings.msg_check_in }}</textarea>
                    <div style="margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap;">
                        <span style="font-size: 0.62rem; background: #f1f5f9; color: #64748b; padding: 4px 10px; border-radius: 4px; font-weight: 800;">{student_name}</span>
                        <span style="font-size: 0.62rem; background: #f1f5f9; color: #64748b; padding: 4px 10px; border-radius: 4px; font-weight: 800;">{school_name}</span>
                        <span style="font-size: 0.62rem; background: #f1f5f9; color: #64748b; padding: 4px 10px; border-radius: 4px; font-weight: 800;">{time}</span>
                        <span style="font-size: 0.62rem; background: #f1f5f9; color: #64748b; padding: 4px 10px; border-radius: 4px; font-weight: 800;">{status}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label>CHECK-OUT NOTIFICATION (SMS)</label>
                    <textarea name="msg_check_out" rows="3" style="resize: none; line-height: 1.6; font-weight: 600;">{{ settings.msg_check_out }}</textarea>
                    <div style="margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap;">
                        <span style="font-size: 0.62rem; background: #f1f5f9; color: #64748b; padding: 4px 10px; border-radius: 4px; font-weight: 800;">{student_name}</span>
                        <span style="font-size: 0.62rem; background: #f1f5f9; color: #64748b; padding: 4px 10px; border-radius: 4px; font-weight: 800;">{school_name}</span>
                        <span style="font-size: 0.62rem; background: #f1f5f9; color: #64748b; padding: 4px 10px; border-radius: 4px; font-weight: 800;">{time}</span>
                        <span style="font-size: 0.62rem; background: #f1f5f9; color: #64748b; padding: 4px 10px; border-radius: 4px; font-weight: 800;">{status}</span>
                    </div>
                </div>
            </div>
        </div>

        <div style="display: flex; gap: 15px; pt: 20px;">
            <button type="submit" class="btn btn-accent" style="height: 52px; padding: 0 40px; font-size: 0.9rem;">
                <i class="fas fa-save"></i> DEPLOY CONFIGURATION
            </button>
            <a href="{% url 'super_dashboard' %}" class="btn btn-danger" style="height: 52px; padding: 0 30px; font-size: 0.9rem; background: #f8fafc; border: 1px solid #e2e8f0; color: #64748b;">
                CANCEL
            </a>
        </div>
    </form>
</div>

<style>
    textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08); background: #fff; outline: none; }
    textarea { width: 100%; padding: 15px 20px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fcfdfe; transition: 0.3s; font-family: inherit; }
</style>
{% endblock %}