{% extends "generic/base.html" %}
<!-- {% load static from static %} -->

{% load crispy_forms_tags %}

{% block css %}
    <style>
    /* Simple modal for showing JSON debug info */
        .hx-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1200;
        }
        .hx-modal {
            background: #fff;
            max-width: 90%;
            max-height: 80%;
            overflow: auto;
            padding: 1rem;
            border-radius: 6px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
            font-family: monospace;
        }
        .hx-modal pre { white-space: pre-wrap; word-wrap: break-word; }
        .hx-modal .hx-close { float: right; cursor: pointer; margin-left: 0.5rem; }
    </style>
{% endblock %}
{% block js %}
    <!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
    {{form.media}}

    <!-- htmx for making the request; include if not already present -->
    <script src="https://unpkg.com/htmx.org@1.9.2"></script>

    <script type="text/javascript">
        (function(){
        // Listen for HTMX requests and show the JSON response inside our modal.
            document.addEventListener('htmx:afterRequest', function(evt){
                try {
                // We only care about requests triggered by our debug button
                    var trigger = evt.detail.elt;
                    if(!trigger) return;
                    if(trigger.id !== 'show-exam-json') return;

                    var xhr = evt.detail.xhr;
                    if(!xhr) return;

                    var txt = xhr.responseText || '';
                    var json = null;
                    try { json = JSON.parse(txt); }
                    catch(e) { json = null; }

                    var out = '';
                    if(json !== null) {
                        out = JSON.stringify(json, null, 2);
                    } else {
                    // If not valid JSON, just show raw text
                        out = txt;
                    }

                    var overlay = document.getElementById('hx-debug-overlay');
                    var pre = document.getElementById('hx-debug-pre');
                    pre.textContent = out;
                    overlay.style.display = 'flex';
                } catch (e) {
                    console.error('hx debug modal error', e);
                }
            });

        // Close button and overlay click
            document.addEventListener('DOMContentLoaded', function(){
                var overlay = document.getElementById('hx-debug-overlay');
                if(!overlay) return;
                overlay.addEventListener('click', function(ev){
                    if(ev.target === overlay) overlay.style.display = 'none';
                });
                var close = document.getElementById('hx-debug-close');
                if(close) close.addEventListener('click', function(){ overlay.style.display = 'none'; });
            });
        })();
    </script>

    <!-- {{ form.media }} -->
{% endblock %}
{% block content %}
    <h2>Edit CID User / {{ciduser.cid}}</h2>
    Use this form to edit a CID user.
    <form action="" method="post" enctype="multipart/form-data" id="condition-form">
        {% csrf_token %}

        {{ form|crispy }}
        <input type="submit" class="submit-button" value="Submit" name="submit">
    </form>

    <h2>Exams</h2>
    The group is currently associated with the following exams.

    <p>
        {% with object.get_cid_exams as exam_map %}
            {% for exam_type, exams in exam_map %}
                <h4>{{exam_type}}</h4>
                <ul>
                    {% for exam in exams %}
                        <li>
                            <a href="{{exam.get_absolute_url}}">{{exam}}</a>
                        </li>
                    {% endfor %}
                </ul>
            {% empty %}
                No exams.
            {% endfor %}
        {% endwith %}
    </p>

    <p>
        These should be edited via the exam candidate page. If you need to manually toggle you can do so <a href="{% url 'generic:update_cid_exams' object.pk %}">here</a> (you shouldn't)
    </p>

    <!-- HTMX debug button to show what the /exam/json/<cid>/<passcode> response will be -->
    <p>
        <button id="show-exam-json" class="button"
                hx-get="{% url 'active_exams_cid' ciduser.cid ciduser.passcode %}"
                hx-trigger="click"
                hx-swap="none">
            Show exam JSON (debug)
        </button>
    </p>

    <!-- Modal overlay for JSON output -->
    <div id="hx-debug-overlay" class="hx-modal-overlay" role="dialog" aria-hidden="true">
        <div class="hx-modal" role="document">
            <button id="hx-debug-close" class="hx-close">Close</button>
            <h3>Exam JSON (debug)</h3>
            <pre id="hx-debug-pre">(loading...)</pre>
        </div>
    </div>

{% endblock %}