alrahma_sunday_school/app/Views/grading/participation.php

<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>
<?php
$scoresLocked = !empty($scoresLocked);
$lockAttr = $scoresLocked ? 'disabled' : '';
?>
<div class="container-xxl py-5">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
            <br>
            <h2 class="text-dark" style="font-family: Arial, sans-serif;">Participation Scores</h2>
        </div>

        <?php if (session()->get('status')): ?>
            <div class="alert alert-success">
                <?= session()->get('status') ?>
            </div>
        <?php endif; ?>
        <?php if ($scoresLocked): ?>
            <div class="alert alert-warning">
                Scores are locked for this class. Unlock to edit.
            </div>
        <?php endif; ?>
 <div class="d-flex justify-content-between mt-4 flex-wrap gap-2">
                <button type="submit" class="btn btn-success" <?= $lockAttr ?>>
                    <i class="bi bi-save"></i> Save Changes
                </button>
                <a href="<?= base_url('/grading') ?>" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Back to Scores
                </a>
            </div>
        <form action="<?= base_url('grading/updateParticipationScore') ?>" method="post"
            onsubmit="return validateForm()">
            <?= csrf_field() ?>
            <input type="hidden" name="semester" value="<?= esc($semester) ?>">
            <input type="hidden" name="school_year" value="<?= esc($schoolYear) ?>">
            <table id="participationTable" class="table table-bordered mt-4 w-100" data-no-mgmt-sticky>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>School ID</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th class="text-center">Participation Score</th>

                    </tr>
                </thead>
<tbody>
    <?php foreach ($students as $index => $student): ?>
        <tr>
            <td><?= $index + 1 ?></td>
            <td><?= esc($student['school_id']) ?></td>
            <td>
                <a href="#" class="text-decoration-none" data-family-student-id="<?= (int)($student['student_id'] ?? 0) ?>">
                    <?= esc($student['firstname']) ?>
                </a>
            </td>
            <td>
                <a href="#" class="text-decoration-none" data-family-student-id="<?= (int)($student['student_id'] ?? 0) ?>">
                    <?= esc($student['lastname']) ?>
                </a>
            </td>
            <td>
                <input type="number" name="final_score[<?= esc($student['student_id']) ?>][score]"
                    value="<?= esc($student['score'] ?? '') ?>" class="form-control text-center" min="0" max="100" step="0.01"
                    placeholder="Enter score (optional)" <?= $lockAttr ?>>
            </td>
        </tr>
    <?php endforeach; ?>
</tbody>

            </table>

            <div class="d-flex justify-content-between mt-4 flex-wrap gap-2">
                <button type="submit" class="btn btn-success" <?= $lockAttr ?>>
                    <i class="bi bi-save"></i> Save Changes
                </button>
                <a href="<?= base_url('/grading') ?>" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Back to Scores
                </a>
            </div>
        </form>

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

<?= $this->section('scripts') ?>
<script>
  (function ($) {
    // Numeric ordering plug-in that reads the value inside an input
    if ($ && $.fn && $.fn.dataTable && !$.fn.dataTable.ext.order['dom-num-input']) {
      $.fn.dataTable.ext.order['dom-num-input'] = function (settings, col) {
        return this.api()
          .column(col, { order: 'index' })
          .nodes()
          .map(function (td) {
            const val = $('input', td).val();
            const num = parseFloat(val);
            return Number.isFinite(num) ? num : -Infinity;
          });
      };
    }

    function initParticipationTable() {
      if (!($ && $.fn && $.fn.DataTable)) return;

      const $table = $('#participationTable');
      if (!$table.length) return;

      // Keep data-order synced with live input value
      $table.on('input', 'input[type="number"]', function () {
        const num = parseFloat(this.value);
        this.closest('td')?.setAttribute('data-order', Number.isFinite(num) ? num : -Infinity);
      });

      const totalCols = $table.find('thead th').length;
      const scoreCols = [];
      for (let i = 4; i < totalCols; i++) scoreCols.push(i);

      $table.DataTable({
        paging: false,
        info: false,
        searching: false,
        autoWidth: false,
        order: [[2, 'asc'], [3, 'asc']],
        columnDefs: [
          { targets: 0, orderable: false, searchable: false },
          { targets: 1, className: 'text-nowrap' },
          ...(scoreCols.length ? [{ targets: scoreCols, orderDataType: 'dom-num-input', orderSequence: ['desc', 'asc'], type: 'num' }] : []),
        ],
        fixedHeader: {
          header: true,
          headerOffset: typeof getFixedHeaderOffset === 'function' ? getFixedHeaderOffset() : 0,
        },
        drawCallback: function () {
          const api = this.api();
          api.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
            cell.textContent = i + 1;
          });
        },
      });
    }

    $(document).ready(initParticipationTable);
  })(jQuery);
</script>
<?= $this->endSection() ?>