{% extends "base.html" %}

{% block head %}
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/1.7.3/jeditable.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/css-spinning-spinners/1.1.0/load1.css">

	<script type="text/javascript">
		$(document).ready(function() {
  			$('.editable_select').editable('/registry/op_edit/', { 
	     		loadurl : '/registry/op_category/',
	     		type   : 'select',
	     		submit : 'OK',
		     	style: 'display: inline',
		 	});
  			$('.editable_text').editable('/registry/op_edit/', {
  				select : true,
  			});
  			
		    $( "#search_submit" ).click(function() {
		    	$('#loading').addClass('loading');
		    	// window.location.href = "http://www.google.com";
    		});

  			
	 	});
	 	

		function showUrlInDialogx(url, options){
		  options = options || {};
		  var tag = $("<div></div>"); //This tag will the hold the dialog content.
		  $.ajax({
		    url: url,
		    type: (options.type || 'GET'),
		    beforeSend: options.beforeSend,
		    error: options.error,
		    complete: options.complete,
		    success: function(data, textStatus, jqXHR) {
		      if(typeof data == "object" && data.html) { //response is assumed to be JSON
		        tag.html(data.html).dialog({modal: options.modal, title: data.title}).dialog('open');
		      } else { //response is assumed to be HTML
		        tag.html(data).dialog({modal: options.modal, title: options.title}).dialog('open');
		      }
		      $.isFunction(options.success) && (options.success)(data, textStatus, jqXHR);
		    }
		  });
		}	 	
	 	
		function showUrlInDialog(url){
		  var tag = $("<div></div>");
		  $.ajax({
		    url: url,
		    success: function(data) {
		      tag.html(data).dialog({
				dialogClass: "alert",
				modal: true,
				show: "slide",
				width: 640,
			    open: function(){
			        $("body").css("overflow", "hidden");
			    },
			    close: function(){
			        $("body").css("overflow", "auto");
			    },				
			}).dialog('open');
		    }
		  });
		}	 	
	 	
	</script>
	
    <style>
        .editable_select {
            white-space: nowrap;
        }
        .alert {
        	
/*		     visibility: hidden;*/
		    position: absolute;
		    left: 0px;
		    top: 0px;
		    width:100%;
		    height:100%;
		    text-align:center;
		    z-index: 1000;
		     
		    background-color: #000000;
		    }
		     
		.reportQuery{
		 	overflow-y: auto;
		 	height: 480px;
		 	}
		 	 
    </style>
 	
{% endblock %}

{% block logo %}
	<h1><a href="#">{{specialty}} 病理報告搜尋 (Max: 2000 rows)</a></h1>
{% endblock %}

{% block search %}

			<div id="accordion">
				<div class="card">
					<div class="card-header" id="headingTwo">
						<h5 class="mb-0">
							<button class="btn btn-primary" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
							Query tips!
							</button>
							<a href="https://whoosh.readthedocs.io/en/latest/querylang.html" target="_blank">query language</a>
						</h5>
					</div>
					<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
						<div class="card-body">
							<table class="table table-sm">
								<tr><td>單一關鍵字(非100%精確)</td><td>e.g. meningioma, metastatic, schwannoma</td><td>"malignant meningioma"</td></tr>
								<tr><td>含任一關鍵字</td><td>metastases OR metastasis OR metastatic</td><td>SSTR2a OR EMA</td></tr>
								<tr><td>含所有關鍵字</td><td>meningioma malignancy</td><td>meningioma AND malignancy</td></tr>
								<tr><td>排除關鍵字(慎用)</td><td>meningioma NOT atypical NOT malignancy</td><td>meningioma NOT (atypical OR malignancy)</td></tr>
								<tr><td>萬用字元(慢)</td><td>metasta*</td><td>metastas?s</td></tr>
							</table>
						</div>
					</div>
				</div>
			</div>

			<form method="post" action="">{% csrf_token %}
				<fieldset>
					<input type="text" name="q" id="search-text" size="15" value="{{q}}" />
					<input class="btn btn-primary" type="submit" id="search_submit"   name="search_submit"   value="GO" />
					<input class="btn btn-success" type="submit" id="search_xls"      name="search_xls"      value="匯出 Excel 2007-2013 XML 工作簿" />
					<!-- <input class="btn btn-info"    type="submit" id="search_category" name="search_category" value="匯出 Excel 97-2003 XLS 分類" /> -->
				</fieldset>
			</form>
{% endblock %}

{% block content %}
<div id="loading"></div>
{% if data %}
<table class="table">
	<thead>
		<tr style="background-color:#C0C0FF;">
	    	<th>counter</th>
	    	<th>病歷號</th>
	    	<th>ReportKey</th>
	    	<!-- <th>ReportCode</td> -->
	    	<th>PersonID</th>
	    	<th>病理號</th>
	    	<th>收件日</th>
	    	<th>報告日</th>
	    	<!-- <th>url</th> -->
	    	<th>html</th>
		</tr>
	</thead>
	<tbody>
	{% for report, report_text in data %}
	    <tr>
			<td>{{forloop.counter}}</td>
	    	<td>{{report.ChartNo}}</td>
	    	<td>{{report.ReportKey|slice:"-8:"}}</td>
	    	<!-- <td>{{report.ReportCode}}</td> -->
	    	<td>{{report.PersonID}}</td>
	    	<td>{{report.PathCode}}</td>
	    	<td>{{report.SpecimenGetDate|date:"Y-m-d"}}</td>
	    	<td>{{report.ReportDate|date:"Y-m-d"}}</td>
	    	<!-- <td>{{report.html|length}} {{report.html|striptags|length}} {{report_text|length}}</td> -->
	    	<!-- <td>{{report.url}}</td> -->
			<td>
				<a href="#" title='{{report_text}}' onclick="showUrlInDialog('/registry/patho_report/{{report.ChartNo}}/{{report.SpecimenGetDate|date:"Y-m-d"}}/'); return false;">{{report_text|truncatewords:20}}</a>
			</td>
	    </tr>
	{% endfor %}
	</tbody>
</table>
{% endif %}
{% endblock %}