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

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

{% block page_title %}Institution Inventory{% endblock %}
{% block page_subtitle %}Managing global academic partners and their service configurations.{% endblock %}

{% block content %}
<style>
    /* Global Square Reset for this page */
    * { border-radius: 0 !important; }
    
    .main-content { padding: 20px 15px !important; background: #fafafa; }
    
    .inst-card { 
        background: #fff; 
        border: 2px solid #1e293b; 
        margin-bottom: 30px; 
        box-shadow: 6px 6px 0px #1e293b;
        display: flex;
        flex-direction: column;
    }

    .inst-row-info {
        padding: 25px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 2px solid #f1f5f9;
    }

    .inst-profile { display: flex; gap: 20px; }
    .inst-icon {
        width: 60px; height: 60px;
        background: #1e293b; color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.5rem;
    }

    .inst-details h3 { font-weight: 900; font-size: 1.25rem; color: #1e293b; margin-bottom: 8px; text-transform: uppercase; }
    .inst-meta { display: flex; gap: 20px; font-size: 0.8rem; color: #64748b; font-weight: 700; margin-bottom: 12px; }
    .inst-meta b { color: #1e293b; }

    .status-group { display: flex; gap: 10px; }
    .status-tag {
        font-size: 0.65rem; font-weight: 900; padding: 4px 12px;
        background: #fff; border: 1.5px solid #1e293b; color: #1e293b;
        text-transform: uppercase; letter-spacing: 1px;
    }
    .status-tag.active { background: #1e293b; color: #fff; }

    .inst-row-actions {
        background: #f8fafc;
        padding: 15px 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .toggles-container { display: flex; gap: 25px; }
    .toggle-item { display: flex; align-items: center; gap: 10px; }
    .toggle-label { font-size: 0.7rem; font-weight: 900; color: #64748b; text-transform: uppercase; }

    .buttons-container { display: flex; gap: 12px; }
    .btn-action {
        height: 40px; padding: 0 20px;
        display: inline-flex; align-items: center; gap: 8px;
        background: #fff; border: 2px solid #1e293b;
        color: #1e293b; font-weight: 900; font-size: 0.75rem;
        text-decoration: none; transition: 0.2s;
        text-transform: uppercase;
    }
    .btn-action:hover { background: #1e293b; color: #fff; }
    .btn-action.btn-danger { border-color: #ef4444; color: #ef4444; }
    .btn-action.btn-danger:hover { background: #ef4444; color: #fff; }

    /* Custom Square Toggles */
    .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: #1e293b; border: 2px solid #1e293b; transition: .2s; }
    .slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 2px; bottom: 2px; background-color: #fff; transition: .2s; }
    input:checked + .slider { background: #10b981; border-color: #10b981; }
    input:checked + .slider:before { transform: translateX(20px); }
    /* Amber override for Lunch Break toggle */
    .lunch-slider:checked + .slider,
    input.lunch-cb:checked + .slider { background: #f59e0b !important; border-color: #f59e0b !important; }

</style>

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; padding: 0 10px;">
    <h2 style="font-weight: 950; text-transform: uppercase; letter-spacing: 2px; font-size: 1.5rem; border-left: 8px solid #1e293b; padding-left: 20px;">Institution Inventory</h2>
    <a href="{% url 'super_school_add' %}" class="btn-action" style="height: 50px; padding: 0 30px; background: #1e293b; color: #fff; font-size: 0.9rem;">
        <i class="fas fa-plus"></i> Enroll Institution
    </a>
</div>

{% for school in schools %}
<div class="inst-card">
    <!-- Line 1: Profile & Status -->
    <div class="inst-row-info">
        <div class="inst-profile">
            <div class="inst-icon"><i class="fas fa-university"></i></div>
            <div class="inst-details">
                <h3>{{ school.name }}</h3>
                <div class="inst-meta">
                    <span>CODE: <b>{{ school.code }}</b></span>
                    <span>ADMIN: <b>{{ school.admin_username }}</b></span>
                    <span><i class="fas fa-map-marker-alt"></i> {{ school.address|truncatechars:70 }}</span>
                </div>
                <div class="status-group">
                    <span class="status-tag active">Encrypted Node</span>
                    {% if school.is_sms_enabled %}<span class="status-tag">SMS Service</span>{% endif %}
                    {% if school.is_individual_sms_enabled %}<span class="status-tag">Individual Mode</span>{% endif %}
                    {% if not school.is_hold_enabled %}<span class="status-tag">Auto-Auth</span>{% endif %}
                    {% if school.is_lunch_break_required %}<span class="status-tag" style="border-color:#f59e0b;color:#f59e0b;">Lunch Req.</span>{% endif %}
                </div>
            </div>
        </div>
        <div style="text-align: right;">
            {% if school.subscription_end_date %}
                <div style="font-size: 0.6rem; font-weight: 900; color: #ef4444; text-transform: uppercase; margin-bottom: 5px;">Sub Expires: {{ school.subscription_end_date|date:"d M Y" }}</div>
            {% else %}
                <div style="font-size: 0.6rem; font-weight: 900; color: #10b981; text-transform: uppercase; margin-bottom: 5px;">Lifetime Access</div>
            {% endif %}
            <button onclick="openSubModal('{{ school.id }}', '{{ school.subscription_end_date|date:"Y-m-d" }}')" style="font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; font-weight: 950; background: #f1f5f9; padding: 8px 15px; border: 1px solid #e2e8f0; cursor: pointer;">
                SUBSCRIPTION LIMIT
            </button>
        </div>
    </div>

    <!-- Line 2: Advanced Controls & Quick Actions -->
    <div class="inst-row-actions">
        <div class="toggles-container">
            <div class="toggle-item">
                <span class="toggle-label">SMS Gateway</span>
                <label class="switch">
                    <input type="checkbox" onchange="toggleSMS('{{ school.id }}', this)" {% if school.is_sms_enabled %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="toggle-item">
                <span class="toggle-label">Time Testing</span>
                <label class="switch">
                    <input type="checkbox" onchange="toggleTimeTest('{{ school.id }}', this)" {% if school.is_time_test_enabled %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="toggle-item">
                <span class="toggle-label">Hold Protocol</span>
                <label class="switch">
                    <input type="checkbox" onchange="toggleHold('{{ school.id }}', this)" {% if school.is_hold_enabled %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="toggle-item">
                <span class="toggle-label">Indiv. SMS</span>
                <label class="switch">
                    <input type="checkbox" onchange="toggleIndividualSMS('{{ school.id }}', this)" {% if school.is_individual_sms_enabled %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="toggle-item">
                <span class="toggle-label">Lunch Break</span>
                <label class="switch">
                    <input class="lunch-cb" type="checkbox" onchange="toggleLunchBreak('{{ school.id }}', this)" {% if school.is_lunch_break_required %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
            </div>
        </div>

        <div class="buttons-container">
            <a href="{% url 'super_device_assign' school.id %}" class="btn-action"><i class="fas fa-microchip"></i> DEVICE</a>
            <a href="{% url 'super_school_edit' school.id %}" class="btn-action"><i class="fas fa-edit"></i> EDIT</a>
            <a href="{% url 'super_school_delete' school.id %}" class="btn-action btn-danger" onclick="return confirm('CRITICAL: Delete this institution?')">
                <i class="fas fa-trash"></i> DELETE
            </a>
        </div>
    </div>
</div>
{% empty %}
<div style="background: #fff; border: 2px dashed #e2e8f0; padding: 100px; text-align: center; font-weight: 900; color: #94a3b8; text-transform: uppercase; letter-spacing: 2px;">
    No Institutions Detected in Network.
</div>
{% endfor %}

<!-- Subscription Limit Modal -->
<div id="subModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.8); z-index: 1000; justify-content: center; align-items: center;">
    <div style="background: #fff; border: 2px solid #1e293b; box-shadow: 6px 6px 0px #1e293b; width: 400px; max-width: 90%;">
        <div style="padding: 20px; border-bottom: 2px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; background: #f8fafc;">
            <h3 style="font-weight: 900; font-size: 1rem; color: #1e293b; margin: 0; text-transform: uppercase;">Set Subscription Limit</h3>
            <button onclick="closeSubModal()" style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #64748b;">&times;</button>
        </div>
        <div style="padding: 30px;">
            <p style="font-size: 0.8rem; color: #64748b; font-weight: 700; margin-bottom: 15px;">Set an expiration date for this institution. Leave empty for lifetime access.</p>
            <input type="date" id="subDateInput" style="width: 100%; border: 2px solid #1e293b; padding: 12px; font-weight: 800; color: #1e293b; font-size: 1rem; margin-bottom: 20px; outline: none;">
            
            <div style="display: flex; gap: 10px;">
                <button onclick="saveSubDate()" style="flex: 1; padding: 12px; font-weight: 900; font-size: 0.85rem; border: none; background: #1e293b; color: #fff; text-transform: uppercase; cursor: pointer;">Save Limit</button>
                <button onclick="closeSubModal()" style="padding: 12px 20px; font-weight: 900; font-size: 0.85rem; border: 2px solid #1e293b; background: #fff; color: #1e293b; text-transform: uppercase; cursor: pointer;">Cancel</button>
            </div>
        </div>
    </div>
</div>

<script>
    let activeSchoolId = null;

    function openSubModal(schoolId, currentDate) {
        activeSchoolId = schoolId;
        document.getElementById('subDateInput').value = currentDate || '';
        document.getElementById('subModal').style.display = 'flex';
    }

    function closeSubModal() {
        document.getElementById('subModal').style.display = 'none';
        activeSchoolId = null;
    }

    function saveSubDate() {
        if (!activeSchoolId) return;
        const dateVal = document.getElementById('subDateInput').value;
        const btn = event.target;
        btn.innerText = "SAVING...";
        
        fetch(`/super/schools/api/set-subscription/${activeSchoolId}/`, {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ end_date: dateVal })
        }).then(r => r.json()).then(data => {
            if (data.status === 'ok') {
                window.location.reload();
            } else {
                alert('Failed to update subscription limit.');
                btn.innerText = "Save Limit";
            }
        }).catch(() => {
            alert('Request failed.');
            btn.innerText = "Save Limit";
        });
    }

    function toggleSMS(schoolId, checkbox) {
        fetch(`/super/schools/api/toggle-sms/${schoolId}/`, {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' }
        }).then(r => r.json()).then(data => { if (data.status !== 'ok') checkbox.checked = !checkbox.checked; })
        .catch(() => checkbox.checked = !checkbox.checked);
    }

    function toggleTimeTest(schoolId, checkbox) {
        fetch(`/super/schools/api/toggle-time-test/${schoolId}/`, {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' }
        }).then(r => r.json()).then(data => { if (data.status !== 'ok') checkbox.checked = !checkbox.checked; })
        .catch(() => checkbox.checked = !checkbox.checked);
    }

    function toggleHold(schoolId, checkbox) {
        fetch(`/super/schools/api/toggle-hold/${schoolId}/`, {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' }
        }).then(r => r.json()).then(data => { 
            if (data.status !== 'ok') checkbox.checked = !checkbox.checked;
            else window.location.reload(); 
        }).catch(() => checkbox.checked = !checkbox.checked);
    }

    function toggleIndividualSMS(schoolId, checkbox) {
        fetch(`/super/schools/api/toggle-individual-sms/${schoolId}/`, {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' }
        }).then(r => r.json()).then(data => { if (data.status !== 'ok') checkbox.checked = !checkbox.checked; })
        .catch(() => checkbox.checked = !checkbox.checked);
    }

    function toggleLunchBreak(schoolId, checkbox) {
        fetch(`/super/schools/api/toggle-lunch-break/${schoolId}/`, {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' }
        }).then(r => r.json()).then(data => {
            if (data.status !== 'ok') {
                checkbox.checked = !checkbox.checked;
            } else {
                // Update amber color dynamically
                const slider = checkbox.nextElementSibling;
                if (data.is_lunch_break_required) {
                    slider.style.background = '#f59e0b';
                    slider.style.borderColor = '#f59e0b';
                } else {
                    slider.style.background = '';
                    slider.style.borderColor = '';
                }
            }
        }).catch(() => checkbox.checked = !checkbox.checked);
    }
</script>
{% endblock %}