{% extends "base.html" %}
{#% load endless %#}
{% load static %}
{% block head %}

{% comment %}
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
{% endcomment %}

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css"> 
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>


<!-- Load js for initializing tables via their server-side options -->
<script type="text/javascript" charset="utf8" src="{% static 'js/datatableview.js' %}"></script>
<!-- <script type="text/javascript" src="{% static 'datatables_view/js/utils.js' %}"></script> -->

<script type="text/javascript">

    datatableview.auto_initialize = false;
    $(function(){




        var xeditable_options = {};
        datatableview.initialize($('.datatable'), {
            fnRowCallback: datatableview.make_xeditable(xeditable_options),


        });

    {% if search %}
        $("#DataTables_Table_0_filter > label > input[type=search]").val("{{search}}");
        $("#DataTables_Table_0_filter > label > input[type=search]").keyup();
    {% else %}
    {% endif %}

        $(".ApplyDoctor").click(function(){
                $("#DataTables_Table_0_filter > label > input[type=search]").val($(this).attr("doctor"));
                $("#DataTables_Table_0_filter > label > input[type=search]").keyup();
        });

        {% comment %}
        $(document).bind('keydown', 'right', function() {
            $("#DataTables_Table_0_next").click();
        });
        $(document).bind('keydown', 'left', function() {
            $("#DataTables_Table_0_previous").click();
        });        
        {% endcomment %}

    })

    $(function() {
        $('#btn-refresh').on('click', function() {
            var $this = $(this);
            var loadingText = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>  Loading...';
            if ($(this).html() !== loadingText) {
            $this.data('original-text', $(this).html());
            $this.html(loadingText);
            }
            setTimeout(function() {
            $this.html($this.data('original-text'));
            }, 20000);
        });
    });  

</script>
<style>

#topsection {
    background: #EAEAEA;
    height: 0px;
}

    table.dataTable.display tbody tr:hover {
        background-color: #44dd11;
    }

    table.dataTable tbody td {
        padding: 5px 10px;
    }    



</style>
{% endblock %}

{% block topsection %}
{% endblock %}

{% block menu %}
<h3>事前審查案件</h3>
<img src="/site_media/css/media/logo.gif" alt="NTUH CyberKnife" height="70" width="100%"/>
{% if user.is_authenticated %}
{{ user.username }} <a href=/accounts/logout/>登出</a>
{% else %}
<a href=/accounts/login/>登入</a>
{% endif %}
{% endblock %}


{% block content %}



    <div class="d-flex">
        <div>
            <!-- Total:{{total}} -->
            <button type="button" class="ApplyDoctor btn btn-secondary btn-sm" doctor="">全<span class="badge badge-light">{{total}}</span></button>
            {% for w in waiting_list %}
                {% if w.ApplyDoctor %}
                <button type="button" class="ApplyDoctor btn btn-primary btn-sm" doctor="{{w.ApplyDoctor}}">{{w.ApplyDoctor}}<span class="badge badge-light">{{w.count}}</span></button>
                {% else %}
                <button type="button" class="ApplyDoctor btn btn-danger btn-sm" doctor="{{w.ApplyDoctor}}">{{w.ApplyDoctor}}<span class="badge badge-light">{{w.count}}</span></button>
                {% endif %}
            {% endfor %} 
        </div>
        <div class="ml-auto">
            <form action={% url 'pre-add' %} class="form-inline">
                <div class="form-group">
                  <label for="txbChartNo">病歷號</label>
                  <input type="text" class="form-control" id="txbChartNo" name="ChartNo" placeholder="1234567">
                </div>
                <!-- <button id="btn-download" type="submit" class="btn btn-primary btn-sm mr-1 d-flex"><span class="material-icons">download</span>portal</button> -->
                <button name="own" type="submit" class="btn btn-primary btn-sm d-flex"><span class="material-icons">add</span></button>
            </form>
        </div>
        <div class="ml-auto">
                <form class="form-inline">
                    <button id="btn-refresh" name="refresh" type="submit" class="btn btn-primary btn-sm d-flex"><span class="material-icons">refresh</span>頁面</button>
            </form>
        </div>
    </div>
    <div class="d-flex">
            {{ datatable }}
    </div>

    <!-- <a href="#" id="status" data-type="select" data-pk="1" data-url="/post" data-title="Select status" data-source='/groups' 
        data-sourceOptions='{"headers":{"my-option-value":"boss","my-option-index":"3"}}'
        ></a>
    <script>
    $(function(){
        $('#status').editable({
            value: 2,    
        });
    });
    </script> -->




{% endblock %}

