{% 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}} 手術病例搜尋</a></h1>
{% endblock %}

{% block search %}
			<h3><a href="#">Max: 2000 rows</a></h3>
			<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>
	<thead>
		<tr style="background-color:#C0C0FF;">
			<td>選</td><td>日期</td><td>房<br/>序</td><td>姓名</td><td>病房 性 齡</td>
			<td><table>
			<tr><td>診斷</td><td>術式</td><tr>
			<tr><td colspan=2>項目</td></tr>
			</table></td>
			<td>Memo</td>
			<td>Mobidity</td>
			<td>Mortality</td>
			<td>DR</td>
			<td>類</td><td>帳</td><td>麻</td><td>起</td><td>費</td><td>刪</td>
		</tr>
	</thead>
	<tbody>
	{% for note, op in data %}
	    <tr>
			<td>{{forloop.counter}}</td>
	    	<td>{{note.date|date:"Y md"}}</td>
	    	<td>{{op.OpRoomNo}}<br/>
	    	{{op.OpSeqNo}}</td>
	    	<td><nobr>{{op.PatName}}</nobr>
		{{note.PatChartNo}}</td>
	    	<td><span title='{{op.PatWard}}'>{{op.PatWard|slice:":5"}}</span>
	    	{{op.PatSex}}
	    	{{op.PatAge|slice:":3"}}</td>
	    	<td><table>
	    	<tr>
	    	<td>
	   			<a href="#" title='{{op.PatDignosis}}' onclick="showUrlInDialog('/registry/patho_report/{{note.PatChartNo}}/{{note.date|date:"Y-m-d"}}/'); return false;">{{op.PatDignosis|truncatechars:20}}</a>
	   		</td>
			<td>	    	
				<a href="#" title='{{op.MainOpModeTitle}}' onclick="showUrlInDialog('/registry/op_note/{{note.PatChartNo}}/{{note.date|date:"Y-m-d"}}/'); return false;">{{op.MainOpMode}}</a>
	    	</td>
	    	</tr>
	    	<tr>
	    	<td colspan=2>
	    		<div class="editable_select" id="category_{{op.id}}">
	    			{{op.category}}
	    		</div>
	    	</td>
	    	</tr>
	    	</table></td>
	    	<td>
	    		<div class="editable_text" id="Memo_{{op.id}}">{{op.Memo}}</div>
	    	</td>
	    	<td>
	    		<div class="editable_text" id="Morbidity_{{op.id}}">{{op.Morbidity}}</div>
	    	</td>
	    	<td>
	    		<div class="editable_text" id="Mortality_{{op.id}}">{{op.Mortality}}</div>
	    	</td>
		    	<td><nobr>{{op.OpDoctorName}}</nobr></td>
                <td>{{op.OpTypeName}}</td>
                <td>{{op.Complete|slice:":1"}}</td>
                <td>{{op.Anes|slice:":1"}}</td>
                <td>{{op.StartTime|time:"H:i"}}</td>
                <td>{{op.SpendTime}}</td>
                <td></td>
	    </tr>
	{% endfor %}
	</tbody>
</table>
{% endif %}
{% endblock %}