{% extends "./template.html" %}
{% block content %}
{% load static %}
    <script type="text/javascript" src="{% static 'NearBeach/javascript/campus_information.js' %}"></script>
    <link rel="stylesheet" href="{% static 'NearBeach/widgets/intl-tel-input/css/intlTelInput.css' %}">
    <script type="text/javascript" src="{% static 'NearBeach/javascript/csrf_finder.js' %}"></script>
    <script src="{% static 'NearBeach/widgets/intl-tel-input/js/intlTelInput.js' %}"></script>
    <script src="{% static 'NearBeach/widgets/intl-tel-input/js/utils.js' %}"></script>

    {% if not MAPBOX_API_TOKEN == '' %}
        <script src='https://api.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
        <link href='https://api.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
        <script type="text/javascript" src="{% static 'NearBeach/javascript/mapbox.js' %}"></script>
    {% elif not GOOGLE_MAP_API_TOKEN == '' %}
        <script src="https://maps.googleapis.com/maps/api/js?key={{ GOOGLE_MAP_API_TOKEN }}&callback=initMap" async defer></script>
        <script type="text/javascript" src="{% static 'NearBeach/javascript/google_maps.js' %}"></script>
    {% endif %}

    <div class="card mt-4">
        <div class="card-header">
            <h2>Campus Information - {{ campus_results.campus_nickname }}</h2>
            <div class="form-group">
                {% if campus_results.organisation_id %}
                    <a href="{% url 'organisation_information' campus_results.organisation_id.organisation_id %}">{{ campus_results.organisation_id }}</a>
                {% elif campus_results.customer_id %}
                    <a href="{% url 'customer_information' campus_results.customer.customer_id %}">{{ campus_results.customer }}</a>
                {% else %}
                    Error
                {% endif %}
            </div>
        </div>
        <div class="card-body">
            <div class="form-row">
                <label for="id_campus_nickname">Campus Nickname</label>
                {{ campus_readonly_form.campus_nickname }}
            </div>
            <div class="form-row mt-2">
                <div class="form-row col-md-4">
                    <label for="id_campus_phone">Campus Phone</label>
                    {{ campus_readonly_form.campus_phone }}
                </div>
                <div class="form-row col-md-4">
                    <label for="id_campus_fax">Campus Fax</label>
                    {{ campus_readonly_form.campus_fax }}
                </div>
            </div>
            <div class="form-group">
                <label for="id_campus_address1">Address 1</label>
                {{ campus_readonly_form.campus_address1 }}
            </div>
            <div class="form-group">
                <label for="id_campus_address2">Address 2</label>
                {{ campus_readonly_form.campus_address2 }}
            </div>
            <div class="form-group">
                <label for="id_campus_address3">Address 3</label>
                {{ campus_readonly_form.campus_address3 }}
            </div>
            <div class="form-group">
                <label for="id_campus_suburb">Suburb</label>
                {{ campus_readonly_form.campus_suburb }}
            </div>
            <div class="form-group">
                <label>Please note - region and country have been solitified. If the address details of this campus have changed we recommend placing in a new campus.</label>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="id_campus_region_id">Region</label>
                    <input type="text" readonly value="{{ campus_results.campus_region_id }}" class="form-control">
                </div>
                <div class="form-group col-md-6">
                    <label for="id_campus_country_id">Country</label>
                    <input type="text" readonly value="{{ campus_results.campus_country_id }}" class="form-control">
                </div>
            </div>
        </div>
    </div>


    {% if campus_results.organisation_id %}
        <div class="card mt-4">
            <div class="card-header">
                <h2>Campus Contacts</h2>
            </div>
            <div class="card-body">
                {% if customer_campus_results %}
                    <table class="table table-striped table-hover mt-4">
                        <thead>
                            <tr>
                                <td>First Name</td>
                                <td>Last Name</td>
                                <td>Email</td>
                                <td>Phone</td>
                                <td>Fax</td>
                                <td>Delete</td>
                            </tr>
                        </thead>
                        {% for row in customer_campus_results %}
                            <tr>
                                <td><a href="{% url 'campus_information' row.campus_id.campus_id %}">{{ row.customer_id.customer_first_name }}</a></td>
                                <td>{{ row.customer_id.customer_last_name }}</td>
                                <td>{{ row.customer_id.customer_email }}</td>
                                <td>{{ row.customer_phone }}</td>
                                <td>{{ row.customer_fax }}</td>
                                <td><a href="{% url 'delete_campus_contact' row.campus_id.campus_id 'CAMP' %}">Delete</a></td>
                            </tr>
                        {% endfor %}
                    </table>
                {% else %}
                    <p>There are no customers at this campus</p>
                {% endif %}
            </div>
        </div>
    {% endif %}

    <div class="card mt-4">
        <div class="card-header">
            <h2>Map</h2>
        </div>
        <div class="card-body">
            <div id='map'></div>
        </div>
    </div>

    <script>
        document.onload = on_page_load();

        function on_page_load() {
            {% if MAPBOX_API_TOKEN %}
                initMap(
                    {{ campus_results.campus_latitude }},
                    {{ campus_results.campus_longitude }},
                    "{{ campus_results.campus_nickname }}",
                    "{{ MAPBOX_API_TOKEN }}"
                );
            {% elif GOOGLE_MAP_API_TOKEN %}
                initMap(
                    {{ campus_results.campus_latitude }},
                    {{ campus_results.campus_longitude }},
                    "{{ campus_results.campus_nickname }}",
                    "{{ GOOGLE_MAP_API_TOKEN }}"
                );
            {% else %}
                $("#map").html("No map API has been installed.");
            {% endif %}

            //Initialise the international phone number widget
            var campus_phone = document.querySelector("#id_campus_phone"),
            campus_fax = document.querySelector("#id_campus_fax");

            window.intlTelInput(campus_phone);
            window.intlTelInput(campus_fax);

        }
    </script>
{% endblock %}
