{% extends "./template.html" %}
{% block content %}
{% load static %}
<body onload="on_page_load()">
    <link rel="stylesheet" href="{% static 'NearBeach/widgets/intl-tel-input/css/intlTelInput.css' %}">
    <script src="{% static 'NearBeach/widgets/intl-tel-input/js/intlTelInput.js' %}"></script>
    <script src="{% static 'NearBeach/widgets/intl-tel-input/js/utils.js' %}"></script>

    <style>
        .iti-flag {background-image: url("{% static 'NearBeach/widgets/intl-tel-input/img/flags.png' %}");}

        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          .iti-flag {background-image: url("{% static 'NearBeach/widgets/intl-tel-input/img/flags@2x.png' %}");}
        }
    </style>
    <div class="card mt-4">
        <div class="card-header">
            <h2>New Campus</h2>
        </div>
        <div class="card-body">
            <form id="input-form" action="{% url 'new_campus' location_id destination %}" method="post" class="new_campus">
                {% csrf_token %}
                {{ new_campus_form.media.css }}
                {{ new_campus_form.media.js }}
                <div class="form-group">
                    <label for="id_campus_nickname">Campus Nickname</label>
                    {{ new_campus_form.campus_nickname }}
                </div>
                <div class="form-row">
                    <div class="form-row col-md-4">
                        <label for="int_campus_phone">Campus Phone</label>
                        <input type="text" id="int_campus_phone" name="int_campus_phone" value="{{ campus_results.campus_phone }}">
                    </div>
                    <div class="form-row col-md-4">
                        <label for="int_campus_fax">Campus Fax</label>
                        <input type="text" id="int_campus_fax" name="int_campus_fax" value="{{ campus_results.campus_fax }}">
                    </div>
                </div>
                <div class="form-group">
                    <label for="id_campus_address1">Address 1</label>
                    {{ new_campus_form.campus_address1 }}
                </div>
                <div class="form-group">
                    <label for="id_campus_address2">Address 2</label>
                    {{ new_campus_form.campus_address2 }}
                </div>
                <div class="form-group">
                    <label for="id_campus_address3">Address 3</label>
                    {{ new_campus_form.campus_address3 }}
                </div>
                <div class="form-group">
                    <label for="id_campus_suburb">Suburb</label>
                    {{ new_campus_form.campus_suburb }}
                </div>
                <div class="form-group">
                    <label for="id_country_and_region">Country and Region</label>
                    {{ new_campus_form.country_and_region }}
                </div>
                <div class="form-row mt-2">
                    <input id="submit" type="submit" value="Submit new campus" disabled="disabled" class="btn btn-primary col-md-6 form-control">
                    {% if destination == "organisation" %}
                        <a href="{% url 'organisation_information' location_id %}" class="btn btn-warning col-md-6 form-control">Cancel</a>
                    {% else %}
                        <a href="{% url 'customer_information' location_id %}" class="btn btn-warning col-md-6 form-control">Cancel</a>
                    {% endif %}
                </div>
            </form>
        </div>
    </div>

    <script>
        $("#input-form").on('change', function() {
            enable_disable_submit();
        });
        $("#input-form").on('keyup', function() {
            enable_disable_submit();
        });

        function enable_disable_submit() {
            if (($("#id_country_and_regions").val() != '') &&
                ($("#id_campus_nickname").val() != '')) {
                $("#submit").prop("disabled",false)
            } else {
                $("#submit").prop("disabled",true)
            }
        }

        function on_page_load() {
            var campus_phone = document.querySelector("#int_campus_phone"),
                campus_fax = document.querySelector("#int_campus_fax");

            window.intlTelInput(campus_phone,{
                hiddenInput: "hidden_campus_phone",
                utilsScript: "{% static 'NearBeach/widgets/intl-tel-input/js/utils.js' %}",
            });
            window.intlTelInput(campus_fax, {
                hiddenInput: "hidden_campus_fax",
                utilsScript: "{% static 'NearBeach/widgets/intl-tel-input/js/utils.js' %}",
            });
        }
    </script>
</body>
{% endblock %}
