<!DOCTYPE html>
{% trans_default_domain 'sign-up' %}

<html lang="{{ app.request.locale }}" dir="{{ app.request.locale == 'ar' ? 'rtl' : 'ltr' }}">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
      <title>Téléchargeur de vidéos YouTube</title>
      <!-- jQuery -->
      <script src="{{ asset('assets/vendor/jquery@4.0.0/jquery.min.js') }}"></script>
      <!-- Font Awesome pour les icônes -->
      <link rel="stylesheet" href="{{ asset('assets/vendor/font-awesome@6.7.2/css/all.min.css') }}">
      <link rel="stylesheet" href="{{ asset('assets/css/frontend.css') }}">
      <link rel="stylesheet" href="{{ asset('assets/vendor/bootstrap@5.3.8/css/bootstrap.min.css') }}">
      <link rel="stylesheet" href="{{ asset('assets/vendor/country-select-js@2.1.0/build/css/countrySelect.css') }}">
      <link rel="stylesheet" href="{{ asset('assets/vendor/intl-tel-input@28.1.0/dist/css/intlTelInput.min.css') }}">
   </head>
   <body>
        
      
      <div class="container mt-5">
        <h3>Téléchargement de la vidéo</h3>
        <button id="start-download" class="btn btn-primary mb-3">Lancer le téléchargement</button>

        <div class="progress" style="height: 30px;">
            <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" 
                role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                0%
            </div>
        </div>
        <div id="status" class="mt-2 text-muted">Prêt.</div>
    </div>
      
      <script src="{{ asset('assets/vendor/bootstrap@5.3.8/js/bootstrap.min.js') }}"></script>
      <script src="{{ asset('assets/vendor/country-select-js@2.1.0/build/js/countrySelect.js') }}"></script>
      <script src="{{ asset('assets/vendor/intl-tel-input@28.1.0/dist/js/intlTelInput.min.js') }}"></script>
      
      <script>

        $(document).ready(function() {
            $('#start-download').on('click', function() {
                const $progressBar = $('#progress-bar');
                const $status = $('#status');
                
                $status.text('Téléchargement en cours...');
                $progressBar.css('width', '0%').attr('aria-valuenow', 0).text('0%');
                $(this).prop('disabled', true); // Désactive le bouton pendant le téléchargement

                // On ouvre la connexion SSE vers notre route Symfony
                const eventSource = new EventSource("{{ path('app_streamed_download') }}");

                eventSource.onmessage = function(event) {
                    const data = JSON.parse(event.data);
                    
                    if (data.progress) {
                        // Mise à jour de la barre avec jQuery
                        $progressBar.css('width', data.progress + '%')
                                    .attr('aria-valuenow', data.progress)
                                    .text(data.progress + '%');
                    }

                    // Si le script PHP a terminé
                    if (data.done) {
                        $status.text('Téléchargement terminé avec succès !');
                        $progressBar.removeClass('progress-bar-animated').addClass('bg-success');
                        eventSource.close(); // On ferme la connexion
                        $('#start-download').prop('disabled', false);
                    }
                };

                eventSource.onerror = function(err) {
                    console.error("Erreur SSE:", err);
                    $status.text('Une erreur est survenue lors du téléchargement.');
                    eventSource.close();
                    $('#start-download').prop('disabled', false);
                };
            });
        });


      </script>
   </body>
</html>
