<?php 
    $majAJour = maj::compareHash();
?>

<div class="row">
    <div class="col-sm-6 mb-3 mb-sm-0">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Version actuelle du site</h5>
            </div>  
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <div class="element-parametres">
                        <?php git::printVersion() ?>
                    </div>
                </li>
                <li class="list-group-item">
                    <?php
                        if($majAJour == TRUE){
                            echo '<button type="button" class="btn btn-success btn-sm" disabled>Le site est à jour</button>';
                        } else {
                            echo '<button type="button" class="btn btn-warning btn-sm" disabled>Le site n\'est pas à jour</button>';
                        }
                    ?>
                </li>
            </ul>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Dernière version</h5>
            </div>  
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <div class="element-parametres">
                        <?php git::printVersion(MAJ_TARGET) ?>
                    </div>
                </li>
                <li class="list-group-item">
                <?php if($majAJour == FALSE) : ?>
                    <button type="submit" id="startMaj" class="btn btn-outline-danger btn-sm">Mettre à jour le site</button>
                    <button type="button" id="progressMaj" class="btn btn-primary btn-sm" style="display:none;" disabled>Mise à jour en cours</button>
                <?php endif; ?>
                    <button type="button" id="endMaj" class="btn btn-secondary btn-sm" style="<?php echo ($majAJour == FALSE)? "display:none" : ""; ?>" disabled>Mise à jour terminée</button>
                </li>
            </ul>
        </div>
    </div>

</div>

<?php if($majAJour == FALSE) : ?>

<div id="alertMajSuccess" class="alert alert-success" role="alert" style="margin:20px 0; display:none;">
    La mise à jour s'est réalisée avec succès.
</div>
<div id="alertMajError" class="alert alert-danger" role="alert" style="margin:20px 0; display:none;">
    La mise à jour a échoué et toutes les données ont été réinitialisées.
</div>

<div id="consoleContenaire" class="card text-bg-light" style="margin:20px 0; display:none;">
    <div class="card-body">
        <code id="consoleMaj"></code>
    </div>
</div>

<script>
    $( "#startMaj" ).on( "click", function() {
        $("#consoleContenaire").show();
        $("#startMaj").hide();
        $("#progressMaj").show();
        $.get('/console.php', function(data) {
            $("#consoleMaj").append( data );
        });
    });

    $("body").on('DOMSubtreeModified', "#consoleMaj", function() {
        var divContent = $('#consoleMaj').text();
        var divContentEtat = divContent.indexOf("MAJ EN SUCCES");    
        if(divContentEtat !== -1){
            $("#alertMajSuccess").show();
        } else{
            $("#alertMajError").show();
        }
        $("#progressMaj").hide();
        $("#endMaj").show();
    }); 
</script>

<?php endif; ?>