{% extends "services/services_base.html" %}
{% load bootstrap_tags %}
{% load i18n %}

{% block head %}
{{ block.super }}
{% endblock %}

{% block title %}{{ block.super }} {% trans "Services" %}{% endblock %}
{% block page-title %}{% trans "Register Service" %}{% endblock %}

{% block body_outer %}
<div class="row">
  <div class="col-md-8">
    <form method="POST" id="service_register_form">
    {% csrf_token %}
    {{ create_service_form|as_bootstrap }}

    <div align="center"><p><input type="submit" class="btn btn-primary pull-left" id="submit_button" value="{% trans "Create" %}" /></p></div>
    </form>

    <div id="responseDiv" style="display:none;">
        <h4>{%  trans "Service has been created:" %}</h4>
    </div>

    <div class="error" style="display:none;">
    </div>

    <div id="tableDiv" style="display:none;">
        <p>{%  trans "The following layers will be imported" %}</p>
        <table id="dataTable"></table>
    </div>
  </div>
</div>
{% endblock %}
{% block extra_script %}
<script type="text/javascript">
    $( document ).ready(function() {
        $("#service_register_form").submit(function(e) {
            var service_name_regexp = new RegExp('^[a-zA-Z]+[a-zA-Z0-9-_\.]*$');
            if(!service_name_regexp.test($("#id_name").val())) {
                $("#responseDiv").html("Service name must start with a letter, followed by letters, numbers, or the characters: . - _").show();
                $("#submit_button").prop("disabled",false);
                return false;
            }

            $("#responseDiv").html("Importing service, please wait...").show();
            $(".result").remove();
            $("#tableDiv").hide();
            $("#dataTable").html("");
            $(".error").html("");
            $("#submit_button").prop("disabled",true);
            e.preventDefault();
            var url = $("#service_register_form").attr( "action" );

            $.ajax({
                type: "POST",
                url: url,
                dataType: "json",
                data: $("#service_register_form").serialize(), // serializes the form's elements.
                progress: function(jqXHR, progressEvent) {
                    if (progressEvent.lengthComputable) {
                        console.log("Importing service and layers - " + (Math.round(progressEvent.loaded / progressEvent.total * 100)) + "%");
                    } else {
                        console.log("Importing service and layers...");
                    }
                },
                success: function(data)
                {
                    $("#submit_button").prop("disabled",false);
                    $("#responseDiv").html("");
                    for (var item in data) {
                        if (data[item].available_layers) {
                            $.each(data[item].available_layers,function(i,row){
                                $('<tr>').attr('id',i).
                                        append($('<td>').text(row[0])).
                                        append($('<td>').text(row[1])).appendTo('#dataTable');
                            });
                            $("#tableDiv").show();
                        }
                        if (data[item].service_id) {
                            $('<div>').attr("class", "result").append($('<a>').
                                            attr('href', "/services/" + data[item].service_id).
                                            text(data[item].service_title||data[item].service_name)).
                                    appendTo("#responseDiv");
                        }
                        else {
                            $('<h4>').attr("class", "result").text(data[item].msg).appendTo("#responseDiv");
                        }
                        $("#responseDiv").show();
                    }
                },
                error: function(data) {
                    $("#submit_button").prop("disabled",false);
                    $(".error").html(data.responseText);
                    $(".error").show();
                }
            });

            return false; // avoid to execute the actual submit of the form.
        });
    });
</script>
{% endblock %}