{% extends "portal/teach/base_registering.html" %}
{% load staticfiles %}
{% load app_tags %}

{% block css %}
{{ block.super }}
{% endblock css %}

{% block scripts %}
{{ block.super }}
{% endblock scripts %}

{% block pageID %}id="homeWrapper"{% endblock %}

{% block content %}
{{ block.super }}

<script type="text/javascript" src="{% static 'portal/js/fuzzySchoolLookup.js' %}"></script>
<script>
    var FUZZY_NAME_FIELD_ID = "{{ join_form.fuzzy_name.auto_id }}";
    var CHOSEN_ORG_FIELD_ID = "{{ join_form.chosen_org.auto_id }}";
    var FUZZY_ORG_LOOKUP_URL = "{% url 'organisation_fuzzy_lookup' %}";
</script>

<div id="onboarding_organisation_page"></div>

{% if teacher.pending_join_request %}
<div id="onboarding_revoke_request_page"></div>

<div class="background background--primary">
    <div class="col-sm-6 col-center">
        <section>
            <h2>Join a school</h2><br>
        </section>
        <h4>You have a pending request to join <b>{{ teacher.pending_join_request.name }}, {{ teacher.pending_join_request.postcode }}</b>.<br>Once the administrator of your school or club has approved your request you will be able
            to continue.</h4>
    </div>
    <div class="col-sm-6 col-center">
        <p>Please note: You may only have one request to join a school or club at a time. If you wish to join another school or club, you must revoke
            your pending request first.</p><br>
        <form id="revoke_form" method="post">

            {% csrf_token %}

            <div class="section group">
                <button class="button--regular button--secondary button--secondary--dark" type="submit"
                        name="revoke_join_request">Revoke request to {{ teacher.pending_join_request.name }}</button>
            </div>

        </form>
    </div>
</div>
{% else %}
{% if teacher.school %}
<div class="background background--primary">
    <div class="form col-sm-8 col-center">
        <section class="background">
            <h3>It looks like you&rsquo;ve already created your school ({{ user.new_teacher.school.name }})</h3>
            <a href="{% url 'onboarding-classes' %}" class="button button--regular button--primary--general-play" >Add a class</a>
        </section>
    </div>
</div>
{% else %}
<div class="background background--primary">
    <div class="form col-sm-4 col-center">
        <ul class="tab">
            <li>
                <a href="javascript:void(0)" class="tablinks" id="defaultOpen" onclick="openForm(event, 'Create')">Create a school or club</a>
                <img id="left-arrow" src="{% static 'portal/img/form_chooser_arrow.png' %}">
            </li>
            <li>
                <a href="javascript:void(0)" class="tablinks" id="join-tab" onclick="openForm(event, 'Join')">Join a school or club</a>
                <img id="right-arrow" src="{% static 'portal/img/form_chooser_arrow.png' %}">
            </li>
        </ul>
        <div id="Create" class="tabcontent">
            <form id="form-create-organisation" method="post">

                {% csrf_token %}

                {{ create_form.non_field_errors }}

                {% for field in create_form %}
                <label for="id_{{ field.name }}">{{ field.label }}</label>
                {{ field }}
                {{ field.errors }}
                {% endfor %}

                <div class="section group">
                    <button type="submit" class="button--regular button-primary button--primary--general-play" name="create_organisation">Create school or club</button>
                </div>

            </form>
        </div>
        <div id="Join" class="tabcontent">
            <form id="form-join-organisation" method="post">

                {% csrf_token %}

                {{ join_form.non_field_errors }}

                <label for="id_{{ join_form.fuzzy_name.html_name }}">{{ join_form.fuzzy_name.label }}</label>
                {{ join_form.fuzzy_name }}
                {{ join_form.fuzzy_name.errors }}

                <label for="id_{{ join_form.chosen_org.html_name }}">{{ join_form.chosen_org.label }}</label>
                {{ join_form.chosen_org }}
                {{ join_form.chosen_org.errors }}

                <div class="section group">
                    <button type="submit" class="button--regular button-primary button--primary--general-play" name="join_organisation">Join school or club</button>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
    document.getElementById("defaultOpen").click();

    function openForm(evt, formName) {
        // Declare all variables
        var i, tabcontent, tablinks;

        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        // Show the current tab, and add an "active" class to the link that opened the tab
        document.getElementById(formName).style.display = "block";
        evt.currentTarget.className += " active";

        if (formName == "Create" )  {
            document.getElementById("left-arrow").style.display = "block";
            document.getElementById("right-arrow").style.display = "none";
        } else {
            document.getElementById("left-arrow").style.display = "none";
            document.getElementById("right-arrow").style.display = "block";
        }
    }
</script>
{% endif %}
{% endif %}

{% endblock content %}
