{% include 'partials/header.html.twig' %}

 <div class="body-wrapper">
    <div class="container-fluid">

        <div class="card card-body py-3">
            <div class="d-flex align-items-center justify-content-center w-100">
                <div class="row justify-content-center w-100">
                    <div class="col-lg-12">
                        <div class="text-center">
                            <h2>Mise à jour de l'application FundUp</h2>
                            
                            {% if lastUpdate is not null %}
                                <div class="alert alert-info">
                                    Version actuelle : <strong>{{ lastUpdate.version }}</strong>
                                    <br>Mise à jour le {{ lastUpdate.dateUpdate|date('d/m/Y à H:i') }}
                                </div>
                            {% endif %}

                            <div class="row justify-content-center w-100">
                                <div class="col-lg-4">
                                    <img src="{{asset('assets/images/app_update.png')}}" alt="modernize-img" class="img-fluid" width="500">
                                </div>
                                <div class="col-lg-8">
                                    <form id="updateForm" class="dropzone mt-4 border rounded p-5 bg-light">
                                        <div class="dz-message">Déposez votre fichier <strong>.zip</strong> ici.</div>
                                    </form>

                                    <div class="progress mt-4" style="height:25px; display:none;">
                                        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%; height:25px;"></div>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- Modal Bootstrap -->
<div class="modal fade" id="successModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5>Mise à jour réussie 🎉</h5>
            </div>
            <div class="modal-body">Votre application a été mise à jour !</div>
            <div class="modal-footer">
                <button class="btn btn-success" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>

<!-- Include Dropzone & Bootstrap JS -->
<link rel="stylesheet" href="{{asset('assets/libs/dropzone/dist/dropzone.css')}}" />
<script src="{{asset('assets/libs/dropzone/dist/min/dropzone.min.js')}}"></script>

<script>
Dropzone.autoDiscover = false;

const steps = [
    { url: "{{ path('update_upload') }}", progress: 20 },
    { url: "{{ path('update_extract') }}", progress: 40 },
    { url: "{{ path('update_database') }}", progress: 60 },
    { url: "{{ path('update_files') }}", progress: 80 },
    { url: "{{ path('update_cleanup') }}", progress: 100 }
];

const myDropzone = new Dropzone("#updateForm", {
    url: steps[0].url,
    maxFiles: 1,
    acceptedFiles: '.zip',
    autoProcessQueue: true,
    init: function() {
        this.on("sending", () => {
            updateProgress(0);
            document.querySelector('.progress').style.display = 'block';
        });

        this.on("success", function() {
            updateProgress(steps[0].progress);
            runStep(1);
        });

        this.on("error", (file, err) => alert("Erreur: " + err.message));
    }
});

function runStep(index) {
    if (index >= steps.length) {
        setTimeout(() => new bootstrap.Modal('#successModal').show(), 500);
        return;
    }

    fetch(steps[index].url, { method: 'POST' })
        .then(res => res.json())
        .then(json => {
            if (json.success) {
                updateProgress(steps[index].progress);
                runStep(index + 1);
            } else {
                throw new Error(json.message);
            }
        })
        .catch(err => alert("Erreur: " + err.message));
}

function updateProgress(percent) {
    const progressBar = document.getElementById('progressBar');
    progressBar.style.width = percent + '%';
    progressBar.innerHTML = percent + '%';
}

</script>


{% include 'partials/footer.html.twig' %}