{% include "header.html" %}
{% load custom_filters %}
{% load static %}
<style>
    .options{
        background-color: #f4f4f4 !important;
    }
</style>
        <!-- Header Layout Content -->
        <div class="mdk-header-layout__content">

            <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
                <div class="mdk-drawer-layout__content page">

                    <div class="container-fluid page__heading-container">
                        <div class="page__heading">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="#"><i
                                                class="material-icons icon-20pt">home</i></a></li>
                                    <li class="breadcrumb-item">Sections</li>
                                    <li class="breadcrumb-item">Sub Sections/</li>
                                    <li class="breadcrumb-item">Topic/</li>
                                    <li class="breadcrumb-item active" aria-current="page">Question Bank</li>
                                </ol>
                            </nav>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <h1 class="heading">Question Bank</h1>
                            </div>
                            <div class="col-md-6">
                                <div>
                                    <div class="d-flex justify-content-md-end">
 
                                        <button type="button" class="add-btn" data-toggle="modal" data-target="#questionModal">Add Via
                                            Excel</button> &nbsp;
                                            <button type="button" class="add-btn" data-toggle="modal" data-target="#wordquestionModal">Add Via
                                                Word</button> &nbsp;
                                        <a href="add-question?test_id={{test_id}}" type="button" class="add-btn">Add Question</a> &nbsp;
                                        <button type="button" class="add-btn" id="auto-tag-question-paragraphs">
                                            <i class="fa fa-tags"></i> Auto Tag Paragraphs
                                        </button> &nbsp;
                                        <button type="button" class="add-btn" id="sync-question-videos">
                                            <i class="fa fa-refresh"></i> Sync Existing DigitalOcean Videos
                                        </button> &nbsp;
                                        <a href="download-questions?test_id={{test_id}}" type="button" class="add-btn"><i class="fa fa-download"></i> Download Questions</a>
                                    
                                    </div>
                                </div>

                            </div>
                        </div>


                    
                    </div>

                    <div class="container-fluid page__container exam-module">
                        <div class="card card-form">


                            <form action='/admin/question_bank'>
                                <input type="hidden" name="test_id" value="{{test_id}}"/>
                                <div class="row m-3 question-bank">
                                    <div class="col-lg-3 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="section">Section Name : </label>
                                            <select id="section" data-toggle="select" name="section_id" class="form-control">
                                                <option value="">Select section</option>
                                                {% for section in section_list %} 
                                                <option value="{{ section.id }}" {% if section.id == section_id %} selected {% endif %}>{{ section.section_name }}</option>
                                                {% endfor %}
                                                {% comment %} <option selected="">Active</option>
                                                <option selected="">Inactive</option> {% endcomment %}
                                            </select>
                                        </div>
                                    </div>
    
                                    <div class="col-lg-3 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="sub-section">Sub-Section Name : </label>
                                            <select id="sub-section" data-toggle="select" name="sub_section_id" class="form-control">
                                                <option value="">Select subsection</option>
                                                {% for sub_section in Sub_Sections_list %} 
                                                <option value="{{ sub_section.id }}" {% if sub_section.id == sub_section_id %} selected {% endif %}>{{ sub_section.sub_section_name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
    
    
                                    <div class="col-lg-3 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="topic">Topic : </label>
                                            <select id="topic" data-toggle="select" name="topic_id" class="form-control">
                                                <option value="">Select topic</option>
                                                {% for topic in Topics_list %} 
                                                <option value="{{ topic.id }}">{{ topic.topic_name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label for="topic">Question No. : </label>
                                        <input type="serach" id="search" name="search" placeholder="Enter Question No." value="{{search}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-1 col-md-12 col-sm-12"><br>
                                            <button class="btn btn-warning" type="submit">Go</button>
                                    </div>
                                </div>
    
                            </form>



                            <div class="row question-bank m-3 ">

                                <div class="col-lg-12 card-form__body">

                                    <div class="alert alert-info">
                                        <strong>Bulk upload explanation videos</strong><br>
                                        Select all videos in one go. Name each file using the question number shown below,
                                        for example <code>1.mp4</code>, <code>(2).mp4</code>, <code>3.mov</code>.
                                        Videos are compressed one at a time with FFmpeg, uploaded to
                                        <code>{{ video_folder }}</code>, and linked automatically in the background.
                                        When consecutive questions share the same question tag, upload only the video
                                        for the first question; that video is linked to the complete tag group.

                                        <form id="bulk-question-video-form" class="mt-3" enctype="multipart/form-data">
                                            {% csrf_token %}
                                            <div class="form-row align-items-center">
                                                <div class="col-md-8">
                                                    <input id="bulk-question-videos" type="file" name="videos"
                                                        accept="video/*,.mkv,.avi,.m4v" multiple class="form-control" required>
                                                </div>
                                                <div class="col-md-4">
                                                    <button id="bulk-question-video-submit" type="submit" class="btn btn-primary">
                                                        <i class="fa fa-upload"></i> Upload All Videos
                                                    </button>
                                                </div>
                                            </div>
                                        </form>

                                        <div id="question-video-job-panel" class="mt-3" style="display:none;">
                                            <div class="progress" style="height:22px;">
                                                <div id="question-video-progress" class="progress-bar progress-bar-striped progress-bar-animated"
                                                    role="progressbar" style="width:0%">0%</div>
                                            </div>
                                            <div id="question-video-job-message" class="mt-2 font-weight-bold"></div>
                                            <div id="question-video-job-errors" class="mt-2 text-danger"></div>
                                        </div>
                                        <div id="question-video-sync-message" class="mt-2"></div>
                                    </div>

                                    <div class="table-responsive border-bottom" data-toggle="lists"
                                        data-lists-values='["js-lists-values-employee-name"]'>

                                        <table class="table mb-0 thead-border-top-0">
                                            <thead class="table-heading">
                                                <tr>
                                                    <th class="table-head">Question No.</th>
                                                    <th class="table-head">Question Tag</th>
                                                    <th class="table-head">Section Name</th>
                                                    <th class="table-head">Sub-Section Name</th>
                                                    <th class="table-head">Topic Name</th>
                                                    <th class="table-head w-250">Question Type</th>
                                                    <th class="table-head w-250">Difficulty Level</th>
                                                    <th class="table-head w-250">Question</th>
                                                    <th class="table-head w-250">Paragraph</th>
                                                    <th class="table-head w-250">Answer Explaination</th>
                                                    <th class="table-head w-250">Options</th>
                                                    <th class="table-head">Video File / Status</th>
                                                    <th class="table-head">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody class="list" id="staff">
                                                
                                                {% for question in Question_list %}
                                                <tr>
                                                    <td>
                                                        {{ question.video_question_number }}

                                                        <!-- <select class="form-control change_index" data-id="{{question.id}}" data-test_id="{{question.test_id}}" style="width: 50px;">
                                                            <option value="">Select order</option>
                                                            {% for number in numbers %}
                                                            {% if number not in display_order %}
                                                                <option>{{ number }}</option>
                                                            {% endif %}
                                                            {% if question.display_order == number %}
                                                                <option selected>{{ number }}</option>
                                                            {% endif %}
                                                            {% endfor %}
                                                        </select> -->
                                                        <p id="qmsg_{{question.id}}"></p>
                                                    </td>
                                                    <td><code>{{ question.tag|default:"-" }}</code></td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{question.section.section_name}}</span>
                                                            </div>
                                                        </div>
                                                    </td>

                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{question.sub_section.sub_section_name}}
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </td>


                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{question.topic.topic_name}}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{question.question_type}}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{question.difficulty_level}} </span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{question.question|safe}} </span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{question.paragraph|safe}} </span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{question.explanation|safe}} </span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        {% if question.question_type == 'mcq' %}
                                                        {% with question.options|json_decode as option %}
                                                           
                                                                {% for opt in option %}
                                                                {% if forloop.counter|stringformat:"s" == question.correct_answer|stringformat:"s" %}
                                                                    <div class="card card-body p-2 options bg-success" style="width: 400px;">{{ opt|safe }} </div>
                                                                {% else %}
                                                                    <div class="card card-body p-2 options" style="width: 400px;">{{ opt|safe }} </div>
                                                                {% endif %}
                                                                    <!-- <div class="card card-body p-2 options">{{ opt|safe }}</div> -->
                                                                {% endfor %}
                                                         
                                                        {% endwith %}
                                                        {% else %}
                                                            <div class="card card-body p-2 options bg-success" style="width: 400px;">{{ question.correct_answer }} </div>
                                                        {% endif %}
                                                    </td>

                                                    <td>
                                                        <code>{{ question.video_filename }}</code><br>
                                                        {% if question.explanation_video %}
                                                            <span class="badge badge-success">Video uploaded</span><br>
                                                            <button type="button"
                                                                class="btn btn-sm btn-outline-primary mt-2 play-question-video"
                                                                data-toggle="modal"
                                                                data-target="#question-video-player-modal"
                                                                data-question-number="{{ question.video_question_number }}"
                                                                data-video-url="{{ question.explanation_video.url }}">
                                                                <i class="fa fa-play"></i> Play Video
                                                            </button>
                                                        {% else %}
                                                            <span class="badge badge-secondary">Not uploaded</span>
                                                        {% endif %}
                                                    </td>

                                                    <td span="">
                                                        <a href="#modal-delete" class="delete-button badge badge-danger"
                                                        data-toggle="modal"
                                                        data-id="{{question.id}}" > <i class="fas fa-trash delete"></i>
                                                    </a>
                                                    

                                                        <a href="/admin/editquestion/{{question.id}}"><span class="badge badge-warning edit"><i
                                                            class="fas fa-edit"></i></span></a>
                                                      
                                                    </td>
                                                    
                                                </tr>
                                                        <!-- delete modal  -->

                                                 
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="pagination">
                                        <span class="step-links">
                                            {% if Question_list.has_previous %}
                                                <a href="?page=1{{filter}}">&laquo; first</a>
                                                <a href="?page={{ Question_list.previous_page_number }}{{filter}}">previous</a>
                                            {% endif %}
                                    
                                            <span class="current">
                                                Page {{ Question_list.number }} of {{ Question_list.paginator.num_pages }}.
                                            </span>
                                    
                                            {% if Question_list.has_next %}
                                                <a href="?page={{ Question_list.next_page_number }}{{filter}}">next</a>
                                                <a href="?page={{ Question_list.paginator.num_pages }}{{filter}}">last &raquo;</a>
                                            {% endif %}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>




                    </div>

                </div>
                <!-- // END drawer-layout__content -->

                <!-- drawer -->
               {% include "sidebar.html"%}
                <!-- // END drawer -->
            </div>
            <!-- // END drawer-layout -->

        </div>
        <!-- // END header-layout__content -->

    </div>
    <!-- // END header-layout -->

{% include "footer.html" %}

    <div id="question-video-player-modal" class="modal fade" tabindex="-1" role="dialog"
        aria-labelledby="question-video-player-title" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="question-video-player-title">Explanation Video</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body bg-dark p-2">
                    <video id="question-video-player" controls playsinline preload="metadata"
                        style="display:block;width:100%;max-height:70vh;background:#000;">
                        Your browser does not support video playback.
                    </video>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script>
      (function () {
        const modal = $('#question-video-player-modal');
        const player = document.getElementById('question-video-player');
        const title = document.getElementById('question-video-player-title');

        $(document).on('click', '.play-question-video', function () {
          const videoUrl = this.dataset.videoUrl;
          const questionNumber = this.dataset.questionNumber;
          title.textContent = 'Question ' + questionNumber + ' – Explanation Video';
          player.src = videoUrl;
          player.load();
        });

        modal.on('hidden.bs.modal', function () {
          player.pause();
          player.removeAttribute('src');
          player.load();
        });
      })();
    </script>

    <script>
        (function () {
            'use strict';
            // ENABLE sidebar menu tabs
            $('#sidebar-mini-tabs [data-toggle="tab"]').on('click', function (e) {
                e.preventDefault()
                $(this).tab('show')
            })
        })()
    </script>

   

    <!-- delete modal  -->

    <div id="modal-delete" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-body text-center p-4">
                    <form method="post" enctype="multipart/form-data" id="delete_form" >
                        {% csrf_token %}
                        <h4 class="">Are you sure you want to delete?</h4>
                        <input type="hidden" name="id" id="delete_id" />
                        <button type="submit" class="btn btn-danger">Yes</button>
                        <button type="button" class="btn btn-light text-dark" data-dismiss="modal">No</button>
                        
                </form>
                </div> 
            </div> 
        </div> 
    </div> 


    <!-- delete modal  -->
 <!--question Modal -->
 <div class="modal fade" id="questionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Upload Question</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <form id="uploadForm" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="form-group">
                    <label><i>* Download Excel Format</i></label><br>
                    <a href="{% static 'assets/images/question-excel.xlsx'%}" class="btn add-btn" target="_blank"><i class="fa fa-download"></i> Download</a>
                </div><br>
                <input type="file" name="excelFile" class="form-control"><br>
                <input type="hidden" name="test_id" value="{{test_id}}"/>
                <input type="hidden" name="exam_category_id" value="{{test.0.examcategory_id}}"/>
                <button type="submit" class="btn btn-primary">Upload</button>
                <div id="message"></div>
            </form>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="wordquestionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Upload Question</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <form id="uploadWordForm" method="post" enctype="multipart/form-data">
                {% csrf_token %}<br>

                <p><strong>Instructions: </strong></p>
                <ul>
                    <li>A paragraph should start with the keyword <strong>Directions: </strong>.</li>
                    <li>A question should start with the keyword <strong>Q-</strong>.</li>
                    <li>Options should begin with the keyword <strong>A) </strong>.</li>
                    <li>The correct answer should start with the keyword <strong>Answer: </strong>.</li>
                    <li>The answer explanation should start with the keyword <strong>Solution: </strong>.</li>
                    <li>Math equations should begin on a new line, and there must be a <strong>$$</strong> delimiter at the start and end of the equation.</li>
                    <li>The font family should be Cambria Math.</li>
                </ul>
                <div class="form-group">
                    <label><i>* Download Word Format</i></label><br>
                    <a href="{% static 'assets/images/question-word.docx'%}" class="btn add-btn" target="_blank"><i class="fa fa-download"></i> Download</a>
                </div><br>
                <br>
                <input type="file" name="excelFile" class="form-control"><br>
                <input type="hidden" name="test_id" value="{{test_id}}"/>
                <input type="hidden" name="exam_category_id" value="{{test.0.examcategory_id}}"/>
                <button type="submit" class="btn btn-primary">Upload</button>
                <div id="wmessage"></div>
            </form>
        </div>
      </div>
    </div>
  </div>


</body>
<script>
       $('.delete-button').click( function() {
      var id = $(this).data('id');
       $('#delete_id').val(id);
   })
   //    var delete_id = $('#category_id').val(id);
       //debugger
       // var category_id = $(this).val();
       $('#delete_form').submit(function(event) {
         // Prevent the default form submission behavior
         event.preventDefault();
         
         var formData = new FormData($(this)[0]);
       
       // Send the Ajax request
       $.ajax({
         url: '{% url "delete-question" %}',
         type: 'POST',
         data: formData,
         processData: false,
         dataType: 'json',
         contentType: false,
         success: function(response) {
           if(response.status=='success'){
            $('#modal-delete').modal('hide');
            setTimeout(function () {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: 'Deleted Successfully.',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK'
                });
            }, 1000);
            setTimeout(function () {
                location.reload();
            }, 2000);
            //    $('#msg').html('<div class="text-success">'+response.msg+'</div>');
           }
           else{
       
               $('#delete_msg').html('<div class="text-danger">'+response.msg+'</div>');
           }
         },
         error: function(xhr, status, error) {
          
           console.log(error);
         }
       });
        
   });

    $(document).ready(function() {
$('#uploadForm').submit(function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        url: "{% url 'upload_question_excel' %}",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            $('#message').html(response.message);
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
        }
    });
});
});
$(document).ready(function() {
$('#uploadWordForm').submit(function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        url: "{% url 'upload_question_word' %}",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if(response.success){

                $('#wmessage').html('<p class="text-success">'+response.message+'</p>');
            }
            else{
                $('#wmessage').html('<p class="text-danger">'+response.message+'</p>');
            }
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
        }
    });
});
});
    
    $("#section").change(function() {
        var section = $(this).find("option:selected").val();
        
       // var category_level = $(this).attr("data-id");
        var html = '';
        if (section != "") {
            $("#sub-section").empty();
            $.ajax({
                url: '{% url "section_selct" %}',
                method: "GET",
                data: {
                    section: section,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function(response) {
                    // alert(response);
                    $('#sub-section').html(response);
                
                },
            });
        }
    });
    $("#sub-section").change(function() {
      //  alert();
        var sub_section = $(this).find("option:selected").val();
        
       // var category_level = $(this).attr("data-id");
        var html = '';
        if (sub_section != "") {
            $("#topic").empty();
            $.ajax({
                url: '{% url "subsection_select" %}',
                method: "GET",
                data: {
                    sub_section: sub_section,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function(response) {
                    // alert(response);
                    $('#topic').html(response);
                
                },
            });
        }
    });
    $('.change_index').change(function(){
        var order = $(this).val();
        var question_id = $(this).data('id');
        var test_id = $(this).data('test_id');
        $.ajax({
                 url: '{% url "update_question_order" %}',
                 method: "POST",
                 data: {
                     order: order,
                     question_id:question_id,
                     test_id:test_id,
                     csrfmiddlewaretoken: '{{ csrf_token }}'
                 },
                 dataType: 'json',
                 success: function(response) {
                     // alert(response);
                    //  $('#topic').html(response);
                    if(response.status){
                        $('#qmsg_'+question_id).html('');
                    }
                    else{
                        $('#qmsg_'+question_id).html('<p class="text-danger">'+response.msg+'</p>');
                    }
                 
                 },
             });
         
    });
  (function () {
    const uploadForm = document.getElementById('bulk-question-video-form');
    const uploadInput = document.getElementById('bulk-question-videos');
    const uploadButton = document.getElementById('bulk-question-video-submit');
    const jobPanel = document.getElementById('question-video-job-panel');
    const progress = document.getElementById('question-video-progress');
    const jobMessage = document.getElementById('question-video-job-message');
    const jobErrors = document.getElementById('question-video-job-errors');
    const storageKey = 'question-video-job-{{ test_id }}';
    const uploadUrl = "{% url 'bulk_upload_question_explanation_videos' test_id %}";
    const statusUrlTemplate = "{% url 'question_video_upload_status' test_id 'JOB_ID' %}";

    function showProgress(percent, text, isError) {
      jobPanel.style.display = 'block';
      const value = Math.max(0, Math.min(100, Math.round(percent || 0)));
      progress.style.width = value + '%';
      progress.textContent = value + '%';
      progress.classList.toggle('bg-danger', Boolean(isError));
      progress.classList.toggle('bg-success', value === 100 && !isError);
      jobMessage.className = 'mt-2 font-weight-bold ' + (isError ? 'text-danger' : 'text-info');
      jobMessage.textContent = text;
    }

    function renderJob(job) {
      const total = Number(job.total || 0);
      const processed = Number(job.processed || 0);
      const percent = total ? (processed / total) * 100 : 0;
      const finished = ['completed', 'completed_with_errors', 'failed'].includes(job.state);
      const hasErrors = job.state === 'failed' || job.state === 'completed_with_errors';
      const stateLabel = job.state === 'queued' ? 'Queued' :
        job.state === 'processing' ? 'Compressing and uploading' +
          (job.current_question_number ? ' question ' + job.current_question_number : '') :
        job.state === 'completed' ? 'Completed' :
        job.state === 'completed_with_errors' ? 'Completed with errors' : 'Failed';

      showProgress(finished ? 100 : percent,
        stateLabel + ': ' + processed + '/' + total +
        ' processed, ' + Number(job.uploaded || 0) + ' uploaded' +
        (Number(job.linked_questions || 0) ? ', ' + job.linked_questions + ' questions linked' : '') +
        (Number(job.failed || 0) ? ', ' + job.failed + ' failed' : '') + '.',
        hasErrors);

      const errors = Array.isArray(job.errors) ? job.errors : [];
      jobErrors.innerHTML = '';
      errors.slice(0, 10).forEach(function (item) {
        const label = item.file ? item.file + ': ' : '';
        const line = document.createElement('div');
        line.textContent = label + String(item.error || 'Unknown error');
        jobErrors.appendChild(line);
      });
      return finished;
    }

    async function pollJob(jobId) {
      try {
        const response = await fetch(statusUrlTemplate.replace('JOB_ID', jobId));
        const data = await response.json();
        if (!response.ok) throw new Error(data.error || 'Could not read upload status.');
        const finished = renderJob(data.job);
        if (finished) {
          localStorage.removeItem(storageKey);
          if (data.job.state === 'completed') {
            window.setTimeout(function () { window.location.reload(); }, 1500);
          }
          return;
        }
        window.setTimeout(function () { pollJob(jobId); }, 2000);
      } catch (error) {
        showProgress(0, error.message, true);
      }
    }

    if (uploadForm) {
      uploadForm.addEventListener('submit', function (event) {
        event.preventDefault();
        if (!uploadInput.files.length) return;

        const formData = new FormData(uploadForm);
        const xhr = new XMLHttpRequest();
        uploadButton.disabled = true;
        uploadInput.disabled = true;
        jobErrors.innerHTML = '';
        showProgress(0, 'Uploading ' + uploadInput.files.length + ' files to the server...', false);

        xhr.upload.addEventListener('progress', function (event) {
          if (event.lengthComputable) {
            showProgress((event.loaded / event.total) * 100, 'Uploading files to the server...', false);
          }
        });
        xhr.addEventListener('load', function () {
          uploadButton.disabled = false;
          uploadInput.disabled = false;
          let data = {};
          try { data = JSON.parse(xhr.responseText || '{}'); } catch (error) {}
          if (xhr.status < 200 || xhr.status >= 300) {
            showProgress(0, data.error || data.details || 'Video upload could not be queued.', true);
            return;
          }
          const jobId = data.job.job_id;
          localStorage.setItem(storageKey, jobId);
          showProgress(0, data.message, false);
          pollJob(jobId);
        });
        xhr.addEventListener('error', function () {
          uploadButton.disabled = false;
          uploadInput.disabled = false;
          showProgress(0, 'Network error while uploading videos.', true);
        });
        xhr.open('POST', uploadUrl);
        xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');
        xhr.send(formData);
      });
    }

    const savedJobId = localStorage.getItem(storageKey);
    if (savedJobId) pollJob(savedJobId);

    const autoTagButton = document.getElementById('auto-tag-question-paragraphs');
    const syncButton = document.getElementById('sync-question-videos');
    const message = document.getElementById('question-video-sync-message');
    if (!message) return;

    if (autoTagButton) {
      autoTagButton.addEventListener('click', async function () {
        if (!window.confirm('Generate tags from matching paragraphs? Existing question tags in this mock will be replaced.')) {
          return;
        }

        autoTagButton.disabled = true;
        message.className = 'mt-2 text-info font-weight-bold';
        message.textContent = 'Checking paragraphs and generating question tags...';

        try {
          const response = await fetch("{% url 'auto_tag_question_paragraphs' test_id %}", {
            method: 'POST',
            headers: {'X-CSRFToken': '{{ csrf_token }}'}
          });
          const data = await response.json();
          if (!response.ok || data.status !== 'success') {
            throw new Error(data.msg || 'Unable to generate question tags.');
          }

          message.className = 'mt-2 text-success font-weight-bold';
          message.textContent = data.msg + ' ' + data.updated_count +
            ' questions updated; ' + data.shared_paragraph_groups +
            ' shared paragraph groups found.';
          window.setTimeout(function () { window.location.reload(); }, 1200);
        } catch (error) {
          message.className = 'mt-2 text-danger font-weight-bold';
          message.textContent = error.message;
        } finally {
          autoTagButton.disabled = false;
        }
      });
    }

    if (!syncButton) return;

    syncButton.addEventListener('click', async function () {
      syncButton.disabled = true;
      message.className = 'mt-2 text-info';
      message.textContent = 'Checking the mock folder in DigitalOcean Spaces...';

      try {
        const response = await fetch(
          "{% url 'sync_question_explanation_videos' test_id %}",
          {
            method: 'POST',
            headers: {'X-CSRFToken': '{{ csrf_token }}'}
          }
        );
        const data = await response.json();
        if (!response.ok) {
          throw new Error(data.error || 'Unable to sync videos.');
        }

        message.className = 'mt-2 text-success font-weight-bold';
        message.textContent = data.message;
        window.setTimeout(function () {
          window.location.reload();
        }, 1200);
      } catch (error) {
        message.className = 'mt-2 text-danger font-weight-bold';
        message.textContent = error.message;
      } finally {
        syncButton.disabled = false;
      }
    });
  })();
</script>
</html>