alrahma_sunday_school/app/Views/administrator/events/event_charges.php

<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>

<div class="container mt-5">
    <h3>Event Charges</h3>

    <?php if (session()->getFlashdata('success')): ?>
        <div class="alert alert-success"><?= session()->getFlashdata('success') ?></div>
    <?php endif; ?>
    <?php if (session()->getFlashdata('error')): ?>
        <div class="alert alert-danger"><?= session()->getFlashdata('error') ?></div>
    <?php endif; ?>

    <!-- Add New Charge Form -->
    <form action="<?= site_url('payment/event_charges') ?>" method="post">
        <?= csrf_field() ?>
        <div class="row">
            <div class="col-md-3 mt-3">
                <label for="event_id" class="form-label">Select Event</label>
                <select name="event_id" id="event_id" class="form-select" required>
                    <option value="">-- Select Event --</option>
                    <?php foreach ($events as $event): ?>
                        <option value="<?= esc($event['id']) ?>">
                            <?= esc($event['event_name']) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="col-md-3 mt-3">
                <label for="parent_id" class="form-label">Parent</label>
                <select id="parent_id" name="parent_id" class="form-select" required>
                    <option value="">-- Select Parent --</option>
                    <?php foreach ($parents as $parent): ?>
                        <option value="<?= $parent['id'] ?>">
                            <?= esc($parent['firstname'] . ' ' . $parent['lastname']) ?> (<?= esc($parent['school_id']) ?>)
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="col-12 mt-3" id="studentCheckboxContainer" style="display: none;">
                <label>Select Students:</label>
                <div id="studentList" class="row"></div>
            </div>           
        </div>

<button type="submit" class="btn btn-primary mt-3">Submit</button>
    <a href="<?= site_url('administrator/events') ?>" class="btn btn-success mt-3">Event List</a>
    </form>
<br>
    <!-- Charge Tables grouped by event -->
    <?php
        $grouped = [];
        foreach ($charges as $charge) {
            $label = $charge['event_name'] ?? 'N/A';
            $grouped[$label][] = $charge;
        }
    ?>

    <?php if (empty($grouped)): ?>
        <div class="alert alert-info">No charges found.</div>
    <?php else: ?>
        <?php foreach ($grouped as $eventLabel => $rows): ?>
            <div class="card mb-4">
                <div class="card-header bg-light fw-semibold">
                    <?= esc($eventLabel) ?>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped mb-0 no-mgmt-sticky">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Parent Name</th>
                                    <th>Student Name</th>
                                    <th>Charged Amount</th>
                                    <th>Is Participating</th>
                                    <th>Semester</th>
                                    <th>Year</th>
                                    <th>Created</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($rows as $charge): ?>
                                    <tr>
                                        <td><?= esc($charge['id']) ?></td>
                                        <td><?= esc($charge['parent_firstname'] . ' ' . $charge['parent_lastname']) ?></td>
                                        <td>
                                            <?= $charge['student_firstname']
                                                ? esc($charge['student_firstname'] . ' ' . $charge['student_lastname'])
                                                : '-' ?>
                                        </td>
                                        <td>$<?= esc(number_format($charge['charged'] ?? 0, 2)) ?></td>
                                        <td>
                                            <?= $charge['participation']
                                                ? '<span class="badge bg-success">Yes</span>'
                                                : '<span class="badge bg-warning">No</span>' ?>
                                        </td>
                                        <td><?= esc($charge['semester'] ?? '-') ?></td>
                                        <td><?= esc($charge['school_year'] ?? '-') ?></td>
                                        <td><?= esc(!empty($charge['created_at']) ? local_datetime($charge['created_at'], 'm-d-Y H:i') : '') ?></td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

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

<?= $this->section('scripts') ?>
<script>
function loadStudentsWithCharges() {
    let parentId = $('#parent_id').val();
    let eventId = $('#event_id').val();
    let semester = '<?= esc($semester) ?>';
    let schoolYear = '<?= esc($school_year) ?>';

    if (parentId && eventId) {
        $.get('<?= base_url('administrator/get-students-with-charges') ?>', {
            parent_id: parentId,
            event_id: eventId,
            semester: semester,
            school_year: schoolYear
        }, function(data) {
            let container = $('#studentList');
            container.empty();

            if (data.length > 0) {
                $('#studentCheckboxContainer').show();
                data.forEach(student => {
                    container.append(`
                        <div class="col-md-4">
                            <div class="form-check">
                            <input type="hidden" name="participation[${student.id}]" value="no">
                            <input class="form-check-input" type="checkbox" name="participation[${student.id}]" value="yes" id="student_${student.id}" ${student.charged ? 'checked' : ''}>
                            <label class="form-check-label" for="student_${student.id}">
                                ${student.name}
                            </label>
                            </div>
                        </div>
                        `);
                });
            } else {
                $('#studentCheckboxContainer').hide();
            }
        }, 'json');
    } else {
        $('#studentCheckboxContainer').hide();
        $('#studentList').empty();
    }
}

$('#parent_id').on('change', loadStudentsWithCharges);
$('#event_id').on('change', loadStudentsWithCharges);
</script>
<?= $this->endSection() ?>