<head>
    <meta charset="utf-8"/>
    <script src="https://code.jquery.com/jquery-3.4.1.js"   integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="   crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
          $('#table_info').DataTable();
      } );
    </script>
    <script type="text/javascript">
        $(document).ready( function() {
                var ident = sessionStorage.getItem('para');
               // var essai= "lwu";
                $.getJSON('https://eden.imt-lille-douai.fr/~liang.wu/API_LOGIN/identite/read_one.php?login='+ident,
                    function(data){
                        table = $('#tbody_info');
                        table.html('');
                        table.append('<tr><td>'+data.id+'</td><td>'+data.login+'</td><td>'+data.password+'</td><td>'+data.pseudo+'</td><td>'+data.age+'</td><td>'+data.poids+'</td><td>'+data.taille+'</td><td>'+data.sexe+'</td><td>'+data.niveaudusport+'</td><td>'+data.icalories+'</td></tr>');
                        sessionStorage.setItem('copieid', data.id);
                        });

        });
    </script>
</head>

<section id="profil_contenu" style="display : flex; flex-direction : row; ">

<div style="margin-right:100px">
<h1>informations Personnelles</h1>
<table id="table_info" class="dataTable" style="color : #212529; "> 
    <thead>
            <tr>
                <th>ID</th>
                <th>login</th>
                <th>password</th>
                <th>pseudo</th>
                <th>âge</th>
                <th>poids(kg)</th>
                <th>taille(cm)</th>
                <th>sexe</th>
                <th>niveau_du_sport</th>
                <th>Besoin en calories journalier(Kcal)</th>
            </tr>
    </thead>
    <tbody id="tbody_info"><tbody>
</table>
</div>
</section>

<section>
<h1>Utilisez ce formulaire, si vous voulez modifier vos informations</h1>
<form id="form_edit" action="#" method="POST" >
        <div>
            <label>ID (Remettez votre ID)</label>
            <input type='text' id='id' name='id' class="form-control" required />
        </div>

        <div>
            <label>Login</label>
            <input type='text' id='login' name='login' class="form-control" required />
        </div>

        <div>
            <label>Password</label>
            <input type='text' id='password' name='password' class="form-control"  required />
        </div>

        <div>
            <label>Pseudo</label>
            <input type='text' id='pseudo' name='pseudo' class="form-control" required/>
        </div>

        <div>
            <label>Âge</label>
            <input type='text' id='age' name='age' class="form-control" required />
        </div>

        <div>
            <label>Poids(kg)</label>
            <input type='text' id='poids' name='poids' class="form-control" required/>
        </div>

        <div>
            <label>Taille(cm)</label>
            <input type='text' id='taille' name='taille' class="form-control" required/>
        </div>
       
        <div class="form-group">
            <label>Sexe</label>
            <select class="form-control" id="sexe" name="sexe">
            <option selected>Choisir...</option>
            <option>Femme</option>
            <option>Homme</option>
        </select>
        </div>

        <div class="form-group">
            <label>Niveau de sport</label>
            <select class="form-control" id="niveaudusport" name="niveaudusport">
            <option selected>Choisir...</option>
            <option>Bas</option>
            <option>Moyen</option>
            <option>Elevé</option>
        </select>
        </div>

        <!-- button to submit form -->
        </div>
            <div  class="form-action-buttons">
            <input type="submit" value="Modifier">
        </div>
</form>



<script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js" ></script>

<script type="text/javascript">

$(document).ready( function($) {
    // will run if create identite form was submitted
    $(document).on('submit', '#form_edit', function(){
        // get form data
        var form_data=JSON.stringify($(this).serializeObject());
        // console.log(form_data);

        // submit form data to api
        $.ajax({
            url: "https://eden.imt-lille-douai.fr/~liang.wu/API_LOGIN/identite/update.php",
            type : "POST",
            contentType : 'application/json',
            data : form_data
        });
    });
});
</script>

</section>
