<div class="container-fluid pt-3">
    <div class="row">
        <div class="col-md-8">
            <div class="ajaxReturnMessage"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 scanRow">
            <div class="row">
                <div class="col-2">
                    <form method="post">
                        <input type="hidden" name="action" value="actionSearch" />
                        <input type="submit" class="btn btn-primary" value="Scanner" />
                    </form>
                </div>
                <div class="col-4">
                    <form method="post" id="formActivateTcp">
                        <input type="hidden" name="action" value="activateTcp" />
                        <input type="hidden" name="listTcp" class="listTcp" value="" />
                        <!--                        <input type="submit" class="btn btn-success" value="Activer les TCP / MOD sélectionnés" />-->
                    </form>
                    <button class="activerTCP btn btn-success">Activer les TCP / MOD sélectionné(s)</button>
                </div>
                <div class="col-md-2 scanRow">
                    <button class="btn btn-info reloadPage" onclick="window.location.reload();">Recharger la page</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h4>Listes des TCP</h4>
        </div>
        <div class="clearfix"></div>
        <div class="col-md-10">
            <table class="table tcpTable table-hover table-striped">
                <thead>
                <tr>
                    <td>Actif ?</td>
                    <td>Nom</td>
                    <td>Description</td>
                </tr>
                </thead>
                <tbody>
                <?php
                if(isset($listeTcp) && !empty($listeTcp)){
                    foreach($listeTcp as $tcp){
                ?>
                    <tr>
                        <td>
                            <input type="checkbox" class="checkboxTcp" name="activeTcp[]"  value="<?php echo $tcp['fichier']; ?>" id="<?php echo $tcp['fichier']; ?>"  <?php if($tcp['actif'] == 1){ echo 'checked="checked"';}else{ echo ""; } ?>  />
                        </td>
                        <td><label for="<?php echo $tcp['fichier']; ?>"><?php echo $tcp['nom']; ?></label></td>
                        <td><label for="<?php echo $tcp['fichier']; ?>"><?php echo $tcp['description']; ?></label></td>
                    </tr>
                <?php
                    }
                }
                ?>
                </tbody>
                <tfoot>
                <tr>
                    <td>Actif ?</td>
                    <td>Nom</td>
                    <td>Description</td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-2 scanRow">
            <div class="row">
                <div class="col-2">
                    <form method="post">
                        <input type="hidden" name="action" value="actionSearch" />
                        <input type="submit" class="btn btn-primary" value="Scanner" />
                    </form>
                </div>
                <div class="col-6">
                </div>
            </div>
        </div>
        <div class="col-4">
            <form method="post" id="formActivateTcp">
                <input type="hidden" name="action" value="activateTcp" />
                <input type="hidden" name="listTcp" class="listTcp" value="" />
                <!--                        <input type="submit" class="btn btn-success" value="Activer les TCP / MOD sélectionnés" />-->
            </form>
            <button class="activerTCP btn btn-success">Activer les TCP / MOD sélectionné(s)</button>
        </div>
        <div class="col-md-2 scanRow">
            <button class="btn btn-info reloadPage">Recharger la page</button>
        </div>
    </div>
</div>
<script type="text/javascript">
     jQuery(document).ready(function () {
//         jQuery('.loaderTCP').hide();
//
//     //get_tcp('get_all');
//      jQuery('.scanTCP').click(function () {
//          jQuery(this).attr('disabled', 'disabled');
//      }
//      jQuery('.loaderTCP').show();
//      get_tcp('scan_tpcdir');
//      jQuery('.scanTCP').removeAttr('disabled');
//      jQuery('.loaderTCP').hide();
//     });
//      jQuery('.reloadPage').click(function () {
//          location.reload();
//      }
// });
//      jQuery('td').click(function() {
//          console.log('click');
//      });
     jQuery('.activerTCP').click(function(){
         var arrayTcpChecked  = [];
         jQuery('.checkboxTcp').each(function(){
             if(jQuery(this).is(':checked'))
                 arrayTcpChecked.push(this.value);
         });
         listTcpChecked = arrayTcpChecked.join();console.log(listTcpChecked);
         jQuery('.listTcp').val(listTcpChecked);
         jQuery('#formActivateTcp').submit();
     });
 });
    /*** Fonction qui permet d'avoir les TCP soit par scan, soit directement depuis la base
     ** @param actionSearch action a effectuer dans la classe PHP
     **/
    function get_tcp(actionSearch) {
        jQuery.ajax({
            type: "POST",
            /*url: ajaxurl,*/
            url: "<?php echo Webcollectivites::get_page_url('webco', array('showModule' => 'gestionTcpAtelier111')) ;?>",
            data: {action: actionSearch}
        }).done(function (msg) {
            location.reload();
            console.log(msg);
            // alert( "Data Saved: " + msg.response );
             jQuery('.tcpTable tbody').empty();
             files = msg.items;
             var html = '';
             jQuery.each(files, function (key, value) {
                 if (value.actif == 1) {
                     html += '<tr class="success">';
                 } else {
                     html += '<tr>';
                 }
                 html += '<td>' + value.nom + '</td><td>' + value.description + '</td>';
                 if (value.actif == 0) {
                     html += '<td><span class="glyphicon glyphicon-ban-circle" aria-hidden="true" onclick="modifierActif(this, \'1\', \'' + value.fichier + '\')"></span></td>';
                 } else {
                     html += '<td><span class="glyphicon glyphicon-ok" aria-hidden="true" onclick="modifierActif(this, \'0\', \'' + value.fichier + '\')"></span></td>';
                 }
                 html += '</tr>';
             });
             jQuery('.tcpTable tbody').html(html);
        });
    }

    /**
     *
     *
     * @param elem l'element du DOM
     * @param value : la valeur qui sera définit pour le TCP
     * @param fichier : le nom de fichier du TCP
     * */
    function modifierActif(elem, value, fichier) {
        jQuery.ajax({
            type: "POST",
            url: ajaxurl,
            data: {action: 'modify_actif', valueTcp: value, fichierTcp: fichier}
        }).done(function (val) {
            if (val.error == true) {
                /*if(jQuery(elem).closest('tr').hasClass('success') && value == 0){
                     jQuery(elem).closest('tr').removeClass('success');
                     jQuery(elem).removeClass();
                     jQuery(elem).addClass('glyphicon glyphicon-ban-circle');
                  }else{
                     jQuery(elem).closest('tr').addClass('success');
                     jQuery(elem).removeClass();
                     jQuery(elem).addClass('glyphicon glyphicon-ok');
                 }*/
                get_tcp('get_all');
            } else {
                alert('Erreur pendant la mise à jour du statut du TCP');
            }
        });
    }
</script>