{% extends "base.html" %}

{% block head %}

	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/1.7.3/jeditable.min.js"></script>

	<script>
	
		var date1 = 0;
		var rooms1 = {{rooms_json|safe}};
		
		function redrawtable(){
			if (date1 == 0) {
				$('#header1').text( "All" );
		        $('.cAll').hide();
				$('.cAll').show("blind");
			} else {
				$('#header1').text( date1 );
		        $('.cAll').hide();
		        $('.c'+date1.slice(-5)).show("blind");
			}
			
			rooms1 = [];
			
			{% for room in rooms %}
				if(!$("#cbi{{room}}").prop("checked")) {
					// simply pass 0 as the duration, so it triggers the animation version of .hide() which obeys the delay
					$(".r{{room}}").hide(0);
				} else {
					rooms1.push({{room}});
				}
			{% endfor %}
			
			
		}
		
		
		function windowopen (verb, url, data, target) {
		  var form = document.createElement("form");
		  form.action = url;
		  form.method = verb;
		  form.target = target || "_self";
		  if (data) {
		    for (var key in data) {
		      var input = document.createElement("textarea");
		      input.name = key;
		      input.value = typeof data[key] === "object" ? JSON.stringify(data[key]) : data[key];
		      form.appendChild(input);
		    }
		  }
		  form.style.display = 'none';
		  document.body.appendChild(form);
		  form.submit();
		}

	
		// jQuery(document).ready(function() {
		$(function() {

  			$('.editable_select').editable('/registry/op_edit/', { 
	     		loadurl : '/registry/op_category/',
	     		type   : 'select',
	     		submit : 'OK',
		     	// style: 'display: inline',
		     	style   : 'inherit'
		 	});
		 	
  			$('.editable_text').editable('/registry/op_edit/', {
  				// select : true,
		     	style   : 'inherit'
  			});
  		
			$('#bAll').click(function() {
				date1 = 0;
				redrawtable();
			});
			{% for date in dates %}
	  		$('#b{{date|date:"m-d"}}').click(function() {
		        date1 = '{{date|date:"Y-m-d"}}';
				redrawtable();
		    });
			{% endfor %}

			$('#cbiAll').click(function() {
				
			   if($("#cbiAll").prop("checked"))
			   {
				 $('.btn-room').prop("checked", true);
			     // $('.btn-room').each(function() {
			         // $(this).prop("checked", true);
			     // });
			   }
			   else
			   {
				 $('.btn-room').prop("checked", false);
			     // $('.btn-room').each(function() {
			         // $(this).prop("checked", false);
			     // });           
			   }
				
				redrawtable();
			});
			
			$('.btn-room').click(function() {
				$('#cbiAll').prop("checked", false);
				redrawtable();
			});
			
			$('#bPrint').click(function() {
				var url = '.?print1=1&date1='+date1;
				// window.open(url);
				var url = '.';
				
				windowopen('GET', url, {
					print1: 1, 
					date1: date1, 
					rooms1: rooms1,
					csrf_token: '{{csrf_token}}',
					} , '_blank');
				
				// windowopen('POST', url, {request: {
					// print1: 1, 
					// date1: date1, 
					// rooms1: rooms1,
					// csrf_token: '{{csrf_token}}',
					// }} , '_blank');
					
			});
  			
		    $( "#bRenew" ).click(function() {
		    	$('#loading').addClass('loading');
		    	// window.location.href = "http://www.google.com";
    		});
  				
  			// $('.grid').isotope({
  				// // options
  				// itemSelector: '.grid-item',
  				// layoutMode: 'vertical',
  				// vertical: {
  					// // align to origin edge
  					// horizontalAlignment: 0
				// },
			// });
  			
    $('a[data-confirm]').click(function(ev) {
        var href = $(this).attr('href');

        if (!$('#dataConfirmModal').length) {
            $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>');
        } 
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmOK').attr('href', href);
        $('#dataConfirmModal').modal({show:true});
        return false;
    });
  			
	 	});
	 	

		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;
		 	}
		 	
		.nobr {white-space: nowrap}	
		
		.span-all {
		  -webkit-column-span: all;
		  -moz-column-span: all;
		  column-span: all;
		  margin: 1em auto;
		  border-style: dashed;
		  border-width: 1px 0 0;
		  border-top-color: #e74c3c;
		}

		tr.first  td {
			border-top: thin solid black; 
			border-bottom: none;
			padding-top: 8px; 
			padding-left: 8px;
			padding-right: 8px;
			}
		tr.second td {
			border-top: none; 
			border-bottom: thin solid black; 
			padding-bottom: 8px; 
			padding-left: 8px;
			padding-right: 8px;
			}
				 
    </style>
 	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/css-spinning-spinners/1.1.0/load1.css">

{% endblock %}

{% block search %}
	<!-- <div class="btn-group" data-toggle="buttons" role="group" aria-label="..."> -->
	<div class="btn-group" role="group" aria-label="...">
	  	<!-- <button id='bAll' type="button" class="btn btn-default">All</button> -->
	  
	  	<label id="bAll" class="btn btn-default active">	
    		<input type="radio" name="options" id="biAll" autocomplete="off" checked> All
  		</label>	  
	{% for date in dates %}
	  	<!-- <button id='b{{date|date:"m-d"}}' type="button" class="btn {% cycle 'btn-primary' 'btn-success' 'btn-info' 'btn-warning' 'btn-danger' %}">{{date|date:"m/d(D)"}}</button> -->
	  
	  	<label id='b{{date|date:"m-d"}}' class="btn {% cycle 'btn-primary' 'btn-success' 'btn-info' 'btn-warning' 'btn-danger' %}">	
    		<input type="radio" name="options" id='bi{{date|date:"m-d"}}' autocomplete="off"> {{date|date:"m/d(D)"}}
  		</label>	
  	{% endfor %}
	</div>
	
	<div class="btn-group pull-right">
		<a href=".?renew1=1" id='bRenew' type="button" class="btn btn-warning">Renew</a>
		<button id='bPrint' type="button" class="btn btn-danger">Print</button>
	</div>
	
	<div>
		<br/>
	</div>		
	
	<!-- <div class="btn-group" data-toggle="buttons"> -->
	<div class="btn-group">
	<label id='cbAll' class="btn btn-default">
		<input id='cbiAll' class="btn-roomx" type="checkbox" value="" checked>All rooms
	</label>
	{% for room in rooms %}
		<label id='cb{{room}}' class="btn {% cycle 'btn-primary' 'btn-success' 'btn-info' 'btn-warning' 'btn-danger' %}">
			<input id='cbi{{room}}' class="btn-room" type="checkbox" value="" checked>{{room}}
		</label>
	{% endfor %}
	</div>
		
{% endblock %}

{% block content %}
<div id="loading"></div>
<h1 id="header1" class="text-center">
	All
</h1>


<table id="data" class="nobr">
	<thead>
		<tr class="second" style="background-color:#C0C0FF;">
			<td>選</td>
			<td>日期</td>
			<td>房</td>
			<td>序</td>
			<td>姓名</td>
			<td>病房</td>
			<td>病</td>
			<td>性</td>
			<td>齡</td>
			<td>診斷</td>
			<td>術式</td>
			<td>主治醫師</td>
			<td>起</td>
			<td>費</td>
		</tr>
	</thead>
	<tbody class="grid">
	{% for op in oplist %}
	    <tr class="grid-item first cAll c{{op.OPDate|date:"m-d"}} r{{op.OpRoomNo}}">
			<td>
				<a type="button" class="btn btn-default btn-xs" href="?delete1={{op.id}}" data-confirm="Are you sure you want to delete?">
  					<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
				</a>
				{{forloop.counter}}
			</td>
	    	<td>{{op.OPDate|date:"m/d"}}</td>
	    	<!-- <td>{{op.OPDate}}</td> -->
	    	<td>{{op.OpRoomNo}}</td>
	    	<td>{{op.OpSeqNo}}</td>
	    	<td>{{op.PatName}}</td>
	    	<td>{{op.PatWard}}</td>
			<td>{{op.PatChartNo}}</td>
			<td>{{op.PatSex}}</td>
			<td>{{op.PatAge|slice:":3"}}</td>
	    	<td>
	    		<div class="editable_text" id="PatDignosis_{{op.id}}">{{op.PatDignosis}}</div>
	    	</td>
	    	<td>{{op.MainOpMode}}</td>
	    	<td>{{op.OpDoctorName}}</td>
            <td>{{op.StartTime|time:"H:i"}}</td>
            <td>{{op.SpendTime}}</td>
	    </tr>
	    <tr class="grid-item second cAll c{{op.OPDate|date:"m-d"}} r{{op.OpRoomNo}}">
	    	<td colspan="100%">
	    		{{op.Remark}}
	    	</td>
	    </tr>
	{% endfor %}
	</tbody>
</table>
{% endblock %}