{% extends "t_article.twig" %}
{% block header_js %}
     <script src="js/inscription.js"></script>  
    {% endblock %}
{% block article_content %}


    {% set idr = data.idr %}
    {% set ida = data.ida %}

    <ul class="breadcrumb">

        <li><a href="?action=index">Accueil</a></li>

        <li class="active">Inscription</li>
    </ul>
    <div class="article_container">

        <div class="article_title">
            Inscription

        </div>

        <div class="modal-body" id="inscriptionSubmit">
        <form id="inscription"    method="post">

            <div class="form-group has-feedback">
                <label for="institution" class="control-label">Institution:</label>
                <input  name="institution"  class="form-control" id="institution" placeholder="Enter l'institution">
                <span style='color:red;' class="glyphicon glyphicon-asterisk form-control-feedback"></span>
            </div>

            <div class="form-group has-feedback">
                <label for="nom" class="control-label">Nom:</label>
                <input  name="nom"  class="form-control" id="nom" placeholder="Enter le nom">
                <span style='color:red;' class="glyphicon glyphicon-asterisk form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="prenom" class="control-label">Prenom:</label>
                <input  name="prenom"  class="form-control" id="prenom" placeholder="Enter le prenom">
                <span style='color:red;' class="glyphicon glyphicon-asterisk form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="poste" class="control-label">Poste:</label>
                <input  name="poste"  class="form-control" id="poste" placeholder="Enter le poste">
                <span style='color:red;' class="glyphicon glyphicon-asterisk form-control-feedback"></span>
            </div>

            <div class="form-group has-feedback">
                <label for="date_naiss" class="control-label">Date de naissance:</label>
                <div class='input-group date' id='datetimepicker1' >
                  <input name="date_naiss" class="datepicker form-control"  data-provide="datepicker" id='date_naiss' >
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
                 <script type="text/javascript">
            // When the document is ready
            $(document).ready(function () {
                
                $('.datepicker').datepicker({
               format: 'dd/mm/yyyy',
                language: 'fr'
}                   );
            
            });
        </script>
             </div>
            
            <div class="form-group has-feedback">
                <label for="adresse" class="control-label">Adresse:</label>
                <input  name="adresse" type="text"  class="form-control" id="adresse" placeholder="Enter l'adresse">
                <span style='color:red;' class="glyphicon glyphicon-asterisk form-control-feedback"></span>
            </div>  
            <div class="form-group has-feedback">
                <label for="pays" class="control-label">Pays:</label>
                <input  name="pays" class="form-control" id="pays" placeholder="Enter le pays">
                <span style='color:red;' class="glyphicon glyphicon-asterisk form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="email" class="control-label">Email:</label>
                <input  name="email" type="email" class="form-control" id="email" placeholder="Enter email">
                <span style='color:red;' class="glyphicon glyphicon-asterisk form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="password" class="control-label">Mot de passe:</label>
                <input type="password"  name="password"  class="form-control" id="password" placeholder="Enter le mot de passe">
                <span style='color:red;' class="glyphicon glyphicon-asterisk form-control-feedback"></span>
            </div>  
            <div class="form-group has-feedback">
                <label for="c_password" class="control-label">Confirmer le mot de passe:</label>
                <input type="password"  name="c_password"  class="form-control" id="c_password" placeholder="Enter le mot de passe">
                <span style='color:red;' class="glyphicon glyphicon-asterisk form-control-feedback"></span>
            </div>

            

            <div class="form-group">                             
                <img id="captcha_ins" alt="CAPTCHA Image" >
                <a class="btn btn-info btn-sm" id="relaod_captcha_ins" href="#">Rafraichir</a>
                <br>
                <div class="form-group has-feedback" style="margin-top: 10px;">
                    <label class="control-label" for="captcha_code_ins">Saisir le texte dans l'image</label>
                    <input id="captcha_code_ins" class="form-control input-sm" type="text" placeholder="Saisir le texte dans l'image." name="captcha_code_ins">
                    <span style='color:red;' class="glyphicon glyphicon-asterisk form-control-feedback"></span>

                </div>
            </div>



            <div class="modal-footer">

                <button type="submit" id="send" class="btn btn-primary" data-loading-text="Envoie...">Valider</button>
            </div>


        </form>
 </div>
        
         <div class="modal fade" id="inscriptionSuccess">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                                </div>
                                <div class="modal-body" >
                                    <p ><span style="color:lightgreen;font-size: 20px;" class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span> 	&nbsp; 	&nbsp;Inscription avec succès</p>
                                </div>

                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div>

                    <div class="modal fade" id="inscriptionError">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                                </div>
                                <div class="modal-body" >
                                    <p ><span style="color:red;font-size: 20px;" class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> 	&nbsp; 	&nbsp;Erreur,Inscription non effectué</p>
                                </div>

                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div>
    </div>
{% endblock %}