{% extends "base.html" %}

{% block head %}

<!--     <link rel="stylesheet" href="/static/flexigrid/css/flexigrid.pack.css" />
	<script src="/static/flexigrid/js/flexigrid.pack.js"></script>	 -->	
	
    <link rel="stylesheet" href="/static/jquery.jqGrid/css/ui.jqgrid.css" />
	<script src="/static/jquery.jqGrid/js/jquery.jqGrid.min.js"></script>
	
	
<!--     <link rel="stylesheet" href="/static/jq-ingrid/css/ingrid.css" />
	<script src="/static/jq-ingrid/js/jquery.ingrid.js"></script> -->

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/1.7.3/jeditable.min.js"></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',
		 	});
  			$('.editable_text').editable('/registry/op_edit/', {
  				select : true,
  			});
	 	});
	 	
		$(function () {
        	$('#monthpicker').monthpicker();
        	// $('#grid').flexigrid();
        	
        	tableToGrid('#grid', {
        		width: 640,
        		height: 480,
        		shrinkToFit: false,
        	});
        	

   $("#grid").jqGrid('destroyFrozenColumns');
   $("#grid").jqGrid('setColProp', 2, {frozen:true});
   $("#grid").jqGrid('setFrozenColumns');
   $("#grid").trigger('reloadGrid', [{current:true}]);
        	
        	// $('#grid').ingrid();
      	});
	 	
		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 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 id='grid'>
	<thead>
		<tr style="background-color:#C0C0FF;">
			<th>選</th>
			<th>日期</th>
			<th>房</th>
			<th>序</th>
			<th>姓名</th>
			<th>病</th>
			<th>病房</th>
			<th>性</th>
			<th>齡</th>
			<th>診斷</th>
			<th>術式</th>
			<th>DR</th>
			<th>項目</th>
			<th>Memo</th>
			<th>Mobidity</th>
			<th>Mortality</th>
			<th>類</th>
			<th>帳</th>
			<th>麻</th>
			<th>起</th>
			<th>費</th>
			<th>刪</th>
		</tr>
	</thead>
	<tbody>
	{% for op in oplist %}
	    <tr>
			<td>{{forloop.counter}}</td>
	    	<td>{{op.OPDate|date:"md Y"}}</td>
	    	<td>{{op.OpRoomNo}}</td>
	    	<td>{{op.OpSeqNo}}</td>
	    	<td>{{op.PatName}}</td> 
			<td>{{op.PatChartNo}}</td>
	    	<td><span title='{{op.PatWard}}'>{{op.PatWard|slice:":5"}}</span></td>
	    	<td>{{op.PatSex}}</td>
	    	<td>{{op.PatAge|slice:":3"}}</td>
	    	<td>
	    		<a href="#" title='{{op.PatDignosis}}' onclick="showUrlInDialog('/registry/patho_report/{{op.PatChartNo}}/{{op.OPDate|date:"Y-m-d"}}/'); return false;">{{op.PatDignosis|truncatechars:20}}</a>
	    	</td>
			<td>	    	
				<a href="#" title='{{op.MainOpModeTitle}}' onclick="showUrlInDialog('/registry/op_note/{{op.PatChartNo}}/{{op.OPDate|date:"Y-m-d"}}/'); return false;">{{op.MainOpMode}}</a>
	    	</td>
	    	
	    	
	    	<td><nobr>{{op.OpDoctorName}}</nobr></td>
	    	<td>
	    		<div class="editable_select" id="category_{{op.id}}">
	    			{{op.category}}
	    		</div>
	    	</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>{{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>
{% endblock %}