{% 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-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/2.0.18/jquery.jeditable.min.js" integrity="sha512-Jn+modod+CgT0sdSdiL5Zr74JeTDTR2DGzeSRG1oUVnZjZFnkdSPOFUiwAr/St/lIvYEyBaZ6F46vJE4fbHg6A==" crossorigin="anonymous"></script>
	<script type="text/javascript">
		$(document).ready(function() {
  			$('.editable_select').editable('/registry/op_edit/', { 
	     		loadurl : '/registry/op_category/',
	     		type   : 'select',
	     		submit : 'OK',
		     	// style: 'display: inline',
		     	// style   : 'inherit',
		     	// cssclass   : 'inherit',
		 	});
  			$('.editable_text').editable('/registry/op_edit/', {
  				// select : true,
		     	// style   : 'inherit',
		     	// cssclass   : 'inherit',
  			});
  			
	      	$("#monthpicker").datepicker( {
	    		format: "mm/yyyy",
	    		viewMode: "months", 
	    		minViewMode: "months"
			});
  			
	 	});
	 	
		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;
		 	}
		 	
		.standard {
			background-color: #ffffff;
		}
		
		.queryTableDisplay {
			background-color: #ffffff;
		}
		 	 
    </style>
 	
{% endblock %}

{% block search %}
<form name="input" action="." method="post">{% csrf_token %}
	Month: <input type="text" id="monthpicker" name="month" size="1" /> 
	<input type="submit" value="Go" />
</form>
{% endblock %}

{% block content %}
<table class="table table-condensed">
	<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>
			<td>圖片</td>
		</tr>
	</thead>
	<tbody>
	{% for op in oplist %}
	    <tr>
			<td>{{forloop.counter}}</td>
	    	<td>{{op.OPDate|date:"Y md"}}</td>
	    	<td>{{op.OpRoomNo}}<br/>
	    	{{op.OpSeqNo}}</td>
	    	<td><nobr>{{op.PatName}}</nobr>
		{{op.PatChartNo}}</td>
	    	<td><span title='{{op.PatWard}}'>{{op.PatWard|slice:":5"}}</span>
	    	{{op.PatSex}}
	    	{{op.PatAge|slice:":3"}}</td>
	    	<td><table class="table borderless">
	    	<tr>
	    	<td>
	    		<a href="#" title='{{op.PatDignosis}}' onclick="showUrlInDialog('/registry/patho_report/{{op.PatChartNo}}/{{op.OPDate|date:"Y-m-d"}}/'); return false;">{{op.PatDignosis|truncatechars:50}}</a>
<!-- 	    		<span title='{{op.PatDignosis}}'>{{op.PatDignosis|truncatechars:20}}</span> -->
	    	</td>
<!-- 	    	<td><span title='{{op.MainOpModeTitle}}'>{{op.MainOpMode}}</span></td> -->
			<td>	    	
<!-- 	    	<a href="#" title='{{op.MainOpModeTitle}}' onclick="showUrlInDialog('/registry/op_note/{{op.PatChartNo}}/{{op.OPDate|date:"Y-m-d"}}/', {modal: true; error: function() { alert('Could not load form') }}); return false;">{{op.MainOpMode}}</a> -->
			<a href="#" title='{{op.MainOpModeTitle}}' onclick="showUrlInDialog('/registry/op_note/{{op.PatChartNo}}/{{op.OPDate|date:"Y-m-d"}}/'); return false;">{{op.MainOpMode}}</a>
	    	</td>
	    	</tr>
	    	<tr>
	    	<td colspan=2>
	    		{% if op.category %}
	    		<div class="editable_select" id="category_{{op.id}}">
	    			{{op.category}}
	    		</div>
	    		{% else %}
<!-- 	    		<strong> -->
	    		<div class="editable_select" id="category_{{op.id}}">
	    			{{op.category}}
	    		</div>
<!-- 	    		</strong> -->
	    		{% endif %}
	    	</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>
                <td>
					<!--a href="#" title='{{op.MainOpModeTitle}}' onclick="showUrlInDialog('/registry/op_picture/{{op.PatChartNo}}/{{op.OPDate|date:"Y-m-d"}}/'); return false;"-->
					<!--a href="/upload/new/?content_type={{content_type|urlencode}}&object_id={{op.id|urlencode}}" target="_blank"-->
					<!--a href="/upload/new/?content_type={{content_type}}&object_id={{op.id}}" target="_blank"-->
					<a href="{% url 'upload-new-object' content_type op.id %}" target="_blank">
						<!--img src='{{open_icon_library}}/icons/png/16x16/actions/edit-picture.png' /-->
						<!-- <img src='{{open_icon_library}}/icons/png/32x32/mimetypes/crystal-style/image-x-generic.png' /> -->
						<i class="fas fa-images"></i>
                	</a>
            	</td>
                
	    </tr>
	{% endfor %}
	</tbody>
</table>
{% endblock %}