{% include "header.html"  %}

    <!-- main page  -->
    <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 page__heading-container">
                    <div class="page__heading">
                        
                    </div>
                   
                    <div class="container mt-4">
                      <h3 class="mb-3">Preview Lectures</h3>
                      <div class="card card-body">
                        <form method="GET" action="{% url 'generate_lectures' %}">
                            <label for="batch_id">Batch:</label>
                            <select name="batch_id" id="batch_id">
                                {% for batch in batches %}
                                    <option value="{{ batch.id }}" {% if batch.id == batch_id %}selected{% endif %}>{{ batch.batch_name }}</option>
                                {% endfor %}
                            </select>
                            
                            <label for="start_date">Start Date:</label>
                            <input type="date" name="start_date" id="start_date" value="{{ start_date }}" required>
                            
                            <label for="end_date">End Date:</label>
                            <input type="date" name="end_date" id="end_date" value="{{ end_date }}" required>
                            
                            <button type="submit">Generate Schedule</button>
                        </form>
                      </div>
                      <div class="card card-body">
                      <form id="saveForm" method="POST" action="save_previewed_lectures">
                        {% csrf_token %}
                        <input type="hidden" name="payload" id="payload" />
                    
                        <div class="table-responsive">
                          <table class="table table-bordered" id="previewTable">
                            <thead>
                              <tr>
                                <th>Topic</th>
                                <th>Section</th>
                                <th>Faculty</th>
                                <th>Batches</th>
                                <th>Date</th>
                                <th>Time</th>
                                <th>Note</th>
                                <th>Remove</th>
                              </tr>
                            </thead>
                            <tbody>
                              {% for item in schedule %}
                              <tr data-index="{{ forloop.counter0 }}">
                                <td>{{ item.topic_name }}
                                  {% if item.extra_topic_name %}
                                  <br><span class="badge bg-warning text-dark">+ {{ item.extra_topic_name }}</span>
                                {% endif %}
                                </td>
                                <td>{{ item.section_name }}</td>
                                <td>{{ item.faculty_name }}</td>
                                <td>
                                  {% for batch in item.batch_names %}
                                    <span class="badge bg-info text-dark">{{ batch }}</span>
                                  {% endfor %}
                                </td>
                                <td>{{ item.date }} ({{ item.day }})</td>
                                <td>{{ item.start_time }} - {{ item.end_time }}</td>
                                <td>{{ item.note }}</td>
                                <td><button type="button" class="btn btn-sm btn-danger remove-row">×</button></td>
                              </tr>
                              {% endfor %}
                            </tbody>
                          </table>
                        </div>
                    
                        <div class="text-end">
                          <button type="submit" class="btn btn-success">Save Lectures</button>
                        </div>
                      </form>
                    </div>
                    
                    <script>
                      const scheduleData = {{ schedule_json|safe }};
                    
                      document.querySelectorAll('.remove-row').forEach((btn, index) => {
                        btn.addEventListener('click', () => {
                          const row = btn.closest('tr');
                          const idx = parseInt(row.dataset.index);
                          scheduleData.splice(idx, 1);
                          row.remove();
                        });
                      });
                    
                      document.getElementById('saveForm').addEventListener('submit', function(e) {
                        e.preventDefault();
                        document.getElementById('payload').value = JSON.stringify(scheduleData);
                        this.submit();
                      });
                    </script>
                  
            </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"%}