<?php

declare(strict_types=1);

require_once __DIR__ . '/../library/auth.php';

allow_roles(['admin', 'teacher']);

$school_id = (int) $_SESSION['school_id'];

$page_title = 'Student Attendance';

// ======================================================
// FETCH CLASSES
// ======================================================

$stmt = $pdo->prepare("
    SELECT

        id,
        class_name

    FROM classes

    WHERE school_id = ?

    ORDER BY class_name ASC
");

$stmt->execute([$school_id]);

$classes = $stmt->fetchAll(PDO::FETCH_ASSOC);

require_once __DIR__ . '/../include/header.php';

require_once __DIR__ . '/../include/sidebar.php';

?>

<div class="content-wrapper">

    <!-- ============================================== -->
    <!-- HEADER -->
    <!-- ============================================== -->

    <section class="content-header">

        <div class="container-fluid">

            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">

                <div class="mb-2 mb-md-0">

                    <h1 class="m-0">

                        <i class="fas fa-user-check text-success"></i>

                        Student Attendance

                    </h1>

                    <small class="text-muted">

                        Mark and manage daily attendance

                    </small>

                </div>

            </div>

        </div>

    </section>

    <!-- ============================================== -->
    <!-- CONTENT -->
    <!-- ============================================== -->

    <section class="content">

        <div class="container-fluid">

            <!-- ========================================== -->
            <!-- FILTER -->
            <!-- ========================================== -->

            <div class="card card-outline card-primary shadow-sm">
			

                <div class="card-header">

                    <h3 class="card-title">

                        <i class="fas fa-filter"></i>

                        Attendance Filters

                    </h3>
					

                </div>
				

                <div class="card-body">

                    <form id="attendanceForm" autocomplete="off">

                        <div class="row">

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

                                <label>

                                    Select Class *

                                </label>

                                <select
                                    name="class_id"
                                    id="class_id"
                                    class="form-control"
                                    required
                                >

                                    <option value="">

                                        Select Class

                                    </option>

                                    <?php foreach ($classes as $class) : ?>

                                        <option
                                            value="<?= (int) $class['id'] ?>"
                                        >

                                            <?= htmlspecialchars($class['class_name']) ?>

                                        </option>

                                    <?php endforeach; ?>

                                </select>

                            </div>

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

                                <label>

                                    Attendance Date *

                                </label>

                                <input
                                    type="date"
                                    name="attendance_date"
                                    id="attendance_date"
                                    class="form-control"
                                    value="<?= date('Y-m-d') ?>"
                                    required
                                >

                            </div>

                            <div class="col-12 col-md-3 mb-3 d-flex align-items-end">

                                <button
                                    type="button"
                                    id="loadStudentsBtn"
                                    class="btn btn-primary btn-block"
                                    onclick="loadStudents()"
                                >

                                    <i class="fas fa-search"></i>

                                    Load Students

                                </button>

                            </div>

                        </div>

                        <!-- ================================== -->
                        <!-- BULK ACTIONS -->
                        <!-- ================================== -->

                        <div class="row mt-2">

                            <div class="col-12">

                                <div class="d-flex flex-wrap">

                                    <button
                                        type="button"
                                        class="btn btn-success btn-sm mr-2 mb-2"
                                        onclick="markAll('Present')"
                                    >

                                        Present All

                                    </button>

                                    <button
                                        type="button"
                                        class="btn btn-danger btn-sm mr-2 mb-2"
                                        onclick="markAll('Absent')"
                                    >

                                        Absent All

                                    </button>

                                    <button
                                        type="button"
                                        class="btn btn-warning btn-sm mr-2 mb-2"
                                        onclick="markAll('Late')"
                                    >

                                        Late All

                                    </button>

                                    <button
                                        type="button"
                                        class="btn btn-info btn-sm mb-2"
                                        onclick="markAll('Leave')"
                                    >

                                        Leave All

                                    </button>

                                </div>

                            </div>

                        </div>

                        <!-- ================================== -->
                        <!-- DESKTOP TABLE -->
                        <!-- ================================== -->

                        <div class="table-responsive mt-4 d-none d-md-block">

                            <table class="table table-bordered table-hover">

                                <thead class="thead-light">

                                    <tr>

                                        <th width="120">

                                            Roll No

                                        </th>

                                        <th>

                                            Student Name

                                        </th>

                                        <th width="120">

                                            Section

                                        </th>

                                        <th width="220">

                                            Status

                                        </th>

                                        <th>

                                            Remarks

                                        </th>

                                    </tr>

                                </thead>

                                <tbody id="attendanceTable">

                                    <tr>

                                        <td
                                            colspan="5"
                                            class="text-center p-5 text-muted"
                                        >

                                            Select class and load students

                                        </td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                        <!-- ================================== -->
                        <!-- MOBILE CARDS -->
                        <!-- ================================== -->

                        <div
                            id="attendanceCards"
                            class="d-block d-md-none mt-4"
                        >

                        </div>

                        <!-- ================================== -->
                        <!-- SAVE BUTTON -->
                        <!-- ================================== -->

                        <div class="mt-4 text-right">

                            <button
                                type="submit"
                                id="saveAttendanceBtn"
                                class="btn btn-success"
                                style="display:none;"
                            >

                                <i class="fas fa-save"></i>

                                Save Attendance

                            </button>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </section>

</div>

<!-- ============================================== -->
<!-- JS -->
<!-- ============================================== -->

<script src="<?= WEB_ROOT ?>assets/plugins/jquery/jquery.min.js"></script>
<link
    rel="stylesheet"
    href="<?= WEB_ROOT ?>Attendance/assets/attendance.css"
>

<script src="<?= WEB_ROOT ?>Attendance/assets/attendance.js"></script>

<?php require_once __DIR__ . '/../include/footer.php'; ?>