{% if current_user.has_role('demo') %}
    {% extends "demo_layout.html" %}
{% else %}
    {% extends "layout.html" %}
{% endif %}

{% block morehead %}
    <link rel="stylesheet"
        href="{{ url_for('static', filename='css/search.css') }}">
    <link rel="stylesheet"
        href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
    <script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>    

{% endblock %}
{% block content %}

<h2>Search for slides</h2>
<div class="errors service-error"></div>
<div>
    <form id="search-form">
        <select id="search-field-select" name="qid">
            <option value="">Please select...</option>
            {% for sf in search_fields %}
                {% if qids.intersection(sf.qids) %}
                <option value="{{sf.qids|join(',')}}" selected="selected">{{sf.label}}</option>
                {% else %}
                <option value="{{sf.qids|join(',')}}">{{sf.label}}</option>
                {% endif %}
            {% endfor %}
        </select>
        <input type="text" id="search-box" name="ss" value="{{ss}}" maxlength="200" size="100" />
        <input id="search-submit" type="submit" value="Go" />
    </form>
</div>
<div class="slide-search-container">
    <div class="slide-search-table-wrapper">
        <p><strong>Click on the Slide to see preview</strong></p>
        <table cellpadding="2" cellspacing="2" id="slide-result-table" class="slide-search-results display">
            <thead>
                <!--
                <tr>
                    <th colspan="9">Annotated Slides Found</th>
                </tr>
        -->
                <tr>
                    <th class="no-sort">&nbsp;</th>
                    <th>Slide</th>
                    <th>Sample</th>
                    <th>Order</th>
                    <th>Species</th>
                    <th>Stain</th>
                    <th>Genotype</th>
                    <th>Tissue</th>
                    <th>Experimental Type</th>
                    <th>Search Ranking</th>
                </tr>
            </thead>
            <tbody>
                {% for s in slides %}
                    {% if s.slide_id %}
                    <tr data-slide-id="{{ s.slide_id }}">
                    {% else %}
                    <tr data-slide-id="">
                    {% endif %}
                        <td class="slide-preview"><span class="ui-button ui-icon ui-icon-triangle-1-w"></span></td>
                        <td align="center">
                            {% if s.is_archived %}
                                {{ s.slide_id }} (ARCHIVED)
                            {% else %}
                                {% if s.slide_id %}
                                <a href="/slides/{{s.slide_id}}" target="slide_{{s.slide_id}}">{{ s.slide_id }}</a>
                                {% else %}
                                n/a
                                {% endif %}
                            {% endif %}
                        </td>
                        {% if s.sample %}
                            <td align="center">{{ s.sample }}</td>
                        {% else %}
                            <td align="center">No associated sample found</td>
                        {% endif %}
                        <td align="center">
                            {% if current_user.has_role('demo') %}
                                N/A
                            {% else %}
                                <a href="/orders/{{s.order_id}}" target="order_{{s.order_id}}">{{ s.order_id }}</a>
                            {% endif %}
                        </td>
                        <td align="center">{{ s.species }}</td>
                        {% if s.slide_id %}
                            {% if s.stain %}
                                <td align="center">{{ s.stain }}</td>
                            {% else %}
                                <td align="center">Unknown</td>
                            {% endif %}
                        {% else %}
                                <td align="center">n/a</td>
                        {% endif %}
                        <td align="center">{{ s.gemm }}</td>
                        <td align="center">{{ s.bio_systems }}</td>
                        <td align="center">{{ s.experiment_types }}</td>
                        <td align="center">{{ s.score }}%</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div id="slide-preview"><img src="" /></div>
</div>
<script>
    /*
    function select_first_row() {
        console.log("selecting first row");
        var oTT = TableTools.fnGetInstance("#slide-result-table");
        oTT.fnSelect( $("#slide-result-table tbody:first-child")[0] );
    }
    */
    
    $(document).ready(function(){
        var qids = parseInt("{{qids|length}}");
        
        /*
        $("#search-submit").on("click", function(){
            var sstr = $("#search-box").val();
            if (sstr.length >= 3) {
                $("#search-form").submit();
            }
            else {
                alert("Search string must be at least 3 characters long.");
            }
        });
        */
        
        function processForm(e) {
            if (e.preventDefault) e.preventDefault();

            var sstr = $("#search-box").val();
            if (sstr.length >= 3) {
                $("#search-form").submit();
            }
            else {
                alert("Search string must be at least 3 characters long.");
            }
        }

        var form = document.getElementById('search-form');
        if (form.attachEvent) {
            form.attachEvent("submit", processForm);
        } else {
            form.addEventListener("submit", processForm);
        }

        var restable = $("#slide-result-table").DataTable({
            "order": [[1, 'desc']],
            "oLanguage": {
                "sSearch": "Filter records:"
            },
            "aoColumnDefs" : [ {
                "bSortable" : false,
                "aTargets" : [ "no-sort" ]
            } ]
        });

        $("#slide-preview img").hide();

        $("#slide-result-table tbody").on('click', 'tr', function(){
            if ( $(this).hasClass('selected') ) {
                $(this).removeClass('selected');
            }
            else {
                restable.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
                var slide_id = $(this).attr("data-slide-id");
                if (slide_id.length > 0) {
                    $.ajax({
                        url: "/slides/"+slide_id+"/thumbonly",
                        success: function(data) {
                            if (data.length > 0) {
                                $("#slide-preview img").show();
                                $("#slide-preview img").attr("src", data);
                                $(".errors").html("");
                            }
                            else {
                                $(".errors").html("Couldn't find a slide preview for slide with id "+slide_id);
                            }
                        }
                    });
                }
                else {
                    $(".errors").html("There are no slides available for that order.")
                }
            }
        });
        
        $("#search-box").autocomplete({
            minLength: 3,
            delay: 1000,
            source: function(req, resp) {
                var queryparams = "ss="+$("#search-box").val();
                $.ajax({
                    url: "/slide-auto?"+queryparams,
                    success: function(data) {
                        //var obj = JSON.parse(data);
                        resp(data.auto_list);
                    }
                });
            },
            
            focus: function(event, ui) {
                
            },

            select: function(event, ui) {
                event.defaultPrevented = true;
                
                document.location.href = ui.item.url;
            }
        });
    });
</script>
{% endblock %}