<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>
<div class="container-fluid">
  <div class="wrapper">
    <div class="content">
      <h2 class="text-center mt-4 mb-3">Auto-Distribute Students into Sections</h2>

      <div class="card">
        <div class="card-body">
          <div class="row g-3 align-items-end mb-2">
            <div class="col-md-2">
              <label for="sectionCount" class="form-label">Number of Sections</label>
              <input type="number" min="1" id="sectionCount" class="form-control" placeholder="e.g. 2" />
            </div>
            <div class="col-md-2">
              <label for="minStudents" class="form-label">Minimum Students</label>
              <input type="number" min="1" id="minStudents" class="form-control" placeholder="e.g. 20" />
            </div>
            <div class="col-md-2">
              <label for="maxStudents" class="form-label">Maximum Students</label>
              <input type="number" min="1" id="maxStudents" class="form-control" placeholder="Optional" />
            </div>
            <div class="col-md-3 d-flex gap-2">
              <button type="button" id="refreshTotalsBtn" class="btn btn-outline-secondary">Refresh Totals</button>
              <button type="button" id="generateAllBtn" class="btn btn-primary">Generate All</button>
            </div>
            <div class="col-md-3 text-end">
              <span id="pageMsg" class="small text-muted"></span>
            </div>
          </div>

          <div class="table-responsive">
            <table class="table table-sm table-striped align-middle no-mgmt-sticky" id="classesTable">
              <thead class="table-light">
                <tr id="tblHeader">
                  <th>Class</th>
                  <th>Total</th>
                  <th>Sections</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody id="tblBody"></tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
  </div>
  
</div>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<input type="hidden" id="csrfName" value="<?= esc(csrf_token()) ?>" />
<input type="hidden" id="csrfValue" value="<?= esc(csrf_hash()) ?>" />
<script>
(function(){
  const selectedYear = '<?= esc($selectedYear ?? '') ?>';
  const totalsUrl = '<?= site_url('administrator/sections/promotion-totals') ?>?school_year=' + encodeURIComponent(selectedYear);
  const distUrl   = '<?= site_url('administrator/sections/auto-distribute') ?>';

  const tblBody   = document.getElementById('tblBody');
  const tblHeader = document.getElementById('tblHeader');
  const sectionCountInput = document.getElementById('sectionCount');
  const minInput = document.getElementById('minStudents');
  const maxInput = document.getElementById('maxStudents');
  const msgEl     = document.getElementById('pageMsg');
  const refreshBtn= document.getElementById('refreshTotalsBtn');

  let headerSections = []; // list of generated section names as columns
  let rowIndexByClassId = {}; // mapping to locate rows

  function selectedSectionCount() {
    const count = parseInt(sectionCountInput.value || '0', 10);
    return count > 0 ? count : '';
  }

  function ensureSectionColumns(sectionNames) {
    // Add any new section name as a column if not already present
    sectionNames.forEach(function(name){
      if (!name) return;
      if (headerSections.indexOf(name) >= 0) return;
      headerSections.push(name);
      const th = document.createElement('th');
      th.textContent = name;
      tblHeader.appendChild(th);
      // Also add empty cell to each existing row
      document.querySelectorAll('#tblBody tr').forEach(function(tr){
        const td = document.createElement('td');
        td.dataset.section = name;
        td.textContent = '';
        tr.appendChild(td);
      });
    });
  }

  function buildInitialTable(rows) {
    tblBody.innerHTML = '';
    rowIndexByClassId = {};
    headerSections = [];
    // Remove dynamically-added section cols, keep the first four fixed
    while (tblHeader.children.length > 4) tblHeader.removeChild(tblHeader.lastElementChild);

    rows.forEach(function(r){
      const tr = document.createElement('tr');
      tr.dataset.classId = r.class_id;
      tr.dataset.classSectionId = r.class_section_id;
      tr.dataset.className = r.class_section_name || '';

      const tdName = document.createElement('td');
      tdName.textContent = r.class_section_name || '';
      tr.appendChild(tdName);

      const tdTotal = document.createElement('td');
      tdTotal.className = 'text-end';
      tdTotal.textContent = r.total;
      tr.appendChild(tdTotal);

      const tdNeed = document.createElement('td');
      tdNeed.className = 'text-end need-cell';
      tdNeed.textContent = selectedSectionCount();
      tr.appendChild(tdNeed);

      const tdAct = document.createElement('td');
      const btn   = document.createElement('button');
      btn.className = 'btn btn-sm btn-primary';
      btn.textContent = 'Generate Sections';
      btn.addEventListener('click', function(){ runDistribution(r.class_section_id, r.class_section_name); });
      tdAct.appendChild(btn);
      tr.appendChild(tdAct);

      tblBody.appendChild(tr);
      rowIndexByClassId[r.class_id] = tr;
    });

    rows.forEach(function(r){
      if (Array.isArray(r.sections) && r.sections.length) {
        renderSectionsForRow(r.class_section_name || '', r.sections);
      }
    });
  }

  function updateNeeds() {
    document.querySelectorAll('#tblBody tr').forEach(function(tr){
      const needCell = tr.querySelector('.need-cell');
      if (needCell) needCell.textContent = selectedSectionCount();
    });
  }

  function runDistribution(baseSectionId, baseName) {
    const sectionCount = parseInt(sectionCountInput.value || '0', 10);
    const minStudents = parseInt(minInput.value || '0', 10);
    const maxStudents = parseInt(maxInput.value || '0', 10);
    if (!sectionCount || sectionCount <= 0 || !minStudents || minStudents <= 0) {
      msgEl.textContent = 'Enter number of sections and minimum students first.';
      return;
    }

    msgEl.textContent = 'Distributing ' + (baseName || '') + '...';
    const fd = new FormData();
    fd.append('class_section_id', String(baseSectionId));
    fd.append('section_count', String(sectionCount));
    fd.append('min_students_per_section', String(minStudents));
    if (maxStudents > 0) fd.append('max_students_per_section', String(maxStudents));
    fd.append('school_year', selectedYear);
    // CSRF
    const csrfNameEl = document.getElementById('csrfName');
    const csrfValueEl= document.getElementById('csrfValue');
    if (csrfNameEl && csrfValueEl) {
      fd.append(csrfNameEl.value, csrfValueEl.value);
    }
    return fetch(distUrl, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' }, body: fd })
      .then(r => r.json())
      .then(res => {
        // refresh CSRF if provided
        if (res && res.csrfTokenName && res.csrfHash) {
          if (csrfNameEl) csrfNameEl.value = res.csrfTokenName;
          if (csrfValueEl) csrfValueEl.value = res.csrfHash;
        }

        if (!res || !res.ok || !Array.isArray(res.sections)) {
          msgEl.textContent = res && res.message ? res.message : 'Distribution finished with no sections.';
          return;
        }

        msgEl.textContent = res && res.message ? res.message : 'Completed.';

        renderSectionsForRow(baseName || '', res.sections);
      })
      .catch(() => { msgEl.textContent = 'Failed to distribute. Please try again.'; });
  }

  function renderSectionsForRow(baseName, sections) {
    const names = sections.map(s => s.class_section_name).filter(Boolean);
    ensureSectionColumns(names);

    const tr = Array.from(document.querySelectorAll('#tblBody tr')).find(function(_tr){
      return (_tr.children[0].textContent || '') === (baseName || '');
    });
    if (!tr) return;

    sections.forEach(function(s){
      const td = Array.from(tr.querySelectorAll('td[data-section]')).find(cell => cell.dataset.section === s.class_section_name);
      if (!td) return;

      const studentNames = Array.isArray(s.student_names) ? s.student_names : [];
      td.innerHTML = '';
      const count = document.createElement('div');
      count.className = 'fw-semibold small mb-1';
      count.textContent = (s.total ?? studentNames.length) + ' students';
      td.appendChild(count);

      const list = document.createElement('div');
      list.className = 'small';
      list.style.whiteSpace = 'normal';
      list.textContent = studentNames.length ? studentNames.join(', ') : 'No students assigned';
      td.appendChild(list);
    });
  }

  function loadTotals() {
    msgEl.textContent = 'Loading totals...';
    fetch(totalsUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
      .then(r => r.json())
      .then(res => {
        if (!res || !res.ok) { msgEl.textContent = res && res.message ? res.message : 'Failed to load totals.'; return; }
        buildInitialTable(res.rows || []);
        updateNeeds();
        msgEl.textContent = '';
      })
      .catch(() => { msgEl.textContent = 'Failed to load totals.'; });
  }

  refreshBtn.addEventListener('click', function(){ loadTotals(); });
  document.getElementById('generateAllBtn').addEventListener('click', async function(){
    const sectionCount = parseInt(sectionCountInput.value || '0', 10);
    const minStudents = parseInt(minInput.value || '0', 10);
    if (!sectionCount || sectionCount <= 0 || !minStudents || minStudents <= 0) {
      msgEl.textContent = 'Enter number of sections and minimum students first.';
      return;
    }
    // Collect base sections from rows
    const rows = Array.from(document.querySelectorAll('#tblBody tr'))
      .map(tr => ({ id: tr.dataset.classSectionId, name: tr.dataset.className }))
      .filter(r => r.id);
    for (let i = 0; i < rows.length; i++) {
      const r = rows[i];
      msgEl.textContent = 'Distributing ' + (r.name || r.id) + ' (' + (i+1) + '/' + rows.length + ')...';
      // eslint-disable-next-line no-await-in-loop
      await runDistribution(r.id, r.name);
    }
    msgEl.textContent = 'All distributions completed.';
  });
  sectionCountInput.addEventListener('input', function(){ updateNeeds(); });

  loadTotals();
})();
</script>
<?= $this->endSection() ?>
