{% include "header.html" %}
{% load static %}

<style>
  .card-box {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 14px;
    background: #fff;
  }
  .scroll-card {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    padding: 10px;
  }
  .check-item {
    display: flex;
    gap: 10px;
    align-items: start;
    padding: 10px 8px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .check-item:hover {
    background: #fafafa;
    border-color: #eee;
  }
  .check-item input {
    margin-top: 3px;
  }
  .chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: #f4f6f8;
    margin-left: 8px;
  }
  .toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  .toolbar input {
    max-width: 360px;
  }
  .table-sm td, .table-sm th { padding: .55rem; }
</style>

<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__container exam-module mock-test-list-add">
        <h2 class="mt-4 mb-4">Add Syllabus Form</h2>

        <div class="card card-form">
          <div class="row no-gutters">
            <div class="col-lg-12 card-form__body">
              <form id="add_exam_syllabus" method="post">
                {% csrf_token %}
                <input type="hidden" name="exam_category_id" value="{{ id }}">

                <div class="row">
                  <!-- TOPICS -->
                  <div class="col-md-6">
                    <div class="card-box">
                      <div class="d-flex justify-content-between align-items-center mb-2">
                        <h5 class="mb-0">Select Topics (All Sections)</h5>
                        <span class="chip"><span id="topicCount">0</span> selected</span>
                      </div>

                      <div class="toolbar mb-2">
                        <input type="text" class="form-control" id="topicSearch" placeholder="Search topics...">
                        <button type="button" class="btn btn-light" id="topicSelectAll">Select All</button>
                        <button type="button" class="btn btn-light" id="topicClearAll">Clear</button>
                      </div>

                      <div class="scroll-card" id="topicsBox">
                        {% for t in topics %}
                          <label class="check-item topic-item"
                                 data-name="{{ t.topic_name|lower }}"
                                 data-topic-id="{{ t.id }}"
                                 data-section-id="{{ t.section_id }}"
                                 data-sub-section-id="{{ t.sub_section_id }}">
                            <input type="checkbox" class="topic-checkbox"
                                   value="{{ t.id }}"
                                   data-section-id="{{ t.section_id }}"
                                   data-sub-section-id="{{ t.sub_section_id }}">
                            <div>
                              <div><b>{{ t.topic_name }}</b></div>
                              <div class="text-muted small">
                                Section: {{ t.section_id }} | Sub-section: {{ t.sub_section_id }}
                              </div>
                            </div>
                          </label>
                        {% endfor %}
                      </div>
                    </div>
                  </div>

                  <!-- DEPENDENT TOPICS -->
                  <div class="col-md-6">
                    <div class="card-box">
                      <div class="d-flex justify-content-between align-items-center mb-2">
                        <h5 class="mb-0">Select Dependent Topics</h5>
                        <span class="chip"><span id="depCount">0</span> selected</span>
                      </div>

                      <div class="toolbar mb-2">
                        <input type="text" class="form-control" id="depSearch" placeholder="Search dependent topics...">
                        <button type="button" class="btn btn-light" id="depSelectAll">Select All</button>
                        <button type="button" class="btn btn-light" id="depClearAll">Clear</button>
                      </div>

                      <div class="scroll-card" id="depsBox">
                        {% for t in topics %}
                          <label class="check-item dep-item" data-name="{{ t.topic_name|lower }}">
                            <input type="checkbox" class="dep-checkbox" value="{{ t.id }}">
                            <div><b>{{ t.topic_name }}</b></div>
                          </label>
                        {% endfor %}
                      </div>

                      <div class="mt-3">
                        <button type="button" class="btn btn-primary w-100 text-white" id="addMappingBtn">
                          Add Mapping
                        </button>
                        <small class="text-muted d-block mt-2">
                          This will auto-group selected topics by <b>(section_id + sub_section_id)</b>.
                        </small>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- PREVIEW TABLE -->
                <div class="card-box mt-4">
                  <div class="d-flex justify-content-between align-items-center mb-2">
                    <h5 class="mb-0">Preview</h5>
                    <button type="button" class="btn btn-outline-danger btn-sm" id="clearPreview">Clear Preview</button>
                  </div>

                  <div class="table-responsive">
                    <table class="table table-sm align-middle">
                      <thead>
                        <tr>
                          <th style="min-width:120px;">Section ID</th>
                          <th style="min-width:140px;">Sub-section ID</th>
                          <th>Topics</th>
                          <th>Dependent Topics</th>
                          <th style="width:90px;">Action</th>
                        </tr>
                      </thead>
                      <tbody id="previewBody">
                        <tr id="noRows">
                          <td colspan="5" class="text-muted">No mappings added yet.</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <!-- ONE payload for the entire form -->
                  <input type="hidden" name="syllabus_payload" id="syllabusPayload" value="[]">
                </div>

                <!-- SAVE -->
                <div class="row d-flex justify-content-center mt-4">
                  <div class="col-md-2 col-6">
                    <button class="btn add-btn w-100" type="submit">Save</button>
                  </div>
                </div>

                <div id="msg" class="mt-3"></div>
              </form>
            </div>
          </div>
        </div>
      </div>

    </div>
    {% include "sidebar.html" %}
  </div>
</div>

{% include "footer.html" %}

<script>
(function () {

  // Build topicId -> topicName map (for preview)
  const TOPIC_NAME = {};
  document.querySelectorAll('.topic-item').forEach(el => {
    TOPIC_NAME[el.dataset.topicId] = el.querySelector('b').innerText.trim();
  });

  function getSelectedTopicCheckboxes() {
    return Array.from(document.querySelectorAll('.topic-checkbox:checked'));
  }

  function getSelectedDepIds() {
    return Array.from(document.querySelectorAll('.dep-checkbox:checked')).map(x => Number(x.value));
  }

  function updateCounts() {
    document.getElementById('topicCount').innerText = getSelectedTopicCheckboxes().length;
    document.getElementById('depCount').innerText = getSelectedDepIds().length;
  }

  // Search filter
  function attachSearch(inputId, itemSelector) {
    const input = document.getElementById(inputId);
    input.addEventListener('input', () => {
      const q = input.value.trim().toLowerCase();
      document.querySelectorAll(itemSelector).forEach(item => {
        const name = item.dataset.name || '';
        item.style.display = name.includes(q) ? '' : 'none';
      });
    });
  }
  attachSearch('topicSearch', '.topic-item');
  attachSearch('depSearch', '.dep-item');

  // Select all / clear helpers
  function setAll(selector, checked) {
    document.querySelectorAll(selector).forEach(cb => cb.checked = checked);
    updateCounts();
  }

  document.getElementById('topicSelectAll').onclick = () => setAll('.topic-checkbox', true);
  document.getElementById('topicClearAll').onclick = () => setAll('.topic-checkbox', false);
  document.getElementById('depSelectAll').onclick = () => setAll('.dep-checkbox', true);
  document.getElementById('depClearAll').onclick = () => setAll('.dep-checkbox', false);

  document.querySelectorAll('.topic-checkbox, .dep-checkbox').forEach(cb => {
    cb.addEventListener('change', updateCounts);
  });

  // Payload state
  let PAYLOAD = []; // [{section_id, sub_section_id, topic_ids[], dependent_topic_ids[]}]
  const payloadInput = document.getElementById('syllabusPayload');
  const previewBody = document.getElementById('previewBody');
  const noRows = document.getElementById('noRows');

  function syncPayload() {
    payloadInput.value = JSON.stringify(PAYLOAD);
  }

  function renderPreview() {
    previewBody.innerHTML = '';
    if (!PAYLOAD.length) {
      previewBody.appendChild(noRows);
      noRows.style.display = '';
      syncPayload();
      return;
    }

    noRows.style.display = 'none';

    PAYLOAD.forEach((row, idx) => {
      const topicNames = row.topic_ids.map(id => TOPIC_NAME[String(id)] || `#${id}`).join(', ');
      const depNames = (row.dependent_topic_ids || []).length
        ? row.dependent_topic_ids.map(id => TOPIC_NAME[String(id)] || `#${id}`).join(', ')
        : 'N/A';

      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${row.section_id}</td>
        <td>${row.sub_section_id}</td>
        <td>${topicNames}</td>
        <td>${depNames}</td>
        <td><button type="button" class="btn btn-sm btn-danger" data-remove="${idx}">Remove</button></td>
      `;
      previewBody.appendChild(tr);
    });

    syncPayload();
  }

  // Remove row
  previewBody.addEventListener('click', (e) => {
    const btn = e.target.closest('button[data-remove]');
    if (!btn) return;
    const idx = Number(btn.dataset.remove);
    PAYLOAD.splice(idx, 1);
    renderPreview();
  });

  // Clear preview
  document.getElementById('clearPreview').onclick = () => {
    PAYLOAD = [];
    renderPreview();
  };

  // Add mapping: group selected topics by (section_id + sub_section_id)
  document.getElementById('addMappingBtn').onclick = () => {
    const selectedTopics = getSelectedTopicCheckboxes();
    if (!selectedTopics.length) {
      alert('Please select at least one topic.');
      return;
    }

    const depIds = getSelectedDepIds();

    // Group topics
    const groups = {}; // key = "sectionId|subSectionId" => {section_id, sub_section_id, topic_ids[]}
    selectedTopics.forEach(cb => {
      const sectionId = Number(cb.dataset.sectionId);
      const subSectionId = Number(cb.dataset.subSectionId);
      const key = `${sectionId}|${subSectionId}`;
      if (!groups[key]) {
        groups[key] = { section_id: sectionId, sub_section_id: subSectionId, topic_ids: [] };
      }
      groups[key].topic_ids.push(Number(cb.value));
    });

    Object.values(groups).forEach(g => {
      PAYLOAD.push({
        section_id: g.section_id,
        sub_section_id: g.sub_section_id,
        topic_ids: g.topic_ids,
        dependent_topic_ids: depIds
      });
    });

    // reset selections after add
    setAll('.topic-checkbox', false);
    setAll('.dep-checkbox', false);

    renderPreview();
  };

  // Submit via AJAX
  document.getElementById('add_exam_syllabus').addEventListener('submit', function (e) {
    e.preventDefault();

    if (!PAYLOAD.length) {
      alert("Please add at least one mapping to preview.");
      return;
    }

    const form = this;
    const formData = new FormData(form);

    fetch("{% url 'add_exam_syllabus' %}", {
      method: "POST",
      body: formData,
      headers: { "X-Requested-With": "XMLHttpRequest" }
    })
    .then(r => r.json())
    .then(resp => {
      if (resp.status === 'success') {
        alert("Saved successfully");
        location.reload();
      } else {
        document.getElementById('msg').innerHTML = `<div class="text-danger">${resp.msg || 'Something went wrong'}</div>`;
      }
    })
    .catch(err => {
      console.log(err);
      alert("Server error");
    });
  });

  // init
  updateCounts();
  renderPreview();
})();
</script>