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

{% block title %}Institution Settings | SaaS Command{% endblock %}

{% block page_title %}Advanced Configuration{% endblock %}
{% block page_subtitle %}Refining system behavior for {{ institution.name }}{% endblock %}

{% block content %}
<div style="max-width: 800px;">
    <form method="post" class="card" style="padding: 40px; border-radius: 32px;">
        {% csrf_token %}
        
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9;">
            <div style="display: flex; align-items: center; gap: 15px;">
                <div style="width: 50px; height: 50px; border-radius: 14px; background: rgba(99, 102, 241, 0.1); color: #6366f1; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;">
                    <i class="fas fa-toggle-on"></i>
                </div>
                <div>
                    <h3 style="font-weight: 950; color: #0f172a; margin-bottom: 2px;">Service Toggles</h3>
                    <p style="font-size: 0.72rem; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;">Feature Control Center</p>
                </div>
            </div>
        </div>

        <!-- SMS Toggle Section -->
        <div style="background: #f8fafc; border: 2px solid #f1f5f9; border-radius: 20px; padding: 25px; margin-bottom: 40px;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div style="flex: 1; padding-right: 30px;">
                    <div style="font-weight: 950; color: #1e293b; font-size: 0.95rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px;">
                        <i class="fas fa-comment-sms" style="color: #10b981;"></i> WhatsApp/SMS Notifications
                    </div>
                    <p style="font-size: 0.8rem; color: #64748b; line-height: 1.6; font-weight: 600;">Enable or disable automatic attendance alerts for parents of this institution. Requires global SMS Gateway to be active.</p>
                </div>
                
                <!-- Custom Switch -->
                <label style="position: relative; display: inline-block; width: 64px; height: 34px; flex-shrink: 0;">
                    <input type="checkbox" name="is_sms_enabled" {% if institution.is_sms_enabled %}checked{% endif %} style="opacity: 0; width: 0; height: 0;" onchange="this.parentElement.nextElementSibling.innerText = this.checked ? 'ENABLED' : 'DISABLED'">
                    <span style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e2e8f0; transition: .4s; border-radius: 34px;">
                        <span style="position: absolute; content: ''; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"></span>
                    </span>
                    <style>
                        input:checked + span { background-color: #10b981; }
                        input:checked + span:before { transform: translateX(30px); }
                        input:checked + span span { transform: translateX(30px); }
                    </style>
                </label>
            </div>
        </div>

        <!-- Individual SMS Toggle Section -->
        <div style="background: #fff; border: 2px solid #f1f5f9; border-radius: 20px; padding: 25px; margin-bottom: 40px;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div style="flex: 1; padding-right: 30px;">
                    <div style="font-weight: 950; color: #1e293b; font-size: 0.95rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px;">
                        <i class="fas fa-users-cog" style="color: #6366f1;"></i> Individual Student SMS
                    </div>
                    <p style="font-size: 0.8rem; color: #64748b; line-height: 1.6; font-weight: 600;">Enable this to allow institution admins to toggle SMS notifications for specific students in their profile. Otherwise, all students receive alerts.</p>
                </div>
                
                <label style="position: relative; display: inline-block; width: 64px; height: 34px; flex-shrink: 0;">
                    <input type="checkbox" name="is_individual_sms_enabled" {% if institution.is_individual_sms_enabled %}checked{% endif %} style="opacity: 0; width: 0; height: 0;">
                    <span style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e2e8f0; transition: .4s; border-radius: 34px;">
                        <span style="position: absolute; content: ''; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"></span>
                    </span>
                    <style>
                        input:checked + span { background-color: #6366f1; }
                        input:checked + span span { transform: translateX(30px); }
                    </style>
                </label>
            </div>
        </div>

        <div style="display: flex; gap: 15px;">
            <button type="submit" class="btn btn-accent" style="height: 52px; padding: 0 40px; font-size: 0.9rem; background: #0f172a;">
                <i class="fas fa-cloud-upload-alt"></i> COMMIT CHANGES
            </button>
            <a href="{% url 'super_school_list' %}" class="btn" style="height: 52px; padding: 0 30px; font-size: 0.9rem; background: #f8fafc; border: 1px solid #e2e8f0; color: #64748b;">
                DISCARD
            </a>
        </div>
    </form>
</div>
{% endblock %}