
<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_aliments').DataTable();
          resetForm();
      } );
    function resetForm() {
            document.getElementById("submit_button").value="Ajouter";
            document.getElementById("quantite").value = "";
            document.getElementById("date").value = "";
            document.getElementById("mode").value = "";
            
    };
    };

    </script>

    <script type="text/javascript">
        $(document).ready( function() {
                $.getJSON('https://eden.imt-lille-douai.fr/~charlotte.raulin/Projet/api/read_aliments.php',
                    function(json){
                        options = $('#select_aliment');
                        options.html('');
                    
                        // cf. https://api.jquery.com/jQuery.getJSON/
                        $.each( json, function( key, val ) {
                            options.append('<option value=\''+val[1]+'\'>'+val[1]+'</option>'); //liste de sélection de l'aliment dans le formulaire
                           
                        });
                    }
                );

        });

        $(document).ready( function() {

            $.getJSON('https://eden.imt-lille-douai.fr/~charlotte.raulin/Projet/api/read_journal.php',
                    function(json){
                        table = $('#tbody_journal');
                        table.html('');

                        // cf. https://api.jquery.com/jQuery.getJSON/
                        $.each( json, function( key, val ) {
                            
                            table.append('<tr><td>'+val[0]+'</td><td>'+val[1]+'</td><td>'+val[2]+'</td><td>'+val[3]+'</td><td>'+val[4]+'</td><td><button '+
                                'onclick="onEdit(\''+val[0]+'\',\''+val[1]+'\',\''+val[4]+'\')">Modifier</button></td><td><button '+
                                'onclick="onDelete('+val[5]+','+val[6]+')">Supprimer</button></td></tr>');
                        });
                    }
                );
        });

        function onEdit(date, aliment, quantite) {
                document.getElementById("date").value = date;
                document.getElementById("aliment").value = aliment;
                document.getElementById("quantite").value = quantite;
                document.getElementById("mode").value = "modifier";
                document.getElementById("submit_button").value='Modifier';
        };
        
        function onDelete(varIdUser, id_user){
                var varIdAliment= id_aliment;
                var varIdUser= id_user;
                $.ajax({
                url: 'api/delete_journal.php',
                type: 'POST',
                data: {'varIdAliment' : varIdAliment},
                success: function(varIdAliment) {
                    alert(varIdAliment); // reponse contient l'affichage du fichier PHP (soit echo)
                }
                });
                $.ajax({
                url: 'api/delete_journal.php',
                type: 'POST',
                data: {'varIdUser' : varIdUser},
                success: function(varIdUser) {
                    alert(varIdUser); // reponse contient l'affichage du fichier PHP (soit echo)
                }
                });
                location.reload();

        }
     
    </script>
</head>
<section id="journal_contenu" style="display : flex; flex-direction : row; ">

    <div style="margin-right:100px">
        <table id="table_journal" class="dataTable" style="color : #212529; ">

            <thead>
                <tr>
                    <th>Date</th>
                    <th>Aliment</th>
                    <th>Type</th>
                    <th>Calories (KCal)</th>
                    <th>Quantité</th>
                    <th>Modifier</th>
                    <th>Supprimer</th>
                </tr>
            </thead>
            <tbody id="tbody_journal"><tbody>

            </table>
    </div>

    <div>
        <table>
                <tr>
                    <td>
                        <form id="form_journal" action="api/create_journal.php" method="POST" >
                            
                            <div>
                                <label>Date</label>
                                <input type="date"  id="date" name="date" required>
                            </div>
                        
                            <div>
                                <label>Aliment</label>
                                <select id="select_aliment" name="select_aliment" size="1">
                                    
                                </select>

                            </div>
                            <div>
                                <label>Quantité</label>
                                <input type="number"  id="quantite" name="quantite" required>
                            </div>
                            <div>
                                <input type="text"  id="mode" name="mode" style="display : none" > 
                            </div>

                            <div  class="form-action-buttons">
                                <input type="submit" value="Ajouter" id='submit_button'>
                                
                            </div>
                        </form>
                    </td>
                </tr>
        </table>
    </div>

</section>