{% extends 'ecbc-base.html' %}
{% block content %}
    <div class="col-sm-8 mx-auto">
        <form method="post" action="/register/" autocomplete="off" class="jumbotron form-signin form-control" id="form">
            {% csrf_token %}
            <h2 class="form-signin-heading">Sign Up for Building Owner</h2>
            <div class="form-group row">
                {% if messages %}
                    <span class="error">{{ messages }}</span>
                {% endif %}
            </div>
            <div class="form-group row">
                <label for="inputFirstName" class="col-4 col-form-label">First Name</label>
                <div class="col-6">
                    <input type="text" id="inputFirstName" class="form-control" placeholder="First Name" required
                           name="inputFirstName" autofocus>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputLastName" class="col-4 col-form-label">Last Name</label>
                <div class="col-6">
                    <input type="text" id="inputLastName" class="form-control" placeholder="Last Name" required
                           name="inputLastName" autofocus>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputEmail" class="col-4 col-form-label">Email</label>
                <div class="col-6">
                    <input type="email" id="inputEmail" class="form-control" placeholder="someone@example.com" required
                           name="inputEmail" autofocus>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPhone" class="col-4 col-form-label">Phone Number</label>
                <div class="col-6">
                    <input type="tel" id="inputPhone" class="form-control" placeholder="Phone Number" required
                           name="inputPhone" autofocus pattern="\d{10,13}" title="Enter a valid phone number">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputOrganization" class="col-4 col-form-label">Organization</label>
                <div class="col-6">
                    <input type="text" id="inputOrganization" class="form-control" placeholder="Organization"
                           required
                           name="inputOrganization" autofocus>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputAddress" class="col-4 col-form-label">Organization Address</label>
                <div class="col-6">
                    <textarea type="text" id="inputAddress" class="form-control" rows="3"
                              placeholder="Address"
                              required name="inputAddress" autofocus></textarea>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputState" class="col-4 col-form-label">State</label>
                <div class="col-6">
                    <select id="inputState" class="custom-select" required name="inputState">
                        <option value="">Select State</option>
                        {% for item in states %}
                            <option value="{{ item.abbr }}"> {{ item.name }} </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputCity" class="col-4 col-form-label">City</label>
                <div class="col-6">
                    <select id="inputCity" class="custom-select" required name="inputCity">
                        <option selected value="none">Select City</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPassword" class="col-4 col-form-label">Password</label>
                <div class="col-6">
                    <input type="password" id="inputPassword" class="form-control" placeholder="********" required
                           name="inputPassword" autofocus>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPasswordConfirm" class="col-4 col-form-label">Password Confirmation</label>
                <div class="col-6">
                    <input type="password" id="inputPasswordConfirm" class="form-control" placeholder="********"
                           name="inputPasswordConfirm" required autofocus>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-3 offset-4">
                    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}
{% block script %}
    <script>
        $(document).ready(function () {
            $("#form").submit(function (event) {
            if ($("#inputPassword").val() != $("#inputPasswordConfirm").val()) {
                alert("Your passwords mismatched!");
                event.preventDefault();
            }
            });

            $('#inputState').change(function () {
                state_name = $(this).val();
                $.ajax({
                    url: '/getcity/',
                    data: {state: state_name},
                    success: function (result) {
                        $("#inputCity option").remove();
                        for (var i = result.length - 1; i >= 0; i--) {
                            $("#inputCity").append('<option value="' + result[i].name + '">' + result[i].name + '</option>');
                        }
                    }
                });
            });
            $('#inputState').trigger('change');

        });
    </script>
{% endblock %}