<?php session_start();
include 'dbconnection.php';
require_once("../patientmanager.php");
require_once("../DBManager.php");
if(isset($_POST['Nutritional_Screening'])) 
{
   PatientManager::NutritionalScreening("$_GET[prescriptionid]","$_GET[patientid]","$_POST[weight_loss]","$_POST[BMI]","$_POST[patient_look]","$_POST[last_2_weeks]","$_POST[enteral_tube]","$_POST[parenteral_tube]","$_POST[Pattern_Followed]","$_POST[Appetite]","$_POST[entered_by]");
}
?>

    

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
    <title>Title of the document</title>
    <style>
      .modal {
        display: none;
        position: fixed;
        z-index: 8;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
      }
      .modal-content {
        margin: 50px auto;
        border: 1px solid #999;
        width: 60%;
      }
      h2,p {
        margin: 0 0 20px;
        font-weight: 400;
  
      }     
     .form1 {
        padding: 25px;
        margin: 25px;
        box-shadow: 0 2px 5px #f5f5f5;
        background: #eee;
      }
      input,
      textarea, select {
        width: 100%;
        padding: 6px;
        margin-bottom: 20px;
        border: 1px solid #1c87c9;
        outline: none;
      }
      .contact-form button {
        width: 100%;
        padding: 10px;
        border: none;
        background: #1c87c9;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
      }
      button:hover {
        background: #2371a0;
      }
      .close {
        color: #aaa;
        float: right;
        font-size: 58px;
        font-weight: bold;
      }
      .close:hover,
      .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
      }
      button.button {
        display: inline-block;
       
        border-bottom: #02274a 1px solid;
     
        font-size: 19px;
        cursor: pointer;
      }
      
      button.button:hover {
    
        border-bottom: #a99567 1px solid;
        color: #a99567;
      }

 
    </style>
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
      #loaderImg {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0; 
         margin: auto;
         border: 10px solid grey;
         border-radius: 50%;
         border-top: 10px solid black;
         width: 100px;
         height: 100px;
         animation: spin 1s linear infinite;
      }
      @keyframes spin {
         0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
         }
         100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
         }
      }
   </style>
  <script>
  $( function() {
    $.widget( "custom.combobox", {
      _create: function() {
        this.wrapper = $( "<span>" )
          .addClass( "custom-combobox" )
          .insertAfter( this.element );
 
        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
      },
 
      _createAutocomplete: function() {
        var selected = this.element.children( ":selected" ),
          value = selected.val() ? selected.text() : "";
 
        this.input = $( "<input>" )
          .appendTo( this.wrapper )
          .val( value )
          .attr( "title", "" )
          .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
          .autocomplete({
            delay: 0,
            minLength: 0,
            source: $.proxy( this, "_source" )
          })
          .tooltip({
            classes: {
              "ui-tooltip": "ui-state-highlight"
            }
          });
 
        this._on( this.input, {
          autocompleteselect: function( event, ui ) {
            ui.item.option.selected = true;
            this._trigger( "select", event, {
              item: ui.item.option
            });
          },
 
          autocompletechange: "_removeIfInvalid"
        });
      },
 
      _createShowAllButton: function() {
        var input = this.input,
          wasOpen = false;
 
        $( "<a>" )
          .attr( "tabIndex", -1 )
          .attr( "title", "Show All Items" )
          .tooltip()
          .appendTo( this.wrapper )
          .button({
            icons: {
              primary: "ui-icon-triangle-1-s"
            },
            text: false
          })
          .removeClass( "ui-corner-all" )
          .addClass( "custom-combobox-toggle ui-corner-right" )
          .on( "mousedown", function() {
            wasOpen = input.autocomplete( "widget" ).is( ":visible" );
          })
          .on( "click", function() {
            input.trigger( "focus" );
 
            // Close if already visible
            if ( wasOpen ) {
              return;
            }
 
            // Pass empty string as value to search for, displaying all results
            input.autocomplete( "search", "" );
          });
      },
 
      _source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        response( this.element.children( "option" ).map(function() {
          var text = $( this ).text();
          if ( this.value && ( !request.term || matcher.test(text) ) )
            return {
              label: text,
              value: text,
              option: this
            };
        }) );
      },
 
      _removeIfInvalid: function( event, ui ) {
 
        // Selected an item, nothing to do
        if ( ui.item ) {
          return;
        }
 
        // Search for a match (case-insensitive)
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children( "option" ).each(function() {
          if ( $( this ).text().toLowerCase() === valueLowerCase ) {
            this.selected = valid = true;
            return false;
          }
        });
 
        // Found a match, nothing to do
        if ( valid ) {
          return;
        }
 
        // Remove invalid value
        this.input
          .val( "" )
          .attr( "title", value + " didn't match any item" )
          .tooltip( "open" );
        this.element.val( "" );
        this._delay(function() {
          this.input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        this.input.autocomplete( "instance" ).term = "";
      },
 
      _destroy: function() {
        this.wrapper.remove();
        this.element.show();
      }
    });
 
    $( "#combobox" ).combobox();
    $( "#toggle" ).on( "click", function() {
      $( "#combobox" ).toggle();
    });
  } );
  </script>

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.slider:after
{
 content:'No';
 color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 font-size: 10px;
 font-family: Verdana, sans-serif;
}

input:checked + .slider:after
{  
  content:'Yes';
}


.center {
   border: 1px solid grey;
   text-align:;
}

  
    .box2{
              display: none;
    
    }
            
       .center {
   border: 1px solid grey;
   text-align:;
}
    .center2 {
   border: 5px solid grey;
   text-align:;
}
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <style>


.center {
   border: 1px solid grey;
   text-align:;
}

</style>
  
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
    $('#NSForm').submit(function() {
     $('#loaderImg').show(); 
      return true;
    });
});
  </script> 
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <title>Document</title>

   </head>
   
    <h3 align="center">Nutritional Screening</h3>
      <div class='center'>
 
          <table id="example2" class="table table-bordered table-hover"> 
        <?php
session_start();
require_once('dbconnection.php');
		$sql ="SELECT * FROM patient WHERE patientid='$_GET[patientid]'";
		$qsql = mysqli_query($con,$sql);
		while($rs = mysqli_fetch_array($qsql))
		{
		    echo "   

      
   ";
   $a=$rs[Weight];
     $b=$rs[Height]*$rs[Height];
     $c=$a/$b*10000;
   echo"
   <tr>
<td Width='50%'>BMI Result</td><td Width='50%'> "; echo round($c, 2);  echo"</td></tr>
</table>
      ";
		}
		?>
   
     </div>
    
      <div class='center'>
<div style = "display:none;" id = "loaderImg"> <div class="loader"> </div> </div>
<form name="Nutritional_Screening" method="post" id="NSForm" >

  <body>
        

    <table id="example2" class="table table-bordered table-hover"> 
<tr>
<td><span style="font-size: 20px">Does the patient have any weight loss/ Weight gain? </span></h3></td><td><label class="switch">
  <input name="weight_loss" type="checkbox">
  <span class="slider"></span>
</label>
</td>
</tr>
<tr>
<td><span style="font-size: 20px">Does the patient appear emaciated or BMI is Below <18.5 ?       </span></h3></td><td><label class="switch">
  <input name="BMI" type="checkbox">
  <span class="slider"></span>
</label>
</td>
</tr>
<tr>
<td><span style="font-size: 20px">Does the patient look Obese or BMI is above >30    </span></h3></td><td><label class="switch">
  <input name="patient_look" id="myCheck7" onclick="myFunction7()" type="checkbox">
  <span class="slider"></span>
</label>
</td>
</tr>


</table>


      <DIV class="button" data-modal="modalOne"> <span style="color:blue;align:center;font-size: 14px">View BMI Chart</span></DIV>
    
    <br>
      <div id="modalOne" class="modal">
      <div class="modal-content">
        <div class="contact-form">
          <a class="close">&times;</a>
          <img src='https://login.easenup.online/uploads/BMI.png'>
           </div>
          </div>
          </div>



 <table id="example2" class="table table-bordered table-hover"> 


<tr>
<td><span style="font-size: 20px">Does the patient have any GL Symptoms like Constipation, Nausea, Diarrhea, Anorexia, Vomiting, chewing/swallowing difficulty affecting oral intake in last 2 weeks    </span></h3></td><td><label class="switch">
  <input name="last_2_weeks" type="checkbox">
  <span class="slider"></span>
</label>
</td>
</tr>
<tr>
<td><span style="font-size: 20px">Does the patient have any enteral tube feeding  </span></h3></td><td><label class="switch">
  <input name="enteral_tube" type="checkbox">
  <span class="slider"></span>
</label>
</td>
</tr>
<tr>
<td><span style="font-size: 20px">Does the patient have any parenteral tube feeding  </span></h3></td><td><label class="switch">
  <input name="parenteral_tube" type="checkbox">
  <span class="slider"></span>
</label>
</td>
</tr>

<tr> <td> Food Pattern Followed </td><td><select name='Pattern_Followed'>
        <option value='' disabled selected>Food Pattern Followed</option>
       <option value='Vegetarian'>Vegetarian</option>
    <option value='Eggetarian'>Eggetarian</option>
    <option value='Non-vegetarian'>Non-vegetarian</option>
  </select></td></tr>
  
  <tr> <td> Appetite </td><td><select name='Appetite'>
        <option value='' disabled selected>Appetite</option>
       <option value='Good'>Good</option>
    <option value='Fair'>Fair</option>
    <option value='Poor'>Poor</option>
        <option value='Routinely_Skips_Meals'>Routinely Skips Meals</option>
</select></td></tr>
</table>
<br>
<input type="submit" name="Nutritional_Screening" value="Submit">
</form>
  
<script src="../plugins/select2/js/select2.full.min.js"></script>
<script>
  $(function () {
    //Initialize Select2 Elements
    $('.select2').select2()

    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })
    </script>
       <script>
      let modalBtns = [...document.querySelectorAll(".button")];
      modalBtns.forEach(function(btn) {
        btn.onclick = function() {
          let modal = btn.getAttribute('data-modal');
          document.getElementById(modal)
            .style.display = "block";
        }
      });
      let closeBtns = [...document.querySelectorAll(".close")];
      closeBtns.forEach(function(btn) {
        btn.onclick = function() {
          let modal = btn.closest('.modal');
          modal.style.display = "none";
        }
      });
      window.onclick = function(event) {
        if(event.target.className === "modal") {
          event.target.style.display = "none";
        }
      }
    </script>




</body>
</html> 
</div>