@(resType: String, id: String, contentDiv: String)(implicit user: Option[models.User])
@import api.Permission
@*The permission for curationObject and CurationFile is check outside this file*@
@if(resType == "dataset" && Permission.checkPermission(Permission.AddMetadata, ResourceRef(ResourceRef.dataset, UUID(id)))
        || resType == "file" && Permission.checkPermission(Permission.AddMetadata, ResourceRef(ResourceRef.file, UUID(id)))
        || resType.startsWith("curation")) {
    <div id="@id" class="panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    <h5>Add metadata</h5>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <form class="form-horizontal form-md">
                        <select id="add-metadata-select">
                            <option value=""></option>
                        </select>
                    </form>
                </div>
            </div>

            <div id="selected_field" class="row"></div>
        </div>
    </div>
}
<link rel="stylesheet" href="@routes.Assets.at("stylesheets/chosen.css")">
<link rel="stylesheet" href="@routes.Assets.at("stylesheets/jquery-ui-timepicker-addon.css")">
<script src="@routes.Assets.at("javascripts/chosen.jquery.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/select2.min.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/handlebars-v1.3.0.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/handlebars-loader.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/errorRedirect.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/terraformer/terraformer-1.0.5.min.js")"></script>
<script src="@routes.Assets.at("javascripts/terraformer/terraformer-wkt-parser-1.1.0.min.js")"></script>

<style>
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
</style>

<script>
    // Assumption: the input list contains: <cat_short_name>;<cat_display_name> or <cat_short_name>:<var_name>, where <cat_display_name> contains no ":", and <var_name> contains no ";".
    $.widget( "custom.catcomplete", $.ui.autocomplete, {
        _create: function() {
            this._super();
            this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
        },
        _renderMenu: function( ul, items ) {
            var that = this;
            var currentCategory = "";
            var category = "";
            var dispCatMap = new Map();
            $.each( items, function( index, item ) {
                //console.log("in renderMenu: item: ", item);
                var label = item.label;
                var char_index = label.indexOf(";");
                if (char_index > -1) {
                    var shortName = label.slice(0, char_index);
                    var displName = label.slice(char_index + 1);
                    //console.log("Setting category name '" + shortName + "' to '" + displName + "'");
                    dispCatMap.set(shortName, displName);
                }
            });
            $.each( items, function( index, item ) {
                var li;
                // Each item from an original array of strings was converted to an object { label: "val1", value: "val1" }.
                //console.log("item: ", item);
                var label = item.label;
                var char_index = label.indexOf(":");
                if (char_index > -1) {
                    category = label.slice(0, char_index);
                    item.label = label.slice(char_index + 1);
                }
                if ( category != currentCategory ) {
                    //console.log("category changed from " + currentCategory + " to: " + category);
                    var displayed_cat_name = category;
                    if (dispCatMap.has(category)) {
                        displayed_cat_name = dispCatMap.get(category);
                    }
                    ul.append( "<li class='ui-autocomplete-category'>" + displayed_cat_name + "</li>" );
                    currentCategory = category;
                }
                // Used to be: Display only the items containing ":".
                // Don't display the items containing ";".
                if (label.indexOf(";") <= 0) {
                    li = that._renderItemData( ul, item );
                }
            });
        }
    });
</script>

<script language="javascript">
    // submit metadata value to server
    function submit_@id
    (event){
        event.preventDefault();
        var field_label = $("#@id  #field-value").data("label");
        var field_id = $("#@id  #field-value").data("id");
        var field_type = $("#@id  #add-metadata-select option:selected").data("type");
        var field_value = "";
        var field_types_with_simple_values = {"string": 1, "listjquery": 1, "listgeocode": 1, "scientific_variable": 1,
            "datetime": 1, "wktlocation": 1};
        console.log(field_label, field_id, field_type);
        if (field_type in field_types_with_simple_values) {
            field_value = $("#@id  #field-value").val();
        } else if (field_type === "list") {
            field_value = $("#@id  #field-value option:selected").val();
        }  else {
            console.log("Wrong field_type: " + field_type);
        }

        // submit metadata to server
        // console.log("field type: " + field_type + ", field_value: " + field_value);
        var error = false;
        if (field_value != "") {
            var context = {};
            context[field_label] = field_id;
            var content = {};
            if (field_type === "listgeocode") {
                // geocode example: "Champaign, IL, USA: 40.12, -88.24"
                var parts = field_value.split(":");
                content[field_label] = parts[0].trim();
                var lat_lng = parts[1].trim().split(",");
                content["Latitude"] = lat_lng[0].trim();
                content["Longitude"] = lat_lng[1].trim();
            } else if (field_type === "scientific_variable") {
                content[field_label] = field_value;
                var unit_val = $("#@id #unit-value").val();
                if (unit_val) {
                    content["Unit"] = unit_val;
                }
            } else if (field_type === "wktlocation") {
                try {
                    var primitive = Terraformer.WKT.parse(field_value);
                    console.log("Parse wkt " + primitive);
                    content["GeoJSON"] = primitive;
                } catch(err) {
                    notify("There is an error in your WKT. " + err, "error", false, 2000);
                    error = true;
                }
            } else {
                content[field_label] = field_value;
            }

            var body = {
                    "@@context": context,
                    "@(resType)_id": "@id",
                    "content": content
            };

            if (!error) {

                var request = jsRoutes.api.Metadata.addUserMetadata().ajax({
                    data: JSON.stringify(body),
                    type: 'POST',
                    contentType: "application/json"
                });

                request.done(function (response, textStatus, jqXHR) {
                    // reset submission value
                    $("#@id #selected_field").empty();
                    if($('#'+'@contentDiv'+' .panel').length == 0) {
                        $('#' + "@contentDiv").empty();
                    }
                    $('#'+"@contentDiv").prepend(response);
                    $("#@id #add-metadata-select").select2("val", "");
                    notify("Metadata successfully added.", "success", false, 2000);
                });

                request.fail(function (jqXHR, textStatus, errorThrown){
                    console.error("The following error occured: " + textStatus, errorThrown);
                    var errMsg = "You must be logged in to add metadata";
                    if (!checkErrorAndRedirect(jqXHR, errMsg)) {
                      notify("Metadata was not added due to : " + errorThrown, "error");
                    }
                });
            }

        }
    }
    var url = jsRoutes.api.Metadata.getDefinitions();
    var showSpaceInfo = false;
    if("@resType" == "dataset") {
        if(spaceId == "") {
            url = jsRoutes.api.Datasets.getMetadataDefinitions("@id");
            showSpaceInfo = true;
        } else {
            url = jsRoutes.api.Datasets.getMetadataDefinitions("@id", spaceId);
        }
    } else if ("@resType" == "file") {
        if(spaceId == "") {
            showSpaceInfo = true;
            url = jsRoutes.api.Files.getMetadataDefinitions("@id");
        } else {
            url = jsRoutes.api.Files.getMetadataDefinitions("@id", spaceId);
        }

    } else if ("@resType" == "curationObject") {
        url = jsRoutes.api.CurationObjects.getMetadataDefinitions("@id");
    } else if ("@resType" == "curationFile") {
        url = jsRoutes.api.CurationObjects.getMetadataDefinitionsByFile("@id");
    }

    $("#@id #add-metadata-select").css( "width", "100%" );
    var $element = $("#@id  #add-metadata-select").select2({
        theme: "bootstrap",
        placeholder: "Select field",
        allowClear: true,
        minimumResultsForSearch: -1,
        delay: 250,
        dataType: 'json'
    });
    var $request = $.ajax({
        url: url.url,
    });
    $request.then(function (data) {
        var fields = data;
        for (var d = 0; d < fields.length; d++) {
            var item = fields[d];
            //console.log(item);
            // Create the DOM option that is pre-selected by default
            var option = new Option();
            option.id = item.id;
            option.text = item.json.label;
            option.value = item.json.uri;
            option.setAttribute('data-type', item.json.type);
            option.setAttribute('data-id', item.id);
            option.setAttribute('space_id', item.spaceId);

            // Append it to the select
            $element.append(option);
        }

        // Update the selected options that are displayed
        // register selection listener
        $("#@id #add-metadata-select").change(function () {
            $("#@id #add-metadata-select option:selected").each(function() {
                // create html form
                var field_label = $(this).text();
                var field_id = $(this).val();
                var field_type = $(this).data("type");
                var space_id = $(this).attr("space_id");
                // Create the template and HTML content.
                console.log(field_label, field_id, field_type, space_id);
                var template_map =
                {"string": "add_metadata_string",
                    "list": "add_metadata_list",
                    "listjquery": "add_metadata_listjquery",
                    "listgeocode": "add_metadata_string",
                    "scientific_variable": "add_metadata_scientific_variable",
                    "datetime": "add_metadata_datetime",
                    "wktlocation": "add_metadata_wktlocation",
                    "wkt": "add_metadata_wktlocation"
                };
                console.log(template_map[field_type]);
                var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/")" + template_map[field_type]);
                var html = modalTemplate({'field_label': field_label, 'field_id': field_id, 'field_type': field_type});
                var footerHtml = "";

                if(typeof space_id !== 'undefined' && showSpaceInfo) {
                    var request2 = jsRoutes.api.Spaces.get(space_id).ajax({
                        type: 'GET',
                        contentType: "application/json"
                    });
                    request2.done(function (response, textStatus, jqXHR) {
                        var footerTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/footer")");
                        var spaceName= response.name;
                        footerHtml = footerTemplate({'space_name': spaceName, 'space_url': jsRoutes.controllers.Spaces.getSpace(space_id).url, 'uri':field_id });
                        $('#@id  #selected_field').html(html + footerHtml);
                        // register submit listener
                        $("#@id  #add-metadata-button").click(submit_@id);
                    });
                    request2.fail(function (jqXHR, textStatus, errorThrown){
                        $('#@id  #selected_field').html(html);
                        // register submit listener
                        $("#@id  #add-metadata-button").click(submit_@id);
                    });
                } else {
                    $('#@id  #selected_field').html(html);
                    // register submit listener
                    $("#@id  #add-metadata-button").click(submit_@id);
                }

                if (field_type === "scientific_variable") {
                    // Find the field with the specific uri.
                    var field = $.grep(fields, function(e){ return e.json.uri == field_id; });
                    console.log(field_label, field_id, field_type, space_id, field);
                    $("#@id  #field-value").catcomplete({
                        minLength: 3,
                        source: function( request, response ) {

                            var useSyn = $("#@id  #useSynonyms").prop("checked");
                            var query_param = field[0].json.query_parameter;
                            var url = encodeURIComponent(field[0].json.definitions_url + "?" + query_param + "=" + request.term + "&useSynonyms=" + useSyn);
                            $.ajax({
                                url: jsRoutes.api.Metadata.getUrl(url).url,
                                //dataType: "jsonp",
                                dataType: "json",
                                //data: { term: request.term, useSynonyms: useSyn },
                                success: function( data ) {
                                    // The vars list is in data.vars_data, and the categories in data.cat_data. Assuming that "listjquery" will use a URL that returns filtered data, we don't filter again. Returns cat_data with the vars listif present, otherwise returns the original data.
                                    if ('cat_data' in data) {
                                        var res = data.cat_data.concat(data.vars_data);
                                        response(res);
                                    } else {
                                        response(data);
                                    }
                                }
                            });
                        }
                    });
                    $("#@id #unit-value").autocomplete({
                        minLength: 1,
                        source: function( request, response ) {
                            var url = encodeURIComponent(field[0].json.definitions_url);
                            $.ajax({
                                url: jsRoutes.api.Metadata.getUrl(url).url,
                                dataType: "json",
                                success: function( data ) {
                                    if (! ('unit_data' in data)) {
                                        response(Array("Error: no unit_data field in the returned result."));
                                    } else {
                                        var searchspace = data.unit_data;
                                        var searchwords = request.term.split(" ");
                                        $.each(searchwords, function() {
                                            searchspace = $.ui.autocomplete.filter(searchspace, this);
                                        });
                                        response(searchspace);
                                    }
                                }
                            });
                        }
                    });
                } else if (field_type === "datetime") {
                    // This widget uses the ISO 8601 format, such as 2016-01-01T10:00:00-06:00 or 2016-01-01T10:00:00Z.
                    // This uses Trent Richardson's jQuery UI Timepicker add-on.
                    // jQuery UI Datepicker options: http://api.jqueryui.com/datepicker/
                    // jQuery UI Timepicker addon options: http://trentrichardson.com/examples/timepicker/
                    $("#field-value").datetimepicker(
                            { controlType: 'select',
                                // Uses "select" instead of the default slider.
                                // If we put "T" in the "separator" option instead of "timeFormat", the widget changes 2-digit year values xx we put directly into the field to 20xx; if we put "T" in timeFormat, then the year values are kept. So we used the latter.
                                dateFormat: $.datepicker.ISO_8601,
                                timeFormat: "'T'HH:mm:ssZ",
                                separator: '',
                                // Allows direct input.
                                timeInput: true
                            });
                } else if (field_type === "listjquery") {
                    // Find the field with the specific uri.
                    var field = $.grep(fields, function(e){ return e.json.uri == field_id; });
                    $("#@id #field-value").autocomplete({
                        minLength: 3,
                        source: function( request, response ) {
                            // Get the query parameter from the saved json, not hardcoded.
                            var query_param = field[0].json.query_parameter;
                            var url = encodeURIComponent(field[0].json.definitions_url + "?" + query_param + "=" + request.term);
                            $.ajax({
                                url: jsRoutes.api.Metadata.getUrl(url).url,
                                dataType: "json",
                                success: function( data ) {
                                    var searchspace = data;
                                    var searchwords = request.term.split(" ");
                                    $.each(searchwords, function() {
                                        searchspace = $.ui.autocomplete.filter(searchspace, this);
                                    });
                                    response(searchspace);
                                }
                            });
                        }
                    });
                } else if (field_type === "listgeocode") {
                    // Find the field with the specific uri.
                    var field = $.grep(fields, function(e){ return e.json.uri == field_id; });
                    $("#@id  #field-value").autocomplete({
                        minLength: 3,
                        source: function( request, response ) {
                            // Sets a variable query parameter in $.ajax.data below.
                            var query_param = field[0].json.query_parameter;
                            var url = encodeURIComponent(field[0].json.definitions_url + "?" + query_param + "=" + request.term);
                            $.ajax({
                                url: jsRoutes.api.Metadata.getUrl(url).url,
                                //dataType: "jsonp",
                                dataType: "json",
                                //data: query_data,
                                success: function( data ) {
                                    // Assuming that the remote service returns filtered data, no need to filter again.
                                    response(data);
                                }
                            });
                        }
                    });
                } else if (field_type === "list") {
                    // find field with the specific uri
                    var field = $.grep(fields, function(e){ return e.json.uri == field_id; });

                    // make call to external service
                    var request = jsRoutes.api.Metadata.getDefinition(field[0].id).ajax({
                        type: 'GET',
                        contentType: "application/json"
                    });

                    request.done(function (response, textStatus, jqXHR) {
                        var vocabulary = JSON.parse(response);
                        // modalTemplate was assigned above using the map.
                        var html = modalTemplate({'field_label': field_label, 'field_id': field_id, 'field_type': field_type,
                            'options': vocabulary});
                        $("#@id  #selected_field").html(html + footerHtml);
                        // chosen pulldown configuration
                        $("#@id  #field-value").chosen({
                            no_results_text: "Not found. Press enter to add ",
                            search_contains: true,
                            width: "100%",
                            placeholder_text_single: "Select field"});
                        // register submit listener
                        $("#@id  #add-metadata-button").click(submit_@id);
                    });

                    request.fail(function (jqXHR, textStatus, errorThrown){
                        console.error("The following error occured: " + textStatus, errorThrown);
                        notify("Could not retrieve external vocabulary: " + errorThrown, "error");
                    });
                }
            });
        });
    });
</script>