{% extends "base.html" %}

{% block head %}
{# include 'autocomplete_light/static.html' #}
  <!-- <script type="text/javascript" src="/site_media/js/ui.combobox.js"></script> -->
  <!-- <script type="text/javascript" src="/site_media/js/jquery.flexbox.js"></script> -->

  <script type="text/javascript" src="/site_media/quickselect/quicksilver.js"></script>
  <script type="text/javascript" src="/site_media/quickselect/jquery.quickselect.js"></script>
  <link rel="stylesheet" type="text/css" href="/site_media/quickselect/jquery.quickselect.css" />
  
  
  <link rel="stylesheet" href="/site_media/jquery.flexselect/flexselect.css" type="text/css" media="screen" />
  <!-- script src="jquery.min.js" type="text/javascript"></script -->
  <script src="/site_media/jquery.flexselect/liquidmetal.js" type="text/javascript"></script>
  <script src="/site_media/jquery.flexselect/jquery.flexselect.js" type="text/javascript"></script>
  
  

  <script type="text/javascript">
//    dojo.require("dijit.form.FilteringSelect");
//    dojo.require("dojox.data.QueryReadStore");
    
    function onChangeDiseaseStage() {
        if (document.treatmentForm.disease_stage.value == 5)
            document.treatmentForm.primary_tumor_site.disabled = false;
        else {
            document.treatmentForm.primary_tumor_site.value = "";
            document.treatmentForm.primary_tumor_site.disabled = true;
        }
    }
    
    function onLoadBody() {
    
        document.treatmentForm.disease_stage.onchange = onChangeDiseaseStage;
        onChangeDiseaseStage();
    }
  </script>

  <style>
    .select2-container {
        min-width: 30em !important;
    }
  </style>
  
{% endblock %}

{% block title %}
  Treatment Form
{% endblock %}

{% block content %}
  {% if object %}
    {{object.patient}} {{object.patient.medical_records}} 
    <h2>Update treatment</h2>
  {% else %}
    {{patient}} {{patient.medical_records}}
    <h2>Create treatment</h2>
  {% endif %}

  {% if form.errors %}
    <em>Please correct the following error{{ form.errors|pluralize }}:</em>
  {% endif %}

  <form method="post" action="" class="cssform" name="treatmentForm">{% csrf_token %}
    <p>{{form.patient.label_tag}}<input type="text" readonly="true" name="patient" id="id_patient"
      {% if object %}
        value = "{{object.patient.id}}"
      {% else %}
        value = "{{patient.id}}"
      {% endif %}
      />{{form.patient.errors}}</p>
    <p>{{form.bed.label_tag}}{{form.bed}}{{form.bed.errors}}</p>
    

    {% comment %}
    <p>{{form.icd9.label_tag}}{{form.icd9}}{{form.icd9.errors}}</p>
    <p>{{form.icd9.label_tag}}<input name ='icd9' id="id_icd9" />{{form.icd9.errors}}</p>
    <p>{{form.icd9.label_tag}}<div name ='icd9' id="id_icd9"></div>{{form.icd9.errors}}</p>



    SELECT icd10cm_id, COUNT(*)
    FROM ck_treatment
    GROUP BY icd10cm_id
    ORDER BY COUNT(*) DESC
    {% endcomment %}
    
    <div class="row">

      <div class="col-sm">
        {%if nhiorders %}
        <table>
          <thead>
              <tr>
                  <th>送案日期</th>
                  <th>疾病分類號</th>
                  <th>其他診斷</th>
                  <th>申請原因</th>
                  <th>核定結果</th>
              </tr>
          </thead>
          <tbody>
              {% for nhiorder in nhiorders %}
              <tr>
                  <td>{{nhiorder.PackageTime}}</td>
                  <td>{{nhiorder.Diagnosis}}</td>
                  <td>{{nhiorder.other_diagnosis}}</td>
                  <td>{{nhiorder.Reason}}</td>
                  <td>{{nhiorder.Quantity}}</td>
                </tr>
              {% endfor %}
          </tbody>
        </table>
        {% endif %}
        <p>{{form.icd10cm.label_tag}}{{form.icd10cm}}{{form.icd10cm.errors}}</p>
      </div>
      <div class="col-sm">
        <table class="table">
          <tbody>
            {% for icd10 in topicd10|slice:"0:5" %}
            <tr>
              <!-- <td><a class="select-icd10" ICD10CM="{{icd10.ICD10CM}}" ICD10CM-English="{{icd10.ICD10CM_English}}">{{icd10.ICD10CM}}</a></td> -->
              <td><button type="button" class="btn btn-primary btn-sm select-icd10" ICD10CM="{{icd10.ICD10CM}}" ICD10CM-English="{{icd10.ICD10CM_English}}">{{icd10.ICD10CM}}</button></td>
              <td>{{icd10.ICD10CM_Chinese}}</td>
              <td>{{icd10.ICD9CM_Chinese}}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    
    <p>{{form.other_diagnosis.label_tag}}{{form.other_diagnosis}}{{form.other_diagnosis.errors}}</p>
    <p>{{form.tracking_mode.label_tag}}{{form.tracking_mode}}{{form.tracking_mode.errors}}</p>
    <p>{{form.referral.label_tag}}{{form.referral}}{{form.referral.errors}}</p>
    <p>{{form.oncologist.label_tag}}{{form.oncologist}}{{form.oncologist.errors}}</p>
    <p>{{form.surgeon.label_tag}}{{form.surgeon}}{{form.surgeon.errors}}</p>
    <p>{{form.date_started.label_tag}}{{form.date_started}}{{form.date_started.errors}}</p>
    <p>{{form.date_completed.label_tag}}{{form.date_completed}}{{form.date_completed.errors}}</p>
    <p>{{form.accounting.label_tag}}{{form.accounting}}{{form.accounting.errors}}</p>
    <p>{{form.karnofsky_score.label_tag}}{{form.karnofsky_score}}{{form.karnofsky_score.errors}}</p>
    <p>{{form.disease_stage.label_tag}}{{form.disease_stage}}{{form.disease_stage.errors}}</p>
    <p>{{form.primary_tumor_site.label_tag}}{{form.primary_tumor_site}}{{form.primary_tumor_site.errors}}</p>
    <p>{{form.input.label_tag}}{{form.input}}{{form.input.errors}}</p>
    <p>{{form.output.label_tag}}{{form.output}}{{form.output.errors}}</p>
    <p>{{form.complications.label_tag}}{{form.complications}}{{form.complications.errors}}</p>
    <p>{{form.chief_complaint.label_tag}}{{form.chief_complaint}}{{form.chief_complaint.errors}}</p>
    <p>{{form.memo.label_tag}}{{form.memo}}{{form.memo.errors}}</p>
    <input type="submit" /> <input type="reset" />
  </form>

<!-- script>
	jQuery.each(jQuery.browser, function(i, val) {
		$("<div>" + i + " : <span>" + val + "</span>").appendTo( document.body );
	});
</script -->

<!--
This is a lifesaver when debugging!
<p> {{ form.error_dict }} </p>
-->
  {% if object %}
    <a href='/patient/detail/{{object.patient.id}}/'>Return to patient</a>
  {% else %}
    <a href='/patient/detail/{{patient.id}}/'>Return to patient</a>
  {% endif %}



  <script>
    $(document).ready(function(){
    	
    // 		if (!$.isNumeric($( "#id_patient" )))
		// $( "#id_patient" ).val($.cookie("patient"));

    	
    
      $("#id_date_started").datepicker({firstDay: 1});
      $("#id_date_completed").datepicker({firstDay: 1});
      
      // $('#id_icd9').prop( "disabled", true );
      
//      $('#id_icd9').quickselect({ajax:'/get/icd9cm/'});
//      $('input#id_icd9').quickselect({ajax:'/get/icd9cm/'});
//      $('input#id_icd9').datepicker();

//	  $("select#id_icd9").addClass( "flexselect" )
//	  $("select#id_icd9").flexselect();

	  // if ($.browser.mozilla || $.browser.webkit) {
//		start = new Date().getTime();

//    	$("select#id_icd9").flexselect();
    	// $("select#id_icd9").quickselect();
    	
//		$('input#id_memo').val(new Date().getTime()-start);
  	  // }
	  
    });

    $('.select-icd10').click(function(){


      $('#id_icd10cm').append($('<option>', {
        value: $(this).attr("ICD10CM"),
        text: $(this).attr("ICD10CM")+" "+$(this).attr("ICD10CM-English")
      }));

      $('#id_icd10cm').val($(this).attr("ICD10CM"));
      $('#id_icd10cm').trigger('change');;
      // alert($(this).attr("ICD10CM"));
    });
  </script>

{% endblock %}

{% block footer %}
{{ form.media }}
{% endblock %}