<?php

/**

 * Subjects Manual Entry Form

 */

?>

<div class="row-counter">

    <span><i class="fas fa-book me-2"></i>Entering Subjects - <span id="row-count">1</span> record(s)</span>

    <button type="button" class="btn btn-sm btn-primary" onclick="addRow()">

        <i class="fas fa-plus me-2"></i>Add Another Subject

    </button>

</div>



<div id="rows-container">

    <!-- Row 1 -->

    <div class="data-row mb-4 p-3 border rounded">

        <div class="d-flex justify-content-between mb-3">

            <h6 class="text-primary">Subject #1</h6>

            <span class="remove-row" onclick="removeRow(this)" title="Remove this subject">

                <i class="fas fa-times-circle"></i>

            </span>

        </div>

        <div class="row">

            <div class="col-md-4 mb-3">

                <label class="form-label">Subject Name <span class="text-danger">*</span></label>

                <input type="text" class="form-control" name="subjects[0][subject_name]" placeholder="e.g., Mathematics" required>

            </div>

            <div class="col-md-4 mb-3">

                <label class="form-label">Subject Code <span class="text-danger">*</span></label>

                <input type="text" class="form-control" name="subjects[0][subject_code]" placeholder="e.g., MATH" required>

            </div>

            <div class="col-md-4 mb-3">

                <label class="form-label">Status</label>

                <select class="form-select" name="subjects[0][active]">

                    <option value="yes">Active</option>

                    <option value="no">Inactive</option>

                </select>

            </div>

        </div>

        

        <h6 class="bg-light p-2 mb-3 mt-3">Class Assignment (Optional)</h6>

        <div class="row">

            <div class="col-md-4 mb-3">

                <label class="form-label">Class Name</label>

                <select class="form-select" name="subjects[0][class_name]">

                    <option value="">-- Select Class to Assign --</option>

                    <option value="Nursery 1">Nursery 1</option>

                    <option value="Nursery 2">Nursery 2</option>

                    <option value="KG 1">KG 1</option>

                    <option value="KG 2">KG 2</option>

                    <option value="Class 1">Class 1</option>

                    <option value="Class 2">Class 2</option>

                    <option value="Class 3">Class 3</option>

                    <option value="Class 4">Class 4</option>

                    <option value="Class 5">Class 5</option>

                    <option value="Class 6">Class 6</option>

                    <option value="JHS 1">JHS 1</option>

                    <option value="JHS 2">JHS 2</option>

                    <option value="JHS 3">JHS 3</option>

                </select>

            </div>

            <div class="col-md-3 mb-3">

                <label class="form-label">Class Score %</label>

                <input type="number" class="form-control" name="subjects[0][class_score_percent]" value="50" min="0" max="100">

            </div>

            <div class="col-md-3 mb-3">

                <label class="form-label">Exam Score %</label>

                <input type="number" class="form-control" name="subjects[0][exam_score_percent]" value="50" min="0" max="100">

            </div>

            <div class="col-md-2 mb-3">

                <label class="form-label">Compulsory?</label>

                <select class="form-select" name="subjects[0][is_compulsory]">

                    <option value="yes">Yes</option>

                    <option value="no">No</option>

                </select>

            </div>

        </div>

        

        <div class="alert alert-info mt-2 mb-0">

            <i class="fas fa-info-circle me-2"></i>

            You can assign this subject to multiple classes by adding another row with the same subject name/code.

        </div>

    </div>

</div>



<script>

let rowCount = 1;



function addRow() {

    const container = document.getElementById('rows-container');

    const template = container.children[0].cloneNode(true);

    

    // Update indices

    rowCount++;

    template.querySelectorAll('[name^="subjects"]').forEach(input => {

        const name = input.getAttribute('name');

        input.setAttribute('name', name.replace(/\[\d+\]/, `[${rowCount-1}]`));

        if (input.type !== 'select-one') {

            input.value = input.name.includes('class_score_percent') ? '50' : 

                         (input.name.includes('exam_score_percent') ? '50' : '');

        } else {

            input.selectedIndex = 0;

        }

    });

    

    // Update header

    template.querySelector('h6.text-primary').textContent = `Subject #${rowCount}`;

    

    container.appendChild(template);

    document.getElementById('row-count').textContent = rowCount;

}



function removeRow(btn) {

    if (rowCount > 1) {

        btn.closest('.data-row').remove();

        rowCount--;

        document.getElementById('row-count').textContent = rowCount;

        

        // Renumber remaining rows

        document.querySelectorAll('.data-row').forEach((row, index) => {

            row.querySelector('h6.text-primary').textContent = `Subject #${index + 1}`;

            row.querySelectorAll('[name^="subjects"]').forEach(input => {

                const name = input.getAttribute('name');

                input.setAttribute('name', name.replace(/\[\d+\]/, `[${index}]`));

            });

        });

    }

}

</script>