{% 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 ChartNo %}
        $("#DataTables_Table_0_filter > label > input[type=search]").val("{{ChartNo}}");
        $("#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 justify-content-center">
    <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" value={{ChartNo}}>
        </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="search" type="submit" class="btn btn-primary btn-sm d-flex"><span class="material-icons">search</span></button>
    </form>
</div>

<div class="d-flex justify-content-center my-1">
    {%if nhiorders%}
    <table>
        <thead>
            <tr>
                <th>病歷號</th>
                <th>病患姓名</th>
                <th>申請類別</th>
                <th>案件狀態</th>
                <th>科別</th>
                <th>送案日期</th>
                <th>申請項目</th>
                <th>項目名稱</th>
                <th>申請數量</th>
                <th>核定結果</th>
                <th>優先</th>
                <th>申請醫師</th>
            </tr>
        </thead>
        <tbody>
            {%for order in nhiorders %}
            <tr>
                <td>{{order.ChartNo}}</td>
                <td>{{order.PatientName}}</td>
                <td>{{order.ApplyTypeDesc}}</td>
                <td>{{order.StatusDesc}}</td>
                <td>{{order.NhiDeptName}}</td>
                <td>{{order.PackageTime}}</td>
                <td>{{order.OrderCode}}</td>
                <td>{{order.OrderName}}</td>
                <td>{{order.ResultDesc}}</td>
                <td>{{order.Quantity}}</td>
                <td>{{order.Priority}}</td>
                <td>
                {%if order.ApplyDoctor%}
                    {{order.ApplyDoctor}}
                {%else%}
                    <a href="{% url 'pre-case' %}?NHIOrder={{order.id}}" type="button" class="btn btn-primary btn-sm d-flex">認領</a>
                {%endif%}
                </td>
            </tr>
            {%endfor%}
        </tbody>
    </table>
    {%else%}
    <table>
        <tr><th>病歷號</th><td>{{pat.ChartNo}}</td></tr>
        <tr><th>病患姓名</th><td>{{pat.ChtName}}</td></tr>
        <tr><th>性別</th><td>{{pat.Sex}}</td></tr>
        <tr><th>生日</th><td>{{pat.Birth}}</td></tr>
    </table>
    {%endif%}
</div>


{%if nhiorders or pat%}
<div class="d-flex justify-content-center">
    {%if nhiorders %}
    若送核未通過，不必新增自費，只需編輯更改優先值即可
    <a href="{% url 'pre-case' %}?ChartNo={{ChartNo}}" type="button" class="btn btn-primary btn-sm d-flex mr-1"><span class="material-icons">edit</span>編輯</a>
    {%endif%}
    <a href="{% url 'pre-case' %}?ChartNo={{ChartNo}}&own=" type="button" class="btn btn-primary btn-sm d-flex"><span class="material-icons">add</span>自費</a>
</div>
{%endif%}

{% endblock %}

