templates/inscription/inscription-centre.html.twig line 1

Open in your IDE?
  1. {% extends "layout.html.twig" %}
  2. {% block content %}
  4. <!-- Modal test SANG -->
  5. <div id="apk-modal-test-plasma" uk-modal>
  6.     <div class="uk-modal-dialog uk-modal-body">
  7.         <button class="uk-modal-close-default" type="button" uk-close></button>
  8.         {{ pimcore_inc("/" ~ app.request.locale ~ "/Snippets/form-eligibilite-inscription", {'id' : centre.site.id}) }}
  9.     </div>
  10. </div>
  11. <!-- Modal si jamais donné SANG et/ou PLASMA -->
  12. <div id="apk-modal-never-give" class="uk-modal-container" uk-modal>
  13.     <div class="uk-modal-dialog uk-modal-body">
  14.         <button class="uk-modal-close-outside" type="button" uk-close></button>
  15.         <div class="uk-modal-body">
  16.             <div class="uk-flex uk-flex-middle">
  17.                 <div class="uk-width-1-1">
  18.                     <h3>{{"Attention !"|trans}}</h3>
  19.                     <p>
  20.                         {{"En tant que nouveau donneur, une procédure de première inscription vous sera demandée lors de votre premier rendez-vous."|trans}}<br>
  21.                         {{"Nous vous demandons de vous présenter 15 min à l'avance."|trans}}<br>
  22.                         {{"Merci."|trans}}
  23.                     </p>
  24.                 </div>
  25.             </div>
  26.         </div>
  27.         <div class="uk-modal-footer uk-text-right">
  28.             <button class="uk-button uk-modal-close" type="button">{{"Fermer"|trans}}</button>
  29.         </div>
  30.     </div>
  31. </div>
  33. <!-- Modal si >= 66 ans et à déjà donné du plasma -->
  34. <div id="apk-modal-66-already-give" class="uk-modal-container" uk-modal>
  35.     <div class="uk-modal-dialog uk-modal-body">
  36.         <button class="uk-modal-close-outside" type="button" uk-close></button>
  37.         <div class="uk-modal-body">
  38.             <div class="uk-flex uk-flex-middle">
  39.                 <div class="uk-width-1-1">
  40.                     <h3>{{"Attention !"|trans}}</h3>
  41.                     <p>
  42.                         {{"Attention !!! A partir du 66ème anniversaire, le don est autorisé uniquement si le don de plasma ou plaquette précédent remonte à moins de 3 ans."|trans}}<br>
  43.                     </p>
  44.                 </div>
  45.             </div>
  46.         </div>
  47.         <div class="uk-modal-footer uk-text-right">
  48.             <button class="uk-button uk-modal-close" type="button">{{"Fermer"|trans}}</button>
  49.             <button class="uk-button uk-modal-close" type="button">{{"Continuer"|trans}}</button>
  50.         </div>
  51.     </div>
  52. </div>
  55.     <div class="page-collect-centre-inscription-form apk-page-inscription">
  56.     <div class="uk-container apk-container-1400 uk-margin-large-top">
  57.         <div class="section-sites-prelevement-item">
  58.             <h2 class="h-big-lowcase-grey">{{ "Prendre un rendez-vous dans un centre de prélèvement"|trans }}</h2>
  59.             <div class="uk-grid" uk-grid>
  60.                 <div class="uk-width-2-3@s">
  61.                     <div class="uk-text-uppercase uk-width-1-1 uk-margin-bottom" style="border-bottom: 1px solid grey;">{{ 'Votre Centre'|trans }}</div>
  62.                     <div class="uk-grid uk-grid-small uk-child-width-1-2@s" uk-grid>
  63.                         <div>
  64.                             <div class="adresse">
  65.                                 <ul class="fa-ul">
  66.                                     <li>
  67.                                         <img uk-svg width="14" height="14" src="/static/img/pictos/position.svg" />
  68.                                         <strong>{{ centre.site.name }}</strong><br>
  69.                                         {{ centre.site.address }}<br>
  70.                                         {{ centre.site.zip }} {{ centre.site.city }}
  71.                                     </li>
  72.                                 </ul>
  73.                             </div>
  75.                             <div>
  76.                                 <ul class="fa-ul telephone">
  77.                                     <li>
  78.                                         <img uk-svg width="14" height="14" src="/static/img/pictos/phone.svg" />
  79.                                         <a href="tel:{{ centre.site.phone}}"
  80.                                         target="_blank">{{ centre.site.phone}}</a>
  81.                                     </li>
  82.                                 </ul>
  83.                             </div>
  85.                             <div class="horaires">
  86.                                 <ul class="fa-ul">
  87.                                     <li>
  88.                                         <img uk-svg width="14" height="14" src="/static/img/pictos/horaires.svg" />
  89.                                         {# <strong>{{ 'Horaires'|trans }} {{ 'du'|trans }} {{ date['weekStartDate'] }} {{'au'|trans}} {{ date['weekEndDate'] }}</strong><br/> #}
  90.                                         {% for jour,horaire in centre.days %}
  91.                                             {% if horaire %}
  92.                                                 {{ jour|trans }} : {{ horaire }}
  93.                                                 <br/>
  94.                                             {% else %}
  95.                                                 {{ jour|trans }} : {{ "Fermé"|trans }}
  96.                                                 <br/>
  97.                                             {% endif %}
  98.                                         {% endfor %}
  99.                                     </li>
  100.                                 </ul>
  101.                             </div>
  102.                         </div>
  104.                         <!-- <div>
  105.                             {% if not centre.site.info is empty %}
  106.                                 <div>
  107.                                     <ul class="fa-ul">
  108.                                         <li>
  109.                                             <i class="fa-li fa"><svg width="17" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M255.989 0C114.623 0 0 114.623 0 255.989 0 397.355 114.623 512 255.989 512 397.355 512 512 397.355 512 255.989 512 114.623 397.355 0 255.989 0Zm53.292 396.749c-13.177 5.201-23.666 9.145-31.533 11.876a83.188 83.188 0 0 1-27.35 4.096c-15.951 0-28.369-3.901-37.211-11.681-8.842-7.781-13.242-17.641-13.242-29.626 0-4.659.326-9.427.976-14.282a178.126 178.126 0 0 1 3.185-16.449l16.493-58.254c1.452-5.591 2.709-10.901 3.706-15.842.997-4.985 1.473-9.558 1.473-13.719 0-7.411-1.538-12.613-4.594-15.538-3.099-2.926-8.929-4.356-17.619-4.356-4.248 0-8.626.628-13.112 1.95-4.443 1.365-8.3 2.601-11.464 3.814l4.356-17.944c10.792-4.4 21.13-8.17 30.991-11.291a91.567 91.567 0 0 1 27.956-4.725c15.843 0 28.066 3.858 36.669 11.486 8.561 7.651 12.874 17.598 12.874 29.821 0 2.536-.304 7-.889 13.372a89.462 89.462 0 0 1-3.294 17.576l-16.406 58.08a164.502 164.502 0 0 0-3.619 15.951 84.402 84.402 0 0 0-1.582 13.567c0 7.715 1.712 12.981 5.18 15.777 3.424 2.796 9.427 4.204 17.922 4.204 4.01 0 8.496-.715 13.567-2.102 5.028-1.387 8.669-2.622 10.966-3.684l-4.399 17.923Zm-2.905-235.748a39.172 39.172 0 0 1-27.631 10.663c-10.75 0-20.025-3.555-27.74-10.663a34.044 34.044 0 0 1-11.552-25.855c0-10.077 3.901-18.746 11.552-25.919a39.28 39.28 0 0 1 27.74-10.771c10.771 0 20.003 3.576 27.631 10.771 7.651 7.173 11.487 15.842 11.487 25.919 0 10.121-3.836 18.747-11.487 25.855Z" style="fill:#F9B123;fill-rule:nonzero" transform="scale(.03125)"/></svg></i>
  110.                                             {{ centre.site.info|raw }}
  111.                                         </li>
  112.                                     </ul>
  113.                                 </div>
  114.                             {% endif %}
  116.                             {% if not centre.site.parking is empty %}
  117.                                 <div>
  118.                                     <ul class="fa-ul">
  119.                                         <li>
  120.                                             <i class="fa-li fa"><svg width="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M287 167h-62v60h62c16.538 0 30-13.462 30-30s-13.462-30-30-30Z" style="fill:#F9B123;fill-rule:nonzero" transform="scale(.03125)"/><path d="M437 0H75C33.647 0 0 33.647 0 75v362c0 41.353 33.647 75 75 75h362c41.353 0 75-33.647 75-75V75c0-41.353-33.647-75-75-75ZM287 287h-62v105c0 8.284-6.716 15-15 15h-30c-8.284 0-15-6.716-15-15V122c0-8.284 6.716-15 15-15h107c49.629 0 90 40.371 90 90s-40.371 90-90 90Z" style="fill:#F9B123;fill-rule:nonzero" transform="scale(.03125)"/></svg></i>
  121.                                             {{"Parking"|trans}}
  122.                                             <br>
  123.                                             {{ centre.site.parking|raw }}
  124.                                         </li>
  125.                                     </ul>
  126.                                 </div>
  127.                             {% endif %}
  129.                             {% if not centre.site.transports_commun is empty %}
  130.                                 <div>
  131.                                     <ul class="fa-ul">
  132.                                         <li>
  133.                                             <i class="fa-li fa"><svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M4.266 0c-1.455 0-3.2.793-3.2 2.93v9.87s0 1.067 1.067 1.067v1.066S2.133 16 3.2 16c1.066 0 1.066-1.067 1.066-1.067v-1.066h7.467v1.066S11.733 16 12.8 16c1.066 0 1.066-1.067 1.066-1.067v-1.066s1.067 0 1.067-1.067V2.93C14.933.747 13.615 0 12.16 0H4.266Zm.267 1.6h6.933a.267.267 0 0 1 0 .533H4.533a.267.267 0 1 1 0-.533ZM3.2 3.2h9.6c1.066 0 1.066 1.031 1.066 1.031v3.236s0 1.066-1.066 1.066H3.2c-1.067 0-1.067-1.066-1.067-1.066v-3.2S2.133 3.2 3.2 3.2Zm0 7.467a1.066 1.066 0 1 1 0 2.132 1.066 1.066 0 0 1 0-2.132Zm9.6 0a1.067 1.067 0 1 1 0 2.133 1.067 1.067 0 0 1 0-2.133Z" fill="#F9B123"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg></i>
  134.                                             {{"Transports en commun"|trans}}
  135.                                             <br>
  136.                                             {{ centre.site.transports_commun|raw }}
  137.                                         </li>
  138.                                     </ul>
  139.                                 </div>
  140.                             {% endif %}
  142.                             {% if not centre.site.accessibilite_pmr is empty %}
  143.                                 <div>
  144.                                     <ul class="fa-ul">
  145.                                         <li>
  146.                                             <i class="fa-li fa"><svg width="17" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M234.486 100.91c27.837 0 50.452-22.59 50.452-50.455C284.938 22.582 262.323 0 234.486 0c-27.869 0-50.466 22.582-50.466 50.455 0 27.865 22.597 50.455 50.466 50.455Zm77.967 285.907c-13.407 46.553-56.323 80.741-107.136 80.741-61.532 0-111.573-50.042-111.573-111.556 0-45.535 27.471-84.727 66.674-102.045v-47.294C96.217 226 49.309 285.597 49.309 356.002 49.309 442.015 119.293 512 205.316 512c62.69 0 116.724-37.258 141.5-90.717l-17.614-34.609c-4.945.041-10.673.093-16.749.143Z" style="fill:#F9B123;fill-rule:nonzero" transform="scale(.03125)"/><path d="M459.45 446.708 391.867 313.84a29.625 29.625 0 0 0-26.395-16.2h-86.558v-19.738h74.495c7.439 0 13.692-3.888 17.731-9.489 2.624-3.649 4.491-7.888 4.491-12.734 0-12.269-9.937-22.22-22.222-22.22h-74.495v-66.946c0-18.413-13.652-44.443-44.427-44.443-24.544 0-44.441 19.901-44.441 44.443v145.044c0 25.038 20.297 45.335 45.335 45.335h111.927l59.345 116.68c5.215 10.277 15.622 16.207 26.422 16.207a29.362 29.362 0 0 0 13.408-3.23c14.605-7.408 20.406-25.256 12.967-39.841Z" style="fill:#F9B123;fill-rule:nonzero" transform="scale(.03125)"/></svg></i>
  147.                                             {{"Accessibilité aux PMR"|trans}}
  148.                                             <br>
  149.                                             {{ centre.site.accessibilite_pmr|raw }}
  150.                                         </li>
  151.                                     </ul>
  152.                                 </div>
  153.                             {% endif %}
  154.                         </div> -->
  155.                     </div>
  157.                     <div class="uk-margin-top uk-text-center apk-container-cta-modal">
  158.                         <img src="/static/img/icons/questionnaire-plasma.png" style="width:80px" alt="">
  159.                         <p>
  160.                             {{"Prenez 2 minutes pour vérifier que vous êtes bien dans les conditions pour donner votre sang"|trans}}
  161.                         </p>
  162.                         <button class="uk-button" uk-toggle="target: #apk-modal-test-plasma">{{"Faire le test"|trans}}</button>
  163.                     </div>
  164.                 </div>
  165.                 <div class="uk-width-1-3@s">
  166.                     {% if centre.site.picture %}
  167.                         {% if not centre.site.maps_url is empty %} <a href="{{ centre.site.maps_url }}" target="_blank"> {% endif %}
  168.                         <figure class="uk-margin-top">
  169.                             <img src="{{ centre.site.picture }}" alt="{{ centre.site.name }}" />
  170.                             {% if centre.site.copyright %}
  171.                                 <figcaption>{{ centre.site.copyright }}</figcaption>
  172.                             {% endif %}
  173.                         </figure>
  174.                         {% if not centre.site.maps_url is empty %} </a> {% endif %}
  175.                     {% else %}
  176.                         <img src="/static/img/logos/logo-crb.svg" alt="Croix-Rouge de Belgique"/>
  177.                     {% endif %}
  178.                 </div>
  179.                 <div class="uk-width-1-1 uk-margin-small-bottom">
  180.                     {% if centre.site.informations %}
  181.                         <div class="note">
  182.                             <ul class="fa-ul">
  183.                                 <li><img uk-svg width="14" height="14" src="/static/img/pictos/info-circle.svg" />
  184.                                     {{ centre.site.informations|raw }}
  185.                                 </li>
  186.                             </ul>
  187.                         </div>
  188.                     {% endif %}
  189.                 </div>
  190.             </div>
  192.             <div class="uk-margin-medium-top">
  193.                 <form class="uk-form" role="form" name="form-validation" id="form-validation" method="POST">
  194.                     <div class="uk-text-uppercase uk-width-1-1" style="border-bottom: 1px solid grey;">{{ "A quelle date souhaitez-vous vous inscrire ?"|trans }}</div>
  195.                     <div class="warning-message uk-margin-top">{{"ATTENTION : le délai minimum entre 2 dons est de 15 jours. Si vous venez de donner, assurez-vous que le délai est bien respecté lors de votre prise de rendez-vous."|trans}}</div>
  196.                     <div uk-slider>
  197.                         <div class="uk-position-relative">
  198.                             <div class="uk-slider-container uk-padding">
  199.                                 <ul class="uk-slider-items uk-grid-small" uk-grid>
  200.                                     {% for i in 0..5 %}
  201.                                         <li class=" uk-width-1-4@m">
  202.                                             <div class="apk-calendar">
  203.                                                 {{ calendriers[i]|raw }}
  204.                                             </div>
  205.                                         </li>
  206.                                     {% endfor %}
  207.                                 </ul>
  208.                             </div>
  209.                             <div class="uk-visible@s">
  210.                                 <a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
  211.                                 <a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
  212.                             </div>
  213.                         </div>
  214.                         <ul class="uk-slider-nav uk-dotnav uk-margin-bottom uk-margin-left"></ul>
  215.                     </div>
  216.                     <div class="uk-grid-small" uk-grid>
  217.                         <div class="uk-width-1-1">
  218.                             <div class="uk-text-uppercase" style="border-bottom: 1px solid grey;">
  219.                                 <label class="control-label">
  220.                                     {{ "A quelle heure souhaitez-vous prendre rendez-vous le"|trans }} <span id="dateSelect" name="dateSelect" class="date-selected">...</span> ?
  221.                                 </label>
  222.                             </div>
  223.                             <div class="uk-width-1-1@m" id="resultats">
  224.                                 <div class="resultats-placeholder">
  225.                                     <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="info"><path fill="currentColor" d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle fill="none" stroke="currentColor" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg>
  226.                                     {{ "Veuillez sélectionner d'abord une date dans le calendrier au-dessus"|trans }}
  227.                                 </div>
  228.                             </div>
  229.                         </div>
  230.                     </div>
  231.                     <div class="uk-grid">
  232.                         <div class="uk-width-1-1">
  233.                             <div class="uk-text-uppercase" style="border-bottom: 1px solid grey;">
  234.                                 {{ "Avant de terminer votre inscription,"|trans }}<br/>
  235.                                 {{ "Nous avons besoin de ces quelques informations"|trans }}
  236.                             </div>
  237.                         </div>
  238.                     </div>
  239.                     <div class="uk-grid">
  240.                         {% if errorMessage or errorMessage != "" %}
  241.                             <div class="uk-width-1-1">
  242.                                 <div class="uk-margin-bottom uk-alert uk-alert-warning" id="error-msg" uk-alert>{% if errorMessage %}{{ errorMessage|trans }}{% endif %}</div>
  243.                             </div>
  244.                         {% endif %}
  245.                         <input type="hidden" name="akimedia-centre" value="{{ centre.site.id }}">
  246.                         <div class="uk-grid-medium" uk-grid>
  247.                             <div class="uk-width-1-2@s ">
  248.                                 <label class="control-label required" for="collecte_centre_form_lastname">{{ 'Nom'|trans }}</label><br/>
  249.                                 <input type="text" id="collecte_centre_form_lastname" name="lastname" required="required" class="uk-input">
  250.                             </div>
  251.                             <div class="uk-width-1-2@s">
  252.                                 <label class="control-label required" for="collecte_centre_form_firstname">{{ 'Prénom'|trans }}</label><br/>
  253.                                 <input type="text" id="collecte_centre_form_firstname" name="firstname" required="required" class="uk-input">
  254.                             </div>
  255.                             <div class="uk-width-1-2@s">
  256.                                 <label class="control-label required" for="collecte_centre_form_email">{{ 'Adresse mail'|trans }}</label><br/>
  257.                                 <input type="email" id="collecte_centre_form_email" name="email" required="required" class="uk-input">
  258.                             </div>
  259.                             <div class="uk-width-1-2@s">
  260.                                 <label class="control-label required" for="collecte_centre_form_email2">{{ 'Confirmez votre adresse mail'|trans }}</label><br/>
  261.                                 <input type="email" id="collecte_centre_form_email2" name="email2" required="required" class="uk-input">
  262.                             </div>
  263.                             <div class="uk-width-1-2@s">
  264.                                 <label class="control-label required" for="collecte_centre_form_phone">{{ 'Téléphone'|trans }}</label>
  265.                                 <input type="text" id="collecte_centre_form_phone" name="phone" required="required" class="uk-input">
  266.                             </div>
  267.                             <div class="uk-width-1-2@s">
  268.                                 <label class="control-label required" for="dtenaissance">{{ 'Date de naissance jj/mm/aaaa'|trans }}</label>
  269.                                 <input class="uk-input" type="date" name="dtenaissance"  id ="dtenaissance"
  270.                                     data-min="{{yearAllowed.min|date('Y-m-d')}}" data-max="{{yearAllowed.max|date('Y-m-d')}}"
  271.                                     value="" autocomplete="false" maxlength="10" required>
  272.                             </div>
  273.                             <div class="uk-width-1-1 apk-choix uk-margin-top uk-grid-margin uk-first-column">
  274.                                 <div class="uk-grid uk-grid-small uk-child-width-1-2@s" uk-grid>
  276.                                     <div>
  277.                                         <div class="apk-sang">
  278.                                             <div class="uk-margin-top uk-position-relative">
  279.                                                 <div>
  280.                                                     <label class="required">{{ 'Déjà donné du sang'|trans }}</label>
  281.                                                     <div id="inscription_form_plasma">
  282.                                                         <input type="radio" id="collecte_centre_form_alreadyBlood_0" name="alreadyBlood" required="required" value="OUI">
  283.                                                         <label for="collecte_centre_form_alreadyBlood_0" class="required apk-label-is-linked-to-field">{{ "Oui"|trans }}</label>
  284.                                                         <input type="radio" id="collecte_centre_form_alreadyBlood_1" name="alreadyBlood" required="required" value="NON">
  285.                                                         <label for="collecte_centre_form_alreadyBlood_1" class="required apk-label-is-linked-to-field">{{ "Non"|trans }}</label>
  286.                                                     </div>
  287.                                                 </div>
  288.                                             </div>
  289.                                         </div>
  290.                                     </div>
  292.                                     <div>
  293.                                         <div class="apk-plasma">
  294.                                             <div class="uk-margin-top uk-position-relative">
  295.                                                 <div>
  296.                                                     <label class="required">{{ 'Déjà donné du plasma'|trans }}</label>
  297.                                                     <div id="inscription_form_plasma">
  298.                                                         <input type="radio" id="collecte_centre_form_alreadyPlasma_0" name="alreadyPlasma" required="required" value="OUI">
  299.                                                         <label for="collecte_centre_form_alreadyPlasma_0" class="required apk-label-is-linked-to-field">{{ "Oui"|trans }}</label>
  300.                                                         <input type="radio" id="collecte_centre_form_alreadyPlasma_1" name="alreadyPlasma" required="required" value="NON">
  301.                                                         <label for="collecte_centre_form_alreadyPlasma_1" class="required apk-label-is-linked-to-field">{{ "Non"|trans }}</label>
  302.                                                     </div>
  303.                                                 </div>
  304.                                             </div>
  305.                                         </div>
  306.                                     </div>
  308.                                 </div>
  309.                             </div>
  311.                             <div class="uk-width-1-1">
  312.                                 <label class="gdpr-label">
  313.                                     <input type="checkbox" id="collecte_centre_form_gdpr" name="gdpr" required="required" class="uk-checkbox uk-margin-small-right" value="1">{{ 'En cochant cette case, vous acceptez la manière dont vos données sont traitées.'|trans }} *</label>
  314.                             </div>
  315.                             <div class="uk-width-1-1">
  316.                                 <div class="uk-display-inline-block">
  317.                                     <button type="submit" id="collecte_centre_form_submit" class="uk-button">{{"Envoyer"|trans}}</button>
  318.                                 </div>
  319.                             </div>
  320.                         </div>
  322.                     </div>
  323.                     <input id="collecte_centre_form_centre" name="centre" type="hidden" value="{{ centre.site.id }}">
  324.                     <input id="collecte_centre_form_date" name="date" type="hidden" value="">
  325.                     <input id="collecte_centre_form_horaire" name="horaire" type="hidden" value="">
  326.                     <input id="collecte_centre_form_heure" name="heure" type="hidden" value="">
  327.                 </form>
  328.             </div>
  329.         </div>
  330.     </div>
  331. </div>
  334.     <div id="date-naissance-modal" class="uk-modal-container" uk-modal>
  335.         <div class="uk-modal-dialog uk-modal-body">
  336.             <div class="uk-modal-body">
  337.                 <div class="uk-flex uk-flex-middle">
  338.                     <div id="date-naissance-error" class="uk-width-1-1">
  339.                     </div>
  340.                 </div>
  341.             </div>
  342.             <div class="uk-modal-footer">
  343.                 <div class="uk-grid uk-grid-medium">
  344.                     <div class="uk-width-expand"></div>
  345.                     <div class="uk-width-auto"><button class="uk-button uk-modal-close" type="button">{{ "Fermer"|trans }}</button></div>
  346.                     <div class="uk-width-auto"><button class="uk-button apk-submit-form-after-alert" type="button" style="display: none;">{{ "Continuer"|trans }}</button></div>
  347.                 </div>
  348.             </div>
  349.         </div>
  350.     </div>
  351.     
  352. {% endblock %}
  353. {% block inlinescripts %}
  355. <link href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css" rel="stylesheet">
  356. <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
  357. <script src="https://npmcdn.com/flatpickr@4.6.13/dist/l10n/{{app.request.locale}}.js"></script>
  359.     {% if not editmode %}
  360. <script>
  361.     var borne = [];
  363.     {% set now = "now"|date("Y-m-d") %}
  364.     {% for date in dates %}
  365.         {% set d = date|date("Y-m-d") %}
  366.         {% if d >= now %}
  367.             borne.push('{{ d }}');
  368.         {% endif %}
  369.     {% endfor %}
  370.     
  372.     $( document ).ready(function() {
  374.         //gestion de la birthDate
  375.         newMaxDate = false;
  376.         const BirthMaxOri = new Date($('#dtenaissance').attr('data-max'));
  377.         const BirthMinOri = new Date($('#dtenaissance').attr('data-min'));
  378.         let continueToSubmit = false;
  380.         let inputBirthDate = $("#dtenaissance").flatpickr({
  381.             locale : "{{app.request.locale}}",
  382.             dateFormat : "d/m/Y",
  383.             minDate : BirthMinOri,
  384.             maxDate : BirthMaxOri,
  385.             allowInput: true,
  386.         });
  388.         function setDateMax () {
  389.             let BirthMax = BirthMaxOri;
  390.             let BirthMin = BirthMinOri;
  391.             let newMaxDate = null;
  392.             let radioSelected = null;
  394.             let found = false;
  395.             $('.schedule-item').each(function(el){
  396.                 if($(this).is('.is-selected')) {
  397.                     found = true;
  398.                     radioSelected = $(this).find('input:checked');
  399.                 }
  400.             });
  401.             if(found) {
  402.                 newMaxDate = radioSelected.attr('data-id');
  403.                 BirthMax18 = new Date(newMaxDate);
  404.                 newBirthMax = new Date(BirthMax18.setFullYear(BirthMax18.getFullYear() - parseFloat({{yearAllowed.year}})));
  405.                 inputBirthDate.set('maxDate', newBirthMax);
  406.             } else {
  407.                 inputBirthDate.set('maxDate', BirthMaxOri);
  408.             }
  410.             inputBirthDate.clear();
  411.         }
  413.         setDateMax();
  414.         
  415.         $("form").on("submit", function(e) {
  417.             if($("#collecte_centre_form_email").val() != $("#collecte_centre_form_email2").val()){
  418.                 $("#error-msg").text("{{ 'Les adresses e-mails sont différentes, veuillez corriger'|trans }}");
  419.                 $("#error-msg").addClass("uk-padding-small uk-margin-bottom");
  420.                 console.log('in');
  421.                 return false;
  422.             }
  423.             
  424.             if($("#collecte_centre_form_horaire").val() == 'zzzzz'){
  425.                 $("#error-msg").text("{{ 'Veuillez choisir une date et une heure.'|trans }}");
  426.                 return false;
  427.             }
  429.             // Ajout du test de validiter de l'horaire pour eviter les doublon
  430.             var horaire = $("#collecte_centre_form_horaire").val()+'|'+$("#collecte_centre_form_heure").val();
  431.             var codeCentre = $("#collecte_centre_form_centre").val();
  433.             $("#date-naissance-error").text("");
  434.             let age = getAge($(this).find('[name="dtenaissance"]').val(), $('#dateSelect').text());
  436.             console.log('age ' + age);
  437.             if (isNaN(age) || age < 0) {
  438.                 e.preventDefault();
  439.                 // Veuillez entrer une date valide.
  440.                 $("#date-naissance-error").text("{{ "inscription.error.no-birthdate"|trans }}");
  441.                 UIkit.modal("#date-naissance-modal").show();
  442.             } else {
  443.                 if(continueToSubmit==false) {
  444.                     var $plasmaAlreadyGive = $('#collecte_centre_form_alreadyPlasma_0'); // Déjà donné du plasma
  445.                     var $plasmaNotAlreadyGive = $('#collecte_centre_form_alreadyPlasma_1'); // Pas déjà donné du Plasma
  447.                     if (age < 18) {
  448.                         e.preventDefault();
  449.                         $("#date-naissance-error").text("{{ "inscription.error.too_young"|trans }}");
  450.                         // Vous êtes actuellement trop jeune pour donner votre sang. Mais nous vous remercions pour votre intérêt. Revenez nous voir dès que vous aurez 18 ans !
  451.                         UIkit.modal("#date-naissance-modal").show();
  453.                     } else if(age >= 66 && age < 76 && $plasmaAlreadyGive.length && $plasmaAlreadyGive.hasClass('apk-field-is-checked')) {
  454.                         // Si le donneur dont l’âge est ≥ 66 ans qui coche « oui » à la question « Déjà donné du plasma ? »
  455.                         e.preventDefault();
  456.                         //$("#date-naissance-error").text("{{ "inscription.error.too_old"|trans }}");
  457.                         $("#date-naissance-error").text("{{ "inscription.error.66.alreadygive"|trans }}");
  458.                         // Attention !!! A partir du 66ème anniversaire, le don est autorisé uniquement si le don de plasma ou plaquette précédent remonte à moins de 3 ans.
  459.                         $("#date-naissance-modal .apk-submit-form-after-alert").css("display", "block");
  460.                         UIkit.modal("#date-naissance-modal").show();
  462.                     } else if(age >= 66 && age < 76 && $plasmaNotAlreadyGive.length && $plasmaNotAlreadyGive.hasClass('apk-field-is-checked')) {
  463.                         // Si le donneur dont l’âge est ≥ 66 ans qui coche « Non » à la question « Déjà donné du plasma ? »
  464.                         e.preventDefault();
  465.                         //$("#date-naissance-error").text("{{ "inscription.error.too_old"|trans }}");
  466.                         $("#date-naissance-error").text("{{ "inscription.error.66.notalreadygive"|trans }}");
  467.                         // Malheureusement. Le premier don de plasma est autorisé de 18 à 65 ans.
  468.                         $("#date-naissance-modal .apk-submit-form-after-alert").css("display", "none");
  469.                         UIkit.modal("#date-naissance-modal").show();
  472.                     } else if(age >= 76) {
  473.                         // Si donneur dont l’âge est ≥ 76 ans qui coche « Oui » ou « Non » à la question « Déjà donné du plasma ? »
  474.                         // Note dev: Ici on ne check pas si la case est cochée ou non, car dès qu'on dépasse l'âge on ne pas plus donner.
  475.                         e.preventDefault();
  476.                         //$("#date-naissance-error").text("{{ "inscription.error.too_old"|trans }}");
  477.                         $("#date-naissance-error").text("{{ "inscription.error.76"|trans }}");
  478.                         // Malheureusement. Le premier don de plasma est autorisé de 18 à 65 ans.
  479.                         $("#date-naissance-modal .apk-submit-form-after-alert").css("display", "none");
  480.                         UIkit.modal("#date-naissance-modal").show();
  482.                     }
  483.                 }
  485.             }
  486.         });
  488.         // On force le submit du form si l'utilisateur clique sur le bouton "Continuer" sur la modal qui l'avertit les conditions selon son âge
  489.         $('.apk-submit-form-after-alert').on('click', function(e) {
  490.             continueToSubmit = true;
  491.             $('form#form-validation').submit();
  492.         });
  494.         $('.day').each(function () {
  495.             console.log ($(this).attr('data-date'));
  496.             if(borne.includes($(this).attr('data-date'))){
  497.                 $(this).addClass('date_actif');
  498.             }
  499.             else {
  500.                 $(this).addClass('not-active');
  501.             }
  502.         });
  504.         $('.day.date_actif').on("click", function () {
  505.             $('.day.is-selected').removeClass('is-selected');
  506.             $(this).addClass('is-selected');
  508.             var date = $(this).attr('data-date');
  509.             var centreid = $(this).attr('data-centre-id');
  511.             $("#dateSelect").html($(this).attr('data-date-format'));
  512.             $("#collecte_centre_form_date").val(date);
  514.             var lang = '{{ app.request.locale }}';
  515.             
  516.             $.ajax({
  517.                 dataType: "json",
  518.                 type: "GET",
  519.                 url: "{{ path('getHoraireCentreAkimedia') }}",
  520.                 data: {'date': date ,'centreid':centreid, 'lang':lang},
  521.                 success: function (data) {
  522.                     
  523.                     $('#resultats').html(data["msg"]);
  524.                     $("input[name='inscription']").on("click", function(){ 
  525.                         $("#collecte_centre_form_heure").val($(this).val());
  526.                         $("#collecte_centre_form_horaire").val($(this).attr("data-id"));
  527.                     });                    
  528.                     console.log(data);
  529.                     inputBirthDate.clear();
  530.                     
  531.                     $('.schedule-item').on("click", function () {
  532.                         var $radioSelected = $(this).find('.uk-radio');
  533.                         if($radioSelected.attr("data-id")){
  534.                                 
  535.                         $('.schedule-item').removeClass('is-selected');
  536.                         $(this).addClass('is-selected');
  537.                         $radioSelected.prop('checked', true);
  538.                         setDateMax();
  540.                         $("#collecte_centre_form_heure").val($radioSelected.val());
  541.                         $("#collecte_centre_form_horaire").val($radioSelected.attr("data-id"));
  542.                         }
  543.                         else{
  544.                                 $('.schedule-item').removeClass('is-selected');
  545.                         }
  546.                     });
  547.                 },
  548.                 error: function (xhr, textStatus, errorThrown) {
  549.                     UIkit.notification('{{ "Oops! Une erreur s'est produite. Veuillez réessayer."|trans }}', {status: 'danger'});
  550.                     console.log(xhr, textStatus, errorThrown);
  552.                 }
  553.             });
  556.         })
  558.     });
  560.     function getAge(dateString, selectedDate = null) {
  561.         //selectedDate = "13-11-2025";
  563.         if(selectedDate == null) {
  564.             //let today = new Date();
  565.             selectedDate = new Date();
  566.         }
  568.         // Conversion de la date de naissance (dd/mm/yyyy)
  569.         let dmy = dateString.split("/");
  570.         let birthDate = new Date(dmy[2], dmy[1] - 1, dmy[0]);
  572.         // Conversion de la date de référence (dd-mm-yyyy)
  573.         let sdm = selectedDate.split("-");
  574.         let refDate = new Date(sdm[2], sdm[1] - 1, sdm[0]);
  576.         // Calcul de l'âge
  577.             // Ancienne méthode basée sur la date du jour
  578.             // ------------------------------------------
  579.             /*
  580.             let age = today.getFullYear() - birthDate.getFullYear();
  581.             let m = today.getMonth() - birthDate.getMonth();
  583.             if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
  584.                age--;
  585.             }
  586.             */
  587.         let age = refDate.getFullYear() - birthDate.getFullYear();
  588.         let m = refDate.getMonth() - birthDate.getMonth();
  590.         if (m < 0 || (m === 0 && refDate.getDate() < birthDate.getDate())) {
  591.             age--;
  592.         }
  594.         // Return
  595.         return age;
  596.     }
  597. </script>
  598.     {% endif %}
  599. {% endblock inlinescripts %}