{% extends 'base.html.twig' %}

{% trans_default_domain 'bibliography_list' %}

{% block body %}

    <div class="row">
        <div class="col-12">
            <div class="page-title">
                <div class="title_left">
                    <h3>PubMed search</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <form action="{{ path('search_pubmed') }}" method="get" class="form-inline">
                <input type="text" name="search" value="{{ search is defined ? search : '' }}" class="form-control mr-2 col-6" placeholder="Insert one or more terms to search" autocomplete="off" required="required">
                <button class="btn btn-info my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-12"><br></div>
    </div>

    {% if pubmedArticles is not null %}

        <h2>Pubmed articles</h2>

        {% include 'default/pagination.html.twig' %}

        <div class="row">
            <div class="col-6">
                <small>Pubmed articles found: {{ total }}</small>
            </div>
            <div class="col-6">
                <small class="float-right">Showing {{ (limit*(currentPage-1))+1 }} to {{ ((limit*currentPage) > total ? total : (limit*currentPage)) }} articles</small>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <table class="table">
                    <thead>
                        <tr>
                            <th>PMID</th>
                            <th style="width: 60%">Article</th>
                            <th>Authors</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% if pubmedArticles is not null and pubmedArticles|length > 0 %}
                        {% for article in pubmedArticles %}
                            {% if article is instanceof('\\Pubmed\\Article') %}
                            <tr>
                                <td id="{{ article.pubMedId }}">
                                    {#<a href="https://www.ncbi.nlm.nih.gov/pubmed/{{ article.pubMedId }}" target="_blank">{{ article.pubMedId }}</a>#}
                                    <a href="https://pubmed.ncbi.nlm.nih.gov/{{ article.pubMedId }}" target="_blank">{{ article.pubMedId }}</a>
                                    {% if article.bibliographyId %}
                                        <a href="{{ path("biblio_view", {"id": article.bibliographyId}) }}" target="_blank" style="margin-top:10px;display: block"><em><small>already in bibliography</small></em></a>
                                    {% else %}
                                        <label><input type="checkbox" name="pubmed-article" value="{{ article.pubMedId }}"> Import</label>
                                    {% endif %}
                                </td>
                                <td>
                                    <div rel="title">{{- article.articleTitle -}}</div>
                                    <a href="{{ path('view_pubmed_article', {"pubmedId": article.pubMedId}) }}" target="_blank"><small><em>{{- article.journalAbbr -}}<br>
                                    {{- article.pubYear }}; {{ article.volume }}:{{ article.pagination }}</em></small></a>
                                    <div rel="similar" class="invisible"><i class="fa fa-spinner fa-spin fa-1x fa-fw text-info" title="Check similar..."></i> Check similar ...</div>
                                </td>
                                <td>{{ article.authors|join(', ') }}</td>
                            </tr>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3"><button name="import-button" class="btn btn-info">Import selected article/s</button></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        {% include 'default/pagination.html.twig' %}

        {# workaround per precaricare lo spinner, altrimenit la prima volta non viene visualizzato #}
        <div id="spinner" style="position:absolute; left:-1000px"><i class="fa fa-spinner fa-spin fa-3x fa-fw" title="Importing..."></i></div>
    {% endif %}

{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        {# Rimozione dello spinner usato come workaround #}
        $(document).ready(function() {
            $("spinner").remove();

            $("input[name=pubmed-article]").on('change', function(elem) {
                var divSimilar = $(this).closest("tr").find("div[rel=similar]");

                if ( this.checked ) {
                    divSimilar.removeClass('invisible');
                    var title = $(this).closest("tr").find("div[rel=title]").text();
                    var url = "{{ path('biblio_check_similar') }}";
                    $.post(url, { title: title }, function(data) {
                        var items = [];
                        $.each(data, function (key, biblio) {
                            items.push('<li class="pb-2"><a href="/bibliography/view/' + biblio.id + '" target="_blank"><small>' + '(' + biblio.refId + ') ' + biblio.title + '</small></a></li>');
                        });

                        divSimilar.empty();

                        $("<hr/>").appendTo(divSimilar);
                        $("<ul/>", {
                            "class": "list-unstyled",
                            html: items.join("")
                        }).appendTo(divSimilar);
                    }, 'json');
                } else {
                    divSimilar.empty();
                    divSimilar.html('<i class="fa fa-spinner fa-spin fa-1x fa-fw text-info" title="Check similar..."></i> Check similar ...');
                    divSimilar.addClass('invisible');
                }
            });
        });

        $("button[name=import-button]").on('click', function() {
            //var articles = [];
            $("input:checked[name=pubmed-article]").each(function(index) {
                //articles.push($(this).val());
                //$('<span class="text-warning">Importing...</span>')
                var article = $(this).val();
                $("input[type=checkbox][value="+ article +"]").parent().remove();
                $("#" + article).append(
                    $('<i class="fa fa-spinner fa-spin fa-3x fa-fw text-info" title="Importing..."></i>')
                );

                $.post({
                    async: true,
                    data: {'pmid': article},
                    url: "{{ path('pubmed_import') }}"
                }).done(function(response) {
                    var url = "{{ path('biblio_view', {"id": 1111}) }}";
                    url = url.replace("1111", response.bibid);
                    $("#" + article).find("i.fa-spinner").remove();
                    $("#" + article)
                        .append(
                            $('<i class="fa fa-check text-primary" style="margin-right:2px"></i>')
                        )
                        .append(
                            $("<a></a>")
                                .attr("href", url)
                                .attr("target", "_blank")
                                .append(
                                    $("<small></small>").text("View bibliography")
                                )
                        );
                }).fail(function() {
                    $("#" + article).empty().append(
                        $('<span class="text-danger">Error during import</span>')
                    );
                });
            });
        });
    </script>
{% endblock %}