{#
 # This file is part of MedShakeEHR.
 #
 # Copyright (c) 2017
 # Bertrand Boutillier <b.boutillier@gmail.com>
 # http://www.medshake.net
 #
 # MedShakeEHR is free software: you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
 # the Free Software Foundation, either version 3 of the License, or
 # any later version.
 #
 # MedShakeEHR is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU General Public License
 # along with MedShakeEHR.  If not, see <http://www.gnu.org/licenses/>.
 #/

/##
 # Template > Outils > Roulette obstétricale
 #
 # @author Bertrand Boutillier <b.boutillier@gmail.com>
 # @contrib fr33z00 <https://github.com/fr33z00>
 #}

{% extends "page.html.twig" %}
{% import "macroForm.html.twig" as f %}
{% block title %}{{ config.designAppName }} : roulette obstétricale{% endblock %}

{% block head %}
    {{ parent() }}
    <script defer src="{{ config.protocol }}{{ config.host }}{{ config.urlHostSuffixe }}/js/outils/outilsRouletteObs.js?{{ modules.base }}"></script>
    <style>
      .trHide, .trMensuHide, #tdjPanel, #calculSpeRes, #TDDRes {
        display: none;
      }
    </style>
{% endblock %}

{% block body %}

  <h1>Roulette obstétricale</h1>

  <form>
    <div class="row">
      <div class="form-group col-md-2">
        {{ f.input ({ 'input' : { 'type' : 'text', 'name' : 'DDR', 'id' : 'DDRID', 'placeholder' : 'ddr', 'class' : 'form-control datepic', 'autocomplete' : 'off', 'before' : '<div id="DDRId" class="input-group date datepick mx-0" data-typeid="DDRID">', 'after' : '<div class="input-group-append"><span class="fas fa-calendar input-group-text"></span></div></div>' }, 'label' : { 'position' : 'before', 'label' : 'Date des dernières règles', } }) }}
      </div>
      <div class="form-group col-md-2">
        {{ f.input ({ 'input' : { 'type' : 'text', 'name' : 'DDG', 'id' : 'DDGID', 'placeholder' : 'ddg', 'class' : 'form-control datepic', 'autocomplete' : 'off', 'before' : '<div id="DDGId" class="input-group date datepick mx-0" data-typeid="DDGID">', 'after' : '<div class="input-group-append"><span class="fas fa-calendar input-group-text"></span></div></div>' }, 'label' : { 'position' : 'before', 'label' : 'Date de début de grossesse', } }) }}
      </div>
      <div class="form-group col-md-2">
        {{ f.input ({ 'input' : { 'type' : 'text', 'name' : 'DDT', 'id' : 'DDTID', 'placeholder' : 'terme 41SA', 'class' : 'form-control datepic', 'autocomplete' : 'off', 'before' : '<div id="DDTId" class="input-group date datepick mx-0" data-typeid="DDTID">', 'after' : '<div class="input-group-append"><span class="fas fa-calendar input-group-text"></span></div></div>' }, 'label' : { 'position' : 'before', 'label' : 'Date de terme (41 SA)', } }) }}
      </div>
    </div>
  </form>

  <div class="row">
    <div class="col-md-6">


      <div class="col-md-12 px-0 mb-4">
        <div class="card">
          <div class="card-header font-weight-bold">
            <button id="calComplet" class="btn btn-secondary btn-sm float-right" type="button">Calendrier complet</button>
            Calendrier général
          </div>
          <div class="card-body">
            <p id="tdjPanel" class="alert alert-success">Terme ce <span class="TDJ">&nbsp;</span> : <span class="TDJRes font-weight-bold">&nbsp;</span></p>
          </div>
            <table class="table table-sm mb-0 table-hover ">
              <tbody>
                <tr><td>Dernières règles</td><td class="cleanThis SA0"></td><td></td></tr>
                <tr><td>Début de grossesse</td><td class="cleanThis SA2"></td><td></td></tr>
                {% for i in 3..11 %}
                <tr {% if i != 8 %}class="trHide"{% endif %}><td>{{ i }} SA</td><td class="cleanThis SA{{ i }}"></td><td>{% if i == 8 %}Écho datation{% endif %}</td></tr>
                {% endfor %}
                <tr><td>12 SA</td><td class="cleanThis SA12"></td><td>1re échographie</td></tr>
                {# <tr><td>13 SA + 6 </td><td class="LimiteT21"></td><td>Limite dépistage T21</td></tr> #}
                {% for i in 13..21 %}
                <tr class="trHide"><td>{{ i }} SA</td><td class="cleanThis SA{{ i }}"></td><td></td></tr>
                {% endfor %}
                <tr><td>22 SA</td><td class="cleanThis SA22"></td><td>2e échographie</td></tr>
                {% for i in 23..31 %}
                <tr class="trHide"><td>{{ i }} SA</td><td class="cleanThis SA{{ i }}"></td><td></td></tr>
                {% endfor %}
                <tr><td>32 SA</td><td class="cleanThis SA32"></td><td>3e échographie</td></tr>
                {% for i in 33..40 %}
                <tr class="trHide"><td>{{ i }} SA</td><td class="cleanThis SA{{ i }}"></td><td></td></tr>
                {% endfor %}
                <tr><td>Terme - 41 SA</td><td class="cleanThis SA41"></td><td></td></tr>
                <tr><td>Terme - 9 mois</td><td class="cleanThis Terme9M"></td><td></td></tr>
              </tbody>
            </table>
        </div>
      </div>


      <div class="col-md-12 px-0">
        <div class="card">
          <div class="card-header font-weight-bold">
            <button id="calMensuComplet" class="btn btn-secondary btn-sm float-right">Voir le calendrier</button>
            Calendrier en mois révolus
          </div>
          <div class="card-body">
          </div>
          <table class="table table-sm mb-0 table-hover ">
            <tbody>
              {% for i in 1..9 %}
              <tr class="trMensuHide"><td>{{ i }} Mois</td><td class="MOIS{{ i }}"></td><td></td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

    </div>

    <div class="col-md-6">



      <div class="col-md-12 px-0 mb-4">
        <div class="card">
          <div class="card-header font-weight-bold">Calculs spécifiques</div>
          <div class="card-body">

            <form>
              <div class="form-group ">
              <select class="custom-select" id="calculSpeID" name="calculSpe" disabled autocomplete="off" >
            <option value="rien"></option>
            <optgroup label="Congé maternité">
              <option value="G1">Grossesse simple (6s - T - 10S)</option>
              <option value="G1E">Grossesse simple / 2 enfants à charge ou 2 enfants nés viables (8s - T - 18S)</option>
              <option value="G2">Grossesse gémellaire (12s - T - 22S)</option>
              <option value="G3">Grossesse triple et plus (24s - T - 22S)</option>
            </optgroup>
            <optgroup label="Dépistage T21">
              <option value="T21COMBI">T21 : dépistage combiné (11 &rarr; 13+6 SA)</option>
              <option value="T212TRI">T21 : dépistage 2e trimestre (14 &rarr; 17+6 SA)</option>
            </optgroup>
            <optgroup label="IVG">
              <option value="IVGMed">Période légale IVG médicamenteuse (4 &rarr; 9 SA)</option>
              <option value="IVGChir">Période légale IVG chirurgicale (4 &rarr; 16 SA)</option>
            </optgroup>
            </select>
          </div>
        </form>

          <p class="alert alert-info" id="calculSpeRes"></p>

          </div>
        </div>
      </div>
      <div class="col-md-12 px-0">
        <div class="card">
          <div class="card-header font-weight-bold">Terme à une date donnée</div>
          <div class="card-body">

            <p>{{ f.input ({ 'input' : { 'type' : 'text', 'name' : 'TDD', 'id' : 'TDDID', 'placeholder' : '', 'class' : 'form-control datepic', 'autocomplete' : 'off', 'before' : '<div id="TDDId" class="input-group date datepick  col-md-4" data-typeid="TDDID">', 'after' : '<div class="input-group-append"><span class="fas fa-calendar input-group-text"></span></div></div>', 'disabled': 'disabled' } }) }}
            </p>

            <p class="alert alert-info" id="TDDRes"></p>

          </div>
        </div>
      </div>
    </div>

  </div>

{% endblock %}