{% extends 'index.html.twig' %}

{% block page_content_start %}
    <section id="uploadVideo" style="width: 100%">
        <h3>Upload une video</h3>
            <form enctype="multipart/form-data" id="uploadVideoForm" method="POST" style="display: flex; flex-direction: column; gap: 1rem; border: grey; box-shadow: grey 1px 1px 5px; padding: 1rem; border-radius: 5px; margin: 5rem auto; width: 100%; max-width: 400px">
                <div style="display: flex; flex-direction: column">
                    <label for="name">Nom de la vidéo</label>
                    <input id="name" type="text" required style="padding: .5rem">
                </div>
                <div style="display: flex; flex-direction: column">
                    <label for="category">Catégorie de la vidéo</label>
                    <input id="category" type="text" style="padding: .5rem">
                </div>
                <div style="display: flex; flex-direction: column">
                    <label for="description">Description de la vidéo</label>
                    <textarea id="description" style="padding: .5rem; resize: none"></textarea>
                </div>
                <div>
                    <input type="checkbox" id="isRdvIB">
                    <label for="isRdvIB" style="margin-left: .5rem">Rdv IB</label>
                </div>
                <div id="preview" style="display: none; text-align: center">
                    <img id="previewThumbnail" style="max-width: 100%; max-height: 200px; object-fit: contain;">
                    <br>
                    <span id="videoFileName"></span>
                </div>
                <div style="display: flex; flex-wrap: nowrap; justify-content: center; gap: 1rem">
                    <div>
                        <label for="videoThumbnail" style="background-color: #00B5E6; color: white; padding: .5rem; border-radius: 3px; cursor: pointer; display: flex;">
                            <span style="display: flex; align-items: center; text-align: center">
                                Choisir la miniature <i class="fas fa-image"></i>
                            </span>
                        </label>
                        <input type="file" id="videoThumbnail" accept="image/jpeg" required style="display: none">
                    </div>
                    <div>
                        <label for="videoFile" style="background-color: #00B5E6; color: white; padding: .5rem; border-radius: 3px; cursor: pointer; display: flex;">
                            <span style="display: flex; align-items: center; text-align: center">
                                Choisir la vidéo <i class="fas fa-video"></i>
                            </span>
                        </label>
                        <input type="file" id="videoFile" accept="video/mp4" required style="display: none">
                    </div>
                </div>

                <div style="display: none; margin: 10px 0;" class="progress-container">
                    <div style="width: 100%; background-color: #e0e0e0; border-radius: 5px; overflow: hidden;">
                        <div class="progress-bar-custom" style="width: 0; height: 20px; background-color: #00B5E6; transition: width 0.3s;"></div>
                    </div>
                    <div class="progress-text" style="text-align: center; margin-top: 8px; color: #666;"></div>
                </div>
                <button type="submit" style="margin: 0 auto; display: none; background-color: #00B5E6; color: white; padding: .5rem; border-radius: 3px;border: none">
                    <span style="display: flex; gap: .5rem; align-items: center">
                        Upload <i class="fas fa-upload"></i>
                    </span>
                </button>
            </form>
        <a href="{{ path('app_video') }}" style="background-color: #00B5E6; color: white; padding: .5rem; border-radius: 3px;border: none">< Retour</a>
    </section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            $('#uploadVideoForm').on('submit', function(e) {
                $('input#name').prop('disabled', true)
                $('textarea#description').prop('disabled', true)
                $('input#category').prop('disabled', true)
                $('input#isRdvIB').prop('disabled', true)
                $('button[type="submit"]').hide()
                $('label[for="videoThumbnail"]').hide()
                $('label[for="videoFile"]').hide()
                e.preventDefault();

                var file = $('#videoFile')[0].files[0];
                var name = $('#name').val();
                var description = $('#description').val();
                var category = $('#category').val();
                var isRdvIB = $('#isRdvIB').is(':checked');
                var thumbnail = $('#videoThumbnail')[0].files[0];
                var chunkSize = 10 * 1024 * 1024; // en Mb
                var chunks = Math.ceil(file.size / chunkSize);
                var currentChunk = 0;
                var concurrentUploads = 3; // Nombre de chunks à envoyer en parallèle
                var activeUploads = 0;
                var uploadedChunks = 0;

                var uploadStartTime = null;

                function uploadChunk(chunkIndex) {
                    if (currentChunk === 0) {
                        uploadStartTime = Date.now();
                    }
                    var start = chunkIndex * chunkSize;
                    var end = Math.min(file.size, start + chunkSize);
                    var chunk = file.slice(start, end);

                    var formData = new FormData();
                    formData.append('video', chunk, file.name);
                    formData.append('name', name);
                    formData.append('description', description);
                    formData.append('category', category);
                    formData.append('isRdvIB', isRdvIB);
                    formData.append('currentChunk', chunkIndex);
                    formData.append('totalChunks', chunks);
                    formData.append('thumbnail', thumbnail);

                    $.ajax({
                        url: '{{ path('app_upload_video') }}',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        xhr: function() {
                            var xhr = new window.XMLHttpRequest();
                            xhr.upload.addEventListener("progress", function(evt) {
                                if (evt.lengthComputable) {
                                    // Calcul de la vitesse d'upload
                                    var currentTime = Date.now();
                                    var elapsedTime = (currentTime - uploadStartTime) / 1000; // en secondes
                                    var uploadedBytes = uploadedChunks * chunkSize + evt.loaded;
                                    var speed = (uploadedBytes / elapsedTime) * concurrentUploads;
                                    var averageSpeed = updateSpeed(speed);

                                    // Calcul du temps restant
                                    var remainingBytes = file.size - uploadedBytes;
                                    var estimatedTimeRemaining = remainingBytes / averageSpeed;

                                    // Mise à jour de l'affichage
                                    updateProgress(estimatedTimeRemaining);
                                }
                            }, false);
                            return xhr;
                        },
                        success: function(response) {
                            uploadedChunks++;
                            activeUploads--;
                            if (currentChunk < chunks) {
                                uploadNextChunk();
                            } else if (uploadedChunks === chunks) {
                                console.log('Upload terminé avec succès !');
                                alert('Upload terminé avec succès !');
                                $('.progress').hide();
                                window.location.href = '{{ path('app_video_show', {'id': "00"}) }}'.replace('00', response.id)
                            }
                        },
                        error: function(error) {
                            console.log(error);
                            alert('Une erreur est survenue lors de l\'upload.');
                            activeUploads--;
                            window.location.reload(true)
                        }
                    });
                }

                function updateProgress(estimatedTimeRemaining) {
                    var totalProgress = uploadedChunks / chunks;
                    var percentComplete = parseInt(totalProgress * 100);

                    var minutes = Math.floor(estimatedTimeRemaining / 60);
                    var seconds = Math.floor(estimatedTimeRemaining % 60);
                    var timeString = minutes + 'm ' + seconds + 's';

                    $('.progress-bar-custom').width(percentComplete + '%');
                    $('.progress-text').text(percentComplete + '% - Temps restant : ' + timeString);
                }

                function uploadNextChunk() {
                    while (currentChunk < chunks && activeUploads < concurrentUploads) {
                        uploadChunk(currentChunk);
                        currentChunk++;
                        activeUploads++;
                    }
                }

                $('.progress-container').show();
                $('input[type="file"]').hide();
                uploadNextChunk();

            });
            function checkFiles() {
                if ($('#videoFile')[0].files[0] && $('#videoThumbnail')[0].files[0]) {
                    $('button[type="submit"]').show();
                } else {
                    $('button[type="submit"]').hide();
                }
            }
            $('#videoThumbnail').on('change', function() {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#previewThumbnail').attr('src', e.target.result);
                        $('#preview').show();
                        checkFiles()
                    }
                    reader.readAsDataURL(file);
                }
            });
            $('#videoFile').on('change', function() {
                const file = this.files[0];
                if (file) {
                    $('#videoFileName').text(file.name);
                    $('#preview').show();
                    checkFiles()
                }
            });

            var speedMeasurements = [];
            var maxMeasurements = 5; // Nombre de mesures à garder pour la moyenne

            function updateSpeed(newSpeed) {
                speedMeasurements.push(newSpeed);
                if (speedMeasurements.length > maxMeasurements) {
                    speedMeasurements.shift(); // Enlève la plus ancienne mesure
                }
                return speedMeasurements.reduce((a, b) => a + b, 0) / speedMeasurements.length;
            }
        });
    </script>
{% endblock %}