alrahma_sunday_school/app/Views/attendance/attendance_tracking.php

<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>
<div class="container">
    <h2 class="text-center mt-4 mb-3"><?= $title ?></h1>
    <div class="d-flex justify-content-center mb-2">
        <div class="col-12 col-lg-10">
            <?= $this->include('partials/academic_filter') ?>
        </div>
    </div>

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

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

    <div class="card mb-4">
        <div class="card-header">
            <h5>Record Attendance</h5>
        </div>
        <div class="card-body">
            <form action="<?= base_url('attendance/record') ?>" method="post">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="student_id">Student</label>
                            <select class="form-control" id="student_id" name="student_id" required>
                                <option value="">Select Student</option>
                                <?php foreach ($students as $student): ?>
                                    <option value="<?= $student['id'] ?>"><?= $student['name'] ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="date">Date</label>
                            <input type="date" class="form-control" id="date" name="date" required value="<?= local_date(utc_now(), 'Y-m-d') ?>">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="is_present">Status</label>
                            <select class="form-control" id="is_present" name="is_present" required>
                                <option value="1">Present</option>
                                <option value="0">Absent</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary">Record</button>
                    </div>
                </div>

                <div class="row mt-3" id="reasonRow" style="display: none;">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="reason">Reason for Absence</label>
                            <textarea class="form-control" id="reason" name="reason" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="col-md-6 d-flex align-items-end">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_reported" name="is_reported" value="1">
                            <label class="form-check-label" for="is_reported">
                                Reported Absence
                            </label>
                        </div>
                        <div class="form-check ml-3">
                            <input class="form-check-input" type="checkbox" id="notified" name="notified" value="1">
                            <label class="form-check-label" for="notified">
                                Parent Notified
                            </label>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5>Student List</h5>
        </div>
        <div class="card-body">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Student Name</th>
                        <th>Total Absences</th>
                        <th>Last Absence Date</th>
                        <th>Last Absence Reason</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($students as $student): ?>
                        <tr>
                            <td><?= $student['name'] ?></td>
                            <td><?= $student['total_absences'] ?></td>
                            <td>
                                <?= $student['last_absence'] ? local_date($student['last_absence']['date'], 'm-d-Y') : 'N/A' ?>
                            </td>
                            <td>
                                <?= $student['last_absence']['reason'] ?? 'N/A' ?>
                            </td>
                            <td>
                                <a href="<?= base_url('attendance/view/' . $student['id']) ?>" class="btn btn-sm btn-info">
                                    View Details
                                </a>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    // Show reason field when absent is selected
    document.getElementById('is_present').addEventListener('change', function() {
        const reasonRow = document.getElementById('reasonRow'); 
        if (this.value === '0') {
            reasonRow.style.display = 'flex';
        } else {
            reasonRow.style.display = 'none';
        }
    });
</script>
<?= $this->endSection() ?>